Javascript bundling and minification

Bundling is basically concatenating all small or big javascript and or css files into one huge file to minimize the number of requests and hence load on the server.

To speedup loading of a webpage bundling and  minification of the bundled code is necessary. Minification is the process of removing unnecessary characters like whitespace, comments, new line characters etc. from source code to reduce the overall size of the content without changing the functionality of the code.

So, less file size means lesser time to process and download files. Of course, there are various approaches to bundling and minification using bundlers like Webpack,  Browserify, RequireJS etc.

Advertisements

AMD in Javascript

AMD stands for Asynchronous Module Definition. In a nutshell, it’s a format or a specification for writing javascript.

So, what is a Javascript module?

Its a reusable code which exports specific objects, making them available for other modules through dependency references to be used their programs.

These modules can be loaded asynchronously, if desired.  That means, there’s  a huge improvement in website performance as the files are only loaded when they are needed.  Also, it provides developers with the flexibility to define order in which module dependencies have to be loaded and load multiple javascript files during runtime.

AMD implementation is used by jQuery, Dojo, Firebug etc. There are various javascipt module loaders like RequireJS,  Browserify,  Webpack, SystemJS

i18n, l10n

If any web application is to be used globally, it becomes very crucial to incorporate the internationalization (i18n) localization(l10n).

i18n is transforming the products and services enabling the flexibility to adapt support for multiple languages, cultures, currency, date formats etc. whereas l10n is adapting the internationalized products and services for a specific region and culture.

For example, a user from Russia wants to access a website which is currently in English but if the website is internationalized and localized into Russian. As a native Russian speaker the user might not be accustomed to the English language. This is where i18n and l10n helps a lot and user feels like home.

Round, ceil, floor : Decimal to integer

Javascript has inbuilt functions for converting decimal number to an integer value.

Math.round function is used to round a number to its nearest integer. If fractional part of the number >=0.5 then the argument is rounded to next higest integer.
If fractional part of the number < 0.5 then the argument is rounded to lowest integer.
Syntax: Math.round(number)
eg. Math.round(7.5) = 8
Math.round(7.2) = 7

Math.ceil function returns integer greater than or equal to a given number. Ceil means think of the ceiling of the room which is above your head.
Syntax: Math.ceil(number)
eg. Math.ceil(7.5) = 8
Math.ceil(7.2) = 8
Math.ceil(7) = 7
Math.ceil(-7.5) = -7
Math.ceil(-7.2) = -7

Math.floor function returns integer lesser than or equal to a given number. Floor means think of the floor of the room which is below you
Syntax: Math.floor(number)
eg. Math.floor(7.5) = 7
Math.floor(7.2) = 7
Math.floor(7) = 7
Math.floor(-7.5) = -8
Math.floor(-7.2) = -8

W3.CSS & W3.JS: modern & responsive

W3.CSS is a free to use CSS framework with features of responsiveness whereas W3.JS is a javascript library

W3.CSS is based on standard CSS therefore easier to learn and use. It supports responsiveness and provides CSS equality across all browsers and all devices.

W3.JS is smaller and faster than other JavaScript libraries. It is designed to speed up application development.

W3.CSS classes start with “w3-propertyname” and W3.JS  selects and performs action using “w3.action(selector)”

SVG – Scalable Vector Graphics

What is SVG?

SVG is Scalable Vector Graphics. SVG is a XML based format to represent vector based graphics. It is used to draw two dimensional vector images, which support animation. SVG allows three types of graphic objects: vector graphics, raster graphics, and text

Can SVG be rendered in webpages?

Yes, SVGs can be rendered in webpages using an html tag using attributes like height and width.

Some facts about SVGs

SVG can be created using any text editor.

Since they are XML based, SVG images are searchable, indexable and can be scripted and compressed

SVG is an Open Standard

Being text format,  size is larger as compared to binary formatted graphics.

Bower Power

What is Bower?

A web site is made of lots of things — frameworks, libraries, assets, and utilities. But keeping track of all these libraries and making sure they’re up-to-date can be tricky. Bower manages all these things for you. So, we can call bower to be a package manager for the web.

What bower can do?

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower does not  minify code or do anything else – it just installs the right versions of the packages you need and their dependencies.

Getting things done with bower

Installation : Bower is a command line utility, it can be installed easily using npm, the node package manager.

$ npm install -g bower

Searching packages :

$ bower search packagename 

Installing packages :

$ bower install packagename 

Listing packages :

$ bower list

Updating packages :

$ bower update packagename 

Uninstalling packages :

$ bower uninstall packagename 

We can save and install multiple packages using a single command by creating a bower.json file for your package with

$ bower init

Once we have got your bower.json file set up wecan simply execute the bower install command to install all of the packages we have specified in bower.json file.

And that’s the bower power!