HTML & CSS
Article

20 Docs and Guides for Front-End Developers (No. 4)

By Louis Lazaris

It’s that time again to get learning! Well, in this industry, that time is always I suppose. This is the fourth of such posts I’ve put together and this might be the best one yet.

I’ve stumbled across and collected lots of different guides and learning resources in recent months and this is the latest installment.

Enjoy!

1. Loupe

This is “a little visualisation to help you understand how JavaScript’s call stack/event loop/callback queue interact with each other.” It’s interactive, allowing you to include your own custom code and then execute it, and there’s also a video presentation on the same topic.

Loupe

2. First Aid Git

“A searchable collection of the most frequently asked Git questions.” This looks useful for anyone with average or below average skills with Git. Currently has 38 separate topics that can be found via an on-page search filter.

First Aid Git

3. Periodic Table of ARIA 1.0 Roles & Attributes

This is two separate pages — which I suppose brings this list to 21 — documenting detailed info on ARIA roles and attributes.

Periodic Table of ARIA 1.0 Roles

Just click on a role or attribute and an overlay will display information from the spec on that feature.

Periodic Table of ARIA 1.0 Attributes

4. Is Service Worker Ready?

The Service Workers specification is a promising (no pun intended!) new standard that isn’t quite ready for production because of lack of browser support and being still in flux. This little info site has a description of the spec’s features and how they measure up in the different browsers.

Is Service Worker Ready?

5. Browser support for broken/missing images

This is something we probably all take for granted most of the time. This is a CodePen-based document by Bart Veneman that outlines exactly how the different browsers/OSes handle broken images (with placeholder, alt text, border, etc.)

Browser support for broken/missing images

6. 2014 Responsive Report

This is an annual responsive survey conducted by the folks at Gridset. Over 1000 participants in this survey provide information on challenges they face in their RWD workflow, in relation to clients, testing, and so forth. The survey also looks at optimism (or lack of it), trends, and tools used in RWD.

2014 Responsive Report

7. Typography Cheatsheet

“A comprehensive guide to using proper typographic characters, including correct grammatical usage.” Also available as a one-page PDF, this includes the keyboard shortcuts to produce the different characters for both Mac and Windows, which can be handy.

Typography Cheatsheet

8. ARIA Examples

Accessibility expert Heydon Pickering’s excellent compilation of HTML examples demonstrating different use cases for various ARIA features. Demos and code for 9 different examples. A really nice starting point for anyone looking to get into advanced ARIA implementation.

ARIA Examples

9. ES5 Mobile Compatibility Table

This is a little different and a little more specific as far as compat tables go. It’s a look at all the JavaScript features introduced in ES5 and how they measure up in different mobile browsers.

ES5 Mobile Compatibility Table

10. iOS Fonts

“Every font. Every iOS version.” Speaking of being really specific and mobile, this is an insta-filterable list of which fonts are available on iOS devices, including the Apple Watch.

iOS Fonts

11. CSS Filters Playground

A simple interface to mess around with the various parts of the filters spec. Useful also because you can choose a custom URL and even try it out with an iframe or video.

CSS Filters Playground

12. Git Cheatsheet

An interactive, clickable cheatsheet for Git commands. The different sections have deep linking too, which is a nice bonus for sharing.

Git Cheatsheet

13. Keycodes

A quick-access little info site to obtain codes for keyboard keys, unicode characters, and URL-encoded characters for use in HTML, CSS, or JavaScript.

Keycodes

14. Regular Expressions 101

A very nicely done little app to help you test and learn regular expressions. I like how it displays an “explanation” and “match information” and it lets you choose 3 different flavors of regex.

Regular Expressions 101

15. CIUM

This is a mobile app that “provides compatibility tables for features in HTML5, CSS3, JS API, SVG and other upcoming web technologies.” I’m assuming the name is supposed to be a play on “Can I Use Mobile”, but they don’t seem to use that exact phrase, probably to avoid copyright issues, but I’m not sure.

CIUM

16. DevTools Snippets

“A collection of helpful snippets to use inside of browser devtools.” Looks to be about 20 of them and you can contribute your own.

DevTools Snippets

17. Codrops CSS Reference

In case you missed this one, Codrops, with help from Sara Soueidan produced their own very nicely designed and comprehensive CSS reference.

Codrops CSS Reference

18. Screen Sizes

A really extensive list of mobile devices and laptops with their respective screen sizes. The devices even link to their product pages on Amazon.

Screen Sizes

19. Frontend Guidelines

One developer’s tips for code style in various aspects of HTML/CSS/JavaScript. Lots of good tips here.

Frontend Guidelines

20. CSS Ruler

A simple, interactive little tool to help you understand the different ways CSS handles relative and absolute font sizes.

CSS Ruler

Suggest Yours

If you have another suggestion for a learning resource, leave it in the comments. In the meantime, when you get through this one, you can check out the previous posts if you’ve missed those:

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.