Web front-end development sharing-CSS,JS Tool Chapter

Source: Internet
Author: User
Tags chrome developer chrome developer tools sublime text

Web front-end development is and other related development, recommended sublime text, Webstorm (jetbrains Company series products) The reason is that there is a technology called Emmet, Http://docs.emmet.io, and these two support for him is:

Sublime text is the only one that supports Emmet in all editors.

Webstorm is one of the only built-in Emmet in all editors and pushes the spirit of Emmet forward.

The Phpstorm,idea includes all Webstorm functions. Just Phpstorm is for phper, and idea is for javaer,webstorm for front-end er.

Their detailed comparison: http://www.36ria.com/5884

A. CSS tool:

1. Emmet http://docs.emmet.io/

A. Can be installed in the form of a plug-in dreamweaver,notepad++,editplus,sublime each editor.

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

Effect of Emmet on sublime:

1). CSS: He differs from other editors in detail, such as the ctrl,alt+ key can be repaired and the value inside

2). HTML effect:

3). Sublime's Emmet Rule modification:

Packages->emmet->emmet->snippets.json

B. Only one exception Jetbrain company's product line: Webstorm,phpstorm,intellij idea is built-in and does not need to be installed.

1).

Write the effect of JS:

2). Webstorm Emmet Rules modified: Live Templates, Settings, Files

2. CSS compression method:

A. With the regular five-step substitution method, apply to any editor:

Http://www.cnblogs.com/sky000/archive/2010/12/22/1913719.html

B. Modular Tools

Two. JS Tool:

1. Compression, etc.:

Http://www.yulonghu.com/?post=5

Online compression

http://tools.css-js.com/

Online compression

http://tool.oschina.net/

Tool Set

2. Develop Js,php,jsp,java and so on in a emmet manner.

Http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html

Http://www.cnblogs.com/jikey/archive/2012/06/14/2549347.html

3. Use of the Firebug,chrome Debug tool:

http://ued.taobao.org/blog/?p=5534

Chrome debugging

Http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html

Debugging for Chrome

Https://developers.google.com/chrome-developer-tools/docs/commandline-api

Chrome console commands in a detailed

Http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html

Firebug Getting Started Guide

Http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

Firebug Console Detailed

Https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

Chrome Mobile Debugging

http://www.seejs.com/archives/296

"Translate" remote debugging on Android

http://blog.jobbole.com/31178/

JavaScript performance analysis with chrome developer tools

Http://blog.moocss.com/code-snippets/mobile-web-code-snippets/1384.html

Use the Google Chrome browser to be the phone simulator

Http://www.cnblogs.com/xiaoyao2011/p/3447421.html

View Event Bindings

Chrome.exe--user-agent= "mozilla/5.0 (Linux; U Android 2.2; En-us; Nexus one build/frf91) applewebkit/533.1 (khtml, like Gecko) version/4.0 Mobile safari/533.1 "

http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/

Integrated Browser Development Tools

Http://ccforward.net/2013/02/firebug_console.html

About Firebug and Chrome's consoles

Http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles

Http://h5dev.uc.cn/article-25-1.html

Chrome Profiles

Http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html

Chrome artifact Vimium shortcut key learning record

http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/

Chrome Development Tools Workspace Use

4. JS Reference manual:

Brochure

5. Other development tools:

Beginner's recommendation: Editplus,vim

Team Development:

Webstorm, Phpstorm (Phper), Pycharm (Pythoner), IntelliJ Idea (Javaer).

Http://note.youdao.com/share/?id=2d7ff03aeca64808fdc0f394ffb520bf&type=notebook

6. Modular Development Grunt

Http://www.gruntjs.org/article/getting_started.html

Entry

Http://stackoverflow.com/questions/17059487/how-to-setup-grunt-in-webstorm-on-windows

Extension Tool Grunt

Http://www.gruntjs.org/article/home.html

Http://www.cnblogs.com/tugenhua0707/p/3497488.html

Front-end project building Tools---Grunt

Http://javascript.ruanyifeng.com/tool/grunt.html

Http://www.infoq.com/cn/articles/GruntJs

http://blog.segmentfault.com/frankfang/1190000000372612

Enjoy Grunt

Http://www.cnblogs.com/yexiaochai/p/3603389.html

Http://www.cnblogs.com/yexiaochai/p/3594561.html

Leaves-Chai first bomb

7. Gulpjs

Http://gulpjs.com

Website

http://www.tuicool.com/articles/n2Uj2y

Tutorial

Http://gratimax.github.io/search-gulp-plugins

Gulp Plugins

Https://github.com/gulpjs/gulp

Http://blog.segmentfault.com/laopopo/1190000000372547?page=1

Front-end build tool Gulp Getting Started tutorial

http://zhuanlan.zhihu.com/TLA42/19691575

GULP Another automated assembly line

III: JQ Tool

1. Oschina reference manual Daquan.

2. The W3c_all.chm,w3cschool offline version contains the javascript,jquery,php,sql,html,css2.x,3.x manual.

Web front-end development sharing-CSS,JS Tool Chapter

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.