Journal

Here’s a list of useful (Mac-based) Sketch tips for my reference and yours.

Commands Quick Reference

Key Concepts

Starting with an Artboard

The initial canvas is infinite so we need a fixed frame (representing a device screen) on which to work.

Steps:

1. Add an artboard.
2. From the top-right choose one of the options (presets) e.g. Responsive Web > Desktop (1024 × 1024) or select “Custom”.
3. Rename your layer to something appropriate for the overall task, e.g. News Article.

Creating something

• Show rulers.
• Add markers by clicking in the horizontal ruler at the top to provide gutters. Create them at, say, 32px from each side.
• Add a text element, with lateral boundaries snapped to your markers. If it’s for body text, type my lorem0 shortcut ¹.

Appendix

1. the lorem0 shortcut accesses “lorem ipsum” text which I previously saved into Mac > Preferences > Keyboard > Text.

Bram Stein, a software architect at Adobe, wrote the book on Webfonts, so it’s no surprise that his own website showcases some pretty beautiful typography.

Type is set in Expo Serif Pro, Expo Sans Pro and Source Code Pro.

webmention.app is a great new project by Remy Sharp. He created it because he noticed that while adding webmentions to your site is relatively straightforward, sending outgoing webmentions is less so.

At the moment my personal website is Perch-based and I have webmentions enabled, so let’s see what happens when I link to Remy’s explainer article.

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.