Professional Documents
Culture Documents
Best Practices and Coding Standards (4th Copy)
Best Practices and Coding Standards (4th Copy)
Introduction
Objectives/Goals
Getting Started
General Standards
Deliverables
HTML
Goals for Markup
Getting Started on Markup
HTML Markup Best Practices
Markup Deliverables
Next Steps & HTML5 Resources
CSS
Goals for Effective CSS
Getting Started with CSS
CSS Best Practices
CSS Deliverables
Next Steps & CSS Resources
JavaScript
Objectives/Goals
Getting Started on JavaScript
JavaScript Best Practices
JavaScript Deliverables
Next Steps & JavaScript Resources
Appendix
Advanced Topics
Links for More Resources
Introduction
This document useful for the guidelines and best practices for the front-end web development team,
and how front-end technologies work; a basic familiarity is assumed.
A Front End Developer is the link between the graphic designer, responsible for creating the visual
design of a Web Application and the Backend Developer responsible for creating the computational logic
behind the application.
Objectives/Goals
Our objective in creating this document is:
1. Consistency and faster code across our Application/project.
2. Make easy/ease of maintenance.
3. Create Enterprises Web Application.
4. Guide to staff or help to new developers.
Getting Started
Need to understand how the development environment will work, what tools will be available, and what
the differences between development, test, and production environment. Teams should get a proper
understanding of the client's browser and device requirements are.
General Standards
A key hallmark of professional code includes a notion that while we are writing code that must reach a
desired goal, we are also creating code that must be read and understood by others.
Frameworks give the users much more freedom regarding the (partial or entire) use of the
framework and the use of the models or techniques therein.
Now days so many framework in the market, and There is a lot of confusion regarding the
use framework. That will be depend on client requirement or Situation
Choose one framework (like jQuery frameworks Bootstrap, UI kit, Semantic-UI Foundation Etc.)
but most popular front-end framework is Bootstrap. If a client using own framework we need to
understand the Framework.
2. Code Consistency
Everyone has their own style because of the way they learned to code. If you learned using a
plain text editor, your style likely evolved from what you thought was more readable. The
quality of your code is not just in its execution but also in its appearance. It should be formatted
and properly aligned with comments. Code that must be read and understood by others.
3. Indentation
Please consistently indent, 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. Always follow code pattern.
2. Line Height
Need to understand about line height it is concerns the spacing between lines of text stacked
above another.
3. Font selection
Font selection is a very important, if stakeholder have own branding. Use same font or fallback
font family.
Un-minified libraries and third-party scripts should be in local development environments for easier
debugging if available
Third-party code and libraries should never be modified and their original source and the license must
be documented and be appropriate for a project.
Inclusion of any third-party code should be carefully considered and verified with the project team as
the appropriate solution to a given problem.
Please remove legacy files and unwanted code, be certain the work is delivered in a clean file, and in an
orderly, logical structure that serves a clear purpose.
Design Goals for HTML
1. Simplicity
2. Scalability
3. Platform
4. Content
5. Support CSS
6. Support UX (visual)
When creating the HTML for a website, environment or technical constraints may impact the type of
markup that can be used. Please discuss the final delivery environment in depth with technical leads and
clients.
Discuss types of:
Templates and types of pages.
Frameworks, CSS grid systems (custom or otherwise).
Server-Side platforms.
Note that it is important to take care into account how the site will finally be maintained and who will be
doing that work.
4. Character encoding
Specify the character encoding for the HTML document
<meta charset="UTF-8">
5. Title declaration
Define title for your document
<title>CyberTech Reference</title>
<head>
<meta charset="UTF-8">
<meta name="description" content="cybertech Systems and Software Limited
">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="cybertech">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div></div>
<p></p>
<ul>
<li></li>
<li></li>
</ul>
8. Indentation Html
Indent nested elements and tags with single indentation settings, whatever they may be, for
each level in the hierarchy of the document.
<div class="container">
<p class="paragraph"></p>
<ul class="listStyle">
<li>Loren</li>
<li> Loren </li>
</ul>
</div>
This is a very basic and solid startup for all and any HTML5 projects you might do in the future.
With this, we can start assigning tags to the different sections of our layout.
<header role="banner">
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or Mozila.</p>
</header>
<section>
<div> main content here </div>
</section>
<footer>
<p>@cybertech.com </p>
</footer>
<img src="logo.jpg" alt="cybertech.com" width="104" height="142">
<ul id="nav-tabs">
<li class="tabs">Home </li>
<li class=" tabs selected">About Us</li>
<li class=" tabs ">Contact</li>
</ul
Form: - Using both semantic and functional reasons, we make full use of the <form> tag for all
sections requiring user input. This will require that the back-end be able to return a full HTML
<table>
page for form submission (e.g. registering a new user, editing the quantity in a shopping cart).
<caption>First
Do not nest the HTML formtwo U.S. presidents</caption>
element tag.
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Took office</th>
<th scope="col">Party</th>
</tr>
</thead>
<tbody>
<tr>
<td>George Washington</td>
<td>April 30, 1789</td>
<td>n/a</td>
</tr>
<tr>
<td>John Adams</td>
<td>March 4, 1797</td>
<td>Federalist</td>
</tr>
</tbody>
</table>
Considerations:
1. Site maintenance procedures
2. Browser testing strategies
3. How new features will be added
4. Where new features will be added
5. What the file system looks like for static site assets
6. If a CDN is involved
7. Naming conventions and organization of graphics and photography assets
8. If the "back-end implementation" of static HTML templates will require review by front-end
team members
Cascading Style Sheets (CSS) is help to visual presentation and design rules for a web application.
Cascading Style Sheets (CSS) is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
Objectives/Goals
CSS is an unusual language which can easily lead to code bloat, inconsistencies in design or clashing code
techniques. It is easy to end up with CSS code that is so fragile it can cause site-wide regressions with
small changes.
What the default styles for HTML elements are going to be. <def iaultii>
Which styles are global or general CSS styles? <detailsiii>
Difference between code for layout and for content.
(Layouts is structure of elements // content to wrap around a given element )
1. Inclusion
How to include style sheet in your document
a. Use the <link> tag to include all your style sheets in the <head> of the document.
Example
<style>@import url(“css/style.css”)</style>
Second Example within the css file
@import url(“css/layout.css”);
2. Formatting CSS
a. Use new line for every selector and every declaration.
b. Use single space using before opening brace set.
.box {
width: 130px;
height: 40px;
float: right;
padding: 10px 0;
color: #000;
}
3. Specificity
The concept Specificity is the means by which browsers decide which CSS property values are the most
relevant to an element and, therefore, will be applied.
<div id="test">
<span>Text</span>
</div>
div#test span { color: green }
div span { color: blue }
span { color: red }
https://jsfiddle.net/liteshbopche/0a2t85v7/
https://css-tricks.com/specifics-on-css-specificity/
If you can use! Important you will use parent or component based.
5. Selectorsiv
“Class selectors” let you apply CSS styles to a specific HTML element. Class selectors require two
things:
A class attribute on the HTML element in question.
6. Inline Styling
Do not hard codes style information into your HTML markup directly.
7. Vendor Prefixes
CSS vendor prefixes, also sometime known as or CSS browser prefixes, are a way for browser makers to
add support for new CSS features before those features are fully supported in all browsers.
Example
8. Performance Caveats)
Is the latest Flexbox implementation slower than CSS table layout? Yes, it is. But not enough to concern
yourself about. If you need to use Flexbox, use it. For all but the most extreme situations, any speed
difference against other layout methods is largely inconsequential.
9. Box Model
When you set with height properties of an element through CSS , just set width and height of the
content area . To consider full size of an element, you must add padding, margin, and borders.
Example
Additionally, encapsulating these components into distinct files is a great option. Within this file, using a
naming convention is a tremendous help here for code maintainability and readability.
Group styles under a simple name-space using type pattern such as:
* core component */
.container { ... }
/* component elements */
.header { ... }
11..content
The Mobile
{ ... Web,
} Media Queries, Responsive Design
.footer { ... }
With the mobile Web taking off Media Queries are mandatory in CSS going forwards.
CSS Deliverables
Please be aware of potential conflicts between the original development environment for CSS and an
ultimate deployment to production systems, if continuous integration will allow the continued use of
CSS preprocessors, or if there should a cross-platform development strategy.
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.
Browser Compatibility
Media Queries
Accessibility and CSS
JavaScript
JavaScript is where extra behaviors, features, and functionality not offered natively by Web browsers
through CSS and HTML is created.
JavaScript has gained a huge amount of attention in recent years due to more feature rich, faster
browsers and server run-times such as Node.js. For the purposes, general discussion here focuses on
client-side JavaScript development, with references to where it crosses over.
It is of note that many techniques identified these days as "HTML5" are actually enabled by the related
JavaScript API
Objectives/Goals
Understand how JavaScript to makes is possible interact with web pages, minimize client/server
traffic, order of code execution, debugging testing and reason of include JavaScript.
What we have to do
What happens if for some reason this code is missing or does not run?
What happens if the code triggers an error?
We'll be doing all our work inside of an index.html file. All our JS will insert in index.html.
Often developer will solve a problem step by step and do not consider whole picture. "Add another
plug-in” is not always a good solution.
Take care all of the code being added can be useful elsewhere. Code should be cartelized because it can
be easily updated & reusable anywhere in the application.
1. Inclusion
Use external JavaScript files. Do NOT include JavaScript in-line in the page unless there is a
good reason.
Use the <script> tag to include your JavaScript files at the bottom of your HTML document just
before the closing </body> tag. For optimal page performance, concatenate your JavaScript into
as few files as possible.
<script src=”script.js”></script>
Formatting the language statements and patterns should follow these basics:
3. Variable Declaration
Smaller sites can get away with more simple structures, but for longer term, JavaScript-
heavy code bases the following rule is critical:
For a complex site, never use a single JavaScript file for development, unless it is tiny and
serves a very targeted purpose.
This is so that the code is maintainable and scalable. Smaller files are easier to debug,
swap in and out, and blocks of code should serve as small a purpose as possible (single
responsibility principle).
In most simple terms, most sites benefit from a basic structure similar to:
JavaScript Deliverables
The most obvious fact is you will need to provide working files that are error-free and will work
in a variety of scenarios. We can't assume that clients will always leave scripts and pages as we
leave them, though we can provide direction as to how scripts should be used.
There is an enormous volume of JavaScript reference material out in the wild today. We hope to add
more at some point but here are various topics worth following up on:
Debugging JavaScript
Learning more about ES6
JavaScript Design Patterns
Unit Testing JavaScript code
Node.js
Compare JS Frameworks, Frameworks, and more Frameworks
Baseline For Front End Developers
JavaScript Style Guides and Beautifiers
Douglas Crockford's JS Code Conventions
Maintainable JavaScript Book
Maintainable JavaScript Presentation
Large Scale JavaScript Applications
Responsive Web Design (RWD) is the term used for the practice of creating page layouts and
user experiences that work on a variety of devices and screen sizes.
With the ever expanding mobile landscape and the evolution of the Internet of Things (IoT), the
idea of a "standard" screen size has fallen by the wayside in favor of the rise of a device-
agnostic approach. It is less and less common to launch two versions of a site, one for desktop
and one for mobile.
To this end a series of techniques have been put together for pages to adjust based off
browsers' current specs (e.g. width, height, pixel density, orientation, etc).
The techniques are referred to as Responsive Web Design (RWD) and it is another technique in
the toolbox of progressive enhancement and adaptive web design.
Despite this lofty ideal, on Web projects the term "responsive web design" has generally been
used in reference to an optimized experience for a set of target devices, usually:
A particular set of cell (smart) phones,
various tablets,
or desktop computer monitors (depending upon the target audience).
JS LINT
CSS Beautifier
HTML Format
(There are design/development techniques that allow you to reposition content based on screen size. So
if you do want elements visible on a screen regardless of its size, you can. This is “fold independent”
layout.
Today’s device ecosystem renders any concrete “fold line” moot. There’s just too much variety in screen
sizes. Therefore designing in an adaptive/responsive manner (using the techniques mentioned before) is
required.
)
http://screensiz.es/monitor
iPhone
Model DP PPI Ratio Viewport
iPhone 2g, 3g 320 x 480 163 PPI (@1x) 3:2 320 x 480
iPhone 4 320 x 480 326 PPI (@2x) 3:2 640 x 960
iPhone 5 320 x 568 326 PPI (@2x) 16:9 640 x 1136
iPhone 6 375 x 667 326 PPI (@2x) 16:9 750 x 1334
iPhone 6+ 414 x 736 401 PPI (@3x) 16:9 1080 x 1920
iPad
Model DP PPI Ratio Viewport
iPad + Mini 768 x 1024 132 PPI (@1x) 4:3 768 x 1024
iPad (Retina) 768 x 1024 264 PPI (@2x) 4:3 1536 x 2048
Android
Android screen density distribution is of course a bit more varied. The following table
details the various Android models which hold relatively large market share along
with their screen resolutions.
JavaScript Shells
TogetherJS
Collaboration made easy. By adding TogetherJS to your site, your users can help each other out on a
website in real time!
Stack Overflow
Stack Overflow questions tagged with "JavaScript".
JSFiddle
Edit JavaScript, CSS, HTML and get live results. Use external resources and collaborate with your
team online.
Default css
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
}
ii
Global CSS
_________________________
iii
We can use general document styling to apply CSS styles to our entire web page, and it will filter
down to all elements within the page unless it is overridden within an individual element. A great
example of this is when we want to apply the same font to every element in our web page.
Rather than having to set the font for each individual element - our headings, paragraphs, tables
and so on - we can just set the font once for the entire document, and all of these elements will
adopt it unless we tell them to do otherwise.
To set a general CSS style we need to apply that style to the page's <body> tag. Since our body tag
contains all visible elements of our web page, any styles we apply to it will apply to everything
within the visible page.
Taking the font example discussed above, we could set the font for the entire web page to be
Arial and sized 1em by using the following style declaration:
body {
font-family: arial;
font-size: 1em;
}
This setting would then filter down into all of our page elements. This is a very useful feature of
CSS because it allows us to keep the amount of repetition in our stylesheets down to a minimum,
which helps readability when we come to edit the styles, and also keeps the stylesheet's file size
down.
We can easily over-ride this default setting for individual elements. For example we might decide
to make our <h1> heading tag appear larger, so we could use the above CSS in combination with
the following code:
h1 {
font-size: 1.3em;
}
Our <h1> tags would still inherit the Arial font we defined within the tag, but the default size of
1em would be over-ridden, and our headings would appear in 1.3em instead .
Extra example {font-color, Bgcolor , header , footer etc.}
Selectors
iv
Basic Selectors
Type selectors elementname
Class selectors .classname
ID selectors #idname
Universal selectors * ns|* *|*
Attribute selectors [attr=value]
Combinators (more info)
Adjacent sibling selectors A + B
General sibling selectors A ~ B
Child selectors A > B
Descendant selectors A B
Pseudo-elements (more info)
::after
::before
::first-letter
::first-line
::selection
::backdrop
::placeholder
::marker
::spelling-error
::grammar-error
Standard pseudo-classes (more info)
:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
Front-end tech:
1. HTML / HTML5: Semantic web
2. CSS / CSS3: LESS, SASS, Media Queries
3. JavaScript: jQuery, AngularJS, Knockout, etc.
4. Compatibility quirks across browsers
5. Responsive design
6. AJAX, JSON, XML, WebSocket
Traning Docs
https://mindmajix.com/ui-developer-training
<Div class="scrollbar-rail">
https://gromo.github.io/jquery.scrollbar/demo/basic.html