A GatsbyJS solution for crystal clear slides for everyone using minimal bandwidth + slide navigation using gestures.

Image for post
Image for post

The Problem

I’ve been social distancing for a while now and I’m working from home full time. I live in an old building with unreliable internet but, using a LAN cable, I get by most of the time. I disable my video and avoid sharing my screen wherever possible. However what happens when I need to present something to my team? Well, then my colleagues get a pixelated presentation and the occasional drop from their host.

The UX designer in me thinks this is less than ideal. I spend considerable time putting presentations together and they deserve a proper delivery.


How many times could I have made it to the moon while social distancing? I thought I would do the math and find out. So join me on this adventure while I build a realtime infographic poster in my GatsbyJS Site. It should be noted that most of this article is really just vanilla ReactJS so read on and enjoy!

Short on time?

You can see the finished poster by clicking on this magic link.

Image for post
Image for post

Defining our date range

If we’re going to have this poster as accurate as possible we’re going to want to ensure we start at the moment I went into isolation. We’re still social-distancing in the UK so I will keep the end date equal to the current date until social-distancing restrictions are lifted. …


Building a rapid-response system for volunteers in my area with real-time alerts.

Image for post
Image for post

A couple of weeks back, I came home to find this note taped to my front door:


Deno is officially being released in 3 days. I figured now would be a great time to check it out, see how it compares to Node and become an early adopter.

Image for post
Image for post
A dinosaur or a worm?

A secure runtime for JavaScript and TypeScript.

“(node) could have been much nicer” — Ryan Dahl

In a talk on “10 Things I Regret About Node.js”, Ryan Dahl discussed some of the problems with Node. Many of the problems mentioned could not be easily fixed without changing the core of Node and could not be made while supporting legacy applications. …


This is how I added dark mode to my GatsbyJS site.

Image for post
Image for post
Let’s talk dark mode.

Step 1:

Install dependencies.

npm install --save use-dark-mode gatsby-plugin-use-dark-mode gatsby-plugin-sass

Step 2:

Add the plugin to your gatsby config.

module.exports = {
...,
plugins: [
`gatsby-plugin-sass`,
{
resolve: "gatsby-plugin-use-dark-mode",
options: {
classNameDark: "dark-mode",
classNameLight: "light-mode",
storageKey: "darkMode",
minify: true,
},
},
...,
],
}

gatsby-plugin-use-dark-mode adds a classname to the body of the html showing what state we are in, dark or light mode. This is calculated using the storageKey(a cookie) that sits on the client. This defaults to the users default setting on their device.

Step 3:

Create our colours in a colors.scss file.

$brand-colors: ('white', #ffffff, #1c1c1c), ('black', #1c1c1c, white),
('light-brown', #e1d2af, #e1d2af), ('grey', #2e4052, #f9f9f9),
('light-grey', #f9f9f9, #121212), ('blue', #35466d, #49aab7);
@each $color in $brand-colors {
.is-#{nth($color,1)} {
color: nth($color, 2);
}
body.dark-mode {
.is-#{nth($color,1)} …

Image for post
Image for post
Yep, that’s all it takes.

I took the plunge and moved my blog to medium.

Transitioning to Medium Posts 📝

I wanted a better writing experience. Writing in Markdown was leading to too many spelling mistakes and, with me writing more and more, my repo was getting bigger with each post!

Medium exposes an rss feed for your posts that you can find at:

https://medium.com/feed/@yourUsername

Using this and the gatsby-source-rss-feed plugin meant that there was very little front end change to switching the blog over. Using the plugin exposes the title, date and story content of each post. The only thing I lost in the move was an auto generated excerpt of each article that gatsby-transformer-remark had made for me. I had been using it for meta-descriptions for SEO so really wanted it back. …


Image for post
Image for post
I ❤ sentry.io

I’ve fallen in love with an extension called “Wappalyzer”. It allows you to identify the technologies being used on any given website. Navigating to any site and clicking the extension gives you something likes this:


Image for post
Image for post

Today I wanted to implement a form that my users could use to subscribe to articles that I write. Not a new idea, the same form that has existed on every blog since the days of blogger.

I created a new file in my project and typed away creating the form with an input for an email address and a submit button. I started up my development server and was greeted with something that looked a lot like this:


I was browsing the GatsbyJS documentation late at night when I came across a section called “Improving Performance”. As you might expect, I saw sections on SEO, caching and auditing, all of which I have already looked into, but there was also a section on implementing guess.js. I read a couple of lines and then my head exploded 🤯.

What is guess.js?

Image for post
Image for post

Automatic, dynamic, intelligent prefetching for faster page loads.

It’s a fortune teller. When my site builds, it downloads the last three months of google analytics data for my website. It uses this to create a ML model. Whenever a user navigates to one of my pages, it uses this model to make an educated guess at what page a user will go to next and prefetch that page. …


Image for post
Image for post

When you’re browsing BBC news, or streaming your favourite Youtube videos, I doubt you’re thinking about the site’s accessibility. We all frequent the same sites but are they setting good standards of accessibility and performance? Does a site’s popularity correlate with these standards? Let’s find out 💪.

I decided to audit 100 pages per site. This would be a good amount of data to give each site an average. As I’m sure you’ll agree, assessing 10,000 pages manually would be far too time consuming. …

About

Sam Larsen-Disney

sld.codes | UX Engineer @ American Express

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store