Wednesday, April 21, 2021
More

    20 Docs and Guides for Front-end Developers

    Must Read

    Programmerhttp://www.improgrammer.net
    We started this site to inspire young minds to motivate and encourage them towards Programming Language. In this site you will get programming tutorials, tech, programming facts, programming fun and programming blogs.

    It is that time again to choose the tool or technology that you want to brush up on. If you feel like you have been working hard at building, but maybe not learning as much as you’d like, I’ve got your back. I have listed 20 Docs and Guides for Front-end Developers as below.

    Please enjoy our Docs and Guides series and don’t forget to let us know of any others that we haven’t yet included in this post.

    HTML Book

    HTMLBook
    HTMLBook

    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 HTML & CSS Workmanship Manual

    HTML & CSS Workmanship Manual
    HTML & CSS Workmanship Manual

    A good HTML/CSS style guide to help developers write “durable, reliable” code, loosely inspired by NASA’s Workmanship Standards Program.

    ECMAScript 6 Cheatsheet

    ECMAScript 6 Cheatsheet
    ECMAScript 6 Cheatsheet

    I don’t think we can have too many ES6 learning resources, so here’s another one. The ES6 is a huge step forward in JavaScript’s history and this reference will give you ‘everything about the latest version of the ECMAScript standard’.

    DevTools Challenger

    DevTools Challenger
    DevTools Challenger

    An interactive site that demonstrates how to use the new animation-related features present in Firefox Developer Edition. Explore the deepest secrets of the Ocean.

    Six Speed

    Six Speed
    Six Speed

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

    React Cheat Sheet

    React Cheat Sheet
    React Cheat Sheet

    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.

    ECMAScript 6 — New Features: Overview & Comparison

    ECMAScript 6
    ECMAScript 6

    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.

    U.S. Web Design Standards

    U.S. Web Design Standards
    U.S. Web Design Standards

    “Open source UI components and visual style guide to create consistency and beautiful user experiences across the U.S. federal government website.”

    Mac OS X Dev Setup Reference

    Mac OS X Dev Setup Reference
    Mac OS X Dev Setup Reference

    “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 dot files/scripts to automate the setup” of a number of different tasks.

    Interactive WCAG 2.0

    Interactive WCAG 2.0
    Interactive WCAG 2.0

    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.

    Kinetic Email CSS Support

    Kinetic Email CSS Support
    Kinetic Email CSS Support

    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.

    ECMAScript® 2016 Language Specification

    ECMAScript® 2016
    ECMAScript® 2016

    The official ECMAScript specification, which is now edited on GitHub, in a single-page, easy to use HTML format, with filter option.

    How DNS works

    How DNS works
    How DNS works

    “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.”

    StaticGen

    StaticGen
    StaticGen

    A filterable “leaderboard of the top open-source static site generators.” Lets you filter by language, GitHub stars, forks, and open issues.

    Font Family Reunion

    Font Family Reunion
    Font Family Reunion

    A filterable compatibility chart for default local fonts on just about any OS. The table informs you if the font is supported, aliases, or will revert to the default font for the OS.

    Perf.Rocks

    Perf.Rocks
    Perf.Rocks

    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.

    Website Style Guide Resources

    Website Style Guide Resources
    Website Style Guide Resources

    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.

    Doiuse…?

    Doiuse
    Doiuse

    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.

    Package.json

    Package.json
    Package.json

    “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.”

    Promise Cookbook

    Promise Cookbook
    Promise Cookbook

    A brief introduction to using Promises in JavaScript.

    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.

    See more:

    Top skills for front-end web developer

    15 New JavaScript Libraries for Developers

    Latest Articles

    More Recipes Like This