It’s that time again to get learning! As before, I’ve collected a number of different learning resources, including guides, docs, and other useful websites to help you get up to speed in different areas of front-end development.
So please enjoy the eleventh installment of our Docs and Guides series and don’t forget to let me know in the comments of any others that I haven’t yet included.
An HTML Canvas syntax cheatsheet, available in regular web format or as a downloadable PDF or PNG. This cheatsheet has a good overview starting with the basics (shapes, text, colors, etc.) and moving on to more advanced features (images, transformations, animations).
An extensive W3C guide providing details for authoring accessible pages using ARIA Landmarks and headings. In addition to the info in the various pages (which cover everything from banner roles regions), the pages have interactive buttons at the top of the page that allow you to view the landmarks and headings visually, which is useful for identifying the organization and structure of a web page.
Not so much a guide in itself, but a tool to help you decide which guides, tutorials, etc., to look for. It’s basically a web app in the style of a to-do list that lets you indicate which web platform and Node.js technologies you know or don’t know. The list starts off very broadly and lets you drill down to more specific features under each category.
In case you haven’t noticed, the Fetch standard, which is a modern replacement for XMLHttpRequest, now has pretty strong browser support. If you’re looking into making the transition from older techniques to this new API, the official spec might be a decent place to start.
8. npm vs. Yarn Cheat Sheet
A visual guide to CSS, divided into basic categories that include illustrated and animated examples to help you understand different properties and their possible values.
I’ve featured the desktop version of Dash before, but this is the iPad and iPhone version. Dash is a free and open-source API Documentation Browser that gives your iPad and iPhone instant offline access to 150+ API documentation sets, including Bootstrap, Angular, CoffeeScript, Ember.js, Node.js, Meteor, and tons more for both front-end and back-end developers.
I know what you’re thinking: Not another ES6 cheat sheet! This one is pretty cool, though. It’s organized into 9 sections with 31 code examples. Each example has a CodePen code comparison of the old way of doing things compared to the ES6 way of doing things.
A guide from Google on the hot topic of PWAs: “To help teams create the best possible experiences we’ve put together this checklist which breaks down all the things we think it takes to be a Baseline PWA, and how to take that a step further with an Exemplary PWA by providing a more meaningful offline experience, reaching interactive even faster and taking care of many more important details.”
14. AMP by Example
This website gives a hands-on introduction to Accelerated Mobile Pages based on code and live samples. It will help you learn how to create web pages with AMP and how to use AMP components.
A checklist from the folks at WebAIM, for helping you to get your pages Section 508 compliant. The guide is available online or as a PDF and it’s divided into two sections of content: 1) HTML 2) Scripts and Plug-ins.
Kenneth Wang’s “concise, referential guide on best web typographic practices.” Includes tips on design, sizing and units with CSS, and font formats.
A quick introduction and explanation of ES6 Modules, a module system inspired by Node.js modules. Although ES6 Modules don’t have much browser support yet, this is a nice guide to get a head start on what to expect. There’s also a comparison with CommonJS.
A searchable collection of resources for Sass developers including tools, tutorials, libraries, and more.
Lastly, let’s finish this list with a collection of self-care resources from Jennifer Lyn Parsons. Includes tips, articles, and tools on exercise, positivity, journaling, and more. All tech workers will benefit from making good health and well-being a priority, and this might be a good starting point.
Best of the Rest…
- Browserify Handbook
- The SaaS CTO Security Checklist
- HTTP Status Dogs
- The Ultimate Angular CLI Reference Guide
- CSS Frameworks Comparison
- Front-end Performance Checklist
- The Open Guide to Amazon Web Services
- Web Development Podcasts
- The Docker Cheatsheet Collection
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.
In the meantime, 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)
- 20 Docs and Guides for Front-end Developers (No. 6)
- 20 Docs and Guides for Front-end Developers (No. 7)
- 20 Docs and Guides for Front-end Developers (No. 8)
- 20 Docs and Guides for Front-end Developers (No. 9)
- 20 Docs and Guides for Front-end Developers (No. 10)