Tag Archives: webgl

Talking about Servo in Hackference Birmingham 2016

I visited Birmingham for the very first time last week, to give a talk at Hackference. Apparently the organiser always swears that it will always be the last hackference, and it has been “the last one” for the last four editions. Teehehe!

I spoke about Servo. They didn’t record the talks but I did an screencast, so here’s it:

📽 Here are the slides, if you want to follow along (or maybe run the demos!). The demos come from the servo-experiments repository, if you want to try more demos than the ones I showed.

If you watched this talk at ColdFrontConf, this one has more clarifications added to it, so complicated aspects should be easier to follow now (specially the explanations about layout calculations, optimisations, parallelisation and work stealing algorithms).

People enjoyed the talk!

Someone even forked one the dogemania experiment to display other images:

And Martin got so intrigued about Servo, he even sent a PR!

I didn’t get to see much of the city, to be honest, but two things caught my attention:

a) it was quite empty even during ‘rush hours’
b) people were quite calm and chill

That’s perhaps why Jessica Rose is always saying that Birmingham is The Absolute Best place. I will have to find out some other time!

A very funny thing / activity / experiment happened in the slot before my talk. It was a reenactment of the BBC’s Just A Minute show, which I have never watched in my life. Essentially you have 4 participants and each one has a little device to “stop the show” when the active participant messes up. The active participant has to speak for a minute on a given topic, but they cannot hesitate or repeat words, so it starts getting challenging! This was organised and conducted by Andrew Faraday, who also helped run the Web Audio London meetup a while ago and is always an interesting nice person to talk to.

So this, this was hilarious beyond anything I expected. I guess because I didn’t expect any funny thing in particular, and also because I didn’t have any preconception of any of the participants being a “funny person” per se, so the whole comedy came from the situation and their reactions. It had some memorable moments, such as Terence Eden’s “unexploded item in bagging area” (in relation to the Samsung Galaxy Note 7 exploding fiasco, plus the very annoying voice that anyone who’s ever used a self-service checkout till in the UK will recognise 😏).

After so much laughing, I was super relaxed when the time for my talk came! Every conference should have Andrew doing this. It was excellent!

Other interesting talks and things:

  • Felienne Hermans’ on machine learning and bridge playing AIs built with DSLs built with F# – I basically don’t know much about any of these subjects, so I figured this could be an interesting challenge. You can watch this recording of this talk from another conference, if intrigued.
  • Martin Splitt’s aka geekonaut talk on WebGL – if you have the chance to watch it, it will be quite informative for people who want to get started in WebGL and learn about what it can do for you
  • I’m certainly not a Web Audio beginner, but I tend to watch those talks anyway as I am always curious to see how other people present on Web Audio. Hugh Rawlinson‘s presentation on Web Audio had a few interesting nuggets like Audiocrawl, which showcases the most interesting things in Web Audio. He also worked on meyda, which is a library to do feature detection using Web Audio.
  • Jonathan Kingsley gave one of the most depressing and hilarious talks I’ve seen in a long time. IoT is such a disaster, and the Dyn DDoS attack via IoT devices, just a couple hours after this talk, was so on point, it almost seemed deliberate.
  • Finally Remy declared his love for the web and encouraged everyone to get better and be better to others – and also stressed that you don’t need to use all the latest fashions in order to be a web developer. It’s good when renowned speakers like Remy admit to not to like frameworks, despite also seeing their strengths. A bit of balance never hurt anyone!

The conference had a very low key tone, let’s say that it was a bit “organise as you go”, but due to the small scale of the conference that wasn’t much of a problem. As I mentioned before, everything was pretty chill and everyone was very approachable and willing to help you sort things out. It’s not like a had a terrible problem, anyway: my biggest problem was that my badge had been temporarily lost, but no one told me off for not wearing a badge while inside the venue, and I eventually got it, heheh. So yeah, nice and friendly people, both attendees and organisers.

I also liked that everything was super close to the train station. So there was no need for additional transportation, and we could use the many food places in the station to have lunch, which was super convenient.

Oh and Jessica as MC was the best, I really enjoyed the introductions she prepared for each speaker, and the way she led the time between talks, and she was really funny, unless presenters that think they are funny (but aren’t).

If you have the chance, attend the next Hackference! It might the last one! 😝

Here are other conference write ups: from Dan Pope and from Flaki (who stayed for the hackathon during the week-end).

This is why C is a useful language

My colleague Wilson Page tweeted a couple days ago which was the most useful language we knew after JavaScript:

Since I like to add interesting information to conversations, I looked at the answers first, to make sure no one had mentioned the answer I had in mind. And surprisingly enough, no one had indeed mentioned my suggestion: C!

Wilson also asked for the reasons why I would suggest C as a useful language. I tweeted some:

but Twitter’s interface is horrible, and I feel they deserve a whole entire post, sooooo…

This is why C is a useful language

All the operating systems we interact with on a daily basis are built with C at some point. If not directly built with C, they are built using C inspired/derived languages, such as C++ or Objective C.

There are newer languages such as Java, C#, Rust or Swift that try to build on the experience of C programming, and try to solve the most common errors–often memory allocation and string handling. If you understand how C works, you understand the motivation for these new languages. You also understand better security issues–when someone talks about buffer overflows and about dumps, it doesn’t just sound like obscure jargon to you. Things make sense.

As web developers we are usually happy in our top level abstraction layer: the browser or node.js, or maybe even Electron. But if you try to dig a little bit deeper you’ll soon stumble upon binary stuff. Which is more often than not C (in node.js’s case) or, again, a C-derived language. Understanding how to interface with these parts is great! And often, modules that bind a library or API to JS are not entirely documented. Being able to look at code and understanding it is a great advantage. Not only does it empower you as a user, it could even help you modify the bindings and make them do whatever you need, by using your knowledge of the two worlds: JS and binary. This is the same case with Ruby, Python, … you name it.

You can do really powerful and superoptimised things in C; a frequent example is processing lots of data with little overhead. Normally, in our abstracted world we delegate tasks such as dealing with the stack or allocating and deallocating memory to the script interpreter of choice. In C you have to be aware of this, which can be a huge hassle, but if you understand those aspects you can manipulate them to your advantage. Allocate the right amounts of stack memory and inline a bunch of calls and you can churn away lots of data without having to incurring on that overhead I mentioned above.

Much of that kind of data crunching code is very simple conceptually–just a bunch of integer arithmetic operations. Which is also why it’s relatively easy to also transpile to highly optimised JavaScript via things such as Emscripten and Asm.js. See? JS and C–it all ties together neatly.

Another example of why knowing C will open doors for you is WebGL shaders. They are not written in C, but their syntax and semantics are very similar. They are relatively small programs that are designed to be run in parallel in many GPU cores at the same time. They are also uncannily similar to data crunching algorithms as in being essentially a lot of arithmetic operations. But you need to understand the limitations: using the proper data and operator types, no dependencies with the results from other calculations, no loops, costs of accessing memory for texture reads/writes, etc. You have to be quite close to the ‘metal’, but in exchange you get incredible performance.

Likewise, if you want to get into hardware programming, you’ll probably go through an Arduino first, but once you outgrow their IDE you might want to remove that layer and go to the next one: it will be written in C, and you might be able to save on a few Kbs of memory by removing abstractions here and there. Software for embedded systems is often written in C or C-derivatives which gets then compiled into some kind of binary or “transpiled” and written to programmable hardware.

And if you remove C you find Assembler. C is the closest to Assembler code without being Assembler. As I said, it exposes much of the metal, so much that you can often find bits of Assembler embedded inside C code. You would think that this is for when you get really specialised, but not really. The Linux kernel has many parts written in C + assembler. Many written in assembler only, as e.g. the boot sequence. There are even operating systems entirely written in Assembler, such as MenuetOS.

Learning Assembler might probably be totally useless on a day to day practical basis, but it will enlighten your understanding of general computing, and concepts such as registers, RAM, instruction sets, CPU cores and memory speed will not sound alien to you anymore, and again, you understand what limitations exist. When you stop thinking of a computer as a “black box that does things” and understand all the different subsystems and how they relate to each other, you start thinking about programming in a completely different, more nuanced way.

And at some point you will reach the epiphany moment, and realise that it is actually a miracle that anything works at all, with so many layers and moving parts written by so many different people. And understand why the Web is such a great space to be in, and why abstractions are good because otherwise we would all be trying to debug why our mallocs are failing and not getting anything done!

Happy programming in whatever language you like! \o/

How to organise a WebGL event

I got asked this:

Going to organize a series of open, and free, events covering WebGL / Web API […]

We ended up opting for an educational workshop format. Knowing you have experience with WebGL, I’d like to ask you if you woudl support us in setting up the materials […]

In the interest of helping more people that might be wanting to start a WebGL group in their town, I’m posting the answer I gave them:

I think you’re putting too much faith on me

I first learnt maths and then OpenGL and then WebGL. I can’t possibly give you a step by step tutorial that mimics my learning process.

If you have no prior experience with WebGL, I suggest you either look for a (somewhat) local speaker and try to get them to give an introductory talk. Probably people that attend the event will be interested in WebGL already or will get interested after the talk.

Then just get someone from the audience excited about WebGL and have them give the next talk

If you can’t find any speaker, then you’ll need to become one, and for that you’ll need to document yourself. I can’t write a curriculum for you, as it will take way more time than I currently have. WebGL implies many things, from understanding JavaScript to understanding 3D geometry and maths, to how to set the whole system up and running on a browser.

Or can start by learning to use a library such as three.js and once you become acquainted with its fundamentals, start digging into “pure WebGL” if you want, for example writing your own custom shaders.

Or another thing you could do is get together a bunch of people interested in WebGL and try to follow along the tutorials on WebGL or the examples on three.js. So people can discuss aloud what they understand and what they don’t, and help and learn from each other.

I hope this helps you find your way around this incredibly vast subject! Good luck and have fun!

Now you know how to do this. Go and organise events! EASY!

It’s actually not easy.

Audio for the masses

The video above is from LXJS – the Lisbon JavaScript conference, which happened more than a month ago. I gave this talk past week again at VanJS, so I decided it was time for that belated write up on this talk.

If you want to follow along, or play with the examples, the slides are online and you can also check out the code for the slides.

As I’ve given this talk several times I keep changing bits of the content each time depending on what the audience seems more interested in, plus I also sometimes improvise stuff which I don’t remember when writing the final write up, so if you were at any of the talks and see that something’s missing or different now you know why! I’ve also added a section at the end with frequent questions I’ve been asked, hope that’s useful for you too.

Continue reading Audio for the masses

Speaking at OneShotLondon NodeConf

“Just turn it into a node module,” and other mantras Edna taught me

The story of leaving behind a random mix of Python + php + bash + makefile + Scons scripts to totally embrace using Node, modules, standard callbacks, browserify, and friends to build toys that bleep and bloop with MIDI, WebGL and Web Audio.

As you can maybe deduct, this might not be your average super expert node.js talk, but a story of learning with a non-appointed mentor and an spontaneous community, and improving and making the most out of node.js—and how it informed and shaped the rest of my coding philosophy, both inside and outside of Mozilla.

I must confess that I’m really humbled and flattered to be amongst this amazing line up of true node experts.

UUUUUUUHHH THE EXPECTATIONS!—feeling a bit like an impostor now.

Next next Saturday 19th of July. See you there? 🙂