Static site best practices

1. Static site Coding Standards.
The purpose of the static sitecoding standards document istocreate abaseline for collaboration andreview within various aspects of the HTML project
andthis document will helpdevelopers tounderstand how he/she canwrite better code, sothat other developers canbetter understand it.
Do’s
Use semantics elements:
Code should bereadable andunderstandable by allmembers ofthe
team. Thisincludes internal andexternal developers.
Make code beautifier:
Aspages might (andwill)grow, managing HTML canbe hard. Souse
Indent nested.
Use Web Components:
Extend HTML with your own components byusing polymer.
Place JavaScript at the bottom
Whenloading ascript, the browser can’t continue until the entire file
has beenloaded. Ifyou have JavaScript files inorder toadd
functionality, place those filesat the bottom, this isagood
performance practice andthe results are reallynoticeable.
Organize your code with comments:
Let’s keep our styles organized inlogical groups andprovide a
comment noting what the following styles pertain to. Otherwise you’ll
regret itlater.
Build proficient selectors:
CSS selectors cangetout ofcontrol ifthey are not carefully
maintained. They caneasilybecome toolong andtoolocation
specific.
Modularize your code:
Building reusable components tomaximize the reusability and
minimize the code size.
Test cross-browser & Device’s issues:
Cross-browser/ Devices compatibility issues are amajor problem for
front-end developers, especially due toIE.If you testyour documents
onFirefox/IE/Chrome while writing it,cross-browser rendering
problems will be mucheasier tofix.
Third-Party Libraries:
Third-party code andlibraries should never be modified andtheir
original source andthe license must bedocumented and be
appropriate for aproject.
Use source control:
The code should be committed tosource control inanunmodified
state, or simplyreferenced independency management components
that resolve the filesinabuild. The final products will be compressed
with the rest ofthe source for delivery.
DependencyManagement:
Alldependencies are managedby npm.
Validate code:
Aconcerted effort should be madetoensure your HTML andCSS
validate
Use Cache /cookies:
Cache the static contents, images,java scripts, CSS for better
performance.
Render images properly:
Load imagesprogressively and user proper name andalttagfor each
imageanduse vector imageswherever possible.
Keeping Text Responsive:
Tosimplifyyour site’s typography, ditch the pixel andstart using ems.
Emsallowfor aneasier understanding of scaling between your site’s
font sizes, andtheir smallerunits are more manageable than the
double-digit numbers ofpixels.
Reduce mark-up:
whenever possible avoid superfluous parent elements when
writing HTML.
Accessibility:
The developer ofthe frontend makessure that your website is
responsive and works oneachplatform
Video on the web:
Be careful withthe autoplayattribute. Give controls tocontrol the
videos. If youwant tobe truly cross browser compatible then you
should export avideo asMP4 and WEBM.
Make page responsive by default:
Addresponsive behavior for eachpage bydefault
Add page title and required Meta tags:
Page titlesand Meta descriptions and Meta keywords areimportant
because they tellthe searchengines, andyour users, the focus of each
page.
Optimize the loading speed ofyour web pages:
Ifyour webpage takes more than 4seconds toloadbe sure that you
have lost aconsiderable amount of potential clients.
Don’ts
 Don’t use $(document).ready()
 Do not use all caps or all lowercase titles in
markup
 Don’t deepened much on third –party tool
 Don’t use images names randomly
 Don’t skip form labels
 Don’t nest more than 3 levels inSASS.
 Don’t use different font families ina single project.
 Never use inline styl