7 new techniques every web deve

7/30/2019 7 New Techniques Every Web Deve

http://slidepdf.com/reader/full/7-new-techniques-every-web-deve 1/14

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

About (http://www.catswhocode.com/blog/about)About (http://www.catswhocode.com/blog/about) Contact (http://www.catswhocode.com/blog/contact)Contact (http://www.catswhocode.com/blog/contact) CategoriesCategories

(http://www.catswhocode.com(http://www.catswhocode.com

Hire me (http://www.webdevcat.com)Hire me (http://www.webdevcat.com)

7 new techniquesevery web developershould know

new-techniques-every-web-developer-should-know)Published on September 19th, 2011 by Jean-Baptiste Jung. 21 Comments

(http://www.catswhocode.com/blog/7-new-techniques-every-web-

developer-should-know#comments) -

Web developers always have to update their knowledges

and learn new technologies if they want to stay tuned withtoday’s coding. Today, I’m going to show you 7 recent web

development techniques that you should definitely learn, or

improve if you already know them.

CSS3 media queriesWith 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.

19400+RSS READERS

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

9300+FOLLOWERS

(http://www.twitter.com

(http://stats.buysellz=1238342&b=2156

(http://stats.buysellz=1238342&b=1282utm_source=BuySell

4Blue)

(http://stats.buysellz=1238342&b=2240utm_source=CatsWh


ref=9298)

(http://stats.buysellads.com/click.go?=1276788&b=3332641&g=&s=&sw=1365&sh

solution?

tm_campaign=ma_catswhocode.com&experim

Página 1 de 147 new techniques every web developer should know | CatsWhoCode.com

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



@media screen and (max-width:767px){

#container{

width:320px;

}

header h1#logo a{

width:320px;

height:44px;

background:url(image-small.jpg) n

o-repeat 0 0;

}

}

More info: Create an adaptable website layout with CSS3

media queries

(http://www.catswhocode.com/blog/create-an-adaptable-

website-layout-with-css3-media-queries)

Font resizing with REMsCSS3 introduces a few new units, including the rem unit,

which stands for “root em”. If this hasn’t put you to sleep yet,

then let’s 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 root—or the html—element. 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.

html { font-size: 62.5%; }

body { font-size: 1.4rem; } /* =14px */

h1 { font-size: 2.4rem; } /* =24px */

More info: Font resizing with REMs

(http://snook.ca/archives/html_and_css/font-size-with-

rem)

Cache pages for offline

usageHTML5 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 he’s 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:


code.com/?utm_source=Cats%2BWho%

2BCode&utm_mediu


utm_source=catswhop2h)


ref=bsa)

(http://stats.buysellz=1238342&b=1600utm_source=catswho

people)

Like CWC on Facebook!

ats Who Code

Me gusta

A 2.642 personas les gusta Cats Who Code.

Plug-in social de Facebook

Latest posts

Hacks and snippets to enhance WordPress

search engine

(http://www.catswhocode.com/blog/hacks-and-

snippets-to-enhance-wordpress-search-engine)





AddType text/cache-manifest .manifest

Once done, you can create a file named, for example,

offline.manifest , with the following directives:

CACHE MANIFEST

CACHE

index.html

style.css

image.jpg

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

<html manifest="/offline.manifest">

That’s 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-to-

create-offline-html5-web-apps-in-5-easy-steps)

Server-side JavaScriptSince the mid-90′s, 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.

var sys = require("sys");

sys.puts("Hello World!");

More info: Learning Server-Side JavaScript with Node.js

(http://net.tutsplus.com/tutorials/javascript-ajax/learning-

serverside-javascript-with-node-js/)

HTML5 drag & drop


Advertise Here

Cross browser compatible HTML5 videos

(http://www.catswhocode.com/blog/cross-

browser-compatible-html5-videos)

Super useful jQuery plugins for responsive web

design

(http://www.catswhocode.com/blog/super-

useful-jquery-plugins-for-responsive-web-

design)

Ultimate list of WordPress resources

(http://www.catswhocode.com/blog/ultimate-list-

of-wordpress-resources)

HTML5 code snippets to take your website to

the next level

(http://www.catswhocode.com/blog/html5-code-

snippets-to-take-your-website-to-the-next-level)

WP theme of the week

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

(http://t.co/BXJBDql49k)

CatsWhoCode.com is hosted by VidaHost. Use our

exclusive coupon CATSWHOCODE to get a 10%

discount on hosting! (http://is.gd/vidahostcwc)

Search





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:

<div id="columns">

<div class="column" draggable="true"><header>A<

/header></div>

<div class="column" draggable="true"><header>B<

/header></div>

<div class="column" draggable="true"><header>C<

/header></div>

</div>

Of course, after you made an element draggable, you haveto use some JavaScript to control what it should do. I’m 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

you’re 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] {

-moz-user-select: none;

-khtml-user-select: none;

-webkit-user-select: none;

user-select: none;

}

More info: Cross Browser HTML5 Drag and Drop

(http://www.useragentman.com/blog/2010/01/10/cross-

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

(http://feeds.feedburner.com/cat

snippets) Latest snippets

(http://www.catswhocode.com/bl

Bookmark (aka: Link) Shortcode

(http://feedproxy.google.com/~r/catswhocode-snippets/~3/ECGVV6hZtjc/bookmark-aka-link-

shortcode)

Square Search Boxes in WebKit

(http://feedproxy.google.com/~r/catswhocode-

snippets/~3/oJjz_NonBAw/square-search-boxes-

in-webkit)

Base64 Encode of a 1*1px “spacer” gif


snippets/~3/ba1mBtheK1g/base64-encode-of-a-

11px-spacer-gif)

Stitched elements in CSS3


snippets/~3/Qq0CeCZ0v-c/stitched-elements-in-

css3)

Restrict wp-admin access to certain users


snippets/~3/lGLfAuPXGts/restrict-wp-admin-

access-to-certain-users)

Multi-Line JavaScript Strings


snippets/~3/LRgbf852ScA/multi-line-javascript-

strings)

Webkit/CSS3 reflection


snippets/~3/73ZeDsrgpp8/webkitcss3-reflection)

Calculate the Distance Between Two Points in

PHP


snippets/~3/z6OduVVoWrA/calculate-the-

distance-between-two-points-in-php)

Image resizing using jQuery


snippets/~3/Smkq9OEAf0Y/image-resizing-

using-jquery)

Pure CSS tooltip


snippets/~3/UXat5eMdic0/pure-css-tooltip)

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)

festklänningar (http://www.amormoda.se/Festklanningar-

c20/)

For Custom InfoGraphic Design Services – Click Here

(http://www.InfoGraphicDesignTeam.com)





<form>

<label for="range-slider">Slider</label>

<input type="range" name="range-slider" i

d="range-slider" class="slider" min="0" max="20"

step="1" value="0">

<label for="numeric-spinner">Numeric spin

ner</label>

<input type="number" name="numeric-spinne

r" id="numeric-spinner" value="2">

<label for="date-picker">Date picker</lab

el>

<input type="date" name="date-picker" id=

"date-picker" value="2010-10-06">

<label for="color-picker">Color picker</l

abel>

<input type="color" name="color-picker" i

d="color-picker" value="ff0000">

<label for="text-field">Text field with p

laceholder</label>

<input type="text" name="text-field" id="

text-field" placeholder="Insert your text here">

<label for="url-field">Url field</label>

<input type="url" id="url-field" name="ur

l-field" placeholder="http://net.tutsplus.com/" r

equired>

<label for="email-field">Email field</lab

el>

<input type="email" id="email-field" name

="email-field" placeholder="[email protected]" r

equired>

<button type="submit" class="ui-button ui

-widget ui-state-default ui-corner-all ui-button-

text-only" role="button" aria-disabled="false">

<span class="ui-button-text">Submit form<

/span>

</button>

</form>

More info: How to Build Cross-Browser HTML5 Forms

(http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/)

CSS animationsMost 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.

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 Végétarien (http://vegan-rencontres.fr/)

robe de demoiselle d Honneur

(http://www.jennyjoseph.com/fr/Robe-De-Demoiselle-D-

Honneur-c7/)

Stock Photos (http://www.123rf.com)

Visiter le Québec (http://www.visiter-le-quebec.com/)

Visiter New York (http://www.visiter-newyork.com)

Web Hosting (http://www.inmotionhosting.com)





More posts about Web development

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

catswhocode)

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

sites-with-css3-animations/)





Tweet 800 135

Me gusta

15

0

Awesome web tools to simplify front-end development(http://www.catswhocode.com/blog/awesome-web-tools-to-simplify-front-end-

development)

Making a website responsive in 3 easy steps

(http://www.catswhocode.com/blog/making-a-website-responsive-in-3-easy-

steps)

Practical tips to save bandwidth and reduce server load

(http://www.catswhocode.com/blog/practical-tips-to-save-bandwidth-and-reduce-

server-load)

Tips and best practices to develop responsive websites(http://www.catswhocode.com/blog/tips-and-best-practices-to-develop-

responsible-websites)

Super useful online tools to work with images(http://www.catswhocode.com/blog/super-useful-online-tools-to-work-with-

images)

Share this article

(http://stats.buysellads.com/click.go?z=1244474&b=3297915&g=&s=&sw=1365&sh

r=5)

Comments (21) - Leave yours (#reply-

title)

Reply (/blog/7-new-techniques-every-web-

developer-should-know?

replytocom=498125#respond)

Step (http://www.stepquick.net) said:

September 19, 2011 at 10:38 am

(http://www.catswhocode.com/blog/7-new-

techniques-every-web-developer-should-

know#comment-498125)

Thanks for the tips, I’ve actually been wanting

to try out more features of html5.

Stanley Parrish

(http://www.stanleyparrish.com)said:

September 19, 2011 at 12:36 pm











Thanks for the tips. I hope to dive into Html5

and CSS3 soon!




David Hancock (http://davgothic.com) said:





Thanks for the post, I hadn’t heard of the

REM unit so thanks for enlightening me.




Abdulhakim Haliru

(http://www.leproghrammeen.com) said:





Thanks for this. i think the caching page tip

will come in very handy. Cheers.




D.Eg. said: September 19, 2011 at 3:52 pm




Been using css animations and transitions for

while now, can’t get enough of it… makes the

web sooo much prettier! Can”t belive I have touse rems now… oh well.

Doug said: September 19, 2011 at 4:12 pm











I wonder why it is “colour-change” and not

“color-change”

Reply (/blog/7-new-techniques-

every-web-developer-should-

know?replytocom=499104#respond)

l2aelba (http://l2aelba.com/) said:


(http://www.catswhocode.com/bl

new-techniques-every-web-

developer-should-


He is from UK, maybe ?




Jan (http://www.janskovgaard.dk) said:





Nice post – had not heard about the REM unit

before. Sounds very nice




Jasmine (http://www.100webhosting.com)

said: September 22, 2011 at 5:00 am




Great web development techniques. I like the

caching thingy, since it will surely make pages

load much quicker!

Abe (http://webcreationtips.com/) said:












Good post.

Thanks for sharing these tips.




Greg (http://gregpettit.ca) said: September

26, 2011 at 1:06 pm




Did not know about rems either! I’m 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.




Marty (http://www.broadbandspeed.co.uk)

said: September 28, 2011 at 11:47 am




Nice tips, thanks! Google have used CSS

animations on their homepage on occasion.Downside is it can increase CPU load.




Ryan Carson

(http://www.refreshcreations.co.uk/) said:

October 7, 2011 at 9:46 am


techniques-every-web-developer-should-know#comment-513714)

So, are these IE8 compatible then?








Jamie Murphy

(http://www.webdeveloperblog.co.uk) said:

November 11, 2011 at 3:42 am




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?




Mike (http://mikeavello.com) said:

November 21, 2011 at 11:39 am




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.




Federico Bucchi

(http://www.federicobucchi.com) said:

November 21, 2011 at 7:21 pm




Good snips.. I did know some of it but there

are you that I didn’t know.. Now I’m trying if it

works on all browsers.

Terry

(http://www.bostonwebsitecompany.info/)

said: November 21, 2011 at 8:51 pm











Looking forward to learning more about

HTML5. Great info.




Jack Sam White

(http://outsource.techndu.com/) said:

January 16, 2012 at 11:39 pm




Although the entire post is really useful for

any web designer, but I just liked the last

point: CSS Animation. I don’t know before

about it and now I am ready to do some

experiment by applying suggested method.

Thanks for this wonderful post.




NetDesignPlus

(http://www.netdesignplus.net) said: May

18, 2012 at 3:54 am


techniques-every-web-developer-should-know#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.





Leave a Reply

Your email address will not be published. Required fields are

marked *

Name *

Email *

Website

Comment




dave

(http://www.converthtmltowordpress.co.uk)

said: January 16, 2013 at 7:21 am




Definitely need to start reading up on HTML 5

very soon!




John

(http://www.jsmanandvansurrey.co.uk)

said: March 19, 2013 at 2:23 am




Yes would be very interested to see how this

all fits in with IE when designing – any news

on this ?





Please respect the following rules: No advertising, no

spam, no keyword in name field. Thank you!

(http://feeds2.feedburner.com/Catswhocode)

© 2008 - 2013 CatsWhoCode.com (http://www.catswhocode.com)


7 new techniques every web deve

Documents