Dream the impossible, you might get it !

Written by  on August 24, 2016

First off, turn the volume up and check this out

Make Me Pulse

Breathtaking, isn’t it ! This is an example of what’s possible in our browsers nowadays. We ‘ve reached a point in time when the web is catching up on native apps’ abilities. It actually took 26 years to finally get there ! How did it happen?

The origin of the web technologies

Back in the 90′, the first web browsers that were developed at the CERN, were designed like
document viewers. Their purpose was to download and to present assets, using the well known Hyper Text Markup Language along with the Cascading Style Sheet.

HTML and CSS respond to the need to structure and design a virtual document. In other words it ‘s a kind of futuristic “Gutenberg” tool to describe a hierarchy of blocks of content with their look and feel.

Nowadays, HTML, CSS, SVG and others, are public/open standards defined by the World Wide Web Consortium (W3C). These are the specs that define our browsers’ abilities, which we can rely on as web designer.

HTML4 – The Stone-Edge

Until very recently, even though it was possible to be creative, we were still limited with HTML. Simply because it was only meant to do this one thing : to model documents made of text, images, tables and forms.

Javascript ( another standards supported by web browsers) brought life to html. It added animation and transition to these elements by allowing developers to automate/script the document. On the other hand, these elements were still basic, and limited compared to native apps.

In other words, anything too advanced, out of its original scope, was hackery or simply impossible. Say you just wanted a chart image, you would have needed to generate it on the server, with another technology, and send it within the document as an image.

Consequently, if there wasn’t a way, to dynamically generate a bitmap from our browser, then forget about real-time graphics rendering. So to fill-in the holes, we used browser plugins and especially the well known, loved and hated, Flash!

Flash … the hot fix

Flash the plugin that fixed our browsers. We now had games, video players and other fanciness in our web pages YAY \o/

Actually, the situation was far from ideal, it was simply not part of any standards. Nothing assured us Flash would be installed and working on every browser, especially on mobiles. Actually we had to rely on Adobe’s good will and collaboration with O.S / Device makers therefore mobile support was terrible (read almost inexistent).

Thou Shall not pass!Hence why, Flash has been criticised to be just a hot fix. A plugin doomed to end.

And the death blow came from Apple.

Indeed, Steevo didn’t want Flash on his iApple devices. It probably helped his company to save extra development and QA costs, because of all sort of issues Apple would have had to support.

He especially knew with the new specs for HTML coming soon, that nobody would need Flash. It was pretty tough for Adobe who, today, has discontinued Flash support on all mobile devices.

HTML5 – The new-edge

The first draft for HTML5 was in 2008 and it was just recently published, the 28 October 2014.

It aims at providing all the tools one would need to make a stunning user experience ( without the need for plugins). It features video, audio, storage support … and one of the coolest thing : the canvas.

The canvas : a window to a new world of possibles

This little <canvas></canvas> html tag provides a way to render bespoke 2D/3D graphics in real time. In other words it offers the ability to build any visual experience one would want. On top or below any original html content.

Another open standard, WebGL, make even use of the GPU’s computing power, therefore offering more details and effects, and this available in all browser up to date.

Projects and framework around the canvas are flourishing, for examples: THREE.JS and PIXI.JS which make it even easier to build awesome UX with 3d/2d graphics and sound.

We we now have more freedom to focus on the experience, the message we want to deliver, we can now forget about the technical limitations.

The only limits are the ones of our imagination

With the rise of real time rendering, we now have the tool to create anything really. Here is a compilation of promotional user experience, games, and other awesome websites.

A Multimedia guide to Polish Culture, one of the best UX I’ve seen in ages

AudioGraph

AudioGraph

TimeLikes : Your interactive timeline of Facebook likes

Delaneau 2016 : A beautiful kaleidoscope around Delaneau’s products

Squad 451, the hunger game : A viral site that aimed to reach 1,000,000 clicks and did so in one hour

Spotify Playlist Maker for St Valentine’s day :

Because-Recollection : a music interactive experience

Interesting UX around interviews of architects and their projects

A virtual exhibition on the history of Varsaw during WWII

JETLAG : More than a Photo book

Guillaume Tomasi’s portfolio

Ommexperience : UX focused on the narrative aspect :

The last Gallic : website around the french movie

Digital heartbeat’s website

Digital heartbeat

Obio’s website

Ohio

Chrome Labs

And the list goes on and on …  just checkout AWWWards.com or google WebGL, to see what I mean.

This is an exciting times for the web industry. Everything is possible. Yet to be done !

This is a call to the muses, shall they open our minds to the possibles, and guide our pen on our storyboards !

OOP in JavaScript ES5 & ES6

Written by  on September 26, 2015

I’ll have one advice, to learn JS : just forget what you know about programming.

That especially includes the this keyword, OOP, Classes, Objects, Methods …. If you can clear such notions from your mind, you will be ready to understand what JS is :

var person = {"name" : "Bobby"}
var greet = function (end) {
 console.log("Hello " + this.name + end);
}
greet.call(person, "!");
//Prints : Hello Bobby!

person uses the built-in type Object : that is a associative array, an association of unique keys with they respective values. In the example, person has a property (key) called ‘name’ that references the value “Bobby”.

greet uses the built-in type Function : a bit of code that can be invoked. You can notice than the function has a property call that let us apply a value to the this keyword and other expected arguments. We’re setting the value of this inside greet and we’re calling it. Without using Function.call the value of this.name would have been undefined.

That’s what’s important to understand first : in JS a Function is a callable Object we can bind data to.

If one can grasp this concept he will save some time and headache learning JS by trying to apply notions like OOP. It has never been designed in such ways.

OOP is still possible IN ES5. Nevertheless hackey since we need to emulate/redesign it and it might be limited compared to what is possible in other OOP languages.

JS ECMAScript 5 ‘s OOP

In ES5,  one way is to use Functions to define classes and we define their prototypes to emulate inheritance.

Read more…

JavaScript and WebGL getting funky!

Written by  on September 25, 2015


Everything is Fashion from NinjaDev

NinjaDev released their reel, Everything is Fashion, for the Solskogen 2015. The synchro between music and video is simply on point! I find it groovy fantastic (maybe because of the retro-disco music).

This has been made possible thanks to the Three.JS project. A WebGL framework including all basic features you would expect from a 3D engine. Numerous projects are already using it. For example Clara.io a 3D modeller running in a web browser. How fantastic! The web might take over native apps one day!

Check the Three.JS projects! Enjoy JavaScript and WebGL getting funky!

Is progressive enhancement dead?

Written by  on September 22, 2015

When I discovered the magic of JavaScript and DOM manipulation at school in 2006, I instantly thought of using it to make stunning and dynamic user experiences in a web browser and getting rid of the odd white flash when browsing a website page to page.
Read more…

Aussie me voilà!

Written by  on September 26, 2014

Melbourne CBD

I am thinking of the 13 year old me, holding back a tear as I was leaving England and finishing my first trip abroad. It was at that time I promised I would give myself the opportunity to live abroad. Certainly because I figured I was at ease with speaking english but moreover because I knew I was made for living abroad, out of my confort zone, getting to know people from world wide. Even a 2 hours trip was all it takes to go from Paris to London, I always thought french and british mentalities were so different, and that there were so many things for me to learn from foreign countries. It took me 4 years after graduating to carry this project of mine but that is it! Here I am in Aussie!

Why Australia? Would you surely ask? Well, why not? I would tell you maybe because I have already met heaps of cool Australians, or maybe because I have always been attracted to that wild and modern island that Aussie is, or even because so many people I know fell in love it with after visiting. I can tell by myself now I have spent 2 weeks in this beautiful country, how friendly are the inhabitants and how both dynamic and enjoyable Life is here!

Read more…