Geekly Articles each Day
📜 ⬆️ ⬇️

Front-end developer tips



Hello, reader Habra.

Probably, you will immediately ask me: “Who are you to give me advice?” So, a little about me.
')
My first dialogue with HTML and CSS was 10 years ago, back in school, when I just had the Internet, and I realized that I also want to make pages that the whole world can see. Since then, I have at least 5 full years of experience developing websites in an adult manner. Now I can say without much modesty that I have already folded a couple of hundred sites, most of which, oddly enough, do not at all coincide with my current layout requirements.

I don’t want to tell how to do it, this article is the result of my experience and an attempt to write recommendations to those who are just starting, although for experienced web designers (the word cutting ears) there may be some interesting ideas here.
If you are interested in asking under the cat ...

Workspace


Create a folder with a ready-made template to get started

It is always easier to work with what you did yourself, even if it is an edited ready-made template like boilerplate. Spend an hour to learn everything inside and out, rewrite what you don’t like and add what you use often.

Use CSS preprocessors

LESS, SASS and other ** SS should be used for one simple reason: they increase the speed of layout. Not immediately, but over time you will understand how much time you have saved on nested styles, admixtures, variables and other pleasant trifles.

Make a list of LESS (SASS) snippets

Large pieces of code in any case swing from project to project, and each coder has elements that he uses again and again. I recommend that they be taken out as impurities; then, when compiled in pure CSS, they will not take up space, and if necessary they will be easily embedded into any place of styles.
If you still do not quite understand why this is necessary, then find on the Internet a selection of snippets for the preprocessor you need, and see what things are realized with their help.

Use Emmet ( http://emmet.io )

This plugin for most popular text editors, with which you can speed up writing HTML code several times. Just try.
You can do the same



Make a selection of javascript plugins

For most tasks, there are already good, easily customizable plugins, and you do not need to reinvent your own bike every time, or go on a new search.

HTML


Use a minimal amount of HTML tags.

If possible, you need to minimize the number of tags used for easier orientation in the code and a quick change of its parts.



Use HTML5 tags

They have long been supported by all modern browsers, and for IE younger than version 9, they are included in a short script.
Here is the script itself
<!--[if lt IE 9]> <script> var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]-->


The most frequently used tags by me to denote areas of the site:


Enable JavaScript before closing </ body> tag

You can argue a lot about the fact that asynchronous JavaScript loading is supported by many browsers and this is useless, but the solution is simple: in most cases the weight of the page code is substantially less than the weight of scripts, therefore they will start loading almost immediately, and less time is spent before the page is displayed.


Use HTML tags correctly.

For example:


All text from the layout should remain as text during layout.

There are such days that it's just too lazy to divide the site header into different blocks, you merge it into one picture and upload it to the site. STOP! Think again, you can not do that. All text on the site should be possible to select and copy, if necessary.

Do not be afraid of the tag <br>

Recently, I often see how, instead of using <br>, people try to contrive with some strange constructions. You just need to understand that <br> is needed to transfer text and that's it.

Use special links for phone, skype, mail and other

For the convenience of the user, Skype, mail and telephone must be clickable, for this purpose, prefixes are used in the link, for example:



If this is not done, if the phone will be divided into several tags, for example:
 +7 <span>(495)</span> 123-45-67

on mobile devices, only part of the phone ( 123-45-67 ) without a country and city code will be allocated for a call, and, accordingly, it will be impossible to call.


Forms


Forms should be allocated in a separate block, because the number of errors and shortcomings in the imposition of forms sometimes just rolls over.

Set tabindex attribute for form elements

For a form of two fields this is not so important, but for a large form it is always useful, especially when the order of the fields in the code does not coincide with the order in which they are displayed.

Use the autofocus attribute

If on the page the main action performed by the user is filling out the form, then put the autofocus attribute in the first field of the form, people will thank you (hello, youtube).

Use HTML5 field types

Do not be afraid to use field types that appear in HTML5. If the browser does not support this type, then it will simply display a text field.
Of the most important field types, you should always use:



Use the tel field type for numeric input fields.

From the previous paragraph, the purpose of field types is clear, but this type should be singled out separately. If you are sure that in the field you need to enter only the characters from the phone keypad (0-9 # * +) then use the type tel for this field. This will greatly facilitate the input for users of mobile devices. For example:


Prohibit the execution of JavaScript for date, time, and <select> fields on mobile devices

On mobile devices, such fields are perfectly processed by default, and you don’t need a drum with a size of 10x10 pixels instead of a convenient, half-screen-sized drum to select a date.




Always use the for attribute on the <label> tag

Just the usual convenience, the click zone for getting into the input fields increases significantly.

Styles


Do not use: hover as action trigger

Very often there are unsuccessful cases with a drop-down menu, which is implemented through the pseudo-class: hover, not only is this menu practically inoperative on a mobile device, it also brings a lot of headache to desktop users. The solution, in this case, is to use javascript.



Work through the various states of the elements

Designers in the layout usually draw the state of the buttons, input fields and other things when interacting with users and hide them in separate folders, so do not forget to type them.

All content image fillets are edited with border-radius

Each time you upload an image for a portfolio, and by rounding it manually in Photoshop, somewhere in the world, one kitten cries. If the design specifies that the product images, photo gallery, or something else should be round, then try to make these rounds set by CSS styles.



Follow the principle of graceful degradation

Heartless IE

The browser does not support rounding the corners of the block? Yes, well.
Does an element in IE7 have no shadow, with the effect as if the plane beneath it is curved? Well, what to do.
It is not worth spending a lot of time and effort to create rounded corners at the block, if it does not affect the final result. Another question is if the possibilities (or rather impossibility) of the old browser will affect the user’s interaction with the site, for example: using the box-sizing: border-box css-property on the site, an important part of which visitors access it via IE7.

Performance


Make sprites

High-speed Internet has greatly reduced the time between a request and receiving a response by the user. The bottleneck at the moment is not the amount of traffic, but the number of requests to the server. Therefore, it is necessary to reduce this amount to a minimum.
To do this, you just need to combine all interface elements into one picture, and place them on the site using the background image positioning.


Squeeze * .PNG and * .JPG

When you save images in photoshop, they are quite heavy. Using the services http://www.jpegmini.com (for *. JPG images) and https://tinypng.com (for *. PNG images) you can reduce the weight of graphics on average by 2 times.

When using non-standard fonts, connect only the desired faces through Google Web Fonts or analogues

Google Web Fonts allows you to connect only the desired outlines and character sets. For example, if the font has 5 text thickness options, and only 2 are used on the site, it is not necessary to connect all 5.
If this is a regular site, then most likely you only need Cyrillic and Latin characters, you should not connect extended character sets.

When using jQuery or other libraries, use the CDN

In the case of jQuery, connecting it from Google's CDN, it is likely to be already cached by the user, and this will save a couple of tens of kilobytes.

PS


I began to write these short notes about a month ago, and I am sure that there are many more that I will add here. It is also possible that, dear reader, you will tell me what kind of knowledge you lacked when you started to do it right, quickly and well.

Source: https://habr.com/ru/post/231855/

More articles:


All Articles