Just took delivery of this feast for the eyes and ears from Firecracker Recordings. Other Lands, Lord Of The Isles and friends on the sounds; House Of Traps and co. on the stellar artwork. Like the first release this was made in association with The Forestry Commission, is totally unique and I highly recommend grabbing a copy.
With the help of the CSS descriptor font-display: swap; we can use a little less JavaScript to get around web font loading issues.
Just watched You Were Never Really Here, directed by Lynne Ramsay and starring Joaquin Phoenix, with Clair. It’s hard-hitting and intense but really good. My favourite part was the opening 15 minutes which introduces Phoenix’s character Joe and uses Dark Streets from Johnny Greenwood’s excellent soundtrack to set the mood and tension perfectly.
The web and print are different media, however I still find some of print’s time-honoured terminology useful for naming things.
For example I use standfirst to identify intro paragraphs on Greenhill Journal Entries. This Guardian resource is a useful reference.
A free icon pack (with icons in SVG format) that may come in handy when I get around to levelling-up my SVG skills!
Recently, we’d seen some articles suggest that things haven’t changed a great deal with select's styling limitations, but I decided to return to the problem and tinker with it myself to be sure. As it turns out, a reasonable set of styles can create a consistent and attractive select across new browsers, while remaining just fine in older ones too.
Here’s a breakthrough in the always-frustrating field of styling form elements. Scott Jehl of Filament Group introduces a new technique for styling the select element in a modern way without the need for a parent element, pseudo-elements, or javascript. Thanks, Scott!
(via @scottjehl)
A simple snippet for tracking page views on your website without having to add external libraries. This should save bandwidth and have a positive impact on the loading speed of a website. I’d be cautious about using this in production for now, but one to keep an eye on and try out at some point.
My buddy Tom Churchill knows a thing or two about good records so his round up of 2018’s finest releases is well worth checking. He kicks off with a beauty from Australia by Turner Street Sound.
The Clear-Site-Data HTTP header clears browsing data (cookies, storage, cache) associated with the requesting website. It can even be used to deregister service workers.
As a side note, I wonder if it might be an idea for me to update my website boilerplate to contain pages such as /clear-cookies, /clear-storage, and /clear-all. Then, if someone is having some weird cacheing-related problem on a website I developed, I can simply provide them with a link to one of those pages rather than asking them to hard-refresh or launch incognito windows.
A brief explainer (for future-me and anyone else it helps) on what promises are and how to use them. Note: this is not an official definition, but rather one that works for me.
In the normal run of things, JavaScript code is synchronous. When line 1 has run (perhaps defining a new variable) and the operation has completed, line 2 runs (perhaps operating on the variable we just defined). However sometimes in line 1 we need to do something which will take longer – maybe an unknown length of time – for example to call a function which fetches data from an external API. In many cases we don’t mind that taking a while, or even eventually failing, but we want it to execute separately from the main JavaScript thread so as not to hold up the execution of line 2. So instead of waiting for the task to complete and return its value, our API-calling function instead returns a promise to supply that value in the future.
A Promise is an object we use for asynchronous operations. It’s a proxy for the success value or failure reason of the asynchronous operation, which at the time the promise is created is not necessarily yet known.
A promise is in one of three states:
We say a pending promise can go on to be either fulfilled with a value, or rejected with a reason (error).
We also talk about a promise being settled when it is no longer pending.
One memorable analogy was provided in Mariko Kosaka’s The Promise of a Burger Party. In it she describes the scenario of ordering a burger from, say, Burger King. It goes something like this:
.then() method which is the success handler for your promise and in there you can just call buyCoke(). (Note: the buyCoke() operation might be synchronous; the real life analogy being that it’s so quick to pour a coke that the assistant does it and serves it on a tray immediately rather than giving you a tray as a promise for it.) At the end of your then() you might choose to return a meal object which combines your burger and coke..then() to the original .then() to work with your snowballing data value. This is because then() methods always return a promise (even if the operation within was not asynchronous), and we already know that promises are thenable (i.e. have a then() method) hence our ability to keep chaining.There are two things we need to be able to do with promises:
When you create a promise you pass a function known as the executor to it, which runs instantly. Its arguments resolve and reject are callbacks provided by JavaScript. Our code goes inside the executor.
let examplePromise = new Promise(function(resolve, reject) {
// do a thing, possibly async, then…
if (/* everything turned out fine */) {
resolve("Stuff worked!");
} else {
reject(Error("It broke"));
}
});
examplePromise.then(function(response) {
console.log("Success!", response);
})
.catch(function(error) {
console.log("Failed!", error);
})