(Re)focusing on the user

Working on side projects, especially over a long period of time, is hard. Keeping things in perspective is even harder. These past couple of months, we (the team behind 30 seconds of code) took a step back and tried to refocus our energy on the one factor that matters the most - the user!

To that end, we have delivered a few product and content updates and dealt with some of common issues our users faced.

Setting the stage

Sometime in September 2020 or so, we realized our build system was due for a refactor. For those unfamiliar, we use Gatsby and Node.js to parse content from half a dozen git repositories and convert it to a usable format for our website. The previous build system was the 3rd iteration, which was developed as a standalone build tool decoupled from Gatsby's data layer.

While the system itself was working fine, we were faced with a few challenges in terms of development. The key issues were a lack of modularity and the assumptions made about the data available in each build step. None of those were user-facing problems per se, but they limited what we could do, slowing down the development of new features.

To deal with these problems, we restructured the entire backend codebase, delivering a monstrosity of a PR that ensured we could work a lot faster. We even included a handy console REPL for development. This took the better part of a month to deliver, but was very much worthwhile.

Takeaways

• Maintenance isn't glamorous and can feel like a waste of development time, but it's really worth it in the long run.
• Sometimes you have to deliver large PRs that span across hundreds of files. Testing code thoroughly helps increase confidence.

Small incremental changes

As the development hurdles were now overcome, we started focusing on delivering small changes that would benefit users. Those included small UI/UX improvements, such as a more concise highlighting of actions, some SEO and accessibility changes and a little bit of design polishing.

One important change we made was using content-visibility: auto to optimize rendering in snippet listings. This seems to have had a positive impact on both our Lighthouse score and the general performance of the page. web.dev has a fantastic article on the topic, we highly recommend checking it out here.

Some other highlights include an RSS feed, which was a long-standing request, a redesigned navigation bar and content management tools like post scheduling. On a side note, our Twitter bot was now running off of the same GitHub repository, minimizing context-switching in development.

Takeaways

• Incremental changes and smaller tasks help deliver updates faster.
• content-visibility is a very powerful property. Pay special attention to contain-intrinsic-size for best results.

New content

Another long-standing request was the addition of algorithmic content. During the Christmas staycation, we had plenty of time to work on algorithmic snippets, adding 30 or so of them, launching a new JavaScript Algorithms collection on our website.

Moreover, we started to track content ideas internally, creating a pool of content that we might someday deliver. This, in combination with the aforementioned post scheduling functionality has allowed us to plan ahead, ensuring a stable stream of content for the next couple of months.

Takeaways

• Creating content is hard. Inspiration can be scarce. Keep track of ideas, plan ahead, write more.
• Create the content your users want, not the content you find easy to create.
• Design for content. Don't write content around a design.

Towards collections

The last few days we've started working on a major rework of the user experience, one that should help deal with a lot of discoverability issues in our ever-growing collection of snippets and articles.

The first step towards this rework was adding descriptions and customizable titles to our collections, as well as reworking the position and style of the page controls.

As this is part of a larger effort to help users in their journeys and improve overall user experience, we plan to deliver some changes to the homepage, an autocomplete feature (hopefully) and customized collections targeted to specific user needs.

Takeaways

• Catering to user needs seems to positively impact SEO scores.
• Automation can only go so far. Sometimes you have to handcraft the user experiences you want.

Until the next time, you can find us at 30secondsofcode.org and follow us on Twitter.