7 new techniques every web developer should know | CatsWhoCode.

com

Pgina 1 de 14

Home (http://www.catswhocode.com/blog)

Snippets (http://www.catswhocode.com/blog/snippets) Contact (http://www.catswhocode.com/blog/contact) Categories (http://www.catswhocode.com)

About (http://www.catswhocode.com/blog/about) Hire me (http://www.webdevcat.com)

7 new techniques every web developer should know new-techniquesevery-webdeveloper-shouldknow)

Published on September 19th, 2011 by Jean-Baptiste Jung. 21 Comments (http://www.catswhocode.com/blog/7-new-techniques-every-webdeveloper-should-know#comments) -

19400+
RSS READERS

9300+

FOLLOWERS

(http://feeds.feedburner.com/catswhocode) (http://www.twitter.com/catswhocode)

Web developers always have to update their knowledges and learn new technologies if they want to stay tuned with todays coding. Today, Im going to show you 7 recent web development techniques that you should definitely learn, or improve if you already know them.

(http://stats.buysellads.com/click.go? z=1276788&b=3332641&g=&s=&sw=1365&sh=8 solution? utm_campaign=ma_catswhocode.com&experiment_id=ma_catswhoc

CSS3 media queries

With the rise of mobile devices, and on the other hand, of very wide displays, creating a website that looks great in both big and small devices is definitely a challenge for web designers and developers. Happily, the CSS3 specification have a new feature which allow web developers to define styles for a specific display size only. For example, the code below show how to apply a specific style only if the client display is smaller than 767px.

(http://stats.buysellads.com/click.go? (http://stats.buysellads.com/click.go? z=1238342&b=215660 z=1238342&b=128211 utm_source=BuySellAds&utm_medium=Ban 4Blue)

(http://stats.buysellads.com/click.go? (http://stats.buysellads.com/click.go? z=1238342&b=224065 z=1238342&b=330569 utm_source=CatsWhoC ref=9298)

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 2 de 14

@mediascreenand(maxwidth:767px){ #container{ width:320px; } headerh1#logoa{ width:320px; height:44px; background:url(imagesmall.jpg)n orepeat00; } }

(http://stats.buysellads.com/click.go? (http://stats.buysellads.com/click.go? z=1238342&b=291287 z=1238342&b=336134 code.com/? utm_source=catswhocode.com&utm_medium p2h) utm_source=Cats% 2BWho% 2BCode&utm_medium=banner_bsa&utm_campaign=generic)

More info: Create an adaptable website layout with CSS3 media queries (http://www.catswhocode.com/blog/create-an-adaptablewebsite-layout-with-css3-media-queries)

(http://stats.buysellads.com/click.go? z=1238342&b=599358 ref=bsa)

Font resizing with REMs

CSS3 introduces a few new units, including the rem unit, which stands for root em. If this hasnt put you to sleep yet, then lets look at how rem works. The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the rootor the htmlelement. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

(http://stats.buysellads.com/click.go? z=1238342&b=160039 utm_source=catswhocode&utm_medium=buysellbanners&utm_cam people)

Like CWC on Facebook!

Cats Who Code

html{fontsize:62.5%;} body{fontsize:1.4rem;}/*=14px*/ h1{fontsize:2.4rem;}/*=24px*/

Me gusta

A 2.642 personas les gusta Cats Who Code.

More info: Font resizing with REMs (http://snook.ca/archives/html_and_css/font-size-withrem)

Cache pages for offline usage

HTML5 introduces a great feature, offline caching. Basically, this feature allows you to tell the client browser to cache some pages so your visitor will be able to view it again, even if hes not connected to the Internet. Caching pages is pretty easy. The first thing to do is to add the following to your site .htaccess file:

Plug-in social de Facebook

Latest posts
Hacks and snippets to enhance WordPress search engine (http://www.catswhocode.com/blog/hacks-andsnippets-to-enhance-wordpress-search-engine)

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 3 de 14

AddTypetext/cachemanifest.manifest

Once done, you can create a file named, for example, offline.manifest , with the following directives:

CACHEMANIFEST CACHE index.html style.css image.jpg

Cross browser compatible HTML5 videos (http://www.catswhocode.com/blog/crossbrowser-compatible-html5-videos) Super useful jQuery plugins for responsive web design (http://www.catswhocode.com/blog/superuseful-jquery-plugins-for-responsive-webdesign) Ultimate list of WordPress resources (http://www.catswhocode.com/blog/ultimate-listof-wordpress-resources) HTML5 code snippets to take your website to the next level (http://www.catswhocode.com/blog/html5-codesnippets-to-take-your-website-to-the-next-level)

And finally, link your .manifest file to your html document:

Advertise Here
<htmlmanifest="/offline.manifest">

Thats all, and your page will now be cached if the client browser supports this technology. More info: How to create offline HTML5 web apps in 5 easy steps (http://www.catswhocode.com/blog/how-tocreate-offline-html5-web-apps-in-5-easy-steps)

(http://stats.buysellads.com/click.go? z=1239978&b=245330

WP theme of the week

Server-side JavaScript
Since the mid-90s, JavaScript has been a very popular client-side language for web developers. But nowadays, JavaScript is becoming more and more used on the server side. Why? Because now we have powerful server-side JavaScript environments such as Jaxer (http://www.jaxer.org/), Node.js (http://nodejs.org/) and Narwhal (http://narwhaljs.org/). The code belows demonstrate how to create a simple Hello World using Node.js.
CatsWhoCode.com is hosted by VidaHost. Use our exclusive coupon CATSWHOCODE to get a 10% discount on hosting! (http://is.gd/vidahostcwc)

(http://t.co/BXJBDql49k) Lotus (http://t.co/BXJBDql49k)

varsys=require("sys"); sys.puts("HelloWorld!");

Search
More info: Learning Server-Side JavaScript with Node.js (http://net.tutsplus.com/tutorials/javascript-ajax/learningserverside-javascript-with-node-js/)

HTML5 drag & drop

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 4 de 14

Thanks to new technologies such as HTML5, the web is becoming more and more user-friendly. Now, it is possible to easily implement drag and drop on your web pages. This is very useful, for example for a shopping basket. In order to make an element draggable, you simply have to add it the draggable="true" attribute, as shown in the example below:

(http://feeds.feedburner.com/catswhocodesnippets) Latest snippets (http://www.catswhocode.com/blog)

Bookmark (aka: Link) Shortcode (http://feedproxy.google.com/~r/catswhocodesnippets/~3/ECGVV6hZtjc/bookmark-aka-linkshortcode) Square Search Boxes in WebKit (http://feedproxy.google.com/~r/catswhocodesnippets/~3/oJjz_NonBAw/square-search-boxesin-webkit) Base64 Encode of a 1*1px spacer gif (http://feedproxy.google.com/~r/catswhocodesnippets/~3/ba1mBtheK1g/base64-encode-of-a11px-spacer-gif) Stitched elements in CSS3 (http://feedproxy.google.com/~r/catswhocodesnippets/~3/Qq0CeCZ0v-c/stitched-elements-incss3) Restrict wp-admin access to certain users (http://feedproxy.google.com/~r/catswhocodesnippets/~3/lGLfAuPXGts/restrict-wp-adminaccess-to-certain-users) Multi-Line JavaScript Strings (http://feedproxy.google.com/~r/catswhocodesnippets/~3/LRgbf852ScA/multi-line-javascriptstrings) Webkit/CSS3 reflection (http://feedproxy.google.com/~r/catswhocodesnippets/~3/73ZeDsrgpp8/webkitcss3-reflection) Calculate the Distance Between Two Points in PHP (http://feedproxy.google.com/~r/catswhocodesnippets/~3/z6OduVVoWrA/calculate-thedistance-between-two-points-in-php) Image resizing using jQuery (http://feedproxy.google.com/~r/catswhocodesnippets/~3/Smkq9OEAf0Y/image-resizingusing-jquery) Pure CSS tooltip (http://feedproxy.google.com/~r/catswhocodesnippets/~3/UXat5eMdic0/pure-css-tooltip)

<divid="columns"> <divclass="column"draggable="true"><header>A< /header></div> <divclass="column"draggable="true"><header>B< /header></div> <divclass="column"draggable="true"><header>C< /header></div> </div>

Of course, after you made an element draggable, you have to use some JavaScript to control what it should do. Im not going to explain how to do it (This may be a full article!) so you definitely have a look there (http://www.html5rocks.com/en/tutorials/dnd/basics/) if youre interested in the topic. Quick tip: If you want to prevent the text contents of draggable elements from being selectable, simply apply the following CSS rules:

[draggable]{ mozuserselect:none; khtmluserselect:none; webkituserselect:none; userselect:none; }

More info: Cross Browser HTML5 Drag and Drop (http://www.useragentman.com/blog/2010/01/10/crossbrowser-html5-drag-and-drop/)

Forms, the HTML5 way

The HTML5 specification introduces lots of new features regarding one of the most important element of a website: forms. For example, it is now possible to add date pickers, numeric spinners, as well as validating emails using regular expressions patterns. The following code is pretty self-explanatory and shows most of the new forms-specific features introduced in the HTML5 specification.

Blogroll
cheap bridesmaid dresses (http://www.dressfirst.com/Bridesmaid-Dresses-c7/) Custom Logo Design (http://www.logobee.com/) Custom Logo Design Services (http://www.LogoDesignGeek.com) festklnningar (http://www.amormoda.se/Festklanningarc20/) For Custom InfoGraphic Design Services Click Here (http://www.InfoGraphicDesignTeam.com)

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 5 de 14

<form> <labelfor="rangeslider">Slider</label> <inputtype="range"name="rangeslider"i d="rangeslider"class="slider"min="0"max="20" step="1"value="0"> <labelfor="numericspinner">Numericspin ner</label> <inputtype="number"name="numericspinne r"id="numericspinner"value="2"> <labelfor="datepicker">Datepicker</lab el> <inputtype="date"name="datepicker"id= "datepicker"value="20101006"> <labelfor="colorpicker">Colorpicker</l abel> <inputtype="color"name="colorpicker"i d="colorpicker"value="ff0000"> <labelfor="textfield">Textfieldwithp laceholder</label> <inputtype="text"name="textfield"id=" textfield"placeholder="Insertyourtexthere"> <labelfor="urlfield">Urlfield</label> <inputtype="url"id="urlfield"name="ur lfield"placeholder="http://net.tutsplus.com/"r equired> <labelfor="emailfield">Emailfield</lab el> <inputtype="email"id="emailfield"name ="emailfield"placeholder="contact@ghinda.net"r equired> <buttontype="submit"class="uibuttonui widgetuistatedefaultuicorneralluibutton textonly"role="button"ariadisabled="false"> <spanclass="uibuttontext">Submitform< /span> </button> </form>

Free Website Templates by Wix (http://www.wix.com/website/templates) Logo Design Service (http://www.LogoNerds.com) prom dresses (http://www.jjshouse.com/Prom-Dresses-c18/) Rencontre Vgtarien (http://vegan-rencontres.fr/) robe de demoiselle d Honneur (http://www.jennyjoseph.com/fr/Robe-De-Demoiselle-DHonneur-c7/) Stock Photos (http://www.123rf.com) Visiter le Qubec (http://www.visiter-le-quebec.com/) Visiter New York (http://www.visiter-newyork.com) Web Hosting (http://www.inmotionhosting.com)

More info: How to Build Cross-Browser HTML5 Forms (http://net.tutsplus.com/tutorials/html-csstechniques/how-to-build-cross-browser-html5-forms/)

CSS animations
Most modern browsers are now supporting CSS animations. Yes, CSS are now allowing you to create some simple animations, without the help of a client-side programming language such as JavaScript.

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 6 de 14

The following example shows how to make a background color change. As you can see, we have (for now) to use some proprietary properties such as -moz-keyframes .

#logo { margin: 15px 15px 0 15px; background: red; float: left; /* Firefox 4+ */ -moz-animation-name: colour-change; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-duration: 30s; /* Webkit */ -webkit-animation-name: colour-change; -webkit-animation-timing-function: linear ; -webkit-animation-iteration-count: infini te; -webkit-animation-duration: 30s; } @-moz-keyframes colour-change { 0% { background: red; } 33% { background: green; } 66% { background: blue; } } @-webkit-keyframes colour-change { 0% { background: red; } 33% { background: green; } 66% { background: blue; } }

More info: Enhance Your Sites with CSS3 Animations (http://www.onextrapixel.com/2011/08/31/enhance-yoursites-with-css3-animations/)

More posts about Web development

Best of CatsWhoCode (2008 2012) (http://www.catswhocode.com/blog/best-ofcatswhocode)

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 7 de 14

Awesome web tools to simplify front-end development (http://www.catswhocode.com/blog/awesome-web-tools-to-simplify-front-enddevelopment) Making a website responsive in 3 easy steps (http://www.catswhocode.com/blog/making-a-website-responsive-in-3-easysteps) Practical tips to save bandwidth and reduce server load (http://www.catswhocode.com/blog/practical-tips-to-save-bandwidth-and-reduceserver-load) Tips and best practices to develop responsive websites (http://www.catswhocode.com/blog/tips-and-best-practices-to-developresponsible-websites) Super useful online tools to work with images (http://www.catswhocode.com/blog/super-useful-online-tools-to-work-withimages)

Share this article

Tweet 800 135
Me gusta

15 0

(http://stats.buysellads.com/click.go? z=1244474&b=3297915&g=&s=&sw=1365&sh=800&br=msie,10,win&r=0.980344447137643&link=http://tokokoo.com/member r=5)

Comments (21) - Leave yours (#replytitle)

Step (http://www.stepquick.net) said: September 19, 2011 at 10:38 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-498125) Thanks for the tips, Ive actually been wanting to try out more features of html5. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=498125#respond)

Stanley Parrish (http://www.stanleyparrish.com) said: September 19, 2011 at 12:36 pm

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 8 de 14

(http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-498194) Thanks for the tips. I hope to dive into Html5 and CSS3 soon! Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=498194#respond)

David Hancock (http://davgothic.com) said: September 19, 2011 at 12:44 pm (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-498202) Thanks for the post, I hadnt heard of the REM unit so thanks for enlightening me. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=498202#respond)

Abdulhakim Haliru (http://www.leproghrammeen.com) said: September 19, 2011 at 3:24 pm (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-498330) Thanks for this. i think the caching page tip will come in very handy. Cheers.

Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=498330#respond)

D.Eg. said: September 19, 2011 at 3:52 pm (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-498346) Been using css animations and transitions for while now, cant get enough of it makes the web sooo much prettier! Cant belive I have to use rems now oh well. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=498346#respond)

Doug said: September 19, 2011 at 4:12 pm (http://www.catswhocode.com/blog/7-new-

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 9 de 14

techniques-every-web-developer-shouldknow#comment-498366) I wonder why it is colour-change and not color-change Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=498366#respond)

l2aelba (http://l2aelba.com/) said: September 20, 2011 at 6:49 am (http://www.catswhocode.com/blog/7new-techniques-every-webdeveloper-shouldknow#comment-499104) He is from UK, maybe ? Reply (/blog/7-new-techniquesevery-web-developer-shouldknow? replytocom=499104#respond)

Jan (http://www.janskovgaard.dk) said: September 21, 2011 at 1:48 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-499924) Nice post had not heard about the REM unit before. Sounds very nice Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=499924#respond)

Jasmine (http://www.100webhosting.com) said: September 22, 2011 at 5:00 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-501143) Great web development techniques. I like the caching thingy, since it will surely make pages load much quicker! Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=501143#respond)

Abe (http://webcreationtips.com/) said: September 22, 2011 at 12:21 pm (http://www.catswhocode.com/blog/7-new-

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 10 de 14

techniques-every-web-developer-shouldknow#comment-501398) Good post. Thanks for sharing these tips. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=501398#respond)

Greg (http://gregpettit.ca) said: September 26, 2011 at 1:06 pm (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-504943) Did not know about rems either! Im used to working with ems now, but rems are a great solution for people who are more accustomed to working in px. The switch will make a lot more sense to them. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=504943#respond)

Marty (http://www.broadbandspeed.co.uk) said: September 28, 2011 at 11:47 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-506778) Nice tips, thanks! Google have used CSS animations on their homepage on occasion. Downside is it can increase CPU load. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=506778#respond)

Ryan Carson (http://www.refreshcreations.co.uk/) said: October 7, 2011 at 9:46 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-513714) So, are these IE8 compatible then? Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=513714#respond)

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 11 de 14

Jamie Murphy (http://www.webdeveloperblog.co.uk) said: November 11, 2011 at 3:42 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-552580) All of these new features are great but I would like to know what kind of browser adoption they have before I start using them for my probjects? Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=552580#respond)

Mike (http://mikeavello.com) said: November 21, 2011 at 11:39 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-569018) Some nice snippets here. I will need to check some of them out and make use of the ideas where applicable. As for the equal columns. I made a plugin that does this that also accept a few options if you want to check out: https://github.com/mikeadesign/matchHeights I am open to any suggestions for improvements. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=569018#respond)

Federico Bucchi (http://www.federicobucchi.com) said: November 21, 2011 at 7:21 pm (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-569659) Good snips.. I did know some of it but there are you that I didnt know.. Now Im trying if it works on all browsers. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=569659#respond)

Terry (http://www.bostonwebsitecompany.info/) said: November 21, 2011 at 8:51 pm (http://www.catswhocode.com/blog/7-new-

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 12 de 14

techniques-every-web-developer-shouldknow#comment-569748) Looking forward to learning more about HTML5. Great info. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=569748#respond)

Jack Sam White (http://outsource.techndu.com/) said: January 16, 2012 at 11:39 pm (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-661612) Although the entire post is really useful for any web designer, but I just liked the last point: CSS Animation. I dont know before about it and now I am ready to do some experiment by applying suggested method. Thanks for this wonderful post. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=661612#respond)

NetDesignPlus (http://www.netdesignplus.net) said: May 18, 2012 at 3:54 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-795649) While HTML5 is a very promising technology, it still seems that it will take some time for the final standard version to be released and, after, to be followed by browser support. One of the most common mistakes in nowadays websites is when developers run after HTML5 without paying attention to proper fallback support if the browser visiting the page is not HTML5 ready yet. I believe this is an important technique that every web developer should know as well. It does not only apply to HTML5 though, but to any technology that is not completely controlled by the developer. Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=795649#respond)

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 13 de 14

dave (http://www.converthtmltowordpress.co.uk) said: January 16, 2013 at 7:21 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-1121345) Definitely need to start reading up on HTML 5 very soon! Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=1121345#respond)

John (http://www.jsmanandvansurrey.co.uk) said: March 19, 2013 at 2:23 am (http://www.catswhocode.com/blog/7-newtechniques-every-web-developer-shouldknow#comment-1191402) Yes would be very interested to see how this all fits in with IE when designing any news on this ? Reply (/blog/7-new-techniques-every-webdeveloper-should-know? replytocom=1191402#respond)

Leave a Reply
Your email address will not be published. Required fields are marked * Name *

Email *

Website

Comment

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013

7 new techniques every web developer should know | CatsWhoCode.com

Pgina 14 de 14

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!

2008 - 2013 CatsWhoCode.com (http://www.catswhocode.com) (http://feeds2.feedburner.com/Catswhocode)

http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know

20/04/2013