Thursday, December 27, 2012

Make your website talk globally to the user

Globalize the content of the website according to from where a user is coming from.
Simple example, someone from india would want to see the date on the site as dd/mm/yyyy
and someone from the USA would want to see the date mm/dd/yyyy.
Link here.

Knowing flexbox

Link here.

Plugin to skew elements' shapes

Link here.

Jquery plugin to do things on scroll event

Link here.

Wednesday, December 26, 2012

Easy cross platform scrolling effects for touch devices

Link here for a slide presentation.
Superscrollorama provides super animations when we scroll.
Stellar.js provides cool parallax effects while scrolling.
iScroll and Zyanga scroller simply makes scrolling smooth on all touch devices.

Sunday, December 16, 2012

Nice :nth element tester by Chris Coyier

A nice interface to check out which nth element will be affected when we apply the :nth pseudo selector on it.
Link here.

Thursday, November 1, 2012

Prefetch a link using html5

If you know, where a user might navigate to from your current page, prefetching the page is a good idea.
This has been made really easy by html5 by using the prefetch attribute.

For eg -

<link rel="prefetch" href="">

Here, the user might be on page 1 of the site and with the help of html5, we can prefetch page 2 before the user even navigates to it making the page load faster.
Smart and simple.

Thursday, October 18, 2012

unmask anything !

Unmask series of websites are really helpful when it comes to developers who would like to see the website source code, analyze header, to check if a site is up or down and by various other means.
If you would like to check custom iframes, objects and strings you could use their corresponding unmask sites. 
If you would like to get into security as well, the various websites created by DigitOnto LLC is really useful. 

EvilFingers community pages (created in 2006) are really resourceful for analysis and engineering as well. Please do give me your comments on the same.

To download the bookmarks, click here:

Sunday, September 23, 2012

Saving and accessing javascript values in json even after a page refresh !

Link here.

Yes, now it's possible to access small json key-values in javascript even after a page is refreshed using Lawnchair api.

Thursday, September 13, 2012

Fundamental Javascript tutorials

Link here.
New to javascript? Here are a series of tutorials for absolute beginners

Saturday, September 8, 2012

Nice cassette player style audio player

Link here.
Fun part is the cassette has 2 sides A and B and can be rewinded and forwarded.
Doesn't work in IE on versions less than 10.

Thursday, September 6, 2012

Amazing graphs using rickshaw javascript plugin

Link here.
It provides a set of functionalities to display a graph.
But whatever it does, does it awesomely.
Oh, doesn't work on IE8 currently though.

Jquery plugins for highly configurable grid contents!

An awesome jquery plugin to make a dynamically configurable grid layout.
It works in IE8+ and doesn't disappoint at all.




Thursday, August 30, 2012

Load images when they come in user's viewport

Link here.
This jquery plugin only loads the images when they come in the user's viewport.

Twitter bootstrap usage

Link here and here.
A nice article which shows how to use twitter bootstrap to make awesome apps!

Tuesday, August 28, 2012

About javascript frameworks - which, where and when to use!

Link here.
All about which javascript framework to choose when designing a web application.

Monday, August 27, 2012

Awesome range slider

Link here.
This slider works perfectly on all browsers ! 

Saturday, August 25, 2012

Phalcon, a faster PHP framework

Link here.
 - It's delivered as a C extension
 - can handle more requests per second.
 - takes way lesser time per request than other frameworks.
 - has to interpret lesser files per request.
 - has to allocate lesser memory for each request.

Wednesday, August 22, 2012

A pie progress bar in favicons

Link here.
Ever wanted a progress shown as a pie chart where favicon has to be ?
It's a simple javascript library you have to add to make it work !
This makes loading time responsive !

Monday, August 20, 2012

Design patterns in javascript

Link here.

A really nice tutorial if you are looking to design your website using javascript.

Tuesday, August 7, 2012

A pre launch website theme

Link here.
Here's a wordpress theme that you can connect to users even before the launch of your website.

Monday, August 6, 2012

Color Palettes

Link here.

Want to find out all the colors used by a website ?
Well just enter its url and get all the possible colors used in the design.
So cool, right!

Tuesday, July 31, 2012

Awesome charting javascript library

Link here.
This javascript library helps to create cool charts like pie charts, bar graphs, data tables etc. The coolest thing is that they can be changed dynamically and information related to only selected values can be seen easily.

Wednesday, July 25, 2012

Amazing background patterns using css

Link here.

Create awesome background patterns using only css and no images.
Best part? Works on ALL browsers.
You'll have to see it to believe it.

Monday, July 16, 2012

Wireframing online

Link here.

Want to wireframe your website online and save it as a pdf or an image ?
Here, is a clean interface to try all that.
Has mostly all the tools needed to start wireframing your website !

Thursday, July 12, 2012

Play with text

Link here.
Put really cool transition effects on the each and every letter of the text.

Link here.
This javascript makes the text appear how flight schedules change on the airport.
And so is named, airport.

Link here.
Make the text curvy!

Link here.
This one is like the text font gradient. Change font size from one end of the line to the other.

Charts on mobile anyone?

Link here.

If you're looking for simple bar-pie-plot graphs for mobile, take a look at it. Comment if you find anything better. I'' be glad to know. :)

Saturday, July 7, 2012

QuoJs - for mobile web development.

Link here.

Working on mobile projects ?
Well you should take a look at this small javascript library.
It even provides a good set of functions for touch events and finger gestures.
Multi tap features will also be added soon.

Wednesday, July 4, 2012

A look at angularJS by google

Link here.
Here's a look at what the new angularJS has to offer !
It's cool ! 

Saturday, June 30, 2012

Get all files in a single response! ( quickConcat )

Link here.

This is a dynamic concatenator written in php for all the html, css and javascript files with just a single call and a single response. All you got to do is make a query for all files with their names separated by comma.  Find it cool? Visit the above link.

Monday, June 25, 2012

Triangles/arrows using css

Link here.
The css triangles that work on any and every browser.

Wednesday, June 20, 2012

Monitor javascript bugs at one place

Link here.
This is cool !
Allows to monitor all the javascript bugs occurring in different modern browsers at one place.

A javascript for Google-maps !

Link here.
Google has come out with gmaps.js to simplify viewing google maps on a website.
Anybody looking to make a geographical social network ? :)

Tuesday, June 19, 2012

Shortify your js !

Link here.

10 simple but nice techniques to make your javascript code shorter !

Wednesday, June 13, 2012

A few css selectors

Link here.

Here are a few css selectors that are so cool !
Like  `+` , `~` , `>` , `:before` , `:after` etc.
The article shows how they can be used to make web designing easier and better.

Tuesday, June 12, 2012

Compile your compass code online !

Link here.
You can put in your compass code and just check what it actually compiles too.
Simple n neat.

IE ! don't misbehave

Link here.
A javascript that makes IE behave as other browsers.


Link here.
With all the analytics services around, this one is quite well designed with a neat ui.
Oh yea, it's free too.

Monday, June 11, 2012

Keep css selectors short.

Link here.
A few tips on keeping the css selectors short.
And how it helps by keeping them short.

Wednesday, June 6, 2012

Tutorial on ember.js

Link here.
A beginner's tutorial to start off with Ember.js which helps to create a MVC architecture.
It requires just one other library. That's jquery.

Update : 8th November 2013
Smashing magazine has an awesome tutorial on emberjs -
Link here.

Saturday, June 2, 2012

Monitor Jquery code

Link ere.
This helpd to add a script to monitor the performance of  the existing javascript code.

Thursday, May 31, 2012

Page layout like reading a book!

Link here.
This cool flipping page layout is inspired from flipboard.
It does not break in browsers that do not support it but just gives a simpler layout.
The even more cooler thing is that, it works on any size window. So, is compatible on
smart phone and tablet screens too.

A collection of 100 new fonts

Link here.

A great collection of amazing css3 and jquery effects

Link here.
I just watched each and every transition and animation that has been put into
the collection of effects in awe.

Wednesday, May 30, 2012

API to go fullscreen !

Link  here.
A simple api using jquery to make images, videos and other content go full screen when clicked on.
The first line says its a cross-browser api. Doesn't work on IE and opera though.
Hoping that they'll fix it soon.

Tuesday, May 29, 2012

Using zip codes for address

Link here.

Doesn't it get a little irritating to add your address every time you do anything that is location based, example when giving address when shopping online for something. This code snippet with the help of ajax and jquery finds out the city and state just by entering the zip code.
Works only in the US right now though.

Monday, May 14, 2012

Modern Web Development

Link here.
All about the modern web development and debugging using Chrome Canary !

Friday, May 11, 2012

A JavaScript library to zip and unzip files

Link here. Compatibility : The most important ! ->

Currently this library works fully only with Chrome and Internet Explorer 10.
With Firefox you must use a DataView polyfill (e.g. DataView.js from David Flanagan). With Safari and IE9, you must disable Web Workers and use a Typed Array polyfill.

Wednesday, May 9, 2012

Interesting diagram/schema editing and sharing online

Link here.
If you're tired of sending schema, flow diagrams etc back and forth in the form of images, this tool is just for you.
It helps to create those diagrams online. Save them as an xml file. Send it. And the reciever can edit the same.
Easy, isn't it ? 

Monday, May 7, 2012

A book about website speed optimisations

Link here.

A last few chapters are still yet to be completed when I'm writing this post. I'm eagerly waiting for them to be over n i can read them.
But it's worth a read !
a whole insight on how to improve website performance/speed.

Sunday, April 29, 2012

APP development using pure html !

Link here.
Maybe this is not new.
But for me, this was the new awesomeness.
I can simply create chrome - firefox web pages, apps for android and ios etc..
All by simply using HTML5 !
Tried it on my android by creating a dummy app.
And a dummy extension on chrome.
And its all working !

Autocomplete using js

Link here.

Simple autocompleting text fields using jquery.

Adaptive css using js

Link here.
To load adaptive css according to the screen width and height, a helpful js tool can be tried.

Wednesday, April 25, 2012

Lint - online tool

Superb tool to improve, modify js and css !
Helps to correct errors, improve performance and make the code better.
Link here for js.
Link here for cs.

Monday, April 23, 2012

Pure genius this guy is !

Link here.
Click anywhere on his site and all you find is complete js/css awesomeness.
My current favorite is this little game

Scrolling awesomeness using scroll.js

Link here.
Nice scroll effects using scroll.js and css 3D.

Sunday, April 22, 2012

9 things to take care of, while writing jquery !

Link here.

Simple, but important things to remember when coding in jquery.

Friday, April 20, 2012

10 CSS3 secrets.

Link here.
Cool things we can do in css 3 !
i'll let you help yourself to find out how the slides even work :)
oh, but almost nothing in these 10 work in the earlier versions of IE 10.

Wednesday, April 18, 2012

Change url without reloading the page !

Link here.
Yes, it's possible now in all the browsers to change the url of a page with html5 using javascript without using hash-hack except earlier versions of IE 10.
 To do this, add the line
 window.history.replaceState("object or string", "Title", "/another-new-url");

Executing this line of code will change the URL to (3rd option). The "Title" string (2nd option) is intended to describe the new state, and will not change the title of the document as one might otherwise expect. The W3 documentation states: "Titles associated with session history entries need not have any relation with the current title of the Document. The title of a session history entry is intended to explain the state of the document at that point, so that the user can navigate the document’s history." So if you want the document’s title to change to match the title of the history entry, you’ll need to write a hook for that (hint: just tie a function to the onpopstate event). Finally, "object or string" (1st option) is a way to pass an object to the state which you can then use to manipulate the page. Check out the link above if you want to even control the invocation of the back and forward functions.

Tuesday, April 17, 2012

Bits and pieces about HTML 5 FORMS !

Link here.
A look into the browser support for different new html5 forms by wufoo.

Link here.
Modernizr helps to check which css3 features are available in the current User Agent easily. 
Even, a specialized and minified js can be generated here which checks for only those features that we want.
This helps a lot in front end designing front ends on different browsers.

Link here.
Webforms2 is a script to implement cross browser html 5 forms. Even for old browsers like IE6-7, Safari 3, Mozilla 1 etc.

Link here.
To dive into html 5 input types ! and form validation types ! I love the way, the author has explained small simple changes that can be done for html5 upgradation. 

Link here and here.
Pretty interesting html5 form validation techniques. Also features a script that runs fallback functions for browsers not supporting html5. But, the posts are 2 year old. So a lot of changes would have taken place since then. Still, is a good read.

Link here.
A javascript library for non supporting html5 browsers at github basically for forms.

Link here.
To check which input attributes are supported by which browsers on desktops.
Link here.
To check which input attributes are supported by which browsers on mobile.

Sunday, April 15, 2012

Slideshow using impress.js

Link here

Nice slideshow viewer using impress.js (click this first if u don't know the impress.js awesomeness) !
Works in chrome and firefox.
Has a fix for IE 9. 

Wednesday, April 11, 2012

Slider using css

Link here.

Responsive css slider without using javascript.
doesn't work in IE 8 though.

Vertical alignment of element

Link here

2 methods to align a child element inside a parent element ->


The following example makes two (non-trivial) assumptions. If you can meet these assumptions, then this method is for you:

    You can put the content that you want to center inside a block and specify a fixed height for that inner content block.
    It's alright to absolutely-position this content. (Usually fine, since the parent element inside which the content is centered can still be in flow.

If you can accept the above necessities, the solution is:

    Specify the parent container as position:relative or position:absolute.
    Specify a fixed height on the child container.
    Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
    Set margin-top:-yy where yy is half the height of the child container to offset the item up.

An example of this in code:

<style type="text/css">
 #myoutercontainer { position:relative }
 #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
<div id="myoutercontainer">
 <div id="myinnercontainer">
  <p>Hey look! I'm vertically centered!</p>
  <p>How sweet is this?!</p>


This method requires that you be able to satisfy the following conditions:

    You have only a single line of text that you want to center.
    You can specify a fixed-height for the parent element.

If you can accept the above necessities, the solution is:

    Set the line-height of the parent element to the fixed height you want.

An example of this in code:

<style type="text/css">
 #myoutercontainer2 { line-height:4em }
<p id="myoutercontainer2">
 Hey, this is vertically centered. Yay!

Tuesday, April 10, 2012

Text shadows

Link here

Different ways to apply shadow on text.
Also, text as outlines.
All using css.

Monday, April 9, 2012

Innovative scrollbar

Link here

A very innovative scroll bar using jquery.

Even does rotations in supported browsers.

Check usability

Link here

To check if a particular feature in css, jss, html5 etc works in a particular browser version or not.

Ordering with js ( using drag n drop )

Link here
Simple drag and drop ordering.
Does not work in IE 8. 

HTML5 Boilerplate

Link here

HTML5 Boilerplate is a professional front-end template that helps you build fast, robust, adaptable, and future-proof websites. Spend more time developing and less time reinventing the wheel.

Better search engine rankings

Link here

Google knows that users want fast sites. That is why they have started using page size in their search algorithms. If your website downloads fast it will, in time, rank better in search engines. Including bloated code to accommodate older browsers will undermine this.

Border - box

Link here

Works ie8+

* { box-sizing: border-box } FTW One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And 'lo and behold, you now are subtracting pixels from your original width so the box doesn't expand. Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model. Jeff Kaufman also dove into the history Anyway, I have a recommendation for your CSS going forward:


/* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise. Browser support Due to browser support, this recommendation is only for projects that support IE8 and up. (Full browser compat at MDN) Firefox still needs the -moz- prefix, and <= iOS4, Android <= 2.3 need the -webkit-, but everyone else uses the unprefixed. You can find more info about a box-sizing polyfill for IE6 & 7 at (which was developed with * { box-sizing: border-box!). Is it safe to use? Totally. jQuery works pretty great with it (except this). As mentioned, browser support is excellent. And a number of projects use this layout model by default, including the WebKit Web Inspector (aka Chrome DevTools). I heard from Dutch front-end developer Yathura Thorn on his experience: We've been using *{box-sizing: border-box;} in one of my projects (deployed in production, averaging over 1mln visits a month) at work for about a year now, and it seems to be holding up just fine. The project has been tested in IE8 & 9 and the latests Firefox and Chrome versions and we've had no problems. All jQuery (+UI) offset calculations and animations run fine, even in any element we've displayed as inline-block. As of late we've started testing the project on mobile devices (iPhone, iPad and Android) and we've had no issues regarding box-sizing with any of them yet, so it seems to work just fine. One of my favorite use-cases that border-box solves well is columns. I might want to divide up my grid with 50% or 20% columns, but want to add padding via px or em. Without CSS's upcoming calc() this is impossible... unless you use border-box. So easy. :) Another good one is applying 100% width and then wanting to add a padding to that element. Performance Lastly on @miketaylr's inquiry, I also tested perf overhead. Anecdotal evidence suggests border-box isn't significant. You might get up in arms about the universal * selector. Apparently you've heard its slow. Firstly, it's not. It is as fast as h1 as a selector. It can be slow when you specifically use it like .foo > *, so don't do that. Aside from that, you are not allowed to care about the performance of * unless you concatenate all your javascript, have it at the bottom, minify your css and js, gzip all your assets, and losslessly compress all your images. If aren't getting 90+ Page Speed scores, its way too early to be thinking about selector optimization. See also: CSS Selector Performance has changed! (For the better) by Nicole Sullivan. So... enjoy and hope you'll find this a far more natural layout model