11 errors which can spoil frontend developer's life
OUR Blog
Frontend developer
Valeriya Chernishova
Frontend developer
FRONTEND
Feb 22 2017

11 errors which can spoil frontend developer's life

Markup is an important stage of web site’s service development. And at this stage you should remember that marked up pages should not only visually correspond to design, but also be technically correct.

An article will be useful for novice front-end developers and applicants, as well as for "veterans". Errors are often made not only because the lack of knowledge but also because of inadvertence. In this article, we are going to consider mistakes dividing them into two groups: errors made while preparing the page layout (HTML) and errors in the CSS files.

1. Missing or incorrectly declared doctype

DOCTYPE instructs web browser on what version of HTML the page is written in. DOCTYPE should be specified for browser for understanding how to interpret a current page. Keyword DOCTYPE must be always typed in uppercase [1].

2. Tag is not closed

Not closed div tag </html>, </body>, </div> is one of the most common mistakes, which appears mostly because of inadvertence.

3. Javascript code

Javascript code must be taken into tags <script> indicating the type.

<script type=”text/javascript”></script>

Exception HTML5 The type attribute may not be required for HTML5, default value is ”text/javascript”. It will be recorded as following:

The handler can be assigned using DOM-element feature on [2]. However, do not abuse this opportunity.

JS files are better to connect at the bottom of the page, not chaotically.

<script src="js/jquery.jplayer.js"></script>
<script  type="text/javascript"> plugin initialization </script>
<div class="jplayer"> </div>
…
<script src="js/owl.carousel.min.js"></script>
<script  type="text/javascript"> plugin initialization </script>
<div class="slider"> </div>

4. No alt attribute for the image

The required alt attribute specifies an alternate text for an image.

5. ID and classes

5.1. ID uniqueness

ID is a unique identificator of an element. Inexperienced developers often add several elements on the page with the same id. And they sometimes abuse the use of ID (code snippet below).

<header id="header">
      <div id="blockWithIdAndLogo">
      </div>
      <div id="menu"></div>
      <div id="sliderWithForm">
          <div id="slider">
          </div>
      </div>
 </header>

5.2 Classe's names

Classes are used in cases when it is necessary to apply the style to the different elements of a web-page. Example of incorrect class name can be found below.

<div class="right"> Text </div>

.right {
  text-align:center;
}

Class name doesn’t correspond to its contents, as it includes the feature to align the text in the center, which makes the code non-obvious.

6. The use of inline CSS styles

HTML specification does not forbid the use of inline styles. But do not abuse it.

7. Indents. Text formatting

One of the most common mistakes at text formatting is adding indents between blocks using <p>&nbsp;</p> and <br/>. Example of incorrect indentation and text formatting below.

<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="text-center">
    details production according to customers’ drawings
</p>
<p class="visible hidden-xs">&nbsp;</p>
<p class="visible hidden-xs">&nbsp;</p>
<p class="visible hidden-xs">&nbsp;</p>
<h2>Details<br/> <br/>production according to customers<br/> <br/>drawings</h2>

<br> is very frequently used to format lists, getting the following structure:

Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br>

8. Navigation layout

Format menu as a list. Incorrect code snippet below.

<nav class="b-main-page__sliderbar__menu">
  <ul>
    <a href="#" class="sub-menu">
      <li>
        <div class="toggle">
          <span></span>
        </div>
      </li>
    </a>
    <a href="#" class='b-link b-link_menu'><li>About company</li></a>
    <div class="menu-point">•</div>
    <a href="#" class='b-link b-link_menu'><li>Equipment</li></a>
    <div class="menu-point">•</div>
    <a href="#" class='b-link b-link_menu'><li>Types of jobs</li></a>
    <div class="menu-point">•</div>
    <a href="#" class='b-link b-link_menu'><li>Products</li></a>
    <div class="menu-point">•</div>
    <a href="#" class='b-link b-link_menu'><li>Recommendations</li></a>
    <div class="menu-point">•</div>
    <a href="#" class='b-link b-link_menu'><li>Vacancies</li></a>
    <div class="menu-point">•</div>
    <a href="#" class='b-link b-link_menu'><li>Contacts</li></a>
  </ul>
</nav>

Inside <ul> only <li> should be placed.

Further we will consider mistakes connected with CSS and mostly with inadvertence, and also how to make a code more readable.

9. Priorities. Use of “important”

It is essential to remember about the priorities of selectors in CSS. Regulations in the meaning of style attribute are of the highest priority, then selector with id follows, then selector with tag name. You can find more details here. In this case you can raise the priority using !important, which overrides all other definitions, including inline-styles.

When writing styles it is very important to take priorities into account and avoid using inline-styles. Otherwise, styles file becomes oversaturated with !important.

.form {
  border-bottom:1px solid #cdd0d4 !important;
  border-left:none !important; 
  border-right:none !important; 
  border-top:none !important; 
  box-shadow:none !important; 
}

.icon {
    font-size: 4em !important;
}

input[type="file"] {
    border:none !important; 
    padding:0 !important;
    box-shadow:none !important;
}

10. CSS features grouping/shorthand

CSS shorthand properties is a compact way of writing several other, more specialized properties. Examples of abbreviations are shorthand properties, a shorthand form for background properties, a shorthand form to control margins and paddings, etc [3].

Consider the following example:

.single-comment {
    width:100%;
    height:auto;
    border-top:1px solid #efefef; 
    border-bottom:1px solid #efefef; 
    border-left:1px solid #efefef; 
    border-right:1px solid #efefef; 
    position:relative;
    padding-left:50px;
    padding-top:20px;
    padding-bottom:10px;
    padding-right:50px; 
    font-size:13px; 
    line-height:16px;
}

Now the same fragment of a class, but with shorthand forms for borders and paddings. Code of the 1 class is 6 lines shorter.

.single-comment {
    width:100%;
    height:auto;
    border:1px solid #efefef; 
    position:relative;
    padding:20px 50px 10px;
    font-size:13px; 
    line-height:16px;
}

11. “Dirty code”

This point is always due to developer’s inattention. Such pieces of code (examples below) are frequently the result of markup revision or git branches (when developer doesn’t really delve into conflict places in CSS files).

.text {
  line-height: 24px;
  padding-left:40px;
  …
  line-height: 35px;
}

And sometimes even classes duplicating.

.blog-details .user-image a {
  border: none;
}

…

.blog-details .user-image a {
  border: none;
}

It isn’t necessary to use a big number of selectors (example below). If possible, try to minimize the form.

.touch header .container .main-menu ul li.flexMenu-viewMore > a:hover:after {
  display: none;
}

Adhering to these recommendations and avoiding errors described in the article, you will significantly improve code quality, making it more readable and well-structured, as well as increase the productivity.

Useful links

  1. Tips for Webmasters
  2. HTML DOM Events
  3. CSS Shorthand Syntax Considered an Anti-Pattern
SIMILAR POSTS
Dec 22 2016
Everything you should know about validation and errors in AngularJS apps: good and bad practices, build-in and third-party tools, some pieces of advice on how to build convenient and maintainable error handling core.
Nov 09 2016
Missed some news in Meteor world? Don't worry and check our digest!
Oct 19 2016
This article highlights basic methods which will help you in layout and creation of adaptive emails.