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

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/

时间: 2024-10-01 21:54:38

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

Another 20 Docs and Guides for Front-End Developers

http://www.sitepoint.com/another-20-docs-guides-front-end-developers/?utm_medium=email&utm_campaign=SitePoint+Newsletter++26+February+2015&utm_content=SitePoint+Newsletter++26+February+2015+Version+A+CID_7b1a31cf275aea176b88eaea277eb2ab&utm_so

20个为前端开发者准备的文档和指南

20个为前端开发者准备的文档和指南 来源:codeceo 发布时间:2016-07-27 阅读次数:358 0 是时候重新学习了!和以前一样,我收集了很多不同的学习资源,包括学习指南,学习文档,和其他有用的网站来帮助你在前端开发的不同领域里快速地进入状态. 所以请尽情享受我们的文档和指南系列的第九部分,并且不要忘了在评论区让我知道任何我没有找到的. 1. JavaScript Standard Style(JavaScript标准样式) 链接:http://standardjs.com Java

关于前端开发的20篇文档与指南

相信在2015年很多这个行业的人都会有这样的两种感受: 真的不知所措,这个行业到底有多少东西需要去学习: 渴望更多,并迫不及待的为接下来的学习寻求一些思想方向. 第一个来自于我们的个人感受,而第二个则是纯粹的必要性了.所以本文整理一些有用的信息,希望可以帮助相关领域的前端开发人员. 1. I want to use 基于Can I use的数据和功能,这款应用给予你选择一组前端开发特性的能力,并会读取出一个全球性用户能够使用它的百分比. 2. Regulex JavaScript正则表达式的可视

15 Highly Useful Angularjs Tools for Web Developers (转)

15 Highly Useful Angularjs Tools for Web Developers Angularjs is a new kid on coding block.This angularjs tools is especially well-suited for building one-page web apps, although certainly not limited to that. Angularjs is relatively new JavaScript f

java命令行

Launches a Java application. Synopsis java [options] classname [args] java [options] -jar filename [args] javaw [options] classname [args] javaw [options] -jar filename [args] options Command-line options separated by spaces. See Options. classname T

troubleshooting tools in JDK 7--转载

This chapter describes in detail the troubleshooting tools that are available in JDK 7. In addition, the chapter lists operating-system-specific tools that may be used in conjunction with these troubleshooting tools. Finally, the chapter explains how

Ubuntu环境下:Hadoop, HBase, nutch各个配置文件一览

Hadoop伪分布式配置过程: Hadoop:1.2.1 Hbase:0.94.25 nutch:2.2.1 Java:1.8.0 SSH:1.0.1j tomcat:7.0.57 zookeeper:3.4.6 (1)配置Java环境:http://www.cnblogs.com/xxx0624/p/4164744.html (2)配置OpenSSH:http://www.cnblogs.com/xxx0624/p/4165252.html (3)配置Hadoop:http://www.cnb

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

博文作者:迦壹 博客地址:http://idoall.org/home.php?mod=space&uid=1&do=blog&id=542 转载声明:可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明,谢谢合作! --------------------------------------- 目录: 一.hadoop2.2.0.zookeeper3.4.5.hbase0.96.2.hive0.13.1都是什么? 二.这些软件在哪里下载? 三.如何安装 1.安装JD

Storm实时日志分析实战

项目背景 最近公司做一个项目,用户需要对网站访问者的广告点击/浏览记录进行实时统计分析,分析结果存入数据库,输出报表.我们采用了Kafka+Storm+Zookeeper的解决方案.之前没有接触过,经过一段时间的研究,最终完成了项目.接下来的内容我将介绍我们的解决方案.供大家参考.我们的系统结构如下: 总体结构介绍 业务系统把点击/浏览广告业务日志统一按规定的格式发送到Kafka集群中,不同的业务日志可以分别发送给Kafka不同的主题.Storm集群中运行了我们的实时统计拓扑,该统计拓扑分别从K