收藏

目录

#

• 工具
• 编程语言
• 框架与脚手架
• 交互设计相关

工具

#

• box-shadow generator

  生成 box-shadow 的工具。

• gradient-generator

  渐变生成器。

• Ultimate CSS Gradient Generator

  也是渐变生成器

• CSS Generators -CSSREFLEX

  CSS3 生成器

• tiny png

  用于压缩 png 或 jpg 的在线工具

• 图床 https://sm.ms/

  有 API 可用。

• 新浪微博图床 Chrome扩展

• Unix 时间戳 Unix timestamp

• 在线正则表达式匹配
  • 这个功能更强大一点，能清楚的区分出贪婪和懒惰正则。
• http://regexr.com/
• google fonts
  • Google Fonts 加速代理

编程语言

#

JavaScript

#

• JavaScript 标准参考教程（alpha） -阮一峰

• JavaScript Promise迷你书 -azu

• You Don’t Know JS (book series)

• You Don’t Need jQuery

  前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10+ 以上浏览器。

• YOU MIGHT NOT NEED JQUERY PLUGINS

• JavaScript 秘密花园

• JavaScript 设计模式 系列 AlloyTeam

ES2015

#

• https://tc39.github.io/ecma262/

• http://www.ecma-international.org/ecma-262/6.0/

  ES2015规范

• http://es6katas.org/

  Learn ES6 by doing it. Fix failing tests. Keep all learnings.

• 30分钟掌握ES6/ES2015核心内容（上）

• 30分钟掌握ES6/ES2015核心内容（下）

• 《ECMAScript 6入门》 -阮一峰

• EcmaScript6 全规范（含node） -ouvens

NodeJS

#

• 七天学会NodeJS -Nanqiao Deng

框架&脚手架

#

webpack

#

• Webpack 中文指南 -赵达

• Webpack傻瓜式指南（一） -前端外刊评论 知乎专栏

• Webpack傻瓜指南（二）开发和部署技巧 -前端外刊评论 知乎专栏

• Webpack傻瓜指南（三）和React配合开发 -前端外刊评论 知乎专栏

  上述傻瓜指南的原始出处 https://github.com/vikingmute/webpack-for-fools Webpack傻瓜式指南

• Webpack，101入门体验 -Yika

• Webpack 入门指迷 -题叶

• https://webpack.github.io/ Webpack 官网

Vue

#

• awesome-vue
• Vue.js 和 Webpack（一） -Randy Lu
• Vue.js 和 Webpack（二） -Randy Lu
• Vue.js 和 Webpack（三） -Randy Lu
• Vuejs 1.0 中文系列视频教程 -Laravist
• Vuejs-QQ群 相关资料 来自豪情

React

#

• 深入理解 React -Thinking in React 中文版
• Thinking in React

AngularJS

#

• 学习AngularJS 1.x -Harryharry@andtoo.net

  本书是作者 Harry 在学习和应用AngularJS 1.x 的过程中的资料梳理。希望能对大家学习AngularJS有一定帮助……

• AngularJS api 官网

• AngularJS入门教程——AngularJS中文社区提供

• AngularJS 教程 | 菜鸟教程

  类似 w3school 的入门 AngularJS 教程。

测试

#

• 测试框架 Mocha 实例教程 阮一峰

类库与插件

#

• Masonry

  瀑布流布局库。

• jssor

  图片轮播图其 GitHub 地址 jssor/slider

• cssslider

  纯 CSS 的图片轮播图。

• gumshoe

  A simple, framework-agnostic scrollspy script.

• smooth-scroll

  A simple vanilla JS script to animate scrolling to anchor links.

模块化

#

• 后端程序员的 JavaScript 之旅 - 模块化（一）

• 后端程序员的 JavaScript 之旅 - 模块化（二）

• 后端程序员的 JavaScript 之旅 - 模块化（三）

• CommonJS 规范 -来自 阮一峰 JavaScript 标准参考教程(alpha)

other articles

#

• Cheat Sheet

• 将footer固定在页面底部的实现方法

• HTML5 视频 By Pete LePage

编辑器

#

Atom 中常用插件

#

• auto-beautify
• autoprefixer
• block-comment
• color-picker
• docblockr
• emmet
• jquery-snippets
• jshint
• linter
• linter-csslint
• linter-htmlhint
• minimap
• minimap-git-diff
• minimap-codeglance 滑过 minimap 显示代码
• minimap-find-and-replace 在 minimap 中显示 ctrl+D 选中的内容
• open-in-browser
• uglify
• active-power-mode
• atom-terminal-panel
• linter-scss-linter
• atom-ternjs
• file-icons 将图标变成彩色
• autocomplete-paths 自动补充路径
• symbols-tree-view A symbol treeview like taglist

常用的主题：

UI Theme: One Dark

Syntax Theme: Atom Dark or One Dark

GitBook 及其插件

#

• Gitbook 的使用和常用插件 -赵达

• gitbook-plugin-expandable-chapters

  折叠左侧目录章节。

Chrome 插件

#

• Octotree

  • Code tree for GitHub and GitLab

• Chrome扩展及应用开发 -图灵电子书

• 有哪些鲜为人知却非常有意思、好用的 Chrome 扩展？ -知乎

• Dribbble New Tab

  新建 tab 时，显示 dribbble 上的精选作品。

Other blogs

#

• COLORFUL xiaoa

• 进击的马斯特 http://pinkyjie.com/

  马斯特，87年生人，爱溜冰的码农。技术： Javascript、Python、Mac、iOS

• Jerry Qu

  JerryQu，奇虎 360，前端开发，前百度前端。

• 码志 https://mazhuang.org/

  我是马壮，码而生，码而立。就职sogou。

• 小胡子哥 http://www.barretlee.com/

  李靖，阿里巴巴。

• Xcat Liu http://blog.xcatliu.com/

  Microsoft Software Engineer II, Meituan Senior Front-End Engineer

• 极限前端 http://ouvens.github.io/

  Ouvenzhang, 前端工程师，对前端领域的技术知识具有较高的职业能力和探究精神。对响应式页面设计、工程构建组件化、mv*设计实现、前端优化、ES6开发体系等有深入的研究与项目实践。来自腾讯科技。

• 凳子_Joinery 邓智容 http://www.dengzhr.com/

• 赵达的个人网站 腾讯高级前端开发工程师

• Randy

  95年出生的全栈。卢涛南，英文名 Randy，用 djyde 这个ID混迹于网络。

• JS前端开发群月报 -豪情等人维护

交互设计相关

#

• Framer

  Design the impossible with Framer

• FLINTO

  App Prototyping Tools for Designers

• Principle

  Animate Your Ideas, Design Better Apps

• https://gyrosco.pe/

  首页的卡片翻动效果非常赞。