7 new techniques every web developer should
know
Web developers always have to update
their knowledge 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.
1.
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.
2.
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 */
3.
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.
4.
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!");
5.
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:
6.
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.
7.
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.
