个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节,
当然你不一定要成为前端专家,但是你至少要懂前端才行,这样等网站做大之后你招人才能找到合适的人才,有一双慧眼很重要。
移动端
移动端 | 地址 |
---|---|
fastclick | https://github.com/ftlabs/fastclick |
no-click-delay | https://github.com/mmastrac/jquery-noclickdelay |
【敏捷开发】Android团队开发规范 | http://www.cnblogs.com/lcw/p/3619181.html |
Android 开发规范与应用 | http://www.jianshu.com/p/4390f4fe19b3 |
ionic | https://github.com/ychow/ionic-guide |
JSON
JSON | 地址 |
---|---|
模拟生成JSON数据 | http://beta.json-generator.com |
返回跨域JSONAPI | http://jsonp.afeld.me |
焦点图
焦点图 | 地址 |
---|---|
myfocus | https://github.com/koen301/myfocus |
myfocus-官方演示站 | http://www.chhua.com/myfocus |
SuperSlidev2.1 -- 大话主席 | http://www.superslide2.com |
soChange | http://www.bujichong.com/sojs/soChange/index.html |
Ext, EasyUI, J-UI 及其它各种UI方案
Ext, EasyUI, J-UI 及其它各种UI方案 | 地址 |
---|---|
extjs | https://www.sencha.com/products/extjs |
ext4英文api | http://docs.sencha.com/extjs/4.0.7 |
ext4中文api | http://extjs-doc-cn.github.io/ext4api |
jquery easyui 未压缩源代码 | http://jquery-easyui.googlecode.com/svn/trunk/src |
J-UI | http://jui.org |
MUI-最接近原生APP体验的高性能前端框架 | http://dcloudio.github.io/mui |
Amaze UI | 中国首个开源 HTML5 跨屏前端框架 |
淘宝 HTML5 前端框架 | http://m.sui.taobao.org |
KISSY - 阿里前端JavaScript库 | http://docs.kissyui.com |
网易Nej - Nice Easy Javascript | http://nej.netease.com |
Kendo UI MVVM Demo | http://demos.telerik.com/kendo-ui/mvvm/index |
Bootstrap | http://www.bootcss.com |
Smart UI | http://smartui.chinamzz.com |
雅虎UI - CSS UI | http://developer.yahoo.com/yui/grids |
页面 社会化 分享功能
页面 社会化 分享功能 | 地址 |
---|---|
百度分享 | http://share.baidu.com pc端 |
JiaThis | http://jiathis.com pc端 |
社会化分享组件 | http://developer.baidu.com/soc/share 移动端 |
ShareSDK 轻松实现社会化功能 | http://www.mob.com/#/index 移动端 |
友盟分享 | http://dev.umeng.com/social/android/quick-integration 移动端 |
富文本编辑器
富文本编辑器 | 地址 |
---|---|
功能齐全 tinymce | https://www.tinymce.com |
百度 ueditor | http://ueditor.baidu.com/website |
经典的ckeditor | http://ckeditor.com |
经典的kindeditor | http://kindeditor.net |
wysiwyg | http://www.bootcss.com/p/bootstrap-wysiwyg |
一个有情怀的编辑器。Bach's Editor | http://integ.github.io/BachEditor |
tower用的编辑器 | https://github.com/mycolorway/simditor |
summernote 编辑器 | https://github.com/summernote/summernote |
html5编辑器 | http://neilj.github.io/Squire |
Quilljs编辑器 | http://quilljs.com |
XEditor | http://lab.hustlzp.com/XEditor |
wangEditor | https://github.com/wangfupeng1988/wangEditor |
前端概述
前端概述 | 地址 |
---|---|
前端工具大全 | http://www.awesomes.cn |
什么是前端工程化 | https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0# |
[译] 前端攻略-从路人甲到英雄无敌 | https://segmentfault.com/a/1190000005174755 |
Gulp
Gulp | 地址 |
---|---|
Gulp官网 | http://gulpjs.com |
Gulp中文网 | http://www.gulpjs.com.cn |
gulp资料收集 | https://github.com/Platform-CUF/use-gulp |
Gulp:任务自动管理工具 - ruanyifeng | http://javascript.ruanyifeng.com/tool/gulp.html |
Gulp插件 | http://gulpjs.com/plugins |
Gulp探究折腾之路(I) | http://www.jeffjade.com/2015/11/25/2015-11-25-toss-gulp/ |
Gulp折腾之路(II) | http://www.jeffjade.com/2016/01/19/2016-01-19-toss-gulp/ |
Gulp不完全入门教程 | http://www.ido321.com/1622.html |
为什么使用gulp? | https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33 |
Gulp安装及配合组件构建前端开发一体化 | http://www.dbpoo.com/getting-started-with-gulp |
Gulp 入门指南 | https://github.com/nimojs/gulp-book |
Gulp 入门指南 - nimojs | https://github.com/nimojs/blog/issues/19 |
Gulp in Action | http://www.imooc.com/video/5692 |
Gulp开发教程(翻译) | http://www.w3ctech.com/topic/134 |
前端构建工具gulpjs的使用介绍及技巧 | http://www.cnblogs.com/2050/p/4198792.html |
Grunt
Grunt | 地址 |
---|---|
gruntjs | http://gruntjs.com |
Grunt中文网 | http://www.gruntjs.net |
Fis
Fis | 地址 |
---|---|
fis 官网 | http://fex-team.github.io/fis-site/index.html |
fis | http://fis.baidu.com |
pc图轮
pc图轮 | 地址 |
---|---|
单屏轮播sochange | http://www.jsfoot.com/jquery/demo/2011-09-20/192.html |
左右按钮多图切换 | http://bxslider.com/examples/carousel-demystified |
fullpage全屏轮播 | https://github.com/alvarotrigo/fullPage.js |
移动端图轮
文件上传
文件上传 | 地址 |
---|---|
百度上传组件 | http://fex.baidu.com/webuploader |
上传 | https://blueimp.github.io/jQuery-File-Upload |
flash 头像上传 | http://www.hdfu.net |
图片上传预览 | http://www.dropzonejs.com |
图片裁剪 | http://elemefe.github.io/image-cropper |
图片裁剪-shearphoto | http://www.shearphoto.com |
jQuery图片处理 | http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2 |
模拟select
模拟select | 地址 |
---|---|
糖饼 select | http://aui.github.io/popupjs/doc/selectbox.html |
flexselect | https://github.com/rmm5t/jquery-flexselect |
双select | http://loudev.com |
select2 | http://select2.github.io |
取色插件
取色插件 | 地址 |
---|---|
类似 Photoshop 的界面取色插件 | http://www.jq22.com/plugin/367 |
jquery color | https://github.com/jquery/jquery-color |
取色插件集合 | http://www.oschina.net/project/tag/287/color-picker |
farbtastic 圆环+正方形 | https://github.com/mattfarina/farbtastic |
城市联动
城市联动 | 地址 |
---|---|
jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果 | http://www.ijquery.cn/?p=360 |
剪贴板
剪贴板 | 地址 |
---|---|
剪贴板 | https://github.com/zeroclipboard/zeroclipboard |
clipboard 最新的剪切方案 | http://zenorocha.github.io/clipboard.js |
不是Flash的剪贴板 | https://github.com/zenorocha/clipboard.js |
简繁转换
简繁转换 | 地址 |
---|---|
简繁转换 | https://github.com/BYVoid/OpenCC |
表格 Grid
表格 Grid | 地址 |
---|---|
facebook表格 | http://facebook.github.io/fixed-data-table |
类似于Excel编辑表格-handsontable | http://handsontable.com |
bootstrap-table插件 | http://bootstrap-table.wenzhixin.net.cn |
datatables | https://www.datatables.net |
在线演示
在线演示 | 地址 |
---|---|
js 在线编辑 - runjs | http://runjs.cn |
js 在线编辑 - jsbin | http://jsbin.com |
js 在线编辑 - codepen | http://codepen.io |
js 在线编辑 - jsfiddle | http://jsfiddle.net |
java 在线编辑 - runjs | http://ideone.com |
js 在线编辑 - hcharts | http://code.hcharts.cn |
js 在线编辑 - jsdm | http://jsdm.com |
sql 在线编辑 - sqlfiddle | http://sqlfiddle.com |
mozilla 在线编辑器 | https://thimble.mozilla.org |
常规优化
优化工具
优化工具 | 地址 |
---|---|
JavaScript 性能分析新工具 OneProfile | http://www.html-js.com/article/3083 |
JavaScript 堆内存分析新工具 OneHeap | http://www.html-js.com/article/3091 |
在线工具
在线工具 | 地址 |
---|---|
google在线工具 | https://developers.google.com/speed/pagespeed/insights |
阿里测 | http://www.alibench.com |
阿里-免费测试服务 | http://itest.aliyun.com |
阿里-F2etest多浏览器兼容性测试解决方案 | https://github.com/alibaba/f2etest |
js性能测试 | http://jsperf.com |
前端架构
前端架构 | 地址 |
---|---|
技术架构 | http://www.zhihu.com/topic/19612641 |
前端架构 | http://saito.im/note/The-Architecture-of-F2E |
如何成为前端架构师 | http://www.zhihu.com/question/24092572 |
关于前端架构-张克军 | http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html |
百度腾讯offer比较(腾讯游戏VS百度基础架构) | http://www.zhihu.com/question/25583350 |
推荐作品
简历模板
面试题
iconfont
iconfont | 地址 |
---|---|
中文字体 | http://www.zhihu.com/question/21253343 |
淘宝字库 | http://iconfont.cn |
字体 | http://mux.alimama.com/fonts |
制作教程 | http://iconfont.cn/help/platform.html |
zhangxinxu-icommon | http://www.zhangxinxu.com/wordpress/?s=icomoon |
icommon | https://icomoon.io/app |
用字体在网页中画ICON图标(推荐教程 | http://imooc.com/learn/243 |
字体压缩工具 | http://font-spider.org |
Fiddler
Fiddler | 地址 |
---|---|
Fiddler调式使用知多少(一深入研究 | http://www.cnblogs.com/tugenhua0707/p/4623317.html |
微信fiddle | http://www.cnblogs.com/strick/p/4570006.html |
微信fiddle | http://gaoboy.com/article/26.html |
Chrome
Firebug
Firebug | 地址 |
---|---|
firebug视频教程 | http://www.imooc.com/learn/137 |
firefox 模拟器 | https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE |
console.log 命令详解 | http://www.cnblogs.com/ctriphire/p/4116207.html |
Firebug入门指南 | http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html |
Firebug控制台详解 | http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html |
移动,微信调试
移动,微信调试 | 地址 |
---|---|
浏览器端调试安卓 | https://openstf.github.io |
移动端前端开发调试 | http://yujiangshui.com/multidevice-frontend-debug |
使用 Chrome 远程调试 Android 设备 | https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md |
mac移动端调试 | http://plus.uc.cn/document/webapp/doc5.html |
mac移动端调试 | http://www.mihtool.com |
无线调试攻略 | http://thx.github.io/mobile/debugging-in-mobile |
无线调试攻略 | http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile |
**爆了,完美调试 微信webview(x5 | http://www.jianshu.com/p/ccf124f1f74b |
微信调试的那些事 | 微信调试的那些事 |
远程console | http://jsconsole.com |
微信调试工具 | http://blog.qqbrowser.cc |
各种真机远程调试方法汇总 | https://github.com/jieyou/remote_inspect_web_on_real_device |
iOS Simulator
iOS Simulator | 地址 |
---|---|
Simulator | iOS_Simulator_Guide-Introduction |
iOS Simulator的介绍和使用心得 | http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary |
Image
img | 地址 |
---|---|
loading img | http://preloaders.net/en/circular |
智图-图片优化平台 | http://zhitu.isux.us |
在线png优化 | https://tinypng.com |
SM.MS(图床工具~简易好用) | https://sm.ms/ |
yutuku:极简图床 | http://yotuku.cn/ |
Qchan图床 | http://tuchuang.org/ |
浏览器同步
浏览器同步 | 地址 |
---|---|
puer | https://github.com/leeluolee/puer |
liveReload | http://livereload.com |
f5 | http://getf5.com |
File Watchers | http://geek100.com/2608 |
在线PPT制作
在线PPT制作 | 地址 |
---|---|
nodePPT | nodePPT |
Cleaver快速制作网页PPT | http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/ |
impress.js | http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html |
PPT | https://github.com/ksky521/nodePPT |
reveal | https://github.com/hakimel/reveal.js |
bespoke-fx | https://github.com/ebow/bespoke-fx |
slippy | https://github.com/Seldaek/slippy |
前端导航网站
前端导航网站 | 地址 |
---|---|
界面清爽的前端导航 | http://uxbees.com/index.html |
前端导航 | http://whycss.com |
前端网址导航 | http://www.daqianduan.com/nav |
前端名录 | http://sentsin.com/daohang |
前端导航 | http://123.jser.us |
前端开发资源 | http://www.css88.com/nav |
网址导航 | http://www.haourl.cn |
前端开发仓库 - 众多效果的收集地 | http://code.ciaoca.com |
前端资源导航 | https://github.com/jnoodle/f2e-collect |
F2E 前端导航 | http://f2e.im/static/pages/nav/index.html |
常用CDN
常用CDN | 地址 |
---|---|
新浪CDN | http://lib.sinaapp.com |
百度静态资源公共库 | http://cdn.code.baidu.com |
360网站卫士常用前端公共库CDN服务 | http://libs.useso.com |
Bootstrap中文网开源项目免费 CDN 服务 | http://www.bootcdn.cn |
开放静态文件 CDN - 七牛 | http://staticfile.org |
CDN加速 - jq22 | http://www.jq22.com/cdn |
jQuery CDN | http://code.jquery.com |
Google jQuery CDN | http://www.google-jquery-cdn.com |
微软CDN | http://www.asp.net/ajax/cdn |
Git
Git | 地址 |
---|---|
git-scm | http://git-scm.com |
廖雪峰-Git教程 | 廖雪峰-Git教程 |
git-for-windows | https://git-for-windows.github.io |
GitHub 添加 SSH keys | http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github |
gogithub | http://www.worldhello.net/gotgithub/index.html |
git常规命令练习 | http://pcottle.github.io/learnGitBranching |
git的资料整理 | https://github.com/xirong/my-git |
我所记录的git命令(非常实用) | http://www.cnblogs.com/fanfan259/p/4810517.html |
企业开发git工作流模式探索部分休整 | https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md |
GitHub 漫游指南 | https://github.com/phodal/github-roam |
GitHub秘籍 | https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md |
使用git和github进行协同开发流程 | http://livoras.com/post/28 |
动画方式练习git | http://onlywei.github.io/explain-git-with-d3 |
各种日期日历
Date library
Date library | 地址 |
---|---|
Datejs | https://github.com/datejs/Datejs |
sugarjs | http://sugarjs.com/api/Date |
其它
其它 | 地址 |
---|---|
Mock.js 是一款模拟数据生成器 | http://mockjs.com |
特色的HTML框架可以创建精美的iOS应用 | http://framework7.taobao.org |
淘宝SUI | http://m.sui.taobao.org |
avalonjs | http://avalonjs.github.io |
Avalon新一代UI库: OniUI | http://ued.qunar.com/oniui/index.html |
avalon.oniui-基于avalon的组件库 | https://github.com/RubyLouvre/avalon.oniui |
生成二维码(草料) | http://cli.im |
效果类
效果类 | 地址 |
---|---|
弹出层 | http://www.imooc.com/learn/58 |
焦点图轮播特效 | http://www.imooc.com/learn/18 |
HTML5 有哪些让你惊艳的 demo? | http://www.zhihu.com/question/24398907 |
弹出层
弹出层 | 地址 |
---|---|
artDialog 最新版 | https://github.com/aui/artDialog |
artDialog 文档 | http://aui.github.io/artDialog/doc/index.html |
google code 下载地址 | https://code.google.com/p/artdialog/downloads/list |
贤心弹出层 | http://layer.layui.com |
响应式用户交互组件库 | https://github.com/bh-lay/UI |
sweetalert-有css3动画弹出层 | http://t4t5.github.io/sweetalert |
优秀JavaScript项目
上一篇: 前端大全,这次您务必收藏(二) - 简书 (jianshu.com)
点赞加关注,永远不迷路