HTML 5, CSS 3, & JavaScript
The Big Three!
by D1J1T — in Programming — Updated: Feb 9, 2015 at 1:04 pm
If you mention HTML, CSS, or JavaScript in your office, chances are, most of your employees will know that you're referring to web programming languages. What most of them probably won't know however (depending on your field of course) is the history and evolution of these three languages.
I can remember when using nested HTML tables for layout was commonplace, though resolution, browsers, systems were a problem, often rendering code differently. I remember using tags that are now long deprecated. There was a need for developers to separate structure from presentation: enter CSS. But what about user functionality/interactivity? JavaScript (ECMAScript) came along to give us those hover-over buttons and those cool popup alert sanity checks. (Yes! I want to continue...)
Since then, these three languages have all evolved independently while factoring in progression of each other language.
The numbers in the versions of both HTML5 and CSS3 simply don't do them justice. These are not simple version updates to the spec, they are better defining how we write our web code especially for this age of mobile devices. Let's not leave out JavaScript either. Given AJAX in particular, JavaScript's popularity has risen and numerous frameworks and libraries have been programmed to accommodate its ease of use.
These three web programming languages may eventually replace the ever popular Flash some day soon. (I should note now that I'm a huge Adobe fan. Much of their software simply can't be beat: Photoshop, Illustrator, After Effects, so many more.) I even like Flash, or I used to at least...
I need to preface this by stating that in the last development contract I had, despite wanting to make the web app fully scalable, we used Flash still, instead of going the HTML 5 canvas route. Why? Their client and also many companies' employees and users were still running Internet Explorer v8 on a desktop, which is of course unfortunate, though true. Some of the newest features/functions (HTML5 canvas in particular) simply wouldn't work and/or there wasn't an acceptable fallback to implement. Keep in mind that this particular application was both browser and system intensive, full of audio/video/animations/the works, not to mention, and more importantly, software was written prior and already implemented. If it were my preference, I'd have re-written the whole package, but it wasn't, and I should state that I don't disagree with the company's decision. Having said all of that...
What's So Great About HTML5 specifically?
A lot. Most browsers support most of the new tags and attributes, or at least have a fallback for them. JS shivs can be imported as well. This site gives tables regarding the specifics. In general, I'd say use Google Chrome and try to stay away from older browser versions, especially Internet Explorer.
Here's a few reasons why I'm pro-HTML5:
- The <canvas> tag. Yes, this is the biggie. Using this tag, (and CSS3/JS) one can do any type of animation that Flash can do, if not more. Ads, games, more. No plug-ins required. Developers have already jumped on this. Just Google "canvas JavaScript framework" and it'll return a huge list of links to frameworks/libraries for use specifically for the canvas tag.
- The <video> and <audio> tags. Say goodbye to those 5 or 7 line code blocks of <object> and <embed> tags, and to the the plug-ins required to run the media based on the browser you're using. What about autoplay? loop? No problem. Set the attribute flag on the tag.
- Many may not care about this one, though its huge for programmers: semantics. As a programmer, I'm used to labeling a div based on it's area/section such as
I'd then use CSS and JS to style & call to that div. I still have that ability, however, I can simply use <header>, <footer>, <nav>, <section>, <aside> instead of a generic div that I must better define using the id attribute. This makes my code more readable and offers other advantages regarding metadata, etc. which is beyond the scope of this article, though feel free to contact me with questions.<div id="nav"></div> - More support for mobile, including offline app cache, geolocation, etc. Need I say more here?
- In the past, I'd have to use PHP for form validation. Don't get me wrong, PHP is great and has many other uses, however, HTML5 allows me to validate forms easier. Input fields are labeled, a "required" flag can be included, and even form hints can be included easily. I'm not saying to discard server-side validation, though it can certainly be minimized with HTML5.
What's So Great About CSS3 specifically?
CSS3 uses transitions, animations (yes w/out JavaScript even), 3d transforms, generated content based on pseudo elements, gradients, border images and much more. But the biggie: Media Queries. Why is this so important? Responsive design isn't feasible without them. A developer can literally change the entire look and feel of a site based on the dimensions of the current screen, making it appear as an entirely different site, even tricking certain users into thinking that they went elsewhere if they like. Trust me, I've done it. With media queries, I can make a website look as if it was designed specifically for the device/screen that is displaying it. User experience can be custom defined based on the system.
What's So Great About JavaScript?
In my opinion, JavaScript has always been great. It is the machine behind the scenes that can direct both layout and style on-the-fly by altering the DOM (Document Object Model) and allows for a dynamic front-end user experience. There are many frameworks and libraries that have been created to utilize its power: jQuery, TweenMax, KineticJS (for the HTML5 canvas) to name just a few. AJAX has allowed for server-side communication even as well.
The Power of the Three Combined
As mentioned prior, these three combined can potentially replace the need for Flash (along with the plugins, etc.) Not only animations/advanced graphics are possible on the canvas, but more effects (via CSS and JS) can be applied to simple elements even. You'll be able to see them on your desktop or phone (given you're not using an old browser) and have a better way to program for each different device and screen size, giving the user a unique experience for each. Your code will be more readible, even more scalable. There are already numerous sites that are utilizing these features. Google did a version of Angry Birds using these technologies that plays on the browser (Chrome) (again, without plugins) just like the mobile version. There are many other games, ads, and whole sites currently using these technologies.
This site is programmed using HTML5/CSS3/JS as well. Try this test: left-click and hold on the right side of your browser window to shrink it, resizing the width. As it shrinks, you'll notice the CSS3 media queries kicking in, and when you get to a minimal screen width (mobile phone), you'll see that the sections will adjust (shift below, shift sizes).
If you find these articles to be helpful, I could always use another cup of coffee! Social media likes/+1s are also much appreciated. Thanks for reading!