THE ARTICLE IS ACCEPTED BY THE HABRA COMMUNITY AS A DISINFORMATION AND IS NOT RECOMMENDED FOR READING!

In one of my social companies, the role of front-end developers is compared to bass players in musical groups: once they dreamed of becoming solo guitarists with six-string electronics in their hands, or, drawing a parallel, real “hackers”, an information technology guru, but stumbling over pointers were forced to take a step back and remain coders. It is up to you to decide how true this idea is, but personally my acquaintances, the front-end vendors, really once tried to learn almost assembler and still sometimes regret that they could not cope with memory segmentation. In this article, we will consider the opposite case - when an experienced system or application programmer suddenlydecided to become a webmaster. The reasons may be different. Perhaps this is a student like me, who has not yet received a diploma with which you can get a job in the specialty, but you need to earn money now. Or the boss ordered the system administrator to make up the company’s website, because there is no one else. Well, or perhaps you were attracted by the idea to stop working for an uncle and become a self-sufficient freelancer, and on freelance exchanges, as you know, the most popular goods are websites. One way or another, when performing tasks from tutorials in HTML, CSS and JavaScript, you unwittingly partially rely on your past experience in developing application and system software, while tutorials are designed for advanced beginners in the world of information technology. As a result, these newcomers get their first sites faster and more cross-browser than yours. And all because that with their charter they don’t go to someone else’s monastery. I’ll tell you about some of the errors identified by my own experience that haunt novice front-end providers that have a heavy portfolio with C ++ algorithms.

Waiting for easy profit

The first mistake is economic. If you came to the front end with the goal of earning more than your boss allows, I will immediately disappoint you, you can no longer read. Demand for landings, layout and turnkey business cards on exchanges is really big, but the offer is high. Instead of 8 hours of work in the office, during which you perform the work assigned to you, you will have to spend most of the day on an independent search for this work. Keep in mind that most employers are willing to cooperate only if you provide them with order-related examples from your portfolio, which means that the first month you are guaranteed to work for shisha, because you must first collect this portfolio, catching every chance to work for free. And even with him dozens of freelancers like you will respond to the same project with you. Among them there will be very experienced layout designers who will complete half of the order immediately and provide as a demo version, and only beginners who, like you, will once offer to complete everything for free. Most likely, the employer will choose one of these two legions, and the rest will have to sit for several hours to no avail at the monitor, pressing F5. The situation can be compared with the market of lawyers in the CIS - once they were torn off with their hands, as soon as they go beyond the threshold of the alma mater, but now the offer far exceeds demand. At the same time, freelance differs from working in jurisprudence in increased danger: if you do not have your own private entrepreneur, the money you earned on freelance can be considered illegal under the law, and then you will definitely regret it, that they didn’t stay in that cozy office where you could do your favorite thing 8 hours a day and get a white salary for it. If I still have not convinced you, we will move on to the following errors.

Scatter code on different files

We do this in high-level system languages ​​- each class - in a separate file. Good typesetting tutorials immediately teach you how to save HTML and CSS in different files. It may seem that this technique applies to everything. Stop. Yes, it’s better to store CSS code separately from HTML, but, for example, keeping styles reset or templates separate from the bulk of the CSS rules of the site is a deadly mistake. The same applies to JavaScript - you don’t need to break scripts into hundreds of files by class, just group them into two files: what is included in the page header (head) and what is added to the end of the content (body). We are used to the fact that programs in compiled languages ​​are fully linked before the start of execution. Everything is different here. Each link in the site code is an additional request to the server. Surely you noticed how slowly the social network Vkontakte began to work lately. Open the developer panel in any browser, update vk.com and see how much it makes GET and POST requests to the social network server. One such request takes a few microseconds of time, but because of their number, the process of fully loading the page is delayed for seconds. Remember: the minimum number of requests is the main method of increasing the speed of a site. On a local server, this is invisible, but it becomes obvious when working with remote hosting. No one bothers you to store discharges, style templates, classes, libraries in separate files, but before publishing all this needs to be “glued”, leaving one source HTML and CSS file, and a couple of JS files from the source. To assemble all JS files into one file, “bundle”, there are webpack, browserify, SASS and LESS processors are designed for a similar CSS assembly. There are other optimization methods, for example, combining several images (most often lists of icons or avatars) in one file, but this is the topic of a separate article.

Enumeration with classes and identifiers

Tutorials advise adding class and identifier attributes to all elements on the page so that they can be easily selected with CSS selectors. This is good advice, to a certain extent. When I was just starting to study typesetting, everything was just strewn with classes for me . This is mistake. I will give an example.



This is the code I wrote when I was new to the web. Now consider all the errors. Firstly, in the ToR it is not indicated to colorize the navigation tabs in different colors and it is not planned to indicate it, and therefore all tab identifiers are just wasting the load on the site user’s processor. Feel free to clean. Secondly, all elements of the "topnav" class are elements

and invested in

, moreover, an element
may contain only elements
• therefore our class “topnav” is identical to the selector “#topnav li”. Erase the topnav classes. And thirdly, in the TOR the only navigation bar is indicated, which means that there should be only one element on the entire page