20+ Docs and Guides for Front-end Developers (No. 8)

In recent months, I’ve collected a number of different learning resources, including guides, docs, and other useful websites to help in learning different front-end technologies. I’ve rounded up some of the best ones in this post.

So please enjoy the eighth installment of our Docs and Guides series and don’t forget to let me know of any others that I haven’t yet included.

1. Keyboard Event Viewer

A configurable, interactive tool that allows you to view data on keyboard events, showing legacy info as well as event information as outlined in the UI Events Specification.

2. jQuery Quick API Reference

A one-page cheat sheet of jQuery features, covering versions of jQuery up to 1.10/2.0. Just click a feature and it will open the page from jQuery’s docs in a modal window.

3. BugRex

Ok, this is not so much a “doc” but more of an interactive help guide where you can chat with an expert. As the site explains: “The BugRex chat is operated by a community of developers who truly enjoy helping others. Use it to understand new concepts, ask questions or fix annoying bugs.”

4. Global CSS Property Usage

If you enjoyed SitePoint’s recent CSS Survey then you might also appreciate this data, compiled by the Microsoft Edge team. They scan over one million web pages quarterly to compile usage stats on CSS properties. And it’s searchable too!

5. Performance Tooling Today

A collection of resources to help you improve your workflow and to deliver better and faster websites. Resource categories include tools, articles, videos, slide decks, books, courses, and performance audits.

6. Opera Mini Tips

“A collection of front-end development features not supported by Opera Mini and some crowdsourced workarounds for them.”

7. Touch Keyboard Type Cheat Sheet

Baymard Institute, an organization that does e-commerce usability research, has put together a guide to encourage developers to optimize form fields for touch keyboards. For example, how to set the appropriate type and when to use attributes like autocorrect, autocapitalize, etc. The page’s forms are testable on a touch device.

8. HTML5 Cheat Sheet

An attractive and simple cheat sheet for HTML5 tags and their meanings, available as a PDF or PNG.

9. Diff of HTMLs

“Unofficial diff viewer for WHATWG HTML Standard and W3C HTML 5.1. The Diff of HTMLs provides side-by-side diff view of each section between the specifications.”

Diff of HTMLs

10. CSS Support Guide for Email Clients

“A complete breakdown of the CSS support for the top 10 most popular mobile, web and desktop email clients on the planet.”

11. Babel User Handbook

A comprehensive guide written by James Kyle that covers Babel, the popular JavaScript compiler, covering everything you’ll need to know about using Babel and related tools.

Not a new project, but the site has been recently redesigned. It’s a “community-driven effort to make web accessibility easier.” Includes accessibility-related how-tos, myths, tests, tips, information on assistive technology, and more.

13. Flexbox playground

An interactive flexbox CodePen demo that lets you easily test the different properties and values.

14. Hypertext Transfer Protocol Version 2 (HTTP/2)

The proposed standard specification for HTTP/2.

15. JS Tips

A project by Joel Lovera that provides an archive of JavaScript tips. The project was originally supposed to provide a new tip each day, but it doesn’t look like that’s been maintained. Still a good resource for quick tips though.

16. LMHT

A searchable HTML tags reference specifically designed to help Spanish speakers understand HTML terminology, including audio recordings to hear the definitions in English and Spanish. It looks like the reference is still low on content, but you can contribute if able.