HTML Tutorial and Web History lesson

Today, something unexpected happened. I had the (somewhat unplanned and impromptu) pleasure of showing the ropes to the “new recruit” at work, a student here for a work term over summer break.
Now, we’re not necessarily doing that much coding here yet, as we’re still in the process of bringing back large portions of IT functionality in-house. We do, however, do a lot of software configuration, release management, testing/QA tasks, and, we are ramping up to use a major enterprise CMS to be able to create front-end content quickly (HTML/JS/CSS backed by JSP & EJB following OSGI structure).
I’ve always wondered in the back of my mind, if I were “in charge”, how would I more gently introduce the younger generation to the world of “enterprise programming”? Certainly the “enterprise world” is often significantly different, if not completely far-removed, from the real-world of cutting edge software development based on agile methodologies and lightweight web frameworks, co-developed with the customer in real-time, or implemented competitively overnight at a weekend hackathon. It is also far-removed from the naiively specialized world of “academic coding”, where “programming problems” (albeit sometimes very tricky ones) are assigned with a very clear set of up-front requirements and well-defined metrics for acceptance, where every assignment is given a certain amount of time to complete and graded for completeness and of course for “originality” or “ability-to-follow-the-book-without-copying” (where copying any minor component is seen as the devil’s work, labelled plagiarism, and ostracized).
Enterprise application development on the other hand, often times has no clear-cut requirements, no well-defined acceptance criteria (other than customer happiness) and is both behind schedule and over-budget before coding even begins. That thing about the no copying? Yeah that’s tossed out the window in favour of cutting corners and “getting it to market” as quickly as possible, often at the expense of quality (or in some cases even the development team understanding the solution, the most recent case that comes to mind is this hilarious StackOverflow verbatim copy “programming faux pas” from a Nissan connected car developer). All that being said, enterprise application development isn’t that hard, just more complex and frustrating than greenfielding, open source work, or even consulting. So it turned out to be a good opportunity to take a stab at it, as the student in question only had a year of Computer Science so far and despite some exposure to Java had not much in the way of Web development yet as those courses were coming later in the program. He did however, have a healthy interest in the Gaming industry, an industry which is increasingly finding an audience and monetization options for its wares on Mobile and Web platforms.
“The only thing constant is change”
Animations on the web – Applets .vs. Flash .vs. SVG .vs. setTimeout .vs. jQuery.animate .vs. requestAnimationFrame .vs. CSS3 animations

In a follow-up to my prior article on Interactive Graphics on the web from a few years back, today I’ll be looking a bit closer at the latest Animation options on the web.

Animations have always been the specialty of Flash and before that pioneered by Java Applets on the web, but with the introduction of HTML5 and CSS3 things are sure changing fast!
This post is a quick round-up of the leading approaches to do something that a decade ago when I was first learning to develop I would have had trouble believing were even possible without a plugin/tool like Flash or Java. That is to simply move a box around through animation, moving it from left-to-right (but could be any direction) across the screen perpetually within a user’s browser, with simple controls to control the starting and stopping of the animation.
Java Applets
Historically the first (and back then pretty much only) way to accomplish your dynamic and interactive content needs, Java Applets offered the ability to code “Rich Internet Applications” in Java, similar to what it could already do on the Desktop via AWT GUIs, but run them on the web in the user’s browser client.
-or-
This loses alot of marks because of the sorry state of Java plugins and security issues since Oracle took over from Sun Microsystems and seemingly de-prioritized Java’s RIA features in favour of backend and enterprise parts of the stack which have a closer potential tie-in to its database and related products/services. Its also more cumbersome as it depends on the Java Runtime Environment (JRE) being installed to work, along with a Java browser plugin (IcedTea for OpenJDK or JavaWebStart for Sun/Oracle) so it would not work on a majority of mobile devices without rooting the device and layering in Java support (if even possible – depending on device type it may not be).
Many legacy devices do run Java Mobile/Micro Edition (JME) already, but the average user would have trouble even with some of the installer tools out there. Users also grow tiresome of the constant updates, warnings and security concerns that Applets present in the browser. Java in the browser lives on in the form of JavaFX and JNLP app launchers, but Applets are on their way out slowly but surely.
Score: 2.5/10 (I recall being wowed when I first saw dynamic and highly interactive content being rendered by Java, but have to admit the web has changed a lot since the 1990s).
Flash
Shortly after the debut of Applets, Macromedia launched their web-version of Shockwave (later Flash). Flash used a concept of “Motion tweens” where you basically draw out by hand the path that you want the animation to take, and the Flash plugin/player takes over and renders the desired motion path on your graphic objects, the desired number of times (or endlessly on a cycle).
-or-
This can be quite performant on Desktop devices that have the Flash plugin installed and enabled (most Computer browsers at this point in time), however not so much on Mobile devices. Also, thanks to Steve Jobs’ infamous statement that he’d never allow Flash on the iPhone due to its known security and performance issues on mobile (FlashLite), it may never be the case that you can rely on Flash to hit a majority of mobile browsers. This could still be a decent option however, if you’re already invested heavily in the Flash stack and/or Flex framework for your multimedia needs, and are ok focusing on Computer users. With Flash suffering pretty much as many security issues of late as old school Java Applets, I’m guessing most Developers are rejoicing with the other options emerging.
Score: 3/10 (I also have fond mostly painful memories struggling to get my first “motion tween” working in Flash Studio 2004; again, the web is moving to more built-in options for animation needs as we’ll soon see, but for a quick one-off this is still a viable option for a few more years, as long as you don’t need to support iPhone users).
SVG
Scalable Vector Graphics (SVG) is one of the up-and-coming mechanisms for multimedia on the web. I recall when it was initially being pushed by W3C in the early 2000s, but at that time, you needed a dedicated browser extension just to render the SVG. Later, JavaScript cross-browser polyfills and libraries like Raphael.JS, Processing, and D3 emerged which built heavily on SVG (or supported it as a primary export format).
The
Score: 4/10 (I also have fond mostly painful memories struggling to get my first “motion tween” working, again, the web is moving to more built-in options for animation needs)
setTimeout
This approach in vanilla JS uses a combination of “setTimeout” and “clearTimeout” (along with a helper “global variable” you can’t really get around).
-or-
The problem is that first of all its fairly obviously laggy due to rounding errors in the calculation of nanoseconds (basically the timer is leaky and gets compoundingly inaccurate the longer it runs); but worst of all, if left running in an idle window too long it can become even further janky, jump all over the place, and consume too many resources causing the Tab to crash. This is not a viable animation option unless you are detecting the “active” state of the browser client to ensure the animation is only played when the user is actively on the page and interacting within the desired content regions such that its worth showing the anitmation. Even then, there’s no guarantee it will work equally well across Mobile and Desktop browsers.
Score: 5.5/10 (cool idea that it’s possible, but not the best approach for serious uses)
jQuery.animate();
This is probably the leading go-to answer if you ask StackOverflow, as usual, the Dev community seems to prefer to hand-off the cross-browser edge cases to jQuery which “usually” performs reasonably well. This makes sense, why reinvent the wheel? In this case though, this solution too will lead to jankyness if you leave it running over longer periods of time, but not nearly as wildly as the first setTimeout example without jQuery, as jQuery’s $.animate() doesn’t suffer from the same nanosecond rounding errors as setTimeout does.
-or-
Score: 7/10 (convenient enough, but still not even close to the best performing approach)
requestAnimationFrame();
This is the new HTML5 + JavaScript option that was previously not available. Depending on your target browsers, you may want to check its availability, but its shipping in Firefox, Chrome, Safari and even IE 10+ now, so it should be ready for prime time!
It performs better because it uses purpose-built animation APIs rather than relying on the single client-thread’s timer to continue running and stay accurate, or, and cludgy browser workarounds and approximations that attempt to overcome this with the jQuery.animate() approach.
-or-
The only downsides here, is that for now, its still a bunch of extra code to ensure you’re covering all the browsers with cross-browser vendor prefixes, other than that its fairly smooth and fluid, handily beating both the vanilla JS setTimeout and jQuery.animate optons.
Score: 8.5/10 (convenient enough, but still not even close to the best performing approach)
CSS3 Animations
Last, but certainly not least, what I’m probably most excited about is CSS3 Animations, natively within the browser… I mean how crazy is that?! This stuff would have been unheard of a few short years ago.
-or-
Ok so while not totally 100% CSS3 only, we need at least a tiny snippet of JS just to control the currently active class based on the desired state of the animation, toggling the starting of the motion through a class called “running” being added, and stopping of the motion through a class called “paused” being swapped out instead. Still, I found this pretty impressive once I realized the possibilities of CSS3 Animations & Transitions… the future will be interesting.
Score: 9.5/10 (I might be biased on this one, but I’m blown away by the fact this can now be done in CSS!)
Just to be comprehensive I’ll at least mention there’s also other options like Animated GIFs, VRML/X3D, Canvas, JavaFX, Flex, Silverlight, Unity, and even WebGL; but for practical animation needs, and programmatic access to control the animation, those listed above are the most accessible and sensible options for developers today.
HTML5 Audio Player Jukebox

A jukebox icon (Photo credit: Wikipedia)
Here’s a piece of work I did on a freelance basis back in early 2012 for a client who allowed me to retain the full rights to the code as a “library” which I could distribute. (I offered them two prices of course, one cheaper rate where I retain the rights and one premium rate in which the code was exclusive to them and I would not distribute). After explaining that based on their request, I would be building it as HTML5/CSS3/JS front-end code that lives in the browser client and regardless of which choice they made it would be entirely possible for someone else to simply hit “view source” and/or sniff out raw traffic packets to copy it in full, they of course chose the cheaper option; they knew from all the hype around HTML5 in 2012 that they wanted it done in HTML5 and browser-based without relying on Flash (using Flash as a fallback only). Of course, the ease with which it would be copyable would depend entirely upon how well they protect their site through SSL-certs/code-signing/code-obsfucation/disabling-ViewSource or for example, put it behind a web viewer in a Mobile App or RIA viewer (Flex/Silverlight/JavaFX) and hiding URLs, if they really want it private. But that’s another point altogether!
They chose the cheaper option so I’ve been sitting on the code and until now I had been a combination of “too lazy”, “too busy” and “out-of-respect-for-them” not bothering to release or advertise the existince of said code. However, the time has come to unleash it! For those who’ve been at this for as long as me or longer, you may recognize that it is inspired heavily by some earlier 2009-2010 HTML5 audio demos done by the Mozilla development team as far as the look & feel; but I’ve added quite a few new features to it (for example the Flash-based fallback for old browsers like IE 5-8), CSS for a slick flat direct-link playlist if both HTML5 & Flash are missing, and the main feature which is support for both XSPF and JSPF playlist formats, which are by far the most popular open playlist data formats which really should be supported by all Online Music services (but that’s another story).
Ironically enough (as I blogged about benefits and annoyances of skeumorphs last year) it is more of a skeumorph for my old iPod shuffle which had two simple arrows (left for “previous”, right for “next”) than it is for an actual Jukebox, but I’m still calling it a jukebox where you can pick from multiple albums as long as they are all aggregated to the same XSPF/JSPF Playlist. Either way, I rather like it and think it borderline qualifies as a flat-design, web-based version of a Jukebox. It was also a disproportionately lot of work to put together considering I did the work for quite cheap and it was ultimately only going to be used to play a specific band’s few albums they had at the time online. As mentioned, it can pretty much support up to 1000’s of songs at a time (though I haven’t tested its limits or ran any browser comparison benchmarks or anything fancy-pantsy like that). Either way, it should theoretically fit as many as could fit into a single XML/JSON file without bringing your browser to a griding halt when trying to fetch, load and parse it, which is definitely in the hundreds if not thousands of lines of items.
Here it is, with a modest 4 sample albums (only one song per album for rights purposes) with royalty-free music I downloaded from Jamendo before they went under and/or re-focused their “open music community”.
Skeumorphs – Good, Bad or Ugly?
What are Skeumorphs?
In designing and developing new software systems and applications, a common strategy is to attempt to approximate device user interfaces to mimic or look like real-world physical objects. This is called a Skeumorph, or a skeumorphic design.
Some of the biggest problems with Skeumorphs are that they are time-sensitive and may not actually do a great job at approximating a particular item or interface from the real-world. For example, we still use the floppy disk to represent “Save” activities, when an entire generation of computer and internet users have grown up without the use of Floppy Disks.
This approach to implementing software solutions has been propagated by Apple in particular, as well as a number of other companies such as Adobe and Microsoft of late. On the other side of the fence is Google and Microsoft who have traditionally had very non-Skeumorphic designs that feel more like using a software interface than approximating any particular object in the real-world.
Where do Skeumorphs work?
Here are a few examples of types of interfaces for which I think Skeumorphs tend to work well (for the most part):
- Calendars
- E-Reader Bookshelf
- Icons
- Text Editors
- Media Players
- Buttons
- Text fields
- Edit-in-place Text
- Tabs (as markers in a book, folder or binder)
- Pages and paging (flipping through pages)
- Voice controls
- Toggle Buttons
- Fullscreen applications
- 3D Models
- CAD (engineering design)
What are some non-Skeumorph design elements?
Some examples of non-Skeumorphic designs and Flat Design features would also be useful for comparison:
- Lists
- Search Results
- Scrolling
- Infinite Scrolling
- Flexible Grid
- Hyperlinks
- 3D navigation components (i.e. Spherical/Cubic)
- Carousels/Sliders
- Accordion
- Dashboards
- File Uploads
- Progress Bars
- Most Animations
- Dropdowns
- Multi-selects
- Tiles (i.e. Windows 8 Metro app tiles, Google iCalendar, widgets, etc)
- Word Clouds
- Zoom in/out
- Virtual Tours
- Drawing (graphic design)
Side-by-Side Comparison
So let’s see some side-by-side examples of Skeumorphs .vs. Flat Designs that are each relevant in their own rights: Read the rest of this entry »
Google Video deletes all uploaded videos

Google Video BETA, now BEATUP and shutting its doors (likely due to pressures from MPAA and prospective YouTube Video Rental partners)
That should be the moral of the story with Google Video, which this month became the latest in a slew of innovative services to hit the chopping blocks in Google. Google Video Search, however, will still be sticking around; just don’t expect to find many videos other than YouTube user-generated content (and illegally ripped/ content), to which I suspect many content publishers will migrate their Google Videos if they haven’t already.
Google’s plan was executed (almost) flawlessly:
Read the rest of this entry »
BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:
1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.
2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.
3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.