Journal

The internet’s source of freely usable images. Powered by creators everywhere.

I’ve seen a couple of other developers use photos from Unsplash in their demos, and it just came in handy for me recently when needing some free food photography for a website.

It’s choc-full of lovely – and free – high-res photographs, offers a simple URL-based pattern for embedding, and has an API so will be really useful.

A couple of weeks ago I was kindly asked to provide a guest DJ mix for the Vic’s Sunday Soundclash show on Radio Magnetic.

You can listen to the show on demand.

Here’s the tracklist for my mix:

• Black Uhuru - Chill Out
• Jackie Mittoo - Oboe
• Joe Higgs - There’s A Reward For Me
• UBrown - Me Chat You Rock
• Riddim Tuffa ft OBF - Food Dub Ninja
• Mosca - Prento
• The Royals - My Sweat Turns To Blood
• Tatham/Ranks/Lord/Mensah - Private Life
• Freddie McGregor w/ Sound Dimension - Africa Here I Come
• Carlton Patterson w/King Tubby - King At The Controls
• King Tubby - Herbal Dub
• Carlton Coffie - Chant Away
• Fabian - Prophecy
• Prophecy Dub

I really enjoyed the chance to pull together reggae, dub and dancefloor favourites (old and new) for the mix. Cheers for the invite, Vicky!

You can catch Vic’s Sunday Soundclash on the first Sunday of each month at 2pm on Radio Magnetic.

Here’s a comprehensive and great-looking CSS reference featuring lots of examples.

While these days I normally reach for MDN Web Docs to keep me right on any given CSS feature, I’ve been thinking that with the recent explosion of new CSS features and syntax it’d be great to do a refresher course by working my way through a structured list of features—just like I did with Eric Meyer’s CSS: The Definitive Guide back in the day—and Codrops’ reference could be the perfect place.

In a similar vein, the CSS-Tricks Almanac looks good and cssreference.io is worth bookmarking, too.

Sliders (or carousels) are a fairly common practical requirement in web projects. Here, Chris Coyier shows us how far we can get in 2019 with HTML and CSS alone.

Automatically compiles SASS/SCSS files to .css and .min.css upon saving. You may also quickly compile all SCSS/SASS files in your project.

As I consider different ways in which to simplify my development stack and avoid excess tooling (much like Michelle Barker did), this might be worth a look.

(via @MicheBarks)

Here’s a nice CSS-only hover technique from Trys Mudford incorporating scale transforms, opacity transitions and mouse pointer events.

For many years I’ve been applying cursor: pointer to buttons because it felt right and would improve the user experience.

As Florens Verschelde explains, that approach is probably best avoided. I was going against the W3C’s spec that cursor: pointer should be reserved for links, and was adding to the usability antipattern where “everything resembles a link”.

I’ll leave button cursor behaviour as it is from here on in.

I realised last night while watching a presentation by Lea Verou that I could streamline my CSS Grid layouts.

I’d been creating an overall page grid by setting body { display: grid; } then some grid areas but realised that this only worked for direct children and didn’t help with aligning more deeply nested elements to that outer grid.

For example in the case of the main header if I wanted its child logo, nav and search elements to snap to the body grid then I found myself having to duplicate the display: grid and grid-template-areas again on the header.

It didn’t feel very DRY but my understanding was that while we await subgrid, it was a necessary evil.

What I should have been using is display: contents.

If you set your header to display: contents then the parent (body) grid layout will apply to the header’s contents (logo, nav, etc) as if the header element (the “real” direct child of the grid) wasn’t there. This gives us good semantics without the need to redefine the grid on the header.

Here’s a codepen to illustrate.

I was aware of the existence of display: contents but somehow it hadn’t sunk in because I’d only read about it in the abstract. Lea Verou’s explanation made all the difference. Cheers, Lea!

Update 4/5/2019

Frustratingly, I’ve learned that although we can apply this technique, we shouldn’t… or at least not for a while.

Due to a bug in all supporting browsers the property will currently also remove the element (header in our case) from the accessibility tree meaning that its semantics will be lost.

For reference, see:

• https://github.com/w3c/csswg-drafts/issues/3040
• MDN’s display property docs

Update 11/4/2021

Thanks to Rachel Andrew for the heads-up that this issue is now fixed in both Firefox and Chrome.

We’re now just waiting for Edge and Safari to roll out fixes before we can regard this as a safe option.

Fair play, Jeff – once this interview gets going it’s pretty damn good.

Amongst other ground, it covers:

• The technique of “Subtraction”;
• the last quarter of records being the best;
• the bar for electronic music being set too low;
• the complexity of the art form of DJing; and
• thinking about other things while DJing in front of 2000 people…

Plenty of good bits to chew over!

A while back I read a great SVG icon tip from Andy Bell which I’d been meaning to try and finally did so today. Andy recommended that for icons with text labels we set the width and height of the icons to 1em since that will size them proportionately to the adjacent text and additionally lets us use font-size to make any further sizing tweaks.

As previously mentioned, I’ve recently been working on my SVG skills.

Andy Bell’s SVG icon-sizing technique is really clever and feels like it adds lots of flexibility and future-friendliness so I was keen to try it out.

Here’s how it works.

The HTML:

<a class="call-to-action" href="/">
  <span>I’m a link</span>
    <svg 
    class="cta-icon" 
    aria-hidden="true" 
    width="1em" 
    height="1em" 
    viewBox="0 0 14 13" 
      xmlns="http://www.w3.org/2000/svg">
      <path 
      fill="currentColor" 
      fill-rule="evenodd" 
        d="M3.49.868l7.683 3.634a2 2 0 0 1 .052 3.59l-7.682 3.913a2 2 0 0 1-2.908-1.782V2.676A2 2 0 0 1 3.49.868z">
    </path>
  </svg>
</a>

<a class="call-to-action call-to-action-alt" href="/">
  <span>I’m a large link</span>
    <svg 
    class="cta-icon" aria-hidden="true" 
    width="1em" height="1em" 
    viewBox="0 0 14 13" 
      xmlns="http://www.w3.org/2000/svg">
      <path 
      fill="currentColor" 
      fill-rule="evenodd" 
        d="M3.49.868l7.683 3.634a2 2 0 0 1 .052 3.59l-7.682 3.913a2 2 0 0 1-2.908-1.782V2.676A2 2 0 0 1 3.49.868z">
    </path>
  </svg>
</a>

The CSS:

a { color: rgb(183, 65, 14); }

a:hover { color: #6A2000; }

.call-to-action {
  display: inline-flex;
  align-items: center;
  font-weight: bold;
}

.call-to-action-alt {
  font-size: 2rem; 
}

.cta-icon {
  margin-left: .5em;
  font-size: .8em;
}

Here are my key takeaways:

• By applying width and height of 1em to our icon it is predictably sized by default.
• It can now have its size further tweaked in CSS using font-size, for example with ems (where 1em = the font-size of the parent anchor element).
• This technique requires the viewbox attribute being present on the svg.
• Apply the width and height =1em as inline attributes on the svg. We could apply them using CSS, however the inline approach avoids potentially massive icons showing in cases where CSS doesn’t load.
• To get the colour matching, apply fill="currentColor" as an inline attribute on the svg’s path.
• Now, when you apply a hover colour to the anchor in CSS, the icon will just pick that up. Nice!
• Applying inline-flex to the anchor makes the vertical-alignment of text and icon easier.
• Apply aria-hidden to the icon because it’s mainly decorative so we don’t want it read out by screen readers.

And here’s a demo I created to test-drive the technique.