What are the Important Tools for Web Development?

Essential Tools for Web Development

Text Compare Tools

  • Diffchecker is an online tool to compare text differences between two text files.
  • Beyond compare tool is used to easily compare your files and folders. Beyond Compare’s merge view allows you to combine changes from two versions of a file or folder into a single output.

Code Sharing Tools:

The below list of online tools is used to sharing codes, project modules online.

Website speed test tools:

Local server environments:

To setup local server environments below list of tools are used.

  • Xampp
  • Mamp
  • Wamp server
  • Laragon

Icons:

  • Font Awesome: Scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
  • IconMonster: A free, high quality, monstrously big and continuously growing source of simple icons.
  • Icons8: An extensive list of highly customizable icons created by a single design team.
  • IconFinder: Iconfinder provides beautiful icons to millions of designers and developers.
  • Fontello: Tool to build custom fonts with icons.

Chat Application

Converse.js is a free and open-source XMPP chat client in your browser.

Json to csv Convertor

  • This tool is used to convert the json format into csv file format.
  • We can upload the json files and it will provide the csv file format as an output.

Fiddler for web debugger tool

  • The Fiddler tool helps you debug web applications by monitoring network traffic between the Internet and our own computers.
  • The tool enables you to inspect incoming and outgoing data to monitor and modify requests and responses before the browser receives them.

Web accessibility Toolbar

The Web Accessibility Toolbar (WAT) has been developed to aid manual examination of web pages for a variety of aspects of accessibility.

Continue Reading

Top 5 Google chrome add-ons / tools for web development

Important browser based web development tools:

PageRuler Tool

This tools is used to measure the dimensions of web elements.Draw a ruler to any web page and view width, height and placements position (top, bottom, left and right).

PageRuler tool

Colorzilla Tool

Colorzilla or colorpicker tool is used to pick a color and generate gradient effects. After picking a part in web page, It will give the hex decimal and rgb color code as a result.

Colorzilla tool

Fontface Ninja Tool

It allows user to identify the fonts used in a web page. It will show the font family name, font size and line-height of text contents.

Fontface Ninja tool

Fireshot Tool

It allows user to take the screenshots of viewing web pages.It allows you to take screenshots and the edit, organize and export.

Fireshot tool

Yslow Tool

This is an open source tool and it offers suggestions for improving the page’s performance. This is available in both chrome and firefox add-on list.

yslow tool

Web performance measuring tool

Continue Reading

What are the best practices of Javscript coding?

Best Practices for Javascript Coding

Inclusion of Code

  • 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 separate file.

Formatting of Javascript Code

  • Open braces are preceded by a single space.
  • Open braces should appear on the same line as their preceding argument.
  • Close braces should appear at the same indentation as the statement preceding the opening brace.
  • There should be no space characters between parentheses and their contents.
  • Use semicolons and do not rely on automatic semicolon insertion.
  • Each comma and colon (and semi-colons that don’t end a line) should be followed by a single space.

Variable declaration

To avoid confusion between global and local variables, we declare each variable on its own line with the var keyword. We do not use a single var keyword and then chain several variable declarations onto it separated by a comma.

Variable Names and Types

  • Variable names should be Camel Case.
  • Objects, classes, and name-spaces should be Title Case.
  • Boolean values should be prefixed with is if at all possible.
    Cached JQuery objects can be prefixed with $.
  • Use shorthand versions of empty Arrays and Objects.

Examples:

// some examples
var exampleValue ='my example variable value';
var numberOfTimes =3;
// booleans
var isThisWorking =true;
var isNotWorking =0;
// cache a selector
var $body =$('body');
// short hand objects and arrays
var newObject ={};
var newArray =[];

Limit Events — Use Event Delegation

With jQuery this is easy, simply use the on method with a selector:


$('body').on('click','a.scroller',function(){
// this only runs if the a.scroller is matched
});

Too many events bound on a page can mean memory leaks or just an accumulation of handlers bound to DOM elements which becomes less and less efficient over time.

Additionally, event delegation has the added benefit of persisting events over dynamic page updates when items are added or removed from the DOM.

More code practices

  • Avoid using document.write.
  • Only run scripts on a page that are needed for that page.
  • Don’t repeat yourself (i.e. keep your code DRY)
  • Do not modify JavaScript core objects .prototype unless you really know what you’re doing.
  • Use method names that make sense, such as init() or setup() for code that starts things off. Be consistent on your project.
  • Binary and ternary operators should have a single space on each side.
  • Quoted values should be in ‘single quotes’ so that double quotes may easily exist inside them.
  • Comment JavaScript code thoroughly and consider using a pattern such as those described by JSDocs so that documentation may be generated automatically.
  • Conditional statements go on a new line followed by the opening brace. Else/else go on the same line as the brace.
  • Use type strict checks with === as opposed to == whenever possible.
Continue Reading

What are the best practices of CSS coding?

Best Practices of CSS Coding

  • Organize your code with proper comments.
  • Use the <link> tag to include all your style sheets in the <head> of the document.

Don’t use @import.

@import directive is much slower than the other way to include style-sheets into a html document.
This will fire an additional HTTP request and block page rendering until its completion.

Specificity of CSS

The ID is the most specific selector, since it can only match one element, and the class is a close second. Use those whenever possible rather than HTML tag names.

/* BAD */
button#back-button { … }
.popular ul li a { … }
.popular > ul > li > a { … }

/* GOOD */
.back-button { … }
.popular-link { … }
.unpopular-link { … }

When using vendor prefixed features, put the standardized rule at the end to ensure browsers optimize and use the standard if they recognize it.
Example:
.thing {
-webkit-transition: all 100ms;
transition: all 100ms;
}

Avoid !important

Avoid using the !important keyword. Treat it like the nuclear option, only to be used in the most extreme of cases. This fundamentally destroys the specificity feature and can even break accessibility for some users.

Developers in the future who are either trying to debug a styling issue, or trying to use normal specificity to override a style for a particular element only to find that they can’t.

Formatting of CSS

  • Use a new line for every selector and every declaration.
  • Use a single space before the opening brace in a set of rules.
  • Use lowercase for elements and shorthand hex values, e.g., #aaa.
  • Hyphenate class selector names; avoid underscores and camelCase
  • Use one level of indentation for each declaration.
  • Add a single space between the property and value.
    Example:
    prop: value; and not prop:value;
  • Always include a semi-colon at the end of the last declaration.
  • Naming convention should be followed.
  • Use shorthand. padding: 15px 0; and not padding: 15px 0px 15px 0px;
  • Avoid units on zero values.

CSS File Handling:

  • Use multiple style sheets, but be aware of them expanding beyond control.
  • Not include unused style rules.
  • Offer a clear place for new styling going forwards
  • Not be a drag in page loading performance
Continue Reading

What are the best practices of best practices for HTML coding?

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

What are the 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.

How to style the placeholder text?


/* placeholder css */
::-webkit-input-placeholder {  
  color: #BBBDBF; /* chrome, safari */
}
::-moz-placeholder { /* Firefox 19+ */
  color: #BBBDBF;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #BBBDBF;
}
:-moz-placeholder { /* Firefox 18- */
  color: #BBBDBF;
}
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


@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;
   }
}

CSS hack for Microsoft Edge browser


@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

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