Frontend Mentor April 2021 review

I hope you had a great month throughout April! Mine got off to an extremely slow start. Firstly, I took some time off over Easter weekend, which was really nice. Taking 4 days in a row off is something I haven’t done in a long time, and it was nice to get outside and stay away from screens for a short while. When I got back to working on Frontend Mentor, I had a not so exciting task to do: accounting. I had been putting it off for too long and because we moved into a new financial year, I decided to get my head down and work through it all. A solid 3 days later and I was out on the other side! However, my body must not have had an accountancy-related allergic reaction, as I then became ill! 😅 Nothing too serious, but it wiped me out for a good few days. So by the time I was ready to get back to “normal” Frontend Mentor work, it was nearly halfway through the month! These things happen, though, and you need to allow for diversions and unexpected events, so it’s all good.

One of my downfalls is being too optimistic with what I can get done in a given timeframe and then being hard on myself if I don’t hit my goals. This is something I need to work on!

I was on another podcast, which was cool. This time, it was The Stack Overflow Podcast! It was a lot of fun talking to the hosts, Sara and Ben, about my web development journey and building Frontend Mentor.

We had another brilliant month of growth in the community, with 12,137 new members signing up on the platform and nearly 5,000 people joining our Slack community. The Slack community is now over 50,000 members strong!

A massive welcome to all our new members 👋 I hope Frontend Mentor will help you reach your web development goals!

Features & Updates

This past month

• Refactor Styled Components — This is something I didn’t actually mention last month and it’s an update that doesn’t really change anything obvious on the platform. But it is critical nonetheless! As I’ve been building Frontend Mentor over the past couple of years, updates have been made to Styled Components that I haven’t revisited in the codebase. I was also not using it in the optimal way. So refactoring our Styled Components code was ApplePieGiraffe’s first big task working on the platform. It’s amazing how much better the code organisation is in the front-end codebase already and this change will allow us to move faster on future updates with more reusable components.
• Add query params to challenges index filter/sorting — This is an update that has been long overdue. Filtering and sorting challenges was a frustrating experience before, because we never saved the state when options were selected. This meant if you added filters and clicked through to a challenge then went back to the index you’d have to add the filters all over again. Now, we use query params in the URL to save the state in browser history. This means you can move around the site and if you press “back” to go back to the challenges index, your search state will be saved.
• Remove comment downvoting — When I was thinking through the first version of comments on Frontend Mentor, having both upvotes and downvotes on comments seemed to make sense to me. Good comments would get upvoted and unhelpful comments would get downvoted. That was the intention anyway! It seemed fine, as other forum-style platforms like Reddit and Stack Overflow have the same system. However, Frontend Mentor is different, and I’ve been feeling recently that downvotes actually don’t have a place on the platform. We always strive to be an open, supportive, and positive community where we all try to help each other improve and write better front-end code. Because of this, comments that could be seen as inappropriate or unhelpful have been remarkably rare. This is a testament to all the incredible people we have in our community! Plus, we’re here to help each other get better at coding, not to bash each other. So the downvote option has now been removed. Your options now are to upvote helpful comments, or not do anything. We will be adding a “Report” button soon to help anyone report inappropriate comments. As I mentioned, these are very rare, but as our community grows we want to ensure everyone has the tools to help keep our community an open, support, and positive place where we can all improve as developers.
• Lots of small tweaks and fixes — As always, there were lots of small tweaks and fixes that were made. If you ever spot any issues or have a request, please do feel free to let me know!

Last month, I mentioned we’re planning to move our API from Node.js and MongoDB to Ruby on Rails and Postgres. We still plan on doing this, but we’ve decided to put a pin in the migration until Mike (my co-founder) is full-time on the site in July.

The UI updates also didn’t get completed, but work has begun and I’m confident we’ll roll them out this month! 🎉

This coming month

• UI updates — I can’t wait to get these changes live. Another month has gone past where I’ve been pulled in different directions and not been able to work on these updates. With APG also working on the front-end codebase now, I’m confident that we’ll actually be able to ship these changes this month!
• Add “Mark as helpful” button to comments — As part of the UI updates for solution comments, we’ll also be changing how points are awarded on comments. When the changes go live, the solution author will have the option to mark the comment as helpful. Only the solution author will be able to do this and it will award extra points to the comment author. Upvotes will still increase your Mentor Score, but each upvote will count less than having your comment marked as helpful by the solution author.
• Plan “Suggested Improvements” report update — One of our next improvements to the PRO subscription will be to add a “Suggested Improvements” tab. What we plan to do is to build out a range of automated tests based on common best practices and challenge-specific situations. Whenever a PRO member submits a solution, we’d then run the code through these tests and generate Low, Medium, and High priority suggested improvements depending on the code. An example would be if someone has multiple h1 elements on a page, we’d generate a suggested improvement to only include a single h1 on the page and use h2 — h6 headings for any other headings based on the content hierarchy. We’d also link to resources to help learn more about the suggestions. We’ll be starting out with the general best practice recommendations, but in the future we’ll look to add challenge-specific tests. An example of a challenge-specific test would be on a project where there’s an email field. We’d check to see if type="email" is being used within the project. If not, we’d add a suggested improvement with resources linking to why using proper input type attributes improves UX and accessibility of forms. The challenge-specific suggested improvements won’t be overly prescriptive, but will aim to follow best practices based on each specific design. This feature means PRO subscribers would get guaranteed feedback on every solution submitted!

As always, there will be lots of small updates to be made, but these are the major tasks we’ll be tackling this month!

Mentor of the Month

Wall of Fame top 3 for April

A huge congrats to Raymart Pamplona for a winning a first-ever Mentor of the Month 1st place badge! Raymart has been extremely active in the community helping others with feedback and code reviews. It’s been great to see so much incredible feedback being given!

Also, a massive thanks and congrats to ApplePieGiraffe and Grace for 2nd and 3rd place respectively! As usual, APG and Grace have been giving some extremely helpful feedback and support to other community members.

If you haven’t tried giving feedback to anyone else on the platform yet I’d strongly recommend giving it a go! Not only are you helping and meeting other developers in the community, but there’s also so much to be learned by reading through other people’s code and giving feedback. Giving code reviews is a key part of being a professional developer, so our solutions are a perfect place to practice giving helpful feedback to others!

Feedback and ideas welcome

If you’ve got any feedback or ideas for Frontend Mentor, please do let me know. I love hearing how you’re using the platform. The best place to message me would be to DM in the Slack community.

I hope you have a great month ahead! 🙂