The Big Three!
by D1J1T — in Programming — Updated: Feb 9, 2015 at 1:04 pm
Since then, these three languages have all evolved independently while factoring in progression of each other language.
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 <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.
- 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?
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!