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