Tuesday, May 9, 2017

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

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 twelfth 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.

1. React Bits

A compilation of React Patterns, techniques, tips and tricks. Includes sections on design patterns, ant-patterns, performance tips, and styling. This looks like a really good reference for those wanting to dig deep into React.

React Bits

2. Vue.js Complete API Cheat Sheet

This cheat sheet is available as a simple PDF with a quick reference to the different features or as a fully interactive guide. The interactive guide works as a shortcut to the official Vue.js documentation, opening each link in an overlaid iframe.

Vue.js Complete API Cheat Sheet

3. CSS Grid Cheat Sheet

The W3C’s new Grid Layout module features have really been picking up steam of late since browser support improved. This interactive guide is a pretty complex little app with a ton of options. This might not be a great guide for beginners but maybe a good option for those already familiar with Grid Layout basics.

CSS Grid Cheat Sheet

4. Flexbox Cheatsheet

Flexbox (the other hotness in CSS layout) is represented in this cheatsheet. From what I can tell, this one is using the same descriptive info as the spec, but with some interactive code examples to help visualize the different features.

Flexbox Cheatsheet

5. Inclusive Components

This site is technically a blog, but works well as both a pattern library and a superb example of an accessible site. So far only two entries have been posted in the “library”, but both cover their topics exhaustively, so there’s plenty to take in and this is a good one to keep an eye on for future posts if you are concerned about accessibility (and you should be!).

Inclusive Components

6. A11y Style Guide

“The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.” Sections include forms, media, navigation, and more.

A11y Style Guide

Continue reading %20+ Docs and Guides for Front-end Developers (No. 12)%


by Louis Lazaris via SitePoint

No comments:

Post a Comment