Once upon a time…

Once upon a time there was a great era of fairies, dragons, wizards, leprechauns and all sorts of wonders… And no, I am not starting the script for an episode of American Gods nor getting inspired in Tolkien or R.R. Martin, no, I am talking about internet, about the same web we use everyday, a web that today is mostly all about facebook, twitter, and many other “bootstrapped” websites that look like… well bootstrap.

Is half internet looking like this today?

As most of us know, the web has become the result of layer over layer of iterations of an evolving stack of more or less “standard” technologies. First there was the time of the old geocities.com, the time of altavista.com and so much loved (in its time) Netscape. By that time every page seemed to have as a rule to be written in Times Roman (or even worse, Comic Sans) and use the “<center>” tags for every page; then add an ugly background used as a mosaic across the page and you have the perfect looking page for the late 90’s… Oh!, and let’s just not forget the blinking effects, Oh my!, those blinking letters…

And blinking...

I could go through the evolution of the web talking about of the first java applets (horribly ugly for the most of them) and the table layouts that came later, then the absolutely positioned divs which made things a little better (if you were a user of NetObjects Fusion) and the server side programming (Perl ColdFusion or ASP?) It everything came to a point where it was clear that the browser was the place to do the processing to achieve better user experiences, but how?

Then Flash came in and after some time Silverlight as well, and hey!, they really lighted up the web in an unknown way until then. How many of you remember to have seen a well designed Flash or Silverlight site? A site that didn’t only presented you with the information you wanted, but also a site that was more like a web application that did way more than even a data driven web application, I am talking about a site that did all that and also entertained you. Websites that made you wander what the designer was thinking or what was he using, a mouseover used to trigger a random effect based normally in a very decent resolution (for the time) bitmap animation or even vector animations so carefully crafted. There were at that time, sites like www.derbauer.de that used to change every year only to surprise you with their new design experiences. It is true that sites like derbauer used to take a minute or two to load, but the end experience was absolutely worth it, and also is truth that they were so good creating animated loaders, that was very difficult to you to end your attention span and just leave, that itself is the wet dream of many companies today that lose their potential customers right from the loading page, as the current attention span of an adult has decreased so much over these years to be now within the three seconds to wait for a page to load, and you wander why?  Because there is no eye candy anymore, the newest ‘responsive’ sites are not created for building expectation, and when all you can expect subconsciously is to see more of the same and add wait to that, the result for an average mind is obvious.. leave.

What made derbauer so unique? what they used to do was to mix carefully crafted After Effects animations with a high dose of  high quality sound effects to create immersive experiences that were carefully “stitched” to events and presented within a Flash plugin at full screen. And like them, many others like Nike Air, Comcastic, Saab Animal Vision, etc. Even huge brands like Ford Motor Company or Audi, created highly interactive experiences with plugin technologies that we seem to hate or at least to have completely forgotten today…

can it get any better than this?

But then the question is what happened? Because if you take a look at the web today, it looks like all of it was deprecated in favor of a more “responsive design”. It’s like now it’s more important to get that website looking good in every resolution and forget a premium experience for the user behind a laptop or PC computer. The instructions seem to be, “Make it as generic as possible, just remember, it should run in laptops, giant monitors, mobile devices, including the iWatch, the Samsung TVs and also the iStove, the iRefrigerator, the Android Auto, the Apple Car and the iPillow…” It feels to me like we deprecated Mozart in favor of “trap” music, or Michael Jackson in favor of Bruno Mars. It’s like the experience of watching “Spiderman: Far from Home” would justify the same audience that the original “Rocky” once had. This post may sound very opinionated, but it is, IMHO It’s all about on thing… involution, don’t believe me, look,

Evolution or Involution?

This is the way an average app was looking without plugins in 2011.  I am not talking against responsive design, I myself love to do CSS and use media queries for almost every imaginable resolution, all I am saying is that the web was not ready in 2011 for retiring the Silverlight and Flash experiences from it. HTML 5 was simply not enough by that time to continue creating the same engaging user experiences we used to have with Flash and Silverlight.

good enough?

Years later we now have Angular and React (which are amazing by the way) CSS and HTML5 have become truly powerful, ES6 (and 7 and 8….) have become espectacular as development options, but then I have one big question for the whole industry…

Where are the involving, engaging and sticky UX that we were used to in the early 2000’s? Is it possible that Angular and React (which is the same as saying HTML CSS and JS) don’t have the capacity to provide a clean componentized way to build such user experiences? If we assume they do, what then would be the real business value to have all sort of animated components as options to use within a Single Page Application (SPA) today?   And yes, there are great options out there from Infragistics, Telerik and other premium companies that develop components for almost every framework, but they lack one thing, they are not free and are mostly geared towards data entry and the data visualization components are quite limited to certain “safe” standards.

WTF! WPF looks better?

Would it be worth to start creating those experiences like once was Philips Bodygroom, Red Universe, tokyoplastic or again, derbauer.de but now in a pluginless web?

3D + Interactivity

There are many challenges to consider these days to create experiences like these, scaling and positioning, coordinate system to use, accessibility, responsive design, just to mention a few, but let’s start for the simplest first. In my next post we will take a beautiful 3D carousel written in Javascript and let’s port it to Angular 8 and then to React, then I plan to write at least a post every month to take more and more components more steps further.

After all, who says that we still can’t find a unicorn with the wings of Pegassus and take a ride over the clouds these days for a change?  I understand that eye candy is not for every website or for every app, but let’s work on this exercise for the joy of doing it and my challenge to you is to find projects where you can use this code to spice them and bring some life to it.  Let’s take a look at the code that we will be modifying in our next post.


// Let's try now to convert it into an angular component that
// is both, performant and can be used easily in our Angular
// Apps.  --WV

// You can change global variables here:
var radius = 240; // how big of the radius
var autoRotate = true; // auto rotate or not
var rotateSpeed = -60; // unit: seconds/360 degrees
var imgWidth = 120; // width of images (unit: px)
var imgHeight = 170; // height of images (unit: px)

/*
     NOTE:
       + imgWidth, imgHeight will work for video
       + if imgWidth, imgHeight too small, play/pause button in 

And here is how the end result should look like,

1

About Will de la Vega

Will de la Vega has been a full stack developer for more than 15 years now. He has created solutions for large websites, social media software, healthcare systems and political marketing, among others, using C# ASP.NET, Angular, jQuery and React. In his spare time he is learning how to write a decent blog article.