Completely Customise your select box

Link here.

Css3 box-shadow explained in quite simple straight forward way.

Link here.

A javascript library for multi-touch gestures

Link here.

Want to track user's head/face movements from the browser through their camera?

Link here.

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.

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.

Ways to customise html5 form validation options

Link here.

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.

Quick tips on making resposive menus

Link here.

Bored of twitter bootstrap and/or want metro style buttons and icons?

Link here.

A jquery plugin to call css files according to the window screen

Link here.

Customising form with cool elements and themes

Link here

Multiple file uploads with progress bars using jquery

Link here.

Amazing tool to sort css according to functionality

Link here.

Online encrypt, split, merge a pdf .. And a lot more options..

Link here.

Range slider jquery plugin

Link here.

Impressive table of contents picker!

Link here.

Looking for an opensource framework that works the same on mobile and desktop?

Enyo is your answer!

A jquery plugin to help choosing passwords

Link here.

More controls for bootstrap using FuelUx

Link here.

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="http://www.examplesite.com/page2">

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.

PHP error and debugging reporting tool

Link here.

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: https://docs.google.com/open?id=0B_Wl8Po_snF3NEFqWVRNNGJWWTg

Insert vendor-specific css3 prefixes using jquery

Link here.

A flyout image slider using jquery, css3

Link here.

Making fitvids, media-element.js or sublime flexible using a little bit of css

Link here.

Tricks to optimise web fonts performance.

Link here.

Starting with windows 8 apps using html5

Link here.
Nice resource to kick start with windows 8 metro apps using html5! 

Making a flipbook using jquery

Link here.

All about being responsive !

Link here.

Shaky font using css

Link here.

Using CSS3 transitions

Link here.

Using $.deferred , $.when() and $.pipe() for making events snychronous or asynchronous

Link here.

Cool image visualisation jquery plugin

Link here.

Different image transformations in one plugin

Link here.

Jquery to know if user's browser can display high-res images and/or has the bandwidth that fast to show those images.

Link here.

Various solutions for rendering good images on different dpi screens.

Link here.

Free font icons

You get to choose the icon fonts that you want for your website for free ! Link here and here.

Super hover effects on a circle.

Link here.

Making light sensitive designs using css

Link here.

Tutorial to understand node.js step by step.

Link here.

Hover from any side of an element

Link here of a small jsfiddle code to show the demo too.

Make lasers using css

Link here.

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.

Building and testing a backbone app

Link here.

Fundamental Javascript tutorials

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

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.

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!

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

Xlune

Wookmark

Masonry

Freetile

Making tables responsive!

Link here.
This roundup by Chris Coyier has some amazing responsive tables.

Understanding flexbox !

Link here.

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!

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

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

Awesome range slider

Link here.
This slider works perfectly on all browsers ! 

Android DP( Density Independent Pixel) to PX (Pixel) converter

Link here.

Nested sortable lists using jquery

Link here.
Create easy to use sortable lists using jquery. The inputs can be given as array or json.

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.

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 !

Design patterns in javascript

Link here.

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

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.

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!

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.

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.

Sort your tables using jquery

Link here.

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 !

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. :)

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.

A look at angularJS by google

Link here.

Here's a look at what the new angularJS has to offer !

It's cool ! 

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.

Amaazing 3d effects on hover with photos

Link here.
These demos are soo cool !

Triangles/arrows using css

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

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 ? :)

Shortify your js !

Link here.

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

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.

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.

Analytics

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

Keep css selectors short.

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

A cool list of all types of websites concentrating on design !

Link here.

A timer using css3

Link here.
A stop watch timer only using css3 animations. No js at all !
I think this is nice !

A fun piano using jquery !

Link here.

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.

Monitor Jquery code

Link ere.

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

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.

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.

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.

Modern Web Development

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

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.

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 ? 

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.

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.

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.

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.

9 things to take care of, while writing jquery !

Link here.

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

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.

Cool css webkit animations !

Link here.
Try them out on jsfiddle !

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 my-domain.com/new-url (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.

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.

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. 

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 ->

1)

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 }
</style>
...
<div id="myoutercontainer">
 <div id="myinnercontainer">
  <p>Hey look! I'm vertically centered!</p>
  <p>How sweet is this?!</p>
 </div>
</div>

2)

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 }
</style>
...
<p id="myoutercontainer2">
 Hey, this is vertically centered. Yay!
</p>

Text shadows

Link here


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

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 html5please.us/#box-sizing (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