Web前端技术（不断更新中）

第一章技术与规范与JavaScript库
1.Node

Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎。相当与JDK。

Github:

https://github.com/nodejs/node

官网教程：

https://nodejs.org/en/

其他教程：

http://nqdeng.github.io/7-days-nodejs/

http://www.imooc.com/learn/348

2.Npm

NPM（node package manager）是 Node.js 的包管理和分发工具。它类似于PHP的Composer，Ruby的gem，Python的pip，Java的Maven……它可以让 JavaScript 开发者能够更加轻松的共享代码和共用代码片段，并且通过npm管理你分享的代码也很方便快捷和简单。截至目前最新的稳定版 npm 是 3.3.12。

Github:

https://github.com/npm/npm

官方网站：

https://docs.npmjs.com

官方教程：

https://docs.npmjs.com/getting-started

其他教程：

https://segmentfault.com/a/1190000005799797

http://www.cnblogs.com/kelsen/p/4947859.html

http://www.runoob.com/nodejs/nodejs-npm.html

3.Gulp

gulp是基于Nodejs的自动任务运行器，能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

Github:

https://github.com/gulpjs/gulp

官方网站：

http://gulpjs.com/

官方文档：

https://github.com/gulpjs/gulp/blob/master/docs/API.md

其他教程：

http://www.cnblogs.com/2050/p/4198792.html

http://www.tuicool.com/articles/FJVNZf

https://www.cnblogs.com/Darren_code/p/gulp.html

4.Bower

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具，如YeoMan和Grunt。

Bower与Npm：

简单的说，npm是进行后端开发中，使用的模块安装工具，而bower，是前端的模块安装工具。比如，在安装express，socket.io时，当然使用的是npm，那么比如bootstrap，jquery等前端框架，需要使用bower，npm 是伴随 Node.js 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来， npm 官网经过一次改版，打出的口号是，javascript 的包管理器，所以，其已经不在局限于是Node.js 的模块管理了，已经通用到了所有 js 的包管理工具了，可以说，前后通吃了。bower 的话，从一开始，就是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和 bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）。嵌套依赖，指的就是，你依赖的软件包，还有它自己的依赖，好像摘葡萄，一摘一大串。在服务器环境的时候，这并没什么关系，因为存储空间够大，一切代码都是本地运行，只要解决完依赖就行了，但是到了用户产品的浏览器里，就很成问题了，你不能让用户去下载好几M的js代码，那就太糟糕了。在这个情况下，就需要程序员自己手动解决用到的类库的嵌套依赖问题。比如确保各种各样的插件都依赖同一个版本的jQuery。为什么有很多项目 bower 和 npm 都用呢，那是因为要用 bower 管理前端的包，而用 npm 去管理一些后端的包和构建工具，例如，yeoman，grunt，gulp，jshint 等等等等。所有的包管理器，都有自己的弊端，要视需要选用对自己的项目最合适的。

最新更新于2018年1月17日：

Bower已经过时，作者也不在进行维护，包管理工具已经是npm的天下，不过yarn也在快速崛起，值得研究。

Github:

https://github.com/bower/bower

官方网站：

https://bower.io/

官方教程：

https://bower.io/#getting-started

其他教程：

https://segmentfault.com/a/1190000002971135

5.Browserify

browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程。你可以使用browserify来组织代码,也可以使用第三方模块,不需要会nodejs,只需要用到node来编译,用到npm来安装包.browserify模块化的用法和node是一样的,所以npm上那些原本仅仅用于node环境的包,在浏览器环境里也一样能用。

Github:

https://github.com/browserify/browserify

官方网站：

http://browserify.org/

官方教程：

https://github.com/substack/node-browserify#usage

学习资料

http://www.tuicool.com/articles/IFvQ3qv

https://segmentfault.com/a/1190000002941361

http://www.cnblogs.com/liulangmao/p/4920534.html

6.Browsersync

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

Github:

https://github.com/BrowserSync/browser-sync

教程：

http://www.browsersync.cn/

7.Less-.less,Saas-.scss

Sass,Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

8.Es6

ECMAScript 6 （以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015.也就是说，ES6就是ES2015。

教程：

http://es6.ruanyifeng.com/

https://segmentfault.com/a/1190000004365693#articleHeader6

9.Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

Github:

https://github.com/babel/babel

官方网站：

http://babeljs.io/

教程：

http://babeljs.cn/

10.Q.js

Promise是抽象异步处理对象以及对其进行各种操作的组件。JavaScript的异步执行都是以回调函数来执行的。Promise可以简化回调并提供链式异步调用。

Github:

https://github.com/kriskowal/q

教程：

http://liubin.org/promises-book/

Github:

https://github.com/kriskowal/q

11.Express.js

基于 Node.js 平台，快速、开放、极简的 web 后端开发框架。

Github:

https://github.com/expressjs/express

官方网站：

http://expressjs.com/

中文网：

http://www.expressjs.com.cn/

12.Jquery Datatables

Datatables是一款基于jQuery表格插件。

Github:

https://github.com/DataTables/DataTables

官方网站：

https://www.datatables.net/

13.Moment.js

JavaScript 日期处理类库。

Github:

https://github.com/moment/moment

14.Bootstrap-datepicker

日期时间选择器。

Github:

https://github.com/uxsolutions/bootstrap-datepicker

官方文档地址：

http://bootstrap-datepicker.readthedocs.io/en/latest/index.html

中文网文档：

http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

16.Echarts

图标类控件。

Github:

https://github.com/ecomfe/echarts

官方地址：

http://echarts.baidu.com/index.html

17.MockJS

方便前端生成模拟数据，它基于数据模板生成模拟数据，基于 HTML模板生成模拟数据，拦截并模拟 ajax 请求。

Github:

https://github.com/nuysoft/Mock

官方地址：

http://mockjs.com

18.Fontawesome

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

Github:

https://github.com/FortAwesome/Font-Awesome

官方地址：

http://www.fontawesome.com.cn/

19.Handlebars.js

Handlebars.js是一套js模版引擎，是一款基于Jquery的插件，以json对象为数据源，支持逻辑判断、循环等操作，同时具有非常好的扩展性，体积60KB左右

Github:

https://github.com/wycats/handlebars.js/

教程：

http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html

http://keenwon.com/992.html

http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/

20.yarn

Yarn 是一个依赖管理工具。它能够管理你的代码，并与全世界的开发者分享代码。Yarn 是高效、安全和可靠的，你完全可以安心使用，与npm属于同一类型的库

中文官方教程：

https://yarn.bootcss.com/docs/getting-started.html

其他教程：

http://mp.weixin.qq.com/s/FnCa0wqdHKQN4syrPIPSAA

21.ESLint

22.jade（pug）

jade是一套js模版引擎，现已改名pug

Github：

https://github.com/pugjs/pug

官方网站：

http://jade-lang.com/

教程：

http://www.nooong.com/docs/jade_chinese.htm

http://cnodejs.org/topic/5368adc5cf738dd6090060f2

https://www.w3cplus.com/html/how-to-use-jade.html

23.dot.js

第二章插件库
类别名称 Github 说明
相册图库切换 bootstrap-carousel
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
jpicture
一款兼容主流浏览器的基于jQuery的图片切换插件。简单方便，轻松快捷，好用实用
数学库 mathjs https://github.com/josdejong/mathjs 是一个广泛应用于JavaScript 和 Node.js的数学库，它的特点是灵活表达式解析器，支持符号计算，内置大量函数与常量，并提供集成解决方案来处理不同的数据类型，如数字，大数字，复数，分数，单位和矩阵。
下拉框 bootstrap-select https://github.com/silviomoreto/bootstrap-select/ bootstrap风格的下拉框组件，提供丰富的下拉框功能
加解密 crypto-js https://github.com/brix/crypto-js 一个加解密的JavaScript库
发布/订阅库 PubSubJS https://github.com/mroderick/PubSubJS 可以订阅的息，发布消息（通过一个绑定项）和消息退订
新手指引 Intro.js https://github.com/usablica/intro.js/ 新手指引的一个框架库， Step-by-step guide and feature introduction
Driver.js https://github.com/kamranahmedse/driver.js 新手指引的一个框架库
ajax 异步请求 api isomorphic-fetch https://github.com/matthew-andrews/isomorphic-fetch
fetch-jsonp https://github.com/camsong/fetch-jsonp
axios https://github.com/axios/axios 类似于jquery的ajax
fetch https://github.com/github/fetch
验证 async-validator https://github.com/yiminghe/async-validator async-validator 是一个异步验证的库，需要传入要验证的数据和验证规则
图片查看器 viewerjs
https://github.com/fengyuanchen/viewerjs

Viewer.js 是一款强大的图片查看器，像门户网站一般都会有各自的图片查看器，如果您正需要一款强大的图片查看器，也许 Viewer.js 是一个很好的选择

官方网站：

http://fengyuanchen.github.io/viewerjs/

视频播放器 video.js https://github.com/videojs/video.js Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器
弹窗提示插件 pnotify https://github.com/sciactive/pnotify 一个仿桌面弹窗的提示插件
日期时间选择插件

bootstrap-datepicker https://github.com/uxsolutions/bootstrap-datepicker bootstrap的日期开源组件
datetimepicker github.com/smalot/bootstrap-datetimepicker
bootstrap的时间开源组件

官方网站：

http://www.bootcss.com/p/bootstrap-datetimepicker/

Daterangepicker https://github.com/dangrossman/bootstrap-daterangepicker
时间区间范围选择插件

官方网站：

http://www.daterangepicker.com/

其他文档：

option文档：http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

城市选择插件 City-Picker.js https://github.com/tshi0912/city-picker 城市三级联动选择器。
3D three.js https://github.com/mrdoob/three.js
JavaScript 3D library

官方网站：

https://threejs.org/

数字运算，格式化库 numeral https://github.com/adamwdraper/Numeral-js
Numeral.js 是一个用于格式化和数字四则运算的js 库，支持包括中文在类的17种语言

官方网站：

http://numeraljs.com/

第三章 gulp自动化构建组件（FEZ项目实践）
名称 Github 说明相关教程
node-hbsfy https://github.com/epeli/node-hbsfy borwserify 支持 require handlebars模板
jadeify https://github.com/domenic/jadeify jade模板
node-glob https://github.com/isaacs/node-glob 使用glob来返回目录中所有子文件（文件或文件夹） http://www.cnblogs.com/liulangmao/p/4552339.html

glob通配符释义：http://blog.csdn.net/zhuchuji/article/details/51297819

gulp-inject https://github.com/klei/gulp-inject CSS和WebComponent 注入插件，将它们注入到index.html文件中（官方解释），把css，js这些静态文件注入到html文件中，不需要手动添加。
main-bower-files https://github.com/ck86/main-bower-files 通过读取并分析bower.json文件里override属性里main路径下定义的插件及相关依赖，返回一个文件数组
vinyl-buffer https://github.com/hughsk/vinyl-buffer 将虚拟的流文件转换为可以使用的的buffer文件
gulp-if https://github.com/robrich/gulp-if 为功能执行添加条件判断，跟程序语言中的if是相同语义
browserify-shim https://github.com/thlorenz/browserify-shim browserify-shim 是一个转换工具,它会读取 package.json 文件的 “browserify-shim” 属性，将不遵循node风格的commonjs的输出写法的模块包转换成browserify可以读懂的模块包
babel-polyfill https://github.com/babel/babel/tree/master/packages/babel-polyfill IE8兼容包
vueify https://github.com/babel/babel/tree/master/packages/babel-polyfill 在browserify中编辑vue代码
watchify https://github.com/browserify/watchify

gulp.spritesmith https://github.com/twolfson/gulp.spritesmith 小图（图标）合成精灵图，拼接图片并生成样式表，并且还能输出SASS,Stylus,LESS甚至是JSON
gulp-filter https://github.com/sindresorhus/gulp-filter 在虚拟文件流中过滤特定的文件
gulp-order https://github.com/sirlantis/gulp-order The gulp plugin gulp-order allows you to reorder a stream of files using the same syntax as of gulp.src，这是官方定义，简单来说，就是按给定的顺序整理需要处理的文件集。
gulp-concat https://github.com/contra/gulp-concat 合并js文件，比如合并多个js到一个文件
gulp-concat-css https://github.com/mariocasciaro/gulp-concat-css 合并css文件，比如合并多个css到一个文件
rework https://github.com/reworkcss/rework

del https://github.com/sindresorhus/del 使用glob匹配规则来删除文件或文件夹
gulp-less https://github.com/stevelacy/gulp-less 编译less文件的gulp插件
gulp-sass https://github.com/dlmanning/gulp-sass 编译sass文件的gulp插件
gulp-postcss https://github.com/postcss/gulp-postcss PostCSS把扩展的语法和特性（比如变量，混入，未来css预发，内联图像等）转换成现代的浏览器友好的CSS
gulp-usemin（不推荐使用） https://github.com/pursual/gulp-usemin 根据预先在html文件（或者其它模板/视图中的文件）中声明好的blocks来执行一系列任务（例如合并文件并重全名、排除一些只在开发过程中引入的脚本以及将css和js中的代码提取出来内嵌在html文件中）来处理未优化的样式和脚本
gulp-htmlmin https://github.com/jonschlinkert/gulp-htmlmin 压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作
gulp-imagemin https://github.com/sindresorhus/gulp-imagemin 压缩常见的图片格式，比如PNG，JPEG，GIF，甚至是SVG图片
gulp-clean-css https://github.com/scniro/gulp-clean-css 压缩css文件，减小文件大小，并给引用url添加版本号避免缓存
gulp-uglify https://github.com/terinjokes/gulp-uglify 专业压缩js文件，减小文件大小
gulp-rename https://github.com/hparra/gulp-rename 修改文件名称，比如有时我们需要把app.js改成app.min.js
gulp-util https://github.com/gulpjs/gulp-util gulp工具包，可以打log啊，提示语颜色啊，提示音啊等等一些操作，不过一般就是用来打印日志
gulp-rev https://github.com/sindresorhus/gulp-rev 根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系
gulp-rev-replace https://github.com/jamesknelson/gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 manifest。json 后替换对应的文件名称
gulp-sourcemaps https://github.com/gulp-sourcemaps/gulp-sourcemaps 处理 JavaScript 时生成 SourceMap
gulp-svg-symbols https://github.com/Hiswe/gulp-svg-symbols 合并SVG图标
gulp-inject-string https://github.com/mikehazell/gulp-inject-string 在页面中插入内容
gulp-replace https://github.com/lazd/gulp-replace 字符串替换的gulp 插件
gulp-flatten https://github.com/armed/gulp-flatten 删除或替换文件的相对路径
lazypipe https://github.com/OverZealous/lazypipe Lazypipe允许您创建一个不可变的、延迟初始化的管道。能在需要重用部分管道的环境中使用，比如gulp。它可以创建一些工厂来把你经常使用的功能 stream 链分离出来，变成一个通用插件功能链，然后放入需要这个链的链路上
event-stream https://github.com/dominictarr/event-stream 流操作，还不大清楚其原理
gulp-autoprefixer https://github.com/sindresorhus/gulp-autoprefixer 给CSS添加前缀，解决某些CSS属性不是标准属性，有各种浏览器前缀的情况，灰常有用
gulp-posthtml https://github.com/posthtml/gulp-posthtml html预处理 html中的rem转换等
postcss-pxtorem https://github.com/cuth/postcss-pxtorem CSS 转换 px 为 rem
envify https://github.com/hughsk/envify

vinyl-source-stream https://github.com/hughsk/vinyl-source-stream 在gulp或虚拟文件的流开始使用传统的文本流，对现有的npm流有更好的互操作性
babelify https://github.com/babel/babelify

cssify https://github.com/davidguttman/cssify borwserify 支持 require css样式
lessify https://github.com/dstokes/lessify borwserify 支持 require less样式
preprocessify https://github.com/bibliolabs/preprocessify 条件注释/主要区分开发和上线环境，是否加载mock数据
lodash https://github.com/lodash/lodash 具有一致接口、模块化、高性能等特性的 JavaScript 扩展工具库
官方网站：https://lodash.com/

gulp-size https://github.com/sindresorhus/gulp-size 压缩字体文件
imagemin-pngquant
压缩png图片文件
gulp-rev-delete-original https://github.com/nib-health-funds/gulp-rev-delete-original 删除由gulp-rev或gulp-rev-all重写的原始文件
gulp-rev-css-url https://github.com/galkinrost/gulp-rev-css-url 提取样式中的相对路径
gulp-strip-debug https://github.com/sindresorhus/gulp-strip-debug

gulp-cdnify https://github.com/kaiqigong/gulp-cdnify CDN地址替换

第四章 React
组件概念标题链接
react

react官方文档 https://reactjs.org/docs/hello-world.html
react基础入门 http://www.ruanyifeng.com/blog/2015/03/react.html
谈谈 react 中的 key https://juejin.im/post/5a7c04746fb9a063461fe700?utm_medium=fe&utm_source=weixinqun
【第1200期】React 是怎样炼成的 https://segmentfault.com/a/1190000013365426
【第1269期】基于React实战分享WeatherApp https://github.com/alivebao/weather_app
【第1273期】React性能优化-虚拟Dom原理浅析 http://wuyuying.com/blog/archives/optimizing-react-virtual-dom-explained/
【第1281期】React 16 加载性能优化指南 https://zhuanlan.zhihu.com/p/37148975
react-route
教程 https://reacttraining.com/react-router/web/example/basic

基础入门 http://www.ruanyifeng.com/blog/2016/05/react_router.html
react-router-dom

react-dnd

react-draggable

react-redux
前面有一个Redux，我们去撩(聊)一下它 https://juejin.im/post/5adf0b4df265da0b8070620a?utm_medium=fe&utm_source=weixinqun
nerv 一个基于 Virtual DOM 的类 React 组件框架（jd自己的凹凸实验室研发的）官方地址 https://nerv.aotu.io/
react-native
React-Native从零搭建App https://juejin.im/post/5a9f93d96fb9a028d2077c19?utm_medium=react&utm_source=weixinqun

react组件*集合（摘自antd）

类型组件
UI库 antd
路由 react-router
布局 react-blocks
拖拽 react-dnd

react-draggable
代码编辑器 react-codemirror2
富文本编辑器 react-quill

react-draft-wysiwyg

react-lz-editor

braft-editor
拾色器 rc-color-picker

react-color
响应式 react-responsive

react-media
复制到剪贴板 react-copy-to-clipboard
页面 meta 属性 react-helmet

react-document-title
图标 react-fa

react-icons
二维码 qrcode.react
可视化图表 BizCharts

recharts

victory
顶部进度条 nprogress
应用国际化 react-intl
代码高亮 react-syntax-highlighter
Markdown 渲染 react-markdown
无限滚动 react-virtualized
地图 react-google-maps

google-map-react

react-amap 高德
Emoji emoji-mart

第五章 Vue：
标题链接
[译] Vue让我喜欢的10个方面 https://juejin.im/post/5a7bfbe8f265da4e8b2fcc50?utm_medium=fe&utm_source=weixinqun
2018 年你需要知道的 Vue.js 组件库，完善你的应用开发 http://blog.csdn.net/VhWfR2u02Q/article/details/78859493
基于vue的browserify的项目模板 https://github.com/keepfool/vue-tutorials/tree/master/05.OfficialTemplates/my-browserify-simple-demo
手摸手，带你用vue撸后台系列一 https://juejin.im/post/59097cd7a22b9d0065fb61d2
【第1244期】详解vue中的 Object.create(null) https://mp.weixin.qq.com/s/bPpPnzmOJtBdEmdcLeyHQw
VUE组件汇总 https://juejin.im/post/5af16a2cf265da0b8636353b
【第1272期】从零开始搭建脚手架 https://mp.weixin.qq.com/s/m8atIJzGEGnOV_utpijG2g

第六章 Webpack：
标题链接
基础入门 http://www.jianshu.com/p/42e11515c10f
中文详细文档 http://www.jqhtml.com/7626.html
【第1186期】Webpack v4 beta 版本发布 https://mp.weixin.qq.com/s/ZWY_UDxaWvrlgHuIen7AMw
【第1203期】webpack 4 发布了！ http://www.zcfy.cc/article/x1f3bc-webpack-4-released-today-webpack-medium
【第1206期】看清楚真正的 Webpack 插件 https://zoumiaojiang.com/article/what-is-real-webpack-plugin/
【第1215期】基于Webpack4使用懒加载分离打包React代码 https://segmentfault.com/a/1190000013654180
【第1241期】webpack4升级完全指南 https://segmentfault.com/a/1190000014247030
带你走进webpack世界，成为webpack头号玩家 https://juejin.im/post/5ac9dc9af265da23884d5543
【第1252期】Webpack基本架构浅析 http://blog.zxrcool.com/2018/04/19/Webpack%E5%9F%BA%E6%9C%AC%E6%9E%B6%E6%9E%84%E6%B5%85%E6%9E%90/
【第1263期】我当初为什么写webpack https://zcfy.cc/article/interview-with-webpack-founder-tobias-koppers
【第1271期】Webpack4+ 多入口程序构建 https://futu.im/posts/2018-05-07-webpack4/

第七章 CSS：

标题链接
箭头消息提示框样式 http://www.cssarrowplease.com/
Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
Flex 布局教程：实例篇 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
【第1195期】现代CSS进化史 https://segmentfault.com/a/1190000013191860
【第1227期】关于 CSS 变量，你需要了解的一切 https://juejin.im/post/5ab835225188255572085af4
CSS工程化演进 https://mp.weixin.qq.com/s/1QkGy9UbRF3FtyBllmJdmA
【第1242期】开始使用新的 CSS Typed Object Model https://zhuanlan.zhihu.com/p/35029796
前端布局推进剂 - 间距规范化 https://juejin.im/post/5ad0a366f265da239b41dbaf?utm_medium=fe&utm_source=weixinqun
【第1183期】这些 CSS 命名规范，将省下你大把调试时间 https://github.com/xitu/gold-miner/blob/master/TODO/css-naming-conventions-that-will-save-you-hours-of-debugging.md
50道 CSS 基础面试题（附答案） https://juejin.im/entry/5ad2d3bff265da237a4d75dd?utm_medium=fe&utm_source=weixinqun
【第1288期】新的 CSS 特性正在改变网页设计 https://github.com/xitu/gold-miner/blob/master/TODO1/future-of-web-design.md

CSS样式库：

类别名称 Github 说明
按钮 buttons https://github.com/alexwolfe/Buttons Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库

第八章 UI：
1. Ant Design of React

alibaba的蚂蚁金服开发的开箱即用的高质量 React UI组件

官方教程：

https://ant.design/docs/react/introduce-cn

2.element

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官方教程：

http://element-cn.eleme.io/#/zh-CN/component/installation

3.wired-elements

手绘风格的一套很特别的组件

官网：

wiredjs.com

Github：

https://github.com/wiredjs/wired-elements

第九章分散技术：
1. __filename

在Node.js中，预定义了两个变量：用于获取当前模块文件名的__filename变量与用于获取当前目录名的__dirname变量。在任何模块文件内部，可以使用__filename变量获取当前模块文件的带有完整绝对路径的文件名。

2.fis

3.PostCSS

4.Prettier1.0

JS程序员格式化代码神器！

5.Swagger

是一个简单但功能强大的API表达工具，使用Swagger生成API，我们可以得到交互式文档，自动生成代码的SDK以及API的发现特性等

6.vs code

一款免费，小巧，好看的编辑器，微软出品

官方教程：

https://code.visualstudio.com/docs

%99%A8%E7%9A%84%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6/

【第1283期】从0开始发布一个无依赖、高质量的npm https://github.com/simbawus/blog/issues/12
【第1285期】我知道的HTTP请求 https://juejin.im/post/5a757d2f5188254e5c6c404a
【第1286期】滑向未来：现代 JavaScript 与 CSS 滚动实现指南 https://www.zcfy.cc/article/scroll-to-the-future
【第1287期】深入浅出 SVG https://juejin.im/post/5ad84f296fb9a045e8011be1
【第1289期】W3C工作备忘 – 布局 https://cloud.tencent.com/developer/article/1138992
【第1290期】一个安卓设备管理操作平台-STF http://ju.outofmemory.cn/entry/199455
【第1292期】GitHub 的用法与礼仪 https://zhuanlan.zhihu.com/p/37599617
【第1293期】浏览器之美，你知道多少？ https://juejin.im/post/5b0a085f6fb9a07aa048774e

第十一章其他文章链接：
标题链接
【第1170期】如何看待员工跳槽 https://mp.weixin.qq.com/s/r8f_p0nSbV2ZAXI7xLeCOg
超火的漫画线稿上色AI——style2paints 2.0出新版了

http://blog.csdn.net/yH0VLDe8VG8ep9VGe/article/details/78933351
掘金翻译计划，包含各种英文版精彩的技术文章的中文译文（热门） https://github.com/xitu/gold-miner
首个围棋10段诞生！是10连胜柯洁的国产阿法狗（腾讯绝艺） http://mp.weixin.qq.com/s/qGnh4hShKHI992Bfh15hOQ
关于2018年九大改变世界的技术趋势 http://blog.csdn.net/lu_embedded/article/details/78779266
揭秘前端字符的戏精之路 http://mp.weixin.qq.com/s/jTSws4W-PDxVgDvePvMO2g
谷歌大脑2017总结（Jeff Dean执笔，干货满满，值得收藏） http://mp.weixin.qq.com/s/a0HFS95ZXiZXNh5qXbmUBA
谷歌大脑2017总结第二弹（Jeff Dean执笔，干货满满，值得收藏） https://mp.weixin.qq.com/s/RazWCsBY_dF1VR0JTYIjsw
Git使用入门 https://mp.weixin.qq.com/s/xoyQ4TzVKLQb2VjZJLUqFQ
【第1169期】如何有效地做算法题 http://mp.weixin.qq.com/s/Zf__tGoVB_iONKL0lTg1Ew
DeepMind提出可微分逻辑编程，结合深度学习与符号程序优点 http://mp.weixin.qq.com/s/lPAcNayqcz1sh8xNVklzEA
一张图道尽程序员的出路 https://juejin.im/entry/5a9b51d06fb9a028c71dea51
【第1229期】程序员如何在技术浪潮的更迭中保持较高的成长速度？ https://halfrost.com/halfrost_2017/
【第1238期】如何做一名有能力的专业人士 https://zcfy.cc/article/my-manager-who-i-loved-recently-left-my-company-i-summarized-some-of-my-notes-from-our-many-conversations-here-they-are-i-wish-someone-wrote-this-for-me-when-i-started-startups

Web前端技术（不断更新中）

相关文章