It is that time again to choose the tool or technology that you want to brush up on. If you feel like you have been working hard at building, but maybe not learning as much as you’d like, I’ve got your back. I have listed 20 Docs and Guides for Front-end Developers as below.
Please enjoy our Docs and Guides series and don’t forget to let us know of any others that we haven’t yet included in this post.
An unofficial specification initiated by O’Reilly Media for outlining an XHTML5-based standard for authoring and producing digital and print books. Lea Verou’s book CSS Secrets was written using this standard.
An interactive site that demonstrates how to use the new animation-related features present in Firefox Developer Edition. Explore the deepest secrets of the Ocean.
A chart that displays performance report information for different ES6 features relative to the ES5 baseline operations as rendered by various transpilers (Babel, Traceur, etc.).
React is officially the “current big thing” so this quick reference should be a big help. The page is filterable using a search form at the top and each feature includes a link to the official docs.
Another nice ES6 learning resource. What’s really great about this one is the fact that it has two code examples for each feature, including how the same thing is accomplished in ES5.
“Open source UI components and visual style guide to create consistency and beautiful user experiences across the U.S. federal government website.”
“Setting up a new developer machine can be an ad-hoc, manual, and time-consuming process. [This reference] aims to simplify the process with easy-to-understand instructions and dot files/scripts to automate the setup” of a number of different tasks.
A list of Web Content Accessibility Guidelines for various UI elements, filterable by WCAG level, responsibility (Front-end, design, UX, etc.). It also includes recommendations from both the W3C and WebAIM.
The following table lists the major HTML & CSS features that are commonly used by interactive and dynamic CSS techniques and their support among the major email clients.
The official ECMAScript specification, which is now edited on GitHub, in a single-page, easy to use HTML format, with filter option.
“A fun and colorful explanation of how DNS works… We made this comic to explain what happens when you type a website address in your browser.”
A filterable “leaderboard of the top open-source static site generators.” Lets you filter by language, GitHub stars, forks, and open issues.
A filterable compatibility chart for default local fonts on just about any OS. The table informs you if the font is supported, aliases, or will revert to the default font for the OS.
A single resource for finding articles, tools, videos, talks, slides, and books covering web performance. It’s well maintained and you can contribute your own stuff.
Style guides have been a pretty big thing for a couple of years now. This is a single resource that has compiled tools, articles, books, podcasts, and more just on the topic of style guides.
Paste in some CSS or a website URL and this site will tell you what browsers the CSS is compatible/incompatible with. You can do a general search or filter using the list keywords that Autoprefixer permits.
“This is an interactive guide for exploring various important properties of the package.json packaging format for node.js applications. You can access information about properties by mousing over or clicking the property name.”
If you’ve built or know of another learning resource for front-end developers, drop it in the comments and I’ll consider it for a future post.