She's making a list, she's checking it twice!
My mind works in mysterious ways. I bounce from idea to idea, and sometimes struggle to keep focus. I have come to love lists... Todoist, Trello, Notion, Bullet Journaling... I use and love them all! They help me organise my thoughts and prioritise my ideas and tasks. So, I have compiled this list of lists to put your front-end web development minds in order! I know, so meta... 😉
So, here it is:
General Front-End
The Front-End Checklist
A comprehensive checklist by David Dias, that covers most, if not all aspects of Front-End Development. It is organized by area of interest, eg HTML, CSS, Performance to give us a clear roadmap of the issues we should check like the meticulous developers we are. Even better the issues are further broken down by priority. Awesome!
Front-End Performance Checklist - The efficient version
The iconic front-end annual performance checklist by Vitaly Friedman of Smashing Magazine. It's a lot to digest, it covers a lot of theory and best practices.. but if you are already familiar with it all, just skip to the handy PDF provided! Let's make the interwebz faster than the Flash!
Front-End Performance Checklist - The not-so efficient version
Another option for a front-end performance checklist, to make sure we cover ALL the bases. It contains a lot of links for performance tools and references. I'm missing the easy online checklist format, and some of the references need to be updated. But all in all, a treasure trove of information.
React
A React Performance Checklist
A cool article by Ohans Emmanuel for LogRocket, where he takes a sample app and goes through the following checklist, explaining the best practice behind each item:
- Identify wasted renders
- Extract frequently updated regions into isolated components
- Use pure components when appropriate
- Avoid passing new objects as props
- Use the production build
- Employ code splitting
Take a peek!
React Vulnerabilities Checklist
A blog post by the company SecureCoding, laying out some possible React security vulnerabilities that we need to keep in mind. Apparently, React as a library is more secure than frameworks like Angular, etc. as it has a smaller "attack surface" (Googling as we speak..).
Pre-Launch Checklist
Website Launch Checklist - The short version
A very aesthetically pleasing TODO-style checklist with issues to cover before we deploy a new website. Made by Fraser Boag.
Website Launch Checklist - The super long list (80 items!)
Should you wish to realize the sheer amount of stuff you need to check before, during and after you deploy a website, check out this very thorough list by Hubspot.
Accessibility
Accessibility is gaining more and more traction, and even smaller companies prioritize it in their project budget. There have been cases where bigger companies have been sued for not making their websites accessible. We as developers should push the envelope as much as possible. These two checklists will help you audit your projects for accessibility.
The A11Y Project - Checklist
The official checklist from The A11Y Project , using the Web Content Accessibility Guidelines
React Accessibility Detailed Guide
Going into React we need to keep digital accessibility in mind. React's official documentation contains a plethora of information and specific guidelines to make our React application accessible.
I hope you find this helpful! If you have any feedback at all, let me know in the comments! Now on to the next one! 🤓