Five Web Technologies You Should Be Using

I’ve been developing Web applications for a few years now, and the pace at which things are evolving recently is mindblowing. All these new technologies, like HTML5 and WebGL, completely rewrite the book in how and what we can use the Web for.

Developers should be taking note of these technologies and utilizing them whenever possible. Not only that, but users should also be aware about what they could be missing out on if they didn’t know any better.

The following is a list of five Web technologies you probably shouldn’t avoid.

HTML5

Perhaps the most recognized of the new era of Web technologies, HTML5 is a tremendous step up from its predecessors. It introduces new elements that help better coordinate the work flow of your app or site. It also brings with it the video and audio elements, two huge additions that essentially allow you to build a site like YouTube without touching Flash. Aside from those, HTML5 also introduces the Canvas element, which will be discussed later.

Five Web Technologies You Should Be UsingWhy you should use it:

  • Video and audio on webpages without the overhead or complexities of Flash.
  • Cross-document messaging — allows webpages to talk to one another, with a few catches to insure security.
  • Web storage — allows Web applications to store much more data locally than is possible with ordinary cookies.
  • Canvas (discussed later).

How you can use it:

  • Upgrade to a modern browser if you haven’t already.
  • For Developers:

CSS3

CSS is what makes webpages look so darned good. CSS3 adds new features essential to developing shiny websites and Web apps.

Why you should use it:

  • Generate box shadows, rounded corners, and color gradients on the fly.
  • Stray from the average, boring fonts you’d normally use and spice things up with Web fonts.
  • Remove image overhead by performing various effects that would otherwise require images (mentioned above) in CSS.
  • Animate various elements on the page with CSS3 transformations and a little JavaScript magic.

How you can use it:

AJAX

You know that magical moment when the content on a page seems to magically change without navigating to a new location, or when the content on the page updates in real-time? That’s called AJAX. Twitter is an excellent example of using AJAX to make your website feel smooth and polished. There are some drawbacks, however:

  • AJAX sites use JavaScript to load the content. If the user’s browser does not support JavaScript, or if JavaScript fails to find any content, your site is then broken in the eyes of the user.
  • It can be hard to optimize sites that use AJAX for search engines, but Google offers some help in that area.

Why you should use it (it’s up to the developers, of course):

  • Make sites feel smooth and dynamic.
  • Eliminate unnecessary loading times caused by having to reload an entire document, instead loading only the content you need.

How you can use it:

  • Upgrade to a modern browser if you haven’t already (even IE7 supports AJAX, though)!
  • For Developers:
    • Learn about the XMLHttpRequest object.
    • Use a library such as jQuery to make AJAX requests easy and cross-compatible with the slight variations between browsers.

Canvas

Mentioned before, the Canvas element is a new face, brought to us by HTML5. Canvas allows for 2D rendering to a webpage, opening many possibilities in the way of more complex Web apps and even simple(ish) video games in the browser. Browsers have even been busy implementing hardware-acceleration for the Canvas element, making moderately intensive Canvas apps possible.

Why you should use it:

  • Video games in the browser, man!
  • Flash-less, meaning less overhead and much improved performance.

How you can use it:

  • Again, use a modern browser.
  • If you’re planning to go on a dedicated Flash game strike, favoring Canvas instead, perhaps you should consider investing in a decent GPU.
  • For Developers:

WebGL

A big step up from Canvas, WebGL brings some real graphics power to the browser. If you want to build a serious game or graphics-intensive Web app, WebGL is your pal here. For developers familiar with OpenGL, the essentially equivalent API will be appreciated.

Why you should use it:

  • Again, video games in the browser, man!
  • Bring the power of OpenGL to the browser.

How you can use it:

  • For the final time, make sure you’re using a modern browser.
  • Just like Canvas, you should probably have a decent GPU if you want to get serious about WebGL.
  • For Developers:
    • Learning WebGL has decent tutorials and links to lots of cool stuff built using WebGL.
    • Investigate GLGE if you want to dive in creating games in the browser versus learning the specifics of WebGL.

Fin

So there you have it: five Web technologies as well as reasons and links for using them. Perhaps you’re a Web developer and you already knew about these things? Leave a comment to let us know about a technology you think should be worth checking out.

Article Written by

  • Steven Osborne

     I would also recommend using technologies like “Less (CSS)” and “Smarty”, which minimize the amount of code you need to use.

    • http://twitter.com/josekus josekus

      Well it minimize the code you wrote, but how about the code that is generated?. Dont knwo about Less (CSS) but Smarty its a love & hate relationship

  • teX

    “You should be using”..where are they?

  • Anonymous

    very nice article, thanks for sharing

  • http://twitter.com/Branhower Branhower

    While this would be near impossible to do if you’re designing something that allows a lot of people to contribute content at the same time, for the “standard” informational website; I like to use AJAX as a slick presentation tool. Pulling different from a database and presenting it in the same space (with cool fade-in and out effects) just adds a certain layer of polish to a website. It also “degrades gracefully” by operating as normal links for browsers that don’t support javascript or users that have it turned off.

  • Scott

    This article references some great resources and important things to know for web development, but the organization of the article is poor.

    1. WebGL IS canvas. They aren’t different things – WebGL is just a specific rendering context for a canvas element.
    2. Canvas IS HTML5 (though I realize that canvas is mentioned in the HTML5 section – this is part of the organization problem).

    I find it inconsistent to have most of the new technologies associated with HTML5 be under the HTML5 section, while allowing canvas to suddenly get its own bullet point. Really, the HTML5 bullet point warrants its own article:”Five HTML5 Features You Should be Using”
    – Media elements (video/audio/canvas)
    – Form elements (email, date, etc)
    – Local Storage
    – History API
    – Cross-Document Messaging

    This article would have been better organized as something like:
    1. HTML5
    2. CSS3
    3. AJAX
    4. MVC
    5. REST

  • Evans

    Very nice article there. Very informative, however i’ve noticed that the above technologies are client side (well, apart from AJAX which is a bit confused at the moment), I believe there should be at least one dedicated server side technology that tramples all the others and that can be used as a compensation measure for javascript flaws in AJAX. Could you really build a complete website (with CMS and thingamajigs) without at least one server side scripting language (completely in AJAX, that’s insane)??? Please advise!!!