The personal scrawling of

What I learnt today: making mistakes

I ran into a problem with Grunt a couple of days ago. I noticed that although I set up a task for autoprefixing my CSS files, sometimes the vendor prefixes were missing. I assumed that there was something wrong with the node module and thought about switching to a newer version of it.

But today I discovered it was entirely my fault. I forgot to add the autoprefixer to my watch task hence it would only work when run for production (which skips the watch part). I corrected the watch task and updated my frontend jumpstart template accordingly.

I guess it’s easy to blame technology for failure but I think it’s worth considering that we overlook things too. And that’s what I learnt today.

What I learnt today: adding custom hooks to Processwire

I’ve been using Processwire for quite some time now and yet I’m frequently amazed by how easy it is to extend it’s functionality.

Today I needed to add a new method to an existing Processwire class. At first, I wasn’t really sure how to go about it but after reading the documentation, it was much easier than expected.

I wrote a module which adds a custom hook to one of Processwire’s classes. My code looked something like this:

public function init() {
  $this->addHook('Pageimage::toPicture', $this, 'renderPictureElem');
}

And that’s all there is to it really. I then wrote a function called renderPictureElem which returns some markup when called on a Pageimage class object via the toPicture() method. Because it’s that easy to deal with functionality in Processwire, I often forget that I’m really not a backend coder, or PHP programmer for that matter. But extending Processwire is pretty straight forward and adding custom hooks is no exception. And that’s what I learnt today.

Using the <picture> element in Processwire: revisited

After introducing the notes section on this website, I needed a way to easily render images with picture element markup. So I wrote module for that.

Some time ago I wrote a Textformatter module for Processwire which scanned the content of a textarea for <img> elements and converted them into their previously configured <picture> equivalents.

This worked well until I introduced the notes section on this website. A note may very well contain an image but unlike the images in regular articles the images in notes are not rendered per textarea field. The note template uses Processwire’s Pageimage methods to put out the URL of the image directly into the template hence the Textformatter module I had written wouldn’t apply.

Enter: ImageToPicture module

So once again I wrote a module to solve the issue. After installing it, the module adds a new method to the Pageimage class which allows rendering any image with proper <picture> element markup.

The new toPicture() method can be called like this:

$image->toPicture();

There are some options available, to define queries and image sizes. These are the defaults:

$image->toPicture(array(
  'fallback' => 450, // width for fallback image
  'altText' => '', // alternative text (default is image description)
  'sources' => array(
    '(min-width: 64em)' => 600, // queries and image widths
    '(min-width: 45em)' => 520 
  )
));

Using toPicture() without any options renders the following output:

<picture>
  <source media="(min-width: 64em)" srcset="img-600px.jpg">
  <source media="(min-width: 45em)" srcset="img-520px.jpg">
  <img src="img-450px.jpg" alt="Image description">
</picture>

A customised call might look like this:

$image->toPicture(array(
  'fallback' => 300,
  'altText' => 'My new description',
  'sources' => array(
    '(min-width: 55em)' => 860,
    '(min-width: 27em)' => 450 
  )
));

Which produces:

<picture>
  <source media="(min-width: 55em)" srcset="img-860px.jpg">
  <source media="(min-width: 27em)" srcset="img-450px.jpg">
  <img src="img-300px.jpg" alt="My new description">
</picture>

The code is available on Github – perhaps it might be useful to somebody.

What I learnt today: grunt-autoprefixer

I’m using Grunt for frontend development, mainly to compile SASS and to combine and minify Javascript files. I’ve also been using a Grunt plugin called grunt-autoprefixer which basically uses the Can I use database to check your CSS for properties that need vendor prefixes and adds them to your CSS rules.

Today I was integrating a few templates I wrote into the CMS of a client. When I checked the site in different browsers, I noticed that some autoprefixes were missing. It turns out that the autoprefixer plugin doesn’t work on my iMac but does work on my MacBook. I’ve not yet looked into this but I also discovered that there is a newer version of the plugin that not only adds missing vendor prefixes to your CSS but also provides fallbacks for rem sizing units. And that’s what I learnt today.

What I learnt today: educating clients

I met with a client at their offices today where I gave small a presentation on how to structure the content on a web page properly. I prepared some slides but I also explained things using the CMS I set up for them.

The workshop went well. The participants asked some good questions and I got my points across very clearly. I made them aware of the fact that a properly structured HTML document is not only accessible to search engines but also to every single one of their users.

Although today was a very basic workshop, I realised that there were a lot of new things for my client’s team. I think we often forget that there are people outside our web design bubble that don’t know about those basic principles. And that it’s rather our responsibility to educate them than their fault. That’s what I learnt today.

What I learnt today: water

With 36°C, today was the hottest day of the year so far. I’m not really keen on when it’s that warm, but to make matters worse, today was the day of our annual team run. A team of developers I’m regularly working with and myself joined lots of other companies for a running event.

I’m not a very good runner, but I try to run at least twice a week. And under normal circumstances, this run today would have been easily manageable. But in weather conditions like this, the whole thing became a lot more challenging.

I did well. To be honest: it wasn’t by far as bad as I thought it would be. The crucial point today was water. It sounds trivial, but I tried to drink at least three litres of water every day for the entire week and today I even went for four litres – just in case. I’m certain that drinking a lot of water not only makes me less tired, but also helps me to cope with exhausting situations like running in hot weather. And that’s what I learnt today.

What I learnt today: giving up control

This morning I went to see my new accountant to talk some stuff over. She has been taking care of my finances for a couple of weeks now but up until then, I used to do it myself (well, I tried at least).

The truth is, I’m not an expert when it comes to taxes and forms and all the other things related to the financial side of the business. But I’m not very good at giving up control over something either. That’s why I hesitated a long time before consulting with her.

But today was a bit of an eye-opener for me. She does an incredible job and she also takes her time to explain things to me in a way I understand them. So I guess sometimes it is perfectly ok to give up control and let someone else handle the things that I’m not fond of. Ultimately, this gives me more time to do the things I’m an expert in. That’s what I learnt today.

What I learnt today: link prefetching

Today, one of the clients I’m working with asked me to change the rel attribute on a couple of <a> elements to rel="noindex nofollow". I was almost completely sure that there is no noindex value for the rel attribute but I looked it up anyway.

While browsing through the specification of link types, I came across prefetch. I heard of this particular link type the first time in Scott Jehl’s talk at Beyond Tellerand conference in May, but I had almost forgotten about it.

Time to do some research: prefetch basically tells a browser “when you’ve got the time, go and preload this resource and store it in the cache”. An example could look like this:

<link rel="prefetch" href="some-script.js">

This speeds up the page load process when that prefetched resource is needed and works only for cacheable resources.

There is also a dns-prefetch, which preemptively resolves the IP address of a given domain to save time when that resource is requested. For example:

<link rel="dns-prefetch" href="http://some-domain.com">

I guess using these techniques requires a lot of insights on how the user navigates a website. But I think I might give them a try at some point. That’s what I learnt today.

What I learnt today: the Dvorak keyboard layout

After reading this tweet from Paul Boag, I came across this keyboard that uses e-ink display technology underneath its keys to allow customisable keyboard layouts.

Although I use a keyboard for more than eight hours a day, I actually never thought about why the keys have been arranged the way they are.

I knew there were different keyboard layouts for most languages and that they differ in the arrangement of some single letters and punctuation. I assumed they were all derived from what we know as the QWERTY layout.

But there is another keyboard layout, known as the Dvorak layout, that I had never heard of. Patented in 1936, it was designed to reduce the movement of fingers between keystrokes and therefore allow faster typing and fewer errors. Currently all major operating systems support the Dvorak layout. That’s what I learnt today.

What I learnt today: learning happens everyday

In a recent episode of the unfinished business podcast, Andy Clarke is joined by Jeffrey Zeldman and Jeremy Keith to talk about writing on the web. Jeremy explains his 100 words project and stresses the importance of writing for yourself on your own website. They also touch briefly on the subject of learning and how we sometimes feel we stagnate in learning new things.

This very inspiring conversation got me thinking. To be honest, I’ve been guilty of holding back and self-censorship when it came to writing, although I’ve always wanted to write more. And the reasons are always the same: either I thought the subject I was going to write about wasn’t interesting enough, or I assumed someone else had already written about it.

But when it comes to learning, I don’t really have the feeling of stagnation. Although I’ve been working in web design and development for about 8 years now, I’m picking up new things every day – not to mention the stuff I’m learning outside of work.

I think it really depends on what we define as learning. If we’re talking about picking up a new skill then sure, we don’t learn new things everyday, simply because it usually takes more than one day to do something completely new with confidence. But for me, learning is much more than familiarizing myself with a new technique. In it’s essence, I see learning as a gaining of knowledge. I think people are constantly learning new things, however small they may be, but they’re not really aware of it anymore.

To overcome one issue and appreciate the other, I decided to write about the things I learn everyday. This may be something web design or development related or something completely different. The point is, to recognise that learning happens every day and to be conscious of it.

And that’s what I learnt today.