Best Practices for HTML

Best practices of HTML coding

  • Please use a common HTML5 polyfill or HTML5 Shiv to enable styling and recognition of HTML5 elements in older devices’ browsers
  • Always include a proper doctype to trigger standards mode
  • All markup should be delivered as UTF-8, since it has the best support for internationalization
  • Should follow the proper naming conventions.
  • Close your tags, some tags no need close tag like img and br.
  • Explain which DIV you are closing by proper comments.

IDs vs. Classes

  • An ID is a unique identifier for that particular element; no other element on the page should use the same ID.
  • Classes are not unique. The same class can be used on multiple elements within a page, and a single element can have more than one class, in a space delimited list.Anchors and LinksAll links should point to absolute or relative URLs with user-readable content.

Paragraphs

Avoid using <br>tags to separate paragraphs or lines of text. Use <p> instead with proper opening and closing elements.

Table:

  • Tables should not be used for page layout; only use them when you need to display tabular data.
  • Use <table> rather than other elements when displaying multiple records of data.
  • The <caption> element is the recommended way to describe a table for both sighted and sight-impaired users, though this can also be done less semantically in the normal page text around the table.
  • Use the <thead> and <tbody> elements to denote which row contains column headers so when a user prints the website and the table runs onto another page, browsers can display the <thead> on each page for easier readability.
  • Remember to use the scope attribute on the <th> element to indicate whether the header applies to the row or column.

If you are using “float” attribute for more than one DIV Use “clear: both” at the end of parent div close.


<div id="header">
<div id="sub" class="first left">...</div>
<!-- #sub.first.left -->
</div>
<!-- #header -->
  • Use CSS Reset (reset.css)
  • Never use inline styles – Don’t mix CSS with HTML.
  • Don’t mix JavaScript with HTML.
  • Include external CSS inside the head tag.
  • Consider placing JavaScript at the bottom.
  • Use lowercase in your tags.
  • Use semantic elements to provide additional semantic value to our documents, make use of HTML5 elements such as <header> ,<article> ,<section> and <footer> where appropriate.
  • Keep the syntax organized.

Use conditional comments.

height: 200px; /* normal browsers */
*height: 350px; /* All IEs */
<!–[if lte IE 6]>
<link href=”ie.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

  • You should only give elements an ID attributes if they are unique.
  • Classes can be applied to multiple elements that share the same style properties.

Label Use

All input fields should be associated with a


<label for="home-address">Home Address</label>
<input id="home-address" type="text" /></label></label>

Use the optimized images.

  • Use Smush tool for image optimization.
  • Save for web” Photoshop command

Cross platform and cross browser check

Test while you writing codes at every stage in various browsers to avoid cross browser issues.
To test on cross platform and cross browsers compatibility, please check the below list of tools.

Reusable Components

Build pages as a library of components, in such a way that blocks of code can be broken up and reused when implemented.

Continue Reading

Code Standards and Best Practices for Front End Development

Coding Standards for Front End Development

Three pillars of front end development:

  • Semantic HyperText Markup Language (HTML) for structure
  • Cascading Style Sheets (CSS) for presentation
  • JavaScript (JS) for behavior and interaction

General Standards

While we are writing code that must reach a desired goal, must be read and understand by others.

Code Consistency.

Usage of the same patterns is critical between team members so as to never cause confusion.

Indentation

  • Please consistently indent, nest, include braces, quotes, and new lines so that code is clear and can be read easily.
  • New code that is added should never deviate from existing formatting conventions or change the indent levels.
  • For all code languages, we recommend the use soft tabs comprised of four spaces per tab. Hitting the Tab key in your text editor should generate four space characters rather than one tab character. This results in our code appearing identical across platforms.
  • If tab stops are favored by a team, simply maintain consistency for a project and it’s deliverable. so developers can make adjustments to their editing environments a single time.

Readability

  • We encourage liberal use of white-space, comments, and descriptive variable names as appropriate for writing easy-to-read code.
  • The ability for another developer to read a code is essential.
  • No need to think about compressed way of code writing while you developing application, we will use automated server side or other build process to optimize files. This includes concatenating files, code minification, gzipping and more.

Areas of critical consistency include:

  • Code formatting
  • Naming conventions
  • File and folder structure
  • Examples or sample code
  • How page components might be broken down or re-used

Points to remember when lookup the UX designs:

  • Templates and types of pages.
  • Which sections of pages (i.e. components) are reused.
  • Type of Frameworks
  • CSS grid systems (LESS, SASS or Custom).
  • Server-Side delivery platforms.

Performance Caveats

In some cases for performance reasons it may be good practice to in-line critical styles in a style block in the document’s head.

This delivers these styles to the browser in the fastest method possible by preventing the need for an additional HTTP request.

CSS Deliverables

Delivered CSS should be concatenated, minified, tested against browser bugs (e.g. MSIE selector count bugs) and extra files should be removed.

File naming conventions should be consistent and language or use-case specific files should be clear and not be easily confused with the global style CSS.

Our CSS should be concerned the below points:

  • Browser Compatibility
  • Media Queries
  • Accessibility and CSS
  • CSS pre-processors usage
  • Internet Explorer or browser-specific bugs
  • Usage of CSS3 transitions, transforms, and more
  • Vendor prefixes
  • Color Management

Best Practices for Front End Development

Click the respective link for the detail view of best practices.

Continue Reading

Some specific CSS uses

Removing dotted outline when link is selected

Below CSS lines used to removing default dotted outline when link is selected.


a, a:hover, a:active, a:focus {
outline:0;
}

Draw Diamond shape using CSS3

After creating square shape using HTML elements like div or span then apply CSS3 transform property.


.square-shape{
  transform: rotate(45deg);
}

Changing Cursor Selection color

The below CSS codes are used to change the cursor selection background color in different browsers.


/* Mozilla based browsers */
selector::-moz-selection {
background-color: #FF68B0;
color: #000;
}
/* Works in Safari */
selector::selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Opera */
selector::-o-selection {
background-color: #FF68B0;
color: #FFF;
}
selector::-ms-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Internet Explorer */
selector::-webkit-selection {
background-color: #FF68B0;
color: #FFF;
}

Note: Selector would be any class name, ID name or element name.

Continue Reading

Useful CSS hacks for specific browsers

browser specific CSS hack codes

IE-10

// eg: margin-top:10px\9;

CSS hack for IE-11

// eg: @media all and (-ms-high-contrast:none){ }

CSS hack for Chrome

// eg: @media screen and (-webkit-min-device-pixel-ratio:0) { }

CSS hack for Safari

// eg: @media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, .footIcon{width:25% !important;} }

Adding browser specific prefix:

Prefix for Mozilla

// eg: -moz-transform: rotate(90deg);

@-moz-document url-prefix() {
.logo {
width:300px;
}
}

Prefix for Chrome and Safari

// eg: -webkit-transform: rotate(90deg);

Prefix for IE

// eg: -ms-transform: rotate(90deg);

Prefix for Opera

// eg: -o-transform: rotate(90deg);

Continue Reading

Fixed header position jumps down when keypad is opened in IOS IPhone device only.

Fixed header position jumps down when keypad is opened

We can overcome this issue by using below script. The logic is when we focus the input elements only, keypad will open.

isiPhone method is used to detect the Iphone device.


 $("input,textarea").focus(function () {
   if (isiPhone()) {
        //Set of conditions When keypad is opened
      }
      }).focusout(function () {
      if (isiPhone()) {
        //Set of conditions When keypad is closed
   }
});

Note:
navigator.userAgent.match method also used to detect the devices.

Continue Reading

When scroll down change the header position to be fixed.

When scroll down change the header position properties


 function init() {
    window.addEventListener('scroll', function(e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
        shrinkOn = 100,
        header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header,"smaller"); // add class name when page scrolls
        } else {
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });
}
window.onload = init();

Explanation:
When we scroll down, class smaller will add in header element. So, we can set the position: fixed property to smaller class. Otherwise smaller class will be removed.

Continue Reading