Solution reporting is coming soon to Frontend Mentor!
This is an update I’ve been extremely excited to give for a while now. The last couple of months have seen me not do as much work on Frontend Mentor as I would have liked.
A mixture of holidays and contract work have meant that development work has been slower than usual. But then again, it’s been so nice to take a break over the summer and I also still need to keep the money coming in with contract work to support the site!
Solution reporting
I’ve been planning this feature since early summer. I’ve always wanted everyone to have the ability to receive immediate insights into their solution for any given challenge. Comments and support from the community are invaluable, but I also wanted to provide the tools for you to analyse your own codebase regardless of skill level.
Each project is so much more than just how it looks vs the design. Questions like “are there any accessibility issues?” or “how maintainable is this codebase?” are ones that every front-end developer should be asking.
So, I’m excited to announce that reporting for challenge solutions will soon be coming to the Frontend Mentor platform!
What this means is that when you submit your solution to the platform, a report will be generated based on the Live Preview URL that you provide. At first, the report will be broken down into two sections.
Accessibility
Using the amazing Pa11y module, an accessibility report is created to highlight any accessibility issues that can be picked up through automated testing. Accidentally creating inaccessible social icons and forms are common patterns for beginner developers, so the report will highlight these issues.
Once errors or warnings are shown, you can do some more research into the correct patterns and correct any issues.
Whenever you update your solution code you can then generate a new report to make sure there aren’t any new issues.
Errors & Warnings
This tab will show any issues when it comes to HTML and CSS validations. Your solution will be run through W3C HTML & CSS validation checks and any errors or warnings will be included in your report.
It can be easy to accidentally duplicate an ID or not add a heading inside a section. These audits will help bring these issues to your attention.
You’ll be able to view all of the reports generated for a given solution, so you can track the evolution of your codebase over time.
Additional reports in the pipeline
Accessibility and validations reports are just the beginning. Over time I intend to build out more and more comprehensive reporting for challenge solutions.
A couple of reports that are currently in the works are detailed below.
CSS Stats
Being able to see a detailed graphical breakdown of your codebase will help you dive deeper into the analysis of where improvements could be made.
Statistics on your CSS will include breakdowns of things like selector specificity, ruleset size, alongside insights into your choice of CSS units and more. These visualisations and summaries will aim to provide you with the information to then research further into writing more maintainable, higher quality CSS.
Suggested improvements
Based on your code, a prioritised list of suggested improvements will be generated.
This will help provide immediate feedback on your code and a roadmap for how it could be improved. Items will be categorised as either high, medium, or low priority based on how important they are towards creating a quality codebase.
Suggestions welcome
I hope you like what’s in store for the platform!
Over the summer I’ve been doing lots of research and have even had a team of UX students from General Assembly (where I teach) conducting user interviews.
It’s been so fun planning this feature. If you have any immediate feedback or suggestions for other types of report you’d like to see, please message me. I’d love to hear your thoughts!
Stay updated
You can also follow Frontend Mentor on Twitter. If you’re not on it, please do sign up to the newsletter for more news and to see featured solutions from the community.
