Category Archives: Events

“Hands-On Web Audio” at London JS meetup

I gave my “Hands-On Web Audio” talk at the London JS meetup, held at the offices of Just Eat. It was broadcasted as a Hangout, and also recorded so you can replay or see if you couldn’t attend:

If you want to play along, the slides are live here and here is the source code as well. Disclaimer: depending on your computer, they might be a bit too much in both Firefox or Chrome. There seems to have been a regression and the intro sound is extremely stuttering in “slower” computers (slower as in “a MacBook Retina”).

It was a bit awkward because their big screen was actually six TVs and most of the content in my slides is centered vertically on the slide, which coincided with the middle of the frames, so it was quite unreadable. That is why you’ll hear a number of comments akin to “oh this is very inconvenient” from me, during the talk.

After I finished the talk itself, we had a round of questions, and I also showed how to debug web audio with the Web Audio editor in Firefox DevTools.

Feedback on the talk seems really positive and I’m happy people got interested in playing with the Web Audio API and making dubstep! YES!

Great talk! I left inspired to go play. I’d used some features of the audio API before but Sole’s enthusiasm and dubstep obsession triggered a string desire to get creative with it again.

Spectacular demo by Soledad. She really knows what she’s talking about

I’m really happy that people were happy and interested in the API 🙂

Side note, 1

A few people asked me about the slides: how are they made?! are they WebGL?! can they use the system to make their own slides?

Answer: they are WebGL, and they use three.js underneath. Right now the system is quite hardcoded, but I’m happy to announce that I’m working on refactoring the code so anyone can build their own 3D slide deck, using their own demo scenes. So I guess I am building a slide deck framework… 😬 #sendhelp

You can have a look at the project here, but don’t send me requests yet, kthx. An online demo is available as well. Right now it can only render basic H1-H4 and P nodes… in 3D! Not bad!

Side note, 2

I was really excited that I made it to the meetup (!), because I forgot my phone home that morning. I found out when I was in the office already, and I didn’t want to go back. So I printed the map and started cycling to the meetup place. Except I didn’t know very well the area, so I got lost twice. Not too bad though, I stopped and produced my paper map and let people look at me with weird looks (“she’s looking at a paper map!”). Anyway, I used:

a) my brain, instead of trusting everything to a GPS enabled device
b) those little maps in the street showing where you are

and I made it!

The way back was easier as I knew the area before. I tracked my route using my fitbit, and was really pleased to see that I had reached almost 30km/h on my humble Brompton.

It was coincidentally also Cycle To Work day yesterday, so I was doubly pleased that I cycled to work and also to meet up.

Should there be a Cycle To Meetup day too? I think so 😏

ColdFront 2016

I spoke at ColdFront in Copenhagen last week. I joked that I just accepted the invitation because I wanted to go back to Copenhagen, and it actually wasn’t far from the truth as it’s a lovely city and I had a great time when I went there for At The FrontEnd last May: going through the airport is easy, the trains and metros are spotless and easy to buy tickets for, the city is beautiful in its flat Nordic way (Stockholm and Oslo are quite hilly), lots of interesting design stuff to look at, people were super kind and nice to me at every single point, attendees were really polite and so on and so on. How would you not want to go back to a place like this?

So when Kenneth reached out to see if someone could talk about Servo and given that I was working on Servo this summer, it sounded like the Perfect Plan.

Fast forward a few months, and I was in Copenhagen again.

I unfortunately had to miss the first talks of the day as Perfectionist Sole was obsessing over her talk and her slides, but what I saw was really interesting. It was a very good exercise of curation.

Bruce Lawson delivered a very interesting talk loaded with facts about how to deliver the web for everyone—not just rich people on the Western world! Lots of technical insights about Opera Mini optimisations and infrastructure (this was fascinating), lots of research insights as to how do people with unreliable expensive networks use their phones and data plan, etc. Building Proper Web Apps (my new rebranding for PWA, haha) is the answer to these issues. So… learn your tools for a brighter, speedier and more reliable future!

Then there was the break in which we tested our laptops with the A/V system. It turned out that the system was having some fun and introducing random glitches and red jitter so things could occasionally look funny. I was happy with the aesthetics but “sadly” the technicians fixed it during lunch—while we were enjoying the tacos and rye bread sandwiches outside!

It was then the turn for Mathias Bynens who talked about ways in which your browser can be fingerprinted via timing attacks, and other terrible things that left all of us really scared. Good talk explaining complex topics quite clearly.

I talked about Servo and how it is solving many problems, one at a time. More to come…

Glen Maddern talked about strategies to avoid ending with “😈 Demonic CSS 😈”. He suggested a number of design ideas and even ‘tricks’ that you can actually use in most browsers (like currentColor), without having to add CSS preprocessors to a project. I think a gist could be: Just because you can write complicated stuff doesn’t mean you should. He also has started a series of screencasts where he talks about similar front-end topics in his funny and approachable way, be sure to check it out: Front End Center.

Finally Estelle Weyl talked about the need to go back to basics—again, to know your tools—for front-end developers. She asked urged people to reconsider bringing in another JS framework into a project if whatever they wanted to accomplish could not be done in a simpler way with “vanilla” JavaScript, and showed a few examples of ways front end developers are reimplementing things that the browser already provides support for, due to ignorance.

At the end of the talks, the two main organisers Kenneth and Daniel went on stage to tell us a bit about the history of the conference, how they started it, the debt they accidentally incurred in last year and how unhappy their accountant was, the terror of not selling tickets, and how this would be the last conference as Kenneth now lives in Vancouver and it’s very hard to organise a conference when you live so far away.

At this point everything got very emotional but fortunately Daniel and Kenneth hugged and said thanks, before we all broke down and started to cry. Then we clapped to thank them, Kenneth and Daniel took a deep breath and asked us to reposition to take the JS family photo, and we were off to the closing party which was at a well stocked brewery like 40 metres away (I had an alcohol free drink following my self-pledge).

It was lovely to talk with all the people there… I mean—I didn’t talk to all of them, but to the ones I talked to! Plus the weather was quite nice and we could be outside instead of yelling at each other inside the loud brewery.

Sadly, there won’t be another Cold Front so if you want to relive this, check the talks when they are published in their website. Or watch the talks from previous years in their YouTube channel!

Thanks for the lovely conference!

Post #mozlondon

Writing this from the comfort of my flat, in London, just as many people are tweeting about their upcoming flight from “#mozlondon”—such a blissful post-all Hands travel experience for once!

Note: #mozlondon was a Mozilla all hands which was held in London last week. And since everything is quite social networked nowadays, the “#mozlondon” tag was chosen. Previous incarnations: mozlando (for Orlando), mozwww (for Vancouver’s “Whistler Work Week” which made for a very nice mountainous jagged tag), and mozlandia (because it was held in Portland, and well, Portlandia. Obviously!)

I always left previous all hands feeling very tired and unwell in various degrees. There’s so much going on, in different places, and there’s almost no time to let things sink in your brain (let alone in your stomach as you quickly brisk from location to location). The structure of previous editions also didn’t really lend itself very well to collaboration between teams—too many, too long plenaries, very little time to grab other people’s already exhausted attention.

This time, the plenaries were shortened and reduced in number. No long and windy “inspirational” keynotes, and way more room for arranging our own meetings with other teams, and for arranging open sessions to talk about your work to anyone interested. More BarCamp style than big and flashy, plus optional elective training sessions in which we could learn new skills, related or not to our area of expertise.

I’m glad to say that this new format has worked so much better for me. I actually was quite surprised that it was going really well for me half-way during the week, and being the cynic that I sometimes am, was expecting a terrible blow to be delivered before the end of the event. But… no.

We have got better at meetings. Our team meeting wasn’t a bunch of people interrupting each other. That was a marvel! I loved that we got things done and agreements and disagreements settled in a civilised manner. The recipe for this successful meeting: have an agenda, a set time, and a moderator, and demand one or more “conclusions” or “action items” after the meeting (otherwise why did you meet?), and make everyone aware that time is precious and running out, to avoid derailments.

We also met with the Servo team. With almost literally all of them. This was quite funny: we had set up a meeting with two or three of them, and other members of the team saw it in somebody else’s calendar and figured a meeting to discuss Servo+DevRel sounded interesting, so they all came, out of their own volition! It was quite unexpected, but welcome, and that way we could meet everyone and put faces to IRC nicknames in just one hour. Needless to say, it’s a great caring team and I’m really pleased that we’re going to work together during the upcoming months.

I also enjoyed the elective training sessions.

I went to two training sessions on Rust; it reminded me how much fun “systems programming” can be, and made me excited about the idea of safe parallelism (among other cool stuff). I also re-realised how hard programming and teaching programming can be as I confronted my total inexperience in Rust and increasing frustration at the amount of new concepts thrown at me in such a short interval—every expert on any field should regularly try learning something new every now and then to bring some ‘humility’ back and replenish the empathy stores.

The people sessions were quite long and extenuating and had a ton of content in 3 hours each, and after them I was just an empty hungry shell. But a shell that had learned good stuff!

One was about having difficult conversations, navigating conflict, etc. I quickly saw how many of my ways had been wrong in the past (e.g. replying to a hurt person with self-defense instead of trying to find why they were hurt). Hopefully I can avoid falling in the same traps in the future! This is essential for so many aspects in life, not only open source or software development; I don’t know why this is not taught to everyone by default.

The second session was about doing good interviews. In this respect, I was a bit relieved to see that my way of interviewing was quite close to the recommendations, but it was good to learn additional techniques, like the STAR interview technique. Which surfaces an irony: even “non-technical” skills have a technique to them.

A note to self (that I’m also sharing with you): always make an effort to find good adjectives that aren’t a negation, but a description. E.g. in this context “people sessions” or “interpersonal skills sessions” work so much better and are more descriptive and specific than “non-technical” while also not disrespecting those skills because they’re “just not technical”.

A thing I really liked from these two sessions is that I had the chance to meet people from areas I would not have ever met otherwise, as they work on something totally different from what I work on.

The session on becoming a more senior engineer was full of good inspiration and advice. Some of the ideas I liked the most:

  • as soon as you get into a new position, start thinking of who should replace you so you can move on to something else in the future (so you set more people in a path of success). You either find that person or make it possible for others to become that person…
  • helping people be successful as a better indicator of your progress to seniority than being very good at coding
  • being a good generalist is as good as being a good specialist—different people work differently and add different sets of skills to an organisation
  • but being a good specialist is “only good” if your special skill is something the organisation needs
  • changing projects and working on different areas as an antidote to burn out
  • don’t be afraid to occasionally jump into something even if you’re not sure you can do it; it will probably grow you!
  • canned projects are not your personal failure, it’s simply a signal to move on and make something new and great again, using what you learned. Most of the people on the panel had had projects canned, and survived, and got better
  • if a project gets cancelled there’s a very high chance that you are not going to be “fired”, as there are always tons of problems to be fixed. Maybe you were trying to fix the wrong problem. Maybe it wasn’t even a problem!
  • as you get more senior you speak less to machines and more to people: you develop less, and help more people develop
  • you also get less strict about things that used to worry you a lot and turn out to be… not so important! you also delegate more and freak out less. Tolerance.
  • I was also happy to hear a very clear “NO” to programming during every single moment of your spare time to prove you’re a good developer, as that only leads to burn out and being a mediocre engineer.

Deliberate strategies

I designed this week with the full intent of making the most of it while still keeping healthy. These are my strategies for future reference:

  • A week before: I spent time going through the schedule and choosing the sessions I wanted to attend.
  • I left plenty of space between meetings in order to have some “buffer” time to process information and walk between venues (the time pedestrians spend in traffic lights is significantly higher than you would expect). Even then, I had to rush between venues more than once!
  • I would not go to events outside of my timetable – no late minute stressing over going to an unexpected session!
  • If a day was going to be super busy on the afternoon, I took it easier on the morning
  • Drank lots of water. I kept track of how much, although I never met my target, but I felt much better the days I drank more water.
  • Avoided the terrible coffee at the venues, and also caffeine as much as possible. Also avoided the very-nice-looking desserts, and snacks in general, and didn’t eat a lot because why, if we are just essentially sitting down all day?
  • Allowed myself a good coffee a day–going to the nice coffee places I compiled, which made for a nice walk
  • Brought layers of clothes (for the venues were either scorching hot and humid or plainly freezing) and comfy running trainers (to walk 8 km a day between venues and rooms without developing sore feet)
  • Saying no to big dinners. Actively seeking out smaller gatherings of 2-4 people so we all hear each other and also have more personal conversations.
  • Saying no to dinner with people when I wasn’t feeling great.

The last points were super essential to being socially functional: by having enough time to ‘recharge’, I felt energised to talk to random people I encountered in the “Hallway track”, and had a number of fruitful conversations over lunch, drinks or dinner which would otherwise not have happened because I would have felt aloof.

I’m now tired anyway, because there is no way to not get tired after so many interactions and information absorbing, but I am not feeling sick and depressed! Instead I’m just thinking about what I learnt during the last week, so I will call this all hands a success! 🎉

A first for everything: Greece, Denmark, Norway

Writing this with a very slow connection in Thessaloniki, Greece (ahhh, hotel internet).

I am very excited that my Greek studies are finally coming in handy and so I can read the street signs even if they’re written using the Greek alphabet. It sort of reminded me to last year when I was in Hong Kong and couldn’t read the signs… except now I can! Yay!

I arrived yesterday after a terribly early flight–but then it was well past noon because of the +2h timezone.

Kostas, one of the organisers of DEVit, helped me get a SIM card and he was OK with me telling the world that it took us an hour and a half to get it working with data, because all of the processes they require. I think we did three queues and had time to go for lunch and go back. We also had to enable the Greek keyboard on my phone in order to send a text to the operator containing the Greek ‘y’ (which is not the same as the English keyboard ‘y’), and then it would send me 5 texts in response, confirming whatever it is the ‘y’ meant (I mentally read it as “why?”) with a lot of ALL UPPERCASE Greek paragraphs.

I will just say that in London you can turn up at a shop and buy a SIM with pre-paid credit in 5 minutes, so if I didn’t come from Spain where these processes are similarly ridiculous, I would have been wildly amused.

I re-learnt the most important sentences:

  • παρακαλω = parakalo = please
  • ευχαριστωσ = eucharistos = thanks

and last but not least: χαχαχα = hahaha = jajaja 😃

This is also my first time in Greece so I don’t quite know what to expect, but so far it seems welcoming, nice and sunny, full of interesting things to look at, and also very busy. I did try a gyros and I’m looking forward to trying out the Greek coffee: “cooked!”. Will report.

Side note: for a Spanish speaker, hearing spoken Greek in the background is funny: your brain thinks it can understand it because the cadence is very similar to Spanish and many Spanish words are of Greek origin, but then it starts to pay attention and realises it actually can’t.

I’ll attend the NodeJS/Ruby synergy meetup this evening… be sure to say hi and bring all your synergies and thoughts out of the box!

Next week I’ll be in Denmark for AtTheFrontEnd and the following week will see me in Norway for WebRebels. I’ve not been in either country before, so those will be another two first times for me, but if they’re anything like Sweden or Finland I’ll be more than happy.

I’ll be talking about MediaRecorder and how you can now generate video in the browser, natively, without plug-ins. If you are interested in real time audio or video processing, my talk will be relevant to you 🙂

Two for one

I attended Web Progressions in London last week. But before that, and before the break, I also attended JSConf Uruguay. So what could be better than two conference posts in one?

None of the conferences have posted the videos of the talks yet, but here are my highlights of both events, just in case you wondered:

JSConf Uruguay

This was my first time in South America so everything was unusual and new but also familiar at the same time, like a mixture between Spain and Italy, e.g. when waiters would reply with “¡Por favor!” which sounds like a literal Italian-to-Spanish “Prego!” 😀

I liked the meats, but utterly despised the coffee. Pretty sure I got caffeine withdrawal during that trip. The lack of punctuality also got on my nerves; nothing happened at the time it was supposed to be happening, much to my dismay. It was joked that I might have become “too English” 😒

I talked about MediaRecorder, in a demo-filled version in Spanish of my Hacks article: Record almost everything in the Browser with MediaRecorder. Since I am a native Spanish speaker I thought it would be a bit silly to give the talk in English and have it simultaneously translated to Spanish to a Spanish speaking audience (there were interpreters on the conference as most of the speakers were not Spanish speakers), so I did the talk in Spanish. I think it went well even if I get a bit confused with some terms in Spanish 😎

My favourite talks were not really on JavaScript per se but applications of it. Which makes sense if you think of it; you don’t generally get excited talking about dictionaries or grammars, but you do get excited talking about books, poems, plays…

The top talk for me was decidedly Irina Shestak’s talk on cellular automatas. It was super inspiring and got me thinking about a number of ideas. They will eventually materialise into something, but I can’t quite predict what. The other thing I liked was how she talked about finding inspiration not in front of a screen, which I think is something we all should practice more often. Not finding inspiration, because you can’t force it, but you can set the conditions by getting out of your usual habitat…

I also liked the talk from Ben Vinegar on collecting JS errors–it made me realise we’ve come a long way on catching and debugging errors.

The talk on building “UI” apps with “Blessed” (it took me a bit to realise the meaning versus the classic UNIX “curses”) made me want to build a CLI-UI app even if I have no need to, so that was good, I guess? (or maybe not).

It’s not because he’s my colleague, but I also enjoyed Mike Taylor’s talk on web compatibility and “why everyone deserves orange juice”, with a number of suggestions for building sites that don’t break in systems other than the developer’s. But the question on everyone’s minds (including mine) was: why “web compat” and not “web compatibility”?

Another cool talk was Alan Souza’s React + SVG accessibility talk. So cool to see React used to build SVG which is in turn used for more than just icons! I was also deeply embarrassed/irate that some people were making fun of the screen reader each time Alan showed a demo. Really? What a lack of respect and empathy for people with disabilities.

Myles Borins’ talk on node.js releases was a good introduction as to how is it supposed to work now that there’s a foundation and it’s all ‘srs bsnss’. I also asked him lots of questions before his talk so maybe I knew more than the audience. But I’m sure he’d love to answer your questions if you ask him because he’s a nice person anyway.

Rod Vagg’s talk was good as well and since it was a keynote, it was meant to have a Q&A bit, but instead of handing a microphone to the audience, they would use a moderator tool. I had high hopes as I had what I thought would be good questions which I submitted through the tool, and they were voted up by people (proving that they were interesting). But come questions time, they projected the tool on screen and some cretins thought it would be the perfect trolling time, and started submitting stupid questions, and other simplistic people voted for them. In a futile attempt to stop the trolling, the moderators deleted the stupid questions… and accidentally also some of the good questions including mine. Bah 🙁

Web Progressions

And now we fast forward to last week and London, exactly to Web Progressions, held in fashionable trendy Shoreditch, home to the highest number of pop up everythings and probably the most rolled-up jeans per capita in the entire UK, amongst other things such as delicious coffee. Yum!

My talk was about HTTPS, why it’s important to serve content securely for progressive web apps, and how to use Let’s Encrypt to get free certificates. People seemed to like it quite a lot and many told me they were looking forward to implementing it, which was very cool. Others said they wanted to build something that required https only so they could use Let’s Encrypt! And finally, others pinged me a couple days later confirming that they got so excited after the talk, they followed my guide and got it working already! Yay!

I was late to the conference so I missed the first talks. From what I saw, my favourite was perhaps Natasha Rooney’s on a future web without passwords, although it’s not clear to me how we will be able to migrate the one-time password “token” between browsers. It sounded a bit like a vendor lock-in in the horizon.

Jonathan Fielding’s talk on building responsive apps had also a bunch of good advice that should be common sense already, but sadly is not. I’m looking forward to seeing more talks from him! He had also volunteered to build the conference website! So thanks for that, Jonathan 🙂

The talk from Alex Sanders, on insights on building real-life progressive web apps at The Guardian, was super interesting and confirmed what we also suspect: Safari is slowing us down, as it doesn’t implement many of the features required to build fully capable web apps. Features such as, for example, Service Workers! Which are essential if you want to add push notifications, offline, background sync (in the future), etc. Boo Safari, but specially boo mobile Safari because users in iPlatforms cannot choose an alternative, more capable engine (whereas users of Android can switch to different browsers with entirely different engines–although… would the majority of not-tech-savvy users do it?).

The other issue is that there doesn’t seem to exist a progressive enhancement path for these features, so it is often not feasible to maintain two different codebases (or code paths) just to cater to all users. E.g. an appcache path and a ServiceWorker path.

I was also glad that Ruth John could finally do her Web MIDI talk without the projector going bananas and randomly flashing white noise for 10 minutes, as it happened in another conference recently. Yay MIDI and real time music on the web!

Belen’s talk on game development made me curious about playing with Phaser too, for no real reason than that it looks fairly easy and you can focus on building your game and not a game engine. It was also interesting that she gave “motivational” resources for people who cannot finish things or who think are not good enough to make a game.

Another thing that was cool was to meet old friends (hi Alastair!) and new old friends which I had only spoken to through via the Internet before (hi Charlotte!), and new people who I hadn’t met before at all. Overall a nice conference and I hope it keeps happening next year, so thanks to Daniel, Natasha and Bruce for putting it together!