3 Essential Front-End Checklists for Web Developers
Ensure your web applications are air tight and high quality with these open source checklists covering engineering, design, and performance
You may have heard about the “Front-End Checklist” — a project that I launched in October 2017 on GitHub. It started out as a simple project to help my team in Mauritius but transformed into huge project with international support, receiving over 28,000 GitHub stars and translated into more than 10 different languages.
Since then, I have been diving deeper into additional checklists that could help me and the community to further improve our work. Here is a list of all the checklists currently available to help ensure the highest quality of your web applications. These essential checklists will empower you to launch your website with confidence and make sure you don’t miss a thing.
The Front-End Checklist
🚀 Launch date: October 2017
👩💻👨💻 Contributors: 75
⭐️ Stars: +28 400
🖥 Github URL: https://github.com/thedaviddias/Front-End-Checklist
🔗 Website: https://frontendchecklist.io
💯 Product Hunt: https://www.producthunt.com/posts/front-end-checklist
The Front-End Checklist is an exhaustive list of all elements a website should contain. You can use this as a resource before launching your website or adding a new HTML page to production. A version 2 is currently in progress that will provide more explanation and additional links for each rule.
The checklist started out as a small project aimed to help my team in Mauritius, and it has turned into a tool utilized by many front-end developers across the world.
The Front-End Design Checklist
🚀 Launch date: April 2018
👩💻👨💻 Contributors: 5
⭐️ Stars: +2600
🖥 Github URL: https://github.com/thedaviddias/Front-End-Design-Checklist
🔗 Website: https://frontenddesignchecklist.io/ (will be soon transferred to frontendchecklist.io)
💯 Product Hunt: https://www.producthunt.com/posts/front-end-design-checklist
The Front-End Design Checklist is an exhaustive list of guidelines which can help developers analyze and understand web design to ensure the quality of their front-end development. It is not just a tool for developers, it is useful for web designers we well.
If you have been working with web designers, you know that occasionally key technical elements for the developer can be forgotten. Instead of relying on “luck” or “hope”, establish a checklist that will unconditionally facilitate your workflow.
The Front-End Performance Checklist
🚀 Launch date: July 2018
👩💻👨💻 Contributors: +5
⭐️ Stars: +1500 (📈increasing fast)
🖥 Github URL: https://github.com/thedaviddias/Front-End-Performance-Checklist
🔗 Website: (will be soon on frontendchecklist.io)
💯 Product Hunt: https://www.producthunt.com/posts/front-end-performance-checklist
The Front-End Performance Checklist is an exhaustive list of resources focused on performance in front-end development. Each rule has a “why” and “how” section to help you understand what makes that rule important in just a few words and how you can fix your issues.
I have always been interested of front-end performance. I started working on this checklist to help my team at Influitive Engineering solve issues and improve the quality of our application. I decided to open-source this project too, hoping that it would help more people.
What’s coming next?
These 3 checklists are just the beginning. I’m already working on other useful and interesting checklists to help the community in having a simple but reliable workflow. I will also update the original website (https://frontendchecklist.io) to include all the checklists.
No of this could have been possible without all the contributors and the support these projects have received. Don’t hesitate to be part of that adventure too and help improve the content!
Thank you for reading!
In case you like these open-source projects and find them useful, here are some things you can do to show your support:
- Hit the clap 👏 button on this article a few times (don’t be afraid, you’ll not break anything)!
- Give a star ⭐️ on Github right now! (It helps keep me motivated to continue launching other open-source projects)
- Use these checklists during your work and give me your feedback by sending me a tweet on https://twitter.com/thedaviddias
