JS and other client side scripts – Xhtmljunkies

25 jQuery Plugins to help with Responsive Layouts

Harshal Shah — Thu, 23 Jul 2015 13:46:05 +0000

The most important topic of discussion is some importants jquery plugins which will hep in responsive layout allow you to offer optimized screen size based on device as well as desktop version.

You can make basic responsive by Media Queries but what’s for some different features like Navigation, forms, images, sliders etc.

We are highlighting some popular jquery plugins which will help in responsive optimization.

1) Response.js
It’s an experimental jquery plugin to create a website with responsive by swap content based on screen size and data attributes.
http://responsejs.com/

2) Responsly
It’s a responsive widget jquery plugins written using CSS3 transformations. Currently it’s provide a slideshow and accordion funtionality only.
http://dmmalam.github.io/Responsly.js/

3) Menu to DropDown
With help of this jquery plugin, you can recreate dropdown menu for small screens responsive design.
https://css-tricks.com/examples/ConvertMenuToDropdown/

4) Responsive Menu
It’s a simple jquery plugin which convert your menus to select element for mobiie resolution.
http://mattkersley.com/demos/responsive_menu/

5) Doubletake
This plugin is mainly used for reponsive images. Based on breakpoints of screen, it will update images src when required.
https://github.com/filamentgroup/Responsive-Images

6) FitText
It makes font size flexible. You can achieve scalable headlines in responsive layout that fill the width of a parent element.
http://fittextjs.com/

7) Breakpoints.js
It defines breakpoints for any responsive design. It wil fire custom event when browser enters or exit that breakpoint.
http://xoxco.com/projects/code/breakpoints/

8) Elastislide
It’s a responsive image carousel which is work in any screen size. It will make container smaller which will solve problem for smaller screen.
http://tympanus.net/Development/Elastislide/

9) Blueberry
Blueberry is best open source jquery image slider plugin which will fit in responsive web layouts.
http://marktyrrell.com/labs/blueberry/

10) Wmuslider
You can make responsive slider by Wmuslider. You can manage navigation, pagination, animation with touch support.
http://brice.lechatellier.com/code-design/wmuslider/

11) PhotoSwipe
It’s Javascript gallery specially for mobile and touch devices as well as for desktop version.
http://photoswipe.com/

12) Flexslider
It’s a fully responsive slider plugin with slide and flade animation, is supported by major browser.
http://www.woothemes.com/flexslider/

13) Responsive jQuery Slideshow
Fluid jQuery slideshow which scales responsively.
http://blog.kiskolabs.com/post/5602656614/responsive-jquery-slideshow

14) Seamless Responsive Photo Grid
https://css-tricks.com/examples/SeamlessResponsivePhotoGrid/

15) Responsive Image gallery with Thumbnail Carousel
It will create a responsive image gallery with thumbnail carousel using elastislide. You can navigate by keyboard also.
http://tympanus.net/Tutorials/ResponsiveImageGallery/

16) rlightbox
rlightbox is a jquery UI mediabox by which you can display many types of contents like images, video. It ‘s provide a features like Panorama and Live Re-size.
http://ryrych.github.io/rlightbox2/

17) AdaptiveMedia
You can create multiple images as per different scren sizes because desktop version images will takes time in mobile version.
http://www.yusufakyol.com/adaptivemedia/bordered.html

18) Dynamic Carousel
It’s carousel plugin for responsive layouts.
https://github.com/Wilto/Dynamic-Carousel/

19) FitVids.js
It’s easy to use jquery plugin for responsive width video embed.
http://fitvidsjs.com/

20) Isotope
It’s good plugin for dynamic layout which you can’t achieve with only css. You can hide and show item elements easily with jquery selector and re-order elements with sorting.
http://isotope.metafizzy.co/index.html

21) Heads-Up Grid
It’s an overlay grid for in-browser website development.
http://bohemianalps.com/tools/grid/

22) TinyNav.js
It’s a small plugin which will convert UL and OL navigations to a dropdown box for small screen layouts. It will select the current page and add selected tag for that item.
http://tinynav.viljamis.com/

23) Scrolldeck.js
With help of this plugin, you can create responsive slideslow, any attactive presentation and landing page for your website.
http://johnpolacek.github.io/scrolldeck.js/

24) TouchCarousel
it’s a mobile friendly content scroller with touch navigation. We can also use it as carousel, banner rotator and gallery.
http://dimsemenov.com/plugins/touchcarousel/

25) SwipeJS
It’s a most preferable touch slider with resistant bounds, scroll preventation, resize adjustment.
https://github.com/thebird/swipe

10 Best Javascript Minifying Tools

Harshal Shah — Fri, 10 Jul 2015 09:51:48 +0000

We are using javascript minification in many of the production level website. The enhanced javascript minifying tools help to developer in development tasks as well as in improving coding. It will make your code to shorter by removing unwanted space, unnecessary comments, white space comments and new line comments from source code.
So let’s see most popuar javascript minification tools as under.

1) JSMin

By JSMin, you can remove unnecessary comments and whitespace quickly. It will descrese file size to half size, paving way to rapid downloads.

2) YUI Compressor

It will analyzing your javascript for understanding structure and then print out token stream while ignoring white space characters and also replacing the local symbols by a letter like 1,2,3 and so on. You will gain easy access to a flawless css comprression algorithmas by efficient regular expression for compressing css file.

3) UglifyJS

It’s a brilliant javascript compressor that’s written in javascript. It’s developed in Node.js but it will work on any javascript platform supporting the CommonJS module system.

4) Koala

It’s a GUI application for compilation of SASS, LESS, Compass, and CoffeeScript. It can run on Linux, Windows, and Mac. It has a some main features like multi-lingual support, several complie options, real-time complilation, error notification etc.

5) Prepos

It’s excellent tool for compiling Sass, LESS, Stylus, Compass, Jade etc. using automatic css prefixing. It’s a cross browser compatible and can run on Mac and windows. You can easily minify js files for reducing banthwidth and load time of your site.

6) Ajax Minifier

It’s window application which will minify all javascript files even in nested folder or a single folder. You can minify individual javascript files and enable/disable mutliple analysis options.

7) Smaller

Smaller is a powerful HTML, CSS and Javascript compressor on OS X and ability to merge mutliple files to single one. It will make your website faster.

8) JSCompress

JSCompress is online javascript compressor which compress and minify your javascript by reducing size up to 30-90%. These reduction is achieved by removing comments and unncessary white character from file which are not required in development.

9) Minifier

Minifier is a simple tool for JS/CSS comression without any set up. It reworks URLS from original to output location for CSS and resolves @import statements in CSS.

10) Ultra Minifier

It’s a simple YUI compressor GUI to minify jS and CSS code without using the terminal.

Angular JS

Harshal Shah — Fri, 17 Apr 2015 14:03:09 +0000

Ok, so for a start, google “javascript frontend framework”, yes “Frmework” and NOT the library that is a term that we use when describing or refering to some javascript code serving a specific functional need in frontend, be it sending requests to the servers, dom manipulations and much more. that is not the topic of this article. The term Frameworks (AngularJS to be specific) is the highlight here.

So first of all lets discuss what is a framework (In common not specificx to javascript only). A framework is a structure of classes and code, by using which you can create an application.

Now comming back to javascript frontend frameworks, by googeling the terms mensioned at the very start of this article, you will get the results like AngularJS, Backbone.JS,Ember.JS and comparision between various suct js names, which you may have never heard, but they exist for some time now.

Let us focus on the subject of the article, that us AngularJS developed by a team working in google . The AngularJS is probably the most popular frontend javascript framework as of now, in fact it is a part of MEAN Stack: MongoDB, Express, AngularJS,Node.JS.

The AngularJS is a MVW(Model View Whatever) framework, which is used to create One (Single) Page Applications where, unlike most of the web applications, there are no redirections to go from one page to another, instead, angular js uses different templets rendered dynamically and replaces them with the existing content displayed in a decided area.

A usual AngularJS application comprises of the following parts:

App (Containing all the configurations like templates and controllers declared, dependencies used, etc.)
Controllers
Model (The components that are used for )
Services/Factories i.e. Whatever (You can use them for utilities which caters to a particular business logic of an angular app module)
Views/Partials (The Html files containing the representation of the controller data)

Features of the AngularJS

The AngularJS has some of the promising features that are very useful to make the frontend development a lot more easy. Lets see them one by one

1) Data Binging:
Data Binding in angularJs is auto metic data synchronization of data between the model and view components, when the model changes, the view reflects the change.

2) Tamplates:
The templates are just plain old html,slightly extended to contain the angularJS instructions.

The HTML templates are parsed by the browser in to DOM which becomes the input for the AngularJS compiler. The angularJS traverses the DOM to generate instructions called Directives, responsible for setting up the data-binding for your application-view.

Unline other Javascript Libraries, AngularJS does NOT manipulate the template as a string. The AngularJS uses DOM as an input and not the HTML string

The Greatest advantage of this approach is that it creates a tight workflow between designers and developers. Designers can mark up their HTML as they normally would, and then developers take the baton and hook in functionality, via bindings with very little effort.

3) MVC:
AngularJS incorporates the basic principles behind the original MVC software design pattern into how it builds client-side web applications.

The MVC or Model-View-Controller pattern means a lot of different things to different people. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel) OR MVW (Model View Whatever).

4) Dependency-Injection:
AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.

Dependency Injection (DI) allows you to ask for your dependencies, rather than having to go look for them or make them yourself. Think of it as a way of saying “Hey I need X’, and the DI is responsible for creating and providing it for you.

You can also create and use your custom dependencies also.

5) Directives:
Directives can be used to create custom HTML tags that serve as new, custom widgets. They can also be used to “decorate” elements with behavior and manipulate DOM attributes in interesting ways.

You can also creare your custom directives, which will allow you to perform some tasks without using a single line of jsvascript code

For example: Create a list of data passed to a view by controller.

6) Testing:
AngularJS allows to write the unit tests to test the code. Given the fact that JavaScript is dynamic and interpreted, rather than compiled, it is extremely important for developers to adopt a disciplined mindset for writing tests.

You can write the tests for particulat functionality, that will save you the effort to testing the application or a unit manually.

Conclusion:

We have covered the 6 of the greatest Features and advantages of the angularJS which gives the AngularJs an edge over the other similar jsvascript framework.

In the end, we can use and trust this bacause it has been built by name who knows the internet, clearly, the AngularJS is going to stay with us for a long time.

Impress.js – One Of The Most Fascinating Presentation Tool On The Horizon

Harshal Shah — Tue, 04 Feb 2014 05:49:39 +0000

Are you really get bored with that typical presentations build up in some presentation software and that too purely platform dependent? Do you want something more innovative and cool way to present your idea and that too fully platform independent? Then just look at this, we already have it!

impress.js is one such library which can really help you to prepare absolutely cool and innovative presentation. using just impress.js and css3 properties you can create fantastic presentations which can do nothing but simply IMPRESS the viewers of your presentation.

The basic idea of impress.js is came from prezzy.com, a presentation tool which allows you to create amazing 3D presentations with its dedicated software called ‘Prezzy Desktop’. But its CHARGEABLE, and the and that too with very heavy charges, so developers of impress.js thought why to give this much of financial resources to create just cool presentations, while we have power of JS and CSS3 in our hands? and they created this awesome open source presentation tool to really impress your viewers.

Using impress.js you can make your presentations having flip, rotate, scale, zoom, dive in and out and much more that too in 3D interface. Its CSS friendly even so you can have almost infinite styling options to customise your each and every presentations. Now the most important advantage in today’s scene : impress.js is simply a javascript library that is compatible with CSS3, it means ‘its platform independent’ ! You can view your presentations on any browser which supports javascript and css3 well! Now isn’t it IMPRESSIVE enough?

Further it has quite nice community support on github and much learning resources and samples can be found on various github profiles easily. Even one book to use impress.js is also published which is really very useful to work with impress.js.

Hers are some links to get easy with impress.js :

https://github.com/bartaz/impress.js/
http://www.packtpub.com/building-impressive-presentations-with-impressjs/book – to purchase the tutorial book.
http://www.joezimjs.com/javascript/impressive-presentations-with-impress-js-and-extensions/
https://www.opensesame.com/c/create-impressjs-presentation-10-minutes-training-course
http://www.jspres.com – Online impress.js presentation building tool

Best JS framework for Magento e-commerce store development

Harshal Shah — Mon, 02 Dec 2013 07:44:28 +0000

Out all the JS frameworks that are published till date. Jquery has taken the market by storm. More than likely you’ve heard of jQuery. It’s a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Basically jQuery allows you to add some dynamics to your site. But is jQuery the best JS framework or do we have other challengers waiting to bethrown the king of client side scripts.