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

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

Instantly turn any ttf font permission into installable

Turn any ttf font permission into installable

Online based tool to set truetype fonts permission into its least restrictive form “installable embedding allowed”. Solves most problems related to embedding fonts into web pages, free of charge. Based on the tool embed. Made because there just weren’t any quick fix tools available.

https://www.andrebacklund.com/fontfixer.html

Continue Reading