大前端工具集

目录

· 前端组织/前端博客

· 博客搭建

· HTML

· CSS

· 浏览端 JS

· Project Build

· Node Package

· Node Project

· 精选阅读

§ 前端技术

§ Node学习资料

§ 前端面试

§ 其他技术

· 工具/软件 

§ Web

§ APP

§ Mac

§ Linux

· Chrome Plugins

· Git

· 服务端

· 数据端

· 设计/交互

· 速查手册

· 杂七杂八

· 前端炫技-炫酷狂拽叼炸天的 Web

· 小结

· TODO

正文

前端组织/前端博客

虽混过外企俩家，但劳资英文这项的技能点还是灰色的...so，俺关注的站点主要以中文为主

·  GitHub -没 Github都不好意思面基有木有！！！

·  MDN -无数的资源再等着你探索，追标准和新特性肯定得关注的网站

·  Awesomes.cn -国人维护的前端资源库，深度对接到 Github，分类和展现清晰，值得收藏

· 如何跟上前端开发的最新前沿 - RT，不解释

· 慕课 -大量的在线计算机课程。虽然初、中级居多，但是不乏有巨作值得细细品尝

· 阮一峰 -关注多年，拜读其 ES6系列。虽网传靠写书进鸟阿里，但博客内容确实够丰富

· W3Cplus -大漠(《图解 CSS3》作者)在国内的影响力杠杠的，Sass专家级

· 淘宝前端团队 -内容涵盖 Web和 Node，要深度游深度，要广度有广度

· 奇舞团博客 -坚持是最宝贵的，别人的奇舞周刊早已经过百期了

· 百度 FEX -代表作 FIS、UEditor、WebUploader、KityMinder

· 腾讯全端 AlloyTeam -腾讯 Web前端团队，博客真的有点丑...

·  粉丝日志 for张丹 -大爱作者写的 Node系列

· 张鑫旭 -成名多年的、高产的前端大湿，CSS猛人

 

博客搭建

· Hexo -快速、简洁且高效的博客框架，照着文档分分钟就可以在本地跑起来。Github地址:Hexo

· Jekyll -将纯文本转化为静态网站和博客。由于环境依赖的问题，所以安装起来可能稍费劲那么一点。Github地址：Jekyll

· GithubPages -免费的静态站点。配合着 Hexo或 Jekyll的模板，分分搭建出一套炫酷的个人博客

· Tumblr -轻博客的祖师爷，各种各样的主题感觉不错

· Wordpress -这玩意古老到都不想介绍

 

使用 Hexo/Jekyll + GitPage，前端搭建静态博客那是相当 easy。用 Markdown 写文章做记录，再 push到 Github上，分分钟高大上有木有

再推荐三款视觉效果极佳的 Hexo主题，且在 Github上的 star 都很不错：

· NexT

· Yilia

· Tranquilpeak

 

不能偏心，所以也推荐三款 Jekyll的好主题：

·  So Simple如果你看过俺的博客，对这个主题就肯定不会陌生啦

· HPSTR当初 fefork 差点选这个主题:)

· beautiful

 

HTML

纯 HTML相关其实没有好玩的项目，所以这儿展示的内容主要都是一些模板，而且以下列出来的都是免费的，方便拿取搭架后台或者博客

· HEAD -最全的 列表，真心佩服这种偏执的整理能力

· blur-admin -视觉冲击极强的管理后台，各种动画效果。PS：因为团队有ant-design的使用经验，感觉使用起来不是很顺畅，这套后台又是基于AngularJS，所以再三权限之后还是没实际使用，劳资还是别给团队添乱了，囧...

· AdminLTE -很小清新的后台模板，每次看preview页面都觉得很有视觉冲击

·  gentelella -刚用这个搭建了我司内部用的的数据平台，效果喜人。模板实现的功能比较全，比如登录、注册甚至各种 widget，所以最终交付的时候，自己几乎没写几行CSS。

· material-design-lite - Star数超过2W的开源模板项目，包含了多套简洁的 templates，可以用于博客、后台或者企业首页。

 

CSS

· MetroUI -好看好用，重点是样式特别、个性

· Font-Awesome -图标字体库。相类似的库有不少，大厂都喜欢造轮子嘛:)

· LoadersCSS -用 CSS技术实现 loading动画；补一句，想熟悉、理解 keyframes、animation、transform、transition的童鞋可以直接去读其源码(只有千把行代码)，读完就算出师鸟:)

· WeUI -一套同微信原生视觉体验一致的基础样式库为微信 Web 开发量身设计，令用户的使用感知更加统一

·  PostCSS -最近才知道大名鼎鼎Autoprefixer是其插件推荐大漠的文章《PostCSS深入学习》，有关 PostCSS 不是什么？PostCSS是什么？PostCSS可以做什么等等问题，文章里面有答案

· CSSgram -图片滤镜库，终于可以用 CSS在 web 上实现滤镜的效果鸟 IE不支持，不过新的移动设备支持没问题 Can I Use

· HINT.css -一款非常小巧的提示框效果

· Balloon.css| |同上，一款非常小巧的提示框效果

·  Hover.css -很多鼠标 Hover态的效果，可以给产品学习一下:)

· Cursor -记录各浏览器对Cursor的支持情况

· csscss -用于检查 CSS代码冗余

· purecss -小巧的响应式 CSS库，Yahoo!出品

· hamburgers -简单的动画库，让 Click(or Tap) 变得美妙

· cssmatic -一个帮忙调试CSS效果的工具

 

浏览端 JS

·  requirejs - JS模块化是构建复杂项目的第一步中文学习文档奉上：RequireJS中文网

·  ECharts -好用，最关键的是支持的图表展示非常之多，强烈推荐

· Swiper -强大的 Slider库其实这类效果库非常多，但文档能那么专业的就很少鸟

· babel - ES6用起来。这个插件可以让我们用新的标准/提案写 JavaScript代码，然后再向下转换编译，最终生成随处可用的 JavaScript代码。中文文档奉上《babel-handbook》

· fullPage -非常好用的全屏滑动库，看 Demo就明白

·  PhotoSwipe -偶常用的 js库官网上有这么一句很关键、重要"no dependencies"

· Vuejs -比较喜欢其作者...所以劳资正在看源码学习学习

· favico.js -动态改变浏览器标签栏中的网站图标，非常好玩

· ant.design -蚂蚁金服搞的良心项目，文档美好的令人发指样式优雅，强烈推荐内部系统尝试此库

·  highlightjs -代码高亮库，支持非常多的语言

· daterangepicker -时间选择插件的不二选择，基于 Bootstrap 和 Moment.js

·  nodePPT -前同事三水的大作，好用必须得支持:)用 Markdown 写 PPT，还可以 HTML混排，上手飞快

· Sortable -拖拽神器，用了就知道

· toastr -信息提示的库，推荐的原因是卖相好、功能强大 demo

· peity.js - jQuery的图表插件，特别cute，感觉萌萌哒将HTML转换成一个小的饼图、圆环图、折线图等等

· emojify.js -能够将emoji关键词转换为emoji图片的JS插件可以快速的为你的网站提供emoji表情支持

· Push.js -基于 Notification API实现的桌面效果的提示栏。浏览器支持情况不错，如http://caniuse.com/#search=Notification

· Highcharts| |Highcharts中文网，又是一个图表库确实功能强大，但是觉得不好看... PS：官网就做的不好看，脏脏的赶脚

· NProgress -使页面加载时有更好的loading效果

· Noticejs -一个简单的通知库，木有依赖

· onepage-scroll -依赖 jQuery的单页滚动库，和 fullPage类似

· videojs -当下视频需求都用上鸟样式和交互统一的问题交给 videojs 搞定:)

·  clipboard -仅 2KB大小，搞定剪贴板功能，屌不屌~但是，Safari不支持...

· impress.js -用来写 PPT不错，偶也曾为其写过一篇impress.js初体验

· Cropper -国人开发的图片裁剪库

 

Swiper/PhotoSwipe/fullPage有这仨库，微信里常见的 H5页完全不是问题哒

Project Build

· pm2 -是一个带有负载均衡功能的 Node应用的进程管理器；是 Forever的进阶库，想了解的可以看这篇文章《拥抱PM2》

· Webpack -项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。

· Gulp - Gulp是基于 Node实现 Web 前端自动化开发的工具。俺总结了篇《gulp使用小结》，推荐您阅读:)

·  Bower -前端项目的包管理其实是件复杂的事谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本...卧槽 Bower 就是搞定这件事儿的，亲爹是 Twitter推荐篇 Bower的中文文章：《bower解决 js 的依赖管理》

· Grunt -和 Gulp类似，都是项目构建的常见选择对比这俩的文章可谓不少，推荐篇《Gulp vs Grunt》英盲又想看文档，可以去Grunt中文网

·  FIS -度厂出品的前端构建工具文档清晰，功能强大，推荐了解和使用

· Gitlab CI -一套基于Gitlab的持续集成服务

 

Gulp + Webpack的使用套路参考: learning-gulp

Gulp资料收集：use-gulp

推荐篇与 Webpack相关的文章《CSS Modules》

Webpack用起来吼吼：webpack-howto

 

Node Package

作为一名大前端甚至是多端，Node绝逼是必备的一块

有关 Node的学习资料，请访问

这里介绍些有特色且前端有必要知道的包

· anywhere -随时随地将你的当前目录变成一个静态文件服务器的根目录

·  supervisor -监控 Node代码，自动重启。 A supervisor program for running nodejs programs

· nodemon -监控 Node代码，自动重启。 Nodemon is a utility that will monitor for any changes in your source andautomatically restart your server.

·  pm2 -是一个带有负载均衡功能的 Node应用的进程管理器；是 Forever的进阶库，想了解的可以看这篇文章《拥抱PM2》

· async -一个流程控制工具包，提供直接而强大的异步功能

· lodash - JS工具库 Underscore.js的一个 fork发展而来

· socket.io -预计 Node的实时框架聊天室、页游等对实时性有高要求的较适用

· Mongoose -让 NodeJS更容易操作 Mongodb数据库；附上一篇Mongoose学习参考文档

· CNPM -淘宝 NPM镜像，提供了 NPM同步的服务当然可不仅仅这样，利用 CNPM可以打造企业/个人私有的 NPM服务推荐篇搭建私有NPM的文章：《CNPM搭建私有的NPM服务》

· koa -玩 Node都知道 express，但使用 koa的就少很多，门槛比 Ex稍高通过 generator避免繁琐的回调函数嵌套，强烈推崇官方的文章教程

· Shipit -一个强大的自动化部署工具。 shipit很多地方非常类似 gulp，他们的核心都是任务系统。

· node-inspector - Node调试工具，使用起来跟 Chrome的 JS调试器很相似

· winston - Node服务最流行的日志库之一

·  co -用 generator写法让异步代码同步

· thenify-all -把异步的方法变成 Promise的 Promisifies all the selected functions in an object

· PhantomJS -一般用来做抓取截图和无界面测试也可以用来操作 DOM 和网络监测，很好玩的库 Quick Start

· ava -偶是应TJ大神推荐而得之的 ava 未来的测试运行器

· Mocha - Node里最常用的测试框架；它支持多种 Node的 Assert libs；同时支持异步和同步的测试，同时支持多种方式导出结果；也支持直接在 browser 上跑 JS代码测试。

· koa-validate - koa的校验库可以非常方便的对 queryString或 postBody的信息进行验证

· line-reader -基于steam的按行读文件，偶处理日志时用哒要不实现一个按行读文件，又得 steam、又得 chunk，还是比较麻烦的

· everyauth| |OAuth的集成解决方案

· shelljs -写 Node时难免需要用 shell去操作些神马 shelljs是基于 Node的 shell 工具，API及其简单

· hashids -看名称就懂，给 userid加解密用的

·  node-pool -让 Node有连接池的概念

· colors -花俏的小工具让打印console.log时有更好的展示样式

· n -控制Node的版本，想升级一行代码搞定

 

supervisor和 nodemon这俩都是监控 Node代码，使得每次修改代码后会，开发 Node程序必备

以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:)

 

Node Project

暂无

 

精选阅读

前端技术

·  2015D2前端论坛 - Node方向非常值得看，有干货，相信东哥推荐哈

· 前端开发规范手册 -此手册主要实现的目标：代码一致性和最佳实践

· 《babel-handbook》 -可以用新的规范(如 ES6)写代码，经过 babel编译后生成没有兼容问题的代码

· ECMAScript 6入门 -阮一峰大神所著，一本开源的JS教程全面介绍 ECMAScript 6新引入的语法特性

· ReactNative中文版 -翻译自官方的中文文档

· ReactWebpackCookBook | |此书会引导读者是进入React和Webpack的世界。俩都是非常前沿的技术，同时使用会更有趣。

· ReactNative学习指南 -新玩意层出不穷...对于能持续学习的童鞋，这是个美好的时代

· HTML/CSS编码规范 -编写灵活、稳定、高质量的HTML和CSS代码的规范

· 移动前端入门 -入门价值高，移动方向常见问题的较好总结

· GulpBook - Gulp是基于 Node实现 Web 前端自动化开发的工具

 

Node学习资料

·  Node.js中文资料导航 - Node的中文资料导航，start1300+

·  从零开始 NodeJS系列文章 -基本上每一篇都看过，强烈推荐

· Node.js包教不包会 -值得阅读，看完绝不用买书鸟

· 七天学会 NodeJS -劳资还没看，不过看目录还不错:)

·  Style Guide -这是一份关于如何写出一致且美观的 Node 代码的风格指南

· koa实战 - “明河出品”这四字已经说明一切。PS：正在连载中

· stream-handbook -如果学习 NodeJS，那么流一定是需要掌握的概念

 

前端面试

· 在 LinkedIn做面试官的故事 -非面试题，介绍 LinkedIn的面试过程文章有很多中肯的建议和想法，推荐阅读

· 大漠：写给前端面试者 -这篇文章不涉及任何的面试题大漠与大家聊聊面试者与被面者之间的感受...

· 前端面试题 - Git上非常火的前端面试题，start17k+

· 前端面经 -主要内容是些前端面试笔试题和面试套路，值得阅读

 

其他技术

· MongoDB极简实践入门 -入门推荐的套路，非常浅显易懂

·  Mac设置指南 - Mac使用必看尤其适合偏执狂/强迫症患者:)

·  Markdown资料 -简单看些语法入门，快速用起来

 

工具/软件

Web

· CanIuse -前端必备；查看浏览器对各种新特性的兼容情况

· overapi -最全的开发人员在线速查手册

· 百度脑图 -非常方便的思维导图工具

·  ProcessOn -和百度脑图的功能类似，脑图工具。

·  VimAwesome - Vim插件集合，Vim党必备

· Tower -小而美的多人协同工具。不光只有 Web 版，还有 iPhone、iPad、Android、微信版。

· Slides -一个所见即所得的 WebPPT编辑器，非常推荐

·  faviconer.co -一个所见即所得的icon生成器，很好用

· smallpdf -提供各种格式和 PDF互相转换

·  Cmd Markdown -好用的 Web版 Markdown编辑器

· StackEdit -又是一款 Web版 Markdown编辑器

· 墨刀 -一个在线移动应用原型制作工具。旨在帮助产品经理快速制作可在手机端展示的移动应用原型。

· htm2pdf| |HTML to PDF

·  Speaker Deck -在线的演讲稿展示平台

· RunJS -在线编辑、展示、分享、交流你的 JavaScript代码

· Bootswatch - Bootstrap的免费模板

· AdminLTE -又是一个 Bootstrap的免费管理后台

 

APP

以下列表中的 APP都是不区分系统平台的

· 印象笔记 -免费账号完全够用，跨平台跨终端的记录软件

· 365日历 -首先肯定比系统自带的日历强大，要不推荐个蛋蛋俺一般用来搞目标管理，比如学习计划和工作计划生活中会订阅演唱会、电影首映的信息

· 多看阅读 - kindle确实好，但是懒得随身带着多看还算不错，书较多且偶尔有特价比较爽

· Surge -非免费牛逼的网络开发与调试工具，前端必备

·  Monkey - Monkey是 iPhone上一个 GitHub 第三方客户端。展示 GitHub上的开发者的排名，以及仓库的排名

 

Mac

对于美好事务的追求无论何时都不算晚，前年公司给配了台 Mac用做测试开发机，于是开始在 Mac下办公。 Windows？回不去鸟...

· Homebrew -没它程序猿没法好好干活... Homebrew使OS X更完美。使用gem来安装gems、用brew来搞定那些依赖包

· iTerm2 - Mac终端功能少又不好看，iTerm2可以解救你~推荐篇文章：《让你的命令行丰富多彩》

· BrowseShot -偶正在使用的网页截图工具，强烈推荐

· BeyondCompare -在Windows下就开始用了比对文件和文件夹杠杠好使，Merge必备工具

· CheatSheet -能够显示当前程序的快捷键列表，默认的快捷键是长按⌘

· Sequel Pro -免费好用的Mysql工具

· LICEcap -屏幕录制工具，支持导出 GIF动画图片格式轻量级、使用简单，录制过程中可以改变录屏范围

· Manico -快捷启动和切换 APP的工具，高效的第一步 AppStore上收费，不过可以免费试用

· WebStorm -功能超强的前端 IDE，不多介绍，谁用谁知道 PS：貌似俺插件装多了，用着卡卡的，风扇呼呼转...

· Atom - 2015年 7 月之前，在桌面环境下我最喜欢的编辑器是 Sublime。但之后就是 Atom，俺也专门为它写了篇使用纪要

· 马克鳗 - MarkMan，非常强大好用的标注、测量工具。日常工作免费版就完全可以满足，强烈推荐

· Wireshark -说实话，Mac下木有 Fiddler挺不习惯，不过在有更强大的替代品

· SourceTree -一款好用的的 Git客户端工具，重点是支持中文:)

· focus booster -因为比较在意时间管理，所以这软件是俺工作时间的必备之物

·  Mou -我曾使用过的 mk编辑器。原本准备去掉这个推荐，但是我想让大家了解下这个有意思的事情：《一年了，那个闻名遐迩的 Mou你还记得吗？》

 

Linux

· oh-my-zsh -终端党必用的好工具，强烈推荐

· tree - linux以树状图逐级列出目录的内容

· oneapm -强大的运维工具，提供多种监控客户端；有采集、分析、展示等一套功能； PS：我这用了服务器监控(免费哦)

·  httpie -一个 CLI中的 HTTP客户端用法简单、易读

 

Chrome浏览器插件

Chrome应用商店必定是需要的哈。

以下插件都是俺多年积累淘出来的，数量不多，所以就不区分 Github插件和非 Github插件了。按照俺推荐的强度自上向下展示，且大多数插件就是偶工作和生活必备，希望能对大家有用。后续如有新发现好插件，偶也会及时更新哒。

· Postman - POST接口调试终结者，异常强大的接口调试工具。稍稍有一点学习成本，推荐之

· JSONView -就是个 JSON格式的查看工具，可以很方便的展示数据，麻麻再也不用担心偶调试接口啦。PS：同类插件有不少，所以用的开心就行

·  二维码生成器 - RT。PS：这FF早已经自带生成二维码工具了，Chrome还得装插件才行，任性...

· Eye Dropper前端必备的颜色提取神器，操作简单容易上手

· Page Ruler前端必备的尺子。计算页面元素间距、位置等信息的时候，你就知道它的好了，无脑上手，你值得拥有

· FireShot可以截取整个网页、部分页面，然后支持导出为各种格式。俺微博上发的网页全景图都是靠这个插件截取的

· Infinity -好不好用有点见仁见智了，但是我个人比较喜欢。使用后会让你的新标签页耳目一新，有漂亮的背景和各种常用的功能，比如地图、天气、Gmail、Chrome商店等等。当然，在这个插件的设置中还可以设置壁纸、动画效果等等

· Momentum同样也是新标签页的插件，但是不管是视觉上(高清大图)还是功能上，都比 Infinity 高大上不少，Setting里面有不少设置和快捷键，都很好上手的。Infinity胜在中文和直观，Momentum胜在视觉冲击。俺基本上这俩款看心情换着用，所以希望你也都能喜欢:)

·  Octotree -在浏览器左侧展示 Github项目的文件导航，使目录结构一目了然，而且我们国内 Github的访问速度又不稳定，用这个工具也就很提效率了。对经常使用 Github的同学强烈推荐

· BuiltWith / wappalyzer / Chrome SnifferPlus -几款超强的网站分析工具，可以给出网站非常多的技术栈信息。大到 Web Servers、服务端的 Frameworks或 JS 框架，小到 meta、编码格式甚至 Analytics，非常推荐

·  Adblock Plus非常非常有名的免费的过滤广告的插件。PS：广告屏蔽这个见仁见智，其实俺个人还是比较接受一些个性化推荐的广告

· Wide Github无聊又实用的 Github插件。无聊是因为这个插件就特么一个功能，加宽，能让 Github页面变宽，每行展示更多的内容，尤其配合着Octotree，展示效果极佳。非常推荐 Mac用户实用，因为屏幕比较不大，变宽后阅读感觉更好

· GitPlug -在 Github项目页中嵌入有关的图表信息，直观的展示当前项目的 Star Trend，能方便看到当前这个开源项目的发起时间，火爆趋势；对比较知名的项目还有相关的 News展示

· OctoLinker -在 package.json或任意 .js文件中，可以方便的对 require()的 package进去点击，跳转去对应的 Github页面。PS：特么不太好表达，建议你去这个插件的概述页，里面有个十来秒的视频，看完就明白鸟

 

补充：

代理的插件偶没使用，偶手机和电脑的都是配的 Surge无脑搞定，不过代理插件推荐Proxy SwitchySharp，熊掌公司里大多用的都是它

日常开发相关的插件就以上这些，还有几款如知乎的插件、购物插件等这类与开发效率不沾边的，俺就不这上头列了哈

 

Git

· Git教程-廖雪峰 -俺有看过不少 Git的文章，确实这个系列是最通俗易懂的

·  GitAwards - Git工具，可以查看 Git排名

· Git速查 -分类清晰的速查表

· Git简明指南 -入门Github的简明指南，木有高深内容:)

·  Git学习资料整理| |内容包括很多 Git的相关资料，star 1200+

·  GitHub漫游指南 -一篇还算不错的 Git学习总结，就是乱了点...我理解作者漫游的意思是漫无目的想到哪写到哪~看到作者为鸟达成 Git连击的成就，也是蛮拼的:)

 

服务端

如 Ruby、Python、Perl等相似的服务端语言的学习资源。

暂无

 

数据端

· Mongoose -让 NodeJS更容易操作 Mongodb数据库。附上一篇Mongoose学习参考文档

 

设计/交互

作为负责最终效果呈现的前端工程师，多少得了解些设计和交互的，这也是为什么 fetool会单独的存在这一章...当然话又说回来了，偶毕业的第一份工作是设计:)

· 站酷 -里面好东西太多，俺当年真没少再上面淘素材

· UI中国 -光听名字就知道有多高大上鸟:)

 

速查手册

RT，这篇都是些文档或者API，一般这类东西都在大家浏览器的书签内，偶这也列一下大前端常用的手册地址

· HEAD -最全的 列表，真心佩服这种偏执的整理能力

· 百度CDN公共库 -基本常见的库都收录拉，搞 demo的时候特方便

· HTML和 CSS 代码规范 -编写灵活、稳定、高质量的 HTML和 CSS代码的规范

· Linux命令中文手册 -木有系统的好好学习 Linux，所以命令更不熟悉真羡慕那些CLI玩的飞起的:)

· Git速查 -分类清晰的速查表

· jQueryAPI 1.11.3 - ZeptoAPI基本和 jQuery一样，所以看一份就好

·  CSS3 - CSS3的在线手册

· Express API -中文手册:) 4.x和3.x都有

· CI用户指南 -一个轻量级的 PHP框架用户指南推荐指数低的原因是劳资PHP比较弱，囧

· Yaf -鸟哥(惠新宸)所写的 PHP 框架推荐指数低的原因同上...

 

杂七杂八

放些开发中较有用的杂物在这儿

· 租房要点 -适用于北上广深杭，大城市打拼租房确实是硬伤

· QQ群规 -突然某天，有个 QQ群让我加群原本我是拒绝的，但当我看完这篇 QQ群规后...劳资真的被感动到了，太牛逼、够专业！最后，我默默加群鸟:)

· gitignore文件 -介绍不同语言项目的 gitignore模板

· 程序员如何优雅的挣零花钱？ -中肯的文章，如果读完能有些许收获，那么恭喜你

· git-draw -黑魔法，可以修改自己 Git上的 Contributions

· GitBook -写记录的好地方

· Codebabes -学编程的网站。重点是每通过一个测试，尼玛对应的妞会脱一件衣服... PS：要哦~

· emailframe -邮件展示确实比较坑，建议有需要的收藏

· ReadmeSample| |项目高大上的第一步就是包装，所以来看看 README 的书写套路吧 PS：劳资怎么这么无聊...

 

前端炫技-_炫酷狂拽叼炸天站点_

· windows93 -模拟 Win93桌面，思路、体验和整体效果比较有意思

· GeekTyper -好玩又具有 Geek精神的网站，虽然创建的目的是个恶作剧 PS：网站需要

· 2016.makemepulse.com -帅哭了。请使用现代浏览器打开

· 前端技能栈 -好玩的前端技能栈展示

· Mapbox -非常叼的开源项目，有方便的 JSAPI(还有 SDK)。不过免费版只能浅尝，流量有限。 PS：网站需要

· Clark Duvall -一枚歪果仁的个人 blog，范儿叼叼的

· SuperScrollorama -好玩好看的动画库，链接是SuperScrollorama的展示页

· parallax.js -一个视差引擎的官网，在电脑和手机上都有很好的体验

· CSS字母 -用 CSS实现英文字母，叼叼的

· 墨刀 -一个在线移动应用原型制作工具。旨在帮助产品经理快速制作可在手机端展示的移动应用原型。

 

小结

背景

俺算个比较能自我总结的码农，所以偶尔喜欢写点东西做些记录或者自我熏陶陶醉一下。可写着写着发现Evernote里面的东西太尼玛多(乱)了，于是想着把一些技术相关的资料都整理整理，都丢到Github上沉淀下来。这样Evernote就可以只需要记录些偏生活方便的，看着清爽一些...

所以，这篇记录其实只是为偶自己而写，确信以后也一直会这样~~~

 

说说目标

其实与这篇记录类似的文章太多鸟，俺也不愿意成为一个单纯的收集资料，分享资料的这么个东西。我希望 fetool能更生动、更个性，最好能更另类点，对于每样工具的思考和解析更多点，吐槽也必须有理有据，然后再配上劳资收集的 low图，完美！希望通过不停的完善这篇记录，能Push劳资多了解业内的新玩具和新创意，然后围绕这些新东西，客观的再写点好东西，比如文章、资料、开源项目这些，让其他伙伴们少走弯路或学的更顺畅点儿

所以劳资对自己的要求是：这篇记录里列出的每样东西，自己都得的去了解、去尝试，然后再列出来。能举一反三最好，如果达不到至少也能清楚的认识：列出来的这玩意对程序员有没有卵用，解决了啥痛点。

 

TODO

1、继续完善和扩充内容

2、“备注/说明”这一栏不够犀利，希望再多加入自己的理解、点评、吐槽，让这篇记录更犀利和生动

3、支持导出多种格式，如.pdf、.epub、.mobi等

4、后续看看如果有必要，可以单独搞个页面，优化下阅读和展示效果