DEV Community

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.

Discussion (17)

Collapse
chandrasd profile image
Chandra Dasari

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

Collapse
enbonnet profile image
Ender Bonnet

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

Collapse
rezi profile image
Tomas Rezac

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/

Collapse
zakokor profile image
Gonzalo Aragón

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.

Collapse
ioan profile image
Luca Ionescu

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

Collapse
_ronini profile image
Ronnie Villarini

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

Collapse
hassankrayem profile image
HassanKrayem

Very useful 👍

Collapse
gilad profile image
Gilad Tsehori

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

Collapse
jamesthomson profile image
James Thomson • Edited

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

Collapse
toastking profile image
Matt Del Signore

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

Collapse
ezequiel_caste profile image
Ezequiel_Caste

Thanks! Nice list to have.

Collapse
junedmullani profile image
junedmullani

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

Collapse
yunusemreozcan profile image
yunusemreozcan

You can purchase to Screpy lifetime subscription on AppSumo.

Or you can become a standard member for only $ 2 per month on Screpy.

Collapse
gwllmnn profile image
Grégoire Willmann

Great list Klaudia!

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

Collapse
thedaviddias profile image
David Dias

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-... 😉

Collapse
effingkay profile image
Klaudia Author

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

Forem Open with the Forem app