20+ Docs and Guides for Front-end Developers (No. 6)
It’s that time again to choose the tool or technology that you want to brush up on. If you feel like you’ve been working hard at building but maybe not learning as much as you’d like, I’ve got your back.
Please enjoy the sixth installment of our Docs and Guides series and don’t forget to let us know of any others that we haven’t yet included in this or a previous post.
An interactive site that demonstrates how to use the new animation-related features present in Firefox Developer Edition.
A good HTML/CSS styleguide to help developers write “durable, reliable” code, loosely inspired by NASA’s Workmanship Standards Program.
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.
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).
“Open source UI components and visual style guide to create consistency and beautiful user experiences across U.S. federal government websites.”
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.
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.
“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 dotfiles/scripts to automate the setup” of a number of different tasks.
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.
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.
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.
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.
a filterable compatibility chart for default local fonts on just about any OS. The table informs you if the font is supported, aliased, 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.
“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.”
- An alt Decision Tree
- Google Ranking Factors
- Checklist / collection of SEO tips
Here are the previous posts in this series:
- 20 Docs and Guides for Front-end Developers (No. 1)
- 20 Docs and Guides for Front-end Developers (No. 2)
- 20 Docs and Guides for Front-end Developers (No. 3)
- 20 Docs and Guides for Front-end Developers (No. 4)
- 20 Docs and Guides for Front-end Developers (No. 5)
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.