Tag Archives: web components

ScotlandJS 2014 – day 1

(Trying to get back to the old good blogging-about-events routine)

So The Day finally came for ScotlandJS to start! Angelina Fabbro and me have spent the past week and a bit on holidays in Edinburgh, but Angelina has been rehearsing, and rehearsing, and rehearsing again for their keynote for the past days, so I got to hear it first before everyone else! Wow, do I feel privileged!!

I found Zeno Rocha and Joe Pettersson soon after getting my badge, which was cool because I have been collaborating with Zeno and some other cool people on web components stuff during the past months, but I had only seen their faces via videoconference, so it was nice to speak without The Awkward Hangout Experience i.e. when someone makes some accidental noise they get the focus even if they’re not actually speaking!

Keynote: “the truth about the impostor syndrome” by Angelina Fabbro

Even if I had listened to it so many times already, I still found it funny –specially the part about PHP as Pretty Hardcore Programming! Or what about the formula for measuring your worth as a programmer and as a person?

I’m also secretly proud that I collaborated on this keynote with this GIF that compiles Angelina’s best worst faces from their JSConf.US 2013 famous talk – JavaScript Masterclass.

I predicted there would be much cognitive dissonance at the audience, and I wasn’t wrong! So I’m glad it all went well. Somebody took notes. Here’s the slides.

“Help, I’m stuck in an event-loop” by Philip Roberts

This was a nice quick talk, I quite liked it! It never got boring and was also quite informative. Should be part of a hypothetical JS curriculum!

“A Humane Introduction to Functional Programming” by John Sutherland

Although the topic was interesting and started on a good track, it started to get monotone/tedious midway and plain confusing at the end. Like, I *think* I know what he wanted to address, only he didn’t quite do it, or left some lingering questions unaddressed up until almost the end, such as how much memory you can use when you start fibonnacing things up, i.e. getting into the functional side of things.

“ServiceWorker & the offline web” by Tom Ashworth

Tom did a good presentation although since I am kind of used to Jake Archibald’s flamboyant talks on this topic I felt this one was missing some more ***bells and whistles***. Or something like that!

“Let’s talk… mental health” by Amanda O’Connell

Amanda started by asking everyone in the room to stand up, and then asked people to sit down if they knew someone with depression, someone with a diagnosed mental illness, someone who had attempted suicide, etc… At the end there was only two people standing, and that’s “because there were only 15 minutes left”, as she was sure she could find out some mental illness that these two people would recognise, but the point was already proven: mental health should not taken for granted, and mental illnesses should not be stigmatised either.

However I think she lacked on a more concrete message and started digressing a bit, at which point I got distracted and couldn’t quite follow her, which makes me sad because I think this is such an important topic that is systematically ignored.

“Making math come alive with JavaScript” by Stian Veum Mollersen

I guess this talk was OK for an absolute beginner, but I personally found it too basic. That said, I can understand that people without an engineering background might find it useful to set out the concepts.

“Build Games with JavaScript and Phaser” by Gabe Hollombe

I was curious to see how games built with Phaser would look like – specially since they forked/based their animations engine on Tween.js, but I couldn’t make it to the entire talk because it was, again, too basic, and my brain kept getting distracted. Also, CoffeeScript? :-P


So we had a look at the lunch tables and it was all bread-y stuff which we can’t eat because of dietary restrictions. BOO! Therefore we decided to head out of the venue and find somewhere to eat. We found Mikeal Rogers outside who was exactly attempting the same quest, so Angelina and me joined him on the look for an eatery that wouldn’t cover us in bread and carbs.

It was a great lunch. I hadn’t spoken to Mikeal in person before, so I kept quiet most of the time and listened, as many of the discussed topics were things I wasn’t entirely familiar with. Meanwhile, and what with the food being served and stuff, lunch took longer than we expected and I missed Joe Petterson’s talk again (I already missed his talk when he delivered it at LondonJS). I am sorry, Joe! I promise I’ll watch the video.

“A future called Web Components” by Zeno Rocha

Not that there wasn’t anything I hadn’t heard before, but I liked the delivery–effective but not too effectist! I missed the first minutes, but I got in time just as Zeno was enabling the “Show Shadow DOM” checkbox, which for some reason made me giggle. Shadow DOM is a constant source of jokes, I wonder if/when it will get old. Maybe when it’s finally implemented…


The weather gave us a break. I had coffee outside with views to Arthur’s seat, which I hiked on Sunday (my calves still hurt a bit!).

“Foundations for Assemble” by Dave Kennedy

I will confess that I failed to pay much attention to this. I might not be the target audience for static site generators, I guess.

“Testing ginormous JavaScript apps” by Phil Leggetter

Here’s the thing: dinosaurs generally bore me (except when it’s Gecko). This talk was full of dinosaurs imagery (because it was about ginormous!!) and was discussing lessons learnt in 2009 if I remember correctly sooooo my brain was like: NOPE, NOT RELEVANT SORRY NOT LISTENING.

“Building a collaborative audio editor based on the Web Audio API” by Jan Monschke

I had ALL THE HOPES on this talk but I was a bit disappointed because it was too basic again :-(
Also, I think his audio editor implementation is not The Right Way To Do It, but I want to discuss this with Jan in person and assert whether my understanding is correct (or maybe it is a misunderstanding in fact). There was a bunch of people that showed up at the end of his talk and I didn’t want to wait for them to ask all the questions, so I left.

The aesthetics of the editor were quite nice though, and the thing was very smooth–no jank. So there’s promise, but there are also UX issues. Urgh, I’m starting to sound like an impostor. Perhaps I’m a fraud :-o

Stay tuned for tomorrow’s second (and last) day!

Web Components !== silver bullet

During and after the Web Components panel in Edge Conf 3 I witnessed something that left me super puzzled: it seems that people expect Web Components to be the solution to all the problems.

It might be due to the fact that WC are a confusing matter, that there are several ways to define and use them, that the spec is in constant change and there are also many dissenting voices about the whole business. Despite all this, Web Components are still HTML + JS + CSS. They are still subject to the same rules, principles and professional standards that all your code is/should be subject to already.

Yet I keep seeing people extremely concerned that “there will be crappy components” and “the need for performance” and “accessibility” and etc–Addy Osmani summarised it in a tweet:

When creating Web Components, keep in mind:

☑ Accessibility
☑ Performance
☑ Re-usability
☑ Responsiveness
☑ Namespacing
☑ Docs & Testing

and Paul Lewis expects/hopes all Web Components will be built upon three dead boring but essential pillars: accessibility, security and performance.

But this is how you should be developing anyway.

If you expect someone else to build components for you that will solve all your current and future issues: tough.

If you expect someone else to be responsible for you: tough.

Web components are just a tool that will enable you to write better and encapsulated front end code.

They are not a silver bullet that automagically makes everything work.

Just as we can have closures and functions and the code inside those doesn’t necessarily have to be seen from the outside, so you can do with web components, and write reusable pieces of code instead of dropping bunches of nested divs with lines-long class attributes into your DOM tree. But just as with closures or functions or any other technique or tool, using them doesn’t guarantee your success. Thinking otherwise is delusional.

EdgeConf London, Audio Tags, and Web MIDI


I am going to be in the Web Components panel at EdgeConf London tomorrow (21th of March).

Being the perfectionist nit-picky person I am, and having never been in a panel of this type, I’m obsessed with getting ready and reading as much as I can on the subject. Still have a bunch of proposed questions to go through, but I hope I’ll do good. Wish me luck!

The conference is supposedly going to be streamed live and talks recorded and professionally subtitled, which is awesome because speech recognition and my command of English don’t seem to mix.

Audio Tags

Also, I forgot to post about my latest Mozilla Hacks article: Audio Tags: Web Components + Web Audio = ♥. It is a write up on my CascadiaJS 2013 talk with the same name, only with better looking audio tags, less jetlag, and a lot of editing–thank Angelina for that!


Good things that came out of the article: somehow some people got to learn about my interest in Web Audio, then I showed my existing experiments and cried begged for Web MIDI in Firefox so I didn’t have to use node.js as intermediate actor. Then Kyle Machulis (also known as qDot) decided to take the Web MIDI API in Firefox bug. Which means that sometime soon we’ll have support for Web MIDI in Firefox. Which means that a little bit later we could have Web MIDI in Firefox OS and Firefox for Android. Which means… well, do you really need me to explain how cool that can be?

Imagine controlling synthesisers with your really portable device, or using MIDI input devices to control things in your phone… all in JavaScript? There is a huge range of portable audio devices specifically targeted at iPads: there is a market for portable audio creation. Why not making it easier?

But we need help. Kyle is also working on Gaia, and he can’t implement all himself. I’m glad the ever helpful Chris Wilson (one of my personal developer heros) is always keen to give advice (example), but we need more than that. Building Web MIDI support implies building a Hardware Access Layer (HAL for friends) between the browser ‘core’ and the MIDI interfaces for each operating system. We’re talking of at least three different HALs–Linux, Mac OS, Windows. And this is where you can step in and become another Firefox hero! If interested, ping me or Kyle or probably just ask in the bug.

Mozilla Brick 1.0 + Hacks post!


Today two very exciting things happened:

  1. Mozilla Brick 1.0 was finally released! That means that we can now… start working on 1.1! YAY, WE NEVER STOP!
  2. Angelina’s article on Brick + X-Tag and web components in general was published: Custom Elements for Custom Applications – Web Components with Mozilla’s Brick and X-Tag

I have worked in both things (more in Brick than in the article, which I just helped edit) so it’s naturally obvious that I’m excited they’re finally published. And also since the article is Chapter 1 (as mentioned in my post), that means that next week you get Chapter 2–i.e. my article.

Stay put, friends. It’s going to rock. Almost literally.