Innlegg i Kampanje om manglende HTML5 kunnskap i mediebransjen

Kampanje
Etter en del frustrasjon med manglende kunnskap og mangelfullt underlag fra mediebyråer – har jeg skrevet et innlegg i Kampanje som setter fokus på saken. Det er nå viktig at mediebransjen, og særlig mediebyråene setter inn et ekstra gir for kjapt å tilegne seg nødvendig kunnskap om HTML5 annonser.

http://kampanje.com/tech/2015/08/–vet-du-hva-html5-annonser-er/

Et lyspunkt for HTML5-annonser?

Greensock
I den noe lett kaotiske og teknisk utfordrende HTML5 annonse-verden har det nå kommet et lyspunkt – IAB har nemlig laget et utkast for “HTML5 guidelines” som går for en anbefaling på 200kB (!). Av teknologiske årsaker er nemlig mye vanskeligere å få et kreativt konsept innenfor kB-begresningene med HTML5 enn det var med Flash. Så nå er det lov å håpe at vi på sikt kan få litt mer kreativt spillerom her også i Norge.

Om dette blir standarden eller ikke, så hadde det uansett vært en stor fordel om vi kunne innført brukt “CDN hosting” av det vi mener er det det aller beste animasjonsbiblioteket, nemlig Tween-serien fra Greensock. Biblioteket gjør det mulig å lage rikere løsninger, enklere, kjappere samt at det i stor grad garanterer best mulig ytelse med tanke på CPU-bruk. Fordelen med at vi kan hente biblioteket fra ett sentralt CDN vil også være at brukere kun trenger å laste biblioteket én gang, for så å automatisk “cache” det de neste gangene annonser blir vist i samme nettleser.

For at dette skal fungere må det aksepteres av alle norske nettsteder som vi lager annonser for, samt med de annonsesystemene de bruker. Samtidig må vi bli enig om én CDN-link vi kan bruke på tvers av alle nettsteder og systemer. Dette er den eneste måten vi kan få en løsning som er optimal både for sluttbruker og oss i produksjonsleddet.

Konkret så kjenner vi kun til Cloudflare som har Greensock på et globalt CDN. Vår instilling fra APT, er at ønsker å kunne bruke Cloudflare linken (eller ett annet bedre CDN) for alle produksjoner.

Les mer opp HTML5-annonser og Greensock sin oppfordring her:
http://greensock.com/html5-banners

Hvis du ønsker en mer generell innføring i konsekvensene er av overgangen til HTML annonser er, så har jeg skrevet en innføring på min blogg.

PS. For dere som produserer HTML5 annonser, følg med på Greensock sitt forum

3D coding fun in the browser

Despite that an increasing amount of my time is spent on giving talks, research and otherwise evangelising about technology – I still love to code. This is a good example on just that, being able to tinker with a visually rewarding task like creating this 3D-animation of trees. The animation is made possible with a newer web technology called Web GL that allows advanced live 3D in your browser.

See the Pen Canopy Flight by Pål Smitt-Amundsen (@gadgetgnome) on CodePen.

The library Three.js allows a simple interface to creating the 3D content. Visit CodePen to peek at the code : http://codepen.io/gadgetgnome/pen/gpoMGg

HTML5 annonser – begrensninger og muligheter

De fleste er enige at overgangen fra Flash til HTML5 har vært en god ting – vi har nå mer tilgjengelige nettsider som også gir gode brukeropplevelser på mobil. Men hvorfor har denne overgangen frem til nå uteblitt for nettannonser utenfor mobilmarkedet? 

(English readers; please refer to my previous post or read my presentation notes.)

Denne artikkelen er et forsøk på å oppsummere mitt foredrag om HTML5 annonser på Gulltaggen 2015. Jeg har også uthevet en del viktige ord for de som liker å skumme igjennom. Artikkelen er ment som en innføring fra virkeligheten til et produksjonsbyrå målrettet mot alle som jobber med display-annonsering på nett.

Oppdatering sommer ’15 – Vil Chrome blokkere Flash-annonser?

Neste versjon av Google Chrome, den største nettleseren på desktop, vil pause “ikke-essensielt” Flash-innhold. Annonsene vil da ikke bli korrekt vist uten at bruker aktiverer de med et klikk – noe som er svært lite sannsynlig. Medier vil nå snart sette sperrefrist-datoer for når de ikke vil ta i mot Flash-annonser lengre, overgangen til HTML5 annonser er da straks et faktum.

Tingenes behagelige tilstand

“If it works, don’t fix it” er et mantra som alltid er like aktuelt i digitale løsninger, og nettannonser er intet unntak. Flash er et verktøy som har vært som skreddersydd for effektivt å skape animerte nettannonser for animatører, designere og utviklere. Teknologien har også muliggjort at én enkelt fil fungerer likt på tvers av alle nettlesere, operativsystemer, nettsider og annonsesystemer. Med HTML5 annonser kan man dessverre ikke ta noe av dette for gitt lengre.

Continue reading

My talk about HTML5 ads at Gulltaggen 2015

Pål - 1
Just a short post thanking Gulltaggen and ABC Startsiden for having me as a conference speaker yesterday at this inspiring conference. Giving a conference talk on a technical subject in a 2nd language is always a good challenge, resulting in a much welcome experience.

I was also happy to get many good questions and conversations on the topic of the transition from Flash to HTML5 ads, with many requesting a link to my slide deck. As soon as I get some time I will sum the whole presentation up in an article, but in the meantime I’ve put out the links to my Keynote file:

Thanks again to Gulltaggen and Annette Isachsen at ABC Startsiden for having me as a conference speaker!

PS. One of my main motivations for doing this talk is to ease this transition into HTML5 ads, which is currently causing a bit of headache for many. So if you missed my talk and want some insight on the subject – I am open to requests for doing this presentation again.

Fishes flocking fun with JavaScript

This spring I was working on a “ocean themed” site taking the user on a journey to the great depths of the North Sea. And of course, in every ocean there needs to be
fish happily swimming in flocks. So I started doing some research into flocking, and with some experience from creating particle systems, the first prototype was done in in a day.

See the Pen Fish flocking simulation by Pål Smitt-Amundsen (@gadgetgnome) on CodePen.


The basics of flocking is that one fish tries to find a buddy to follow, one that it can see in a sector relative to it’s swimming direction. Once a buddy is found, it tries to follow as best it can, limited by its max speed among other properties.

To see who a fish is following, hold the shift-button on your keyboard. Red lines will point out the leader, also green lines will display the “negative force field” that the mouse cursor is to the fishes. The are just really scared of the cursor, trying to avoid it the best they can.

Feel free to peek into the code using the link below, there are some comments that should explain the basics. I wrote the code from scratch with a JS “class” for a Fish, making it easy to instantiate a thousand of them with the “new” operator. The particle system is drawn on a canvas, drawing the fish from a bitmap with correct rotation and position from its “particle” properties.

Go ahead, visit CodePen: http://codepen.io/gadgetgnome/pen/Apnkv

Automatic brakes on bumper cars!

Late summer I was lucky enough to participate in a build project we did for our client Volkswagen. The idea was illustrating their automatic braking system by creating a similar system for bumper cars, filming people driving them unbeknownst of our modification. Take a look at the result here:

And if you are interested in how created this, check out the “behind the scenes” video with Knut explaining the basics of the setup.

The brake system was powered by pneumatics, so several large dive tanks was needed to keep the smaller bottles refilled the whole recording day. This picture was taken after, with the brake system parts all back in boxes after restoring the bumper cars to their normal brake-less setup.
Dive tanks and parts

The parts for each cars setup, hidden under the seat for a surprising effect (from L to R):

  • Small “pony bottle” diving tank
  • Pressure regulators
  • Blue Festo air tubes (awesomeness with quick-release!)
  • Computer box with battery, Raspberry PI and Arduino interfacing the ultrasonic sensor-array and sending the the data to the server via the tailor made SW.
  • Massive relay to withstand the big current drawn by the car
  • Festo solenoid electromagnetic air valve to feed air into the brake valves.

Car brake parts

The feeling of just holding one of these beautiful Festo cylinders cannot be described with words, the build quality is unbelievable. We used two in each car, each capable of lifting 178KG (1750 Newtons) at 10 bars!
By the power of Festo!

All in all I’m in awe of the design and production that Knut and Morten did, mostly just contributing to the electro mechanic part myself.

A “flappy” game prototype in JS with 1k tips

Last winter I was working on a Unity game project, discussing game concepts with 3D artist colleague Magne, namely the simplicity of “Flappy Bird”. How can it be that simple, and at the same time so addictive? We talked about having a go at it ourself, creating a spin-off or tweak to the concept. Shortly the idea of making a circular scene came up, like the old classic ‘defender’, but also inspired a little by the brilliant iPad game Osmos. Instead of the player going through ports, he/she would rather circle a planet only avoiding colliding into satellites or entering outer space. Our first goal was then to see if this was something worth spending time on – to answer that I created a prototype of the game. Try it for yourself, keep your black “spaceship” within the red “atmosphere” of the darker red planet, pressing the mouse or keyboard to add thrust clockwise.
Game screenshot

Did you like it? Was it to hard? Was it at all addictive? I knew creating a prototype of the game mechanics was the only way to answer this, as simple and quick as possible. JavaScript provides that with simple coding, great number of resources, and using a service like JSBin – a super quick start without needing anything else than a browser installed. JSBin also provides revisions, so you can demo and compare the game to older versions. For more control now however, I have moved the game to my Dropbox continuing coding with trusty editor Sublime. I also find that it’s easier to debug outside JSBin, using breakpoints and the handy debugger statement.

I started developing the game with just moving DOM-objects around, but due to performance issues on mobile I ported it to use Canvas as it is highly optimised on mobile browsers. It also meant more lean code, as I could eliminate both jQuery and CSS from all together.

A (1k) challenge arises

After being more or less happy with the game itself, my focus turned to the code. Could it be squeezed into, and be suitable as a 1k JS game? A challenge was created for myself, which really ignites an extra fun factor in coding. I first remember reading a post on creating 1k games, with tips including substituting and and shorting method and variable names. This of course creates a lot of unreadable code, so a lot of comments was desirable. Take a peak at these excerpts from the game code:

var a, //Angle to player from origo var
h, //Radius of player from origo
M=Math, //Sub Math
S=M.sin, //Sub Sin()
R=M.round, //Sub Round()
P=M.PI, //Sub PI
d=document, //Sub document
s=400, //Half the width of the game, width of planet
F = d.createElement('canvas'), //create a canvas to draw on
X=F.getContext('2d');

Shortening variable names saved a whole lot of bytes in combination with normal tools to minify JS. However I later learnt that Google Closure has this ability built in, without needing do make your own variable names unreadable. I bit of information I wish I had before obfuscating my code into byte sized ugliness.

Google Closure
As a bonus Closure also analyses your code for efficiency and checks for errors. Note that while Closure shortens and substitutes your own variable names, it does not substitute JS own functions. There are a lot of bytes to be saved substituting Math method names, as they are extensively used in games.

A note on difficulty

After the first afternoon of coding, I wanted to preview it to a number of people. I posted it on our work intranet resulting a nice portion of constructive feedback. Interesting enough, I got colleagues both complaining it was to difficult, and at the same time having others achieving three times the high score I had. Surely it was a good sign that they bothered to play it so much.

The initial version started with numerous enemy satellites to crash with, a little too difficult start for some players. To mend this, the game now starts with zero enemy satellites, adding on for every 100 points the user scores, with the maximum of seven.

So, what do you think? Post your score and feedback in the in the comments. If positive, Magne and I might progress into implementing the game in Unity and publishing on the app-stores!

Artikkel om meg i Kreativt Forum

47760-200bf-feature
Hvis lurer på hva jeg gjør på jobben – så får du et ganske utfyllende svar i denne artikkelen publisert på Kreativt Forum. Det står litt om prosjekter jeg har jobbet med, rollen min som innovasjonansvarlig og litt om undertegnede.

English: If you are wondering what I do for work – “Kreativt Forum” (Creative Forum), a web page covering the norwegian communication industry has published an article on me. It covers some projects, my role as a innovation manager and overall background. Try the Google Translated edition of it at your own risk :-)

Our talk at Making Web 2013


October 24th, Knut and I held a talk at Making Web 2013 about the project we did together at Apt. Namely how we built and developed the technical systems on “Solo – the world’s largest message in a bottle”. This was my first time speaking at a conference, and I must say it was both a challenging and fun experience. One I really would like to repeat in the near future (hint hint, conference organizers). Still, the necessary preparations and rehearsals sure tok a lot more work than I imagined. Never the less, it was the work we put in that made it possible to give the talk in a comfortable manner. Well, after a the first 5 minutes that is :-)

A video recording of our talk is available at the Making Web page. Take a look if you would like to hear about:

  • Building stuff, and integrating it’s electronics with Javascript
  • Running an unorthodox project with many suppliers
  • Creating tools for yourself in development and production
  • Using the Google Maps JavaScript API for drift prediction
  • A great story with a happy ending

Thanx to the organizers at the Making Web conference 2013 for a great experience! If you know of any other opportunities to give our talk, please get in touch. We can also modify it to be more/less about the build/electronics, web, JavasScript or just telling the story.