css,js工具篇
4. web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是:
sublime text 是所有编辑器里边支持emmet比较好的的唯一一款。
webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款。
一. css工具:
1. emmet http://docs.emmet.io/
a. 可以以插件的形式安装在dreamweaver,notepad++,editplus,sublime各个编辑器上。
http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html
http://www.qianduan.net/the-zen-coding-renamed-as-emmet.html
http://www.qianduan.net/zen-coding-update-to-0-7.html
http://www.qianduan.net/zen-coding-resources-to-update.html
http://www.qianduan.net/zen-coding-for-dreamweaver-plug-in-tutorial.html
emmet在sublime上的效果:
1). css :他与其它编辑器的区别在于细节上,比如ctrl,alt+方向键可以修和里边的数值
2). html 效果:
3). sublime的emmet规则修改:
packages->Emmet->emmet->snippets.json
b. 只有一个例外jetbrain公司的产品线:webstorm,phpstorm,intellij idea都是内置的,不需要安装。
1).
写js的效果:
2). webstorm的emmet规则修改:Files -> settings -> Live Templates
2. css压缩办法:
a. 通过正则五步替换法,适用于任何编辑器:
http://www.cnblogs.com/sky000/archive/2010/12/22/1913719.html
b. 模块化工具
二. js工具:
1. 压缩等:
http://www.yulonghu.com/?post=5
在线压缩
在线压缩
工具集
2. 以emmet的方式开发js,php,jsp,java and so on。
http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html
http://www.cnblogs.com/jikey/archive/2012/06/14/2549347.html
3. firebug,chrome调试工具的使用:
http://ued.taobao.org/blog/?p=5534
chrome调试
http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html
chrome的调试
https://developers.google.com/chrome-developer-tools/docs/commandline-api chrome console 命令详解
http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html
Firebug入门指南 http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html Firebug控制台详解
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
chrome移动版调试
http://blog.jobbole.com/31178/
用Chrome开发者工具做JavaScript性能分析
http://blog.moocss.com/code-snippets/mobile-web-code-snippets/1384.html
http://www.cnblogs.com/xiaoyao2011/p/3447421.html
查看事件绑定
4. js参考手册:
5. 其它开发工具:
新手推荐:editplus,vim
团队开发:
webstorm, phpstorm(phper), pycharm(pythoner), intellij idea(javaer).
http://note.youdao.com/share/?id=2d7ff03aeca64808fdc0f394ffb520bf&type=notebook
6. 模块化开发grunt
http://www.gruntjs.org/article/getting_started.html
入门
http://stackoverflow.com/questions/17059487/how-to-setup-grunt-in-webstorm-on-windows
扩展工具grunt
http://www.gruntjs.org/article/home.html
http://www.cnblogs.com/tugenhua0707/p/3497488.html
前端项目构建工具---Grunt
http://javascript.ruanyifeng.com/tool/grunt.html
http://www.infoq.com/cn/articles/GruntJs
http://blog.segmentfault.com/frankfang/1190000000372612
享受 Grunt
http://www.cnblogs.com/yexiaochai/p/3603389.html
http://www.cnblogs.com/yexiaochai/p/3594561.html
叶小钗 第一弹
7. gulpjs
官网
http://www.tuicool.com/articles/n2Uj2y
教程
http://gratimax.github.io/search-gulp-plugins
gulp plugins
https://github.com/gulpjs/gulp
http://blog.segmentfault.com/laopopo/1190000000372547?page=1
前端构建工具gulp入门教程
http://zhuanlan.zhihu.com/TLA42/19691575
Gulp 另一种自动化流水线
三:jq工具
1. oschina参考手册大全。
2. w3c_all.chm,w3cschool离线版,包含了javascript,jquery,php,sql,html,css2.x,3.x的手册。
css,js工具篇的更多相关文章
- 4. web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- web前端开发分享-css,js入门篇(转)
转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...
- web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...
- web前端开发分享-css,js入门篇
学习没有捷径,但学习是有技巧与方法. 一,css入门篇: 推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...
- 6. web前端开发分享-css,js移动篇
随着移动市场的逐步扩大及相关技术的日趋完善,对前端开发提出了新的岗位要求,在继承前人成果的基础上需要在新的历史条件下有新的创新.移动端的开发,虽然没有IE6众多问题的折磨,但是多平台,多设备的兼容,也 ...
- 3. web前端开发分享-css,js提高篇
一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative[ ...
随机推荐
- Elasticsearch教程
Elasticsearch教程 摘要: 参考资料Elasticsearch中文参考文档思维导图阅读全文 posted @ 2015-08-05 11:49 xingoo 阅读(18) | 评论 (0) ...
- CentOS 7安装配置Apache HTTP Server
原文 CentOS 7安装配置Apache HTTP Server RPM安装httpd # yum -yinstall httpd //安装httpd会自动安装一下依赖包: apr apr-ut ...
- PL/SQL编程(1) - 存储过程,函数以及参数
存储过程 PROCEDURE [schema.]name[( parameter[, parameter...] ) ] [AUTHID DEFINER | CURRENT_USER ] [ACCES ...
- Java学习之路:ArrayList用法
1.什么是ArrayList ArrayList是一个动态数组传奇,使用MSDN声明.那是,Array复杂的版本号,它具有以下优点,例如: 动态的添加和降低元素 实现了ICollection和 ...
- Weka初步
从前年開始使用weka最数据挖掘方面的研究,到如今有一年半的时间了.看到我们同组的兄弟写了关于weka方面的总结.我也想整理一下.由于网上的资料实在是太少.记得刚接手的时候,真是硬着头皮看代码.只是到 ...
- cocos2d-x注意事项(十)Lua发展飞机战争-4-创建主角
二战中被称为二战飞机飞机,当然,以飞机作业.这是一个游戏,我们必须加入一个飞机--这是我们的英雄. 首先创建一个层(PlaneLayer)要显示飞机.然后,create飞机初始化方法 module(& ...
- hive 的分隔符、orderby sort by distribute by的优化
一.Hive 分号字符 分号是SQL语句结束标记,在HiveQL中也是,可是在HiveQL中,对分号的识别没有那么智慧,比如: select concat(cookie_id,concat(';',' ...
- linux_增加用户组_删除用户
添加账号组 /usr/sbin/groupadd iknow 添加账号 /usr/sbin/useradd -g iknow -d /home/iknow/ iknow 更改密码 passwd 选项 ...
- node.js的npm安装
我不打算引进node.js的npm安装,但发现node.js通过管理一些包npm实现,或给一个简短的npm. 1.npm什么 npm是一个node包管理和分发工具,已经成为了非官方的公布 ...
- linux虚拟文件系统2
转自:http://rstevens.iteye.com/blog/849413 一.概述 Linux 文件系统是相当复杂的,本文只分析虚拟文件系统的实现,对具体的文件系统不涉及. 即使是虚拟文件系统 ...