即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

超级全的Web大前端工具集

微信 Web开发 18℃ 0评论

来自:nieweidong (Darren) · GitHub

链接:https://github.com/nieweidong/fetool(点击尾部阅读原文前往)

作者:

微博 @聂微东

个人 Blog fefork.com

博客园 犀利的东哥

已获转载授权


目录

  • 前端组织/前端博客

  • 博客搭建

  • 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 – 当下视频需求都用上

  • 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 and automatically 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 Sniffer Plus – 几款超强的网站分析工具,可以给出网站非常多的技术栈信息。大到 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、后续看看如果有必要,可以单独搞个页面,优化下阅读和展示效果


链接:https://github.com/nieweidong/fetool(点击尾部阅读原文前往)


●本文编号242,以后想阅读这篇文章直接输入242即可。

●输入m可以获取到文章目录

相关推荐↓↓↓

 

前端开发

推荐15个技术类公众微信

涵盖:程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。

转载请注明:CodingBlog » 超级全的Web大前端工具集

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情
(5)个小伙伴在吐槽
  1. /嘘
    小朗2017-02-08 02:49 回复
  2. 厉害👍,不过真没啥时间也静不下心来好好学习.../撇嘴
    大风刮过~2017-02-08 03:01 回复
  3. 赞/强/强
    真爱💋花儿2017-02-08 04:25 回复
  4. node公具我还用nvm和nrm
    欧文12352017-02-08 04:43 回复
  5. 一看就是那种粗俗的码农,没多少内涵
    blink2017-02-16 15:00 回复