Frontend curated reading list

Recommended reading list if you want to learn Frontend Engineering with depth.

• Frontend curated reading list
  • Engineering:
  • Web
  • Documentation
  • Frontend
  • HTML
  • CSS
  • JS
  • Design Systems
  • PWA
  • Styleguides
  • Tooling

Engineering:

• [Clean Code] https://engineering.videoblocks.com/these-four-clean-code-tips-will-dramatically-improve-your-engineering-teams-productivity-b5bd121dd150
• [SOLID Principles] https://scotch.io/bar-talk/s-o-l-i-d-the-first-five-principles-of-object-oriented-design
• [Design Patterns] https://sourcemaking.com/design_patterns
• [Design Antipatterns] https://sourcemaking.com/antipatterns
• [Code smells] https://sourcemaking.com/refactoring/smells
• [Refactoring] https://sourcemaking.com/refactoring/refactorings
• [Code Reviews] https://www.atlassian.com/agile/software-development/code-reviews

Web

• [Web architecture] https://engineering.videoblocks.com/web-architecture-101-a3224e126947
• [Web architecture] https://developers.google.com/web/fundamentals/architecture/app-shell
• [Performance] https://developers.google.com/web/fundamentals/performance/why-performance-matters
• [Security] https://developers.google.com/web/fundamentals/security

Documentation

• [Technical documentation] https://medium.com/swlh/technical-documentation-2096c96ecd5a
• [Technical documentation] https://plan.io/blog/technical-documentation/
• [Learning] https://developers.google.com/tech-writing

Frontend

• [Checklist] https://frontendchecklist.io/
• [Learning] https://www.freecodecamp.org/news/a-practical-guide-to-learning-front-end-development-for-beginners-da6516505e41/
• [Awareness] https://frontendmasters.com/books/front-end-handbook/2019/
• [Awareness] https://css-tricks.com/front-end-developer-aware/

HTML

• [Document Structure & Accessibility] https://html.com/semantic-markup/
• [Document Structure & Accessibility] https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
• [Document Structure & Accessibility] https://css-tricks.com/document-outline-dilemma/
• [Accessibility] http://web-accessibility.carnegiemuseums.org/
• [Accessibility] https://developers.google.com/web/fundamentals/accessibility
• [Accessibility] https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
• [Regex] http://html5pattern.com/
• [Accelerated Mobile Pages (AMP)] https://amp.dev/about/how-amp-works/

CSS

• [Specificity] https://dev.to/emmawedekind/css-specificity-1kca
• [Cascade & Specificity] https://dev.to/aspittel/css-from-zero-to-hero-3o16
• [CSS Cascade] https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
• [Responsive Web Design (RWD)] https://developers.google.com/web/fundamentals/design-and-ux/responsive
• [Responsive Web Design (RWD)] https://polypane.app/blog/responsive-design-ground-rules/
• [Responsive Web Design (RWD)] https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
• [Animations & Performance] https://developers.google.com/web/fundamentals/design-and-ux/animations
• [Critical Rendering Path (CRP)] https://blog.logrocket.com/how-css-works-parsing-painting-css-in-the-critical-rendering-path-b3ee290762d3/
• [Critical Rendering Path (CRP)] https://csstriggers.com/
• [Practice & Selectors] http://flukeout.github.io/
• [Practice & Flexbox] https://flexboxfroggy.com/
• [Practice & CSS Grid] https://codepip.com/games/grid-garden/
• [Learning] https://zendev.com/ultimate-guide-to-learning-css.html
• [Learning] https://dev.to/aspittel/css-from-zero-to-hero-3o16
• [Learning] https://medium.com/@devdevcharlie/things-nobody-ever-taught-me-about-css-5d16be8d5d0e
• [Learning & Advanced] https://medium.com/@sargalias/layout-in-css-634c3ca3dcff
• [CSS Architecture] https://seesparkbox.com/foundry/thoughtful_css_architecture
• [CSS Architecture] https://snipcart.com/blog/organize-css-modular-architecture
• [CSS Architecture] https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
• [CSS Best practices] https://paulcpederson.com/articles/css-for-people-who-hate-css/

JS

• [Learning] https://eloquentjavascript.net/
• [Learning] https://levelup.gitconnected.com/a-complete-beginners-guide-to-javascript-part-1-d04919d0cb19
• [Learning] https://addyosmani.com/resources/essentialjsdesignpatterns/book/
• [Best Practices] https://github.com/Courseography/courseography/wiki/JavaScript-Code-Etiquette

Design Systems

• [Learning] https://www.designsystems.com/
• [Learning] https://www.invisionapp.com/inside-design/design-systems-value/
• [Learning] https://noti.st/sturobson/yc1gwN/design-systems-and-front-end-architecture#saPZSRV

PWA

• [Learning] https://web.dev/progressive-web-apps/
• [Learning] https://www.freecodecamp.org/news/progressive-web-apps-101-the-what-why-and-how-4aa5e9065ac2/
• [Learning] https://www.smashingmagazine.com/2018/11/guide-pwa-progressive-web-applications/
• [Learning] https://www.smashingmagazine.com/2019/07/progressive-web-application-pwa-framework-part-1/
• [Learning] https://developers.google.com/web/ilt/pwa/core-technologies
• [Learning] https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc

Styleguides

• [HTML & CSS] https://google.github.io/styleguide/htmlcssguide.html
• [CSS] https://github.com/airbnb/css
• [JS] https://github.com/airbnb/javascript
• [React] https://github.com/airbnb/javascript/tree/master/react
• [SCSS] https://sass-lang.com/guide

Tooling

• [SCSS] https://medium.com/@js_tut/the-complete-guide-to-scss-sass-49ac053fcde5
• [PostCSS] https://www.toptal.com/front-end/postcss-sass-new-play-date
• [Webpack] https://webpack.js.org/guides/
• [ESLint] https://eslint.org/docs/user-guide/getting-started
• [Stylelint] https://stylelint.io/user-guide/get-started
• [Prettier] https://prettier.io/docs/en/index.html
• [Browserlist] https://css-tricks.com/browserlist-good-idea/
• [Editorconfig] https://editorconfig.org/
• [Emails] https://mjml.io/