Web Components and the Future of Web Development

Web Components Logo


To improve is to change; to be perfect is to change often.

– Winston Churchill

Nothing exemplifies the above quote better than the web. The web is always changing – monthly, weekly and even daily. Websites update their content every day and their look almost as frequently, web standards are being revised and created on a weekly basis, and browser vendors update their browsers as often as one is willing to download the latest version. A great example of that is Web Components, which is a new technology that is becoming more and more realized daily as the standards for it are being finalized and browsers are updated to support this new technology.

Web Components is the cutting edge of web technologies – it is something that few have yet to hear about, and even fewer that use it. In fact, due to lack of browser support web components is not something you’d necessarily want to rely on right now, especially when it comes to large web sites that require support for a wide range of browsers. With that being said, as a web developer it’s my job to be on the bleeding edge, to push the envelope and by extension move the web forward. So when that envelope is fully opened, when that edge becomes the norm, I am ready to take full advantage of it.

This article is a big picture look at web components. I will try to avoid the technical nitty-gritty (I love that stuff though, so expect it to rear its techy head on occasion) and instead talk about how web components will change web development going forward and how that affects non-developers, a.k.a. the common folk. Read more »

New blog design is up

The new blog design is finally up. It’s still not finalized, as there are some features and content missing, but even at this “beta” stage it’s already a big improvement over the old one. I already talked a bit about some of the changes made to the design, the layout and the content, but the new look is just a small part of the redesign, a lot of work has been done on the back-end as well and as you might have previously read a lot of it has to do with using semantic HTML5 elements to structure the website. On top of that I made several changes to how I manage and organize content, as well as, optimized the code. Read more »

How to do a header without a header – tiny solution to a big problem

I recently had a post in which I talked all about how the name of the site should really only use <h1> on the front page, and on the other pages it should take a backseat to whatever header the content has (post title for example). Well, I just ran into a problem related to that approach with the new design. Before I proceed though I must confess, the title of this post is sensationalist because the problem isn’t big. The issue is with the category pages – my design does not include a category title on a category page. Read more »

Re-writing my blog with HTML5

I have recently started working on a new design for my blog. Initially the idea was to just refresh the look and make the layout more flexible (the current über minimalistic layout doesn’t lend itself easily to adding more types of content, like blogroll for example), but as the design phase was wrapping up and I started thinking about the code I realized that this was a great opportunity to do something I wanted to do with it for a long time – convert it to HTML5. Below I go over the new redesign and some of the ideas and reasons behind the things that I do and the way I do them. Read more »

HTML5 Boilerplate is a kickass base template for website development

HTML5 is the future of the web, but building the future is hard work and so it’s always great to get a bit of help with that. Some of that help comes in the form of HTML5 Boilerplate from the minds of Paul Irish and Divya Mani, who have teamed up to bring us “the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site”. Boilerplate is basically a bunch of files, the exact kinds of files you would create as you start working on a new website, except that these already contain the basic starting code and include all the best practices baked in. Things like reset styles, pngfix, HTML5 markup and more. I went over most of it line by line and after a few adjustments based on my own personal preferences I’m going to start using it as the base for all websites I work on. Read more »

Safari gets WebGL in WebKit Nightlies

Well, those folks on webkit dev team sure are moving fast. WebGL (OpenGL for web, i.e. fancy 3d graphics in your browser) spec hasn’t even been finished yet, as far as I know, and they already have the stuff working in the latest webkit builds. The good news about this is of course that as WebGL becomes more widely adopted, we’re going to see some interesting uses of 3D graphics for interfaces on the web. Of course the flip side there’s a good chance that suddenly dozens of sites will spring up with cheesy cubes or spheres rotating with blinking colours or something.

Hopefully most uses of WebGL will be more sophisticated than that

Hopefully most uses of WebGL will be more sophisticated than that

WebGL itself is actually pretty hardcore in comparison to stuff like HTML and JavaScript. It’s a true, honest-to-god programming language. Which means that even simple things take a substantial amount of code. Heck, even initializing the damn thing takes a whole function. On the other hand, it’s also a very well established API (more specifically the OpenGL ES 2.0 API on which WebGL is based on) with plenty of resources, tutorials and websites that cover it from A to Z. So if you’re willing to roll up your sleeves and dig into it you’ll be making spinning cubes with blinking colours in no time.

For all the details and some example check out the WebKit blog.

HTML5 Video and Audio Experiment

Gizmodo had a post on an HTML5 experimental page from 9Elements design studio. If you have Firefox 3.5, Safari 4 or latest Chrome build you can check it out yourself here.

It’s really an amazing piece of work – beautiful animations coupled with sound and neat interactivity (clicking the lights displays tweets about the page). All this is done with no Flash, or Silverlight or anything like that, though of course the code that runs all that isn’t exactly trivial, it’s all HTML5, JavaScript and Canvas.

I hope that we see more and more people taking advantage of HTML5. Internet Explorer currently supports only a small subset of HTML5 spec and none of it is for something like this. But if there’s enough push for HTML5, hopefully either the other browsers will leave IE completely in the dust and people will just stop using it (one can always dream), or Microsoft will wiseup and implement proper standards and HTML5 support into IE.

[Gizmodo Post]