收藏前端常用网站——转载好文
本文转载于 前端知识图谱 作者:xiangzhihong8
因为原文我在学习过程中,有些链接已经失效,所以本文我有删改;
一.综合类
二. jQuery
Ecmascript
- Understanding ECMAScript 6 - Nicholas C. Zakas
- exploring-es6
- exploring-es6翻译
- exploring-es6翻译后预览
- 阮一峰 es6
- 阮一峰 Javascript
- ECMA-262,第 5 版
- es5
Js template
- template-chooser
- artTemplate
- tomdjs
- 淘宝模板juicer模板
- Fxtpl v1.0 繁星前端模板引擎
- laytpl
- mozilla - nunjucks
- Juicer
- dustjs
- etpl
弹出层
CSS
Angularjs
- Angular.js 的一些学习资源
- angularjs中文社区
- Angularjs源码学习
- Angularjs源码学习
- angular对bootstrap的封装
- angularjs + nodejs
- 吕大豹 Angularjs
- AngularJS 最佳实践
- Angular的一些扩展指令
- Angular数据绑定原理
- 一些扩展Angular UI组件
- Ember和AngularJS的性能测试
- 带你走近AngularJS - 基本功能介绍
- Angularjs开发指南
- Angularjs学习
- 不要带着jQuery的思维去学习AngularJS
- angularjs 学习笔记
- angularjs 开发指南
- angularjs 英文资料
- angular bootstrap
- angular jq mobile
- angular ui
- 整合jQuery Mobile+AngularJS经验谈
- 有jQuery背景,该如何用AngularJS编程思想
- AngularJS在线教程
- angular学习笔记
React
- react.js 中文论坛
- react.js 官方网址
- react.js 官方文档
- react.js material UI
- react.js TouchstoneJS UI
- react.js amazeui UI
- React 入门实例教程 - 阮一峰
- React Native 中文版
- Webpack 和 React 小书 - gitbook
- webpack
- Webpack,101入门体验
- webpack入门教程
- 基于webpack搭建前端工程解决方案探索
- React原创实战视频教程
移动端API
- API
- 框架
Requriejs
- Javascript模块化编程(一):模块的写法
- Javascript模块化编程(二):AMD规范
- Javascript模块化编程(三):require.js的用法
- RequireJS入门(一)
- RequireJS入门(二)
- RequireJS进阶(三)
- requrie源码学习
- requrie 入门指南
- requrieJS 学习笔记
- requriejs 其一
- require backbone结合
Seajs
Less,sass
Markdown
- Markdown 语法说明 (简体中文版)
- markdown入门参考
- gitbook 国外的在线markdown可编辑成书
- mdeditor 一款国内的在线markdown编辑器
- stackedit 国外的在线markdown编辑器,功能强大,同步云盘
- mditor 一款轻量级的markdown编辑器
- lepture-editor
- markdown-editor
D3
兼容性
UI相关
- bootcss
- MetroUICSS
- semantic
- Buttons
- kitecss
- pintuer
- amazeui
- worldhello
- linuxtoy
- gitmagic
- rogerdudler
- gitref
- book
- gogojimmy
HTTP
其它API
- javascript流行库汇总
- 验证api
- underscrejs en api
- lodash - underscore的代替品
- ext4api
- backbone 中文手册
- qwrap手册
- 缓动函数
- svg 中文参考
- svg mdn参考
- svg 导出 canvas
- svg 导出 png
- ai-to-svg
- localStorage 库
图表类
vue
正则
ionic
其它
三. 开发规范
- 通过分析github代码库总结出来的工程师代码书写习惯
- HTML&CSS编码规范 by @mdo
- 团队合作的css命名规范-腾讯AlloyTeam前端团队
- 前端编码规范之js - by yuwenhui
- 前端编码规范之js - by 李靖
- 前端开发规范手册
- Airbnb JavaScript 编码规范(简体中文版)
- AMD与CMD规范的区别
- AMD与CMD规范的区别
- KISSY 源码规范
- bt编码规范
- 规范加强版
- 前端代码规范 及 最佳实践
- 百度前端规范
- 百度前端规范
- 百度前端规范
- ECMAScript6 编码规范–广发证券前端团队
- JavaScript 风格指南/编码规范(Airbnb公司版)
- 网易前端开发规范
- css模块
- 前端规范资源列表
四. 其它收集
1. 各大公司开源项目
- Facebook Projects
- 百度web前端研发部
- 百度EFE
- 百度github
- alloyteam
- alloyteam-github
- alloyteam-AlloyGameEngine
- AlloyDesigner 即时修改,即时保存,设计稿较正,其它开发辅助工具
- H5交互页编辑器AEditor介绍 H5动画交互页开发的工具介绍
- AEditor H5动画交互页开发的工具
- maka
- 值得订阅的weekly
- 腾讯html5
- 奇舞团开源项目
- Qunar UED
2. Javascript
- 常用
- 算法
- 移动端
- JSON
3. Html5
4. CSS
5. jQuery
6. Ext, EasyUI, J-UI 及其它各种UI方案
- Ext
- EasyUI
- J-UI
- Other
7. 页面 社会化 分享功能
- 百度分享 pc端
- JiaThis pc端
- 社会化分享组件 移动端
- ShareSDK 轻松实现社会化功能 移动端
- 友盟分享 移动端
8. 富文本编辑器
- 百度 ueditor
- 经典的ckeditor
- 经典的kindeditor
- wysiwyg
- 一个有情怀的编辑器。Bach’s Editor
- tower用的编辑器
- summernote 编辑器
- html5编辑器
- XEditor
- wangEditor
9. 日历
- PC
- 移动
- Date library
10. 综合效果搜索平台
11. 前端工程化
- 概述
- Gulp
- Grunt
- Fis
12. 轮播图
- pc图轮
- 移动端
13. 文件上传
14. 模拟select
15. 取色插件
16. 城市联动
17. 剪贴板
18. 简繁转换
19. 表格 Grid
20. 在线演示
- js 在线编辑 - runjs
- js 在线编辑 - jsbin
- js 在线编辑 - codepen
- js 在线编辑 - jsfiddle
- java 在线编辑 - runjs
- js 在线编辑 - hcharts
- js 在线编辑 - jsdm
- sql 在线编辑 - sqlfiddle
- mozilla 在线编辑器
21. 播放器
22. 粒子动画
五. Nodejs
- nodejs 篇幅比较巨大
- Node.js 包教不包会
- 篇幅比较少
- node express 入门教程
- nodejs定时任务
- 一个nodejs博客
- 【NodeJS 学习笔记04】新闻发布系统
- 过年7天乐,学nodejs 也快乐
- 七天学会NodeJS
- Nodejs学习笔记(二)— 事件模块
- nodejs入门
- angularjs nodejs
- 从零开始nodejs系列文章
- 理解nodejs
- nodejs事件轮询
- node入门
- nodejs cms
- Node初学者入门,一本全面的NodeJS教程
- NodeJS的代码调试和性能调优
六. 性能优化
- 常规优化
- Javascript高性能动画与页面渲染
- 移动H5前端性能优化指南
- 5173首页前端性能优化实践
- 给网页设计师和前端开发者看的前端性能优化
- 复杂应用的 CSS 性能分析和优化建议
- 张鑫旭——前端性能
- 前端性能监控总结
- 网站性能优化之CSS无图片技术
- web前端性能优化进阶路
- 前端技术:网站性能优化之CSS无图片技术
- 浏览器的加载与页面性能优化
- 页面加载中的图片性能优化
- Hey——前端性能
- html优化
- 99css——性能
- Yslow——性能优化
- YSLOW中文介绍
- 转一篇Yahoo关于网站性能优化的文章,兼谈本站要做的优化
- Yahoo!团队实践分享:网站性能
- 网站性能优化指南:什么使我们的网站变慢?
- 网站性能优化实践,减少加载时间,提高用户体验
- 浅谈网站性能优化 前端篇
- 前端重构实践之如何对网站性能优化?
- 前端性能优化:使用媒体查询加载指定大小的背景图片
- 网站性能系列博文
- 加载,不只是少一点点
- 前端性能的测试与优化
- 分享网页加载速度优化的一些技巧?
- 页面加载中的图片性能优化
- web前端优化(基于Yslow)
- 网站性能优化工具大全
- 【高性能前端1】高性能HTML
- 【高性能前端2】高性能CSS
- 由12306谈谈网站前端性能和后端性能优化
- AlloyTeam——前端优化
- 毫秒必争,前端网页性能最佳实践
- 网站性能工具Yslow的使用方法
- 前端工程与性能优化(上):静态资源版本更新与缓存
- 前端工程与性能优化(下):静态资源管理与模板框架
- HTTPS连接的前几毫秒发生了什么
- Yslow
- Essential Web Performance Metrics — A Primer, Part 1
- Essential Web Performance Metrics — Part 2
- YUISlide,针对移动设备的动画性能优化
- Improving Site Performance
- 让网站提速的最佳前端实践
- Why Website Speed is Important
- Need for Speed – How to Improve your Website Performance
- 阿里无线前端性能优化指南 (Pt.1 加载期优化)
- 优化工具
- 在线工具
七. 前端架构
八. 个人作品
1. 推荐作品
- winter代码片段需要FQ
- fgm
- 岑安作品集
- 当耐特demo集合
- 米空格 js作品
- myFocus
- SeaJS组件库
- 颜海镜作品
- 脚儿网作品
- javascript个人作品
- 妙味的雷东升游戏作品
- javascript作品集
- 云五笔,灰度产生生成工具
- 项目主页
- 个性的作品主页
- 播放器
- ucren js demos 集
- 智能社
- 实例陈列架
- zoye demo
- 王员外
- 平凡
- jyg 游戏案例
- 很多jquery插件
- 不羁虫 - soJs 作品系列
- frozenui
- 黑白棋
- fromone
2. 群员作品
- [MDialog - 合肥-M.J]
- [轮播图 - 上海-冷静]
- [广州—坚壳]
- [成都 - 无痕] 感恩节专题
- [球霸天]
- [北京-小数]
- [ptf] Magix 工具
- [杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA(One Page One Application)应用
- [上海-剧中人]-实验室
- [上海-豪情 ] 作品集合
- [成都-feeling]
- [上海-angela]
- [海南-hank]作品
- [上海-张力]博客
- [上海-zenki]作品
- 移动端图案解锁
- [合肥-M.J] - MPreview 移动端图片预览组
- [合肥-M.J] - Mexam 移动端在线做题组
- [北京-苏瑞] - dancer小人
- [上海-玄沐]- 个人网站
- [厦门-二哲]- 个人博客
3. 国外大牛精品
九. 简历模板
十. 面试题
- 那几个月在找工作(百度,网易游戏)
- 2014最新面试题
- 阿里前端面试题
- 2016校招内推 – 阿里巴巴前端 – 三面面试经历
- 腾讯面试题
- 年后跳槽那点事:乐视+金山+360面试之行
- 阿里前端面试题上线
- 拉勾网js面试题
- 前端面试
- Web开发笔试面试题 大全
- 前端开发面试题
- 2014最新前端面试题
- 百度面试
- 面试题
- 前端工作面试问题
- 前端开发面试题
- 5个经典的前端面试问题
- 最全前端面试问题及答案总结
- 史上最全 前端开发面试问题及答案整理
- 前端实习生面试总结
- 史上最全 前端开发面试问题及答案整理
- BAT及各大互联网公司2014前端笔试面试题:JavaScript篇
- 前端开发面试题大收集
- 收集的前端面试题和答案
- 如何面试前端工程师
- 前端开发面试题
- 牛客网-笔试面经
十一. iconfont
十二. 开发工具类
- 前端开发工具
- Chrome, Firebug, Filddle 调试
- Fiddler
- Chrome
- Google Chrome 官方
- Chrome - 基础
- Chrome - 进阶
- Chrome - 性能
- Chrome - 性能进阶
- Chrome - 移动
- Chrome - 使用技巧
- Chrome - Console控制台不完全指南
- Chrome - Workspace使浏览器变成IDE
- chrome开发工具快捷键
- chrome调试工具常用功能整理
- Chrome 开发工具 Workspace 使用
- Chrome神器Vimium快捷键学习记录
- sass调试-w3cplus
- 如何更专业的使用Chrome开发者工具-w3cplus
- chrome调试canvas
- chrome profiles1
- chrome profiles2
- chrome profiles3
- chrome移动版调试
- chrome调试
- chrome的调试
- chrome console 命令详解
- 查看事件绑定1
- 查看事件绑定2
- 神器——Chrome开发者工具(一)
- 奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)
- chrome 开发者工具的 15 个小技巧
- Chrome开发者工具不完全指南
- Chrome 开发者工具使用技巧
- Firebug
- 移动,微信调试
- iOS Simulator
- img
- 生成二维码
- 浏览器同步
- 在线PPT制作
十三. 前端导航网站
十四.常用CDN
- 新浪CDN
- 百度静态资源公共库
- 360网站卫士常用前端公共库CDN服务
- Bootstrap中文网开源项目免费 CDN 服务
- 开放静态文件 CDN - 七牛
- CDN加速 - jq22
- jQuery CDN
- Google jQuery CDN
- 微软CDN
十五. Git_Github
- Git
十六.插件
parallel.js: 前后端通用的一个并行库
zepto: 用于现代浏览器的兼容 jQuery 的库
totoro: 稳定的跨浏览器测试工具
TheaterJS: 一个用于模拟人输入状态的 JS 库
stellar.js: 前端用于实现异步滚动效果的库,现已不再维护
skrollr: 另一款实现一步滚动的开源库,使用人数众多,可实现各种狂拽酷炫掉渣天的前端效果,看真相
Framework7: 前端框架,是开发人员可以基于 web 技术构建 IOS7 程序
regulex: 用于生成 正则表达式 的可视化流程图
markdown-it: 新型 Markdown 解析器,快速,支持插件
multiline: 用于 Javascript 中的多行文本,类似于 Ruby 的 HERE Doc
screenfull.js: 全屏插件,支持各大浏览器
lunr.js: 类似于 Solr, 但是用于浏览器上的全文搜索引擎,可以为 JSON 创建索引,离线也可以使用
jquery.hotkeys: jQuery 插件,用于绑定热键
breach_core: Javascript 编写的 Browser (浏览器)
octocard: 用于生成 Github 信息卡片的库
github-cards: 用于生成 Github 信息卡片的库
money.js: 轻量级货币转换库,web 和 node 皆可用
accounting.js: 轻量级的数字、货币转换库
javascript-algorithms: Javascript 实现的各种算法集合
lazy.js: 类似于 underscore, 但是会延迟执行,某些场景下,性能会有很大的提升
seajs: 前端模块加载器,解决模块化、依赖等问题
jQuery-One-Page-Nav: 单页应用中一个用于处理导航栏的库
js.js: Javascript 实现的 javascript JIT
jquery-ui: jQuery 团队开发的 UI 相关的前端库,功能强大
todomvc: 分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前端 MVC 库
localForage: Mozilla 出品,用于离线存储,基于IndexedDB, WebSQL 或者 localStorage, 提供一致的接口
EventEmitter: 浏览器版的 EventEmitter
jquery.serializeJSON: jQuery 插件,用于将 form 表单序列化成 JSON 数据
knockout: 前端 MVVM 框架,用于开发富前端应用
mermaid: 可以根据文本生成流程图,类似于 Markdown 的语法
js-sequence-diagrams: 另一款可以根据文本生成流程图的库,类似于 Markdown 的语法
flow: 一个用来检测 Javascript 语法错误的库, Facebook 出品
zoomooz: jQuery 插件,用来处理浏览器缩放
fancyBox: 一个用于放大缩小图片、Web 内容或者多媒体元素的库,优雅大方
mithril.js: 轻量型前端 MVC 框架,部分使用场景下性能优于 Angular.js 和 React
backbone: 强大的前端 MVC 库,鼻祖级前端库,最初为了配合 Rails 来模块化前端应用,兼容性良好 (兼容到 IE6),插件丰富,性能良好
jquery.smartbanner: smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持
jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素, 支持回退等
jScrollPane: 自定义的滚动条,让所有浏览器都显示一样的滚动条
onepage-scroll: 提供类似于 iPhone6 展示页类似的效果,适用于单页应用,兼容到 IE8
scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等),性能很好
ScrollMagic: 神奇的滚动交互效果插件,可以在滚动的过程中设置各种各样的动态效果
infinite-scroll: 滚动加载,滚动到最下到自动加载, Paul Irish 大神之作
animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果,看真相
Fluidbox: 页面上内嵌图片的放大缩小效果,类似于 Medium 中的效果
jquery-validation: jQuery 的一个插件,用于校验 Form 表单
BigVideo.js: jQuery 的一个插件, 用于实现大背景(视频、图片)效果
emscripten: 一款基于 LLVM, 可以将 C/C++ 转换成 Javascript 的工具,使得 Javascript 可以近乎 Native 的速度
qrcode-generator: 各种语言的二维码生成工具
device.js: 一个可以检测设备类型的工具,可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS
jquery-qrcode: jQuery 插件,用来生成二维码
Wookmark-jQuery: jQuery 的一个插件,可以用来实现瀑布流的效果
isotope: 可以用来过滤、排列布局,实现美观的动态布局切换效果,Demo
lazysizes: 功能强大的图片延迟加载工具,可以首先加载一个低质量的图片,然后再加载高质量的图片
progressbar.js: 简洁美观的进度条,扁平化
pigshell: 一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat…..等命令, 可以访问 Facebook/Twitter/Google Drive 等网络服务
spectrum: Js实现的颜色选择器 (Colorpicker)
jQuery.countdown: jQuery 倒计时插件
summernote: WYSIWYG 富文本编辑器
awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观
switchery: IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器
trix: Basecamp 公司出品的富文本编辑器,简洁小巧
sensor.js: 在智能移动设备浏览器上,通过HTML5的api使用移动设备的功能。定位、运动、倾斜等
hyhyhy: 用于创建 基于 HTML5 的 演示文稿
swipebox: jQuery 插件,用于处理移动端的触摸事件
FileAPI: 前端用户处理文件(拖放、多文件上传等)
Sortable: 现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery
Swiper: 用于实现浏览器上的滑动切换效果,支持硬件加速
matter-js: 2D 物理效果引擎,碰撞、弹跳等
jQTouch: 用于辅助创建手机端的 Web 应用,支持主题、Zepto.js 等
snabbt.js: 一个利用 Javascript 和 CSS transform 的 animation 库
c3: 基于 D3 的图表库
echarts: 企业级图表库,百度开发
parallax.js: 一个用于响应智能手机 orientation 的库
jQuery-Animate-Enhanced: jQuery 动画库的一个增强,用于现代浏览器
wysihtml: 富文本编辑器,适用于现代浏览器
slip: 一个通过滑动或者拖拽来操控列表的库
evil-icons: 一个矢量图库,提供 Ruby/Node 等支持
PhotoSwipe: JS 的一个图片展示库
focusable: 是页面上一个元素高亮的库,有图有真相
firefox.html: Firefox 在浏览器端的实现 —— HTML 版的 Firefox
jquery-mobile: jQuery 团队开发的用于辅助手机端 web app 开发的库,基于 HTML5
mobile-angular-ui: 基于angularjs和bootstarp的web app开发框架
interact.js: 一个适用于现代浏览器的,用于处理 手势、拖放、缩放等的库
rebound-js: 实现部分物理效果,Facebook 出品
basket.js: 基于 LocalStorage 的资源加载器,可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存
iscroll: 高性能的滚动(scroll)处理库,功能强大,支持各种事件,不依赖任何的库,且插件丰富, 大众点评的手机端列表滚动就是用这个库处理的
metrics-graphics: 基于 D3 的图表库,简洁、高效,Mozilla 出品
accessible-html5-video-player: Paypal 出品的 Video 播放器
loading: 几种 Loading 效果,基于 SVG
flippant.js: 一款能够漂亮的网页元素翻转效果库,代码许久不更新,不过作为源码学习还是不错的
move.js: 基于 CSS3 的前端动画框架
scrollReveal.js: 使元素以非常酷帅的方式进入画布 (Viewpoint),看 Demo
Modernizr: 一个用来检测 HTML5 和 CSS3 支持情况的库
foundation: 另一款前端模版框架,类似于 Bootstrap
Flat-UI: Bootstrap 的一款主题,简洁美观
iCheck: 一款漂亮的 Checkbox 插件
Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb
slick: 功能异常强大的一个图片滑动切换效果库
SocialButtons: 漂亮的社交按钮
sweetalert: 一个非常美观的用于替换浏览器默认 alert 的库
web-animations-js: Javascript 实现的 Web Animation API
vivus: 可以动态描绘 SVG 的 JS 库, 支持多种动画
plyr: 轻量, 小巧, 美观的 HTML5 视频播放器
timesheet.js: 基于 HTML5 & CSS3 时间表
slideout: 一个非常美观的侧滑菜单