On Indian Roads

Categories Scratched

“Whirring through Delhi’s side streets and dirt lanes, the e-rickshaws leave passengers with dust-filled lungs and shaken bones. Drivers often go against traffic, playing chicken with oncoming buses and trucks. The vehicles’ open sides, handy for hopping on and off, require that riders hang on or risk falling out.”

This article makes traffic in India sound so much more dangerous than it feels. I mean, sure, people drive on the wrong side of the road and go the wrong way down one-way streets, all into oncoming traffic, but everyone is driving according the only road rule that applies here: Don’t crash.


CSS-in-JS Sucks: a romantic rant

Categories Scratched

What is CSS-in-JS?

CSS-in-JS is the generic name for a group of really powerful developer tools that allow us to code a product’s styles in Javascript.

In the olden days, people used to inject CSS into html via Javascript, which created inline CSS on the element it was working on.

We all know inline CSS is evil. Even the people making CSS-in-JS tools know that it’s evil. That’s not what this is.

CSS-in-JS lets developers coding in React to code CSS so that it matches React’s component-based development practice. It creates its own stylesheets that are included in the DOM exactly the way we normally would for regular ol’ CSS.

You can even use it to define critical CSS styles that sit in a style tag within the DOM’s head. It’s pretty amazing.

So, why do you hate it so much, Josh?

So, did I waste your time with some ridiculous link-baity title that Esther came up with and I agreed to?

No. I didn’t. CSS-in-JS fills me with a fear for the sustainability of our web products. I think we use the speed and convenience of being able to code things quickly that we know will scale as products scale to save our customers money now even though they are going to pay more for it down the track.

html & css & js

The way the web renders is a thing of beauty. I really love it. It’s come so far and CSS is what prompted me to start learning to code websites. I understood it implicitly. When I started working with a bunch of Java developers, I could troubleshoot their CSS in seconds. When Ethan Marcotte developed responsive CSS practices, I shouted from the rooftops and changed the way I did everything. Now that the CSS grid spec is being adopted, I’m over the moon about the things we can do with it.

Built into the web, into this wonderful triumvirate of markup and script that gives us cat memes, infinite Medium articles about the same topic, and a hundred different ways to say we liked someone’s photo, is this idea that we can make changes to any one of these pieces and maintain the fidelity of the others. The backbone of the web is modular, in this way.

Nothing made this more clear to me than CSS Zen Garden. It’s a beautiful website that allows anyone to take an existing and standard piece of html and code their own CSS for it, and then share it with the world.

It revealed to me the beauty and simplicity of great web development:

1. html

Everything starts with planned html. Naming is important. Understanding inline vs block elements is important. Understanding the difference between semantic and non-semantic elements is important. These things are important because so many technologies rely on them being the way they were designed. Good html forces us to understand the content that we’re coding for.

  • Is something a button or is it a link?
  • What is the hierarchy of information we want to mansplain?
  • What kind of list is that? Oh, it has terms and then definitions for those terms? Well, it’s a definition list which is totally a thing that most people don’t know exists.

The way html was designed should force us to think about what it is we’re putting on the page. Without either of html’s other webdev buddies, a well-constructed site will still work. It might be ugly and require a lot more scrolling than we wanted, but it will still make sense and the interactions will still work.

2. html + CSS

Then we add CSS to it. For all the beauty in html’s design, it’s a giant oaf compared to the finesse CSS brings to it.

CSS is not just about making things look more visually appealing. That’s part of it. But in reality it’s a deeper dive into the meaning of what we’re creating. This is where selectors, IDs, classes, attributes, pseudo classes and combinators come in. They get us to understand and better display the meaning of what we’re producing by forcing us to make more difficult decisions.

Using CSS, we can make use of the different physical tools people use to interact with what we’ve built. We can create subtleties and nuance and add emotion to something that previously was just words and pictures.

We’re forced to think about how and why something looks and reacts the way it does. We can create emotional responses in our users.

But, in order to do this, we need to really think about what it is that we’re putting on the screen. We need to think about how the html is constructed and what responses we want to elicit from our user. One of the ways we do this is through CSS’s greatest power: the cascade.

The cascade runs through importance, specificity and source order to give us better control over how something will display, but also to give us constraints that tie very closely in with the html, so that what we’re displaying matches the original intention of the page.

This is why class names are so important. Good, semantic class names in the html give us clues about the intention of the page we’re presenting. That intention won’t be fulfilled by the big, clumsy baby that is html. It can only truly be made true by the CSS we produce for it.

As CSS Zen Garden showed us, a single, well-constructed html document can be given all sorts of nuanced meaning through the CSS we attach to it. This nuance should be able to evolve over time as we learn new things about how the users are interacting with our product. We should be able to tweak the stylesheets over time or create new stylesheets for new media that becomes important, by just writing some new CSS. We can create stylesheets specifically for printing so that we can make the digital analogue (although almost nobody does and almost all websites look terrible when printed).

This is why CSS-in-JS bothers me so much. What we gain in speed of development, we lose in sustainability and adaptability. CSS-in-JS is an abstraction from the very nature of the thing we’re producing. It takes away the burden of having to think about the screen and the devices that might interact with it. It removes the value of the cascade by hacking the specificity so that we don’t have to think about it.

By doing that, it removes us, our very selves, further away from the intention of our product. It denies us the privilege of designing the front-end experience at its very DNA.

3. html + css + js

Javascript is an immensely powerful tool. React is an amazing framework that makes coding web applications so much easier. All the different CSS-in-JS tools help us code web applications so much faster. So many articles I read in trying to articulate my argument talk about the reduction of cognitive load that comes with CSS-in-JS. But with that convenience comes a cost that we might not see straight away.

When a client goes through a rebrand, they shouldn’t have to rebuild all of their web assets. When a new technology comes along, future developers shouldn’t have to deal with inherited tech-debt just to make something work.

The web and the specs that define it, give us the perfect opportunity to combine research, design and development, to work in parallel in true agile teams, building with a true lean production ethos. CSS-in-JS strips us of that and leaves us in the old waterfall approach of designers handing over comps to developers, who then just make it work on the screen.

I think we’re better than that.


Some Reading

I need to meet Hugo

Categories Scratched

Last night I successfully deployed Netlify to create a Hugo-based website. You can see it (at time of writing) but it's just a silly default template pretending to be a coffee website.

Screencap of the test post I uploaded last night.

The problem is that Netlify does too much of the work for me, which means I'll still be relying on someone else's service to create the new site. If I'm going to take control, I need to take control properly. I'm taking Willem's advice and I'm going to roll my own.

There's going to be a big learning curve here. I'm going to need to learn about Hugo and its templating system; deal with GitHub pages; establish a workflow that can post based on Markdown files from my computer as well as from my mobile devices.

I use Editorial for text files when mobile. There are workflows available to do all of this, but it's going to take a lot of configuring.

At the same time, I have to play around with the design of the site, look at how I'm going to make the best use of CSS grid and work out how to implement it all.

Looking for a Simpler Way

Categories Scratched

I've wanted to do a few little tinkering projects recently around CSS Grid and also maybe a git-based CMS for blogging.

Writing shouldn't be a chore. I write all my notes in Markdown.I have for years. I work in text editors whenever possible and hate having to rely on services inside a browser to collaborate or create content.

WordPress has done marvelous things over the past few years. They've come a long way into the domain of true commercial CMS competitors. They achieved the goals I always knew they were capable of.

But at the same time, I feel like it now surpasses my needs. I almost never post anymore. I'm more time poor than I used to be and WordPress became an unfamiliar landscape based around SEO and social media and competing with platforms like Squarespace.

I just want to type and post. I want to dabble and play. I want to test out concepts and designs in a much simpler way.

So, I'm going to experiement, starting with Netflify. The theory is that I should just be able to write a blog post in a text file in my text editorand push it to my git repository.

So I'm going to try to minimise the friction between writing and publishing. I used to find it easy and enjoyable. I wonder if I'll get to do that again.

At the moment I'm still waiting for the DNS to propogate, so there's nothing there. This, I'm sure, will be small steps taken over a long time. But I've needed a project around this part of my life for some time.

Post Script: Also, WP doesn't seem to be playing nicely with my Firefox settings at the moment, so that's just another barrier. Sigh.

It’s been two years

Categories Scratched

According to the blog folder I keep on the cloud somewhere, it’s not true that I didn’t write a blog post in the last two years.

But writing and publishing aren’t the same thing (just ask my third episode of This is Modern Living. It sits somewhere, also “in the cloud”, waiting to join its siblings on the outside, but knowing it doesn’t have an ending.

Two years ago, when I wrote the preceding blog post, I was in NYC. I escaped there for four weeks, renting a room in a six-storey walk-up on Houston and Eldridge.

My job of almost six years was over. I hadn’t felt anything in months. When I left Melbourne, Hilary Clinton was on her way to becoming the first female President of the USA. When I landed in LA 14 hours, the news reminded us that a one-in–20 chance is still a good chance. Trump rolled a natural 20 and nobody knew how to feel. I had transported myself to be a numb person surrounded by other numb people.

What I love about New York, though, is its perseverance. Those who move to NYC to pursue a dream do so knowing it’s going to be difficult. There will be hardship. The people in that city continue to exist despite others. They help each other through the hardship.

Two years later and my home was rocked by mindless violence. In Melbourne a man set a car on fire and started stabbing people. He killed a man who meant a lot to many Melburnians. Sisto Malaspina lived his life publicly as the perfect emblem of Melbourne: he made us feel welcome and he fed us.

So much of Melbourne feels touched by his death. So many of us were touched by his life.

I’m seven hours away, by plane. I’ve been living in Singapore for the past 5 months. This country has had the some government for the last 53 years. The current Prime Minister (Singapore’s third) is the son of their first. Some people criticise the government (privately, in their cars). Some continue to spruik the country, taking huge pride in its cleanliness and its airport.

It’s rare to hear a siren here. I don’t know what that means except it's a clear sign I’m not in Melbourne or NYC.

My life has changed a lot in the last two years. I’ve accomplished more than I thought I would. A couple of months later I started a new job. I learnt a lot. I met a lot of passionate people who what to make the world better and intend to do so with technology.

I’m feeling more hopeful than I was then. There’s a lot more to be hopeful about. Nihilism has its benefits, but hope is more likely to get results. That’s where what I’m sitting with now. Hope, action and support. Let’s give that a try.

Politics in November 2016

Categories Scratched

The following are rambling thoughts, typed with exhaustion, as a result of travelling from St Kilda to Soho, New York over 26 hours while an election was happening in the US. It probably has too many pop-cultural references in it.

We were in the air when it happened. The plane landed at LAX and as it headed towards the gate, people started turning on their phones. The text messages spread through the cabin and the conversations started immediately.

It was only when I heard other people talking about it that I realised Lyndal wasn’t playing some kind of terrible practical joke. This was real and the most difficult thing to deal with, at the time, was how credible it actually was.

During the whole lead-up to the election, different news organisations kept pointing to the numbers. The polling showed how far behind Trump was. But the numbers were ridiculous because they were gathered under the rules of the way the game used to be played.

In the first season of the TV show Survivor the contestants began their time on the show trying to survive in a remote location without the luxuries of home. Most of them thought that was the game. People were voted out because they were weak.

The game changed very quickly once Richard Hatch started forming alliances, telling people what they wanted to hear and playing the game the way he saw it. The other players were blind-sided. Even when they knew the way Hatch handled players and situations, they couldn’t keep up or bring the power over to their side.

The game changed before our eyes and we acted too late and couldn’t bring ourselves to play this new game. In this new game governing well is a distant second to power. Power comes from telling people what they want to believe but good governing comes from doing what someone believes is best for everyone.

We saw this play out with Brexit. We’ve seen it in the Philippines. We’ve seen it in Australia.

But we also saw it in Russia.

And we saw it in Animal Farm.

The giant appeared and announced “It is happening again.” And we’re like Agent Cooper, sitting in that roadhouse, knowing that we’re powerless to stop something that has already started.

These are dark times. We might feel helpless. That’s what they want. They will bank on that. Maybe we should start talking about what’s important to us more than every three to five years.

But we probably won’t, because it’s easier to just let it keep happening again and again.

Just remember: it’s a lot easier to push over a pig when he’s walking on two legs.