Solution reporting is now live! 🎉

Last week I published a post announcing plans to launch a new reporting feature on the Frontend Mentor platform. If you’d like to read up on the details you can read the post here.

Today, I’m pleased to announce that the feature is now live on the platform!

This means that whenever you submit a solution to the platform a report will automatically be generated to give you insights into your code.

However, there is one difference from the report I outlined in the original announcement and the reports that have been pushed live. You’ll notice that there aren’t any CSS validations in the report. This is because throughout testing the CSS validations didn’t actually add many useful insights to the report. Also, in some circumstances, they were actually extremely confusing for some people. For example, using CSS custom properties raises validation errors because they are still only Candidate Recommendation status. This is the case for a lot of the newer CSS features, including some vendor prefixes.

So the CSS validation reports were rarely adding value, therefore I decided to just take them out entirely. What will add serious value on the CSS side is generating a statistical breakdown of your CSS code, which is the next phase of development for the reports.

Generate a report for an existing solution

If you have already submitted solutions to the platform you can take these steps to generate a report for an old solution:

1. Go to your solution page and click the vertical ellipsis (three vertical dots) next to the solution title.
2. Select “Edit Solution”
3. At the bottom of the solution form you should now see a new button that says “Generate New Report”. Click that and wait until you see the green banner saying the report has been created.
4. Re-visit your solution page and you should see a “Reports” section, where you can view your report!

Next steps

First of all, I’d love to hear how you’re getting on with the new feature! If you have any questions or comments please let me know!

The next phase of development will be to build the CSS stats report that will allow you to get a statistical overview of your CSS code. This will then allow you to dive deeper into analysing your code, regardless of your skill level, so that you can improve how you write your CSS.

I hope you all really love the reporting feature and find it useful to get more insights into your front-end code.

I can’t wait to see you all using it!