20 款前端开发文档和指南(1)

不念不忘少年蓝@ 2022-07-14 05:25 154阅读 0赞

[1. CSS Vocabulary][]

A great point-and-click little app to get you up to speed with all the different parts of CSS syntax and what the proper name for them is.

[![CSS Vocabulary][]][1. CSS Vocabulary]

## [2. Liquidapsive][] ##

A very simple informational layout that, by means of a select box, lets you choose between Responsive, Adaptive, Liquid, and Static, so you can see what is the difference between the four layout types.

[![Liquidapsive][]][2. Liquidapsive]

I imagine this would be nice even to show to clients, so they can see how things adjust using the different styles.

## [3. Superhero.js][] ##

A collection of the best articles, videos, and presentations on helping to maintain a large JavaScript code base.

[![Superhero.js][]][3. Superhero.js]

Included are some general principle-type stuff, sources on testing, tools, performance, security, and more.

## [4. HowToCoffeeScript.com][] ##

A cheat sheet for learning and remembering CoffeScript syntax.

[![HowToCoffeeScript.com][]][4. HowToCoffeeScript.com]

## [5. The HTML Landscape][] ##

This is pretty interesting. It’s a W3C document that describes the “perceptible differences” between three HTML specifications: WHATWG, W3C’s HTML5.0, and W3C’s HTML5.1.

[![The HTML Landscape][]][5. The HTML Landscape]

Might be a little overly technical, but you might be able to find some interesting new stuff here.

## [6. The Elements of HTML][] ##

A nice comprehensive one-page chart of HTML and XHTML elements that indicates which specification the elements belong to.

[![The Elements of HTML][]][6. The Elements of HTML]

This looks really good for doing research to find out when and/if an element has been deprecated or made obsolete in HTML5.

## [7. JavaScript Equality Table][] ##

A nice little 3-tiered chart that helps you understand JavaScript’s double- and triple-equals operators.

[![JavaScript Equality Table][]][7. JavaScript Equality Table]

The conclusion? “Use three equals unless you fully understand the conversions that take place for two-equals.”

## [8. Web Accessibility Checklist][] ##

A useful but not overwhelming reference to help you check off various items on your projects for accessiblity.

[![Web Accessibility Checklist][]][8. Web Accessibility Checklist]

A lot of this is pretty simple, but it doesn’t hurt to always take a final look, in addition to doing accessibility validating.

## [9. Static Web Apps — A Field Guide][9. Static Web Apps _ A Field Guide] ##

According to the description: “This guide will introduce you to the world of static web applications and offer solutions to common challenges encountered while building them.”

[![Static Web Apps — A Field Guide][Static Web Apps _ A Field Guide]][9. Static Web Apps _ A Field Guide]

The idea here is to promote an architecture that eases common development problems.

## [10. Learn regular expressions in about 55 minutes][] ##

An extensive doc/tutorial introducing regular expressions.

[![Learn Regular Expressions in 55 Minutes][]][10. Learn regular expressions in about 55 minutes]

I’m guessing it would take much longer than the claimed “55 minutes” to really get something out of this, but certainly worth a look.

## [11. Open Web CSS Reference][] ##

This is a really comprehensive and little-known CSS property and feature reference.

[![Open Web CSS Reference][]][11. Open Web CSS Reference]

Alphabetical and includes links to the spec for everything listed.

## [12. CSS Values][] ##

This is one of my own side projects. It’s an easy way to look up a CSS property and quickly view the possible values. For example, if you forgot what values are acceptable for somethng obscure like `font-variant`.

[![CSS Values][]][12. CSS Values]

In addition to values, the most recent update includes browser support charts for each property, powered by [caniuse.com][].

## [13. ES6features][] ##

From Microsoft developer Luke Hoban, an overview of new stuff in the ECMAScript 6 spec.

[![ES6features][]][13. ES6features]

As the repo points out, “implementation of these features in major JavaScript engines is underway now”, so it would be useful to start getting familiar with this stuff.

## [14. Relevant Spec Links][] ##

I often have trouble finding the right place in the spec for researcing something. This is a nice brief little summary from Mozilla of the links you’ll need to be aware of in relation to the spec.

[![Relevant Spec Links][]][14. Relevant Spec Links]

## [15. OverAPI.com][] ##

Cheat sheet madness, folks.

[![OverAPI.com][]][15. OverAPI.com]

This seems to have everything. The cheat sheets will link to the relevant authoritative resources (MDN, PHP.net, etc).

## [16. JavaScript: The Right Way][16. JavaScript_ The Right Way] ##

A JavaScript guide ‘intended to introduce new developers and help experienced ones to JavaScript’s best practices.’

[![JavaScript: The Right Way][JavaScript_ The Right Way]][16. JavaScript_ The Right Way]

## [17. The HTML5 JavaScript API Index][] ##

A really comprehensive one-stop place to search for HTML5 API info.

[![The HTML5 JavaScript API Index][]][17. The HTML5 JavaScript API Index]

Is “automatically generated from the HTML 5 specification documents” and very easy to navigate using the 3-paned view.

## [18. Zeal][] ##

This looks pretty neat. It’s a native app that is the Windows and Linux counterpart of [Dash][], an app that lets you search 130+ API docs offline.

[![Zeal][]][18. Zeal]

With a simple keyboard shortcut, you can display the API browser from anywhere in your workspace.

## [19. The Ultimate Flexbox Cheat Sheet][] ##

An extensive reference to help you find flexbox syntax and brush up on the less familiar stuff.

[![The Ultimate Flexbox Cheat Sheet][]][19. The Ultimate Flexbox Cheat Sheet]

From the same guy who did the cool [interactive Flexbox tutorials][].

## [20. jsCode][] ##

An app to help you create your own custom JavaScript coding guidelines.

[![jsCode][]][20. jsCode]

You can also look up custom guides created by others and share yours with your team or other collaborators.

## Any Others? ##

Most of the stuff I included here are the not-so-well-known ones. If you’ve created something or know of a doc tool or set of guidelines you’d like to share, let us know in the comments.

###     ###

### 英文原文：[20+ Docs and Guides for Front-end Developers ][20_ Docs and Guides for Front-end Developers] ###

[1. CSS Vocabulary]: http://pumpula.net/p/apps/css-vocabulary/
[CSS Vocabulary]: /images/20220714/06168ff4205542b4873eae95e483a1d9.png
[2. Liquidapsive]: http://liquidapsive.com/
[Liquidapsive]: /images/20220714/a06889b2ade044caa7f0526e1779866d.png
[3. Superhero.js]: http://superherojs.com/
[Superhero.js]: /images/20220714/f14bca49bbcb490eb4182ec1b852e0b2.png
[4. HowToCoffeeScript.com]: http://howtocoffeescript.com/
[HowToCoffeeScript.com]: /images/20220714/1dece5e666664f469332aac53dca9c90.png
[5. The HTML Landscape]: http://www.w3.org/html/landscape/
[The HTML Landscape]: /images/20220714/3f5563c119db450f82f2a6e7778e0760.png
[6. The Elements of HTML]: http://rawgithub.com/w3c/elements-of-html/master/index.html
[The Elements of HTML]: /images/20220714/12a0004582054a0c942bf50a3d1390a5.png
[7. JavaScript Equality Table]: http://dorey.github.io/JavaScript-Equality-Table/
[JavaScript Equality Table]: /images/20220714/d3470e4e8d5840e496e46c0f4f8ffc53.png
[8. Web Accessibility Checklist]: http://a11yproject.com/checklist.html
[Web Accessibility Checklist]: /images/20220714/e99b9f07696f4144b3d0b6961be2c376.png
[9. Static Web Apps _ A Field Guide]: http://www.staticapps.org/
[Static Web Apps _ A Field Guide]: https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/04/1398334768static-apps.jpg
[10. Learn regular expressions in about 55 minutes]: http://qntm.org/files/re/re.html
[Learn Regular Expressions in 55 Minutes]: /images/20220714/55c6dc963b1e4586a1775d731ede152f.png
[11. Open Web CSS Reference]: http://ref.openweb.io/CSS/
[Open Web CSS Reference]: /images/20220714/9af83abd8c714d33b7c3863116459943.png
[12. CSS Values]: http://cssvalues.com/
[CSS Values]: /images/20220714/8e6727bfbb9f4bebb8b9749b2c9b3fc9.png
[caniuse.com]: http://caniuse.com/
[13. ES6features]: https://github.com/lukehoban/es6features
[ES6features]: /images/20220714/873f573b59994d008eae35fa1b143c5b.png
[14. Relevant Spec Links]: https://github.com/mozilla/servo/wiki/Relevant-spec-links
[Relevant Spec Links]: /images/20220714/4d355b40ca1f437ca743faad62d3fb3b.png
[15. OverAPI.com]: http://overapi.com/
[OverAPI.com]: /images/20220714/c7e114308f76479abb4f54d9aff12caa.png
[16. JavaScript_ The Right Way]: /images/20220714/2c148ae25794419488fef389ddaf93f1.png
[JavaScript_ The Right Way]: https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/04/1398334760js-the-right-way.jpg
[17. The HTML5 JavaScript API Index]: http://html5index.org/
[The HTML5 JavaScript API Index]: /images/20220714/2be86f12d4dc4b0da07ca9945ebaf618.png
[18. Zeal]: http://zealdocs.org/
[Dash]: http://kapeli.com/dash
[Zeal]: /images/20220714/a8e6db2c2ded4a6da6ea328d266c2ec3.png
[19. The Ultimate Flexbox Cheat Sheet]: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
[The Ultimate Flexbox Cheat Sheet]: /images/20220714/8ca7739e906b44d7be40f32e6dc8a969.png
[interactive Flexbox tutorials]: http://www.sketchingwithcss.com/flexbox-tutorial/
[20. jsCode]: http://jscode.org/
[jsCode]: /images/20220714/91eca2ad4e2143099d46d4e79cbfbb81.png
[20_ Docs and Guides for Front-end Developers]: https://www.sitepoint.com/20-docs-guides-front-end-developers/