custard doughnuts

Back in the bad old days of web development it was very difficult to style a HTML select element. Some browsers relied on the underlying operating system to render them, making it very hard to change their appearance in any way.

That was all a long time ago, though. Things are better now, right? Right?

I used to do a fair bit of frontend development in my spare time, but in recent years it's been increasingly difficult to find the time and energy to do so.

Today I wanted to make some changes to the CSS of my website. I've got a repo for this that I set up a few years ago. I run gulp, make some changes, everything gets built and minified and I copy the resulting CSS file up to the server. Job done.

Except, this time, it wasn't so simple. Here's what happened.

Gmail's got a new look. Rather than allowing us to keep the old look as an optional theme, it's been forced upon us. I can't complain though, since I get email entirely for free.

Instead, I thought I'd explain some of the reasons I don't like the new look, and do something about it.

It's been possible to make circles, semi circles and quarter circles using only CSS ever since the border radius property came along. But what if you wanted to make a circle with more than four segments?

I've seen it done but only occasionally and in a very fixed way. If there was a way of generating a single segment of a circle based on a mathematical formula, would it be possible to write a CSS mixin to generate a circle containing any number of required segments? Short answer: yes.

I've worked on a lot of websites and seen a lot of front end code. Some good, some bad. Some... really bad.

More often than I'd like, I encounter the same patterns of badness. Here's a few examples of the kind of things that some front end developers do that drive me to despair. Warning: this is going to get technical.

Making a map interactive on a webpage has always been a bit of a pain. The basic problem is that elements on a webpage are rectangular, whereas countries and regions of the world are, well, lots of different random intersecting shapes. Clicking on a part of the map and turning that into a meaningful location isn't so hard, but highlighting regions when you hover over them is more difficult.

There's various ways around this problem, from the simple (using an imagemap) to the complex (licensing some complex SVG plugin). But how about good ol' fashioned straightforward HTML, CSS and JavaScript?