专门搜集整理前端工作中遇到的各种问题、解决方案、新技术和热门工具插件等
一、团队组织
| 网站 | 说明 |
|---|---|
| 腾讯 AlloyTeam 团队 | 腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 |
| ISUX | 腾讯社交用户体验设计，简称ISUX，腾讯设计团队网站 |
| CDC | 腾讯用户研究与体验设计部 |
| FEX | 百度Web前端研发部出品 |
| 淘宝前端团队（FED） | 用技术为体验提供无限可能 |
| 凹凸实验室 | 京东用户体验设计部出品 |
| 奇舞团 | 奇虎360旗下前端开发团队出品 |
| 阿里巴巴国际UED团队 | 在更新的屏幕里创造出更好的产品和更优的体验 |
| EFE | 由百度多个遵循统一技术体系的前端团队所组成 |
| UXC | 覆盖了百度85%以上的产品体验设计 |
二、开发社区
| 网站 | 说明 |
|---|---|
| StackOverflow | 加入世界上最大的开发者社区 |
| SegmentFault | 中文领域最大的技术问答交流社区平台 |
| 知乎 | 中文互联网最大的知识分享和社交平台 |
| 开源中国 | 目前国内最大的开源技术社区 |
| w3ctech | 中国最大的前端技术社区 |
| 掘金 | 一个帮助开发者成长的社区 |
| V2EX | 创意工作者们的社区 |
| 博客园 | 一个面向开发者的知识分享社区 |
| CNode | 国内最大最具影响力的 Node.js 开源技术社区 |
| Ruby China | 由众多爱好者共同维护的 Ruby 中文社区 |
三、前端门户
| 网站 | 说明 |
|---|---|
| 前端网 | 一个专注于Web前端开发行业的综合性门户网站 |
| 大前端 | 一个集前端开发和Wordpress内容为一体的双轨独立网站 |
四、前端大牛
| 网站 | 说明 |
|---|---|
| AlloyTeam | 腾讯Web前端团队 |
| taobaofed | 淘宝前端团队（FED） |
| alinode团队博客 | 基于 Node 运行时的应用性能管理解决方案 |
| 鑫空间-鑫生活 | 张鑫旭,上海阅文信息技术有限公司用户体验设计师 |
| 廖雪峰的官方网站 | 廖雪峰，著有《Spring 2.0核心技术与最佳实践》一书。 |
| 阮一峰的个人网站 | 阮一峰,2014年出版《ECMAScript 6入门》 |
| JavaScript ××× | 三生石上 |
| 囧克斯 | 勾三股四 |
| w3cplus | 大漠，就职淘宝，CSS3、CSS处理器和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。 |
| 酷 壳 – COOLSHELL | 陈皓，就职经历Amazon中国任研发经理；阿里北京研发中心、商家业务部资深专家；阿里核心系统和阿里云ECS相关的虚拟化平台的开发工作。 |
| html5ify | 朴灵，阿里数据产品部资深工程师。致力前端、数据可视化、Node等领域 |
| Ruby‘s Louvre | 钟钦成,网名司徒正美,著名的JavaScript专家,去哪儿网前端架构师 |
| CSS森林 | GhostZhang,微信支付设计中心，负责重构前端团队的管理工作。 |
| 99css | ytzong,就职经历139 邮箱前端工程师；腾讯 ISUX 前端工程师； iOS 独立开发者 |
| [米随随] s5s5 | 刘小超，现在就职于 Tencent ISUX ，岗位 UI Engineer，主要从事UI开发方面工作。 |
| 小胡子哥的个人网站 | Barret李靖，阿里巴巴职员 |
| Jerry Qu | 屈光宇，奇虎 360，前端开发 |
| EVILCOS | 余弦，知道创宇 |
| WEB前端开发 | 愚人码头，内容涵盖Web前端开发原创教程、技术中文文档、前端工具、资源分享、疑难解答、最新技术、招聘信息等 |
| 伯乐在线 | 黄余粮，黄利民 |
| Aimingoo‘s Blog | 周爱民，一名程序员、架构师，就职物联网公司（ruff.io） |
| justjavac(迷渡) | justjavac，天津维基科技有限公司研发工程师 |
| Be For Web | C7210，交互设计师、UX热爱者、译者 |
| Alon‘s Blog | Alon Zhang，互联网资讯博主 |
| I‘m qiqiboy! | qiqiboy，wordpress开发、web前端 |
五、活跃微博
| 网站 | 说明 |
|---|---|
| 掘金技术社区 | 挖掘最优质的互联网技术 |
| w3c中国 | 万维网联盟中国办事处官方微博 |
六、书籍推荐
| 书籍 | 作者 | 译者 |
|---|---|---|
| 《Web标准设计》 | 刘杰（嗷嗷） | |
| 《大巧不工 Web前端设计修炼之道》 | 赖定清 / 林坚 | |
| 《高性能网站建设指南 前端工程师技能精髓》 | Steve Souders | 刘彦博 |
| 《高性能网站建设进阶指南 Web开发者性能优化最佳实践》 | Steve Souders | 口碑网前端团队 |
| 《Web站点优化》 | 金 | |
| 《Node.js开发指南》 | 郭家寶（BYVoid） | |
| 《JavaScript高级程序设计（第3版）》 | [美] 尼古拉斯·泽卡斯 | 李松峰 / 曹力 |
| 《JavaScript权威指南》 | 弗拉纳根 | 李强 |
| 《JavaScript语言精粹》 | Douglas Crockford | 赵泽欣/ 鄢学鹍 |
| 《深入浅出Node.js》 | 朴灵 | |
| 《CSS开发王》 | 张亚飞 | |
| 《JavaScript DOM编程艺术 （第2版）》 | [英] Jeremy Keith / [加] Jeffrey Sambells | 杨涛 / 王建桥 / 杨晓云 等 |
七、前端教程
| 网站 | 说明 |
|---|---|
| W3C中国 | Web技术领域最具权威和影响力的国际中立性技术标准机构 |
| MDN Web 文档 | 学习 Web 开发的最佳实践 |
| w3cschool | 学编程，从w3cschool开始 |
| Microsoft Web 开发 | Developer Network |
八、HTML(5)
| 网站 | 说明 |
|---|---|
| HTML(超文本标记语言)MDN | MDN Web 文档 |
| 后HTML5时代Ⅰ | TGideas 万技师 |
| 后HTML5时代Ⅱ | TGideas 鬼爪手 |
| HTML5 进阶系列 | 爱前端 林鑫 |
| 匠心打造canvas签名组件 | 翟灿东，网名路易斯，平安健康前端工程师。 |
| HTML5 有哪些让你惊艳的 demo？ | 知乎 关注者 8K |
| 一只会飞的鱼 | 每周一点canvas动画 |
九、CSS(3)
| 网站 | 说明 |
|---|---|
| CSS Reference | 从基础知识中学习CSS的所有重要属性 |
| You Don‘t Know CSS | 杨健 |
| 强大的css3 | Wayne Zhu |
| 深入了解 CSS3 新特性 | 周 翔 |
| Flex 布局教程：语法篇 | 阮一峰 |
| Flex 布局教程：实例篇 | 阮一峰 |
| 如何编写轻量级 CSS 框架 | 叙帝利 |
| CSS 专业技巧 | 一个帮你提升 CSS 技巧的收藏集 |
| CSS3技术-雪碧图自适应缩放与精灵动画方案 | 慕课网 艾伦 Aaron |
| 搞定这些疑难杂症，向css3动画说yes | IMWeb 结一 |
| Effective前端1：能使用html/css解决的问题就不要使用JS | 会编程的银猪 |
| 前端如何呼风唤雨 | IMWeb coverguo |
| 默认的checkbox、input、radio太丑了？我来教你改变使用纯css3改写的带动画的默认样式 | 掘金 sunshine小小倩 |
| CSS性能分析，如何优化CSS提高性能 | 博客园 楼兰小骑士 |
| CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅 | 思否 微醺岁月 |
| CSS-Tricks | The Shapes of CSS |
十、ECMAScript
| 网站 | 说明 |
|---|---|
| Understanding ECMAScript 6 | Nicholas C. Zakas |
| 探索 ES6 | 翻译自《 Exploring ES6 》 |
| ECMAScript 6 入门 | 阮一峰 |
| ES5合集 | 颜海镜 |
| ES6 你可能不知道的事 - 基础篇 | 化辰，淘宝前端团队（FED） |
| ES6 你可能不知道的事 - 进阶篇 | 化辰，淘宝前端团队（FED） |
十一、JavaScript
| 网站 | 说明 |
|---|---|
| JavaScript 标准参考教程（alpha） | 阮一峰 |
| JavaScript ××× | 三生石上 中文翻译 |
| JavaScript Promise迷你书（中文版） | 原著：azu / 翻译：liubin、kaku、honnkyou |
| JS 函数式编程指南 | Linghao Li |
| JavaScript 闯关记 | stone0090 |
十二、jQuery
| 网站 | 说明 |
|---|---|
| 学习jQuery | Learning Center |
| jQuery API 中文文档 | 官方 |
| jQuery API中文文档 | 愚人码头 |
| jQuery UI API中文文档 | 愚人码头 |
| jQuery中文手册 | hemin |
| YOU MIGHT NOT NEED JQUERY | 你可能不需要JQUERY |
十三、Vue.js
| 网站 | 说明 |
|---|---|
| Vue.js | 官方网站 |
| vuejs | 官方仓库 |
| Vue 专业中文社区 | 全球最大的 Vueframework 中文开源技术社区 |
| vuefe.cn | Vue.js 中文文档 |
| Vue Forum | Vue 论坛 |
| Vue Land | Vue 聊天室 |
| vue-devtools | 用于调试Vue.js应用程序的浏览器devtools扩展 |
| Vue Loader | 一个 webpack 的 loader |
| vue-router | 官方路由 |
| Vuex | 状态管理模式 |
| Vue 服务端渲染 | Vue.js 服务器端渲染指南 |
| Vue package | Find the best packages for your Vue app! |
| awesome-vue | Awesome Vue.js |
| Element | 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 |
| iView | 一套基于 Vue.js 的高质量 UI 组件库 |
| Vue + webpack 项目实践 | 勾三股四 |
| vue 性能优化 | 岛书,Coffcer |
十四、AngularJS
| 网站 | 说明 |
|---|---|
| Angular 中文版 | 官方网站 |
| AngularJS入门教程 | 严清 , 李诗剑 (译者) |
| AngularJS在线教程 | 乔乐共享 |
| AngularJS学习笔记 | 邹业盛 |
| Angularlearning | Angular.js 的一些学习资源 |
| UI Bootstrap | Bootstrap components written in pureAngularJSby theAngularUI Team |
| AngularStrap | AngularJS 1.2+ native directives for Bootstrap 3 |
| AngularLearning | dolymood |
十五、React
| 网站 | 说明 |
|---|---|
| React | 官方网站 |
| React 中文索引 | Made by 题叶 & Feifei Hang |
| React China | React 中文的论坛 |
| React 入门实例教程 | 阮一峰 |
| React Router 使用教程 | 阮一峰 |
| React Native 中文版 | 极客学院 |
| React.JS教程 | PHPERZ |
| React.js 2016 最佳实践 | 腾讯全端 AlloyTeam 团队 Blog |
| React 导读 | 小撸,国双科技 |
| Redux 中文文档 | 收到 Redux 作者 Dan 的多次点赞 |
| React Router 中文文档 | 官方文档中文翻译 |
| React 介绍及实践教程 | 董越 和 徐新茹 |
| React 设计思想 | React 核心开发者、有 React API 终结者之称的 Sebastian Markb?ge 撰写 |
| React Webpack 小书 | 作者 Christian Alfoni and Juho Veps?l?inen 中文译者 Fakefish |
| Material-UI | React 前端 UI 库 |
| Amaze UI React | 基于 React.js 开发的 Web 组件库 |
| dva | 基于 redux、redux-saga 和 react-router 的轻量级前端框架 |
| Ant Motion | 能够快速在 React 框架中使用动画 |
十六、Node.js
| 网站 | 说明 |
|---|---|
| NODESCHOOL | 教你 Web 开发技能的开源课程，自学或者参加一个附近的教学活动 |
| Node入门 | 作者： Manuel Kiessling 翻译： goddyzhao & GrayZhang & MondayChen |
| 七天学会NodeJS | Alibaba.com |
| Node.js 包教不包会 | alsotang |
| 从零开始nodejs系列文章 | 粉丝日志 |
| NodeJS的代码调试和性能调优 | 小胡子哥 |
| Express | 基于 Node.js 平台，快速、开放、极简的 web 开发框架 |
| Express框架 | 阮一峰 |
| Koa 框架 | 阮一峰 |
| Koa | Koajs 中文文档 |
十七、RequireJS
| 网站 | 说明 |
|---|---|
| Javascript模块化编程 | 阮一峰 |
| RequireJS学习 | 叶小钗 |
| RequireJS入门 | Snandy |
| RequireJS 入门指南 | 参与翻译 NCThinker, 姜鹏飞, super0555 |
十八、Sass和Less
| 网站 | 说明 |
|---|---|
| Sass中文网 | 世界上最成熟、最稳定、最强大的专业级CSS扩展语言 |
| SASS中文文档 | Sass 是成熟、稳定、强大的 CSS 扩展语言 |
| SASS用法指南 | 阮一峰 |
| Sass入门 | 大漠 |
| Less中文文档 | 给 CSS 加点料 |
十九、Webpack
| 网站 | 说明 |
|---|---|
| webpack | 官方网站 |
| webpack 中文 | 中文官网 |
| webpack | github |
| webpack-demos | 阮一峰 |
二十、Markdown
| 网站 | 说明 |
|---|---|
| Markdown 语法说明 (简体中文版) | riku |
| Markdown 入门参考 | LearnShare |
| GitBook | 帮助团队在线撰写，协作和发布内容 |
| Cmd Markdown | Cmd Markdown 编辑阅读器 |
| StackEdit | 浏览器中的Markdown编辑器 |
| Mditor | 一款轻量级的markdown编辑器 |
二十一、Git和GitHub
| 网站 | 说明 |
|---|---|
| Git-Book | 官方文档 |
| git - 简明指南 | 罗杰·杜德勒 |
| 猴子都能懂得GIT入门 | backlog |
| 廖雪峰的官方网站 Git教程 | 廖雪峰 |
| Learn Git Branching | 通过一系列刺激的关卡挑战，逐步深入的学习 Git 的强大功能 |
| Git工作流指南 | 李鼎(哲良),taobao |
| 有关 git 的学习资料 | xirong,alibaba |
| GitHub 漫游指南 | Phodal Huang,黄峰达,ThoughtWorks 高级咨询师 |
| GitHub秘籍 | Star 24.8k Fork 3.8k |
二十二、Github大牛
| 网站 | 说明 |
|---|---|
| AlloyTeam | 腾讯 AlloyTeam |
| fex-team | Baidu FEX team |
| tmallfe | 天猫前端团队 |
| nzakas | 尼古拉斯·泽卡斯?Nicholas C. Zakas，雅虎首页的前端技术主管， YUI 库的贡献者，目前在 Box 公司任职 |
| tj | TJ Holowaychuk，Koa、Co、Express、jade、mocha、node-canvas、commander.js等知名开源项目的创建和贡献者 |
| JacksonTian | 朴灵(田永强)，就职阿里巴巴数据平台，Node.js布道者 |
| lifesinger | 玉伯，支付宝前端，seajs作者 |
| jobbole | 伯乐在线 |
| paulirish | Google Chrome |
| kejun | Douban Inc |
| fengmk2 | fengmk2，Alipay |
| fool2fish | Zhouxuan Yang，Alipay |
| jayli | Taobao |
二十三、框架类库
| 网站 | 说明 |
|---|---|
| WeUI | 微信官方设计团队为微信 Web 开发量身设计 |
| ZUI | 一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。 |
| MZUI | 为移动端设计，基于 Flex 的 UI 框架 |
| SUI Mobile | 阿里他她，一套基于 Framework7 开发的UI库 |
| KISSY | 一款跨终端、模块化、高性能、使用简单的 JavaScript 框架 |
| nice validator | 领先的表单验证解决方案 |
| Underscore.js | 一整套函数式编程的实用功能 |
| Lodash | 通过解决数组，数字，对象，字符串等问题，让JavaScript变得更轻松。 |
| Metro UI CSS | 一个 BizSpark Startup |
| Kite CSS | 一个灵活的布局助手 |
| Creative Link Effects | 创意链接或菜单项效果 |
| JAVASCRIPTING | 最优的javascript库、框架和插件。 |
| Microjs | 神奇的微型框架 |
二十四、动画
| 网站 | 说明 |
|---|---|
| Animate.css | 一个跨浏览器的CSS动画库 |
| Bounce.js | 触摸库 CSS3关键帧动画 |
| Waves.js | 点击按钮或背景动画 |
| 缓动函数 | 指定动画效果在执行时的速度，使其看起来更加真实 |
二十五、移动端
| 网站 | 说明 |
|---|---|
| 腾讯移动Web前端知识库 | Mars - mobile needs a hero |
| Mobi Tips | TGideas |
| mobileTech | jtyjty99999-Alibaba，收集移动端开发所需要的一些资源与小技巧 |
| 无线Web开发经验谈 | 支付宝 |
| Mobile Web Favorites | hoosin |
| 移动web资源整理 | 白树，就职微信支付，负责移动端产品，擅长小程序、H5前端开发 |
| Zepto.js API 中文版 | 愚人码头,一些可选功能是专门针对移动端浏览器的 |
| Framework7 | 阿里他她，特色的HTML框架 可以创建精美的iOS应用 |
| SUI Mobile | 阿里他她，一套基于 Framework7 开发的UI库 |
| Swiper | 开源、免费、强大的移动端触摸滑动插件 |
二十六、开发平台
| 网站 | 简介 |
|---|---|
| JSFiddle | 一款在线的代码编辑器,通过流行的JS框架创建自定义的环境,以简化JS代码 |
| JSBin | Collaborative JavaScript Debugging |
| BabelJS | 一个 JavaScript 编译器 |
| RunJS | 在线编辑、展示、分享、交流你的 JavaScript 代码 |
| JSDM | 一个WEB前端在线编辑器，可同时编辑HTML、CSS、JAVASCRIPT代码，并即时预览！ |
| CodePen | 面向前端设计人员和开发人员的社交开发环境 |
| IDeone | 一个在线编译器和调试工具，它允许您编译源代码并在线执行超过60种编程语言 |
| HCODE | 一个在线代码测试、托管、分享的工具，方便与别人一起调试、分享代码，具有代码高亮、一键代码格式化、贴心的快捷键等功能。 |
| Thimble | 一个在线代码编辑器，用它可以很轻松地创建和发布一个您自己的网页，一切伴随着 HTML、CSS 和 JavaScript。 |
二十七、在线工具
| 网站 | 简介 |
|---|---|
| CanIUse | 查看浏览器版本对HTML5和CSS3的支持情况 |
| ECMAScript 6 compatibility table | ECMAScript 6兼容性表 |
| CSS Validation Service | W3C CSS 验证服务 |
| BROWSERHACKS | browser specific CSS and JavaScript hacks |
二十八、正则表达式
| 网站 | 简介 |
|---|---|
| 正则表达式 MDN | MDN Web 文档 |
| RegExp对象 | 阮一峰 |
| 正则的扩展 | 阮一峰 |
| 进阶正则表达式 | 小胡子哥 ( Barret Lee ) |
| 正则表达式30分钟入门教程 | deerchao |
| 正则表达式前端使用手册 | 路易斯 |
| JS正则表达式元字符 | 思否 小弟调调 |
二十九、CDN
| 网站 | 简介 |
|---|---|
| 百度静态资源公共库 | 稳定，快速，全面，开源的国内CDN加速服务。 |
| 360网站卫士常用前端公共库CDN服务 | 常用前端公共库以及和谐使用Google公共库&字体库的调用方法 |
| 前端库CDN服务 | 微信，主要包括一些常用的 JS 库，CSS库，甚至是SWF文件。 |
| BootCDN | Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务 |
| TAONPM | 淘宝 NPM 镜像,可以用此代替官方版本(只读) |
| Staticfile CDN | 免费、快速、开放的 CDN 服务 |
| jQuery CDN | 最新的稳定版本 |
三十、API
| 网站 | 简介 |
|---|---|
| OverAPI.com | Collecting All Cheat Sheets |
| 常用API文档索引 | 开源中国社区 在线API文档 |
一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。那么如何系统的学习企业实用的web前端技术呢，为此建立了一个web前端的直播上课学习扣扣裙，web前端前面数字是七六七，web前端中间的数字是二七三，web前端最后是零一二，将数字连接起来就是了。真正想要学习的可以进入，打酱油的就不要浪费大家的时间了。现在说的重点不在于讲解技术，而是更侧重于对技巧的讲解。技术非黑即白，只有对和错，而技巧则见仁见智。
原文地址：https://blog.51cto.com/14392904/2414008
时间： 2024-11-09 19:31:54