Skip to main content

Journal

JavaScript Arrow Functions

A web posted on in

JavaScript arrow functions are one of those bits of syntax about which I occasionally have a brain freeze. Here’s a quick refresher for those moments.

Differences between arrow functions and traditional functions

Arrow functions are shorter than traditional function syntax.

They don’t bind their own this value. Instead, the this value of the scope in which the function was defined is accessible. That makes them poor candidates for methods since this won’t be a reference to the object the method is defined on. However it makes them good candidates for everything else, including use within methods, where—unlike standard functions—they can refer to (for example) this.name just like their parent method because the arrow function has no overriding this binding of its own.

TL;DR: typical usage

const doStuff = (foo) => {
  // stuff that spans multiple lines
};

// short functions
const add = (num1, num2) => num1 + num2;

Explainer

// Traditional Function
function (a) {
  return a + 100;
}

// Arrow Function Breakdown

// 1. Remove "function", place => between argument and opening curly
(a) => {
  return a + 100;
}

// 2. Remove braces and word "return". The return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;

References

How to optimise performance when using Google-hosted fonts (on CSS Wizardry)

A link posted on in

A combination of asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains makes for an experience several seconds faster than the baseline.

Harry Roberts suggests that, while self-hosting your web fonts is likely to be the overall best solution to performance and availability problems, we’re able to design some fairly resilient measures to help mitigate a lot of these issues when using Google Fonts.

Harry then kindly provides a code snippet that we can use in the <head> of our document to apply these measures.

Modern CSS Solutions

A link posted on in

Modern CSS Solutions for Old CSS Problems

Stephanie Eckles with a beautifully presented series of articles on how to use modern CSS to tackle some of the enduring challenges of web development including dropdown navigation, centring and styling buttons.

CSS Section Separator Generator (on wweb.dev)

A link posted on in

A handy tool that generates the required HTML and CSS for various section separator effects (including diagonal lines, spikes, and waves) by cleverly manipulating backgrounds and generated content.

An ebook boilerplate (on Go Make Things)

A link posted on in

My ebook boilerplate is a command-line script that uses Pandoc, wkhtmltopdf, and Calibre to compile all of the files, syntax highlight code snippets, and automatically generate all of the file formats.

I’ve recently been discussing with Clair some options for publishing an ebook, which reminded me of this.

This is Chris Ferdinandi’s set-up for creating an ebook in multiple formats (PDF, EPUB, MOBI, HTML) from a collection of markdown files.

Also useful, on the same subject: Heydon Pickering’s Every Layout is Released: Some Facts and Andy Bell’s Every Layout: How it works

Isolated Moments: March 2020 Records

A entry posted on in
Laurence’s record purchases in March 2020

What would you do without your music?

So sang D-Train on Music and never has the sentiment resonated more than during the current Coronavirus situation.

Cooped up at home and deprived of face-to-face contact with friends and family, I’ve found that music can really lift the spirits.

Fortunately, the supply of great records hasn’t stopped and there are a number of trusty online stores to keep us connected.

Let’s dive into the stack of wax that has been keeping me (mostly) sane during lockdown.

The Stance Brothers - Minor Minor

Here’s a pair of jazzy hip hop instrumentals from Finland, both riffing on the bassline from Bob James’ classic Nautilus. This 7″ was introduced to me by Tom a couple of years back and has just had a welcome repress. Fans of Marc Mac’s Visioneers project, Kenny Dope and BadBadNotGood won’t go wrong here.

Favourite Track: Minor Minor

Grab a copy on Bandcamp

Golden Ivy - Kläppen (LP)

Beautiful sounds from Malmo that straddle the organic and the electronic, settling on something vaguely oriental. I was relieved to snap up a copy before it disappeared, given that their previous LP – Monika - is as rare as hen’s teeth and still eludes me. Alas the parcel is currently languishing, unloved, on my desk at work, having arrived there from Gothenburg just a day after the office shut for the lockdown. Damn it! Good things come to those who wait…

Favourite Track: Klappen 11

Grab a copy on Discogs

D.K. - Live at the Edge (LP)

My favourite release to date from Parisian producer D.K. was his stellar collaboration with Suzanne Kraft on Melody as Truth in 2017. This LP ploughs a similar sensous, ambient furrough and would have been a pretty tasty live gig (if you happened to be in Seoul at the time). Yet another great release from Glaswegian label 12th Isle, with beautiful artwork to boot.

Favourite Track: Untitled 11 (not yet on YouTube)

Grab a copy at Rubadub

Datassette – Existenzmaximum

I’ve loved Datassette since his first outing on Ai records back in 2005. He’s got such a great sound – simultanesouly futuristic, funky, musical and heartfelt in a way that few electronic producers can match. This EP (from November last year but just repressed) is typically brilliant.

Favourite Track: Shooz Who

Grab a copy on Bandcamp

Various - Gazillions

These days I try not to buy records for just one track, but this is something special. Top cut Lotus Turbo by Russian duo Formally Unknown is a hard-hitting blend of electro and bass that sounds pretty fresh to these ears. This one is screaming to be played loud.

Favourite Track: Formally Unknown – Lotus Turbo

Grab a copy on Bandcamp

Various - Bubble Chamber (LP)

I’d urge any fans of serious electro to get on this tout suite – you won’t be disappointed. It boasts a formidable line-up, featuring tracks by Gerald Donald, The Exaltics and Plant43 to name but three. The music comes from a variety of locations and eras; we get Montreal-based Iko’s 1983 track Approach on Tokyo nestling alongside new music from Detroit. Kuldaboli from Reykjavík is a new name on me but offers up the pick of the bunch. Oh, and the vinyl also comes with a 56-page booklet containing previously unseen Drexciyan art by Abdul Haqq… which is nice.

Favourite Track: Kuldaboli – Draumur inní heilann þinn

Grab a copy at Vinyl Underground

Max D - Many Any (LP)

Solid LP from one half of Beautiful Swimmers, taking in house/techno cuts that evoke vintage Morgan Geist and Ferox, interspersed with hip hop influences. Big up my man Gav aka Other Lands at Underground Solu’shn for the hot tip!

Favourite Track: Shoutout Seefeel

Grab a copy at Rubadub

Online Résumé (maxboeck on Github)

A link posted on in

A beautiful, responsive, print-friendly résumé template from Max.

Some points of note:

  • Accessible (WCAG AA)
  • uses the h-resume Microformat
  • uses a Spellcheck Linter
  • Search Engine Optimized (meta, JSON-LD, etc...)
  • Built with Eleventy
  • Netlify-ready (although hosting choice is up to you)
  • Critical CSS Inlined
  • Print Styles

We’ve ruined the Web. Here’s how we fix it. (This is HCD podcast)

A link posted on in

During the COVID situation, people have an urgent need to access critical information online. But in 2020, the average webpage is rammed full of large JavaScript files, huge images etc, and as a result is slow to load. This problem is likely to be most keenly felt by those who don’t have the luxury of fast internet – potentially the same people who need access to that critical information the most.

Here’s a brilliant discussion between Gerry McGovern and Jeremy Keith on that problem, suggesting tactics to help fix things such as performance budgets, introducing tactics at the design stage to mimic slow connections and other access constraints, optimising for return visits, progressive enhancement and more.

Loved this!

(via @adactio)

A note posted on in

I have to reluctanctly agree on this one. I’ve interviewed quite a few candidates for “front-end developer” (or similarly named) positions over recent years and the recurring pattern is that they are strong on JavaScript (though not necessarily the right time to use it) and weak on HTML, CSS and the “bigger picture”.

A note posted on in

Here’s a neat trick. You can use an emoji as a favicon! I’ve written previously about how to do favicons properly, but for a short-lived hack project you tend to just need something quick and dirty. Chris Coyier has also shared a nice lil’ Codepen website showing the technique in action.

External Link Bookmark Note Entry Search