It’s that time again to choose the tool or technology that we want to brush up on. If you feel like you’ve been working hard at building but maybe not learning as much as you’d like, I’ve got your back covered.

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

1. SitePoint Sass Reference

SitePoint’s very own project, a reference site based on Sass built by our resident expert Hugo Giraudel and Stu Robson, SitePoint’s Sass editor.

2. SVG viewBox and preserveAspectRatio Interactive Demo

This is an interactive page to go along with a related article series by Sara Soueidan. This demo helps readers visualize some of the concepts associated with the viewBox andpreserveAspectRatio attributes used on SVG elements. Noteworthy also is that the demo page has an associated cheat sheet.

3. CSS 2.1 Index List

This is a W3C document I came across recently. It’s a giant list of just about every CSS term, with links to each term or feature. In some cases the link is to a simple definition somewhere in the spec, in other cases it’s a link to that feature’s place in the spec.

4. Popular Coding Convention on Github

Choose from different languages including JavaScript, Ruby, and PHP then this page will show you chart-based data to indicate how prevalent certain coding patterns are on GitHub-hosted projects.

5. Dungeons and Developers

This is not an interactive game, but a RPG-like talent tree representation of web development skills, with links to various places to learn the different skills listed.

6. JSON API

“If you’ve ever argued with your team about the way your JSON responses should be formatted, JSON API is your anti-bikeshedding weapon. By following shared conventions, you can increase productivity, take advantage of generalized tooling, and focus on what matters: your application.”

7. jQuery UI Events Cheatsheet

A chart that specifies which jQuery events are applicable for desktop vs mobile and mouse vs keyboard.

8. Weightof.it

A quick reference app to view and compare JavaScript libraries by weight with an option to view the size Gzipped or not. The app also lets you add different libraries to a “stack” (like adding to a shopping cart) so you can view your total library weight.

9. JavaScript in one pic

This a very nicely done visualization of all of JavaScript’s native features. Not exactly the most practical way to learn the language, but from scanning this you might find something interesting to do further research on.

10. Understanding NPM

“Since its creation, the role of npm has expanded to fulfill the broader needs of the JavaScript and Node.js developer community to include management of front-end web applications, mobile applications and other JavaScript development tools and frameworks […] This visualization is intended to help you understand the role and scope of npm.”

11. SVG on the Web

An overview of SVG by Jake Giltsoff, getting you up to speed on how to use SVG on websites with some tips and tricks to help you along.

12. GreenSock Cheat Sheet

A quick reference in PDF format for using GreenSock the powerful JavaScript animation library.

13. JavaScript Graphing Library Comparison

An easy way to compare JavaScript graphing/charting libraries. Just hover over a tile and you’ll get info on supported chart types, pricing, and dependencies. You can also choose to filter the libraries by categories (chart types, pricing, options, and dependencies).

14. The Accessibility Cheatsheet

From Ire Aderinokun, this is a condensed version of the Web Content Accessibility Guidelines (WCAG), supported by some practical examples.

15. AngularJS Style Guide

“The goal of this style guide is to present a set of best practices and style guidelines for one AngularJS application.”

16. Default Browser Focus Outline Styles

This is a table that uses screenshots to display how the different browsers handle focus styles on various form elements in different situations.

17. Flexbox in 5 Minutes

An interactive tour of all the major features of the new flexbox specification. Includes demos and allows you to play with the features right on the page.

18. Sass Functions Cheat Sheet

A searchable list of Sass functions (color, opacity, number, string, etc.) as a handy reference. You can download as a 2-page color or black-and-white PDF or LaTeX document.

19. The State of Web Type

“Up-to-date data on support for type and typographic features on the web.”

20. ES6 Katas

“A simple website that lists various katas (small tasks) for learning ECMAScript 6 by doing it. Each kata links to tddbin and loads the according source code in there. All you have to do is fix the failing tests. And by doing so you are supposed to use and learn ES6 one small task and feature at a time.”

Honorable Mentions…

Got Any More?

Here are the previous posts in this series:

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.

http://www.sitepoint.com/20-docs-guides-front-end-developers-5/

20+ Docs and Guides for Front-end Developers (No. 5)的更多相关文章

  1. Another 20 Docs and Guides for Front-End Developers

    http://www.sitepoint.com/another-20-docs-guides-front-end-developers/?utm_medium=email&utm_campa ...

  2. troubleshooting tools in JDK 7--转载

    This chapter describes in detail the troubleshooting tools that are available in JDK 7. In addition, ...

  3. java命令行

    Launches a Java application. Synopsis java [options] classname [args] java [options] -jar filename [ ...

  4. ubuntu12.04+hadoop2.2.0+zookeeper3.4.5+hbase0.96.2+hive0.13.1伪分布式环境部署

    目录: 一.hadoop2.2.0.zookeeper3.4.5.hbase0.96.2.hive0.13.1都是什么? 二.这些软件在哪里下载? 三.如何安装 1.安装JDK 2.用parallel ...

  5. Frontend Development

    原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...

  6. sonarQube本机扫描C#项目

    因项目需要,需要使用sonarQube对代码进行扫描并查看,因对sonarQube不熟悉,所以先在本机进行查看. 参考了张老师的博客:http://www.cnblogs.com/danzhang/p ...

  7. Hadoop 3.1.2(HA)+Zookeeper3.4.13+Hbase1.4.9(HA)+Hive2.3.4+Spark2.4.0(HA)高可用集群搭建

    目录 目录 1.前言 1.1.什么是 Hadoop? 1.1.1.什么是 YARN? 1.2.什么是 Zookeeper? 1.3.什么是 Hbase? 1.4.什么是 Hive 1.5.什么是 Sp ...

  8. hadoop 安装过程记录

    1)首先配置好了四个linux虚拟机 root pwd:z****l*3 关闭了防火墙 开通了 sshd服务 开通了 ftp服务 配置了 jdk 1.8 配置好了互信 (之前配置的过程忘了!--检查了 ...

  9. https Java SSL Exception protocol_version

    在java代码中,使用HttpClient爬取https页面时,遇到了这个bug:javax.net.ssl.SSLException: Received fatal alert: protocol_ ...

随机推荐

  1. composer随笔

    composer dump-autoload 生成autoload.php文件

  2. 配置 Tomcat 服务 和 自启动

    如果我们使用war 包进行部署项目的时候,需要把包放进Tomcat的目录下,为了使我们的服务能够在服务器重启的时候自动启动起来,我们需要把Tomcat设置成自起服务. 配置 Tomcat 服务 新建服 ...

  3. java内部类之成员内部类实例

    第一个是如何实现同时继承两个类 public class MultiExtendsDemo { public static void main(String[] args) { // TODO Aut ...

  4. Running Protractor Tests on Docker

    配置这个Protractor环境真是折磨死人了,webdriver-manage update怎么都不成功,即使自己下载好chromederiver放到相应文件夹下,也不能使用.费时三四天终于按照ht ...

  5. BZOJ 1015 星球大战starwar 逆向并查集

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1015 题目大意: 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个 ...

  6. Django 发送html邮件

    转载于: http://blog.sina.com.cn/s/blog_76e94d2101011bxd.html   django中发送html邮件:   #mailer.py   # -*- co ...

  7. 从 Swift 中的序列到类型擦除

    如果有这样的一个需求,我希望能像数组一样,用 for 循环遍历一个类或结构体中的所有属性.就像下面这样: let persion = Persion() for i in persion { prin ...

  8. Guava包学习-Multimap

    它和上一章的MultiSet的继承结果很相似,只不过在上层的接口是Multimap不是Multiset. Multimap的特点其实就是可以包含有几个重复Key的value,你可以put进入多个不同v ...

  9. Hadoop学习之路(二十一)MapReduce实现Reduce Join(多个文件联合查询)

    MapReduce Join 对两份数据data1和data2进行关键词连接是一个很通用的问题,如果数据量比较小,可以在内存中完成连接. 如果数据量比较大,在内存进行连接操会发生OOM.mapredu ...

  10. FireFox新标签页打开搜索和书签

    FireFox更新,发现界面完全不适应,虽然他是越做越丑,但是也没办法,一直用FireFox,许多书签,保存的密码现在都记不住了,只能靠保存的自动填充.... 进入正题,FireFox更新了之后,搜索 ...