Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

Animations on the web – Applets .vs. Flash .vs. SVG .vs. setTimeout .vs. jQuery.animate .vs. requestAnimationFrame .vs. CSS3 animations

Posted by bcmoney on October 23, 2014 in CSS, Flash, Java, JavaScript, Multimedia with No Comments


No Gravatar

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

https://output.jsbin.com/bubabil

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.

Working with LimeSurvey’s RemoteControl2 JSON-RPC API in PHP

Posted by bcmoney on April 17, 2014 in Cloud Computing, JavaScript, Mobile, PHP, Semantic Web with 2 Comments


No Gravatar

Hideous LimeSurvey shirt

Hideous LimeSurvey shirt (Photo credit: juhansonin)

Recently, I needed to switch away from SurveyMonkey, which, while still a useful free service for quickly collecting some basic Survey results, leaves much to be desired in terms of what they offer in their basic version. Of course the fully paid versions offer significantly more functionality, but the upper-end of the pricing schemes that do everything I needed are just way out of my price range for small individually-funded and/or non-budget independent projects.

This lead me to LimeSurvey (formerly PHPsurveyor), the leading open source web-based Survey data collection software, with a back-end written entirely in PHP.

Getting LimeSurvey installed on my own server was incredibly easy, just download the latest release version and upload the files via FTP. Then load the installation script and it will guide you through the remaining install steps (which are basically just setting a username/password for the administrator account, as well as database configurations such as connection info, table naming, etc). Pretty standard fare for a long-running open source PHP project with a solid development community in place.

What really set LimeSurvey apart from the alternatives though, was the extensibility offered by its API, dubbed RemoteControl2 (with support for both XML-RPC and JSON-RPC).

I had initially started out with XML-RPC since I’m kind of a nerdcore “semantics” guy, and favour XML over JSON for most server-side integration use cases (unless I’m publishing data for client-side consumption, then I almost always favour JSON). The reason, well there simply are way more tools and methodologies already in place for XML than JSON and the reliability mechanisms built into XML such as well-defined schemas (DTD/XSD) which provide data validation, namespsaces (ns) which prevent conflicts in name/value label namings and help ensure you get the right values when parsing, stylesheets (XSL/XSLT)  which allow for on-the-fly transformations, query languages (XPath and XQuery) which simplify data filtering and extraction tasks, and XML security mechanisms such as Digital Signatures which enable better security. However that’s all sure to start a debate on here.

The point is, I wanted to go XML-RPC, I really did! However I have to say, the simplicity of their JSON-RPC API which seems particularly well-implemented won me over.

So here’s what I made, a simple Survey response submission script that I call “limesurvey.collector.php“:
Read the rest of this entry »

E-Learning for Toddlers and Pre-Schoolers: HTML5 Memory Game

Posted by bryan on July 20, 2013 in CSS, E-Learning, Gaming, HTML, JavaScript with No Comments


No Gravatar

These days, digital distractions are far too proficient at taking our attention away from important responsibilities. You know, like giving your children the care and attention they need and deserve. Especially when it comes to teaching and learning, I even find myself guilty of becoming quickly bored to tears of the typical paper flash word cards and basic, repetitive picture books for toddlers and pre-school aged children.

To fight this boredom, yet still fulfil my fatherly duties, I decided to put my “day job” skills to use and at the same time develop yet another requisite “me-too” HTML5 web app, but this time with a good purpose; namely, teaching my son more interactively.

This is a simple word/alphabet memory game I developed for teaching my child. He has trouble remembering certain colors, words and letters so this game basically mixes up a set of images and uses their filename to display an image. If the folder is prefixed with “alphabet_” it will also create a large letter “stencil” containing the first letter in the top left corner of each card.

It can easily be used for just about any subject by dropping a new folder in the images directory, full of the images you want to appear in the game.
For example’s sake, I’ve added “Animals”, “Numbers” and “Colors” as separate categories just so others can see how this is possible, and the possibilities are really endless.
Read the rest of this entry »

Unboxing the MintChip

Posted by bryan on April 15, 2012 in E-Business, E-Commerce, JavaScript, JSON, Mobile, Web Services with 4 Comments


No Gravatar

Royal Canadian Mint

Royal Canadian Mint (Photo credit: Wikipedia)

The Royal Canadian Mint(RCM) has sponsored the MintChip Challenge 2012 in an effort to attract developers to the idea of developing software for the MintChip and giving away their best financial application ideas, basically, for free (on the long-shot that you are one of the few who win).

Starting April 1st, 2012, they began mailing out physical MintChip developer kits for up to 500 contestants (which will likely be an order of magnitude more actual developers involved when you count those who will inevitably work on larger teams).

Since Digital Currencies and related technologies have long been on my radar as a major business opportunity area, as well as a personal interest of mine in terms of how they work, it was only natural to apply for a kit. Today, mine finally arrived!

 

Contained in the package:

  • USB-microSD reader with MintChip software pre-installed
  • 2 MintChip MicroSD cards (aka. the MintChips themselves)
  • 2 SD-microSD card readers (paired with MintChips; one can act as sender, one as receiver)
  • Brief instructions on how to find your $100 balance for each MintChip (but no URLs, of course!)
  • The package itself has a punch-out Door Hanger on the back

 

Read the rest of this entry »

Popcorn.js + Embedded Video = Semantically Enhanced Video Content

Posted by bcmoney on March 9, 2012 in JavaScript, Multimedia, Semantic Web with 3 Comments


No GravatarPopcorn.js is an incredibly useful framework for adding timing-based events and/to Semantic metadata to rich content.

Ελληνικά: Ένα Δακρυγόνο που μόλις έχει σκάσει,...

Tear gas used against OWS protesters - Image via Wikipedia

 

According to Mozilla: “Popcorn makes video work like the web. We create tools and programs to help developers and authors create interactive pages that supplement video and audio with rich web content, allowing your creations to live and grow online.”

With it, you could even re-create VH1’s famous “popup video” or MuchMusic’s Video-on-trial effect.

 

 

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.

  • Calendar

    • June 2022
      M T W T F S S
       12345
      6789101112
      13141516171819
      20212223242526
      27282930  
  • Archives