146 Views

Latest and Hotest Docs and Guides for Front-End Developers

In the everchanging world of technology, you must always be learning to keep up with the changes and get ahead in your game. So here I have compiled a list of some of the latest and useful docs and guides for front-end developers. Enjoy.

  1. HTML Canvas Cheatsheet
    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).
    html5-cheatsheet.png
  2. ARIA Landmarks Example
    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.
  3. Clean Code JavaScript
    Developer Ryan McDermott has put together a comprehensive repository of software engineering principles, from Robert C. Martin’s book Clean Code, adapted for JavaScript. It’s a guide to producing readable, reusable, and refactorable software in JavaScript.
  4. Know it all
    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.
    know-it-all.png
  5. Mostly Adequate Guide to Functional Programming
    It seems like every week there’s a new resource on functional programming, but this one looks like a good option for experienced programmers and those not yet familiar with functional programming concepts. Written for JavaScript developers, this seems to be a work in progress. The first nine chapters are done and I think that’s plenty for anyone just getting started with this subject.
  6. Fetch Living Standard on WHATWG
    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.
    whatwg-fetch.png
  7. JavaScript Stack from Scratch
    This “minimalistic and straight-to-the-point guide to assembling a JavaScript stack” by Jonathan Verrecchia might help developers overcome the complexities of the current JavaScript ecosystem. The guide does not go into details about the individual technologies, but only demonstrates how you can get these up and running.
    javascript-from-scratch.png
  8. npm vs. Yarn Cheat Sheet
    Yarn is a JavaScript package manager that attempts to solve some of the problems with npm. Gant Laborde put together a little guide to help developers understand the differences should they want to make the switch. This is the PDF version of the article that has the same content.
    npm-vs-yarn.png
  9. CSS Reference
    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.
    css-reference.png
  10. Dash for iOS
    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.
    dash-for-ios.png
  11. ES6 Cheatsheet
    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.
    es6-cheatsheet.png
  12. Progressive Web App Checklist
    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.”
    progressive-webapp-checklist.png
  13. Byte-saving Techniques
    Based on an old code golf project called 140Bytes, this document has lots of quick JavaScript optimization tips and techniques. Note that some of these might not be practical in a real-world project as they could be problematic during code maintenance.
  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.
    amp-by-example
  15. WebAIM Section 508 Checklist
    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.
  16. Front-end Hyperpolyglot
    Jeff Carpenter’s comparison chart of similar features in popular JavaScript frameworks. If you’re considering using React, Angular, Ember, Polymer, Vue, or Riot.js, this breakdown will show you the syntax from each library on lots of different techniques common in these kinds of libraries and frameworks.
  17. Typography Handbook
    Kenneth Wang’s “concise, referential guide on best web typographic practices.” Includes tips on design, sizing and units with CSS, and font formats.
    typography-handbook.png
  18. JavaScript Modules
    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.
  19. Sassisfaction
    A searchable collection of resources for Sass developers including tools, tutorials, libraries, and more.
    sassification.png
  20. selfcare.tech
    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.
    selfcare.tech.png

Source: Sitepoint

Related Posts

This post is trending.

Beautiful Timeline Component in Ionic 3

In this tutorial we will be building a beautiful timeline component to display any suitable content from blog posts to comments or […]

Advancde Ionic Components

If you are a Ionic developer, beginner or expert, you will love this project. Publicly being developed in github, ionic3-components repository hosts […]

This post is trending.

Let’s Make Desktop Application With Ionic 2 and Electron: Part 1

With the addition of components like Split Pane and Responsive Grid, it is now easier than ever to develop a desktop application […]

%d bloggers like this: