Pride-css Deconstruction Series-Sina page deconstructed-02

• Objective
• I. Development tools-front four big knives
  • 1. Webstorm
    • 1). So far, the industry recognized the front-end development tool. Advantages:
    • 2). Disadvantages
    • 3). Related Resources
    • 4). Follow-up Outlook
  • 2. Photoshop
    • 1). Basic information:
    • 2). To increase the efficiency of the cut graph expansion of ideas:
    • 3). Several ways to transduction:
  • 3. Firefox
  • 4. Chrome
• Two. File directory
• Three. Html, CSS Structure
• Four. Reset.css
• Five. How to debug code
  • 1. Firefox
  • 2. Chrome
  • 3. IE
  • 4. IETester
  • 5. Virtual Machines
• Six. How to check the code
• Seven. How to Summarize

Objective

This is from the internal offline seminar PPT of the full text version, the original intention to follow an article in the same, in order to let more people see, there is no perfect content in the Exchange to do a supplement, while the lack of interactive links, that memory or moved how also can not find back. In addition, due to limited personal ability, please correct me.

I. Development tools-front four sharp weapon 1. Webstorm

1). So far, the industry recognized the front-end development tool. Advantages:

• The user experience is the ultimate, the basic common functions are integrated. A few are innovative: edit is saved (instead of ctrl+s), the local historical version, the integration of plug-in development, the introduction of multiple languages of the general version, such as webstorm as the core, surrounded by intellidea,phpstorm, pycharm, RubyMine and so on, There are operational similarities, there is a unified company's genes, can seamlessly switch, the learning cost is very low.
• Rich plug-ins and superior qualityCoffeeScript, EJS, GitHub,vim
• Version Development Support svn,git,csv,github,p4 , integrated in a graphical way to manipulate git.
• Friendly FTP Management
• Super-strong template support
• Open source China has discounted activities every year, this is 2014, 2015 activities may not have begun.
• Version upgrade fast enough, new technology support to forcehtml5, TypeScript, CoffeeScript,Dart,Sass,Less,Stylus,Nodejs

2). Disadvantages

• English version, for some deep Chinese users, this is really an obstacle.
• Because of the powerful features provided, the memory overhead is very high, the hardware configuration has certain requirements.
• The version update is too fast to entice users to upgrade constantly. For the general user, the real core of development is language, the development of real value is to solve the core needs. So don't be too tangled up in this.
• The entry needs to be configured, for Chinese users, the unfamiliar English has caused the configuration of obstacles. In fact, it is not very complicated process, the basic configuration to see the introductory tutorial, basically can be fixed.

3). Related Resources

• Yeek Video Tutorial
  The most comprehensive, most extensive coverage of a video resource tutorial address.
• One of my experiences to share
  Individuals have accumulated a little over the years.

4). Follow-up Outlook

If time allows later sharing will introduce several other lightweight development tools to compensate for the shortcomings of webstrom bias: such as sublimetext, Vim and so on.

2. Photoshop

PS is the preferred software for web design, he focuses on the graphics of the two processing, mainly in terms of color, by sub-layer processing to achieve a variety of different fantasy effects. And the magic of PS is that each parameter inconsistent, resulting in inconsistent results, so that many non-professionals think of the design of the art of the cell or illusion, thinking that they are a design wizards, so that the wrong industry, so design this line of risk, the introduction to be cautious. Like Ai, CorelDRAW focuses on the creation or editing of modelling, like CAD is the point line surface relationship, 3DMax is a spatial physical relationship, Flash is the relationship between space and time and so on. And in these design software, only PS can be a complete and realistic simulation of the real scene on the Web page, although the font can sometimes appear slightly biased in performance. Fireworks also due to market share or PS overlap function too much, has stopped the new version development or update. This is a company strategy or market competition will inevitably result in, individual users can not be left or right.

1). Basic information:

• With layers as the main editing objects, through the different layers of detail editing, so that the overall effect is more beautiful or changeable.
• With tools as the main editing means, through the combination of multiple tools, to meet most of the editorial requirements.
• Through the combination of filters, rendering a lot of good results, to reach the civilian population can also participate in the internet speculation of the army can not self-dial, in the present PS has been a noun to a verb.
• Transduction to the front end note: Optimize the diagram process, improve the efficiency of the cut graph, increase the position of competitive advantage
  Specific experience Sharing: Modify the PS shortcut key, so that it conforms to the habit of front-end operation, side to improve efficiency. To expand, you can modify other software shortcut keys, overall improve work efficiency, increase employment capital or confidence.
• Picture format that thing
  The general novice does not pay attention to the performance problem of the page, and the performance is easy to appear above the picture, how to handle the good picture in a large page is one of the front-end necessary skills.
  General application of more than the format is: Gif,png-8,png-24,jpg. And novices often confuse png-8,png-24 's differences.
  According to my experience 4k below gif,png-8 difference is not small, 4k-100k:png-8,gif dominant, greater than 100k decisive is JPG.
  PNG-8 does not support alpha transparency and requires a JS or transparent filter to handle under IE6.
  Picture format and design that thing.
  Web performance optimization: Picture optimization

2). To increase the efficiency of the cut graph expansion of ideas:

Objectively speaking, the basis of improving efficiency is rich in actual combat experience or years of pits experience, essentially software operation difference is not particularly large. A developer with five years of experience or one year of experience, using the same tools, the main difference is a proficiency level. Here I only share some of my personal experience:
On the previous point of the modified shortcut, share some of the shortcut keys I modified:

• New layer: F1
  The use of frequency is relatively strong, so put in an easy place.
• New file: F2
  Next to the new file, it is a key that uses a higher frequency. Since transduction is a separate layer that will be separated from the original layer several times, this shortcut is changed from the original two keys to one key. and effective separation of the characteristics of the left and right hand operation, as far as possible the use of high-frequency keys to start. Here are a few shortcuts that are optimized or set according to this idea.
• by screen Size: F3
• by Canvas Size: F4
  The two key operation ideas are mainly used for reference in Coreldraw,coreldraw is an excellent graphic advertising design software, more for business cards, packaging design. This is by the Canadian Corel Products, their company another more famous painting software is painter.
• Save as Web format: F5
  From the original 5 button optimization to a key, there is a process is through the ctrl+shift+s to store the picture, it is obvious that the process step is too many, a waste of time. Interested can make a comparison.
• Cropping command: F6
  From the original 3 button optimization to one button, the other is the cutting tool (C), the cutting tool for the entire screen of the destructive power is relatively large, and difficult to control, especially in the PS version of the upgrade of the tool is optimized. This command is relatively lighter or more convenient.
• F7,F8,F9 remains unchanged
• Convert to RGB mode: ctrl+=
  Because GIF is an indexed pattern, the color information is less, and if you want to edit it, you first have to convert to RGB mode.
• Create a group from a layer: CTRL +,
  Due to the lack of experience of the new designers, a design manuscript is not divided into layer groups. In fact, a reasonable layer group can effectively guide the front end, so this shortcut key is to solve the problem.
• Free Transform: F10
  Transform content
  The front-end is mainly to edit the existing PSD file, so the two keys can be taken out separately.
• Transform selection: F11
  Transform border
• Brushes: F12
  Because the front-end is not like a designer, the PSD is just a cut, and the designer focuses on the process of creation. Therefore, the dependency on the brush tool is not very large, moved from the original F5 to F12.
• Copy Layer Ctrl +/original position in menu bar: layer, copy Layer
  This shortcut allows you to quickly copy one or more layers from the original PSD into a new file.

Demo: 3). Several ways to transduction:

• Slice (k):
  Pros: Ability to cut multiple images at once.
  Cons: Need to take a step back, reduce efficiency, easy to produce extra useless pictures
• Selection (Use the selection tool to draw a range and then crop):
  Advantages: precise Regional target single
  Cons: Need to take a step back, easy to operate by mistake
• Copy (Ctrl + C):
  Pros: Copy a single layer of content to a new file to quickly cut pictures.
  Cons: It's not easy to find the appropriate layer.
• Consolidated copy (CTRL+SHIFT+C):
  Pros: Copy all visible layers to a new file to quickly cut the image.
  Cons: It's not easy to find the appropriate layer.

3. Firefox

Similar instant editing plugins are available:

• F5
• Live Edit +chrome
  Webstorm live edit sync with browser implementation steps
• File watchers
• Sublime text + Emmet Livestyle
• Livereload + Firefox
• Auto Reload + Firefox

Other excellent Firefox plugins:

• Vimperator
  Vimperator's operational thinking comes from vim, a simple few keys that can do most of the work,
  Chrome also has a similar plug-in vimium, but does not support local static file refreshes.
• Yslow
  The plugin can analyze the site's pages and provide some optimization suggestions. This part of the feature has slowly appeared in Chrome's Debugging tools
• Firequery
  The main focus is on jquery for some user experience enhancements to Firebug.
• IE Tab 2
  Firefox can be embedded in Internet Explorer tags.
• Html Validator
  HTML validator, which can check whether the page label is aligned, or some general grammatical problems
• Validaty
  Provides you with a validator button similar to validator.w3.org
• CSS Validator
  One-click Check whether the current Web page conforms to the CSS standard validator Plugin
• Jsonview
  Displays the JSON document in the browser.
• User Agent Switcher
  Analog Mobile User Agent
• Mouse gesture Firegestures
  Provides some common mouse gestures, but the gesture experience is slightly worse than 360 speed.
• Pixel Perfect
  Perverted products Use this plugin to verify the error of the design draft and the page.

4. Chrome

Chrome is slowly gobbling up the Firefox market, but in recent years it has been powerful, but memory has grown.
However, he is an effective addition to Firefox. Frequently used plugins:

• Vimium
  Inspired by Vim, with some shortcuts to Vim to operate Chrome, does not support static file refresh
• Jsonview
  A plugin for formatting JSON, already included in the Fehelper plugin, coincides with the Fehelper feature.
• Fehelper
  A collection plug-in for front-end packaging
• Visual Event
  The main purpose is to see which events are specifically bound by an element

Extended Reading
IE, Google Chrome and 360 Speed browser, which is the best?

Two. File directory

• Static resource structure
  Unified into the static directory
• Dynamic resource Structure
  such as temporary files directory, backup or upload directory
• The finer the table, the better.
  The breakdown of the directory is easy to upgrade the folder updates, but also conducive to further expansion of the project.

Three. Html, CSS Structure

Below, the Emmet cost is the lightest, the realization is the simplest, is the present more commonly used one kind of expansion way. Others need to rely on an environment, in addition to a certain cost of entry, the maintenance of the team or project is a very small test.

• Emmet
  is a quick extension replacement tool developed by the Russians in Python, extending the rules.
• Less
  Tutorials for domestic bootcss
• Sass
  Sass is a bit more advanced in terms of function and thought than less. There is a Chinese station in the desert: Sass China, to promote sass to do their utmost.
• Haml
  A tool that relies on Ruby to quickly generate HTML. There are two articles to share:
  HTML code Shorthand method: Emmet and Haml
  Haml Reference Daquan
• Stylus
  Stylus Chinese Version Reference document
  Stylus is a very young member, in recent years only came out, all aspects of thinking more mature.
• Slim
• Coffeescript
• This is the JS put in this piece introduced.

Four. Reset.css

• Normalize

Five. How to debug code 1. Firefox

Firebug is a more comfortable use of the CSS debugging tools, may be preconceived, or the cause of personal habits

2. Chrome

Chrome's JavaScript Debugging tools are really the most powerful tool yet, and none of them

• Formatting code
• See which events the element is bound to
• Quickly locate the core code area based on the hook
• Efficient use of workspaces for remote debugging
• Performance optimization with profiles
• The use of audits can be used for page useless CSS monitoring or other aspects of the recommendations.

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

3. IE

IE11 's Debuger personal feeling still has progress, is wants from the detail place to attract the user. However, due to the lack of their own technical genes, ease of use and chrome is still very different, even so, is currently the only choice for the IE version of the downgrade.

4. IETester

IETester Although there are many shortcomings, but from the current market, he is the only one can be easily tested Ie6 software.

5. Virtual Machines

Because IETester can not be true simulation IE6, so some special bug can only go to the virtual machine real environment debugging, in the direct IE6 can install IETester debugger plug-in, you can easily solve some bugs.

Six. How to check the code

• Editor Tips
  Webstorm can prompt for general commonsense spelling or symbolic errors.
• Debugging Tools Console
  The console of the debug tool such as firebug,chrome can display some errors well.
• source file
  Ideas for folding code through source files
• Plug - ins
  The Firefox plugin is listed above and is not duplicated.
• Web site Verification

Seven. How to Summarize

The purpose of the summary is to extract some of the structure or style of the common layout type for later reuse, as well as the role of interviewing, sharing to other small partners and so on. This is a little summary of me-jsfiddle. Another is the accumulation of various types of business page display form, for future entrepreneurship or career promotion lay the foundation.

• Summarize website business type, features
  such as the news portal class, the page is more neat or regular, pay attention to the alignment of the page or other small details of harmony and unity.
  such as e-commerce, the page is similar to the news portal class, but more attention to interaction, pay attention to the user experience of the details of the carving.
  such as the game, the page style depends on the game material, pay attention to the background image of the atmosphere of the rendering, attention to the game culture transmission.
• Layout features
  General news, e-commerce, layout more middlegame, only the game class, consider compatibility, may be a bit cumbersome layout.
• Detail handling
  Some page designers in order to emphasize the inconsistency of content, may have done a differentiated design, then need to use different CSS to cover the differentiated page design.
• Error-Proof handling
  When the page layout is completed, in order to prevent discrepancies with the original design, it must be reviewed again to avoid errors.
• Anti-change treatment
  Because each element on the page is likely to have the added processing of the deletion, this should be considered in the layout.
• Anti-Version upgrade processing
  Unfold also a lot, look at the leaf of the message of this article: about the front-end framework upgrade and full-site style replacement simple suggestions

Finally: This is an introduction to the tool before refactoring, and the next article focuses on how to refactor ... Please look forward to it.

To be continued ..., the next period is more exciting.

Front-end development QQ Group:389875212 , prohibit small talk, non-happy don't enter ~!

Pride-css Deconstruction Series-Sina page deconstructed-02