loading...

Front End Checklist

effingkay profile image Klaudia ・2 min read

This article was originally published on my personal blog and can be found here.

Just before I call website done and abandon it, I like to go through these to make sure everything is in place.

This my personal list that I put together over time, I know there's lots of different checklists out there already but I made my own with the resources I found most useful and the ones I like to use. I included other similar checklists at the bottom of the page, just for completion.

HTML and CSS

Accessibility checks

Security checks

Image optimisation

Performance

// Preload resources you have high-confidence 
// will be used in the current page. 
// Prefetch resources likely to be used for future navigations 
// across multiple navigation boundaries.

`<link rel="prefetch" href="image.png">
<link rel="preload" href="image.png">`

Other checklists

https://codeburst.io/the-front-end-checklist-8b2292fdda44
https://github.com/thedaviddias/Front-End-Checklist

Last words

If you have any other tips and resources that you'd like to share, plese do. You can always ping me on twitter (I rarely check it) or don't hesitate to open a PR with newly added links, I welcome any additions :) You can find this article on github here.

Posted on by:

Discussion

markdown guide
 

This is great list! Squoosh would be pretty good add on to image optimization category.

 

Thanks for share Klaudia, we made a list of Frontend Tools github.com/enBonnet/Frontend-Tools if you want to look it, we hope this help someone like your post

 

Good to see people use FE checklist. I have only implementation of mine one, which can be used by teams as each checklist has its TODO like state synchronisation. Just create new one copy unique link and send it to your team ;) You are welcome to use it: docket.work/

 

Thank you for putting together and sharing this list, it's very useful!

 

Thanks Klaudia, very useful...maybe you could create a list with this links and share on Pegao.co, my open source project :) I would be happy to know if that is useful for you too.

 
 

I think there are also some services that check if your code is written using best practices (or rather avoiding bad practices 🙂)

 

For JS, it's usually (eslint)[eslint.org/], but that's done while developing so more of a constant validator rather pre-launch.

 

Chrome has some really nice tools for time to interactive and accessibility. The lighthouse checks in the audit tab of dev tools are sweet!

 

Nice! I'll be sure to check some of these when we're ready to publish our current project! Thanks for sharing 😀

 
 

Great list Klaudia!

Do you manually check all of the links/items?
It would be great if we could automate these checks :)

 
 

great work. This is good list but if you want more click here.

 

Hey Klaudio, thanks for sharing that list! I know another Front-End Checklist that has a lot you can use github.com/thedaviddias/Front-End-... 😉

 

Hi David,

Thanks for commenting.

Couple of notes:

  • it's Klaudia, not Klaudio
  • I literally linked that very same project above
  • but you know, thanks for reading the article! Much appreciated

Regards,
Klaudia