Millenials are ruining web development!!

I read this post from CSS Tricks that lists a number of “CSS utility libraries” with curiosity, which quickly turned into a mixture of confusion, panic and disgust, with each new example of CSS class names you would use with these libraries.

Let’s look at some of the class names; highlights are mine.

  • d:i-b f-w:700 p-x:3 p-y:.7 b-r:.4 f:2 c:white bg:blue t-t:u hover/bg:blue.9
  • mw9 center pa4 pt5-ns ph7-l
  • f3 fw1 georgia i
  • flex flex-wrap items-center mt4
  • tcg50 ft10 fw3 mb2 md-mb3
  • display-title color-white
  • pad-1-bottom text-blue border-bottom marg-3-bottom
  • bgr-green text-white grid-3 s-grid-12 pad-2-vert pad-1-sides
  • constrain-md md:constrain-lg mx-auto pt-24 pb-16 px-4
  • fontSize-xxxl
  • xs-col-12 sm-col-9 lg-col-10 sm-offset-3 lg-offset-2

These frameworks claim to use humanised classes that will make your development faster. But…

  1. Where is the separation of concerns? Did they not get the memo about not including font names, colours, and other visual attributes in the HTML? What if they decide to change the headers’ colour? Then you need to change all headers to go from class=”white” to class=”orange”, etc? Your development is going to be “fast” for a moment, but once you start having to maintain the code you’re going to regret this brilliant idea.
  2. There’s nothing human to using those classes. They are a step away from being a domain specific language… a programming language. Humans do not use programming languages to communicate between them (much to the chagrin of some “humans” who would like otherwise).

I can’t believe it’s 2017 and we still have to see this (let alone argue about it).

I guess they didn’t see the <p style=”color: red; font-family: Times New Roman;”><i><center>Old times</center></i></p> when we had to write crap like that not because we wanted, but because that was the only way. And oh how happy we were when we could take all that formatting out of the mark up and put it into a file and not have it scattered across all the files in the site, interspersed with the content. Ah, the audacity of youth…! Millenials are ruining web development! Groar! 👹

But if that wasn’t enough for you to disturb your calm on this fine Friday morning, here’s this excellent example of deeply offensive CSS, except we need to look at the class and the HTML tag to get the full kick in your ancient guts feeling 👟💥👵🏼:

<a href="#" download="" class="button button--secondary xs-mr1 xs-mb1">

If they want a button that looks and acts like a button… why… don’t… they… use… A <BUTTON>???!?! 😱

Please don’t do this. It’s not good for anyone–neither users, neither future developers that have to pick the maintenance after you were ‘clever’ and ‘humanised’ the code.

Or maybe it’s an ironic version of 90s vintage code, hipsterised. That must be it 💁🏻

Notes on CSSConf Australia 2016

I attended CSSConf Australia in Melbourne on the 30th of November. A couple days ago, I wrote some generic notes about my experience in this conference and JSConf. This post covers specifically my notes for CSSConf.

The videos for the talks have not been published individually, but the conference was streamed live via YouTube, so you can watch the archived stream (you will have to “jump” to each talk):

And now, to my notes!
Continue reading “Notes on CSSConf Australia 2016”

Using the currentColor CSS keyword

I learnt about this CSS keyword via Glen Maddern’s talk at Cold Front in Copenhagen, back in September, and I was super astonished I hadn’t heard about it before! I guess I do too much JavaScript 😏

Anyway, it represents the current inherited color, so you can use it to create borders and backgrounds and things like that, matching the color of the element, but without actually writing it again! This can help in avoiding repetition and keeping the CSS more manageable, or in Glen’s use case, in writing more responsive components.

Given this HTML code:

<p id="thing">hello <span>world</span></p>

and this CSS code:

#thing {
  color: blue;
  font-size: 3rem;

#thing span {
  padding: 3px;
  background-color: white;
  box-shadow: 0px 0px 20px currentColor;

the color for the box-shadow in the #thing span will be blue, because it uses currentColor, which at that point has inherited blue from #thing. If we change the color of #thing to something else, we do not need to update the code for #thing span. Beautiful!

You could even use CSS variables to set a global colour variable that is used in the document, and currentColor will inherit values set with var. For example:

body {
  --thecolor: red;

#thing {
  color: var(--thecolor);
  font-size: 3rem;

#thing span {
  padding: 3px;
  background-color: white;
  box-shadow: 0px 0px 20px currentColor;

… renders the text red, and the box shadow is red as well.


Unfortunately it seems like calc() doesn’t accept color units yet, which means we cannot do maths on the color values. Otherwise, we could do things such as what CSS pre-processors do, generating new colours using hsla functions, etc.

Notes on Live.JS at JSConf.Asia 2016

I had sketched some ideas for the Web Audio Hackday before flying to Singapore, but I really had to finish them before the actual day came. So I spent Friday doing an intense labour of testing, testing and more testing with the latest versions of the browsers that implement MediaRecorder. Since I was on the business of talking and promoting this API, I was determined to get more people to try it out, but that meant that I needed to be prepared for the “surprises” that working with new and upcoming APIs entail. Namely, that what worked yesterday might not work anymore, and what didn’t might have started to work without prior warning.

That said, my infinitely curious self would not resist flying to such a beautiful city as Singapore and not exploring a little bit of it: I squeezed some time out of the morning to visit the Marina Bay gardens, which again I found baffling (botanical gardens which are cooled down instead of heated!), then did a lot of work, and then later in the afternoon I went to the CSS Conf/JS Conf venue, as Live.JS was going to happen.

And “What is Live.JS?”, you might be wondering. Basically it’s a collective that is dedicated to making audio visual shows using JavaScript. JavaScript!!! It’s a bunch of people, but that doesn’t mean that you will always get the same people in each “show”. In this case, it was

  • Matt McKegg, which would play music using his own Loop Drop instrument for live performances. He built it using Google Web Apps initially, then migrated to Electron when GWA was starting to stagnate. He uses two Novation launchpad controllers, and the sound generation itself is via Web Audio. And it is really impressive, if you ask me!
  • Ruth John, who was VJing. Not sure what the name of her software is, but she makes heavy use of CSS variables (to animate stuff), SVG to draw elements on screen, and of course Web Audio’s Analyser nodes to modify the values of variables, in response to the music being played. Also, Web MIDI so she can use external MIDI controllers to do things such as change layer opacities and switching between effects at the turn of a knob, etc.
  • Martin Schuhfuss, who was controlling the lights in the venue using the DMX512 protocol (which happens to be a close MIDI relative) and a Monumental Hack with CSS property interpolation to run light animations: colour, rotation, focus, etc. This was quite impressive to hear!

I personally I’m a big fan of Matt’s music since I saw him live in CampJS, so I was excited about this event. And of course, I was quite intrigued about the visual side of things. Hearing about the techniques underneath made me giggle and be in awe at the same time: “can’t this be done in a better, proper way, or are these hacks just used for the sheer pleasure of subverting the original purpose of the technology?”, I wondered.

In the meantime, “special cocktails” were served—although they were actually called “codetails” in the leaflet:

  • ES4: Old Fashioned
  • jQuery: Rum Punch
  • Outsourced: Curry and tonic
  • Unicode: Unicorn tears (non-alcoholic)

I had “a jQuery” as it seemed the sweetest of the punch, and chatted around with a bunch of people, then went and admired Matt’s total LoopDrop skills, and wondered again if I’d ever understand how it works for reals.

Then I focused my attention on what the lights were doing: many things. I guess my issue was exactly that: they were doing many things, and I was kind of expecting some sort of carefully built progression which would not happen, because the LiveJS people had just met a day or two ago, and Martin had only had access to the light equipment the same day, because obviously you don’t travel from Germany with a rack of professional light equipment. So there’s only so much you can prepare, and given that Matt’s music is so improvisational, I should probably not expect a heavily synchronised audiovisual show. Still, I couldn’t but admire two facts:

  • a browser was interpolating between CSS values and ultimately this was generating MIDI commands that caused spotlights to move and change colours.
  • that the DMX512 standard did indeed work well enough that he could just show up and control DMX512 lights with his software, without further changes

That was super cool!

People often fixate in the business value of JavaScript, but it’s important to also consider JavaScript as a creative medium which has lots of potential expressivity and also reach by virtue of being online. I’m glad that Live.JS exists to inspire and support this, and I’d love to see even more exploration in this field. Bring it on! 🤘🏼

Here’s the video of this event:

Notes on CSSConf Asia 2016

Previous notes on this conference were decidedly minimalist due to my massive jetlag and lack of rest. Let’s fix it now that I’m back to London–and also the videos are out!

I arrived to Singapore the day before the conference started, i.e. I was to be on a stage less than 24 hours after setting my feet on Singaporean land. This, you imagine well, is nothing less than a recipe for disaster. I slept little on the plane, and when I arrived to the hotel I just had a shower (ah that first shower after a long haul flight…!), went to the mall downstairs to get some food and came back to keep obsessing over my slides until I couldn’t resist it anymore, and went to finally sleep in a proper bed, although not enough, but I would not have been able to sleep more because I was agitated about the talk anyway.

So I was not in my best shape. I was cold, tired, unable to really articulate complicated thoughts. The only thing that was getting me going was adrenaline at that point, and copious amounts of it, judging by the crash afterwards. But let’s not anticipate events…

The venue

It was very nice and warm outdoors, specially coming from London where it was dark and chilly to the bone and we were wearing not only scarves but also gloves! and even hats! One of my favourite things about hot weather is that it’s the perfect excuse to have iced lattes. And so cold drink in hand I went to the theatre where the conference was held.

The entrance hall was fine, but indoors… indoors was a totally different experience. You needed one or two additional layers of clothes to be comfortable—more so if you’re not feeling great, as I was. Still, I sat and listened to the speakers before me.

Much as I love JS, I tend to have a sweet spot for CSS conf talks. They gravitate more towards design, UX and (would you believe it) CSS, which are topics which don’t usually attract the same level of attention, but affect everyone the same or more. So I was genuinely excited for the talks!

The talks

Rachel Andrews: Laying Out The Future With Grid And Flexbox

I had seen an earlier version of this talk last year at Fronteers in Amsterdam. Back then I sort of missed more examples, but this time there were plenty of them, and it was a very informative and useful talk. Plus many of the techniques will be available in stable browsers some time this year—do watch it and start learning so you can start using Grid this year! (you can already use flexbox today).

Kenneth Ormandy: Syntax Highlight Everything

When Kenneth started speaking, super fast and super charged, my first thought was “oh wow I don’t think I can handle this in my current state”… but I pushed myself to listen and the more I listened the more enthralled I became. There was so much good material, although the title seemed a bit contrived and slightly disconnected from the actual talk content: started talking about syntax highlighting but ended up going through new CSS font features…? But maybe if I rewatch it again I’ll think otherwise:

Chris Lienert: Access All Areas

A poignant talk on accessibility and best practices. Definitely got me thinking.

Sarah Drasner: Functional Animation

Sadly I didn’t finish watching this one, but what I saw was really good. Lots of info about do’s and don’ts about animation on the web, user flow, UX… all very good stuff! Happy to finally see the whole talk now!

And my talk: make websites, not apps

Normally, I find it this “hot outdoors-freezing indoors” concept baffling. But in this context it was debilitating.

Half way during my talk I noticed my hands were shaking because of the cold. The only other time I’ve felt like that was during my talk at CampJS 2015, but we were outdoors and it was almost winter, and at least I had a hot cup of coffee in my hand back then! Here I was just trying to squeeze some sense out of my tired, jetlagged brain while working really hard to vocalise and not shiver uncontrollably. Ahhh!

Still, I think it wasn’t too bad: I got the message across. Many people reached out to me afterwards, saying they felt very empowered by my advice and excited to keep practising their craft –CSS– and becoming even more proficient at it, without feeling demeaned or less of a developer because of they not using or developing JavaScript, or not developing apps.

Others were also excited by the prospect of rendering engines such as Servo‘s WebRender making their life easier so they can write readable CSS without worrying about implementation details or using obscure hacks.

Even more, someone got inspired by the key concept in my talk (building along the Web’s direction) and gave a lightning talk:

Thanks, Souvik! (slides are here, but unfortunately I don’t think the lightning talks were recorded).

So I will call it a success. I am not done with “banging this drum” yet, and a proper write up is coming, but you can check out my talk in the meantime:

(gosh, I sound so tired)

In which Sole eventually becomes really debilitated and leaves the venue to rest

My talk was the last one before lunch. Joshua Koo (mighty three.js contributor which wrote the text class amongst other cool particle stuff) suddenly became our restaurant guide, as a local. So we went to this indian vegetarian place, and it was lovely.

The issue is that we sat in a long table, and more and more people kept adding themselves to the group. What was initially 4 people grew to 6, 8, 10… I lost track. And people started to wait for each other’s food before starting to eat, which is fine in a table of four, but not when you have lost track of how many people are in the table. Cold bread is bad bread.

I was so hungry. I think I had had a muffin or something ridiculous like that, very early in the morning, and didn’t snack on anything on the first break. So I was really suffering as my food was in front of me and I was not able to eat it due to following the ‘social construct’, and meanwhile it was getting cold, and because I hadn’t slept or eaten much, I was also getting colder and colder. Eventually I gave up and started grabbing bits of the bread, and someone else kind of started doing the same, and the people whose food hadn’t come yet gave us the ‘approval’ to eat, so we could stop pretending to just be content with some morsels, and eat for reals.

We talked about various experiments we were working on. Joshua has always so many ideas going on! Sounds familiar? I showed him my early 3d presentation framework prototype, which heavily relies on his text to 3D code!

Unfortunately after about 15 minutes my adrenaline seemed to be gone. My brain refused to listen much more—I guess it preferred to focus on the food I had just given it. I started to zone out, and become more of a listener than an active person at the table. Soon after we went back to the conference venue for the next talks. Sarah was speaking, and it sounded so great and informative, but 2 minutes after I sat down I started to not only feel really cold beyond anything I had felt before, but also see things flying past my eyes. At which time I decided it was stupid to keep torturing myself, and I went back to the hotel for “a 15 minutes nap”.

It was way more than that.

I woke up with the usual disturbed sleep weirdness: dry mouth, a terrible headache, hungry again, and specially: not cold, and not seeing flying things past my eyes! Wonderful!

The conference was almost over—and with that and my massive headache, there was no point in going back. And I had already done my talk! It was OK. I walked around the neighbourhood. I found a strange shopping mall full of used text book shops. Shop after shop of text books, and other books, and office supplies and office furniture. Also a massive art and crafts store. A most peculiar shopping mall. Colonial houses mingling with practical high density colourful blocks. Clean streets. I walked through all that in a sort of dream state—am I really here? How is this so warm and nice, it was very cold yesterday? Or was it the day before yesterday already?

I had dinner, and went to bed again, happy to have met so many nice people and have inspired at least a handful of them. The community was very open and respectful, and it was really wonderful to talk to them, hear what they are working on, what they’re concerned about and learn about how the tech scene is right now in Singapore. I am still genuinely sorry that I was in such a terrible state and couldn’t make the most out of the conversation 😭

Thanks to Thomas, Aysha and Zell for having me! It was a pleasure 😃