That whole “blog” thing

In the beginning of March, I blurted this out in pure frustration on Twitter:

Then, a few weeks later, a gentleman named Paul Lloyd tweeted:

Great minds think alike, yes? 😉 Jeremy Keith shared our view as well. I think this is great for many reasons. For my own part, I created this blog (or journal as I so “hipstery” chose to call it) just to have something fun to tinker with all the time. Plus, I really wanted to get in on this whole static site generator craze everyone was talking about. As a side bonus I got to learn and refresh a whole slew of skills, like setting up and securing a server on Digital Ocean, making build scripts that trigger when I push to Git and more. It’s plenty of fun and it allows me to play with things that I don’t always necessarily get to do at work.

There’s more to it, though. Someone once said that owning your content is a pretty good thing. I’m sad to say that I can’t remember who said it, but it’s a good thing nevertheless. I honestly can’t understand why some great authors chose to publish on Medium, but to each his own, I guess. Reading stuff on Medium is fine, I suppose. Still, their highlighting feature is really weird and distracting.

In any case, my initial tweet on the matter was borne out of frustration. I was frustrated that people that had great and interesting things to say chose to chop it up in 140 character bits and streamed it intermixed with other people more or less useful thoughts. Threading on Twitter is horribly broken at times and if you instead chose to publish your thoughts on something more user friendly than a Twitter thread (and hey, you can always tweet about that post afterwards), then I salute and thank you!

Keep posting great stuff, I will keep reading it and share it with others.

No more prefixing

As I was tinkering with the code for this site, as one does on a Sunday afternoon, I came to realise that I hadn’t done some proper, old-school browser testing in Internet Explorer for a while. I had been doing a lot of refactoring in my gulpfile.js and exchanged some packages for others, most notably the package for minifying my CSS. I had been using gulp-cssnano for quite a while without giving it any thought (I can’t even remember which package I had use prior to that one).

Opening the site up in Internet Explorer 9 on Windows 7 revealed that a few things like font declarations didn’t work at all and after some debugging it turned out that cssnano was indeed the culprit. I didn’t delve too deeply into the cause of the issue, but instead ended up switching to gulp-clean-css, since it did the same thing without breaking IE compatibility. Good enough!

While debugging in IE, something else did catch my eye, though. Man, there sure is a lot of prefixed properties in here! Most of them was for flexbox, which I’m only using on a few places like the footer and the main layout to get a sticky footer on pages with less content. Dropping these would mean that IE 10, to name one, would not get the same slick layout (well, slick-ish, you know…) as modern browsers. And you know what? That’s just fine. The upside was that I got to trim away a few packages in my node_modules folder, not to mention that I got to delete a few extra lines in my gulpfile.js. That felt really good!

I did some checking and since I use display: inline-block; on elements that normally would be flex-items in supporting browsers to at least get them to appear next to each other, things looked pretty ok. Nothing looked too broken and all the content was fully accessible.

So what am I getting at with all this rambling, then? Well, most vendor prefixes are on their way out the door and to my knowledge, new prefixes are not coming in anymore. If we just apply some progressive enhancement thinking to our CSS as well, we can cut down on complexity in our tool stacks (and you know that’s normally not a thing these days!), plus we’re also cutting down on the amount of code our users are downloading.

Almost all major browsers are evergreen today and feature support is rapidly progressing across the board. Vendor prefixes was an unfortunate hiccup along the way, that got picked up by developers and misused. It’s time we left that stuff behind us.

On browser support for evergreen websites

“Pixel perfect” meant “this website looks like this graphic”. Designers reacted in horror that users might increase their text size. Browser compatibility ranged from “Best Viewed in Internet Explorer” badges to the development of two separate sites, one for each browser in order to ensure the same design was shown to each.

I remember those days back in the 90s and early 2000s. While it was fun to tackle such challenges, I still shudder thinking back knowing what I know now.

We don’t have 99% browser support for border-radius, or for pretty much anything introduced in the last few years. If you think you need 99% support to use any CSS you probably had best stop using CSS altogether.

So true. Applying progressive enhancement in all your work makes your job a lot easier in the end. The challenge is selling the idea to your client. In my experience, transparency is key. Be open with how you communicate your ideas and what benefits it will offer. Telling them that a majority of their users will receive the high-end experience, but at the same time a wider audience can be reached, helps a lot.

Vim and Apple’s Touch Bar

Since we basically lost the escape key with the new MacBook Pro models that came out at the end of 2016, Vim users needed a solid backup plan if they were to get one of the new laptops. Harry Roberts has put together some really nice things to consider with regards to the escape key:

For almost as long as I’ve been using Vim–which is a long time now–I’ve been using jj and jk to leave Insert mode. These mappings are on the Home Row, so always easy to reach, and the letter pairs very rarely (if ever) occur in the English language. If there were words that contained jj and jk next to each other then I would be flung straight into Normal mode any time I tried to write them. (The reason I haven’t mapped kk to Escape is because it does occur within words, e.g. bookkeeper.

What did I do? Well, as a macOS Sierra user, I just followed the advice of a former colleague and remapped my Caps Lock key.

Update: As of macOS Sierra 10.12.1, the Caps Lock -> Escape remapping can be done natively in the Keyboard System Preferences pane! To remap without any 3rd party software, do the following:

  • Open System Preferences and click on ‘Keyboard’
  • Click on ‘Modifier Keys…’
  • For ‘Caps Lock (⇪) Key’, choose ‘⎋ Escape’
  • Click ‘OK’

(See screenshot for reference).

Ending the dyslexia legibility experiment

Back in February, I decided to do a little experiment right here on my journal web site, whereby I added a simple JavaScript function to toggle styling that should increase the legibility for people with dyslexia. Partly, it was for me to do some JavaScript hacking, but also to try and get some feedback about the validity of the write up “A Typeface For Dyslexics? Don’t Buy Into The Hype”.

Nine months have passed since I published that post, and I feel it’s time to remove the toggle from my web site. While I did get some amount of response from people suffering from dyslexia, I felt it wasn’t quite enough. I’ll update the original post in due time and move the experiment into its own lab page.

I’d like to thank those to gave feedback and helped me do this little experiment (you know who you are 😊).