39digits.com RSS Feed

How to fix Bluetooth mouse stuttering on Surface Laptop 4

Wed, 08 Sep 2021 18:11:26 GMT

I recently switched to a Surface Laptop 4 as my primary web development laptop and it has been nearly flawless. Windows combined with WSL2, winget, and the new Windows Terminal makes for a truly enjoyable workflow.

Unfortunately, any Bluetooth mouse connected to the Surface Laptop 4 randomly stuttered - thankfully there is a fix.

The steps in this article fixed the mouse stuttering issue I was experiencing under Windows 10 but in turn created a new bug.

Bluetooth devices would not work when resuming Windows after being put into Sleep Mode. I had to turn Bluetooth off and back on every time I woke the laptop otherwise all Bluetooth devices (MX Master 2S, Bose QC-35s, etc) would not connect. This was a small price to pay to get the mouse input to work fluidly.

Thankfully the stuttering has been fixed under Windows 11 using the latest drivers from Intel. So these registry entries are not required under Windows 11 and devices will work when resuming from Sleep.

Background information

There is a noticeable stutter or one second lag to the movement of the mouse cursor when using a Bluetooth mouse on the Surface Laptop 4 with Intel i7-1185G. The same does not happen on an AMD Ryzen or older Intel chip and seems to be restricted to the 11th-generation Intel chips.

Frustratingly, it isn't easy to replicate due to the seemingly random nature of when the stuttering occurs.

It is worth noting that this only happens when using Bluetooth input devices and can be seen with both a mouse and keyboard. Other Bluetooth devices, such as audio, remain unaffected (my Bose QC Comfort headphones play music flawlessly). Furthermore, the mouse cursor in Windows 10 on the Surface Laptop 4 remains very responsive when using a USB dongle instead of Bluetooth - such as with my Razer Viper.

The Bluetooth mouse I use is a Logitech MX Master 2s but the same stuttering occurs on similar devices such as the MX Master 3 or Microsoft's Surface Precision Mouse. Using the MX Master 2s on both my MacBook Pro or a 9th generation i7 Razer Blade 15 Advanced produces zero lag or stuttering.

The cuplrit appears to be related to a bug in how Intel AX Wireless Bluetooth cards (either AX1650 or AX201) control suspending Low Energy Bluetooth input devices in Windows 10 when using an 11th generation Intel chips (particularly 1165G and 1185G).

It apparently also occurs under Linux but I have not been able to test this myself. As such I'm not able to confirm a fix for any Linux distros. If it is purely a hardware issue and unrelated to operating system then it is plausible that it could occur under macOS too were Apple to use 11th-generation Intel chips in a hardware refresh.

Fix Bluetooth mouse stuttering in Windows 10

Open Registry Editor by hitting Win + R and typing regedit (you will need to be an Administrator)
Navigate the tree to HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Enum\USB\VID_8087&PID_0026. You will find an identifier that may be different from one device to another depending on the particular AX card in use. Some Dell users have an entry named 5&31036e8e&0&10 while on my Surface Laptop 4 this was 5&1487bdb9&0&10. The important part is that you need to find the entry with a DeviceDesc containing Intel Wireless Bluetooth. Thankfully there is usually only one entry so it should be easy to find.
Now that you have the device entry, navigate to the Device Parameters folder.
Edit the DeviceSelectiveSuspended dword entry and set the value to 0.
Add a new dword32 entry named SelectiveSuspendEnabled and set the value to 0.
Add a new dword32 entry named SelectiveSuspendSupported and set the value to 0.

You might need to reboot for everything to kick in but your mouse movements should now be smooth and lag-free.

How to sign your commits to GitHub using Visual Studio Code on Windows 10 and WSL2

Thu, 27 Aug 2020 19:27:14 GMT

I have recently been spending more and more time doing web development on Windows 10 using WSL2 and Windows Terminal. I haven't completely moved away from MacOS but the experience is so enjoyable that I will likely switch to a Surface Book when it comes time to upgrade my MacBook Pro.

The one (minor) gripe holding me back was the inability to use signed commits from within Visual Studio Code when code, git and the gpg agent are running inside of WSL2. The issue? The passphrase prompt would not show up.

A pinentry to enter my passphrase for signed commits is displayed inside Windows Terminal if I set it up to display via TTY and do all of my git commands from within the terminal. But I couldn't find a way to display a pinentry within Windows 10 when using either the Visual Studio Code git interface or the built-in terminal. I don't mind using a separate terminal to run my git commands, but it's just so convenient to do it within my editor.

Thankfully, I have now solved it!

A brief intro about signed commits

Commits in git will be attributed to whatever values you have set against the name and email fields in your gitconfig. In theory, this would allow anybody to impersonate someone else when committing code by using the email address associated with the other person's GitHub account.

It may be worth noting that this only allows someone to change the author of commits. It won't grant access to any private repositories or elevate rights on GitHub.

Thankfully we can use GnuPG to sign our commits which in turn allows Github to verify that the changes were authored by us and not some imposter.

A handy bonus of signing our commits is that GitHub will now also show a verified tag allowing everybody to see we're trustworthy.

Update Windows 10

The complete setup worked on a fresh install of the current stable version of Windows 10 (2004 Build 19041.450). I cannot confirm if this will work on an older version so you may be required to update.

You can check your version of Windows by hitting Win+R and running "winver"

Install GPG

Start by installing GPG4Win in Windows 10. GnuPG core is the only requirement but I usually also install Kleopatra - everything else can be left unchecked.

Despite most of the setup being inside WSL2 we still need a graphical pinentry app to be installed in Windows 10. Visual Studio Code is installed on the Windows 10 side and as such we need that graphical pinentry to enter a passphrase when committing code from the editor.

The rest of the commands in this tutorial will be run inside WSL2.

Open a Terminal into WSL2 and install the required packages. These packages were already installed for me and this is only here for completeness sake.

sudo apt-get install gpg gnupg gpg-agent

I use Ubuntu so your command may differ if your distribution of choice uses another package manager.

Update configuration

Inside WSL2, edit ~/.gnupg/gpg-agent.conf (if this file does not exist, create it).

~/.gnupg/gpg-agent.conf

default-cache-ttl 34560000
max-cache-ttl 34560000
pinentry-program "/mnt/c/Program Files (x86)/GnuPG/bin/pinentry-basic.exe"

The default-cache-ttl and max-cache-ttl is set to a really high value - 400 days to be precise. GnuPG will now cache our passphrase for that length of time or until we next restart our laptop. This saves us from being prompted for the passphrase every single commit given the default cache time is (if I recall) 10 minutes.

The pinentry-program configuration explicitly tells GnuPG to use the pin entry app installed in Windows 10 to prompt the user to enter the passphrase set when generating the GPG key pair (see next section).

It is recommended to explicitly restart the gpg agent to force these changes. Alternatively, restart Windows at this point.

gpgconf --kill gpg-agent

Generate GPG Key Pair

The generated GPG key pair consists of a:

private key - As the name suggests it should not be shared. This key is used to sign our commits.
public key - It is safe to distribute this key and we'll upload to GitHub later. GitHub uses the public key to verify the signature in our commits to correctly identify us as the author.

Run the following command to generate the actual key pair.

gpg --full-generate-key

You will be prompted to confirm certain values:

Key Type: Select RSA and RSA
Key Size: 4096
Expiry: Select a timeframe that is suitable to your requirements.

You will then be asked to enter your name and email address. It is important that you enter the same email address that you use with your GitHub account. Ensure that this email address is also set in your local git config (~/.gitconfig).

Finally, you will be asked for a passphrase. The passphrase will be used to encrypt the private key for added security. You will then be prompted to enter this passphrase when making a signed commit to decrypt the key.

Retrieve the unique signing key id

Now that our key pair has been created we need to retrieve our unique signing key id.

gpg --list-secret-keys --keyid-format LONG

Here is an example of the output you should see with fabricated ids.

-----------------------------------
sec   rsa4096/00EF4D3F22885E4B 2019-11-20 [SC]
      1234567890ABCDEF1234567890ABCDEF12345678
uid                 [ultimate] Rick Deckard <deckard@example.com>
ssb   rsa4096/ABC123D7FAA52318 2019-11-20 [E]

The key id is the 16-character sequence following rsa4096/ in the sec (secret) row at the top. In our example above, our signing key id would be 00EF4D3F22885E4B.

Alternatively, you could run gpg --list-signatures to find the same signing key id next to a sig tag.

Make note of this signing key as we will use it in the sections below.

Git Settings

If you haven't already done so, make sure to add the same email used in GitHub and your GPG key pair to your gitconfig.

git config --global user.email "deckard@example.com"

And if not yet done, be sure to add your name too.

git config --global user.name "Rick Deckard"

Configure git to use your GPG signing key.

git config --global user.signingkey 00EF4D3F22885E4B

You can conveniently set git to sign every commit by default. If you don't then you will need to include the -s flag in the command line for every commit you wish to sign.

git config --global commit.gpgsign true

There is also the option to automatically sign tags.

git config --global tag.gpgsign true

If you don't want to set these globally, you can also set it per repository using a --local parameter when in a git controlled project directory.

Add the GPG public key to GitHub

Firstly, retrieve and copy your GPG public key using your signing key. You will add this to your GitHub account so that it can verify every signed commit as actually coming from you.

gpg --armor --export 00EF4D3F22885E4B

Open a browser and navigate to your GitHub SSH and GPG Keys settings.

Click on the New GPG Key button and paste in your previously copied public key. This should be all the text including the start -----BEGIN PGP PUBLIC KEY BLOCK----- and end -----END PGP PUBLIC KEY BLOCK----- tags.

Enable commit signing in Visual Studio Code

We now need to set Visual Studio Code to append the -s flag to every commit that it runs from the built-in git user interface.

Thankfully, this is really easy to accomplish. Open the settings and search for "gpg" and check the box for Enables commit signing with GPG.

Alternatively, you can add this setting directly to your settings.json with the following line.

"git.enableCommitSigning": true

Make a few signed commits

I recommend running a test commit from both the command-line as well as via the Visual Studio Code interface.

Regardless of which method you decide to test first you will see a window pop up on your first commit now that GPG signing is setup. This is the pinentry and it is asking for your passphrase that you set when creating the key pair. The passphrase is used to decrypt your private key before git will complete the commit.

At this stage the passphrase will be cached after the first successful entry as per our ~/.gnupg/gpg-agent.conf settings.

Verify signed commits

Locally, you can verify that the commits were signed with your signature.

git log --show-signature -1

If you now push any of these changes to your remote in GitHub you will see a verified status next to each signed commit.

Remote Containers

As an added bonus I can also confirm the above setup worked when running commits from within the Microsoft pre-built VS Code Development Container Node image. This is helpful if you want to use Remote Containers for development and make signed commits from the Visual Studio Code integrated terminal.

The only extra requirement when using Remote Containers is to install socat on your WSL2 instance otherwise the git commits won't work.

sudo apt-get install socat

Keep in mind that the version of git that comes with the Microsoft development containers are a little behind so you might want to add an upgrade step to the Dockerfile. Or bring your own Dockerfile - you're the master of your own destiny.

Conclusion

And that’s it! Enjoy your newly verified status on GitHub.

Customise the Spotify UI theme

Fri, 15 May 2020 00:07:33 GMT

I loved Rdio. Unfortunately, it was eclipsed by the popularity of Spotify and eventually had to close down forcing me to change music streaming services. Ever since switching I have missed that clean, flat and beautiful light themed app.

To my absolute joy, I recently discovered that there is an unofficial way to customise the look of Spotify using a tool called Spicetify.

Install spicetify

I predominantly use MacOS and already have the homebrew package manager installled making that the most convenient method to install Spicetify.

brew install khanhas/tap/spicetify-cli

Your own setup and requirements may differ. If so read up on the alternate Spicetify installation instructions for Linux, Windows and Mac.

Generate the config file

Once installation has completed you need to run Spicetify once without any parameters to generate the config file.

spicetify

To find out where the configuration file has been saved on your operating system you can use the -c parameter.

spicetify -c

On MacOS it saves to ~/spicetify_data/config.ini.

Backup the current Spotify configuration

Before we can apply a theme we need to run a backup in case we need to rollback upon an error.

spicetify backup

Apply the default light theme

You're just one more command away from applying the default light theme that ships with Spicetify.

spicetify apply

Open Spotify and you will now be greeted with a truly beautiful light interface.

Add new themes

Perhaps you want to explore creating your own theme or applying themes created by others. There is a repository of Spicetify themes if you wanted some inspiration.

Install any custom themes into a Themes directory within your Spicetify's data directory. For example, on MacOS you would install these into ~/spicetify_data/Themes.

Once you have chosen a new look for Spotify you will need to run a command to set that in your config.

spicetify config current_theme NAME_OF_THEME_HERE

Now that a new custom theme is set in your config its time to apply that to Spotify.

spicetify apply

Use SpicetifyDefault as the current_theme if you ever wish to revert back to the original Spicetify light theme.

Restore the original Spotify interface

You can quickly revert back to the default Spotify theme.

spicetify config inject_css 0 replace_colors 0
spicetify apply

No Such File error

You might get an error upon running spicetify.

fatal open /Applications/Spotify.app/Contents/Resources/Apps/zlink/css/user.css: no such file or directory

You can fix this by reapplying your theme.

spicetify apply

Add Tailwind to a Gatsby project

Thu, 14 May 2020 07:32:09 GMT

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind CSS has completely changed the way I develop web apps thanks to the utility first workflow. And the recent release of v1.4 made it even easier to get a very small production build by including PurgeCSS as a built-in process. If you've been on the fence about trying out this great framework now is the time to jump in.

Create the Gatsby app

We'll keep things simple and generate a Gatsby app using npx and the very barebone Hello World starter.

npx gatsby new gatsby-tailwind https://github.com/gatsbyjs/gatsby-starter-hello-world

Once that has installed be sure to change into the newly created gatsby-tailwind project directory.

Add Tailwind to the project

Install the required dependencies

Install the development dependencies from our project root.

npm install --save-dev tailwindcss autoprefixer

Tailwind doesn't include any vendor prefixes out of the box so we'll be relying on autoprefixer to generate those for our final build.

Create the Tailwind CSS

I usually prefer to create a dedicated styles directory under src/styles when working on a project with Tailwind.

Create the directory and our global CSS file now.

mkdir -p src/styles && touch src/styles/main.css

To add Tailwind to our Gatsby project, we need simply add the @tailwind directives inside src/styles/main.css. These directives will be replaced with the actual Tailwind CSS during the build.

src/styles/main.css

@tailwind base;
/* Your own custom base styles */

@tailwind components;
/* Your own custom component styles */

@tailwind utilities;
/* Your own custom utilities */

This src/styles/main.css file will be our global CSS file for the entire app. It will contain all of our project's pre-generated CSS including any of our extra custom CSS. The beauty and strength of using Tailwind is that you won't be required to write much extra CSS though.

Generate the Tailwind configuration

./node_modules/.bin/tailwindcss init

An empty tailwind.config.js file is generated within the project root. This config file allows us to dramatically customise Tailwind and is one of the single biggest strengths of this excellent framework. To read more on how you can configure Tailwind check the official configuration documentation.

Import the CSS into our App

There are two options to import a global CSS file into our app:

Import it via a gatsby-browser.js configuration file.
Import it into a Layout higher order component.

To keep things simple we'll cover the gatsby-browser.js option in this article.

Create a gatsby-browser.js file in your project root.

touch gatsby-browser.js

Now open the gatsby-browser.js file you just created and simply import the pre-generated Tailwind CSS file to finish the setup.

gatsby-browser.js

import './src/styles/main.css';

Personally, I usually use a Layout Component as my preferred approach. If you're curious you can learn more about using a layout component in Gatsby. If you go the layout component route you then need to import src/styles/main.css into that file only and not the gatsby-browser.js configuration file.

Create the PostCSS configuration

One of the strengths of Gatsby is the rich plugin ecosystem that already exists to easily add any extra functionality we may require.

Install the PostCSS plugin for Gatsby.

npm install --save gatsby-plugin-postcss

Activate the plugin by adding 'gatsby-plugin-postcss' to the plugins array within the gatsby-config.js file in the project root.

gatsby-config.js

module.exports = {
  plugins: ['gatsby-plugin-postcss'],
};

Next we need to create a postcss.config.js file in the root of your project.

touch postcss.config.js

And populate the file with our PostCSS configuration.

postcss.config.js

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

We'll be using PostCSS to build our CSS by first running our application's CSS through the Tailwind CLI. This step not only replaces all of the @tailwind directives with the base, components and utilities from Tailwind but also applies your own tailwind.config.js customisations during the build. I cannot emphasise enough just how powerful the customisation options are and the massive amount of time it can save you. So please do spend time reading up on how to customise Tailwind to truly make it your own.

Since Tailwind does not include vendor prefixes, the output of the Tailwind build step is then sent into autoprefixer which will automatically add any vendor prefixes required by our browserlist (or a default set if none is explicitly set in our package.json).

Optimise the production build

Test the build

At this stage we have only imported the framework but aren't actually using any of the Tailwind classes in our application.

Replace src/pages/index.js with the below code. Notice that we have now made use of a few of Tailwind's classes such as text-5xl and mx-auto.

src/pages/index.js

import React from 'react';

function Index() {
  return (
    <div className="container mx-auto">
      <main className="text-center">
        <h1 className="text-5xl font-semibold my-5">
          Welcome to{' '}
          <a href="https://gatsbyjs.org" className="text-purple-600">
            Gatsby.js!
          </a>
        </h1>

        <p className="description">
          Get started by editing{' '}
          <code className="font-mono bg-gray-200 p-1 rounded">
            src/pages/index.js
          </code>
        </p>
      </main>
    </div>
  );
}

export default Index;

Lets run a quick production build.

npm run build

Once that has completed open the generated CSS found in the newly created public directory. This generated CSS file is absolutely massive and contains the entirety of the framework including tons of styles we haven't used at all! Tailwind will even warn us that our styles are not being purged during the build process.

This is expected behaviour at this point given our settings. It's important to note that the development build of Tailwind is large by design ensuring all of the framework's classes are available to you while you build the site. You will only ever use a small percentage of these and Tailwind provides a convenient way to trim that down for your production builds.

Update the Tailwind configuration.

The setup for running PurgeCSS used to be a little more involved requiring us to install extra dependencies and adding a regex pattern to our PostCSS configuration. Thankfully this is now a built-in feature as of version 1.4 and requires nothing more than defining the file patterns that may contain our Tailwind classes.

Replace the contents of the tailwind.config.js file in your project's root to include an array of file patterns.

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.js'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Now that we have the purge settings in place, Tailwind will look through those files and treeshake any unused styles from the final production build. We have only set Tailwind to look through JavaScript files inside of our src directory. Be sure to tailor this to your own requirements such as adding posts/**/*.mdx if you start using MDX for your local posts.

If you're curious, read more about how Tailwind controls the file size for production builds.

Test the optimised Production Build

Now that we have set our purge options, we are ready to run the optimised production build. It will now automatically remove all unused classes from the final build.

npm run build

Once that completes open the newly generated production CSS file. You should find it has shrunk down considerably and now only contains the styles we have thus far used in our project. Perfect!

Conclusion

Tailwind CSS truly has had a huge impact on improving my workflow when developing web apps and I cannot imagine starting a new project without first reaching for this framework. Gatsby's rich plugin ecosystem makes it super easy to include Tailwind in your next build so be sure to give it a try.

Add Tailwind to a Next.js project

Wed, 13 May 2020 12:08:45 GMT

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Create the Next.js app

We'll start by creating a default Create Next App to keep things simple.

npx create-next-app cna-tailwind && cd cna-tailwind

When asked to pick a template simply select Default starter app and hit return to complete the installation of your Next app.

Add Tailwind to the project

Install the required dependencies

Install the development dependencies from our project root.

npm install --save-dev tailwindcss autoprefixer

Tailwind doesn't include any vendor prefixes out of the box and that's why we install autoprefixer.

Create the Tailwind CSS

To keep things clean, I prefer to have a dedicated styles directory within my Tailwind projects. Create a styles directory from your project root (or wherever you like to keep it) and within that create a main.css file.

mkdir -p styles && touch styles/main.css

Next we add the @tailwind directives inside main.css. These directives will be replaced with the actual Tailwind CSS during the build.

styles/main.css

@tailwind base;
/* Your own custom base styles */

@tailwind components;
/* Your own custom component styles */

@tailwind utilities;
/* Your own custom utilities */

This main.css file contains all of our project's pre-generated CSS including any of our extra custom CSS. The beauty and strength of using Tailwind is that you won't be required to write much extra CSS though.

Generate the Tailwind configuration

./node_modules/.bin/tailwindcss init

Import the CSS into our App

Tailwind will generate a global CSS file for our App. This will require a different setup within Next.js when compared to a component level solution like CSS-in-JS or styled-components. We therefore need to ensure we include main.css in the correct way.

Next.js will throw an error at build time if we try to import the global Tailwind CSS file anywhere other than within pages/_app.js.

Global CSS cannot be imported from files other than your Custom App. Please move all global CSS imports to pages/_app.js.

First step is to create pages/_app.js.

touch pages/_app.js

We aren't doing anything special with the Custom App other than importing Tailwind so the default code will be fine.

pages/_app.js

import '../styles/main.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

If you're curious you can read more about the Custom App component in the official docs.

Create the PostCSS configuration

Next.js will detect any custom postcss.config.js file in our project's root and use it as part of the build process. This is super convenient as it means we won't need to make any build changes beyond simply creating and populating the config file.

To start, create a postcss.config.js file in the root of your project.

touch postcss.config.js

Populate the config with the following setup.

postcss.config.js

module.exports = {
  plugins: ['tailwindcss', 'autoprefixer'],
};

Optimise the production build

Test the build

We aren't actually using Tailwind in our application yet so replace pages/index.js with a simplified version of the index page. Notice that we have now made use of a few of Tailwind's classes such as text-5xl and mx-auto.

pages/index.js

import Head from 'next/head';

export default function Home() {
  return (
    <div className="container mx-auto">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="text-center">
        <h1 className="text-5xl font-semibold my-5">
          Welcome to{' '}
          <a href="https://nextjs.org" className="text-blue-600">
            Next.js!
          </a>
        </h1>

        <p className="description">
          Get started by editing{' '}
          <code className="font-mono bg-gray-200 p-1 rounded">
            pages/index.js
          </code>
        </p>
      </main>
    </div>
  );
}

Lets run a quick production build of our Next.js app.

npm run build

Once that has completed, open the generated CSS (it will be in the .next/static/css directory) and look at the styles that Tailwind has generated. That CSS file is absolutely massive and contains the entirety of the framework including tons of styles we haven't used at all!

This is expected behaviour at this point given our settings though. It's important to note that the development build of Tailwind is large by design ensuring all of the framework's classes are available to you while you build the site. You will only ever use a small percentage of these and Tailwind provides a convenient way to trim that down for your production builds.

Update the Tailwind configuration.

Replace the contents of the tailwind.config.js file in your project's root to include an array of file patterns.

tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.js'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Now that we have the purge settings in place, Tailwind will look through those files and treeshake any unused styles from the final production build. We only need to look through JavaScript files within our pages directory in the default app but be sure to include any other locations where your app may be using Tailwind (e.g. ./components/**/*.js) to ensure no classes are purged by accident.

If you're curious, read more about how Tailwind controls the file size for production builds.

Test the optimised Production Build

Now that we have set our purge options, we are ready to run the optimised production build. It will now automatically remove all unused classes from the final build.

npm run build

Once that completes open the newly generated production CSS file. You should find it has shrunk down considerably and now only contains the styles we have thus far used in our project. Perfect!

Conclusion

Tailwind CSS truly has had a huge impact on improving my workflow when developing web apps and I cannot imagine starting a new project without first reaching for this framework. Thanks to the helpful conveniences built into Next.js and the advancements in Tailwind v1.4 it has never been quicker or easier to give Tailwind a try.

Add Tailwind to Create React App without ejecting

Tue, 05 May 2020 19:53:27 GMT

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind CSS has completely changed the way I develop web apps thanks to the utility first workflow. And with version 1.4 now including PurgeCSS as a built-in process it has never been easier to get a clean and lean build for your next project.

Best of all, you don't need to eject a Create React App to get the full benefits of adding Tailwind to your project. In fact, it's as simple as installing Tailwind CSS, creating a PostCSS config and making a few tweaks to your npm scripts.

Create the React app

We'll start with a default Create React App to keep things simple.

npx create-react-app cra-tailwind && cd cra-tailwind

Default project clean-up

Now that we've created our default React app lets quickly get some housekeeping out of the way before we dive into the real topic of this article.

Since all of our CSS ends up in a single file we can delete the provided CSS files.

rm src/index.css src/App.css

The src/index.js entrypoint references index.css. Open that file up and remove the import.

src/index.js

// Remove this line
import './index.css';

In a similar way, src/App.js is still importing App.css. Remove this reference.

src/App.js

// Remove this line...
import './App.css';

Now that we have that out of the way its time for the fun stuff.

Add Tailwind to the project

Install the required dependencies

Install the development dependencies from our project root.

npm install --save-dev tailwindcss postcss-cli autoprefixer

Briefly, tailwindcss is the framework itself, postcss-cli is used to build our generated CSS, and autoprefixer is used to add all required vendor prefixes in our final built CSS.

Create the Tailwind CSS

To keep things clean, I prefer to have a dedicated styles directory containing a tailwind.css file. It is also the directory within which Tailwind will generate the final build.

mkdir -p src/styles && touch src/styles/tailwind.css

Now add the @tailwind directives for base, components and utilities to src/styles/tailwind.css.

src/styles/tailwind.css

@tailwind base;
/* Your own custom base styles */

@tailwind components;
/* Your own custom component styles */

@tailwind utilities;
/* Your own custom utilities */

This tailwind.css file constitutes our project's pre-generated CSS and is where we will also write any of our extra custom CSS.

Generate the Tailwind configuration

./node_modules/.bin/tailwindcss init

This will create an empty tailwind.config.js file in your project root that can be used to dramatically alter the final build.

A brief word about Tailwind customisation

Running the Tailwind build process will effectively replace @tailwind base; with all of the framework's base classes and do the same for components and utilities. This generated output will be saved in a separate file. But the build process can do way more than just inject those styles if you take the time to dive into the customisation options.

The truly powerful feature of this framework is the ability to fully customise the variables of the build which can dramatically change the generated CSS to meet your exact needs. Do you need new default breakpoints? Add it to the config and Tailwind will automatically generate all related classes. Need to completely override some of the colours in your build? Add it to the config and Tailwind will automatically generate all related classes.

I cannot emphasise enough just how powerful the customisation options are and the massive amount of time it can save you. So please do spend time reading up on how to customise Tailwind.

Create the PostCSS config

Start by creating the postcss.config.js configuration file in the project root.

touch postcss.config.js

Populate it with

postcss.config.js

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

When we run PostCSS through our build scripts it will first send our custom CSS (/src/styles/tailwind.css) through the Tailwind CLI to generate all of the classes required after applying any configuration customisations.

Once completed, PostCSS will then proceed to run autoprefixer on the output to automatically add any vendor prefixes to our CSS based upon our browserlist. Tailwind doesn't come with any vendor prefixes and this is one of the main reason we use PostCSS to generate our Tailwind build instead of relying solely on the Tailwind CLI.

Create Build Scripts

During a build, Create React App doesn't recognise the postcss.config.js from our project root so we have to change our npm scripts to cater for this.

Install dependency for cross-platform environment variables

This is potentially optional based on your use case but I'm including it here to be kind to Windows users. The cross-env package allows us to set environment variables in our npm scripts that works across platforms.

npm install --save-dev cross-env

Option 1: Generate once at start of build process

The best part about using Tailwind is that you'll likely not write any actual CSS once you have it setup in your project. You apply the already generated Tailwind classes to your HTML and JSX. So there's little reason to watch the CSS files and instead rely on Create React App watching the JS, JSX and other relevant files during development and reloading on those changes only.

Inside package.json change the scripts to include the following.

package.json

"scripts": {
  "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
  "prestart": "npm run build:css",
  "start": "cross-env BROWSER=none react-scripts start",
  "prebuild": "cross-env NODE_ENV=production npm run build:css",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

The build:css script runs PostCSS against src/styles/tailwind.css and applies any plugins we have setup in postcss.config.js. The output is then saved in src/styles/main.css. It is this generated file that we import into our application.

We are taking advantage of npm's pre hooks to kick off a sequential build of the Tailwind generated CSS.

Production Build: If we run npm run build it will first run the command(s) from prebuild. Notice that we're setting the NODE_ENV variable on the prebuild to ensure Tailwind runs production optimisations.
Development Build: When developing locally we run npm run start which will first run prestart. We do not set the environment to production here as we want access to the entire Tailwind framework. Furthermore, I don't like that Create React App automatically opens my default browser so I usually set BROWSER=none ahead of running react-scripts start. I run Choosy and when the development server is ready I simply cmd-click on the link to select the browser within which I wish to test the site.

Option 2: Watch CSS files for changes (do not open default browser)

We first need to install npm-run-all to provide a cross-platform method of running multiple npm scripts in parallel. Windows, for example, does not support & when trying to chain npm run commands together.

npm install --save-dev npm-run-all

We create a specific watch:css command that will constantly watch for any changes to the tailwind.css file and regenerate the main.css file upon save. These will in turn trigger Create React App to refresh our browser to show the new changes. It's a convenient workflow and works well but Tailwind releases us from having to do too many changes to the actual CSS so having a watcher running feels a bit wasteful.

package.json

"scripts": {
  "start:react": "cross-env BROWSER=none react-scripts start",
  "start": "npm-run-all -p watch:css start:react",
  "watch:css": "postcss -w src/styles/tailwind.css -o src/styles/main.css",
  "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
  "prebuild": "cross-env NODE_ENV=production npm run build:css",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

As with Option 1, I have it set so that the default browser does not automatically open when running the development server.

Option 3: Watch CSS files for changes (automatically open default browser)

There is another reason I don't like the default browser to automatically open on a development build. It relates to a race condition if Tailwind hasn't completed compiling the css ahead of the page loading. The page will open but it will be blank and React will not load forcing you to have to manually refresh the page.

If you wish to still maintain the automatic opening of your default browser when developing the site you will either need to refresh the page after the browser loads or add a short delay ahead of react-scripts start.

package.json

"scripts": {
  "start:react": "sleep 3 && react-scripts start",
  "start": "npm-run-all -p watch:css start:react",
  "watch:css": "postcss -w src/styles/tailwind.css -o src/styles/main.css",
  "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
  "prebuild": "cross-env NODE_ENV=production npm run build:css",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

You'll notice the only change is to the start:react script where we have added a sleep 3 delay ahead of running react-scripts start and removed the BROWSER=none environment variable. Unlike trying to run npm scripts in parallel, && is supported on Windows so no need to create a cascade of scripts for our delay.

Where to import the generated CSS

You only need to import the generated file once. I usually import it into src/App.js in a Create React App but you could also import it into index.js or wherever makes sense within your own app. Be sure that it is high enough in the cascade to ensure the styles are available when adding Tailwind classes to your JSX components.

Test the build

I've tried to replicate the default Create React App homepage using Tailwind classes with a default configuration.

Replace src/App.js with the below code.

src/App.js

import React from 'react';
import logo from './logo.svg';
import './styles/main.css';

function App() {
  return (
    <div className="text-center">
      <header className="bg-gray-900 min-h-screen flex flex-col items-center justify-center text-4xl text-white">
        <img
          src={logo}
          className="App-logo h-64 pointer-events-none"
          alt="logo"
        />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="text-blue-300"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

We'll also want to recreate a few of the custom styles by using @apply for Tailwind classes or old-school CSS for the logo animation.

Replace src/styles/tailwind.css with the code below.

src/styles/tailwind.css

@tailwind base;
/* Your own custom base styles */
body {
  @apply antialiased;
}

@tailwind components;
/* Your own custom component styles */
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@tailwind utilities;
/* Your own custom utilities */

We can now start the development server to view our placeholder app.

npm run start

Once that is ready, open src/styles/main.css and look at the styles that Tailwind has generated. That CSS file is absolutely massive with almost 70,000 lines!

The development build of Tailwind is large by design ensuring all of the framework's classes are available to you while you build the site. You will only ever use a small percentage of these and Tailwind provides a convenient way to trim that down for your production builds.

Optimise the production build

Update the Tailwind configuration.

The setup for running PurgeCSS used to be a little more involved requiring installing dependencies and adding a regex pattern to our PostCSS configuration. Thankfully this is now a built-in feature as of version 1.4.0 and requires nothing more than defining the file patterns that may contain our Tailwind classes.

Replace the contents of the tailwind.config.js file in your project's root.

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.jsx'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Now that we have the purge settings in place, Tailwind will look through those files and treeshake any unused styles from the final production build. It was for this reason that we explicitly set NODE_ENV=production in our prebuild stage.

If you're curious, read more about how Tailwind controls the file size for production builds.

Test the Production Build

If you're still running the development server hit Ctrl+C to shut it down.

We're now ready to run a production build.

npm run build

Once that completes if you open the newly generated src/styles/main.css file you should find it has shrunk down to a file containing only the styles we have thus far used in our project.

Add the generated CSS file to gitignore

Be sure to add the generated CSS file (src/styles/main.css in our example above) to your .gitignore. The generated file's contents completely depending on whether we are running a production or development build.

It might feel weird leaving a required file out of version control given we are importing the generated file into our App.js. This isn't an issue at all since we always generate the file ahead of the production build or running the development server.

Conclusion

Tailwind CSS truly has had a huge impact on improving my workflow when developing web apps. I encourage anybody who is still skeptical of the syntax and adding so many classes to your HTML and JSX to just give it a try. The framework keeps going from strength to strength and I cannot imagine starting a project without first reaching for Tailwind.

How to switch to Firefox on Android for improved privacy

Sun, 03 May 2020 19:26:44 GMT

Google's Chrome is everywhere these days. In the spirit of healthy competition and fuelled by a desire to greatly enhance my privacy while browsing the web, I recently migrated to Mozilla's Firefox on both desktop and Android.

This guide covers some tips and tricks you can use to enhance your own privacy and make the jump to Firefox on Android a breeze. I also have a post that you can read if you're interested in ways to use Firefox to vastly improve your Windows, MacOS or Linux experience.

My workflow and requirements

I own a Google Pixel and absolutely love how many beautiful conveniences are just a tap or two away in the Google Pixel Launcher.

My usual workflow when researching something is to perform a quick search in the Google bar on the home screen. It's so convenient to tap the search bar, type in what you're curious about and go. Any links from your Google searches will open in a built-in reader creating a temporary browsing session. If I find information I want to keep for later I'll then send the link to open in a new tab within the main version of Chrome. Once there I can easily send the open tab to my desktop instance of Chrome if I needed it available on my MacBook Pro.

I absolutely wanted to keep this quick and convenient workflow. I enjoy being able to do a quick throwaway search without needing to first open the main browser and open a new tab.

Therefore I had 2 important criteria for any possible browser change:

I need the ability to do quick searches with minimal effort without creating new tabs in my main browser.
I need to be able to quickly share links between my devices.

Lets recreate this workflow using Firefox and improve our privacy at the same time.

What to install on Android

I have two Firefox browsers installed on my Pixel.

Firefox Focus will help us meet the quick search requirement. The ephemeral nature of Firefox Focus is emphasised by a trashcan icon visible in the lower right corner. Tapping it immediately erases all tabs, cookies and browsing history meaning a fresh, private session is always just seconds away. As an added bonus, it also automatically blocks a huge range of trackers and adverts while browsing.

In comparison, Firefox is the full featured browser I use for keeping tabs open for longer periods and for browsing sessions where being logged into certain accounts is beneficial. It is also the browser that allows us to have a seamless experience across devices by sharing tabs.

Firefox Focus as quick search

The easiest way to make Firefox Focus instantly accessible as your quick search replacement is to move the icon into your main app bar on Android.

Now instead of tapping on the Google bar for your quick searches you simply tap on the Firefox Focus icon in the middle and you're ready to launch a quick search.

Firefox Focus will open with the addressbar in focus and ready for you to type a search. If the browser opens with the last viewed page open simply tap the trashcan button to clear all cookies and you're immediately back on the addressbar and ready to go.

Thanks to the tracker blocker you can now feel the fuzzy feeling of a slightly more private Android experience.

But we're not done yet - time to setup the main Firefox browser on Android.

We are now ready to use Firefox to solve the requirement of a seamless tab sharing experience across devices.

A Firefox account is required so open the browser and log into your account. If you don't have a Firefox account yet head to the Settings from the menu. It may be worth noting that Firefox Focus doesn't offer the ability to log into an account at all due to its temporary nature.

My workflow is to usually do a quick Google search within Firefox Focus while trying to find a solution for a development conundrum or researching a specific topic. If I find something I want to keep around on mobile or send to my Macbook Pro to reference I'll then tap the Share button in Firefox Focus. This brings up a convenient popup allowing you to quickly choose the desired destination - be it Firefox on Android or to send the page to one of my devices.

Similarly, if you're browsing in Firefox and want to send a tab to one of your devices you can quickly do so by opening the three dot menu and hitting the icon that looks like a paper airplane (as also used in the share menu above). This will instantly show a list of your devices linked to your Firefox account making sharing tabs between devices a seamless and easy experience.

Firefox Extensions for Increased Privacy

Sending tabs between devices is a hugely important feature for me, but the biggest benefit to using Firefox on Android is that it supports extensions. In a huge contrast Chrome does not support any extensions on mobile. Microsoft's Edge is worth a mention as AdBlock Plus is built into the mobile version of their browser.

Inside Firefox, tap on the three dots to bring up the main menu and select Add-ons.

For a more private browsing experience install:

HTTPS Everywhere
uBlock Origin
Privacy Badger

If you're curious about what those extensions do you can read more in my Firefox for desktop article.

Android settings

Set Firefox Focus as the default browser

Chrome is still the default browser on Android so its time to change that.

You may be surprised that we don't select the main Firefox browser as the default on Android. Instead, by setting Firefox Focus as the default, it allows other apps to use it as the browser to open links in an ephemeral private session.

To change the default browser on Android head to the phone's Settings, then Apps and notifications. Open the Advanced section and tap on Default apps where you will be able to change the browser to Firefox Focus.

Pixel Launcher

Now that we have Firefox Focus as the default browser on Android, we are ready to make some enhancements to the Pixel Launcher. Your mileage may vary at this stage depending on the type of Android phone you own and the specific launcher you use.

The Pixel Launcher has a handy news feed when swiping from the left on the home screen and any links opened will usually be in the built-in reader. Opening links in the built-in reader will register this activity against your Google Account if you haven't tweaked the privacy settings. For safety we'll simply change the Pixel Launcher to use our default browser (Firefox Focus) instead.

To change this open the Google App (either swipe left on home screen or search for the Google app). Tap on More at the bottom right of the screen and head into the settings. Under the General tab change Open web pages in the app to off.

I've made similar settings changes to other apps such as Flamingo (my Twitter app) to prefer using Firefox Focus as the browser for links.

Conclusion

My switch to Firefox on both desktop and Android has been very successful and I have enjoyed using it the last few months. If you have any tips of your own or ideas on how the settings can be further improved then please leave a comment below.

How to switch to Firefox on desktop for improved privacy

Sat, 02 May 2020 13:34:08 GMT

This guide covers some tips and tricks you can use to enhance your own privacy and make the jump to Firefox on Windows, MacOS or Linux a breeze. I also have a post that you can read if you're interested in ways to use Firefox to vastly improve your Android experience.

What to install on desktop

Start by installing your preference of either normal Firefox or the superb Developer Edition.

I personally use standard Firefox as my day to day default browser but rely on the Developer Edition when building web apps. The Developer Edition is a few versions ahead of the standard build and includes a few helpful developer settings such as remote debugging turned on by default.

Nothing in this article depends on a specific edition so you are free to choose the one that best meets your needs.

Create a Firefox account

A Firefox account gives you the ability to sync your Firefox settings, bookmarks & extensions. It also enables sending tabs between desktop and mobile.

To create one simply open Firefox and head to the Preferences and then the Sync section.

Import data from another browser

You may wish to import bookmarks or other data over from another browser.

Click on File and then the perfectly named Import from Another Browser option. You will be shown a window with a list of browsers on your device and then asked the type of data you wish to import into Firefox.

I keep my browsers pretty lightweight and instead save my bookmarks in Raindrop.io but your requirements may be different.

Recommended Extensions

HTTPS Everywhere ensures that you browse the web using encryption whenever possible. Even if you type a URL with http this extension will ensure you automatically connect via https instead.

uBlock Origin and Privacy Badger perform similar but complimentary roles in enhancing your privacy across the web.

uBlock Origin is an excellent ad blocker that also works to block trackers using verbose lists of known offenders that are regularly updated. Privacy Badger takes a different stance and learns to block trackers over time. If it finds the same tracker cookies across 3 sites it will automatically start blocking those. Privacy Badger also sends the Do Not Track signal and protects against click tracking on Facebook, Google and Twitter links.

It is for these reasons I recommend using both in tandem to ensure you get the absolute best protection without needing to dive too deep into the weeds of finetuning blockers by hand.

Firefox Multi-Account Containers allows you to create special self-contained tabs within the single Firefox instance. It could, for example, be used to create both a Personal and a Work container allowing you to only need one instance of Firefox open and be logged into your work Google account in the Work container and your personal Google account in the Personal container. No more alt-tabbing between browser windows!

The last section of this article explains in detail how to use it to keep our Google account completely segregated from our day to day browsing. If you use Facebook, I recommend replicating it with a dedicated Facebook container to keep their creepy hands off of your data. Or better yet, just delete Facebook.

Firefox settings

Ensure Firefox is a Fully Colour Managed browser

This isn't a privacy setting, but if you're switching to Firefox on a wide gamut display such as found on MacBooks, then I recommend checking your colour management settings.

As of Firefox 77 (the current Nightly version) the default setting for color management within the browser has been changed to be fully managed. If you are using a version prior to 77 or wish to check if it is set correctly then follow my blog post about Colour Management in Firefox.

Turn on DNS over HTTPS

I recommend turning on DNS over HTTPS which is only set by default for users in the United States.

Start by opening the Preferences and scroll down to the bottom of the General section. You should see a Network Settings area - click on the Settings... button to open up a panel.

At the very bottom you will find a checkbox Enable DNS over HTTPS which you should tick and then click OK to save the changes.

You can customise which provider to use but I trust the default (Cloudflare) and leave that set as is.

If you want to know more about DNS over HTTPS and the benefits it can provide you can read the Mozilla blog article or Lin Clark's Cartoon Intro to DNS over HTTPS

Block all third-party Cookies

Firefox - like most of the popular browsers - does not block all third-party cookies by default. Mozilla takes privacy seriously and Firefox has great defaults which will try protect you from a large swathe of tracking and social media cookies.

Open Preferences and head to the Privacy & Security section. You should see the current Tracking Protection set to Standard.

Standard and Strict both block:

Social media trackers
Cross-site tracking cookies
Cryptominers
Fingerprinters

Furthermore, Standard blocks Tracking Content in Private Windows while Strict blocks in all windows.

When you visit a site in Firefox you will see a little shield icon in the toolbar. If you click on it that will show you what the Enhanced Tracking Protection is blocking on that particular site letting you dig into the details.

If you're curious, you can read more on what each of these enhanced protection options block on the Mozilla blog.

Selecting either Standard or Strict is perfectly fine - especially when coupled with Privacy Badger and uBlock Origin. But I wanted to try take things a bit further by blocking all third-party cookies instead of just cross-site tracking and social media trackers.

To do this we have to use Custom settings. Ensure everything is ticked, Tracking Content is set to All Windows and set Cookies to be In all third-party cookies.

Be advised that restricting third-party cookies may cause issues on some sites. For example, I had to whitelist codesandbox.io and csb.app to ensure embedded code snippets were still viewable when browsing certain sites but your mileage may vary. You can whitelist sites under Security & Privacy in the Cookies and Site Data section by clicking on Manage Permissions and adding any domains as required.

If you find the settings aren't working for you then don't be afraid to change it back to Strict or Standard. Firefox will still give you some tracking protection regardless of the option you set.

Set Firefox as your default browser

Now that you have everything setup and ready to go its time to make Firefox your default browser. You will find a handy Make Default... button at the top of the General panel in the Preferences.

Keeping our Google Account seperate

The Firefox Multi-Account Containers extension lets you keep parts of your online life separated into colour-coded tabs that preserve your privacy. Cookies are separated by container, allowing you to use the web with multiple identities or accounts simultaneously.

Lets be honest, Google Search has some of the best results out there - I still miss you, Alta Vista! They have also created some truly amazing web apps that have enhanced our lives. Can you imagine still travelling with a paper map thanks to Google Maps? Gmail provides both a slick interface and untouchable spam protection. The convenience of a trip automatically created in Google Travel based on flight and hotel bookings is a delight. I am willing to accept a balance in the ways my personal data is used and it would be naive to assume we could still surf the web in a purely anonymous way while taking advantage of these conveniences.

That doesn't mean I want all of my searches and history to be associated with my Google account for them to use to continue building an ad-targeting profile about myself.

Chrome is an absolute beast at collecting data about you and adding it to your Google account. Take this moment to view your own activity logged against your Google Account. By default it will log every single Google search you perform and every single website you visit.

You can stop Google searches being logged by pausing your Web & App Activity settings against your Google Account. Furthermore, inside Chrome change your Sync Settings and turn off any items you don't want to sync such as History.

That's all fine but we're busy switching browsers here! And thankfully switching to a browser other than Chrome allows you to be signed into your Google Account and none of your browsing history is synced. Your Google searches, however, will still be synced with your Google account (unless you still pause Web & App Activity).

As such, the rest of this article is purely optional but I wanted to use the Firefox Multi-Account Containers extension and try take our privacy one step further by keeping our Google account completely separated from our daily browsing and general searches.

I don't use Facebook but that is another site that would be a perfect use case for a dedicated container. Google provides us with beneficial apps; Facebook is just plain creepy.

Create a Google Container

The Multi-Account Containers extension installs with a few blank containers already setup. We'll start by pruning this list.

Click on the extension's icon in the Firefox toolbar and then on Edit Containers at the bottom. You will now see the list of containers and next to each a pencil icon to edit and a trashcan icon to delete. Delete all of the containers you don't wish to keep (personally, I purge the entire list). Don't worry, there is a default container that you cannot edit or delete so it is safe to clear out the entire list.

Exit Edit Mode and click on the + symbol to add our Google container.

I name it Google, select red for the colour and a pair of snooping glasses as the icon. Click OK to complete the creation.

Assign Google apps to the container

Any tab you open will automatically open in the Default container. We want to keep this default container completely disassociated from our Google Account so do not log into your account within any of the normal tabs.

To actually open a tab in the Google container you have to click on the extension icon and click on "Google" (the name of our newly created container). You should now see a new tab with a visible red underline to clearly show it is a tab in a special container. It is within this tab that you want to log into your Google account. Do not do so in your Default container (identified by no underline on the tab).

Once you have logged into your Google Account we are ready to assign the numerous web apps to favour opening in that segregated container. Start by going to a Google App you use often such as mail.google.com or keep.google.com. Once the app loads click on the multi-account extension icon again and you should see a checkbox that tells Firefox you prefer opening it in the assigned container.

Now whenever you go to (for example) keep.google.com it will first ask if you want to open that web app in the preferred container (in this instance the Google container). You might like that Firefox always asks and there are some scenarios where that is preferred, but it would get pretty old pretty quickly if Firefox always asked you if you wanted to open mail.google.com in the Google container. Thankfully, we can tell Firefox to remember our decision and automatically open in the specified container without prompting us.

The one URL you should not add to automatically open inside of the Google container is www.google.com. This may seem counter-intuitive but if we set that domain to always use the Google container then any random search in the addressbar will open in the Google container. Since we're actually logged into our Google account in that container all of our search activity and history will still end up associated with our account.

Instead only register Google apps with the Google container.

My personal preferences:

mail.google.com
calendar.google.com
drive.google.com
photos.google.com
keep.google.com
myaccount.google.com
youtube.com

Once you have completed setting up your Google container you are free to do any Google searches in a new tab since it will be in the Default container - the one where we are not logged into our Google Account. Any searches you do from within a Google container tab will still be associated with your account.

Conclusion

My switch to Firefox has been very successful and I have enjoyed using it the last few months - especially the Developer Edition! If you have any tips of your own or ideas on how the settings can be further improved then please leave a comment below.

Color Management in Firefox

Fri, 03 Apr 2020 14:25:15 GMT

I recently switched from Google Chrome to Mozilla's Firefox to use a more privacy friendly browser with more considered defaults. Mozilla have put a lot of effort into making Firefox an excellent choice and I was pleasantly surprised with how well it holds up - I cannot imagine switching back to a Chromium based browser anytime soon.

There is, however, one aspect to Firefox that did come as a surprise - the default colour management settings leads to dramatically oversaturated colours on a wide gamut monitor such as the MacBook Pro.

There is a way to fix it for general web content and images not tagged with ICC color profiles.

How to set Firefox to be fully color managed

Open Firefox and go to the configuration by entering about:config into the addressbar. You'll be warned about dragons behind the closed door but just click the button to proceed.

Search for color_management to filter the list of settings. You're looking for two in particular.

Change gfx.color_management.enablev4 from false to true.

Change gfx.color_management.mode from 2 to 1.

Restart Firefox and your browser will now be fully colour managed.

A few days after I published this article Firefox Nightly released version 77. The default setting for gfx.color_management.mode in that Nightly build has been set to 1 meaning it will hopefully be set to fully managed in a future stable release.

Firefox color management settings explained

On a default install the mode is set to 2 meaning that colour management will only be applied to images tagged with an ICC color profile. Everything else is rendered without using your colour profile leading to over saturated text and images. Changing this to 1 sets Firefox to be fully colour managed meaning everything rendered by Firefox (including page elements, CSS colours, tagged images and untagged images) will be colour corrected based on your monitor's colour profile.

The enablev4 setting simply allows the use of ICC V4 profiles instead of the default V2 profiles.

You can read up more on the color correction settings on the Mozilla blog. Note that the last information I could find regarding these settings stretches all the way back to Firefox 3.5 released on 30 June 2009 showing just how long nothing has changed.

Examples of differences between Firefox and Chrome

Firefox with no color correction (default settings)

Note how oversaturated the colours are on Firefox's default settings - especially in the reds. If you look at the colour picker, you should see the red in the header is rendered at #E60012. This is the exact HEX value given in the CSS but on a wide gamut monitor it should be colour corrected to display the red the way it was meant to be shown.

Chrome (default settings)

Chrome uses my MacBook Pro's color profile to apply color correction to the contents rendered on a wide gamut display.

Fully color managed Firefox

Here we have Firefox with the color management settings changed to ensure content Firefox renders is fully managed. This unfortunately does not include videos such as YouTube or Netflix. Sadly, Firefox does not yet apply proper color correction to video content the way Chromium browsers do.

Firefox comparison

This side by side should show the dramatic difference between Firefox settings.

Automatically format JavaScript commits using Prettier, Husky and lint-staged

Mon, 08 Jan 2018 15:37:39 GMT

What we will accomplish.

Automatically run the code formatter Prettier against all relevant files currently staged ahead of being committed to your repository.

Equally important, our solution should ignore all files not currently staged and leave these untouched.

This will ensure you can spend more time checking actual code quality in pull requests by leaving the formatting to your tools.

If you want to learn more on setting up Prettier and ESLint then take a look at my previous article on the topic.

Install dependencies

First install the required dependencies.

npm install --save-dev husky lint-staged

Husky provides the ability to create git commit hooks allowing us to run a few commands as a precommit sequence. Perhaps worth noting that you will need a git repository (even empty) already initiated within the project prior to installing Husky as it will setup git hooks during installation.

Lint-staged on the other hand provides a way to pipe only the files currently staged for commit to Prettier as opposed to the entire codebase.

Update our npm scripts

At its simplest this is all you need to add to your package.json to leverage these pre-commit hooks.

package.json

  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,json}": ["prettier --write", "git add"]
  }

The precommit script is handled by Husky and will run lint-staged (or any other command we provide) ahead of the actual commit.

Lint-staged then looks at its own configuration in the lint-staged section of our package.json.

In our example, all .js, .jsx, and .json files will automatically be formatted by Prettier before adding these newly formatted file changes back into our list of staged files.

Why lint-staged?

You might wonder why we don't just use Husky to run a few npm scripts.

The key concept is that we only want to apply the code formatter to the list of files currently staged - nothing else. I've repeated that phrase a few times through this short tutorial because it's an important point to keep in mind.

You might already have an npm script to run prettier on your .js and .jsx files (similar to "format": "prettier --write '**/*.{js,jsx}'"). If so, you might be tempted to add npm run format into the lint-staged configuration instead of prettier --write - but don't do this.

The npm script format is running prettier against all files matching the '**/*.{js,jsx}' pattern. This would mean lint-stage would run Prettier against your entire code base and not purely on files currently staged. To repeat - this setup has the side-effect of writing format changes to files not currently staged.

I mention the above as I have seen a few Husky / Prettier tutorials out there advocating the use of an npm script that is inadvertantly run against the entire codebase. Instead leverage lint-staged to pipe the matching files from the list of staged changes into the prettier command.

BONUS: Add testing to your precommits

Husky can also be hooked up to your testing to ensure only code that passes tests are eventually committed.

Here's the most basic example of adding tests as a precommit check in your package.json

package.json

"scripts": {
    "test": "exit 0",
    "precommit": "lint-staged && npm test"
  },
  "lint-staged": {
    "*.{js,jsx,json}": ["prettier --write", "git add"]
  },

Obviously, this is the most foolish test pattern in existence but you get the idea how you can add something like Jest, Mocha or any other test framework that is currently already in use in your application.

Migrate G Suite account to a Personal Google Account

Sun, 12 Nov 2017 12:48:43 GMT

The feature announcements of Google’s new Pixel 2 phones has me excited and ready to switch over to Android from iOS.

I have been using a G Suite account for many years - back when it was still called Google Apps For Your Domain - to allow me to use the excellent Google products behind my own email address instead of a gmail.com address.

Unfortunately, I learned that Google Assistant does not integrate deeply with G Suite accounts. This would mean I would miss out on many of the advantages the focus on Hardware + Software + Artificial Intelligence would bring from making the switch.

Not willing to accept a lesser experience, and holding a deep desire to try out the potentially truly smart mobile devices, I researched ways to migrate my G Suite account to a Personal Google Account and still keep the more professional vanity domain as my primary address.

Key Concepts
Preparation
Google Domains
Chrome Bookmarks
Contacts
Calendar
Photos
Google Drive
Gmail
Sign in using primary email address
Google OAuth - A Warning

Key Concepts

The guide is separated into a section per Google product.

There are two types of email addresses in use:

A primary email address using your own domain
A Personal Google Account email address ending in gmail.com (or googlemail.com)

There are two types of Google accounts in use:

G Suite
Personal Google Account

The G Suite account relates to the paid account using your own domain for login and email. For the purposes of this guide we’ll assume the primary email address is mario.bros@mushroom-kingdom.com and is initially associated with your G Suite account.

The Personal Google Account relates to what is also often referred to as a Gmail Account. It comes with access to calendar, drive, photos and many other Google products available to G Suite users. Personal Google Accounts have the extra benefits of a more integrated experience into Google Assistant. For the purposes of this guide we’ll assume the Personal Google Account is mario.bros@gmail.com

My G Suite account only had one User so this method is not tested against G Suite accounts with multiple Users.

Preparation

If you haven’t already done so register a Personal Google Account at https://accounts.google.com/SignUp.

Open two instances of Chrome with one logged into your G Suite account and the other into your new Google Account.

If you aren’t sure how to do this, click the text on the very top right of Chrome and select Manage People and select Add Person on the window that pops up to add separate users for G Suite and the Personal Google Account.

Google Domains

I transferred my primary domain to Google Domains some time ago and this turned out to be advantageous.

It’s worth noting that I am also using Google Domains nameservers which makes some of the setup easier - especially when we get to setting up email forwarding.

Initially the primary domain is owned only by the G Suite account and this ownership needs to be transferred to the Personal Google Account.

G Suite Open https://domains.google.com and click on the icon of two people to go to the Sharing settings. Alternatively, click on the gear icon next to your domain and then Permissions to expand the settings.

Enter the email address of your Personal Google Account and give it Full Permissions.

Personal Google Account

You should receive an email confirming at your Personal Google Account you have been granted domain management permissions for the domain.

Open https://domains.google.com and you should now see your primary domain listed in the My Domains section.

Feel free to remove the G Suite user’s permissions at this point.

Chrome Bookmarks

G Suite

Open the Bookmarks Manager (chrome://bookmarks/) and click Export Bookmarks to HTML file... in the Organize drop down.

Personal Google Account

Open the Bookmarks Manager (chrome://bookmarks/) and click Import Bookmarks from HTML file... in the Organize drop down.

Contacts

G Suite

Open https://contacts.google.com and click Export in the More drop down (not available in the newest look Google Contacts but you will be given the opportunity to switch to the old version if you click Export).

Customise the export to your preferences, but I used

Contacts to Export. Export only the My Contacts Group to avoid also exporting Other Contacts which Google might add to if you have it set to store any email address to which you reply.
Export Format. Google CSV is the preferred option.

Personal Google Account

Open https://contacts.google.com and expand the More drop down. Select the Import option and choose the CSV you created from your G Suite profile.

Calendar

G Suite

Open https://calendar.google.com in a new tab in Chrome.

If you are using the newer Google Calendar layout, click on the gear icon in the top right and select Settings. Click on the Import & Export sidebar menu option and then click on the Export text in the bottom right of the Export panel.

This should download a ZIP file of your iCal events.

Personal Google Account

Open https://calendar.google.com in a new tab in Chrome.

Similar to the G Suite procedure, click the gear icon, choose Settings, click Import & Export from the sidebar menu.

Inside the Import panel, select the iCal ZIP file previously downloaded and confirm which calendar you wish to add the events. I only have one primary calendar so it would be chosen by default.

Caveats

Guests to calendar events in the G Suite account aren’t imported into the Personal Google Account calendar.

Later we will change it so you can also log into your Personal Google Account using the email address associated with your G Suite account. This will allow users to invite you to calendar events using your primary email (mario.bros@mushroom-kingdom.com) instead of the less professional Personal Google Account (mario.bros@gmail.com). Replies to invitations will, however, show as coming from your Personal Google Account.

Photos

I had been running the Google Photos iOS app for some time and all of my photos were being backed up to my G Suite account. Luckily all of my photos were stored on my phone as it had 128Gb.

To transfer photos all I had to do was log out of my G Suite account in the iOS app and log into my new Personal Google Account. The app will then begin syncing photos automatically.

Once completed it can take a few days to properly crawl your images and the EXIF data.

If you don’t have all your photos on a mobile device you can still export and import photos using two alternatives.

Alternative 1

Open https://photos.google.com in the G Suite account and select the Photos section from the sidebar.

Hover over the first image and click in the little circle to change it to a tick. Now hold down shift and click on the last photo to select all. You can then download all photos to your local computer.

Open Google Photos in the Personal Google Account and upload the images en masse.

Alternative 2

Same procedure as above, select all your photos in the G Suite account. Share these with your Personal Google Account and from that account choose Add to library.

I haven’t tried either of these so I am unsure of any caveats - for example, what happens if you delete your G Suite account after sharing and adding photos to the Google Account library.

Google Drive

You cannot export your Google Drive documents in the Google Document format. Instead these would be converted to MS Office formats during an export. This isn’t ideal as we’ll be importing it into our Google Account and expect it to be GDoc format.

Thankfully there’s a procedure you can follow using the Backup and Sync (previously Google Drive Sync) app on your computer.

G Suite

If you don’t have the Backup and Sync app installed then do this first.

Log into it using your G Suite account and allow it to sync all of your files to your local machine. This will download all files into a specially designated Google Drive folder.

Share all of your Google Documents (docs, sheets, etc) with your new Personal Google Account. You can speed this up by sharing on the folder level which will propagate to all subfolders and files. You don’t have to do this for normal files such as images, compressed archives, pdfs, etc and is only required for Google Documents due to owner permissions.

Using our examples, mario.bros@mushroom-kingdom.com would share all of their Google Drive files with mario.bros@gmail.com.

Personal Google Account

Once all of your Google Drive contents has synced down to your laptop you’re ready for the next step.

Log out of your G Suite account in the Preferences section of the Backup and Sync app. The Google Drive folder will still be on your local computer with all of your files including those in Google Documents formats.

Now log into your Personal Google Account in the Backup and Sync app. It will find the Google Drive folder and begin uploading all files to your new Google Account Drive.

If you didn’t share the Documents with your new user it will fail permissions and only upload files that are not Google Documents. This ensures only Google Documents that you have permission to view and edit are added to your account.

Once completed your new Personal Google Account will be the owner of all files (previously owned by your G Suite user) inside your Personal Google Drive.

It is now safe to remove the shares from inside the G Suite account.

Caveats

Similar to Calendar Events these newly uploaded Google Documents will no longer have any of the previous shares. You will need to share folders and/or files manually once the uploads are complete.

You may also need to Add to Drive any files or folders that are under your Shared With Me section.

Thankfully this wasn’t an issue for me but you should be aware of this impact on your files.

Gmail

Configuring mail was definitely the trickiest of the switchovers with quite a few steps.

The key here is that I’ve transferred my domain to Google Domains which allows me to setup email forwarding quite easily. If you’re hosting elsewhere you could probably setup an email redirect but I haven’t tested out the workflow.

Step 1) Import emails into Personal Google Account

G Suite

Log into https://mail.google.com and go to Settings (found under the gear drop down menu) and then navigate to the Forwarding and POP/IMAP tab.

Enable POP Download on your G Suite account if it is not already turned on. Be sure the setting for When messages are accessed with POP is set to keep mail’s copy in the Inbox to avoid the messages being deleted from the G Suite account. This will be a life saver should anything go wrong.

Personal Google Account

Log into https://mail.google.com and go to the Accounts and Import tab in Settings.

Click on Add a mail account in the Check mail from other accounts option. This will trigger a popup where you’ll enter your G Suite credentials.

If asked to use Gmailify or Import emails from my other account (POP3) select using POP and continue.

Email will be your G Suite email address. POP Server will be set to pop.gmail.com using Port 995 with the username and password to match your usual login.

You have the option of labelling the incoming messages and to automatically Archive the emails (I didn’t do either).

Ensure you have checked the Always use a secure connection (SSL) when retrieving mail. selection.

After you’ve filled in all the details and click Add Account you will be presented with the option to also send mail as this address. Choose No for now as we’ll set this up later.

Click Finish and go do something for an hour or three (maybe finish off those last few Shrines in Zelda - Breath of the Wild you've been putting off for ages?).

Click on the View History link now appearing in the Accounts tab to check progress. Wait until the feedback shows No mails fetched with regularity.

Once the import into your Personal Google Account has completed, send an email to your primary email address. This will allow us to test and verify emails sent to your current primary email address (mario.bros@mushroom-kingdom.com) will continue to be pulled in by your new Personal Google Account (mario.bros@gmail.com).

Step 2) Email Forwarding

At this stage, any email sent to your preferred email address (mario.bros@mushroom-kingdom.com) is still connected with your G Suite account. These emails arrive into your G Suite mail first and your Personal Google Account (mario.bros@gmail.com) simply pulls new emails received since the last import.

That’s not ideal as we want to move completely away from the G Suite account. It’s now time to setup email forwarding under our domain in Google Domains.

Personal Google Account

Open https://domains.google.com and click on the Email section next to the primary domain.

Under the Email Forwarding section add any desired email addresses under your domain that you wish to forward to your Personal Google Account. You can, if you wish, add a wildcard (*) address to forward any emails sent to your primary domain to your Personal Google Account.

Using our examples we would set mario.bros@mushroom-kingdom.com to be an alias email address forwarding to mario.bros@gmail.com.

As an aside, once you set an email forward inside Google Domains it automatically adds Email Forward entries to the Synthetic Records section under the DNS configuration.

Test that the email forwarding is working by sending an email to your primary email address (mario.bros@mushroom-kingdom.com). You should now receive this email only in your Personal Google Account inbox (mario.bros@gmail.com) and it shouldn’t even touch the inbox of your G Suite account. Verify this by checking both inboxes at https://mail.google.com.

Step 3) Remove Import into Personal Google Account

Now that we have email forwarding setup and no emails hit the G Suite inbox it’s time to remove the import settings from the Personal Google Account.

Personal Google Account

Open https://mail.google.com if you don’t already have it open and navigate to the Accounts and Import tab under Settings.

In Check email from other accounts you will have the POP settings from the initial mail import still active. Click the delete link to remove this as it is no longer required. This will delete the link between accounts only and all emails in the original G Suite inbox are untouched.

Step 4) Send mail as primary email address

Currently if you were to reply to any emails received to your primary email address (mario.bros@mushroom-kingdom.com) it would come from your Personal Google Account (mario.bros@gmail.com). This is clearly far from an ideal solution.

Thankfully we are able to add multiple email addresses from which we can reply inside our Personal Google Account mail.

Personal Google Account

Open https://mail.google.com if you don’t still have it open from the previous step and navigate to the Accounts and Import tab under Settings.

Click on Add another email address under Send Mail As and a popup window will appear.

Enter the email address you wish to also reply from under the Personal Google Account. Using our examples we would enter mario.bros@mushroom-kingdom.com here. Keep the Treat As An Alias box ticked. The next screen will ask you to enter the SMTP details. Enter smtp.gmail.com for the SMTP Server and your Personal Google Account credentials for Username and Password. Be sure to use SSL connection on Port 465.

The screen might also ask if you want to Send through Gmail or your own SMTP server as two checkboxes. If shown this simpler screen instead simply select to use Gmail.

After adding your primary email address (mario.bros@mushroom-kingdom.com) click on make default to ensure this is the default address.

You should now find you can reply to any received emails within your Personal Google Account as if it were from your preferred primary email address (and not the gmail.com one).

Emails to the primary email address are now being forwarded to the Personal Google Account, but it is still associated with the G Suite account as the login username.

The final piece to our migration is to add our primary email address as an alternative email on the Personal Google Account.

Unfortunately we cannot add an alternative email address that is already associated with a Google account. It is now time to completely disconnect the primary email address from G Suite and allow us to log into the Personal Google Account using that as the username.

G Suite

Open G Suite Admin at https://admin.google.com and navigate to Users.

Click to view the details of your User and expand the Account section. Click Edit under Basic Information and you should be presented with a popup allowing you to change the User’s email address. Change this email address to something unique and click Update User - this is so we can release our preferred primary email address from being used.

Using our example we could change mario.bros@mushroom-kingdom.com to luigi.bros@mushroom-kingdom.com thereby freeing up our original address.

Note that the original email address becomes an alias against the user account. It is safe to delete this alias.

Personal Google Account

Open https://myaccount.google.com/email and click to add a new address under Alternative Emails.

Enter your primary email address (mario.bros@mushroom-kingdom.com) which will add it to our Personal Google Account pending verification.

An email will be sent to our primary email address which should be forwarding seamlessly to your Personal Google Account’s inbox. Open your inbox at https://mail.google.com and verify adding the primary email address as an alternative email to your gmail account.

Once verified you are now able to sign into your Personal Google Account using the more professional address associated with your own domain. Test this in an incognito tab to make sure everything is working.

Google Calendar

It's worth noting that adding an alternative email to your Personal Google Account will add it to the Allow responding to invitations forwarded through alternative email addresses list inside your Google Calendar settings for your primary calendar. This can be verified by looking at the General Notification settings for your calendar.

The added benefit to adding the alternative email means you can also be invited to calendar events using your primary email address.

What cannot be migrated?

Unfortunately not everything can be migrated from G Suite to the Personal Google Account.

Potentially the biggest hurdle for some would be purchases made through Google Play - be it music, movies or apps. Thankfully I had been using iOS up until the pre-order of the Pixel 2 XL so I did not have a huge investment in the Android and Google marketplace.

I could not find a way to migrate YouTube subscriptions nor did I spend much time researching Google+ migration options.

Google OAuth - A Warning

If you have created any accounts on external services using your G Suite account as your sign-in then you might have more work ahead of you. This is usually for services where you get the option to create an account or Sign In With Google.

You will potentially lose access to the third-party account if it does not also provide an alternate login method or a way to create an dedicated account after logging in with Google OAuth. Feedly, for example, allows you to associate your account with multiple Google Accounts making the migration from G Suite to my Personal Google Account a non-issue.

Sadly, I lost my Pokemon Go account due to this migration due to their inability to transfer accounts

Personally, I had not used my G Suite account to create single sign-on accounts with too many other services. Your mileage may vary so do tread cautiously.

You can take a look at the third-party apps with access to your G Suite account by looking in the Security tab under the User in the G Suite Admin. You Google Account Permissions page may also provide the list of authorised third-party applications.

BONUS: Using CloudFlare to manage DNS

If you wish to use CloudFlare instead of Google for managing your DNS then there is a solution. You will still need to have your domain registered at Google Domains for the email forwarding to work this way.

Point your domain to CloudFlare's DNS and be sure to add the following as MX Records:

gmr-smtp-in.l.google.com (Priority 5)
alt1.gmr-smtp-in.l.google.com (Priority 10)
alt2.gmr-smtp-in.l.google.com (Priority 20)
alt3.gmr-smtp-in.l.google.com (Priority 30)
alt4.gmr-smtp-in.l.google.com (Priority 40)

Test the emails are forwarding by emailing your primary email address (mario.bros@mushroom-kingdom.com).

THE END!

Configure Prettier and ESLint in Visual Studio Code

Sun, 06 Aug 2017 19:16:59 GMT

What will we be accomplishing?

We will cover how to install and configure both Prettier and ESLint within a Node project.

This post will also cover how to integrate these tools into Visual Studio Code.

Updated on 19 September 2017 to include Prettier 1.6's new support for configuration files. Updated on 13 April 2020 to remove Airbnb config and reflect my current default setup.

TL;DR The list of commands to run

If you just want the commands to setup Prettier and ESLint.

npm install --save-dev prettier eslint eslint-config-prettier

Create a .eslintrc.json in project root

.eslintrc.json

{
  "extends": [
    "eslint:recommended", // Good standard base of rules to use by default
    // The prettier shareable configs need to come last
    "prettier"
  ],
  "rules": {
    // My preferred rules
    "no-console": "warn",
    "no-var": "error", // preference for let and const only
    "prefer-const": "error",
    "eqeqeq": "warn" // warn to use === instead of ==
  },
  "parserOptions": {
    "ecmaVersion": 2018, // Use the latest version ESLint understands
    "sourceType": "module" // We're using import/export, etc
  },
  "env": {
    "es6": true, // Since we're using ES6+ features like Async/Await
    "browser": true,
    "node": true
  }
}

Install the VSCode extensions

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode

Change VSCode settings to include "editor.formatOnSave": true, to automatically format on save.

What is Prettier?

Prettier is an opinionated code formatter

A tool that will format code against some opinionated and standard default formatting rules to ensure all final code maintains a consistent style. It is particularly advantageous when working on projects in teams.

Prettier currently supports JavaScript (including ES2017), JSX, Flow, TypeScript, CSS, LESS, SCSS, JSON and GraphQL.

What is ESLint?

ESLint - the pluggable linting utility for JavaScript and JSX

Code linting is a form of static analysis that will find both code errors as well as highlight syntax not adhering to formatting styles. This means ESLint can help us find problematic code before we commit to version control and (more importantly) before the code finds its way onto Production.

Why not just use ESLint?

Good question.

It's true that ESLint could very well handle both the code quality errors and syntax format violations. But we will rely on ESLint purely to help alert us to problematic code and defer the format handling to Prettier.

Prettier's sole specialisation is to handle formatting of code and it does this job extremely well. By focusing primarily on the formatting rules, Prettier can do more sophisticated things under the hood, but due to being opinionated doesn't require time fine-tuning these style rules.

In short, ESLint is the de facto for static analysis and Prettier has quickly become the go-to tool for formatting code.

Setup the test project

Begin by creating a very simple Node project in a blank directory.

npm init -y && mkdir src && touch src/index.js

Edit the src/index.js file and paste the below code - be sure to include the weird tabbing.

src/index.js

var logToConsole = msg => {
console.log(msg)
}

    let message = "my message to log"
          logToConsole(message)

Configure Prettier

Install the dependencies

Begin by installing Prettier as a dev dependency in our project.

npm install --save-dev prettier

We install all the dependencies local to the project and avoid installing Node packages globally on our system.

Rule of thumb: If your project depends on a package, it should be listed in your package.json file as a dependency and installed locally in your project, rather than globally.

Test Prettier on our code

At its simplest Prettier can be run as a command-line tool. We'll be doing that now to test everything is correctly installed.

Out of the box Prettier already has excellent defaults, including:

indenting using spaces and not tabs
indents are 2 spaces
semicolons inserted at the end of every line
setting all quotes to double quotes
formatting the code against a print width of 80

I personally prefer using single-quotes and a print width of 100. Thankfully, Prettier allows us to override any defaults using various command-line options passed at run-time. Learn about the defaults and decide on your own overrides by reading the Options available in the Prettier documentation

Run a test of Prettier against our code from the command-line.

./node_modules/.bin/prettier --single-quote --print-width=100 "**/*.{js,jsx}"

Running Prettier this way on the command-line outputs to the screen the format changes that would have been made to our code based on the rules defined. It's important to note that the format changes have not been written to the src/index.js file - you can verify this by opening the project in your code editor and see it hasn't changed. If you want Prettier to write the formatting changes you need to add --write to the options list.

We've installed Prettier as a dependency in our local project which requires us to include the full ./node_modules/.bin/ path when running it from the command-line.

The last part of the command is where we define which files to run Prettier against. This could be a single file or a group of files. If you look closely we've specified the path as **/* and not src/**/* where our index.js file resides. Despite running against all js and jsx files from the project root, the output was only for our src/index.js file. I wanted to show that Prettier smartly ignores the node_modules directory and concentrates only on our code.

Create a Prettier config file

We could continue to just run Prettier from the command-line but supplying our preferred list of overrides would quickly get boring.

Thankfully, as of Prettier 1.6+ we can create a .prettierrc file to store our preferred settings and overrides.

Adding a Prettier config file explicitly documents our formatting preferences within the project.

Create a .prettierrc file in the project root.

touch .prettierrc

The configuration uses the Prettier API Overrides to set values (visit the link to find your own preferences).

If following along, add the following JSON to our .prettierrc config.

.prettierrc

{
  "printWidth": 100,
  "singleQuote": true
}

Read up more on the Prettier configuration file.

Add Prettier to our npm scripts

At this point we could rerun the Prettier CLI command to test out our new config file.

Instead, we'll add a line to the scripts section of our package.json file to allow us to easily run the formatter manually but also hook into other scripts as pre-requisites.

Open the package.json file and add a line to the "scripts" section

package.json

"scripts": {
  "format": "prettier --write '**/*.{js,jsx}'"
}

We no longer specify the print width and single quotes as this is covered by our .prettierrc file. The --write flag is also used to save the changes to our file when run.

Now all you need to do is run npm run format to have Prettier format our code.

Note that since we're running Prettier via an npm script we no longer need to provide the full ./node_modules/.bin/ path.

Now that we have the command as an entry in our npm scripts, we can use Prettier as a pre-commit hook using the excellent Husky package. I'll leave that as extra reading for you to keep this tutorial on target. [Update 2018/01/08 - I have just published an article to automatically format your JavaScript commits using Prettier and Husky]

The creation of the npm script still doesn't solve having to manually run Prettier each time we want to format our code. Lets take the opportunity to automate applying any format changes upon saving a supported file type in Visual Studio Code.

Integrate Prettier with Visual Studio Code

Install the Prettier extension in Visual Studio Code

Open the extension sidebar (Cmd-Shift-X) inside Visual Studio Code and search for Prettier - JavaScript formatter. There are a few extensions with that name so be sure to install the one by Esben Petersen.

You will need to reload the Visual Studio Code window after installing the extension. You should now see a Prettier notification in the status bar when opening up a file type supported by Prettier.

Visual Studio Code settings

The only change required to Visual Studio Code's settings.json file is to ensure the Format On Save functionality is triggered. This ensures the Prettier extension applies the format rules on each save of a supported file type.

To do this open settings and add Visual Studio Code's formatOnSave setting.

settings.json

"editor.formatOnSave": true,

Prior to version 1.6 of Prettier we were required to duplicate our override preferences in the Visual Studio Code settings. Thankfully this duplication is no longer required thanks to our .prettierrc config file (documenting and setting these preferences in a single location is a big victory).

If you are using an earlier version read the Prettier extension's documentation for available settings to add to your Visual Studio Code settings.

Now when you save a supported file it will automatically apply your formatting preferences. In fact, do this now to /src/index.js to see it in action.

Configure ESLint

Install the dependencies

Start by installing ESLint.

npm install --save-dev eslint

Create the ESLint config file

Create a .eslintrc.json file in the project root.

It is inside this file that you apply project-wide and ESLint configuration and linting rules. Read more on configuring ESLint.

Add the following configuration to your newly created .eslintrc.json file.

.eslintrc.json

{
  "extends": [
    "eslint:recommended" // Good standard base of rules to use by default
  ],
  "rules": {
    // My preferred rules
    "no-console": "warn",
    "no-var": "error", // preference for let and const only
    "prefer-const": "error",
    "eqeqeq": "warn" // warn to use === instead of ==
  },
  "parserOptions": {
    "ecmaVersion": 2018, // Use the latest version ESLint understands
    "sourceType": "module" // We're using import/export, etc
  },
  "env": {
    "es6": true, // Since we're using ES6+ features like Async/Await
    "browser": true,
    "node": true
  }
}

A little more about ESLint Rules

ESLint makes use of rules to determine whether certain code should be allowed or disallowed. No rules are enabled by default so it's up to us to define these rules based on our own requirements.

You can see a full list of ESLint rules in the online docs.

At the most simple, we could define the rules in the .eslintrc.json under a "rule" node. Thankfully, there is the ability to create shareable configurations of rules. These shareable configurations take the naming convention of eslint-config-<ConfigName> and are simply npm packages that can be easily distributed. Once installed these configurations are added to the "extended" node and the order of inclusion is important so make sure you understand what could be overridden when adding new configs to the extends array.

Read more on extending configuration files in the online docs.

ESLint does come with a set of recommended rules for your convenience so you could easily just install eslint and add "eslint:recommended" to the extends list. These recommended rules are great and are all you really need to get great linting defaults.

If required, you can override any of these by adding explicit entries in the "rules" node or by including further shareable configurations in the "extends" array.

About explicitly enabling ES6 syntax support and environments

If we do not set the parser options our ES6+ syntax will throw linting errors. This is because ES6 syntax support is not enabled inside ESLint - it currently lints against ES5 syntax by default.

We specify the environment options to allow ESLint to be aware of the contexts within which our code will run. For example, setting browser or node allows use of console.log without linting issues.

You are able to explicitly enable ES6 support inside .eslintrc.json.

.eslintrc.json

  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }

Read more on specifying parser options in the ESLint documentation.

Test ESLint on our code

Run a test of ESLint against our code from the command-line. The configuration defined in .eslintrc.json will be automatically used by ESLint.

./node_modules/.bin/eslint "**/*.{js,jsx}"

As with Prettier, ESLint will ignore the contents of the node_modules directory by default.

You might see warnings such as can't resolve reference #/definitions/basicConfig from id #
This relates to a bug in eslint-config-react and can be safely ignored. A pull request is in the process of being merged as defined at https://github.com/yannickcr/eslint-plugin-react/pull/1292

I have intentionally included 2 errors and 1 warning in the code to see ESLint in action.

We could fix those errors and re-run the command manually from the terminal but where's the fun in that? We'll soon integrate ESLint into Visual Studio and use these to identify and fix the errors.

Add ESLint to our npm scripts

Before we move onto actually integrating ESLint into our editor, add a line to the scripts section of package.json.

package.json

"scripts": {
  "lint": "eslint '**/*.{js,jsx}' --quiet",
  "format": "prettier --write '**/*.{js,jsx}'"
}

The --quiet option suppresses warnings and reports only errors. This makes the command especially handy as a pre-commit hook to avoid committing code with errors.

Test this on the command line by running npm run lint. You should see the same output as before but without the warning.

Setting ESLint to ignore files or folders

ESLint conveniently ignores the contents of the node_modules directory by default but you can also set other files and folders that should be ignored.

To use this feature you need simply create a .eslintignore file in your project root and fill it with the files/directories to ignore. The patterns used are the same as within a .gitignore file.

A good use case is a build directory if transpiling code using something like Babel or a bundler like Webpack. We aren't doing any of that in this example so we won't require a .eslintignore file.

You can ready more on ESLint's ability to ignore files and folders in the official documentation.

Integrate ESLint with Visual Studio Code

Install the ESLint extension in Visual Studio Code

Once again open the extension sidebar (Cmd-Shift-X) inside Visual Studio Code and search for ESLint. There should be only 1 result but in case that has changed be sure to install the extension by Dirk Baeumer.

You will need to reload the Code window after installing the extension.

Verify ESLint is working in Visual Studio Code

Open src/index.js inside Visual Studio Code and you should now see ESLint in the status bar.

There will also be indicators within the code identifying the errors breaking our defined rules. Under my editor theme the red lines indicate errors and green lines indicate warnings.

These are just some of the types of errors ESLint may identify and we'll now see how we can resolve it.

Fixing keyword errors

Hover over the first var keyword and you should see a text popup.

[eslint] Unexpected var, use let or const instead. (no-var)

The initial text provides details on the issue detected and where possible suggestions for a fix. The text in parens tells us which specific ESLint rule is currently being broken (no-var).

Change the var keyword to const and the error indicator should immediately disappear.

Hovering over message should display similar text in the popup suggesting the use of const but look carefully at the rule inside the parens - (prefer-const) in this instance.

This time, instead of just changing the let keyword click on the message variable and a little lightbulb will appear in the gutter next to the row number. Click on the lightbulb and you'll be presented with some fix options - select Fix this prefer-const option and the error will be automatically corrected by replacing let with the const keyword.

Ignoring expected rule violations

Sometimes we might write code that breaks a rule but we want ESLint to ignore this error - such as with the console.log in our example code.

Normally you wouldn't want to use console.log throughout your application and the warning is justified. But for the purpose of this example let's assume we want to allow the use without ESLint alerting.

Hover over console.log and you'll see an ESLint warning in a familiar format.

[eslint] Unexpected console statement. (no-console)

The rule name (no-console) is what is most important here. To disable linting for code we can add a comment before it using the eslint-disable-next-line trigger.

Add the comment to src/index.js above the console command.

src/index.js

// eslint-disable-next-line no-console
console.log(msg);

You can read more on disabling ESLint rules in the online documentation.

When format rules collide...

There may be instances where Prettier will format your code upon save but make a change that conflicts with a formatting rule within an ESLint configuration we are extending. If this is the case, Prettier will change the code and ESLint will throw a linting error/warning. Fixing the linting issue and saving the file will just trigger Prettier and the linting warning will return in a loop.

Our tools are in conflict!

It's time to configure Prettier and ESLint to work together. We want our tools to really focus on their specialisations. To do this we need to disable all formatting rules inside ESLint and let Prettier take over managing the code style.

Install dependencies

Install the Prettier config for ESLint.

npm install --save-dev eslint-config-prettier

We rely on ESLint being a code quality linter and defer all formatting to Prettier.

Enable the ESLint Prettier config

The eslint-config-prettier shareable configuration disables all of the formatting rules within ESLint previously set by the eslint:recommended ruleset (as well as our explicit rules). We definitely still want to keep all of the excellent code quality rules provided by that configuration though.

Edit .eslintrc.json and add "prettier" after the "eslint:recommended" entry.

.eslintrc.json

"extends": ["eslint:recommended", "prettier"],

The order of configs are important to ensure the new shareable config rules override and disable all formatting rules already set within ESLint.

Prettier will now automatically format our code on each file save and these changes won't conflict with ESLint.

(Optional) Enable the ESLint Prettier plugin

There is a Prettier plugin for ESLint.

This plugin leverages ESLint to show formatting errors as you type and can allow ESLint to auto-fix these. We've set Prettier to run on each file save so we would only benefit from the added visual cues in our editor. If implementing the plugin you will benefit from ESLint reporting Prettier violations when run from the command-line.

If this is something you'd be interested in implementing, install the plugin as a dependency.

npm install --save-dev eslint-plugin-prettier

Next, add a new "plugins" node to your .eslintrc.json to enable the Prettier ESLint plugin. We also need to define the prettier rule to show errors.

The .eslintrc.json file should now contain these extra lines.

.eslintrc.json

{
  "extends": ["eslint:recommended", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

In Prettier versions prior to the configuration file support, the rule needed to duplicate our Prettier preferences once more "prettier/prettier": ["error", { "singleQuote": true, "printWidth": 100 }]. Thankfully this is no longer required.

Bonus Tip: Fix all auto-fixable problems

ESLint has a useful --fix option that can be supplied to the command when run in the terminal. Similar to the --write option in Prettier, this will attempt to fix the issues ESLint discovers and save these against the original file.

This functionality is also available inside Visual Studio Code. Open the command palette (Cmd-Shift-P) and type fix and you should be given the option ESLint: Fix all auto-fixable problems.

The important takeaway is that ESLint cannot fix all of the issues it discovers and using --fix or the extension's command will only fix those which ESLint is capable of automatically fixing.

Conclusion

We have just integrated both Prettier and ESLint into Visual Studio Code. More importantly we have ensured that Prettier controls all format linting and ESLint concentrates on detecting code problems.

Now go write beautiful code!

Permanently add ssh passphrase to keychain

Mon, 08 May 2017 13:14:41 GMT

Store passphrases in your keychain

On MacOS (and OS X) there is a handy option for ssh-add to store your key's passphrase in your keychain.

ssh-add -K ~/.ssh/name-of-your-key-here

You will be prompted to enter your passphrase after which it will be stored in keychain.

Load passphrase from keychain on MacOS by default

In MacOS (Sierra) your ssh key's passphrase is no longer automatically retrieved from keychain across sessions. This means that you will be reprompted for the passphrase if you restart. Being required to re-enter your passphrase each time could be the behaviour you want for added safety, but if not we have a solution. Add the following to your ~/.ssh/config file.

~/.ssh/config

Host *
  UseKeychain yes

This was originally answered in a StackExchange post but I've replicated it here for my own easy access.

Remove all node_modules directories recursively

Sat, 06 May 2017 12:40:19 GMT

Here's a simple command to recursively delete all node_modules directories below the current directory within the tree.

find . -name "node_modules" -type d -prune -exec rm -rf "{}" +

Add this as an alias to bash ~/.bashrc or zsh ~/.zshrc to save having to type it all out each time.

alias node-delete='find . -name "node_modules" -type d -prune -exec rm -rf "{}" +'

Create environment specific configuration for a Node app

Wed, 03 May 2017 23:08:39 GMT

What we will be doing in this post.

We will be solving two main requirements.

Manage sensitive configuration values safely within our app. Additionally these settings will also need to be environment-specific. To accomplish this we use the dotenv module to load data into environment variables not stored in the code.
Ensure application configuration is managed in a single location. We meet this criteria by creating a config module that handles all application configuration. The config module will also include environment-specific overrides.

Overview of files created

.
├── config
│   ├── env
│   │   ├── defaults.js
│   │   └── development.js
│   └── index.js
... rest of your Node project files ...
├── .env
└── .env.sample

Install dependencies

We keep the dependencies low and require only two packages to be installed - dotenv and lodash.

Start by installing the dotenv module using your package manager of choice, be it NPM npm i dotenv --save or Yarn yarn add dotenv. The usage of this module is explained in the next section.

Next we require the merge function from the excellent lodash library.

It seems to be so ubiquitous that you possibly already have it installed as a dependency for your project. But in case you don't, install it using either NPM npm i lodash --save or Yarn yarn add lodash

We use lodash instead of the native Object.assign to ensure a safe, deep merge can take place when combining configurations later on.

If you wish to read more on Object.assign and the way it handles deep merges then be sure to check out the Mozilla Developer Network documentation on the subject.

Manage sensitive configuration values

The dotenv NPM module loads credentials stored in a .env file and saves it in environment variables inside process.env for use within our code.

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.

It is important for security that you do not commit any of your sensitive configuration to version control as these often include items such as database username and password.

The .env file used by this module is stored in the root of the project and should not be added to version control. So be sure to add it to your .gitignore file or the equivalent ignore list in your version control of choice.

Another goal is to ensure our configuration is environment-specific.

Your development environment will likely have different database access credentials compared to another developer's local machine setup also working on the project. In the same way your credentials for development will differ to staging. Storing this in the code would soon become difficult to maintain without collisions.

The dotenv module allows us to easily accomplish both goals.

It is often convention to create a .env.sample file with helpful defaults set to safe values. This file is committed to version control. It will be used by anybody working on the project as a template to create the .env file storing the actual credentials and configuration settings.

Create this file now in the root of your project.

touch .env.sample

Here is an example of a .env.sample file with common settings.

DB_HOST=localhost
DB_NAME=database_name_here
DB_USER=database_user_here
DB_PASS=database_password_here

PORT=3000

Now to get started on the project you need merely copy .env.sample to .env and replace the defaults with actual values.

To reiterate, it's important to note that the only thing this module does is to take settings from a .env file and populate variables in process.env with the same values.

We will cover how these settings are used further down in the Load the Configuration section.

Create the config module scaffolding

The previous section loaded configuration into process.env but we definitely don't want to sprinkle calls to that throughout our code. So instead we'll create a single config module that will handle all of this in one maintainable place.

We start by creating a config directory off of the project root. Within this we create a env folder which will contain some default and environment-specific overrides - including making use of the data loaded by dotenv.

Run the commands from your project root.

mkdir -p config/env
touch config/index.js
touch config/env/{defaults,development}.js

Create default configuration

Now that the general scaffolding has been created we will populate the default application configuration.

Add this code to the config/env/defaults.js file.

const config = {
  port: process.env.PORT || 3000,

  database: {
    client: 'postgresql',
    connection: {
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASS,
      database: process.env.DB_NAME,
      charset: 'utf8',
    },
    debug: false,
  },
  logger: {
    level: 'info',
    format: 'tiny',
  },
};

// Set the current environment or default to 'development'
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
config.env = process.env.NODE_ENV;

module.exports = config;

Define all of the configuration expected by your app inside defaults.js. This is an important point to stress as our environment-specific settings should only ever override values already defined in defaults.js.

Be sure to set your defaults to sensible values. I favour setting defaults that I would want for production such as turning off any debug output. We'll learn how to override these settings in different environments (such as development) in the next section.

This module is the only location in our app that will make direct use of environment variables (such as process.env.DB_HOST). The rest of our app will reference the keys we define in the JSON exported by the config module.

Set environment overrides

Next we create environment-specific configuration overrides by creating files inside config/env named after our environments. It is important that these are named the same as the value we use in process.env.NODE_ENV.

The files inside config/env named after environments will contain only the settings you wish to override for that environment.

Example of a config/env/development.js file.

const config = {
  database: {
    debug: true,
  },
  logger: {
    level: debug,
    format: 'combined',
  },
};

module.exports = config;

A good use for the development override is to set more verbose debug output.

In this example we create config/env/development.js but you would do the same for any other environments across your stack requiring overrides to the default settings.

Load the configurations

Excellent - we've now created the application's default and environment-specific configurations but to use it we need to code our config loader.

The config/index.js file has the responsibility of loading our default configuration and then any environment-specific overrides.

To accomplish that add this code to config/index.js.

const merge = require('lodash/merge');

// Load .env settings into process.env
// Will fail silently if no .env file present.
if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config();
}
// Load our own defaults which will grab from process.env
const config = require('./env/defaults');

// Only try this if we're not on Production
if (process.env.NODE_ENV !== 'production') {
  // Load environment-specific settings
  let localConfig = {};

  try {
    // The environment file might not exist
    localConfig = require(`./env/${config.env}`);
    localConfig = localConfig || {};
  } catch (err) {
    localConfig = {};
  }

  // merge the config files
  // localConfig will override defaults
  merge({}, config, localConfig);
}

module.exports = config;

We start by loading only the merge functionality from lodash.

Next, the line require('dotenv').config(); is what checks for the existence of a .env file and loads the contents into environment variables.

The default configuration is loaded next and stored in a config variable.

The block of code related to localConfig first attempts to include the overrides for the environment defined in config.env. If it doesn't exist then localConfig is safely set to an empty object.

We are now ready to merge the default and environment overrides into a single config object which is exported.

Using the configuration within the app

One benefit to following this config module approach is that it eliminates making process.env calls throughout our app. Instead we simply require our config wherever it is needed.

Example of using this new configuration in an Express app.

const express = require('express');
const app = express();
const config = require('./config');
const logger = require('morgan');

app.set(config.port);
app.use(logger(config.logger.format));

app.listen(app.get('port'), function() {
  console.log(`App running on port ${app.get('port')}`);
});

module.exports = app;

Thunderstorm - a Sublime Text theme for Web Developers

Wed, 16 Sep 2015 10:04:10 GMT

Introducing Thunderstorm - the Sublime Text 3 color scheme for Web Developers.

Supported Languages

The theme is designed by ensuring the colours are set for base defaults which are inherited by languages not explicitly defined.

Thunderstorm has been specifically created for and tested against PHP, HTML, CSS and JavaScript with added support for YAML and XML.

PHP

HTML

CSS

JavaScript

Color Decisions

Thunderstorm was designed to immediately highlight the important code while pushing the less important to the background giving a truly useful At-a-Glance overview of your code.

Class and function definitions are in a red to allow you to very quickly spot where one function ends and the next begins when scrolling.

All function calls are of the same light blue allowing them to pop out when viewing your code.

Variables, on the other hand, are pushed slightly to the background in a dark grey but the use of highlighted variable punctuation (the \$ sign in PHP) ensures variables are still quickly identifiable.

The decision was also made to emphasise control keywords (if, else, return) but ensuring the colour used was not too strong or contrasting against both the background and surrounding code. White was chosen given its neutrality ensuring it still caught your eye but didn’t vie too much for your attention.

Installation

Using Package Control

If you haven't already, install Sublime Package Control
Bring up the Command Palette (Ctrl+Shift+P on Windows/Linux, ⌘+⇧+P on OS X) and type Install Package
Type Thunderstorm to bring the Color Scheme up in the packages list.
On installed, select Thunderstorm from Preferences -> Color Scheme -> Color Scheme - Thunderstorm to activate it.

Using Git

Clone the Thunderstorm GitHub repository to your local machine.
Bring up the Command Palette (Ctrl+Shift+P on Windows/Linux, ⌘+⇧+P on OS X) and type Browse Packages to open your Packages directory.
Copy the .tmTheme file to the Packages/User directory
Once installed, select Thunderstorm from Preferences -> Color Scheme -> User to activate it.

Recommended Settings

Monospace Font

Browse the excellent codeface for fonts that make your source code look beautiful.

I recommend using one of the following fonts:

User Settings

To get the absolute best visuals (as seen in the screenshots above), I recommend the following Sublime Text 3 User Settings:

	"caret_style": "phase",
	"font_face": "Source Code Pro",
	"font_options":
	[
		"gray_antialias" // For Retina screens
	],
	"font_size": 15,
	"highlight_line": true,
	"line_padding_bottom": 3,
	"line_padding_top": 3

UI Themes

Thunderstorm works well with the phenomenally awesome Material Design UI Theme for Sublime Text 3.

Build a Nintendo emulator using a Raspberry Pi 2

Sun, 31 May 2015 18:58:34 GMT

Today we'll build an extremely portable retro gaming console that emulates some classic consoles including Nintendo Entertainment System (NES), SNES, Sega MegaDrive and others.

We will be using a Raspberry Pi 2 and the RetroPie software.

Requirements

Raspberry Pi 2
Raspberry Pi 2 case
Micro SD Card (8Gb+ recommended)
USB controller (we’re using the excellent NES30 controller)
USB keyboard
FTP client
Ethernet cable (local network access only)
HDMI cable and TV/Monitor

Step-by-Step Guide (OS X)

Getting the software

Start by downloading the latest build of RetroPie from PetRockBlock.com. We'll save it to a ~/Downloads/RetroPie directory on our MacBook Pro.

The latest stable release is v2.6 but we’ll be installing RetroPie 3.0 Beta 2. Make sure that you download the correct build depending on whether you're using a Raspberry Pi 1 or 2.

The Raspberry Pi 2 is highly recommended for the extra CPU power which comes in handy to get emulation without lag and is a requirement for some of the more demanding consoles such as N64.

The RetroPie distributable is usually compressed so unpack the archive to a .img file after the download is complete.

Installing RetroPie

If you aren't keen to use the command-line on OS X or perhaps use Windows instead there are some programs that can help with the progress.
For Windows use Win32 Disk Imager
For OS X use PiWriter

Insert the Micro SD Card into your Mac and open up your Terminal program (I use iTerm2 but OS X comes with a built-in Terminal).

We need to start off by finding the device node of the Micro SD Card. Use a built-in command-line utility called diskutil to get a list of all current disks attached to your machine.

From the open Terminal window run:

diskutil list

You’re looking for the entry that matches your Micro SD Card. In the screenshot we can see our SD Card is at /dev/disk2. Make note of the device node and be very sure you have the correct one.

Now that we have the device node, we need to unmount the SD Card by running:

diskutil unmountdisk disk2

Replace disk2 above with your own device node leaving off the /dev/ prefix.

Still in the terminal, navigate to the directory to which you previously saved the RetroPie img file.

cd ~/Downloads/RetroPie

Next we’ll use a command to load the RetroPie image onto the Micro SD Card.

sudo dd if=retropie-v3.0beta2-rpi2.img of=/dev/rdisk2 bs=1m

if = Input File
of = Output File
bs = Block Size
Make sure to replace retropie-v3.0beta-rpi2.img with the actual name of the img file you previously uncompressed.

Note that we use /dev/rdisk2 instead of /dev/disk2. Specifying rdisk writes directly to the disk and skips the write to buffer which speeds up the entire copying process.

It’s important you specify the correct output location or you may overwrite data on your primary hard drive and you really don't want to make that mistake!

When you hit Enter the copy process will start running but it won’t show any output to the terminal window. It can take anywhere between 5 and 20 minutes to complete so be patient.

If you’re concerned the process is taking too long, you can hit Ctrl-T to get the current latest transfer data output to screen. You can do this as often as you want until the image copy is complete.

Once it’s complete verify the install by running diskutil list again. Under /dev/disk2 you should now see the installation of a boot partition as well as a Linux partition sized at approximately 3.5Gb. Don't be too alarmed at the 3.5Gb size as by default it won’t have used the entirety of the SD Card’s available space - this is something we’ll correct once we’ve booted up the Raspberry Pi.

Setup the Raspberry Pi Hardware

We are now ready to setup the Raspberry Pi itself.

If you haven't already, install the Raspberry Pi 2 into a case and plug in the keyboard, USB Controller, network cable and Micro SD Card. Plug it into your TV/monitor via HDMI and turn it on.

You will be greeted with a Welcome screen and it should show ==1 Gamepad Detected==. At this point, it will ask you to “Hold a button on your device to configure it”. This process sets up the controller to allow you to navigate the menus of the RetroPie UI. We'll still need to setup the controller to be recognised within the emulators themselves (but more on that later).

First-time configuration

Once the system has booted and you're inside the GUI, select ==RetroPie== from the main menu (you may need to hit right on the controller a few times).

Select ==Raspberry Pi Configuration Tool Raspi-Config== from the list of options. At this point it will boot the Raspberry Pi Config utility.

First, select ==Overclock== - you will need to use your keyboard at this config menu. You will see a message that overclocking may reduce the life of your Raspberry Pi. You may ignore this as we're just ensuring we've selected the correct high clock speed to take advantage of all the new and more powerful Raspberry Pi 2 offers.

On the 'Choose overclock preset' screen select ==Pi2== and press Enter. You will now be back at the main Raspberry Pi Config menu

Second, select ==Expand Filesystem== to kick off the process to use all of the space on your Micro SD Card. By default it will only use the first 4Gb of space. We're using a 32Gb card so we'll definitely want to expand the filesystem to take full advantage of all of that space.

Once the expansion has compelted, select ==Finish== from the bottom of the Raspberry Pi Config screen. You will be asked if you wish to Reboot - select Yes.

Setup the USB Controllers

Earlier when you booted up the RetroPie for the first time it detected a controller and asked you to setup the inputs.

This setup was to enable the controller for navigating the RetroPie's UI. We will now go through the process of ensuring our controllers are properly recognised for use within the Emulators themselves.

We have a NES30 Controller which is styled like the old NES controller but has the same number of buttons as the SNES controller (including two shoulder buttons).

As before, select ==RetroPie== from the UI after booting up but this time select ==Configure RetroArch Keyboard/Joystick==. You will need the keyboard again at this point so use to to select ==Configure controller for use with RetroArch==.

This will boot a setup script asking you to press the corresponding button shown on the screen. You have to be quite quick as the delay to press a button isn't very long. If you make a mistake you can just re-run the setup script.

Note: Your controller might not have all of the inputs - for example our NES30 does not have any analog sticks. You can safely ignore and wait until the script reaches completion.

Once you have completed the setup for the connected controller you will find yourelf back at the RetroPie UI.

Repeat the above process for any new controller you may want to use on the RetroPie in the future. We used a NES30 controller since our interest was in NES and SNES games but you can plug a PS4 controller into the console and use that too if you plan to play games requiring analog sticks.

Transfer some ROMs

Time to transfer some games across!

First off get the IP address of your RetroPie by loading up Terminal and pinging it with the following command:

ping retropie

Load your favourite FTP client (I use Transmit but feel free to use any others such as CyberDuck).

Connect via SFTP to the Raspberry Pi’s IP address using the username pi and password raspberry. This will connect you to the /home/RetroPie directory.

All ROMs go into the /home/RetroPie/roms directory under the relevant emulator’s directory.

In earlier versions, RetroPie sometimes has multiple emulators for the same device but the ROMs directory has been tidied up in 3.x

We'll be uploading the excellent Super Mario Bros to the /home/RetroPie/roms/nes directory to get ready to stomp some Goombas.

Once you've completed and uploaded all of your games onto the Raspberry Pi, you will need to reboot.

Reboot the RetroPie by pressing Start on your controller and selecting Quit -> Restart System. When the RetroPie starts back up you should find an entry in the menu for all of the consoles for which you have uploaded ROMs.

Best NES Settings

We have found the following to be the best settings when running NES games to reduce input lag as much as possible.

Now open a Terminal window and ssh into your RetroPie by running:

ssh pi@retropie

Once connected you will need to edit the NES retroarch.cfg file located at /opt/retropie/configs/nes/retroarch.cfg

Replace the contents of that file with the following configuration:

#include "/opt/retropie/configs/all/retroarch.cfg"
# All settings made here will override the global settings for the current emulator core
input_remapping_directory = /opt/retropie/configs/nes/
video_shader = /opt/retropie/emulators/retroarch/shader/phosphor.glslp
video_shader_enable = false
video_smooth = false

video_vsync = true
video_hard_sync = false
video_hard_sync_frames = 0
# video_frame_delay = 0
# video_black_frame_insertion = false
video_threaded = false
video_scale_integer = false
video_crop_overscan = false

If you're keen to experiment you can find the full list of configration options in /opt/retropie/configs/all/retroarch.cfg

Lastly (and you'll need the USB keyboard plugged in for this bit), switch back to your RetroPie itself and start up your favourite NES title (Super Mario, right?). Press x before the game boots to get to the emulator config menu. Inside here we found the best settings for NES emulation was to use ==lr-fceumm== as the emulator using a video mode of ==CEA-1== (640x480 without any enhancements).

The good news is that all of the above will only need to be done once and will be active permanently.

Do you have better configuration options to get the emulation as close to the real NES as possible? Please leave recommendations in the comments below.

Some handy tips

IMPORTANT TIP: Make sure you are using the correct power output on the Micro USB (5V/2.1A) otherwise the Raspberry Pi 2 won't get enough to take advantage of all that extra power. When I accidentally used a 5V/1A Star Fox on SNES ran at horrendous speeds but using the correct power was 100% speed emulation.
As already stated, press x on a plugged in keyboard when starting a game to get to a special menu. You can use this to tweak the resolution and visual effects to optimise the emulator's settings to get the best performance.
When inside a game, press Start + Select to quit back to the main RetroPie menu.
To safely turn off your RetroPie, press start on the main RetroPie menu to Quit -> Shutdown System when you're done playing.

The final NES emulator

You should now have a fully working mini console to play all the games you loved as a kid. We've only loaded up games we already own the cartridges to with Super Mario Bros and Zelda taking the top Must Play Again spot.

Unplug that clunky USB keyboard as only the controller is required from this point onwards.

Happy Gaming!

Third-party USB LAN Adapter for Wii U

Sun, 31 May 2015 18:58:34 GMT

Splatoon is out and with it came my first requirement for some stable Internet connectivity from the Wii U.

I was experiencing too many network connection errors while running off of WiFi that I decided to wire it up using trusty Ethernet cables. The only snag in that grand plan is that the Wii U doesn't have an Ethernet Port built-in - you require a USB LAN Adapter.

The only problem is that Nintendo have stopped producing the official LAN Adapters back in March 2015 and they're pretty tricky to find. Thankfully you can use a third-party USB LAN Adapter if it shares the same chipset (AX88772A).

This USB 2.0 to Ethernet Adapter at Maplin is the one I bought and can verify it works.

Avoid the temptation to get their USB 3.0 Gigabit adapter. I bought that one first and it wasn't recognised by the Wii U.

Create a Minecraft Server on DigitalOcean

Fri, 12 Sep 2014 19:53:00 GMT

This post was edited on 31 May 2015 to switch to using screen for spawning an instance of the Minecraft Server. Previously it created a startup script but that meant it wasn't possible to easily switch back into the running console.

Today we'll go through some steps to create your own MineCraft Server. We'll install Minecraft Server 1.8 onto a very basic 512Mb DigitalOcean Droplet.

Setup Pre-requisites

Start by creating a new 512Mb Droplet with Ubuntu 14.04. We won't need to use any of the Application droplets so make sure you use the Linux-only image.

Wait a shockingly fast 55 seconds and then SSH into your brand new Ubuntu Droplet.

First lets update the package list on our fresh Ubuntu installation:

apt-get update

And then upgrade to the latest version of all installed packages.

apt-get upgrade

Our next step on the box is to install Java. We won't be running a Java application with a full GUI so we can get away with installing the default-jre-headless package. JRE stands for Java Runtime Environment used to run the Java application, while headless refers to the lack of any GUI libraries.

apt-get install default-jre-headless

Our last pre-requisite is to install screen which will be used when starting the Minecraft server.

apt-get install screen

Note: You might need to run each command with sudo at the start of the command due to permissions, but on a new droplet you should have the right privileges.

Create a minecraft system user

Next up we create a Linux user and group to own the Java process when running the Minecraft Server.

Start off by creating a directory for Minecraft itself.

mkdir /srv/minecraft

Then create the Linux group.

addgroup --system minecraft

Now to actually create the user run the following on the command line (note that it's all one line):

adduser --system --no-create-home --home /srv/minecraft --ingroup minecraft minecraft

The user's home is set to /srv/minecraft as srv is the prescribed location for site-specific data which are served by the system. Another popular location may be /opt/minecraft.

The --ingroup minecraft flag will automatically add the new user to the minecraft group created the line above.

Install Minecraft Server

Change to the minecraft directory.

cd /srv/minecraft

And download the MineCraft Server package (note that the command is all one line).

wget https://s3.amazonaws.com/Minecraft.Download/versions/1.8/minecraft_server.1.8.jar -O minecraft_server.jar

Configure the Minecraft Server

Start our MineCraft server.

java -Xms256M -Xmx450M -jar minecraft_server.jar nogui

We only have 512Mb RAM so we have to be a bit conservative. The first parameter starts the process with 256Mb of RAM and sets an upper limit of 450Mb through the second parameter.

MineCraft will try to start and since it's the first launch it will generate a server.properties file with some sane defaults. It will, however, fail as we haven't yet agreed to the EULA (End-User License Agreement). We need to edit the newly generated eula.txt file and set the value to TRUE (You may need to type /stop to shutdown the Minecraft Server console).

So let us edit that file now:

vi eula.txt

Once you've changed false to true, save the file and exit the editor.

Now that you've accepted the EULA, start MineCraft Server up again:

java -Xms256M -Xmx450M -jar minecraft_server.jar nogui

This time it will create the banned-players.json, banned-ips.json, ops.json, and whitelist.json files.

These files allow you to add users to the different roles. The banned files allow you to ban users or IPs from accessing your instance. The ops file allows you to set "administrators" while whitelist is used if you only want to allow a specified list of users to access the instance at all.

We'll add our own Minecraft user to the ops and whitelists within Minecraft Server. I particularly like to keep a strict whitelist to ensure random users don't discover and use the Minecraft Server (especially because it's on such a modest setup).

To add yourself to the ops and whitelist files run the following while Minecraft is running (but obviously replacing YourMojangUsernameHere with your own username):

/op YourMojangUsernameHere
/whitelist add YourUserNameHere
/whitelist on

In future, you may add friends to the whitelist by using the /whitelist add YourFriendsUserName command from within Minecraft client itself so you won't always need server SSH access. Ahh, the power of being an Admin!

Quit from the Minecraft console by typing stop to return to the command prompt.

Next up we edit server.properties that was generated and change the value for max-players from 20 to a more reasonable 5 for our modest server specs.

vi server.properties

Feel free to explore the properties set in this file to get an understanding for what all can be tweaked. I like to change the motd (Message of the Day) of the server from the default "A Minecraft Server" to something more personal but that's purely optional.

Once you've changed at least the maximum number of players to a sensible 5, save the file and exit the editor.

At this point a lot of files have been created in /srv/minecraft under your logged in user, but we'll want them to be owned by the minecraft user and group.

To do this we have to run:

chown -R minecraft:minecraft /srv/minecraft

Some theory on the screen utility

Screen is a handy command-line utility that allows you to create detachable instances of your shell called screens.

Think of a screen on the command-line in a similar fashion to tabs in your browser. You can load a website and then switch to another tab to continue doing something else. Screens in Linux allow you to do the same thing.

To start a new screen you would type:

screen -S screen_name [command]

Replace screen_name with a friendly name to identify it if you run multiple screen instances (not something we will do though).

Likewise, replace [command] with any command you wish to run when creating a new screen. The command is optional but it allows us to immediately spawn a Minecraft Server instance without having to manually type the java command.

To see a list of all running screen instances, run:

screen -list

To switch back to a running screen (called reattaching), run:

screen -r screen_name

This will "tab" you back into the relevant shell instance.

If you're inside a screen instance and want to return to the main commandline, press Ctrl-A followed by d. You won't see anything on screen when you first press Ctrl-A.

If you want to kill the screen instance, press Ctrl-d from within it. But since we'll be running a Minecraft instance, we'll need merely run stop in the Minecraft console instead.

Create a Minecraft startup script

Now that the initial setup is complete, we won't be starting Minecraft Server using the manual java line anymore. Instead we'll create a Linux shell script to start our Minecraft Server using screen.

This way you can always SSH into your Minecraft Server and switch to the Minecraft screen to run some handy Admin commands within the console.

Start off by ensuring we're in the right directory:

cd /srv/minecraft

Create the shell script by running:

vi start.sh

And save the contents as:

#!/bin/bash

# Some reminder text for the user...
echo "Welcome to the simple Minecraft screen script."
echo "----------------------------------------------"
echo " If you run this and no screen instance exists,"
echo " one will be created and you will be transferred"
echo " into that screen instance."
echo " "
echo " To leave and return to the terminal prompt (i.e. detach)"
echo " Then press:  Ctrl-A, followed by D"
echo "----------------------------------------------"
echo " To shutdown your instance of Minecraft Server,"
echo " switch to the Minecraft screen instance"
echo " by typing: screen -r mcscreen"
echo " from anywhere and the type stop"
echo "----------------------------------------------"

# Run a check for an already running minecraft screen session
RUNNING=$(pgrep -f "mcscreen" | wc -l)

# DEBUG. UNCOMMENT TO SEE VALUE
# echo $RUNNING

# If there is no detached screen running, create one and switch
# Else default to switching to the Minecraft screen instance.
if [ $RUNNING -eq 0 ]
then
	echo "Minecraft screen not yet running - starting one now..."
	echo " "
	read -p "Press any key to initiate..." -n 1

	screen -S mcscreen java -Xms256M -Xmx450M -jar minecraft_server.jar nogui
else
	echo "An instance of Minecraft screen is already running."
	echo " "
	echo "To detach from inside screen:  Press Ctrl-A followed by D"
	read -p "Press any key to switch now. " -n 1

	screen -r mcscreen
fi

(Warning: The line starting with screen -S... and ending with nogui should all be one line)

Save the file and return to the command prompt. If you installed the server to a different location other than /srv/minecraft then be sure to change the above file to match your install location.

Set the newly created script to be executable by running:

chmod a+x start.sh

To start the Minecraft instance for the first time, run:

./start.sh

In future when you SSH into your server, you can either:

cd into /srv/minecraft/ and re-run this script using ./start.sh command (it will intelligently check for a running screen instance and switch to it instead of creating a new one)
run screen -r mcscreen to reattach to the already running Minecraft screen

Connecting to our new Minecraft Server

If you ran our start.sh script already then you should have a Minecraft Server up and ready to connect to. If not, now is the time to run that script.

At this point logout of your SSH session as we are done with the server setup phase (remember to hit Ctrl-A followed by d to disconnect from the Minecraft screen to get back to the terminal to logout).

You should now be able to load up Minecraft Client and attempt to connect to a Multiplayer game. Add your newly created server to the list by using 1.2.3.4:25565 where 1.2.3.4 is your DigitalOcean droplet IP.

Now go build that house before nightfall and escape those Creepers!

Bonus Paragraph: Performance

If you find the performance of your Minecraft Server is a bit poor you might want to consider upgrading your Droplet to a 1Gb instance. To do this you don't have to start from scratch, instead power down your droplet and increase the resources accordingly.

Don't forget, once you've booted up the new powerhouse to edit the /srv/minecraft/start.sh script. If you upgrade to 1Gb total RAM you should change the 450M to roughly 920Mb. End this off by re-running the start.sh script to initiate a new screen instance with the new upper limit in effect. Jeepers Creepers!

Create a Chrome Extension to hide YouTube Comments

Thu, 11 Sep 2014 18:07:00 GMT

Project Definition

Today we will go through how we can create a very basic Chrome Extension called NoComment that hides the comments section on YouTube.

The Chrome Extension will hide the comments on YouTube.com on page load. It then displays an icon in the addressbar allowing you to click on it to toggle the visibility of the comment section should you wish to see the comments for a particular video.

Once completed you can browse YouTube without being bombarded with the very worst comments to be found on the Internet. Bliss.

Basic Project Setup

To create our basic Chrome Extension we need the following files:

manifest.json
images/icon-19.png
images/icon-48.png
images/icon-128.png
background.js
content.js

You can find the source code for the NoComment Chrome Extension on GitHub.

Manifest.json

Each Chrome Extension requires, as a minimum, a manifest.json file. Note that this is the only file in the extension with a strict filename requirement.

The configuration of the extension itself is defined within the manifest file using JSON format. The name, version and manifest_version are required fields, but we'll be adding in a few others to get our extension to actually do something.

Name is the name of your extension - NoComment in our example. Version is your own defined version number. Manifest_Version is a Google-defined configuration that should be set to 2 as manifest version 1 has been deprecated.

Here is the manifest.json file we'll be using in your extension:

{
  "name": "NoComment",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Toggle comment visibility on YouTube.com",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_icon": "icon-19.png",
    "default_title": "Toggle YouTube comments"
  },
  "permissions": ["declarativeContent", "activeTab"],
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  "icons": {
    "48": "icon-48.png",
    "128": "icon-128.png"
  }
}

Types of Chrome Extensions

Extensions impact the browser UI in two distinct ways:

Browser Actions
Page Actions

The Browser Action extensions are the types you may already be familiar with that provide an icon that is always visible in the browser's primary toolbar. You are advised to use a Browser Action when the functionality is relevant to most pages you visit (e.g. Save To Pocket). More info can be found at the browserAction documentation on the Chrome site.

The Page Action extensions, however, display their icon in the address bar itself. It is advised that you use the Page Action style extension on functionality that is only relevant to some pages (e.g. to hide comments on youtube.com only). More info can be found at the pageAction documentation on the Chrome site.

The NoComment extension will be a PageAction type. As such we add the following configuration to our manifest file to define the icon displayed in the addressbar.

  "page_action" :
  {
    "default_icon" : "images/icon-19.png",
    "default_title" : "Toggle YouTube comments"
  },

Content Script

Next up we'll create the Content Script by creating a file named content.js within our extension folder. The name of this file doesn't really matter so you can call it anything you want as it will be referenced within our manifest.json file.

The content script is run on each page load where relevant and is used to manipulate the DOM within the current browser tab's content.

Our content.js file contains a simple function to toggle the styling to display none on the content div. We also run the function so as to trigger the function to hide the contents on page load.

showHide();

function showHide() {
  var el = document.getElementById('watch-discussion');
  if (el && el.style.display == 'none') el.style.display = 'block';
  else if (el) el.style.display = 'none';
}

We add the following to our manifest configuration to ensure our extension knows which script to run.

  "content_scripts":
  [
      {
          "matches": ["*://*.youtube.com/*"],
          "js": ["content.js"],
          "run_at": "document_end"
      }
  ],

The matches field is used to restrict the execution of the content script to only pages that match the regex used. We could use "*://*/*" if we wanted it to match on all pages, or (as we have used) "*://*.youtube.com/*" to target only YouTube pages.

The js field defines the script file that will be run on matched pages. We set that to our content.js file but this would be the same as the name you chose earlier.

Lastly, the run_at field allows us to ensure the execution of the content script is deferred to the end of the page load.

More info can be found at the Content Scripts documentation on the Chrome site.

Background Script

The background script can be thought of as our extension's initiliaser or constructor. We have named our background script background.js but you may name it anything you wish.

Our background script contains some simple initialisation code and a Listener for the action of clicking on the addressbar icon.

// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains 'youtube.com'...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'youtube.com' },
          }),
        ],
        // And shows the extension's page action.
        actions: [new chrome.declarativeContent.ShowPageAction()],
      },
    ]);
  });
});

chrome.pageAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, { file: 'content.js' });
});

Make note of the line where we define the URL to which this page action is valid (namely youtube.com). This means that the icon will only be visible in the addressbar when we are browsing pages within that defined URL.

Also note the Listener that executes the content.js script when the page action icon is clicked. Recall that this script contains the function to toggle the visibility of the YouTube comments which is executed when the content script is run.

We add a few lines to our manifest file to ensure our extension knows which script to run for background tasks.

  "background":
  {
    "scripts": ["background.js"],
    "persistent": false
  },

We set persistent to false to ensure the background script is active only when required. This saves on resources and is the method prescribed by Google unless persistence is indeed a neccessity. In fact, setting the persistence to false means we have created a very specific type called Event Pages. To quote the Chrome documentation "Persistence is what differentiates an event page from a background page."

As always, more info can be found at the Event Pages and Background Pages documentation on the Chrome site.

Install your extension

To install the extension you will first need to navigate to chrome://extensions in Chrome or alternatively click on the hamburger menu, select Tools and then Extensions.

Now click on the button reading Load unpacked extension... and browse to your extension's folder before clicking on Select.

If there are any errors then Chrome will highlight those but if you followed the instructions above you should now have a Chrome Extension that hides those pesky YouTube comments by default.

Now go enjoy your new, clean, distraction-free YouTube!

39digits.com RSS Feed

How to fix Bluetooth mouse stuttering on Surface Laptop 4

Background information

Fix Bluetooth mouse stuttering in Windows 10

How to sign your commits to GitHub using Visual Studio Code on Windows 10 and WSL2

A brief intro about signed commits

Update Windows 10

Install GPG

Update configuration

Generate GPG Key Pair

Retrieve the unique signing key id

Git Settings

Add the GPG public key to GitHub

Enable commit signing in Visual Studio Code

Make a few signed commits

Verify signed commits

Remote Containers

Conclusion

Customise the Spotify UI theme

Install spicetify

Generate the config file

Backup the current Spotify configuration

Apply the default light theme

Add new themes

Restore the original Spotify interface

No Such File error

Add Tailwind to a Gatsby project

Create the Gatsby app

Add Tailwind to the project

Install the required dependencies

Create the Tailwind CSS

Generate the Tailwind configuration

Import the CSS into our App

Create the PostCSS configuration

Optimise the production build

Test the build

Update the Tailwind configuration.

Test the optimised Production Build

Conclusion

Add Tailwind to a Next.js project

Create the Next.js app

Add Tailwind to the project

Install the required dependencies

Create the Tailwind CSS

Generate the Tailwind configuration

Import the CSS into our App

Create the PostCSS configuration

Optimise the production build

Test the build

Update the Tailwind configuration.

Test the optimised Production Build

Conclusion

Add Tailwind to Create React App without ejecting

Create the React app

Default project clean-up

Add Tailwind to the project

Install the required dependencies

Create the Tailwind CSS

Generate the Tailwind configuration

A brief word about Tailwind customisation

Create the PostCSS config

Create Build Scripts

Install dependency for cross-platform environment variables

Option 1: Generate once at start of build process

Option 2: Watch CSS files for changes (do not open default browser)

Option 3: Watch CSS files for changes (automatically open default browser)

Where to import the generated CSS

Test the build

Optimise the production build

Update the Tailwind configuration.

Test the Production Build

Add the generated CSS file to gitignore

Conclusion

How to switch to Firefox on Android for improved privacy

My workflow and requirements

What to install on Android

Firefox Focus as quick search

Firefox Share menu

Firefox Extensions for Increased Privacy

Android settings