Frontend Mentor February 2020 Review
From now on, I thought it would be good to write a monthly review article to reflect on the previous month and also look ahead to the coming month.
It will be a great way to round up recent changes and also make announcements, like the Mentor of the Month award and highlighting our new community sponsors.
So let’s get into it…
Features & Updates
First off, a lot of you might not know this, but I don’t work on Frontend Mentor by myself. A friend of mine called Mike also works on it helping me out with the API side of the platform. So when I say “we” if I’m talking about the work we’re doing, that’s because it’s not just me doing the work!
This past month
Throughout February we were focused on two main themes:
- Prepare and launch the first premium challenge.
- Make refinements to the platform, which included bug fixes and smaller enhancements as opposed to big new features.
So here are the major changes that have been made:
- Prepping for the launch of the first premium challenge — This was the first major piece of work we were focused on. It included moving away from the Buy Me a Coffee links and integrating a new payment gateway with the platform. We chose to go for Paddle, which takes a lot of the admin work out of selling products internationally with the various tax laws. It also allows us to offer localised pricing for a number of different currencies.
- Launched the first premium challenge — Once everything was in place, we first put the Sketch files live with Paddle. Then, I made some refinements to one of the premium challenge designs, prepared the starter code and put it live. It was really exciting to get to this point and I’m looking forward to launching more premium challenges soon. From now on, there will be a mixture of free and premium challenges being added to the platform.
- Bug fixing — We use Sentry to track bugs on the platform and we’ve got it integrated with Slack to notify us whenever there’s an error on the platform. There were a number of recurring bugs that we hadn’t spent any time looking to resolve, so we decided to block off some time to focus on this. The major ones came down to IE not supporting certain ES6+ syntax, so they were resolved with the addition of some polyfills. It feels great to finally not have Slack constantly going off with bug reports!
- Onboarding flow — Giving new users an easy way to immediately update their profile information and also join the newsletter and Slack community is something I’ve wanted to do for a while. So I’ve created a 3-step process for newly registered community members that makes it simple to do these things. I’d also like to create a /tour page, similar to Stack Overflow’s tour page that helps give more information about everything you can do on the platform. It’s not going to be in any upcoming sprints, but I’ll look to add it in the coming months.
- Solutions index screenshots — One thing that I’d like to improve on the platform is to provide a sense of how someone has done at a glance from the solutions index page. At the moment, you really need to dig into the solution page to see the project and there’s not much available as a summary. The first step to improving this was to make it so that the images on the index page are taken from the screenshot that gets created when you submit your solution. This gives a much better high-level view of the various solutions from the index page. This is still very much a work-in-progress, so please forgive how it currently looks and feel free to give feedback if you have any.
- Challenge index filtering & sorting — Filtering and sorting have been the most requested feature for quite some time. This is true for both the challenges index and solutions index pages. I was pleased to put filtering & sorting live on the challenges index as it definitely improves the discovery of challenges and will help massively as the library grows. I’ve not done this on the solutions index page though, as I’m planning a larger re-working of the solutions index page to help highlight categories of solutions, like popular solutions and solutions that are still needing feedback.
- Improved error handling with new error page and Sentry bug reporting modal — First off, I have to apologise about the old error page. It was just a blank screen with the text “Oops! Something appears to have gone wrong”. I always intended to come back and refine this, but I waited longer than I should have done! Now, I’m pleased to say that there is a much nicer error page. Also, if it’s a client-side error there’s now a nice bug reporting call-to-action where you can log the steps that happened leading up to the bug with Sentry. This will help us fix any bugs much quicker!
- Solution feedback visible on profile page — One of my aims with Frontend Mentor is to make it into a place where you can showcase your ability to others. This could be in the form of submitting solutions to the platform, but can also be showing your ability when providing code reviews. Reading other people’s code and analysing it is a critical part of being a developer and Frontend Mentor gives you the perfect place to practice this. Now, any feedback you give or code reviews you write will show up on your profile page. This makes it easy to see anyone’s past comments and learn from what they’ve said to others.
Over this coming month
- Prepping for the wider launch of Frontend Mentor on platforms like Product Hunt — To this day, I’ve still not done much promotion of Frontend Mentor. I’ve opted for incremental growth so that I can refine the platform while it grows at a slower rate. This has allowed me to focus on building a platform that is actually useful, instead of building a poor quality platform and going for growth too soon. There are still a lot of tweaks and changes to make before I’m completely happy with it, but I feel it’s the right time to start promoting it a bit more. Throughout this month I’ll be “launching” the site on platforms like Product Hunt and writing some articles that I’ll be publishing through various channels. If you’re interested to see how this goes be sure to join the Slack community for updates.
- Add a congratulations page after submitting a solution — This one’s a small refinement to the current flow. At the moment, you get directed to the solution page immediately after submitting, which is a slightly disjointed experience. I’ll be building in a “Congrats!” page that will give you more information on the next steps and making sure you give yourself the chance to get the feedback you’re looking for. I’ll also be adding a short “Challenge Review” box that will let you write a brief review of how you got on with the challenge. These reviews will then be shown on the challenge pages to help people who haven’t completed it get an idea of how others have found it.
- Review solution submission process — The current solution submission process is very basic. The form doesn’t provide much guidance as to how to ask for specific feedback from the community. It also doesn’t give you the opportunity to really reflect on your learnings from taking the challenge. I’ll be looking to completely re-work the solution submission process very soon.
- Review how questions and feedback are presented on the dashboard — The way that solution questions and feedback show up on the dashboard at the moment doesn’t provide much context. It’s hard to see what the challenge was that the solution is for and also missed out on a lot of other useful information. I’ll be reviewing this whole UI over the coming month as well.
Mentor of the Month
I mentioned last week in the Slack community that I’m going to be starting to award a “Mentor of the Month” each month. This will be awarded to someone who has been active in the community not only posting solutions but also giving feedback to others, helping them learn and improve. Providing code reviews is not only helpful to the community, but it’s also a great way to learn more yourself. I would strongly recommend anyone who wants to improve their front-end skills to start writing comments and feedback on other people’s solutions. Even a “Good job!” or “Nice work!” can be massively motivating to others!
As a thank you for being such a valuable member of the community the Mentor of the Month will win a 100% discount coupon that they can use to download a premium challenge. There’s only one on the site at the moment, but I’ll be adding more soon!
With that being said, I’m really happy to announce Bethany (@whimsicurl-creations) as the Mentor of the Month for February! 🥳
She’s new to the platform but has dived right in, completing 4 challenges and giving feedback to plenty of others on the site. Congratulations Bethany!
It’s been amazing seeing an uptick in the feedback being given on the platform lately. So please feel free to jump in and give feedback to others. You’ll learn a lot yourself by doing it!
I’ll be evolving and iterating the Mentor of the Month award as time goes on, so keep an eye out for any updates.
Thank you to everyone who is active in the community posting solutions, giving feedback and answering questions. It’s amazing to see everyone working together and hopefully, this is just the beginning!
Community sponsors for this month
Finally, I want to give a massive thank you to our community sponsors for March! These are all companies and products that I personally love and would strongly recommend checking out.
- ZEIT offers an amazing website hosting service, which is super simple to set up. Just connect your GitHub account, point to a repo and your site will be deployed. Perfect for your website and frontend hosting needs — especially since it’s free to get started!
- Sizzy is an extremely useful browser designed specifically to improve a developer’s workflow when building websites. You can fire up multiple device emulators and run them all in sync while building out your web pages. Perfect for helping build fully responsive websites!
- Triplebyte is a really nice offering if you’re looking for a new role. It’s a free service that lets you take a confidential quiz. Based on your results companies will pitch you for their vacant roles!
I hope you’ve enjoyed reading the first monthly review. I look forward to continuing this to keep you up-to-date with the latest changes, plans, news, and announcements for Frontend Mentor!
If you’ve got any feedback or suggestions, please do feel free to let me know. I’m always interested in hearing your thoughts.
Until next month, happy coding! 🙂
