Site development - An introduction to the category

Wow, apparently it was two years ago today when I pushed the first commit of Project27 Skills to GitHub. To some extent, this in itself is a success.

Two years after I began this new project, it is still remembered and even worked on. That’s pretty much one of the key goals of why I started Project27 Skills. I wanted a project, which is intentionally slow paced, but offers long term, continuous opportunities for expanding it, while learning new skills. In this first post on introducing the site development category, I would like to look back at the past two years, and briefly recap the history of this work.,

The origin

On 6th of October, 2019 I have pushed the first commit to the remote Project27 Skills GitHub server. This was mostly to start somewhere, and probably this is the time I heard about GitHub Pages, as a web hosting option. It’s simplicity attracted me. I already knew how to use basic git functionality, it was a free hosting option, I didn’t want more than static pages, and all it required was a toggle to be switched on. So I powered my website up with a few HTML pages in the repository.

I created a basic folder structure between my physics notes and old recipes, and used a few links on improvised landing pages in markdown documents to link things together. Then I got bored of the tedious work. In addition, at this time life became a little emotionally demanding, so I suppose this new hobby wasn’t my highest priority.

Jekyll - the first milestone

In March, April 2020, when the COVID19 pandemic meant that suddenly I had much more time at my hand, I picked up the project again. I persevered with copying and editing HTML templates, before the first milestone in the life of Project27 Skills. I heard of, learnt about, and finally made a transition to Jekyll.

I used to think there are static and dynamic websites, where static means your pages are set in stone from top to bottom, ready to be displayed. At this point for me dynamic pages meant that you have page templates with the visual design, header, footer, menus primarily set, and the main content is dynamically changed based on which page you are exactly at. Today, I’d like to think that I have a better understanding of the difference between static and dynamic web content. A page can be dynamic if a javascript function can be triggered by a user, then a piece of the content is updated on the fly.

That’s not quite what I was after when thinking I’ll make Project27 Skills into a dynamic site. I thought more along the lines of what Jekyll does. That is, I wanted to play LEGO on the web. I wanted to create modular structures on the site, where simple markdown notes can be slotted in easily into a more complex scaffolding.

Bootstrap - the second milestone

In may and June the same year I focused on getting the hang of Jekyll, and making the most out of its conditional statements, loops, variables, configuration file. As one big chunk of improvement, or a second milestone, I was able to bring Bootstrap into the project. A clear benefit of this was the grid system visual layout, as well as some new user interface elements, such as a button to toggle the navigation menu depending on the device you use - yes, making the site responsive - or to use dropdown menus.

Creating a minimum viable product (MVP)

Yet again, I had a long break from the project. After six months of not touching any code, in December 2020 and January, 2021 I put many work hours into really bringing Project27 Skills to live.

I redesigned the volume structure and I improved how cookbook works. This volume, the cookbook, became my focus and a way to really drill in with Jekyll engineering, and investing enough to a MVP of the project, which is functional, and acts as motivation for me to carry on. I added many new recipes into the cookbook volume, which meant that I was able to start using it on my phone whenever I wanted to look up an existing recipe. Other parts of the site were still in pieces, but there was already something that’s useful to me.

More advanced experimentation

This is the time when I started adding scripts to operate a freezer inventory, which combines a python script, the use of a bash terminal, and a Project27 Skills page. I added scripts for version counting, and automation of deployment. I renamed a few things, such as the “project-log” to “LogBook” or “Dancyclopedia” to “Guide”. I added a section for team and volunteering, as a potential future opportunity I’m thinking to fuel. I added a more extensive page explaining what the project is, and where its roadmap might take it. From January 2021 the site has steadily improved, gaining a more sustainable and scalable feel to it.

Expanding the Project27 Skills team

On 21st of May, 2021 Danielle pushed her first commit. That’s not a typo. Yes, Danielle has now joined the Project27 Skills team. While she took the lead on learning about visual styling, CSS, and in general how the site works, I was able to focus on slightly more advanced engineering work under the hood. Thanks to Danielle, since May the site has transformed from a black and white, often terribly looking set of pages, into a colourful, mostly well aligned website.

I improved how the grid layout on landing pages is generated. That is, from manually adding grid rows and columns, I focused more on a module on loops, that can read data from a data file, then turn it to a grid based on some offset and limit values, making it fairly flexible. Danielle sprinkled a few icons through Font Awesome into the mix, and by the summer of 2021 we started to really be proud of our baby.

Mindful use of interaction design and usability principles

It might not seem like a lot for a professional web developer, but if you think about it, we really started from ground 0, with practically no knowledge on web development. Just to illustrate, we had no clue what “class” really does in an HTML tag, or how to really work it.

Then less then two years later, here we are, adding breadcrumbs to pages, keeping in mind interaction design principles around information scent. We are figuring out how the previous and next post buttons in the pagination should be appearing as a disabled button, instead of disappearing when there are no more previous or next items, both visually and for screen readers through a mix of ARIA labels, Jekyll, and CSS classes. We are experimenting with javascript and Jekyll plugins.

Going agile

In the recent months, we decided to put my theoretical knowledge and interest in agile workflows, scrum techniques, and project management to practice. Our current focus is on tackling some existing issues, and filling the pretty solid scaffolding with content. After all, a healthy skeleton is no good if there is no meat on the bones.

Would you imagine, we spend hours to plan sprints, play estimation poker, prioritise the product backlog and so on.

Reflection on the journey so far

As you can probably tell, this two years taught me so much in the world of web hosting, site development, HTML, CSS, BASH, Jekyll, git, and much more. We are very far from a solid, perfect website, but we have a functional, minimum viable product for our own use. We hope to be back in another two years time with a similar project update, where we can report how much more we learnt, how much more Project27 Skills has matured, and what content we may be able to offer for all of you, who are interested in what we do.

Project27 Skills is celebrating its second birthday, we just about learnt how we can help it walk. The rest, such as learning to talk, going to school, is yet to come. I am honestly curious what Project27 Skills will grow to be by its graduation day.