7 new techniques every web developer should know

by Jean. 22 Comments -

Web developers always have to update their knowledges and learn new technologies if they want to stay tuned with today’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 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.

@media screen and (max-width:767px){
	#container{
		width:320px;
	} 

	header h1#logo a{
		width:320px;
		height:44px;
		background:url(image-small.jpg) no-repeat 0 0;
	}                           

}

More info: Create an adaptable website layout with CSS3 media queries

Font resizing with REMs

CSS3 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

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

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

Server-side JavaScript

Since 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, Node.js and Narwhal.

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

HTML5 drag & drop

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

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.

<form>
	<label for="range-slider">Slider</label>
	<input type="range" name="range-slider" id="range-slider" class="slider" min="0" max="20" step="1" value="0">
	
	<label for="numeric-spinner">Numeric spinner</label>
	<input type="number" name="numeric-spinner" id="numeric-spinner" value="2">
	
	<label for="date-picker">Date picker</label>
	<input type="date" name="date-picker" id="date-picker" value="2010-10-06">
		
	<label for="color-picker">Color picker</label>
	<input type="color" name="color-picker" id="color-picker" value="ff0000">
	
	<label for="text-field">Text field with placeholder</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="url-field" placeholder="http://net.tutsplus.com/" required>
	
	<label for="email-field">Email field</label>
	<input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required>
		
	<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

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.

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: infinite;
	-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

Comments (22) - Leave yours

  1. D.Eg. said:

    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 to use rems now… oh well.

  2. Greg said:

    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.

  3. Mike said:

    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.

  4. Jack Sam White said:

    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.

  5. NetDesignPlus said:

    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 *

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