Frontend dev check list
Books
- Fundamentals of Web Development (Randy Connolly and Ricardo Hoar).
I have the 2nd Ed but the 3rd Ed is out and is more contemporary.
Specific books for HTML and CSS are:
-
HTML and CSS - The Comprehensive Guide (decent contemporary introduction)
-
CSS in Depth
-
CSS The Definite Guide - 5th Ed - Reference
Specific books for JavaScript.
-
Javascript - The Comprehensive Guide (decent contemporary introduction)
-
Eloquent JavaScript - 3rd Ed
-
Javascipt - The Definite Guide - 7th Ed
And website performance:
- “High Performand Websites"
- "Even Faster Websites”
https://internetingishard.netlify.app/
Courses
https://www.joshwcomeau.com/courses/
Technical blogs
https://www.qualified.io/blog/posts/the-best-personal-software-engineering-blogs
Pearls of wisdom
https://www.baldurbjarnason.com/2021/100-things-every-web-developer-should-know/
Front-end mentors
- Exercism for UI/UX development https://www.frontendmentor.io/challenges
Jamstack architecture (FE + APIs)
- distributed persistent rendering (dynamic content that is cached by CDN)
- streaming updates from data layer
- developer collaboration
https://www.smashingmagazine.com/2021/05/evolution-jamstack/
Collection of Awesome Web Dev resources
- everything including
- CSS
- HTML
- HTTP
- ECMAScript
- … https://github.com/dypsilon/frontend-dev-bookmarks
Blogs / magazines
CSS
CSS and shadows
https://www.joshwcomeau.com/css/designing-shadows/
All things web dev
https://www.smashingmagazine.com/
JavaScript weekly
JavaScript ; Kent C Dodds
Dan Abramov - What is JavaScript made of
https://overreacted.io/what-is-javascript-made-of/
Dave Walsh blog on web dev
Alligator.io - web dev chewed up :sweat_smile:
Examples of awesome sites
Tiny SVG icons instead of FontAwesome for social icons https://github.com/edent/SuperTinyIcons
HTTP methods semantics
- in context of new SEARCH / QUERY method https://httptoolkit.tech/blog/http-search-method/
CORS
https://jakearchibald.com/2021/cors/
Tools to measure performance and suggest optimizations
test different screen sizes at once
analyze images and suggest optimizations
https://images.cloudflare.com/
puppeteer-webperf - measure performance
https://github.com/addyosmani/puppeteer-webperf#devtools-profile
compression of images
https://www.joshwcomeau.com/performance/embracing-modern-image-formats/
Interesting components
embeddable code editor
https://github.com/antonmedv/codejar