前端组织
虽混过外企俩家,但劳资英文这项的技能点还是灰色的...so,俺关注的站点主要以中文为主
名称 | 推荐指数 | 备注/说明 |
---|
Git | ★★★★★ | 劳资清楚这不是个纯粹的前端社区... 但作为全球最大的搞基社区,无数前端项目在这启航 没Git都不好意思面基有木有! |
MDN | ★★★★★ | 不解释,无数的资源再等着你探索 |
Awesomes.cn | ★★★★☆ | 国人维护的前端资源库,深度对接到 Github |
慕课 | ★★★★☆ | 大量的在线计算机课程。 虽然初、中级居多,但是不乏有巨作值得细细品尝 |
W3Cplus | ★★★★☆ | 大漠(《图解CSS3》作者)在国内的影响力杠杠的 Sass专家级 |
百度Web前端研发部 | ★★★★ | 确实对得起“研发”这个称呼 FIS、UEditor等就是他们搞出来的 |
前端乱炖 | ★★★☆ | 前端社区太多,乱炖还算做的不错的 |
极客学院 | ★★★ | 和慕课类似,但是内容更杂、更丰富 PS:貌似比较新颖的教程都是收费的 |
Div.IO | ★★★ | 主要内容是最新的前端库和前沿技术 |
腾讯全端AlloyTeam | ★★★ | 腾讯Web前端团队 |
前端博客
值得长期占坑的前端个人博客,都是偶经常关注的
博客搭建
使用hexo/jekyll + GitPage
,前端搭建静态博客那是相当easy。用Markdown写文章做记录,再push到Git上,分分钟高大上有木有
CSS
名称 | 推荐指数 | 备注/说明 |
---|
LoadersCSS | ★★★★☆ | 用CSS技术实现loading动画; 补一句,想熟悉、理解keyframes、animation、transform、transition 的童鞋可以直接去读其源码(只有千把行代码),读完就算出师鸟:) |
WeUI | ★★★★☆ | 一套同微信原生视觉体验一致的基础样式库 为微信Web开发量身设计,令用户的使用感知更加统一 |
HINT.css | ★★★★ | 一款非常小巧的提示框效果 |
Hover.css | ★★★★ | 很多鼠标Hover态的效果,可以给产品学习一下:) |
csscss | ★★★★ | 用于检查css代码冗余 |
purecss | ★★★☆ | 小巧的响应式CSS库,Yahoo!出品 |
浏览端JS
名称 | 推荐指数 | 备注/说明 |
---|
Echarts | ★★★★★ | 好用,最关键的是支持的图表展示非常之多,强烈推荐 |
Swiper | ★★★★★ | 强大的Slider库 其实这类效果库非常多,但文档能那么专业的就很少鸟 |
fullPage | ★★★★☆ | 非常好用的全屏滑动库,看demo就明白 |
PhotoSwipe | ★★★★☆ | 偶常用的js库 官网上有这么一句很关键、重要"no dependencies" |
Vuejs | ★★★★☆ | 比较喜欢其作者... 所以劳资正在看源码学习学习 |
emojify.js | ★★★★ | 能够将emoji 关键词转换为emoji 图片的JS 插件 可以快速的为你的网站提供emoji 表情支持 |
Highcharts | ★★★★ | Highcharts中文网,又是一个图表库 确实功能强大,但是觉得不好看... PS:官网就做的不好看,脏脏的赶脚 |
videojs | ★★★☆ | 当下视频需求都用上<video> 鸟 样式和交互统一的问题交给videojs搞定:) |
clipboard | ★★★☆ | 仅2kb大小,搞定剪贴板功能,屌不屌~ 但是,Safari不支持... |
impress.js | ★★☆ | 用来写PPT不错,偶也曾为其写过一篇impress.js初体验 |
Cropper | ★★☆ | 国人开发的图片裁剪库 |
Swiper/PhotoSwipe/fullPage
有这仨库,微信里常见的H5页完全不是问题哒
NodeJS
作为一名大前端甚至是多端,Node绝逼是必备的一块
社区活跃、部署方便都是令我对Node爱不释手的主要原因
推荐Package
这里介绍些有特色且前端有必要知道的包
名称 | 推荐指数 | 备注/说明 |
---|
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应用的进程管理器 |
async | ★★★★☆ | 一个流程控制工具包,提供直接而强大的异步功能 |
lodash | ★★★★☆ | JS工具库Underscore.js 的一个fork发展而来 |
socket.io | ★★★★☆ | 预计Node的实时框架 聊天室、页游等对实时性有高要求的较适用 |
Mongoose | ★★★★☆ | 让NodeJS更容易操作Mongodb数据库; 附上一篇Mongoose学习参考文档 |
koa | ★★★★☆ | 玩Node都知道express,但使用koa的就少很多,门槛比Ex稍高 通过generator避免繁琐的回调函数嵌套,强烈推崇官方的文章教程 |
Shipit | ★★★★☆ | 一个强大的自动化部署工具。 shipit很多地方非常类似gulp,他们的核心都是任务系统。 |
node-inspector | ★★★★☆ | Node调试工具,使用起来跟Chrome的JS调试器很相似 |
winston | ★★★★☆ | Node服务最流行的日志库之一 |
thenify-all | ★★★★ | 把异步的方法变成Promise的 Promisifies all the selected functions in an object |
PhantomJS | ★★★★ | 一般用来做抓取截图和无界面测试 也可以用来操作DOM和网络监测,很好玩的库Quick Start |
Mocha | ★★★★ | Node里最常用的测试框架; 它支持多种node的assert libs; 同时支持异步和同步的测试,同时支持多种方式导出结果; 也支持直接在browser上跑JS代码测试。 |
everyauth | ★★★★ | OAuth的集成解决方案 |
shelljs | ★★★☆ | 写Node时难免需要用shell去操作些神马 shelljs是基于Node的shell工具,Api及其简单 |
hashids | ★★★☆ | 看名称就懂,给userid加解密用的 |
colors | ★★☆ | 花俏的小工具 让打印console.log 时有更好的展示样式 |
supervisor
和nodemon
这俩都是监控Node代码,使得每次修改代码后会,开发Node程序必备
以上库俺都有使用过,甚至有不少都是项目开发中、各种特定场景下必用的,有任何使用问题欢迎沟通哈:)
Node学习指南
Build 项目构建
Gulp+Webpack的使用套路参考:learning-gulp
Gulp资料收集:use-gulp
推荐篇与Webpack相关的文章《CSS Modules》
Webpack用起来吼吼:webpack-howto
Gulp推荐包
Gulp最基础的库就不列在下表格中鸟,其中包括:
精选阅读
以下内容不包括NodeJS和面试相关的,俺已经单独准备好鸟
前端面试
名称 | 推荐指数 | 备注/说明 |
---|
在LinkedIn做面试官的故事 | ★★★★★ | 非面试题,介绍LinkedIn的面试过程 文章有很多中肯的建议和想法,推荐阅读 |
大漠:写给前端面试者 | ★★★★★ | 这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受... |
前端面试题 | ★★★★☆ | Git上非常火的前端面试题,start17k+ |
工具/软件
Web
APP
以下列表中的APP都是不区分系统平台的
名称 | 推荐指数 | 备注/说明 |
---|
印象笔记 | ★★★★★ | 免费账号完全够用,跨平台跨终端的记录软件 |
多看阅读 | ★★★★ | kindle确实好,但是懒得随身带着 多看还算不错,书较多且偶尔有特价比较爽 |
Android
名称 | 推荐指数 | 备注/说明 |
---|
小米桌面 | ★★★★☆ | 多好看、多漂亮谈不上,关键是没有广告 |
iPhone
名称 | 推荐指数 | 备注/说明 |
---|
Monkey | ★★★★ | Monkey是iPhone上一个GitHub第三方客户端。 展示 GitHub 上的开发者的排名,以及仓库的排名 |
Mac
对于美好事务的追求无论何时都不算晚,前年公司给配了台Mac用做测试开发机,于是开始在Mac下办公。Windows?回不去鸟...
名称 | 推荐指数 | 备注/说明 |
---|
Homebrew | ★★★★★ | 没它程序猿没法好好干活...Homebrew 使OS X 更完美。 使用gem 来安装gems 、用brew 来搞定那些依赖包 |
iTerm2 | ★★★★☆ | Mac终端功能少又不好看,iTerm2可以解救你~ |
BrowseShot | ★★★★☆ | 我正在使用的网页截图工具,强烈推荐 |
WebStorm | ★★★★☆ | 功能超强的前端IDE,不多介绍,谁用谁知道 |
Atom | ★★★★ | 2015年7月之前,在桌面环境下我最喜欢的编辑器是Sublime。 但之后就是Atom,俺也专门为它写了篇使用纪要 |
马克鳗 | ★★★★ | MarkMan,非常强大好用的标注、测量工具。 日常工作免费版就完全可以满足,强烈推荐 |
Wireshark | ★★★☆ | 说实话,Mac下木有Fiddler挺不习惯,不过在有更强大的替代品 |
SourceTree | ★★★☆ | 一款好用的的Git客户端工具,重点是支持中文:) |
focus booster | ★★★ | 因为比较在意时间管理,所以这软件是俺工作时间的必备之物 |
Mou | ★★ | 小清新的Markdown编辑器 |
Linux
名称 | 推荐指数 | 备注/说明 |
---|
oh-my-zsh | ★★★★★ | 终端党必用的好工具,强烈推荐 |
tree | ★★★★ | linux以树状图逐级列出目录的内容 |
oneapm | ★★★★ | 强大的运维工具,提供多种监控客户端; 有采集、分析、展示等一套功能; PS:我这用了服务器监控(免费哦) |
httpie | ★★★☆ | 一个CLI中的HTTP客户端 用法简单、易读 |
Chrome浏览器插件
Git
Redis
MongoDB
杂七杂八
放些开发中较有用的杂物在这儿
名称 | 推荐指数 | 备注/说明 |
---|
QQ群规 | ★★★★☆ | 突然某天,有个QQ群让我加群 原本我是拒绝的,但当我看完这篇QQ群规后... 劳资真的被感动到了,太牛逼、够专业! 最后,我默默加群鸟:) |
.gitignore文件 | ★★★★☆ | 介绍不同语言项目的gitignore模板 |
Codebabes | ★★★ | 学编程的网站。 重点是每通过一个测试,尼玛对应的妞会脱一件衣服... PS:要翻墙哦~ |
ReadmeSample | ☆ | 项目高大上的第一步就是包装,所以来看看README 的书写套路吧 PS:劳资怎么这么无聊... |
前端炫技-_炫酷狂拽叼炸天站点_
名称 | 推荐指数 | 备注/说明 |
---|
windows93 | ★★★★☆ | 模拟Win93桌面,思路、体验和整体效果比较有意思 |
GeekTyper | ★★★★☆ | 好玩又具有Geek精神的网站,虽然创建的目的是个恶作剧 PS:网站需要翻墙 |
Mapbox | ★★★★ | 非常叼的开源项目,有方便的JSAPI(还有SDK)。 不过免费版只能浅尝,流量有限。 PS:网站需要翻墙 |
SuperScrollorama | ★★★☆ | 好玩好看的动画库,链接是SuperScrollorama的展示页 |
parallax.js | ★★★ | 一个视差引擎的官网,在电脑和手机上都有很好的体验 |
墨刀 | ★★ | 一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。 |
以下是拔赤总结的前端技能图:
转自:https://github.com/nieweidong/fetool