Tags: lesson

9

sparkline

Thursday, June 27th, 2019

What I Learned Co-Founding Dribbble – SimpleBits

Twenty hard-won lessons from Dan from ten years of Dribbble.

We sent 50 shirts along with a card to friends and colleagues announcing Dribbble’s beta back in 2008. This first batch of members played a pivotal role in the foundation of the community and how it would develop. The shirt helped guilt them into actually checking out the site.

I think I still have my T-shirt somewhere!

Wednesday, May 29th, 2019

Reducing motion with the picture element

Here’s a clever tiny lesson from Dave and Brad: you can use prefers-reduced-motion in the media attribute of the source element inside picture.

Thursday, May 16th, 2019

TIL (Today I learned) - Manuel Matuzović

At Clearleft, we’re always saying “Everything is a tiny lesson!”, so I love, love, love this bit of Manuel’s website where notes down short code snippets of little things he learns.

Thursday, April 18th, 2019

Inlining SVG background images in CSS with custom properties

Here’s a tiny lesson that I picked up from Trys that I’d like to share with you…

I was working on some upcoming changes to the Clearleft site recently. One particular component needed some SVG background images. I decided I’d inline the SVGs in the CSS to avoid extra network requests. It’s pretty straightforward:

.myComponent {
    background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

You can basically paste your SVG in there, although you need to a little bit of URL encoding: I found that converting # to %23 to was enough for my needs.

But here’s the thing. My component had some variations. One of the variations had multiple background images. There was a second background image in addition to the first. There’s no way in CSS to add an additional background image without writing a whole background-image declaration:

.myComponent--variant {
    background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>'), url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

So now I’ve got the same SVG source inlined in two places. That negates any performance benefits I was getting from inlining in the first place.

That’s where Trys comes in. He shared a nifty technique he uses in this exact situation: put the SVG source into a custom property!

:root {
    --firstSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
    --secondSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

Then you can reference those in your background-image declarations:

.myComponent {
    background-image: var(--firstSVG);
}
.myComponent--variant {
    background-image: var(--firstSVG), var(--secondSVG);
}

Brilliant! Not only does this remove any duplication of the SVG source, it also makes your CSS nice and readable: no more big blobs of SVG source code in the middle of your style sheet.

You might be wondering what will happen in older browsers that don’t support CSS custom properties (that would be Internet Explorer 11). Those browsers won’t get any background image. Which is fine. It’s a background image. Therefore it’s decoration. If it were an important image, it wouldn’t be in the background.

Progressive enhancement, innit?

Thursday, February 21st, 2019

A tiny lesson in query selection

We have a saying at Clearleft:

Everything is a tiny lesson.

I bet you learn something new every day, even if it’s something small. These small tips and techniques can easily get lost. They seem almost not worth sharing. But it’s the small stuff that takes the least effort to share, and often provides the most reward for someone else out there. Take for example, this great tip for getting assets out of Sketch that Cassie shared with me.

Cassie was working on a piece of JavaScript yesterday when we spotted a tiny lesson that tripped up both of us. The script was a fairly straightforward piece of DOM scripting. As a general rule, we do a sort of feature detection near the start of the script. Let’s say you’re using querySelector to get a reference to an element in the DOM:

var someElement = document.querySelector('.someClass');

Before going any further, check to make sure that the reference isn’t falsey (in other words, make sure that DOM node actually exists):

if (!someElement) return;

That will exit the script if there’s no element with a class of someClass on the page.

The situation that tripped us up was like this:

var myLinks = document.querySelectorAll('a.someClass');

if (!myLinks) return;

That should exit the script if there are no A elements with a class of someClass, right?

As it turns out, querySelectorAll is subtly different to querySelector. If you give querySelector a reference to non-existent element, it will return a value of null (I think). But querySelectorAll always returns an array (well, technically it’s a NodeList but same difference mostly). So if the selector you pass to querySelectorAll doesn’t match anything, it still returns an array, but the array is empty. That means instead of just testing for its existence, you need to test that it’s not empty by checking its length property:

if (!myLinks.length) return;

That’s a tiny lesson.

Sunday, December 9th, 2018

What I Learned in Six Years at GDS ◆ 24 ways

Blogging about what you are working on is is really valuable for the writer because it forces you to think logically about what you are doing in order to tell a good story.

It’s also really valuable to blog about what you’ve learned, especially if you’ve made a mistake. It makes sure you’ve learned the lesson and helps others avoid making the same mistakes.

Monday, May 1st, 2017

Offline Web Applications | Udacity

This is a free online video course recorded by Jake a couple of years back. It’s got a really good step-by-step introduction to service workers, delivered in Jake’s typically witty way. Some of the details are a bit out of date, and I must admit that I bailed when it got to IndexedDB, but I highly recommend giving this a go.

There’s also a free course on web accessibility I’m planning to check out.

Sunday, March 19th, 2017

Better Web Typography for a Better Web

A free ten part email course on web typography for designers and developers. The end results will be gathered together into a book.

Monday, May 6th, 2013

Lesson

First published in issue 3 of The Manual.

Before I settled into making websites, I was something of a drifter. I spent my early twenties busking and hitch-hiking my way around Europe. In retrospect, it was as if I were waiting for the web to be invented.

I eventually settled in the town of Freiburg in Germany’s Black Forest. There was still no sign of the web so I continued to earn money by playing music on the street. German society has a reputation for being efficiently well-structured and, true to form, there were even rules about which times of day were suitable for busking. I could play music on the street between 11am and noon, and between 4:30pm and 6pm. Playing outside those hours was verboten.

I sometimes bent the rules. Technically, I didn’t play on the street outside the officially-designated times, but I did play under the street in a pedestrian passageway that had particularly good acoustics. I think I could legitimately claim that I was just practicing and if any passers-by happened to throw money into my bouzouki case, well that was just a bonus.

There was just one problem with this underground passageway. It was quite close to the local police station and the occasional police officer would pass through on his way to work. There was one plainclothes policeman in particular who told me to stop playing the first time he walked past. When he caught me again, his warning was more stern. He recognised me. I recognised him. Even when I wasn’t playing music, we would see each other on the street and exchange glares. In my mind I filed him under the “nemesis” category.

One day I was walking into town to find a good spot to play (during the appointed hours, I might add) when it started to rain. I didn’t have much further to go but there was a tram stop right next to me and a tram was pulling up, headed in the right direction. “It’s only one or two stops,” I thought. “I might as well hop on.”

The tram system operated on a trust system. You could just get on a tram and it was up to you to make sure you had a valid ticket. This system was enforced with occasional inspections but they were very rare. I was taking my chances by riding the tram for two stops without a ticket but it didn’t seem like much of a gamble. This was the day that my luck ran out.

Two inspectors got on the tram and started checking tickets. When they came ‘round to me, I told them that I didn’t have a ticket. The punishment for schwarzfahren—riding without a ticket—was an on-the-spot fine of 60 deutschmarks (this was back in the days before the euro). I didn’t have 60 marks; I didn’t have any money at all. They asked to see my identification. I didn’t have any identification with me. They took me from the tram and marched me off to the police station.

One of the cops sat me down at his desk. He asked me for my details and pecked my answers into his typewriter. Once he had my name and my address, we got down to the tricky matter of figuring out what to do next. I told him to simply let me go so that I could play music on the street during the appointed hours. Once I had busked up 60 marks, I would go to the transport authority and pay my fine. He gruffly pointed out the flaw with that plan: because I had no ID with me, there was no way they could know for sure that I was who I said I was or that I lived where I said I lived. So if they let me go, there’s no incentive for me to pay the fine. I gave him my word. He didn’t accept it. We had reached an impasse.

At that moment, who should walk in to the police station but my plainclothes nemesis. “You!” he said as soon as he saw me. My heart sank. Now I was in real trouble.

“Oh, you know this guy?” asked the policeman at whose desk I was sitting. “He was riding the tram without a ticket and he doesn’t have money for the fine. He claims he’s going to make enough money to pay the fine by playing music on the street. Can you believe that?” he asked mockingly.

“Yes,” said the plainclothes cop. “He’s good. He’s got a really unique voice.”

I was flabbergasted! My sworn enemy was vouching for me! He looked at me, nodded, and continued on his way.

His word was good enough. They let me go with a slip of paper that I was to take to the transportation office when I paid my fine. I’m sure they thought that it was a lost cause but I went out busking that afternoon and the next morning until I had earned 60 marks. Then I went out to the transport authority—paying for my tram fare this time—and I gave them the money and the slip of paper from the police station. I kept my word.

There’s a lesson to be learned here, and it’s this: you should always give money to buskers.