The Localhost Feed

Open Graph Images with Gatsby and Now

Thu, 30 Apr 2020 00:00:00 GMT

So, I followed the awesome video content and blog post from Leigh Halliday and I now have a way to generate Social Sharing cards for Twitter, Facebook and LinkedIn without having to add a cover image to every post I do.

Moving Large Markdown Assets to a CDN

Thu, 30 Apr 2020 00:00:00 GMT

I’ve spent a while today trying to bring down the size of this project, I have several posts that are particularly large so I wanted to work out a way to reduce that.

I’m an Ubuntu user and wanted to see if there was a way I could identify the larger files in the project.

I found this SO question which details using the du command (Disk Usage) which I used to list out the folder sizes. I put the following command into my terminal:

du --max-depth=7 /home/scott/repos/thelocalhost/posts/ | sort -n

It gave a similar output to this:

592   /thelocalhost/posts/2017/01/04/twitter-mctwitbot
2412    /thelocalhost/posts/2017/01/28/twitter-bot-bootstrap
38708   /thelocalhost/posts/2018/12/24/wsl-bootstrap-2019

The output was a bit noisier that what I’ve put here actually, lot’s of output, but it helped identify large assets in folders. That wsl-bootstrap-2019 folder is nearly 40mb in size! 😱

Markdown file structure

I have become quite particular about my Markdown as of late and like to structure things in a certain way. I started to do this with the images and gifs that are in here as well.

So, as an example this:

![twitter logo](./twitter-bird.png)

I got to doing this from finding it on [GitHub](https://github.com) I
think I was looking for the Twitter icon in bootstrap whilst
working...

Will become this:

![twitter logo]

I got to doing this from finding it on [GitHub] I think I was looking
for the Twitter icon in bootstrap whilst working...

<!-- Links -->

[github]: https://github.com

<!-- Images -->

[twitter logo]: ./twitter-bird.png

It looks like the second option here takes more space but the links at the bottom of the document aren’t visible and it makes the writing experience a lot easier to parse and manage when there are a lot of links and assets in the document.

Cool story bro

So I’m putting this here to document what I did, the assets in the large folder I mentioned earlier have now been removed and added to the Now CDN in their own folder.

So now at the end of each document, rather than have a load of local files in the same folder they can all be references to the CDN.

How do I add them to a CDN? I make a folder with the same(ish) folder structure then reference the CDN in place of the local images:

images-on-now-sh/
├─ 2020/
├── this-post-im-talking-about/
│   ├─ image1.png
│   ├─ image2.png
│   └─ image3.png

The whole reason I did this was so that if I wanted to I could run all these through a service like Images.weserv.nl where I could add the URL to their service like so:

[image1]: //images.weserv.nl/?url=https://images-on-now-sh/2020/this-post-im-talking-about/image1.png&w=300&h=300

A Digital Garden

Mon, 27 Apr 2020 00:00:00 GMT

I have spent the last two days now questioning how and what I write after reading a post from Richard Haines. In his post he mentioned how he stumbled across the Digital Garden idea.

Richard’s post led me to Chris Biscardi’s thoughts on that and in turn Joel Hooks.

Both Joel and Chris mention a post from Amy Hoy (who I’ve just realised I follow on Twitter) in the post Amy talks about the How the Blog Broke the Web

As I’m writing this I’m actually in an Egghead.io Zoom webinar on the subject.

Publish all the things

I decided that where I write about what I learn doesn’t have to be a job, something else to add to my current cognitive load.

I was a bit hasty about publishing everything on my site, there’s no rush for it to be ‘released’ though, I’ll do it as and when I get round to it.

I spent some time cleaning up the site however, I removed all unnecessary cover images and use an Open Graph tool to generate social sharing cards.

The posts folder on this site before and after I purged all the assets.

70mb folder size with cover images
47mb after removing images

I’ll go into more detail on this in the upcoming post [Moving from Now to Netlify then back to Now], I think the title explains a lot of what the content will be on that one

So this is going to work with the notion that I’ll write about things as they come to me, add them here and add to them periodically as an when needed.

This could possibly change after I finish listening to the Egghead.io webinar.

I’m feeling quite liberated about the not saving things behind a published flag now.

Even though I have the most ridiculous filing system

Also publish! Like I’m O’Reilly 😂

The content here is primarily for me and if it helps anyone else then that’s a massive plus, you’re welcome. 🐱

Unpublish all the things

It did! I’ve unpublished a lot of half arsed posts, some just a title and a link. Sorry if you’re reading this and wondering why there’s a post titled Shaving the Yak! with the total content of one sentence and two links!

Continuous Deployments on Non Essential Projects

Mon, 27 Apr 2020 00:00:00 GMT

Quite a while ago now I was introduced to tools like Renovate and Greenkeeper, at the time I thought they were awesome, keeping your projects patches and secure so I went and used them in every project I made.

Busy work

That was an incredible PITA (Pain in the Arse)

So what have I learned

Using Renovate may sound like a good idea, everything is kept current

But if you have a lot of projects with a dependency that has high release rates or that you use in every project (Gatsby, Prettier) then when update time comes there’s a lot of ‘busy work’ involved.

Configure Custom Domain Email with Zoho and Now

Sat, 25 Apr 2020 00:00:00 GMT

In this guide I’m going to cover the configuring of your custom domain with Vercel’s Now platform using the Now CLI.

I’ll be primarily covering the steps you take after setting up an account with an email provider, the email provider I’m using is Zoho Mail if you don’t use either of these services then this guide may not be much use to you.

What you’ll need

a super awesome custom domain
a Zoho Mail account
a Vercel.co account
The Now CLI installed

It’s implied that you have a machine set up for web development already and are familiar with using the terminal.

If you need to get set up for Windows I have written a guide previously on that topic.

If you’re a Linux user, check out this video on getting set up:

Set up an account

Zoho mail offer a 5 GB forever free plan, so as long as you can manage your email archiving then you are good to go.

You also get up to five users and a 25mb file attachment limit with hosting for a single domain.

Pretty good right!

Create an admin super user

When you sign up with Zoho Mail you will be prompted to create a super admin user for your zoho account and you’re given the opportunity to set up two factor authentication (2fa).

Zoho will even tell you about their authenticator app, which is only for authenticating with Zoho. Use this is you like, I use a 2fa app that you can use for multiple services.

Verify you own the domain

You will be given a code to verify that you are the owner of the domain, which you will need to add as a TXT entry on your domain with the Now CLI.

The verification token will look something like this:

zoho-verification=se4567894.zmverify.zoho.eu

Add that to your domain DNS with the Now CLI, you can check your domain DNS entries with the ls command.

# list your dns entries
now dns ls yourdomain.com
# add the zoho verification as a TXT record
now dns add yourdomain.com @ TXT zoho-verification=se4567894.zmverify.zoho.eu

Add the MX records

Now to configure the MX records. MX records are essential to receive emails in your domain. The MX records for your domain will look something like this:

Host Name	Address	Priority
@ / Blank	mx.zoho.eu	10
@ / Blank	mx2.zoho.eu	20
@ / Blank	mx3.zoho.eu	50

Add them much in the same way as with the verification token with the Now CLI this time specifying an MX instead of TXT and there’s a second argument for the priority:

now dns add yourdomain.com @ MX mx.zoho.eu 10
now dns add yourdomain.com @ MX mx.zoho.eu 20
now dns add yourdomain.com @ MX mx.zoho.eu 50

Set the Sender Policy Framework (SPF)

To ensure that valid emails from your domain get delivered to your users, and spoofed emails from other spammers are identified by the other email services, it’s recommend you add an SPF record for your domain.

This will go into a TXT record like with the verification token:

now dns add yourdomain.com @ TXT 'v=spf1 include:zoho.eu ~all'

Note: You may need to wait a while after making these changes before the DNS updates can be verified via Zoho.

Make a simple, personal, URL shortener with Now.sh

Sun, 19 Apr 2020 00:00:00 GMT

Remember services like Bitly and TinyURL? Yeah, they still exist, shortening your URLs for you, they’ve been around for a long time too.

Bitly founded in 2008 and TinyURL founded in 2002 😱

In this post I’m detailing how I made my own Bitly with Now.sh.

You can make your own one too as I’m about to detail the process here, or you can TL;DR for the video.

What you need:

Node (to run the now CLI)
The now CLI
Vercel.com account
GitHub account (not essential)
Yor own domain (not essential)

Examples, why would I use a short URL?

I use short URLs for sharing my content, if you take a look at this blog post URL is quite long and not something you can reel off quickly to someone.

There’s a talk I did about Gatsby, titled “Build-time and Client Run-time Data Fetching in Gatsby” the URL for it is:

https://gatsby-build-and-run-time-data-fetching-talk.now.sh

With a short URL I can condense it down a bit:

https://ss10.dev/gatsby-data-fetching

Not massively shorter, and granted the original URL has no place being that long!

Other examples could be the “Build a coding blog from scratch with Gatsby and MDX” guide I did at the end of last year:

Full URL https://thelocalhost.blog/2019/10/31/build-an-mdx-blog
Short URL https://ss10.dev/bab-guide

Or if you have a crazy URL no one is going to be able to recite from memory, like my YouTube channel URL:

Full URL https://www.youtube.com/channel/UCnngLXpLSFsKkDhFoO9Ct3w
Short URL https://ss10.dev/youtube
Shorter still https://ss10.dev/yt

I do have a vanity URL for my YouTube channel which is https://www.youtube.com/c/ScottSpencePlease, but it’s case sensitive. 🤦‍♂

Do I have to use Vercel? 🤔

No, you can use Netlify as well. There’s a great Kent C Dodds example with Netlify that I used before moving to Vercel.

You don’t have to use Netlify either, you do you. 😸

There’s many ways to do it and the best way for you may be different to me. You will need a domain name and a hosting service, that’s what I’m doing with Vercel here.

Redirects

The way I’m doing this is with redirects, so it will be like in the examples earlier, give a path to your URL then use a redirect rule.

{
  "source": "/yt",
  "destination": "https://www.youtube.com/channel/UCnngLXpLSFsKkDhFoO9Ct3w"
}

Get set up 🛠

If you don’t have a machine set up for web development I have written about getting set up for Windows.

There’s also a video I’ve made to go from scratch to Create React App on Ubuntu 19.04.

If you’re following along and you haven’t done so already, you’ll need to install the Vercel CLI:

# if you're using npm, then
# npm i -g now
yarn global add now

Then you’ll need to authenticate with the CLI:

now login

You will be prompted with a phrase, something like Handsome Turtle that should match the phrase in the email Vercel sends you. You can authenticate by clicking the link in the email.

Create the project

I’m going to create a directory for the project to live in, then change into that directory and make the project with yarn init -y.

mkdir short-urls # create directory
cd short-urls # change to newly created dir
yarn init -y # initialise the project

That’s going to create my package.json file with the project details in it.

Next to create the now.json file this is going to be where all the redirects live:

touch now.json

In the now.json file I’m going to add the Vercel Now platform version then the redirects array with the first redirect being where I want my domain to default to.

{
  "version": 2,
  "redirects": [
    {
      "source": "/",
      "destination": "https://scottspence.me"
    }
  ]
}

Deploy the project

That is all the configuration I need for now, now I’m going to deploy the project using the CLI this will push the project to the Vercel hosting service.

To deploy the current directory I’ll do the following command:

now

As this is the first time I’ve deployed this project there will be a lot of prompts from the CLI, I’ll answer the default answer to all of these questions:

- Set up and deploy project?: y
- Which scope (this is my user account): Scott Spence
- Link to an existing project?: n
- Whats your project name (hit return): short-urls
- In which directory is your code located (hit return)?: /
- Want to override the settings?: n

The CLI will output two URLs, the first to my project on Vercel Now and the second for the actual project. I’ll click on the first one and and inspect the project.

As I set the root of the redirect to go to my portfolio site that’s what I have in my project overview in Vercel.

I can now take that URL (now-short-urls-fzph462o0.now.sh) add it to a browser and it will redirect to https://scottspence.me.

Now when I deploy this with the --prod flag in the Vercel CLI it will use the project URL (now-short-urls.now.sh).

Ok so that was quite straightforward, right?

Now each time I want to add a short URL I’ll add it to the now.json file and run the Vercel CLI again to deploy the project.

But I can take out the deployment part and leave that to the Vercel GitHub integration.

So, better get that project on GitHub!

Add the Project to GitHub

Go to GitHub, click on the plus icon next to my profile picture, select ’New repository‘.

Enter the new project name and click the ‘Create repository’ button.

GitHub supplies the git commands to get the project onto GitHub.

Before that I’m going to initialise my project and add what I have to git:

git init
git add .
git commit -m 'init 🔥'

Then add the remote repository and push to it:

git remote add origin git@github.com:spences10/short-urls.git
git push -u origin master

That’s it the project is now on GitHub and I can start using the Vercel GitHub integration.

Use Vercel for GitHub

Vercel has a GitHub integration so that you can deploy automatically from a push to your master branch on your project or via a pull request.

The Vercel documentation for this is really good so I’m going to link that here.

The docs will walk you through setting up the GitHub integration with your GitHub account and linking a project.

There are also integrations available for GitLab and Bitbucket.

Now each time I add a short url to my project all I have to do is git commit and push to GitHub and the Vercel GitHub integration will take care of the rest.

Add my domain to Vercel

Now I’m going to add my own domain to Vercel from the ‘Settings’ panel of my project I can select ‘Domains’ and add in my own domain.

My domain isn’t supplied by Vercel so I will need to configure the DNS settings in my domain provider by adding the custom DNS configuration supplied here by Vercel.

The cool thing with Vercel is that I can have many domains pointing to the same project.

Here’s a video detailing the process 📺

Resources

Add Analytics Tracking Links to your Markdown

Sat, 18 Apr 2020 00:00:00 GMT

I’m talking Fathom Analytics again, this time about tracking link clicks in my Markdown.

I have written about how to track custom events with Fathom previously and this is really an extension to that post.

If you would like to try Fathom and get a £10 discount on your first invoice check my affiliate link.

This situation is specific to using MDX and the MDXProvider as it gives the ability to override rendering of links.

The problem 🤔

I’d like to add a Fathom goal to a link in my Markdown, to do this I’ll need to get the goal ID I’ve created in Fathom to the link so that when it’s clicked it’s logged with Fathom.

So I can add an onClick event to the a tag using the MDXProvider and pass that ID to the analytics provider.

The solution 💡

Ok, so I need a way to add a prop to a specific link that contains the goal ID for Fathom.

Using a made up attribute added to the markup for the goal ID I can pick out the ID and pass it to the analytics provider from the A component I’m using to override the links in the Markdown.

export const A = props => {
  const fa = useAnalytics()
  return (
    <a
      {...props}
      id={props.id}
      onClick={() => fa(props.goal)}
      target="_blank"
      rel="noopener noreferrer"
    >
      {props.children}
    </a>
  )
}

So the Markdown will look something like this:

# My awesome Markdown

Fathom Analytics recently added a feature for
<a href="https://usefathom.com/blog/bypass-adblockers" goal="IBQBRDPP">custom
domains</a> with their service.

So, job done right?

Wellllll…

No.

The other problem (for me anyway) 😧

I spend a lot of my time in Markdown files and I rarely use inline links. With an inline Markdown link the link from that last example it would look something like this:

# My awesome Markdown

Fathom Analytics recently added a feature for
[custom domains](https://usefathom.com/blog/bypass-adblockers) with
their service.

Doesn’t read great does it?

When there is a lot of prose (text) it can be difficult to read when there are a lot of links in there.

I prefer to use the link text and reference it at the bottom of my document, like this:

# My awesome Markdown

Fathom Analytics recently added a feature for [custom domains] with
their service.

<!-- Links -->

[custom domains]: https://usefathom.com/blog/bypass-adblockers

The other solution 🤯

So, I’d prefer to have the goal ID in the link but not cluttering up my beautifully crafted Markdown with a tags everywhere. 😁

How do I do that then?

The way I worked out how to do it was to use a URL parameter and intercept it in the A component.

In the Markdown I add the goal ID to the URL, on line 9:

# My awesome Markdown

Fathom Analytics recently added a feature for [custom domains] with
their service.

<!-- Links -->

[custom domains]:
  https://usefathom.com/blog/bypass-adblockers?goalId="IBQBRDPP"

This way the structure of the Markdown is unchanged making a much nicer writing experience.

How to use the goal ID from the URL parameter?

First up I used an onClick handler to pull out the goalId for the analytics provider.

Using the URL(props.href).searchParams means that I can pull out the goalId using the .get function.

export const A = props => {
  const fa = useAnalytics()
  const onClick = () => {
    if (props.href.includes(`goalId`)) {
      const params = new URL(props.href).searchParams
      fa(params.get(`goalId`))
    }
  }

  return (
    <a {...props} onClick={onClick}>
      {props.children}
    </a>
  )
}

The only thing with this was that the goalId would still be in the URL.

I didn’t really like the way this looked, especially if someone was going to share that link after clicking it.

So reading into the URL API a bit more and reading up on some StackOverflow posts I found that I could delete the parameter after using it.

In the next block of code here, on line 3, I’m checking if the props.href contains a goalId parameter.

I can then manipulate the props.href in useEffect and setting the goalId in state first on line 10.

Then I can delete the goalId from the url on line 11.

The props have been changed now so I’ll need to provide the new href to the a tag in the props, on line 25.

export const A = props => {
  const fa = useAnalytics()
  const containsGoalId = props.href.includes(`goalId`)
  const [goalId, setGoalId] = useState(``)
  const [newHref, setNewHref] = useState(``)

  useEffect(() => {
    if (containsGoalId) {
      const url = new URL(props.href)
      setGoalId(url.searchParams.get(`goalId`))
      url.searchParams.delete(`goalId`)
      setNewHref(url.href)
    }
  }, [containsGoalId, props.href])

  const onClick = () => {
    if (goalId) {
      fa(goalId)
    }
  }

  return (
    <a
      {...props}
      href={containsGoalId ? newHref : props.href}
      onClick={onClick}
    >
      {props.children}
    </a>
  )
}

Now clicking the link will only call the analytics provider when there’s a goal ID in the href passed to the component in the props.

Here’s a video 📺

In this video detail what I’ve been writing about.

Resources 📑

These resources helped me along the way.

Create a Custom Domain for Fathom Analytics

Thu, 16 Apr 2020 00:00:00 GMT

Fathom Analytics recently added a really neat feature for custom domains with their service.

What does that mean then? Well it’s for bypassing ad-blocking extensions, not that Fathom wants to collect all your data, far from it.

The purpose of this post is to cover setting up my custom domain as I have a specific domain provider and I’m using Vercel’s now.sh and Netlify for hosting my projects I want to add the Fathom custom domains to.

Fathom has provided instructions for Godaddy, CloudFlare, Hover and NameCheap however, Like I mentioned, I have a custom DNS with my domain provider and I’m not be able to add a new CNAME record which is what I need to generate my Fathom custom (sub)domain.

Create a custom domain

Fathom’s documentation covers it pretty well, you go into your settings panel on Fathom and add in the domain of your site which I followed, pretty straight forward.

Fathom then give me two values, the first is the sub-domain that I’m going to create and the other is the Fathom DNS server.

Add the custom domain to my site

I set about working out how to add a CNAME to this blog but couldn’t find any good examples so I reached out to Fathom with a tweet:

After I sent that I found this gist which detailed the command for adding the sub-domain which made sense to me.

Add DNS record in Vercel’s now.sh

With the two values from Fathom dashboard, the CNAME is the sub-domain and the VALUE is the DNS server.

So in the now CLI I did the following:

now dns add randomsite.com cdrjcy CNAME starman.fathomdns.com

Then I checked that the changes were added using the now dns command to list out my DNS settings:

now dns ls

It depends on how quickly these are propagated to see if the record is created, for me it was a refresh on the Fathom dashboard and it said the domain was active with a couple of emails from Fathom to confirm they were created.

DNS Editor for Vercel domains

It was after I worked out how to add the CNAME with the CLI that I found the DNS Editor for Vercel domains which Jack mentioned in the reply to my tweet! 🤦‍♂

It’s a free integration on the Vercel Marketplace which is super straightforward to use once you add it to your Vercel account you can pick it from the Integrations section on your Vercel Dashboard.

Select custom domain in site settings

Now that the domain is set up I need to select that in the Sites dashboard, click on the Site ID for my site the pick the domain from the select list and verify it’s working on my site that is already configured with Fathom.

Add DNS record in Netlify

I’m going to do the same with Netlify now, it’s a bit more straightforward with Netlify, I go to my sites page, select Domains, pick my domain scroll to the bottom of the list and select ‘Add new record’, add the details from the Fathom Domains page.

It didn’t take long to validate the record in the Fathoms setting page then I picked the custom domain like I did in the previous step.

Add a Table of Contents with Smooth scroll using Gatsby and MDX

Thu, 13 Feb 2020 00:00:00 GMT

The main purpose for me documenting this is to demonstrate implementing a table of contents with smooth scroll to the anchors in a Gatsby project using MDX.

In the process I’m also setting up the Gatsby starter with MDX.

TL;DR, go here: Make a TOC component

I like using styled-components for my styling and would like to use them in this example, so I’m going to clone the Gatsby starter I made in a previous post.

Clone the Gatsby Default Starter with styled-components

Spin up a new project using the template I made:

npx gatsby new \
  gatsby-toc-example \
  https://github.com/spences10/gatsby-starter-styled-components

Once that has finished installing I’m going to cd into the project (cd gatsby-toc-example) and install dependencies for using MDX in Gatsby.

# you can use npm if you like
yarn add gatsby-plugin-mdx \
  @mdx-js/mdx \
  @mdx-js/react

Add some content

Create a posts directory with a toc-example directory in it which contains the index.mdx file I’ll be adding the content to.

mkdir -p posts/toc-example
touch posts/toc-example/index.mdx

I’ll paste in some content, I’ll take from the markdown from this post!

Configure the project to use MDX

To enable MDX in the project I’ll add the gatsby-plugin-mdx configuration to the gatsby-config.js file.

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [`.mdx`, `.md`],
    gatsbyRemarkPlugins: [],
  },
},

I’ll also need to add the posts directory to the gatsby-source-filesystem config as well.

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `posts`,
    path: `${__dirname}/posts`,
  },
},

Stop the dev server (Ctrl+c in the terminal) and start with the new configuration.

Once the dev server has started back up, I’ll validate the Gatsby MDX config by seeing if allMdx is available in the GraphiQL explorer (localhost:8000/___graphql).

{
  allMdx {
    nodes {
      excerpt
    }
  }
}

Configure Gatsby node to create the fields and pages

Here I’ll make all the paths for the files in the posts directory, currently it’s only gatsby-toc-example. I’ll do that with createFilePath when creating the node fields with createNodeField.

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

Stop and start the gatsby dev server again as I changed gatsby-node.js.

In the Gatsby GraphQL explorer (GraphiQL) validate that the fields are being created.

{
  allMdx {
    nodes {
      fields {
        slug
      }
    }
  }
}

Create a post template

To make the pages for the content in the posts directory, I’ll need a template to use with the Gatsby createPages API.

To do that, I’ll create a templates directory in src then make a post-template.js file.

mkdir src/templates
touch src/templates/post-template.js

For now, I’m going to return a h1 with Hello template so I can validate the page was created by Gatsby node.

import React from 'react'

export default () => {
  return (
    <>
      <h1>Hello template</h1>
    </>
  )
}

Save the template, now to create the pages in gatsby-node.js I’m adding the following.

const { createFilePath } = require(`gatsby-source-filesystem`)
const path = require(`path`)

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions
  const postTemplate = path.resolve('src/templates/post-template.js')

  return graphql(`
    {
      allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
        nodes {
          fields {
            slug
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      throw result.errors
    }

    const posts = result.data.allMdx.nodes

    posts.forEach((post, index) => {
      createPage({
        path: post.fields.slug,
        component: postTemplate,
        context: {
          slug: post.fields.slug,
        },
      })
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

I know there’s a lot in there to unpack, so, if you need more detail check out the sections in the ”Build a coding blog from scratch with Gatsby and MDX”, listed here:

Confirm the pages were created with Gatsby’s built in 404 page

Stop and start the dev server as there’s been changes to Gatsby node.

Check the page has been created, to do that add /404.js to the dev server url which will show all the available pages in the project.

From here I can select the path created to /toc-example/ and confirm the page was created.

Build out the post template to use the MDXRenderer

Now I can add the data to the post-template.js page from a GraphQL query. I’ll do that with the Gatsby graphql tag and query some frontmatter, body and the table of contents.

This query is taking the String! parameter of slug passed to it from createPage in gatsby-node.js.

query PostBySlug($slug: String!) {
  mdx(fields: { slug: { eq: $slug } }) {
    frontmatter {
      title
      date(formatString: "YYYY MMMM Do")
    }
    body
    excerpt
    tableOfContents
    timeToRead
    fields {
      slug
    }
  }
}

Destructure the body and frontmatter data from data.mdx, data is the results of the PostBySlug query. Wrap the body data in the <MDXRenderer> component.

The frontmatter.title and frontmatter.date can be used in h1 and p tags for now.

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'

export default ({ data }) => {
  const { body, frontmatter } = data.mdx
  return (
    <>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.date}</p>
      <MDXRenderer>{body}</MDXRenderer>
    </>
  )
}

export const query = graphql`
  query PostBySlug($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        date(formatString: "YYYY MMMM Do")
      }
      body
      excerpt
      tableOfContents
      timeToRead
      fields {
        slug
      }
    }
  }
`

I’m going to be using tableOfContents later when I make a table of contents component.

Add page elements for the MDXProvider

The content (headings, paragraphs, etc.) were reset with styled-reset in the template being used so will need to be added in.

I’m going to be amending the already existing H1 and <P> styled-components to be React components so that I can spread in the props I need for the heading ID.

import React from 'react'
import styled from 'styled-components'

export const StyledH1 = styled.h1`
  font-size: ${({ theme }) => theme.fontSize['4xl']};
  font-family: ${({ theme }) => theme.font.serif};
  margin-top: ${({ theme }) => theme.spacing[8]};
  line-height: ${({ theme }) => theme.lineHeight.none};
`

export const H1 = props => {
  return <StyledH1 {...props}>{props.children}</StyledH1>
}

Create a <H2> component based off of the <H1>, adjust the spacing and font size.

import React from 'react'
import styled from 'styled-components'

export const StyledH2 = styled.h2`
  font-size: ${({ theme }) => theme.fontSize['3xl']};
  font-family: ${({ theme }) => theme.font.serif};
  margin-top: ${({ theme }) => theme.spacing[6]};
  line-height: ${({ theme }) => theme.lineHeight.none};
`

export const H2 = props => {
  return <StyledH2 {...props}>{props.children}</StyledH2>
}

I’ll need to add the newly created H2 to the index file for page-elements:

export * from './h1'
export * from './h2'
export * from './p'

Same with the <P> as I did with the H1, I’ll switch it to use React.

import React from 'react'
import styled from 'styled-components'

export const StyledP = styled.p`
  margin-top: ${({ theme }) => theme.spacing[3]};
  strong {
    font-weight: bold;
  }
  em {
    font-style: italic;
  }
`

export const P = props => {
  const { children, ...rest } = props
  return <StyledP {...rest}>{children}</StyledP>
}

Importing the modified components into the root-wrapper.js I can now pass them into the <MDXProvider> which is used to map to the HTML elements created in markdown.

There’s a complete listing of all the HTML elements that can be customised on the MDX table of components.

In this example I’m mapping the H1, H2 and P components to the corresponding HTML elements and passing them into the <MDXProvider>.

import { MDXProvider } from '@mdx-js/react'
import React from 'react'
import { ThemeProvider } from 'styled-components'
import Layout from './src/components/layout'
import { H1, H2, P } from './src/components/page-elements'
import { GlobalStyle, theme } from './src/theme/global-style'

const components = {
  h1: props => <H1 {...props} />,
  h2: props => <H2 {...props} />,
  p: props => <P {...props} />,
}

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={theme}>
    <GlobalStyle />
    <MDXProvider components={components}>
      <Layout>{element}</Layout>
    </MDXProvider>
  </ThemeProvider>
)

Add gatsby-remark-autolink-headers for adding id’s to headers

Now I have a page, with some content and headers I should now be able to navigate to the individual headings, right?

Well, not quite, although the headers are there, there’s no IDs in them to scroll to yet.

I can use gatsby-remark-autolink-headers to create the heading IDs.

yarn add gatsby-remark-autolink-headers

Add gatsby-remark-autolink-headers in the Gatsby MDX config.

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [`.mdx`, `.md`],
    gatsbyRemarkPlugins: [`gatsby-remark-autolink-headers`],
  },
},

As I’ve changed the gatsby-config.js file I’ll need to stop and start the dev server.

Fix the weird positioning on the SVGs for the links added by gatsby-remark-autolink-headers.

Do that by making some reusable CSS with a tagged template literal, I’ll put it in it’s own file heading-link.js.

touch src/components/page-elements/heading-link.js

Then add the CSS in as a template literal:

export const AutoLink = `
  a {
    float: left;
    padding-right: 4px;
    margin-left: -20px;
  }
  svg {
    visibility: hidden;
  }
  &:hover {
    a {
      svg {
        visibility: visible;
      }
    }
  }
`

Then I’m going to use that (AutoLink) in the H2 and anywhere else that could have a link applied to it (any heading element).

import React from 'react'
import styled from 'styled-components'
import { AutoLink } from './linked-headers'

export const StyledH2 = styled.h2`
  font-size: ${({ theme }) => theme.fontSize['3xl']};
  font-family: ${({ theme }) => theme.font.serif};
  margin-top: ${({ theme }) => theme.spacing[6]};
  line-height: ${({ theme }) => theme.lineHeight.none};
  ${AutoLink}
`

export const H2 = props => {
  return <StyledH2 {...props}>{props.children}</StyledH2>
}

Clicking around on the links now should scroll to each one smoothly and have the SVG for the link only visible on hover.

Make a TOC component

From here onwards is what the whole post boils down to! I did want to go through the process of how you would do something similar yourself though, so I’m hoping this has helped in some way.

For the TOC with smooth scroll you need several things:

scroll-behavior: smooth; added to your html, this is part of the starter I made in a previous post.
IDs in the headings to scroll to, this is done with gatsby-remark-autolink-headers.
A table of contents which is provided by Gatsby MDX with tableOfContents.

The first two parts have been covered so now to create a TOC component, with styled-components.

In the post-template.js I’ll create a Toc component for some positioning and create a scrollable div to use inside of that.

const Toc = styled.ul`
  position: fixed;
  left: calc(50% + 400px);
  top: 110px;
  max-height: 70vh;
  width: 310px;
  display: flex;
  li {
    line-height: ${({ theme }) => theme.lineHeight.tight};
    margin-top: ${({ theme }) => theme.spacing[3]};
  }
`

const InnerScroll = styled.div`
  overflow: hidden;
  overflow-y: scroll;
`

The main content is overlapping with the TOC here so I’m going to add a maxWidth inline on the layout.js component.

<main style={{ maxWidth: '640px' }}>{children}</main>

Conditionally render the TOC

Time to map over the tableOfContents object:

{
  typeof tableOfContents.items === 'undefined' ? null : (
    <Toc>
      <InnerScroll>
        <H2>Table of contents</H2>
        {tableOfContents.items.map(i => (
          <li key={i.url}>
            <a href={i.url} key={i.url}>
              {i.title}
            </a>
          </li>
        ))}
      </InnerScroll>
    </Toc>
  )
}

Here’s the full post-template.js file, I’ve reused the page-elements components for the h1, h2 on the TOC and p:

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'
import styled from 'styled-components'
import { H1, H2, P } from '../components/page-elements'

const Toc = styled.ul`
  position: fixed;
  left: calc(50% + 400px);
  top: 110px;
  max-height: 70vh;
  width: 310px;
  display: flex;
  li {
    line-height: ${({ theme }) => theme.lineHeight.tight};
    margin-top: ${({ theme }) => theme.spacing[3]};
  }
`

const InnerScroll = styled.div`
  overflow: hidden;
  overflow-y: scroll;
`

export default ({ data }) => {
  const { body, frontmatter, tableOfContents } = data.mdx
  return (
    <>
      <H1>{frontmatter.title}</H1>
      <P>{frontmatter.date}</P>
      {typeof tableOfContents.items === 'undefined' ? null : (
        <Toc>
          <InnerScroll>
            <H2>Table of contents</H2>
            {tableOfContents.items.map(i => (
              <li key={i.url}>
                <a href={i.url} key={i.url}>
                  {i.title}
                </a>
              </li>
            ))}
          </InnerScroll>
        </Toc>
      )}
      <MDXRenderer>{body}</MDXRenderer>
    </>
  )
}

export const query = graphql`
  query PostBySlug($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        date(formatString: "YYYY MMMM Do")
      }
      body
      excerpt
      tableOfContents
      timeToRead
      fields {
        slug
      }
    }
  }
`

That’s it, I can play around navigating between headings now from the TOC.

📺 Here’s a video detailing the process.

Resources that helped me

Thanks for reading 🙏

Please take a look at my other content if you enjoyed this.

Follow me on Twitter or Ask Me Anything on GitHub.

Globally Style the Gatsby Default Starter with styled-components v5

Thu, 06 Feb 2020 00:00:00 GMT

I’m going to go over globally styling the Gatsby Default Starter with styled-components v5, I’ve done this in the past with styled-components v4 but I’ve changed my approach and want to document it.

I’ll be swapping out the styles included with a CSS reset and adding in global style with the styled-components createGlobalStyle helper function and also adding in the styled-components theme provider.

To start I’ll make a new Gatsby project using npx:

npx gatsby new gatsby-starter-styled-components

Install styled-components dependencies

I’m using yarn to install my dependencies, the backslash is to have the packages on multiple lines instead of one long line:

yarn add gatsby-plugin-styled-components \
  styled-components \
  babel-plugin-styled-components \
  styled-reset

Configure `gatsby-plugin-styled-components` and `createGlobalStyle`

Pop gatsby-plugin-styled-components into the gatsby-config.js file plugins array:

  plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-react-helmet`,
    {

Now I’m going to create a global-style.js file in a new directory src/theme then import the styled-components helper function createGlobalStyle into that, this is where the styles for the site are going to live now.

Create the dir and file with the terminal command:

mkdir src/theme && touch src/theme/global-style.js

The base styles go in here, along with the styled-reset.

To start with I’ll create the GlobalStyle object and add in the the reset.

import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

export const GlobalStyle = createGlobalStyle`
  ${reset}
`

Remove current styling

Remove the current styling that is used in the <Layout> component, it’s the import './layout.css' line, I’ll also delete the layout.css file as I’m going to be adding in my styles.

import { graphql, useStaticQuery } from 'gatsby'
import PropTypes from 'prop-types'
import React from 'react'
import Header from './header'
import './layout.css'

Now the site has the base browser default styles, time to add in my own styles. Before that I’m going to confirm the reset is doing it thing.

Confirm CSS reset

Now I have the base browser styles I’m going to confirm the CSS reset in the <Layout> component. This is where I’ve removed the previous global styles (layout.css) from.

import { graphql, useStaticQuery } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import { GlobalStyle } from "../theme/global-style"
import Header from "./header"

const Layout = ({ children }) => {
  // static query for the data here
  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <GlobalStyle />
        <main>{children}</main>
        <footer>

In the code example here 👆I’ve I removed the useStaticQuery hook for readability.

Ok, cool, looks pretty reset to me!

Create the new browser base styles

Time to add in some more styles to the global style. First, the box-sizing reset, take a look at the CSS Tricks post on Box Sizing for a great explanation of why we do this.

import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

export const GlobalStyle = createGlobalStyle`
  ${reset}

  *, *:before, *:after {
    box-sizing: border-box;
  }
  html {
    box-sizing: border-box;
  }
`

Then I’m adding in the smooth scroll html property and some additional styles for base font size and colour along with base line height letter spacing and background colour.

import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

export const GlobalStyle = createGlobalStyle`
  ${reset}

  *, *:before, *:after {
    box-sizing: border-box;
  }
  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: '#1a202c';
  }
  body {
    line-height: 1.5;
    letter-spacing: 0;
    background-color: '#f7fafc';
  }
`

Place `GlobalStyle` at the top of the React tree 🌳

I’m adding this as high up the component tree as possible so that the global styles will affect everything that is ‘underneath’ it.

In the case of the Gatsby Default Starter you’ll notice that the <Layout> component wraps a the index.js page, page-2.js and the 404.js page so adding the <GlobalStyle /> component here is a sound option.

There is an alternative to adding it to the layout and that is to use the Gatsby Browser and Gatsby SSR API wrapRootElement.

If I add in the following code to gatsby-browser.js the styles are applied.

import React from 'react'
import Layout from './src/components/layout'
import { GlobalStyle } from './src/theme/global-style'

export const wrapRootElement = ({ element }) => (
  <>
    <GlobalStyle />
    <Layout>{element}</Layout>
  </>
)

I also have a double header, that’s because the layout component is still wrapping the index page, page 2 and the 404 page. I’ll remove the layout component from those locations so I have it in one place to manage.

Make a Root Wrapper to keep things DRY 🌵

I also need to add the same code into gatsby-ssr.js so so that the styles are rendered on the server when the site is built.

Rather than have the code duplicated in the two files I’ll create a root-wrapper.js file (you can call it what you like!) and add it to the root of the project. I’ll import that into both the gatsby-browser.js and gatsby-ssr.js files:

import { wrapRootElement as wrap } from './root-wrapper'

export const wrapRootElement = wrap

Global fonts with `gatsby-plugin-google-fonts`

Onto the main reason for this post, with the v5 release of styled-components the use of @imports in createGlobalStyle isn’t working, (that approach is detailed here) it’s recommended that you embed these into your HTML index file, etc.

NOTE: At this time we recommend not using @import inside of createGlobalStyle. We’re working on better behavior for this functionality but it just doesn’t really work at the moment and it’s better if you just embed these imports in your HTML index file, etc.

But! As I’m using Gatsby, of course, “There’s a Plugin For That™️” so I’m going to use gatsby-plugin-google-fonts for this, I’m using this in place of gatsby-plugin-web-font-loader because it uses display=swap.

yarn add gatsby-plugin-google-fonts

Configure, I’ll add three fonts, sans, sans serif and monospace to the Gatsby plugin array in gatsby-config.js:

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `cambay\:400,700`,
      `arvo\:400,700`,
      `ubuntu mono\:400,700`,
    ],
    display: 'swap',
  },
},

I can now use these fonts throughout my site.

styled-components Theme provider

The styled-components ThemeProvider is a great solution for managing your styles throughout a project.

Part of the inspiration for my approach came from Sid’s talk at React Advanced which I wrote about and part from watching the Tailwind CSS courses from Adam Wathan on Egghead.io check out the playlist here: Introduction to Tailwind and the Utility first workflow

With the ThemeProvider I can have things like colours, sizes, font weights in one place so that there is a consistent set of presets to choose from when styling.

In the global-style.js file I’m creating a theme object to hold all the values for the theme.

For the font I’ll add in the types I defined in the Gatsby config, for serif, sans serif and monospace.

import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

export const theme = {
  font: {
    sans: 'Cambay, sans-serif',
    serif: 'Arvo, sans',
    monospace: '"Ubuntu Mono", monospace',
  },
}

export const GlobalStyle = createGlobalStyle`
  ${reset}

  *, *:before, *:after {
    box-sizing: border-box;
  }
  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: '#1a202c';
  }
  body {
    line-height: 1.5;
    letter-spacing: 0;
    background-color: '#f7fafc';
  }
`

Now I’ll need to add the <ThemeProvider> high up in the React render tree, same as with the global style, I’ll add it to the root-wrapper.js file.

import React from 'react'
import { ThemeProvider } from 'styled-components'
import Layout from './src/components/layout'
import { GlobalStyle, theme } from './src/theme/global-style'

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={theme}>
    <GlobalStyle />
    <Layout>{element}</Layout>
  </ThemeProvider>
)

When I want to pick a font type to use in the project I can use the theme object and pick out the desired type.

Like setting the HTML font-family to sans serif:

export const GlobalStyle = createGlobalStyle`
  ${reset}

  *, *:before, *:after {
    box-sizing: border-box;
  }
  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: ${({ theme }) => theme.font.sans};
    font-size: 16px;
    color: '#1a202c';
  }
  body {
    line-height: 1.5;
    letter-spacing: 0;
    background-color: '#f7fafc';
  }
`

The base font is now set to Cambay, why stop there though, I’ll bring in some fonts sizes and font weights from the Tailwind full config and add them to the theme object.

import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

export const theme = {
  font: {
    sans: 'Cambay, sans-serif',
    serif: 'Arvo, sans',
    monospace: '"Ubuntu Mono", monospace',
  },
  fontSize: {
    xs: '0.75rem',
    sm: '0.875rem',
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
    '5xl': '3rem',
    '6xl': '4rem',
  },
  fontWeight: {
    hairline: '100',
    thin: '200',
    light: '300',
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
    extrabold: '800',
    black: '900',
  },
}

export const GlobalStyle = createGlobalStyle`
  ${reset}

  *, *:before, *:after {
    box-sizing: border-box;
  }
  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: ${({ theme }) => theme.font.sans};
    font-size: ${({ theme }) => theme.fontSize.lg};
    color: '#1a202c';
  }
  body {
    line-height: 1.5;
    letter-spacing: 0;
    background-color: '#f7fafc';
  }
`

I’ll add the base font at .lg (1.125rem), I’ll also add in line height and line spacing defaults but I’ll save adding the whole config here to save you a codewall, you get the idea though, right?

Here’s the rest of the GlobalStyle with defaults applied.

export const GlobalStyle = createGlobalStyle`
  ${reset}

  *, *:before, *:after {
    box-sizing: border-box;
  }
  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: ${({ theme }) => theme.font.sans};
    font-size: ${({ theme }) => theme.fontSize.lg};
    color: ${({ theme }) => theme.colours.grey[900]};
  }
  body {
    line-height: ${({ theme }) => theme.lineHeight.relaxed};
    letter-spacing: ${({ theme }) => theme.letterSpacing.wide};
    background-color: ${({ theme }) => theme.colours.white};
  }
`

Shared Page Elements

The current page is still missing basic styles for h1 and p so I’m going to create those in a new directory src/components/page-elements

mkdir src/components/page-elements
touch src/components/page-elements/h1.js
touch src/components/page-elements/p.js

And add some base styles to those for h1:

import styled from 'styled-components'

export const H1 = styled.h1`
  font-size: ${({ theme }) => theme.fontSize['4xl']};
  font-family: ${({ theme }) => theme.font.serif};
  margin-top: ${({ theme }) => theme.spacing[8]};
  line-height: ${({ theme }) => theme.lineHeight.none};
`

And the same sort of thing for the p:

import styled from 'styled-components'

export const P = styled.p`
  font-size: ${({ theme }) => theme.fontSize.base};
  margin-top: ${({ theme }) => theme.spacing[3]};
  strong {
    font-weight: bold;
  }
  em {
    font-style: italic;
  }
`

Then it’s a case of replacing the h1’s and p’s in the project to use the styled components.

Here’s the index.js file as an example:

import { Link } from 'gatsby'
import React from 'react'
import Image from '../components/image'
import { H1 } from '../components/page-elements/h1'
import { P } from '../components/page-elements/p'
import SEO from '../components/seo'

const IndexPage = () => (
  <>
    <SEO title="Home" />
    <H1>Hi people</H1>
    <P>Welcome to your new Gatsby site.</P>
    <P>Now go build something great.</P>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </>
)

export default IndexPage

Export all your styled-components from an index file

As the amount of page elements grows you may want to consider using an index.js file instead of having an import for each individual component you can import from one file.

Let’s take a quick look at that, so let’s say I import the h1 and p into a file, it’ll looks something like this:

import { H1 } from '../components/page-elements/h1'
import { P } from '../components/page-elements/p'

If you have several elements your using in the file the imports could get a bit cluttered.

I’ve taken to creating an index.js file that will export all the components, like this:

export * from './h1'
export * from './p'

Then when importing the components it will look like this:

import { H1, P } from '../components/page-elements'

That’s it for this one!

Here’s a video detailing the process 📺

Thanks for reading 🙏

Please take a look at my other content if you enjoyed this.

Follow me on Twitter or Ask Me Anything on GitHub.

Resources

Upgrade Windows Subsystem Linux - Ubuntu 18.04 to Ubuntu 19.10

Tue, 28 Jan 2020 00:00:00 GMT

In this guide I’m going to detail upgrading a Windows Subsystem Linux (WSL) Ubuntu install from the current version 18.04 to 19.10 this is an intermediary release before Ubuntu 20.04 is released on 2020 April 23.

I have documented this process in the past for moving from Ubuntu version 18.04 to 18.10. You can see my comments as I went through the process back then.

📺 Here’s a video detailing the process.

Check the current Ubuntu version

Ok, to check the current installed version of Ubuntu from the terminal I enter lsb_release -a to get the currently installed Ubuntu version displayed.

LSB stands for Linux Standard Base and the ‘-a’ is for ‘all information’

lsb_release -a

The output looks like this:

Do the release upgrade!

To start the upgrade I enter the terminal command do-release-upgrade.

sudo do-release-upgrade

This will prompt me if my release-upgrades file isn’t set to normal.

Set release upgrades to normal

Open the release-upgrades file path to edit, in this example I’m using Nano to edit the file.

sudo nano /etc/update-manager/release-upgrades

In the file I change the Prompt from Prompt=lts to Prompt=normal.

To save the file in Nano I use Ctrl+o to write out the file, confirm (Enter/Return) then to close use I Ctrl+x.

Do the release upgrade, for realsies

Now the release-upgrades file is set to normal I can do the do-release-upgrade.

You may be aware of an lxd error that occurs on the Ubuntu 18.04 to Ubuntu 18.10 upgrade. This is where there is a prompt saying “Your system is unable to reach the snap store”.

I’m going to skip this during the upgrade but you can optionally run this when doing this for yourself, here’s the command:

sudo dpkg --force depends -P lxd; sudo dpkg --force depends -P lxd-client

Pick the same command again in the terminal, if I arrow up a a couple of commands I can use it again.

sudo do-release-upgrade

I’m now prompted with the details of what is going to happen in the upgrade:

I respond with y to continue and start the upgrade.

Warnings and configs

When I’m prompted about libc6 for restarting services during package upgrades I use the tab key to select <Yes> then return to continue.

Next I have the Lxd warning I mentioned earlier, in this case I’m going to arrow down and select the option to <Skip> then hit return to continue.

In the following screens I’m being asked about package configuration, I’m going to be picking the option to install the package maintainer's version for all of them.

Same with openssh-server arrow up key to to install the package maintainer's version and hit return to continue.

Then there’s the release-upgrades configuration and yeah I’m going to select to install the package maintainer's version and confirm to continue.

Finish up install

One of the last few prompts is to confirm the removal of the obsolete packages, confirm y to continue.

Restart is required now, so I confirm with y.

Now I have the confirmation that the do release upgrade completed successfully. I press Ctrl+c

Then have to press x to destroy!

That takes me back to the regular prompt where I can check with lsb_release -a what version I’m now on.

Confirmation the Windows Subsystem Linux version of Ubuntu I’m using is now on 19.10.

Wrap up!

That’s it! I upgraded a WSL Ubuntu version from 18.04 to 19.10.

First, I changed the default behaviour of the release upgrader from lts to normal.

Then do-release-upgrade, and I skipped the Lxd configuration. It isn’t needed on WSL but is part of the Ubuntu image on the Microsoft Store 🤔

I accept install the package maintainer's version on any configuration prompts.

Done.

Thanks for reading 🙏

Please take a look at my other content if you enjoyed this.

Follow me on Twitter or Ask Me Anything on GitHub.

Track Custom Events With Fathom Analytics

Thu, 02 Jan 2020 00:00:00 GMT

In this guide I’m going to go through how to track custom events in a Gatsby site using Fathom analytics.

Preamble

At the end of last month (November 2019) I started using Fathom Analytics in place of Google Analytics.

I wanted a simpler way to track visitors to my sites and Fathom offers that with a great, really intuitive interface and simple design.

So far, I love it, and would like to recommend it to others! Fathom have an awesome affiliate program where every customer can take part!

For every paying customer I refer with my unique code, I’ll get a 25% lifetime commission on that customers payments, and if you use that code too you’ll get a \$10 discount on your first invoice.

For now here’s some of the Fathom marketing copy.

Why Fathom?

You don’t need to display those cookie notices as they don’t use cookies, nor do they track invasive data.
They are focused on privacy for website visitors, they don’t track visitors, save their personal information, or need it to be profitable.
They have hundreds of customers and track tens of millions of page views per month, so they may be a small company, but they’re doing big things!
They can handle viral content, so your site won’t slow down because of them, an they wont ever stop tracking for you because of a spike in popularity.
All of the plans allow for unlimited websites to be tracked and receive top-notch customer support. Plans start at \$14 a month.

Do you use Google Analytics (GA) for any of your sites? I’ve used it in the past and it gives the sort of information you’d expect but it can be quite confusing to navigate and find that information.

What you get with Fathom out of the box is very similar to GA, but it’s all there on one page. You get the standard metrics like, ‘Unique visits’, ‘Page views’, ‘Avg time on site’ and ‘Bounce rate’.

There’s also the breakdown of the most popular pages and referring sites.

The difference (apart from the simple to use interface), you’re not giving away your visitors data to the big G!

Want to track what users of your site are clicking and navigating to?

But say you want to track how many times a user of your site clicked a particular button or link?

📺 Here’s a video detailing the process.

Set-up Fathom account

If you want to follow along you’re going to need a Fathom Analytics account, if you haven’t already got one then please consider signing up with my affiliate link, my unique code will get you a \$10 discount off of your first invoice! 🤝

Add/Config Fathom Gatsby plugin

In this guide I’m going to use a Gatsby starter gatsby-starter-business which is a nice starter with some of the relevant things I’d want to track. Things like the pricing page and how many people submit a contact form.

In the gatsby-config.js plugins array the config looks pretty similar to this:

{
  resolve: `gatsby-plugin-fathom`,
  options: {
    siteId: process.env.GATSBY_FATHOM_TRACKING_ID_MY_AWESOME_SITE,
    // or use the site ID in plaintext
    // siteId: 'PBZRRJHH',
  },
},

In the example I’m doing I’m hard-coding in the site ID but you can use environment variables if you like.

Push to Netlify and test

For the purposes of the guide I build and push the site to Netlify then check in the console on the browser that fathom is available as a global function.

I can now check my Fathom dashboard to see that the site has a visitor.

Cool, cool! That’s Fathom Analytics configured for the site, now to the custom events.

Create goals in Fathom Analytics

To track events in Fathom I’ll first need to set up a goal! This will give a unique ID that I can pass to the Fathom global function that’s on my configured site.

So, to get to the goal section of my site I’ll scroll to the bottom of the configured site’s dashboard and click the Show more data toggle.

This will reveal the Goals section where I can configure goals. In this example I’ll be adding goals for about, pricing, blog, contact-us and form-submit.

Each time I save the goal I’m given a JavaScript snippet to use, like: fathom('trackGoal', 'CYAZA98C', 0); , this is what I’m going to be adding into my code example.

Use React Context API to make an analytics provider

I’m going to use the React context API to create an analytics provider to be used throughout the app.

import React, { createContext, useContext, useEffect } from 'react'

const AnalyticsContext = createContext({})

export const AnalyticsProvider = ({ children }) => {
  useEffect(() => {
    if (typeof window.fathom === 'undefined') {
      window.fathom = (x, y, z) => {
        console.log(`I'm a fake Fathom`, x, y, z)
      }
    }
  }, [])

  const logClicks = goalId => {
    window.fathom('trackGoal', goalId, 0)
  }

  return (
    <AnalyticsContext.Provider value={logClicks}>
      {children}
    </AnalyticsContext.Provider>
  )
}

export const useAnalytics = () => {
  return useContext(AnalyticsContext)
}

In this example I’m defining one function to be available via the context provider and passed in with value but I could add in many functions here for different event types.

The useEffect hook is for when I’m on the dev server and don’t want to be submitting data to Fathom, I’ll instead get a console message.

As high up the component tree as possible, I’m going to add the provider.

Add custom event tracking for Fathom

In this example there’s a Layout component I can add the provider to, this wraps all of the components in the application so the provider can be accessed throughout the site.

Then use in the areas I want to track a goal I’ll use the useAnalytics hook.

const NavBar = ({ toggleNavbar, isActive }) => {
  const fa = useAnalytics()
  return (
    // other wrapping elements
    <Link
      onClick={() => {
        fa('CDDZY97C')
      }}
      className="navbar-item"
      to="/about"
    >
      About
    </Link>
    // other wrapping elements
  )
}

Wrap up

Ok, time for me to review what I just did and what you’ll need to do if you’re looking to do the same:

Set up Fathom account
Add and configure the Fathom Gatsby plugin
Push the configured site to Netlify to test configuration.
Add custom tracking code in the shape of a React Context API Provider
Wrap the app in the AnalyticsProvider
Consume the analytics provider function to log the event to the fathom global function.

🥁 Demo site: https://gatsby-starter-business-fathom.netlify.com

📈 Demo Fathom Dashboard: https://app.usefathom.com/share/nymdtplm/gatsby-starter-business

🤝 Affiliate link for \$10 of off your first month of Fathom Analytics: https://usefathom.com/ref/HG492L

Thanks for reading 🙏

That’s all folks! If there is anything I have missed, or if there is a better way to do something then please let me know.

Follow me on Twitter or Ask Me Anything on GitHub.

React Advanced - London 2019

Tue, 31 Dec 2019 00:00:00 GMT

React Advanced London going deep!

Here’s my recollection of my attendance at React Advanced London 2019 supported with videos from the event.

Ken Wheeler - React Performance

Ken’s keynote didn’t disappoint! Ken talks about how performance fixes aren’t prescriptive and it’s more like a puzzle to figure out.

To help with this he prescribed the IMDOPE system!

IMDOPE System

Identify that a problem exists
Measure your timings
Develop a plan
Open dev tools
Play around until its better
Enjoy newly performant app

Ken detailed an animation running at 60 frames per second and how that appears on the performance tab.

The user Timings API (which I’ve never heard of) lets you define precise performance marking that you can name and display in dev tools.

Example:

performance.mark('mainthread-start')
# do expensive things for performance
performance.mark('mainthread-stop')
performance.measure('mainthread', 'mainthread-start', 'mainthread-stop')

React does not control renders by default, very often problems relating to performance are related to unnecessary renders.

React is generally not great when you have a lot of components rendering and re-rendering at the same time (cough React Memo!)

The React dev tools profiler got a mention and there was a demo of how react will re-render all the things if you have many components in a view using the React dev tools profiler.

There was an amusing part where when trying to demo the useCallback React API where Ken missed out the second argument and had to consult the React docs to clarify.

“as developers almost everything we do is building elaborate lists of shit”
— Ken Wheeler

List should be virtualized, check out Brian Vaughn’s React Window or React Virtualized he went on to render lists with 10k plus items in there and demoed the shoddy performance on a rendered list then with react window.

Web Workers

A particularly interesting section for me (because I didn’t know it was a thing), with web workers you can take expensive tasks off of the main thread.

There are some downsides to this relating to serialization though.

WASM

He finished up with an auto tune example made with Rust and a Google audio worklet to process a stream of audio to do the Daft Punk “one more time” vocoder example! Dope!

Sean Wang - React (with hooks) from scratch

Bonkers talk from Sean where he recreated React with Hooks and React Concurrency (Fibre) in a CodeSandbox.io session.

The talk was a sequel to a previous talk on React hooks from scratch in 29 lines. He started with “we’re going to re-create concurrent React in 130 lines of code!“.

At blazing fast speed he covered many concepts, a lot I was unfamiliar with relating to React, topics covered:

React Fiber
“Rendering”
Linked List Traversal
Reconciliation vs Commit
useState hook
Work loop
Suspense

First, the POJO! (Plain Old JavaScript Object):

const element = {
  type: 'h1',
  props: {
    children: 'Hello world',
  },
}

Then went on to define what a fiber was, which is an extension on the POJO:

const element = {
  type: 'h1',
  props: {
    children: 'Hello world',
  },
  dom: domNode,
  parent: parentFiber,
  child: childFiber,
  sibling: null,
  alternate: currentFiber,
  effectTag: PLACEMENT,
  hooks: [],
}

I’ll be honest, the speed at which Sean went, although very concise was quite though to follow at times.

He covered all the main sections along with code examples. TL;DR suspense with time slicing is here.

The only dependency used in the code was Babel with this fetch example where the we’re using state and reading from a resource which suspends (or caches) as needed.

Vojtech Miksu - What a Drag

Vojtech (Uber) goes through the history lesson about drag and drop and the complexities that come with it.

He details the options available and why they implemented their own React Movable Accessible drag and drop project.

Here’s the same talk from RSCONF 2019:

Daniel Irvine - Don’t Let Your Unit Tests Slow You Down

Six ideas that can help improve your testing.

Idea 1:

Always follow Arrange Act Assert, get the variables in place, render, expected result.

Keep tests simple

Idea 2:

Test the lifecycle of your components.

Idea 3:

Be aware of tests surface areas, good test pinpoint errors.

Idea 4:

Make a mess, then refactor.

Idea 5:

Get out of React components at every opportunity. Testing simple functions, simple, React component, not so simple to test.

Idea 6:

Write your own test library! 😱

It will help you understand the DOM better and further your learning!!!

Library’s lock you into their way of testing things.

Main takeaway for me from this is:

No tests are better than bad tests!

After this talk I was off to the React native hall to go see some of the lightening talks as I knew one of the speakers.

Dave Nicholas - Functions vs Classes

He discussed the migration from classes over to functional components at Tesco.

A non technical talk about teaching what you have learned as someone will benefit from it.

That can be in the form of ANYTHING. It wasn’t quite as memorable as Ken’s IMDOPE system but it was the message was what was important.

Jamie went on to talk about how the community can benefit from any kind of sharing.

YouTube video or video series
Tutorials
Hackathons, hosting or organising
Indie Hackers, posting milestones
Guides

Something that resonated with me was the quite:

“Write the guide you needed as a developer when trying to do this.”

I have been doing this for a long time myself now and it’s something I believe in a lot.

Lunch

Siddharth Kshetrapal - Design Systems Design System

Sid gave a good overview of making design systems. Or designing design systems.

“When I started laying out a system last year I would just call them gray, gray darker and gray darkest.”

Basically there always a colour that’s not on there.

Then he came out with this gem!

const theme = {
  colours: {
    grays: {
      100: '#fff9f9'
      200: '#e6e6e6'
      300: '#999999'
      400: '#757575'
      500: '#242424'
      700: '#151515'
      900: '#111111'
    }
  }
}

So you can add in more colours if you need them, add a 150, or add a 600 here.

Sid then went on to talks about how awesome styled-components was and some nice touches for that:

import styled from 'styled-components'

const FormLabel = styled.label(
  props => `
  color: ${props.theme.colors.text.subtle}
  font-size: ${props.theme.fontSizes[2]}
`
)

Looks pretty verbose so you could use @styled-system/css to reduce that:

import styled from 'styled-components'
import css from '@styled-system/css'

const FormLabel = styled.label(
  css({
    color: 'text.subtle',
    fontSize: 2,
  })
)

Pretty neat stuff!

Emma Brillhart - A More Readable React Codebase Using TypeScript, GraphQL, and Hooks

Emma’s talk centered around why TypeScript is awesome and how readability enables faster onboarding for developers.

Using TypeScript on the client side give built in documentation, better navigation, less technical debt.

Complete playlist of all the talks on YouTube here.

Check the hashtag on Twitter and also my coverage on Twitter.

https://twitter.com/search?q=spences10%20reactadvanced&f=live

Build a coding blog from scratch with Gatsby and MDX

Thu, 31 Oct 2019 00:00:00 GMT

I have been a Gatsby user since around v0 May 2017, at that time was using a template called Lumen and it was just what I needed at the time. Since then I have have gone from using a template to creating my blog.

Over the years I have made my own Progressive Disclosure of Complexity with Gatsby to where I am now.

What does that mean?

It means that although there are an awesome amount of Gatsby starters and themes out there to get you up and running in minutes, this post is going to focus on what you need to do to build your own blog. Starting with the most basic “Hello World!” to deploying your code to production.

What you’re going to build

You’re going to build a developer blog with MDX support (for some React components in Markdown goodness), so you will be able to add your own React components into your Markdown posts.

There’ll be:

Adding a Layout
Basic styling with styled-components
Code blocks with syntax highlighting
Copy code snippet to clipboard
Cover images for the posts
Configuring an SEO component
Deploying it to Netlify

Who’s this how-to for?

People that may have used Gatsby before as a template and now want to get more involved in how to make changes.

If you want to have code syntax highlighting.

If you want to use styled-components in an app.

I really want to avoid this!

draw a horse Quincy tweet

Requirements

You’re going to need a basic web development setup: node, terminal (bash, zsh or fish) and a text editor.

I do like to use codesandbox.io for these sort of guides to reduce the barrier to entry but in this case I have found there are some limitations with starting out from scratch on codesandbox.io which doesn’t make this possible.

I have made a guide on getting set up for web development with Windows Web-Dev Bootstrap and covered the same process in Ubuntu as well.

Ok? Time to get started!

Hello World

Kick this off with the Gatsby ‘hello world’, you’ll need to initialise the project with:

npm init -y
git init

I suggest that you commit this code to a git repository, so you should start with a .gitignore file.

touch .gitignore

echo "# Project dependencies
.cache
node_modules

# Build directory
public

# Other
.DS_Store
yarn-error.log" > .gitignore

Ok now is a good time to do a git init and if you’re using VSCode you’ll see the changes reflected in the sidebar.

basic hello world

Ok a Gatsby hello world, get started with the bare minimum! Install the following:

yarn add gatsby react react-dom

You’re going to need to create a pages directory and add an index file. You can do that in the terminal by typing the following:

# -p is to create parent directories too if needed
mkdir -p src/pages
touch src/pages/index.js

Ok, now you can commence the hello word incantation! In the newly created index.js enter the following:

import React from 'react'

export default () => {
  return <h1>Hello World!</h1>
}

Now you need to add the Gatsby develop script to the package.json file, -p specifies what port you want to run the project on and -o opens a new tab on your default browser, so in this case localhost:9988:

"dev": "gatsby develop -p 9988 -o"

Ok it’s time to run the code! From the terminal type the npm script command you just created:

yarn dev

Note I’m using Yarn for installing all my dependencies and running scripts, if you prefer you can use npm just bear in mind that the content on here uses yarn, so swap out commands where needed

And with that the “Hello World” incantation is complete 🧙!

Add content

Ok, now you have the base your blog you’re going to want to add some content, first up we’re going to get the convention out of the way. For this how-to, the date format will be a logical way, the most logical way for a date format is YYYYMMDD, fight me!

So you’re going to structure your posts content in years, in each one of those you’re going to have another folder relating to the post with the (correct) date format for the beginning of the file followed by the title of the post. You could drill into this further if you like by separating out months and days depending on the volume of posts going this may be a good approach. In this case and in the examples provided the convention detailed will be used.

# create multiple directories using curly braces
mkdir -p posts/2019/{2019-06-01-hello-world,2019-06-10-second-post,2019-06-20-third-post}
touch posts/2019/2019-06-01-hello-world/index.mdx
touch posts/2019/2019-06-10-second-post/index.mdx
touch posts/2019/2019-06-20-third-post/index.mdx

Ok that’s your posts set up now you need to add some content to them, each file you have in here should have frontmatter. Frontmatter is a way to assign properties to the contents, in this case a title, published date and a published flag (true or false).

---
title: Hello World - from mdx!
date: 2019-06-01
published: true
---

# h1 Heading

My first post!!

## h2 Heading

### h3 Heading

---
title: Second Post!
date: 2019-06-10
published: true
---

This is my second post!

#### h4 Heading

##### h5 Heading

###### h6 Heading

---
title: Third Post!
date: 2019-06-20
published: true
---

This is my third post!

> with a block quote!

Gatsby config API

Ok, now you’re going to configure Gatsby so that it can read your super awesome content you just created. So, first up you need to create a gatsby-config.js file, in the terminal create the file:

touch gatsby-config.js

Plugins

And now you can add the plugins Gatsby needs to use for sourcing and displaying the the files you just created.

Gatsby source filesystem

The gatsby-source-filesystem collects the files on the local filesystem for use in Gatsby once configured.

Gatsby plugin MDX

The gatsby-plugin-mdx is what will be allowing us to write JSX in our Markdown documents and the heart of how the content is displayed in the blog.

Now is a good time to also add in dependent packages for the Gatsby plugin MDX which are @mdx-js/mdx and @mdx-js/react.

In the terminal install the dependencies:

yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-source-filesystem

Now its time to configure gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `The Localhost Blog`,
    description: `This is my coding blog where I write about my coding journey.`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/posts`,
        name: `posts`,
      },
    },
  ],
}

Query data from GraphQL

Ok now you can see what the gatsby-source-filesystem and gatsby-plugin-mdx have done for us. You can now go to the Gatsby GraphQL GraphiQL explorer and check out the data:

{
  allMdx {
    nodes {
      frontmatter {
        title
        date
      }
    }
  }
}

Site Metadata

When you want to reuse common pieces of data across the site (for example, your site title), you can store that data in siteMetadata, you touched on this when defining the gatsby-config.js, now you’re going to separate this out from the module.exports, why? It will be nicer to reason about once the config is filled with plugins. At the top of gatsby-config.js add a new object variable for the site metadata:

const siteMetadata = {
  title: `The Localhost Blog`,
  description: `This is my coding blog where I write about my coding journey.`,
}

Now query the Site Metadata with GraphQL.

{
  site {
    siteMetadata {
      title
      description
    }
  }
}

Site metadata hook

Ok, so, that’s cool n’ all but how am I meant to use it? Well do some of the code stuff and make a React hook so you can get your site data in any component you need it.

Create a folder to keep all your hooks in and create a file for our hook, in the terminal do:

mkdir src/hooks
touch src/hooks/useSiteMetadata.js

Ok, and in your newly created file were going to use the Gatsby useStaticQuery hook to make your own hook:

import { graphql, useStaticQuery } from 'gatsby'

export const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query SITE_METADATA_QUERY {
        site {
          siteMetadata {
            title
            description
          }
        }
      }
    `
  )
  return site.siteMetadata
}

Now you can use this hook anywhere in your site, so do that now in src/pages/index.js:

import React from 'react'
import { useSiteMetadata } from '../hooks/useSiteMetadata'

export default () => {
  const { title, description } = useSiteMetadata()
  return (
    <>
      <h1>{title}</h1>
      <p>{description}</p>
    </>
  )
}

Styling

You’re going to use styled-components for styling, styled-components (for me) help with scoping styles in your components. Time to go over the basics now.

install styled-components

yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components

So, what was all that I just installed?

The babel plugin is for automatic naming of components to help with debugging.

The Gatsby plugin is for built-in server-side rendering support.

Configure

Ok, with that detailed explanation out of the way, configure them in gatsby-config.js:

const siteMetadata = {
  title: `The Localhost Blog`,
  description: `This is my coding blog where I write about my coding journey.`,
}

module.exports = {
  siteMetadata: siteMetadata,
  plugins: [
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/posts`,
        name: `posts`,
      },
    },
  ],
}

Ok, time to go over a styled component, in index.js you’re going to import styled from 'styled-components' and create a StyledH1 variable.

So, you’re using the variable to wrap your {title} that you’re destructuring from the useSiteMetadata hook you made previously.

For this example make it the now iconic Gatsby rebeccapurple.

import React from 'react'
import styled from 'styled-components'
import { useSiteMetadata } from '../hooks/useSiteMetadata'

const StyledH1 = styled.h1`
  color: rebeccapurple;
`

export default () => {
  const { title, description } = useSiteMetadata()
  return (
    <>
      <StyledH1>{title}</StyledH1>
      <p>{description}</p>
    </>
  )
}

That is styled-components on a very basic level, basically create the styling you want for your page elements you’re creating in the JSX.

Layout

Gatsby doesn’t apply any layouts by default but instead uses the way you can compose React components for the layout, meaning it’s up to you how you want to layout what your building with Gatsby. In this guide were going to initially create a basic layout component that you’ll add to as you go along. For more detail on layout components take a look at the Gatsby layout components page.

Ok, so now you’re going to refactor the home page (src/pages/index.js) a little and make some components for your blog layout and header. In the terminal create a components directory and a Header and Layout component:

mkdir src/components
touch src/components/Header.js src/components/Layout.js

Now to move the title and description from src/pages/index.js to the newly created src/components/Header.js component, destructuring props for the siteTitle and siteDescription, you’ll pass these from the Layout component to here. You’re going to add Gatsby Link to this so users can click on the header to go back to the home page.

import { Link } from 'gatsby'
import React from 'react'

export const Header = ({ siteTitle, siteDescription }) => (
  <Link to="/">
    <h1>{siteTitle}</h1>
    <p>{siteDescription}</p>
  </Link>
)

Now to the Layout component, this is going to be a basic wrapper component for now, you’re going to use your site metadata hook for the title and description and pass them to the header component and return the children of the wrapper (Layout).

import React from 'react'
import { useSiteMetadata } from '../hooks/useSiteMetadata'
import { Header } from './Header'

export const Layout = ({ children }) => {
  const { title, description } = useSiteMetadata()
  return (
    <>
      <Header siteTitle={title} siteDescription={description} />
      {children}
    </>
  )
}

Now to add the slightest of styles for some alignment for src/components/Layout.js, create an AppStyles styled component and make it the main wrapper of your Layout.

import React from 'react'
import styled from 'styled-components'
import { useSiteMetadata } from '../hooks/useSiteMetadata'
import { Header } from './Header'

const AppStyles = styled.main`
  width: 800px;
  margin: 0 auto;
`

export const Layout = ({ children }) => {
  const { title, description } = useSiteMetadata()
  return (
    <AppStyles>
      <Header siteTitle={title} siteDescription={description} />
      {children}
    </AppStyles>
  )
}

Ok, now refactor your homepage (src/pages/index.js) with Layout.

import React from 'react'
import { Layout } from '../components/Layout'

export default () => {
  return (
    <>
      <Layout />
    </>
  )
}

Index page posts query

Ok, now you can take a look at getting some of the posts you’ve created add them to the index page of your blog. You’re going to do that by creating a graphql query to list out the posts by title, order by date and add an excerpt of the post.

The query will look something like this:

{
  allMdx {
    nodes {
      id
      excerpt(pruneLength: 250)
      frontmatter {
        title
        date
      }
    }
  }
}

If you put that into the GraphiQL GUI though you’ll notice that the posts aren’t in any given order, so now add a sort to this you’ll also add in a filter for posts that are marked as published or not.

{
  allMdx(
    sort: { fields: [frontmatter___date], order: DESC }
    filter: { frontmatter: { published: { eq: true } } }
  ) {
    nodes {
      id
      excerpt(pruneLength: 250)
      frontmatter {
        title
        date
      }
    }
  }
}

On the homepage (src/pages/index.js) you’re going to use the query we just put together to get a list of published posts in date order; add the following to the index.js file:

import { graphql } from 'gatsby'
import React from 'react'
import { Layout } from '../components/Layout'

export default ({ data }) => {
  return (
    <>
      <Layout>
        {data.allMdx.nodes.map(({ excerpt, frontmatter }) => (
          <>
            <h1>{frontmatter.title}</h1>
            <p>{frontmatter.date}</p>
            <p>{excerpt}</p>
          </>
        ))}
      </Layout>
    </>
  )
}

export const query = graphql`
  query SITE_INDEX_QUERY {
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { published: { eq: true } } }
    ) {
      nodes {
        id
        excerpt(pruneLength: 250)
        frontmatter {
          title
          date
        }
      }
    }
  }
`

Woah! WTF was all that yo!?

Ok, you’re looping through the data passed into the component via the GraphQL query. Gatsby graphql runs the query (SITE_INDEX_QUERY) at runtime and gives us the results as props to your component via the data prop.

Slugs and Paths

Gatsby source filesystem will help with the creation of slugs (URL paths for the posts you’re creating) in Gatsby node you’re going to create the slugs for your posts.

First up you’re going to need to create a gatsby-node.js file:

touch gatsby-node.js

This will create the file path (URL) for each of the blog posts.

You’re going to be using the Gatsby Node API onCreateNode and destructuring out node, actions and getNode for use in creating the file locations and associated value.

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

Now to help visualise some of the data being passed into the components you’re going to use Dump.js for debugging the data. Thanks to Wes Bos for the super handy Dump.js component.

To get the component set up, create a Dump.js file in your src\components folder and copypasta the code from the linked GitHub page.

touch src/components/Dump.js

import React from 'react'

const Dump = props => (
  <div
    style={{
      fontSize: 20,
      border: '1px solid #efefef',
      padding: 10,
      background: 'white',
    }}
  >
    {Object.entries(props).map(([key, val]) => (
      <pre key={key}>
        <strong style={{ color: 'white', background: 'red' }}>
          {key} 💩
        </strong>
        {JSON.stringify(val, '', ' ')}
      </pre>
    ))}
  </div>
)

export default Dump

Now you can use the Dump component anywhere in your project. To demonstrate, use it with the index page data to see the output.

So in the src/pages/index.js you’re going to import the Dump component and pass in the data prop and see what the output looks like.

import { graphql } from 'gatsby'
import React from 'react'
import Dump from '../components/Dump'
import { Layout } from '../components/Layout'

export default ({ data }) => {
  return (
    <>
      <Layout>
        <Dump data={data} />
        {data.allMdx.nodes.map(({ excerpt, frontmatter }) => (
          <>
            <h1>{frontmatter.title}</h1>
            <p>{frontmatter.date}</p>
            <p>{excerpt}</p>
          </>
        ))}
      </Layout>
    </>
  )
}

export const query = graphql`
  query SITE_INDEX_QUERY {
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { published: { eq: true } } }
    ) {
      nodes {
        id
        excerpt(pruneLength: 250)
        frontmatter {
          title
          date
        }
      }
    }
  }
`

Link Paths

Now you’ve created the paths you can link to them with Gatsby Link. First you’ll need to add the slug to your SITE_INDEX_QUERY Then you can add gatsby Link to src/pages/index.js.

You’re also going to create some styled-components for wrapping the list of posts and each individual post as well.

import { graphql, Link } from 'gatsby'
import React from 'react'
import styled from 'styled-components'
import { Layout } from '../components/Layout'

const IndexWrapper = styled.main``

const PostWrapper = styled.div``

export default ({ data }) => {
  return (
    <Layout>
      <IndexWrapper>
        {data.allMdx.nodes.map(
          ({ id, excerpt, frontmatter, fields }) => (
            <PostWrapper key={id}>
              <Link to={fields.slug}>
                <h1>{frontmatter.title}</h1>
                <p>{frontmatter.date}</p>
                <p>{excerpt}</p>
              </Link>
            </PostWrapper>
          )
        )}
      </IndexWrapper>
    </Layout>
  )
}

export const query = graphql`
  query SITE_INDEX_QUERY {
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { published: { eq: true } } }
    ) {
      nodes {
        id
        excerpt(pruneLength: 250)
        frontmatter {
          title
          date
        }
        fields {
          slug
        }
      }
    }
  }
`

Adding a Blog Post Template

Now you have the links pointing to the blog posts you currently have no file associated with the path, so clicking a link will give you a 404 and the built in gatsby 404 will list all the pages available in the project, currently only the / index/homepage.

So, for each one of your blog posts you’re going to use a template that will contain, the information you need to make up your blog post. To start, create a templates directory and template file for that with:

mkdir -p src/templates
touch src/templates/blogPostTemplate.js

For now you’re going to scaffold out a basic template, you’ll be adding data to this shortly:

import React from 'react'

export default () => {
  return (
    <>
      <p>post here</p>
    </>
  )
}

To populate the template you’ll need to use Gatsby node to create your pages.

Gatsby Node has many internal APIs available to us, for this example you’re going to be using the createPages API.

More details on Gatsby createPages API can be found on the Gatsby docs, details here: https://www.gatsbyjs.org/docs/node-apis/#createPages

In your gatsby-node.js file you’re going to add in the following in addition to the onCreateNode export you did earlier.

const { createFilePath } = require(`gatsby-source-filesystem`)
const path = require(`path`)

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions
  const blogPostTemplate = path.resolve(
    'src/templates/blogPostTemplate.js'
  )

  return graphql(`
    {
      allMdx {
        nodes {
          fields {
            slug
          }
          frontmatter {
            title
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      throw result.errors
    }

    const posts = result.data.allMdx.nodes

    // create page for each mdx file
    posts.forEach(post => {
      createPage({
        path: post.fields.slug,
        component: blogPostTemplate,
        context: {
          slug: post.fields.slug,
        },
      })
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

So the part that you need to pay particular attention to right now is the .forEach loop where you’re using the createPage function we destructured from the actions object.

This is where you pass the data needed by blogPostTemplate you defined earlier. You’re going to be adding more to the context for post navigation soon.

// create page for each mdx node
posts.forEach(post => {
  createPage({
    path: post.fields.slug,
    component: blogPostTemplate,
    context: {
      slug: post.fields.slug,
    },
  })
})

Build out Blog Post Template

Now you’re going to take the context information passed to the blogPostTemplate.js to make the blog post page.

This is similar to the index.js homepage whereas there’s GraphQL data used to create the page but in this instance the template uses a variable (also known as a parameter or an identifier) so you can query data specific to that given variable.

Now quickly dig into that with a demo. In the GraphiQL GUI, create a named query and define the variable you’re going to pass in:

query PostBySlug($slug: String!) {
  mdx(fields: { slug: { eq: $slug } }) {
    frontmatter {
      title
      date(formatString: "YYYY MMMM Do")
    }
  }
}

Here you’re defining the variable as slug with the $ denoting that it’s a variable, you also need to define the variable type as (in this case) String! the exclamation after the type means that it has to be a string being passed into the query.

Using mdx you’re going to filter on fields where the slug matches the variable being passed into the query.

Running the query now will show an error as there’s no variable being fed into the query. If you look to the bottom of the query pane you should notice QUERY VARIABLES, click on that to bring up the variables pane.

This is where you can add in one of the post paths you created earlier, if you have your dev server up and running go to one of the posts and take the path and paste it into the quotes "" and try running the query again.

{
  "slug": "/2019/2019-06-20-third-post/"
}

Time to use that data to make the post, you’re going to add body to the query and have that at the bottom of your page file.

Right now you’re going to add create a simple react component that will display the data you have queried.

Destructuring the frontmatter and body from the GraphQL query, you’ll get the Title and the Data from the frontmatter object and wrap the body in the MDXRenderer.

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'
import { Layout } from '../components/Layout'

export default ({ data }) => {
  const { frontmatter, body } = data.mdx
  return (
    <Layout>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.date}</p>
      <MDXRenderer>{body}</MDXRenderer>
    </Layout>
  )
}

export const query = graphql`
  query PostsBySlug($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      body
      frontmatter {
        title
        date(formatString: "YYYY MMMM Do")
      }
    }
  }
`

If you haven’t done so already now would be a good time to restart your dev server.

Now you can click on one of the post links and see your blog post template in all it’s basic glory!

Previous and Next

Coolio! Now you have your basic ass blog where you can list available post and click a link to see the full post in a predefined template. Once you’re in a post you have to navigate back to the home page to pick out a new post to read. In this section you’re going to work on adding in some previous and next navigation.

Remember the .forEach snippet you looked at earlier? That’s where you’re going to pass some additional context to the page by selecting out the previous and next posts.

// create page for each mdx node
posts.forEach((post, index) => {
  const previous =
    index === posts.length - 1 ? null : posts[index + 1]
  const next = index === 0 ? null : posts[index - 1]

  createPage({
    path: post.fields.slug,
    component: blogPostTemplate,
    context: {
      slug: post.fields.slug,
      previous,
      next,
    },
  })
})

So this should now match up with the query you have on the homepage (src/pages/index.js) except you currently have no filter or sort applied here so do that now in gatsby-node.js and apply the same filters as on the homepage query:

const { createFilePath } = require(`gatsby-source-filesystem`)
const path = require(`path`)

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions
  const blogPostTemplate = path.resolve(
    'src/templates/blogPostTemplate.js'
  )

  return graphql(`
    {
      allMdx(
        sort: { fields: [frontmatter___date], order: DESC }
        filter: { frontmatter: { published: { eq: true } } }
      ) {
        nodes {
          fields {
            slug
          }
          frontmatter {
            title
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      throw result.errors
    }

    const posts = result.data.allMdx.nodes

    // create page for each mdx node
    posts.forEach((post, index) => {
      const previous =
        index === posts.length - 1 ? null : posts[index + 1]
      const next = index === 0 ? null : posts[index - 1]

      createPage({
        path: post.fields.slug,
        component: blogPostTemplate,
        context: {
          slug: post.fields.slug,
          previous,
          next,
        },
      })
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

Now you will be able to expose the previous and next objects passed in as context from Gatsby node.

You can destructure previous and next from pageContext and for now pop them into your super handy Dump component to take a look at their contents.

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'
import Dump from '../components/Dump'
import { Layout } from '../components/Layout'

export default ({ data, pageContext }) => {
  const { frontmatter, body } = data.mdx
  const { previous, next } = pageContext
  return (
    <Layout>
      <Dump previous={previous} />
      <Dump next={next} />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.date}</p>
      <MDXRenderer>{body}</MDXRenderer>
    </Layout>
  )
}

export const query = graphql`
  query PostsBySlug($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      body
      frontmatter {
        title
        date(formatString: "YYYY MMMM Do")
      }
    }
  }
`

Add in previous and next navigation, this is a couple of ternary operations, if the variable is empty then return null else render a Gatsby Link component with the page slug and the frontmatter title:

import { graphql, Link } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'
import Dump from '../components/Dump'
import { Layout } from '../components/Layout'

export default ({ data, pageContext }) => {
  const { frontmatter, body } = data.mdx
  const { previous, next } = pageContext
  return (
    <Layout>
      <Dump previous={previous} />
      <Dump next={next} />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.date}</p>
      <MDXRenderer>{body}</MDXRenderer>
      {previous === false ? null : (
        <>
          {previous && (
            <Link to={previous.fields.slug}>
              <p>{previous.frontmatter.title}</p>
            </Link>
          )}
        </>
      )}
      {next === false ? null : (
        <>
          {next && (
            <Link to={next.fields.slug}>
              <p>{next.frontmatter.title}</p>
            </Link>
          )}
        </>
      )}
    </Layout>
  )
}

export const query = graphql`
  query PostsBySlug($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      body
      frontmatter {
        title
        date(formatString: "YYYY MMMM Do")
      }
    }
  }
`

Code Blocks

Now to add some syntax highlighting for adding code blocks to your blog pages. To do that you’re going to add dependencies for prism-react-renderer and react-live and you’ll also create the files you’re going to need to use them:

yarn add prism-react-renderer react-live
touch root-wrapper.js gatsby-ssr.js gatsby-browser.js

You’ll come onto react-live soon for now you’re going to get prism-react-render up and running for syntax highlighting for any code you’re going to add to the blog, but before that you’re going to go over the root wrapper concept.

So, to change the rendering of a page element, such as a heading or a code block you’re going to need to use the MDXProvider, the MDXProvider is a component you can use anywhere higher in the React component tree than the MDX content you want to render.

Gatsby browser and a Gatsby SSR both have wrapRootElement available to them and that is as high up the tree as you can get so you’re going to create the root-wrapper.js file and add out elements you want to override there and import it into both gatsby-browser.js and gatsby-ssr.js so you’re not duplicating code.

Before you go any further I want to add that there is a top quality egghead.io playlist resource for using MDX with Gatsby by Chris Chris Biscardi there’s a ton of useful information in there on MDX in Gatsby.

Ok, first up you’re going to import the root-wrapper.js file into both gatsby-browser.js and gatsby-ssr.js, in both code modules paste the following:

import { wrapRootElement as wrap } from './root-wrapper'

export const wrapRootElement = wrap

Ok, now you can work on the code that will be used in both modules. MDX allows you to control the rendering of page elements in your markdown. MDXProvider is used to give to give React components to override the markdown page elements.

Quick demonstration, in root-wrapper.js add the following:

import { MDXProvider } from '@mdx-js/react'
import React from 'react'

const components = {
  h2: ({ children }) => (
    <h2 style={{ color: 'rebeccapurple' }}>{children}</h2>
  ),
  'p.inlineCode': props => (
    <code style={{ backgroundColor: 'lightgray' }} {...props} />
  ),
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

You’re now overriding any h2 in your rendered markdown along with any code blocks (that’s words wrapped in `backticks`).

Ok, now for the syntax highlighting, create a post with a block of code in it:

mkdir posts/2019-07-01-code-blocks
touch posts/2019-07-01-code-blocks/index.mdx

Paste in some content:

---
title: Code Blocks
date: 2019-07-01
published: true
---

## Yes! Some code!

Here is the `Dump` component!

```jsx
import React from 'react'

const Dump = props => (
  <div
    style={{
      fontSize: 20,
      border: '1px solid #efefef',
      padding: 10,
      background: 'white',
    }}
  >
    {Object.entries(props).map(([key, val]) => (
      <pre key={key}>
        <strong style={{ color: 'white', background: 'red' }}>
          {key} 💩
        </strong>
        {JSON.stringify(val, '', ' ')}
      </pre>
    ))}
  </div>
)

export default Dump
```

Ok, if you go to the prism-react-renderer GitHub page and copy the example code into root-wrapper.js for the pre element.

You’re going to copy the provided code for highlighting to validate it works.

import { MDXProvider } from '@mdx-js/react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import React from 'react'

const components = {
  h2: ({ children }) => (
    <h2 style={{ color: 'rebeccapurple' }}>{children}</h2>
  ),
  'p.inlineCode': props => (
    <code style={{ backgroundColor: 'lightgray' }} {...props} />
  ),
  pre: props => (
    <Highlight
      {...defaultProps}
      code={`
        (function someDemo() {
          var test = "Hello World!";
          console.log(test);
        })();

        return () => <App />;
      `}
      language="jsx"
    >
      {({
        className,
        style,
        tokens,
        getLineProps,
        getTokenProps,
      }) => (
        <pre className={className} style={style}>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  ),
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

Cool, cool! Now you want to replace the pasted in code example with the props of the child component of the pre component, you can do that with props.children.props.children.trim() 🙃.

import { MDXProvider } from '@mdx-js/react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import React from 'react'

const components = {
  pre: props => (
    <Highlight
      {...defaultProps}
      code={props.children.props.children.trim()}
      language="jsx"
    >
      {({
        className,
        style,
        tokens,
        getLineProps,
        getTokenProps,
      }) => (
        <pre className={className} style={style}>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  ),
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

Then to match the language, for now you’re going to add in a matches function to match the language class assigned to the code block.

import { MDXProvider } from '@mdx-js/react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import React from 'react'

const components = {
  h2: ({ children }) => (
    <h2 style={{ color: 'rebeccapurple' }}>{children}</h2>
  ),
  'p.inlineCode': props => (
    <code style={{ backgroundColor: 'lightgray' }} {...props} />
  ),
  pre: props => {
    const className = props.children.props.className || ''
    const matches = className.match(/language-(?<lang>.*)/)
    return (
      <Highlight
        {...defaultProps}
        code={props.children.props.children.trim()}
        language={
          matches && matches.groups && matches.groups.lang
            ? matches.groups.lang
            : ''
        }
      >
        {({
          className,
          style,
          tokens,
          getLineProps,
          getTokenProps,
        }) => (
          <pre className={className} style={style}>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    )
  },
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

prism-react-renderer comes with additional themes over the default theme which is duotoneDark you’re going to use nightOwl in this example, feel free to take a look at the other examples if you like.

Import the theme then use it in the props of the Highlight component.

import { MDXProvider } from '@mdx-js/react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/nightOwl'
import React from 'react'

const components = {
  pre: props => {
    const className = props.children.props.className || ''
    const matches = className.match(/language-(?<lang>.*)/)

    return (
      <Highlight
        {...defaultProps}
        code={props.children.props.children.trim()}
        language={
          matches && matches.groups && matches.groups.lang
            ? matches.groups.lang
            : ''
        }
        theme={theme}
      >
        {({
          className,
          style,
          tokens,
          getLineProps,
          getTokenProps,
        }) => (
          <pre className={className} style={style}>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    )
  },
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

Ok, now time to abstract this out into it’s own component so your root-wrapper.js isn’t so crowded.

Make a Code.js component, move the code from root-wrapper.js into there

touch src/components/Code.js

Remember this?

Cool, cool! Now you want to replace the pasted in code example with the props of the child component of the pre component, you can do that with props.children.props.children.trim() 🙃.

If that ☝ makes no real amount of sense for you (I’ve had to read it many, many times myself), don’t worry, now you’re going to dig into that a bit more for the creation of the code block component.

So, for now in the components you’re adding into the MDXProvider, take a look at the props coming into the pre element.

Comment out the code you added earlier and add in a console.log:

pre: props => {
  console.log('=====================')
  console.log(props)
  console.log('=====================')
  return <pre />
}

Now if you pop open the developer tools of your browser you can see the output.

{children: {…}}
  children:
    $$typeof: Symbol(react.element)
    key: null
    props: {parentName: "pre", className: "language-jsx", originalType: "code", mdxType: "code", children: "import React from 'react'↵↵const Dump = props => (…  </pre>↵    ))}↵  </div>↵)↵↵export default Dump↵"}
    ref: null
    type: ƒ (re....

If you drill into the props of that output you can see the children of those props, if you take a look at the contents of that you will see that it is the code string for your code block, this is what you’re going to be passing into the Code component you’re about to create. Other properties to note here are the className and mdxType.

So, take the code you used earlier for Highlight, everything inside and including the return statement and paste it into the Code.js module you created earlier.

Highlight requires several props:

<Highlight
  {...defaultProps}
  code={codeString}
  language={language}
  theme={theme}
>

The Code module should look something like this now:

import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/nightOwl'
import React from 'react'

const Code = ({ codeString, language }) => {
  return (
    <Highlight
      {...defaultProps}
      code={codeString}
      language={language}
      theme={theme}
    >
      {({
        className,
        style,
        tokens,
        getLineProps,
        getTokenProps,
      }) => (
        <pre className={className} style={style}>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  )
}

export default Code

Back to the root-wrapper where you’re going to pass the props needed to the Code component.

The first check you’re going to do is if the mdxType is code then you can get the additional props you need to pass to your Code component.

You’re going to get defaultProps and the theme from prism-react-renderer so all that’s needed is the code and language.

The codeString you can get from the props, children by destructuring from the props being passed into the pre element. The language can either be the tag assigned to the meta property of the backticks, like js, jsx or equally empty, so you check for that with some JavaScript and also remove the language- prefix, then pass in the elements {...props}:

pre: ({ children: { props } }) => {
  if (props.mdxType === 'code') {
    return (
      <Code
        codeString={props.children.trim()}
        language={
          props.className && props.className.replace('language-', '')
        }
        {...props}
      />
    )
  }
}

Ok, now you’re back to where you were before abstracting out the Highlight component to it’s own module. Add some additional styles with styled-components and replace the pre with a styled Pre and you can also add in some line numbers with a styled span and style that as well.

import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/nightOwl'
import React from 'react'
import styled from 'styled-components'

export const Pre = styled.pre`
  text-align: left;
  margin: 1em 0;
  padding: 0.5em;
  overflow-x: auto;
  border-radius: 3px;

  & .token-line {
    line-height: 1.3em;
    height: 1.3em;
  }
  font-family: 'Courier New', Courier, monospace;
`

export const LineNo = styled.span`
  display: inline-block;
  width: 2em;
  user-select: none;
  opacity: 0.3;
`

const Code = ({ codeString, language, ...props }) => {
  return (
    <Highlight
      {...defaultProps}
      code={codeString}
      language={language}
      theme={theme}
    >
      {({
        className,
        style,
        tokens,
        getLineProps,
        getTokenProps,
      }) => (
        <Pre className={className} style={style}>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              <LineNo>{i + 1}</LineNo>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </Pre>
      )}
    </Highlight>
  )
}

export default Code

Copy code to clipboard

What if you had some way of getting that props code string into the clipboard?

I had a look around and found the majority of the components available for this sort of thing expected an input until this in the Gatsby source code. Which is creating the input for you 👌

So, create a utils directory and the copy-to-clipboard.js file and add in the code from the Gatsby sourcue code.

mkdir src/utils
touch src/utils/copy-to-clipboard.js

// https://github.com/gatsbyjs/gatsby/blob/master/www/src/utils/copy-to-clipboard.js

export const copyToClipboard = str => {
  const clipboard = window.navigator.clipboard
  /*
   * fallback to older browsers (including Safari)
   * if clipboard API not supported
   */
  if (!clipboard || typeof clipboard.writeText !== `function`) {
    const textarea = document.createElement(`textarea`)
    textarea.value = str
    textarea.setAttribute(`readonly`, true)
    textarea.setAttribute(`contenteditable`, true)
    textarea.style.position = `absolute`
    textarea.style.left = `-9999px`
    document.body.appendChild(textarea)
    textarea.select()
    const range = document.createRange()
    const sel = window.getSelection()
    sel.removeAllRanges()
    sel.addRange(range)
    textarea.setSelectionRange(0, textarea.value.length)
    document.execCommand(`copy`)
    document.body.removeChild(textarea)

    return Promise.resolve(true)
  }

  return clipboard.writeText(str)
}

Now you’re going to want a way to trigger copying the code to the clipboard.

Lets create a styled button but first add a position: relative; to the Pre component which will let us position the styled button:

const CopyCode = styled.button`
  position: absolute;
  right: 0.25rem;
  border: 0;
  border-radius: 3px;
  margin: 0.25em;
  opacity: 0.3;
  &:hover {
    opacity: 1;
  }
`

And now you need to use the copyToClipboard function in the onClick of the button:

import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/nightOwl'
import React from 'react'
import styled from 'styled-components'
import { copyToClipboard } from '../utils/copy-to-clipboard'

export const Pre = styled.pre`
  text-align: left;
  margin: 1rem 0;
  padding: 0.5rem;
  overflow-x: auto;
  border-radius: 3px;

  & .token-line {
    line-height: 1.3rem;
    height: 1.3rem;
  }
  font-family: 'Courier New', Courier, monospace;
  position: relative;
`

export const LineNo = styled.span`
  display: inline-block;
  width: 2rem;
  user-select: none;
  opacity: 0.3;
`

const CopyCode = styled.button`
  position: absolute;
  right: 0.25rem;
  border: 0;
  border-radius: 3px;
  margin: 0.25em;
  opacity: 0.3;
  &:hover {
    opacity: 1;
  }
`

const Code = ({ codeString, language }) => {
  const handleClick = () => {
    copyToClipboard(codeString)
  }

  return (
    <Highlight
      {...defaultProps}
      code={codeString}
      language={language}
      theme={theme}
    >
      {({
        className,
        style,
        tokens,
        getLineProps,
        getTokenProps,
      }) => (
        <Pre className={className} style={style}>
          <CopyCode onClick={handleClick}>Copy</CopyCode>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              <LineNo>{i + 1}</LineNo>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </Pre>
      )}
    </Highlight>
  )
}

export default Code

React live

So with React Live you need to add two snippets to your Code.js component.

You’re going to import the components:

import {
  LiveEditor,
  LiveError,
  LivePreview,
  LiveProvider,
} from 'react-live'

Then ypu’re going to check if react-live has been added to the language tag on your mdx file via the props:

if (props['react-live']) {
  return (
    <LiveProvider code={codeString} noInline={true} theme={theme}>
      <LiveEditor />
      <LiveError />
      <LivePreview />
    </LiveProvider>
  )
}

Here’s the full component:

import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/nightOwl'
import React from 'react'
import {
  LiveEditor,
  LiveError,
  LivePreview,
  LiveProvider,
} from 'react-live'
import styled from 'styled-components'
import { copyToClipboard } from '../../utils/copy-to-clipboard'

const Pre = styled.pre`
  position: relative;
  text-align: left;
  margin: 1em 0;
  padding: 0.5em;
  overflow-x: auto;
  border-radius: 3px;

  & .token-lline {
    line-height: 1.3em;
    height: 1.3em;
  }
  font-family: 'Courier New', Courier, monospace;
`

const LineNo = styled.span`
  display: inline-block;
  width: 2em;
  user-select: none;
  opacity: 0.3;
`

const CopyCode = styled.button`
  position: absolute;
  right: 0.25rem;
  border: 0;
  border-radius: 3px;
  margin: 0.25em;
  opacity: 0.3;
  &:hover {
    opacity: 1;
  }
`

export const Code = ({ codeString, language, ...props }) => {
  if (props['react-live']) {
    return (
      <LiveProvider code={codeString} noInline={true} theme={theme}>
        <LiveEditor />
        <LiveError />
        <LivePreview />
      </LiveProvider>
    )
  }

  const handleClick = () => {
    copyToClipboard(codeString)
  }

  return (
    <Highlight
      {...defaultProps}
      code={codeString}
      language={language}
      theme={theme}
    >
      {({
        className,
        style,
        tokens,
        getLineProps,
        getTokenProps,
      }) => (
        <Pre className={className} style={style}>
          <CopyCode onClick={handleClick}>Copy</CopyCode>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              <LineNo>{i + 1}</LineNo>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </Pre>
      )}
    </Highlight>
  )
}

To test this, add react-live next to the language on your Dump component, so you have added to the blog post you made:

```jsx react-live

Now you can edit the code directly, try changing a few things like this:

const Dump = props => (
  <div
    style={{
      fontSize: 20,
      border: '1px solid #efefef',
      padding: 10,
      background: 'white',
    }}
  >
    {Object.entries(props).map(([key, val]) => (
      <pre key={key}>
        <strong style={{ color: 'white', background: 'red' }}>
          {key} 💩
        </strong>
        {JSON.stringify(val, '', ' ')}
      </pre>
    ))}
  </div>
)

render(<Dump props={['One', 'Two', 'Three', 'Four']} />)

Cover Image

Now to add a cover image to go with each post, you’ll need to install a couple of packages to manage images in Gatsby.

install:

yarn add gatsby-transformer-sharp gatsby-plugin-sharp gatsby-remark-images gatsby-image

Now you should config gatsby-config.js to include the newly added packages. Remember to add gatsby-remark-images to gatsby-plugin-mdx as both a gatsbyRemarkPlugins option and as a plugins option.

config:

module.exports = {
  siteMetadata: siteMetadata,
  plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: { path: `${__dirname}/posts`, name: `posts` },
    },
  ],
}

Add image to index query in src/pages.index.js:

cover {
  publicURL
  childImageSharp {
    sizes(
      maxWidth: 2000
      traceSVG: { color: "#639" }
    ) {
      ...GatsbyImageSharpSizes_tracedSVG
    }
  }
}

Fix up the date in the query too:

date(formatString: "YYYY MMMM Do")

This will show the date as full year, full month and the day as a ‘st’, ‘nd’, ‘rd’ and ‘th’. So if today’s date were 1970/01/01 it would read 1970 January 1st.

Add gatsby-image use that in a styled component:

const Image = styled(Img)`
  border-radius: 5px;
`

Add some JavaScript to determine if there’s anything to render:

{
  !!frontmatter.cover ? (
    <Image sizes={frontmatter.cover.childImageSharp.sizes} />
  ) : null
}

Here’s what the full module should look like now:

import { Link, graphql } from 'gatsby'
import Img from 'gatsby-image'
import React from 'react'
import styled from 'styled-components'
import { Layout } from '../components/Layout'

const IndexWrapper = styled.main``

const PostWrapper = styled.div``

const Image = styled(Img)`
  border-radius: 5px;
`

export default ({ data }) => {
  return (
    <Layout>
      <IndexWrapper>
        {/* <Dump data={data}></Dump> */}
        {data.allMdx.nodes.map(
          ({ id, excerpt, frontmatter, fields }) => (
            <PostWrapper key={id}>
              <Link to={fields.slug}>
                {!!frontmatter.cover ? (
                  <Image
                    sizes={frontmatter.cover.childImageSharp.sizes}
                  />
                ) : null}
                <h1>{frontmatter.title}</h1>
                <p>{frontmatter.date}</p>
                <p>{excerpt}</p>
              </Link>
            </PostWrapper>
          )
        )}
      </IndexWrapper>
    </Layout>
  )
}

export const query = graphql`
  query SITE_INDEX_QUERY {
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { published: { eq: true } } }
    ) {
      nodes {
        id
        excerpt(pruneLength: 250)
        frontmatter {
          title
          date(formatString: "YYYY MMMM Do")
          cover {
            publicURL
            childImageSharp {
              sizes(maxWidth: 2000, traceSVG: { color: "#639" }) {
                ...GatsbyImageSharpSizes_tracedSVG
              }
            }
          }
        }
        fields {
          slug
        }
      }
    }
  }
`

Additional resources:

this helped me for my own blog: https://juliangaramendy.dev/custom-open-graph-images-in-gatsby-blog/
and the Gatsby docs: https://www.gatsbyjs.org/docs/working-with-images/

Adding an SEO component to the site

There’s a Gatsby github PR on seo with some great notes from Andrew Welch on SEO and a link to a presentation he did back in 2017.

Crafting Modern SEO with Andrew Welch:

In the following comments of that PR, Gatsby’s LekoArts details his own implementation which I have implemented as a React component, you’re going to be configuring that now in this how-to.

First up, install and configure, gatsby-plugin-react-helmet this is used for server rendering data added with React Helmet.

yarn add gatsby-plugin-react-helmet react-helmet react-seo-component

You’ll need to add the plugin to your gatsby-config.js. If you haven’t done so already now is a good time to also configure the gatsby-plugin-styled-components as well.

Configure SEO Component for Homepage

To visualise the data you’re going to need to get into the SEO component use the Dump component to begin with to validate the data.

The majority of the information needed for src/pages/index.js can be first added to the gatsby-config.js, siteMetadata object then queried with the useSiteMetadata hook. Some of the data added here can then be used in src/templates/blogPostTemplate.js, more on that in the next section.

For now add the following:

const siteMetadata = {
  title: `The Localhost Blog`,
  description: `This is my coding blog where I write about my coding journey.`,
  image: `/default-site-image.jpg`,
  siteUrl: `https://thelocalhost.blog`,
  siteLanguage: `en-GB`,
  siteLocale: `en_gb`,
  twitterUsername: `@spences10`,
  authorName: `Scott Spence`,
}

module.exports = {
  siteMetadata: siteMetadata,
  plugins: [
    ...

You don’t have to abstract out the siteMetadata into it’s own component here, it’s only a suggestion on how to manage it.

The image is going to be the default image for your site, you should create a static folder at the root of the project and add in an image you want to be shown when the homepage of your site is shared on social media.

For siteUrl at this stage it doesn’t necessarily have to be valid, add a dummy url for now and you can change this later.

The siteLanguage is your language of choice for the site, take a look at w3 language tags for more info.

Facebook OpenGraph is the only place the siteLocale is used and it is different from language tags.

Add your twitterUsername and your authorName.

Update the useSiteMetadata hook now to reflect the newly added properties:

import { graphql, useStaticQuery } from 'gatsby'

export const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query SITE_METADATA_QUERY {
        site {
          siteMetadata {
            description
            title
            image
            siteUrl
            siteLanguage
            siteLocale
            twitterUsername
            authorName
          }
        }
      }
    `
  )
  return site.siteMetadata
}

Begin with importing the Dump component in src/pages/index.js then plug in the props as they are detailed in the docs of the react-seo-component.

import Dump from '../components/Dump'
import { useSiteMetadata } from '../hooks/useSiteMetadata'

export default ({ data }) => {
  const {
    description,
    title,
    image,
    siteUrl,
    siteLanguage,
    siteLocale,
    twitterUsername,
  } = useSiteMetadata()
  return (
    <Layout>
      <Dump
        title={title}
        description={description}
        image={`${siteUrl}${image}`}
        pathname={siteUrl}
        siteLanguage={siteLanguage}
        siteLocale={siteLocale}
        twitterUsername={twitterUsername}
      />
      <IndexWrapper>
        {data.allMdx.nodes.map(
          ...

Check that all the props are displaying valid values then you can swap out the Dump component with the SEO component.

The complete src/pages/index.js should look like this now:

import { graphql, Link } from 'gatsby'
import Img from 'gatsby-image'
import React from 'react'
import SEO from 'react-seo-component'
import styled from 'styled-components'
import { Layout } from '../components/Layout'
import { useSiteMetadata } from '../hooks/useSiteMetadata'

const IndexWrapper = styled.main``

const PostWrapper = styled.div``

const Image = styled(Img)`
  border-radius: 5px;
`

export default ({ data }) => {
  const {
    description,
    title,
    image,
    siteUrl,
    siteLanguage,
    siteLocale,
    twitterUsername,
  } = useSiteMetadata()
  return (
    <Layout>
      <SEO
        title={title}
        description={description || `nothin’`}
        image={`${siteUrl}${image}`}
        pathname={siteUrl}
        siteLanguage={siteLanguage}
        siteLocale={siteLocale}
        twitterUsername={twitterUsername}
      />
      <IndexWrapper>
        {/* <Dump data={data}></Dump> */}
        {data.allMdx.nodes.map(
          ({ id, excerpt, frontmatter, fields }) => (
            <PostWrapper key={id}>
              <Link to={fields.slug}>
                {!!frontmatter.cover ? (
                  <Image
                    sizes={frontmatter.cover.childImageSharp.sizes}
                  />
                ) : null}
                <h1>{frontmatter.title}</h1>
                <p>{frontmatter.date}</p>
                <p>{excerpt}</p>
              </Link>
            </PostWrapper>
          )
        )}
      </IndexWrapper>
    </Layout>
  )
}

export const query = graphql`
  query SITE_INDEX_QUERY {
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { published: { eq: true } } }
    ) {
      nodes {
        id
        excerpt(pruneLength: 250)
        frontmatter {
          title
          date(formatString: "YYYY MMMM Do")
          cover {
            publicURL
            childImageSharp {
              sizes(maxWidth: 2000, traceSVG: { color: "#639" }) {
                ...GatsbyImageSharpSizes_tracedSVG
              }
            }
          }
        }
        fields {
          slug
        }
      }
    }
  }
`

Configure SEO Component for Blog Posts

This will be the same approach as with the homepage, import the Dump component and validate the props before swapping out the Dump component with the SEO component.

import Dump from '../components/Dump'
import { useSiteMetadata } from '../hooks/useSiteMetadata'

export default ({ data, pageContext }) => {
  const {
    image,
    siteUrl,
    siteLanguage,
    siteLocale,
    twitterUsername,
    authorName,
  } = useSiteMetadata()
  const { frontmatter, body, fields, excerpt } = data.mdx
  const { title, date, cover } = frontmatter
  const { previous, next } = pageContext
  return (
    <Layout>
      <Dump
        title={title}
        description={excerpt}
        image={
          cover === null
            ? `${siteUrl}${image}`
            : `${siteUrl}${cover.publicURL}`
        }
        pathname={`${siteUrl}${fields.slug}`}
        siteLanguage={siteLanguage}
        siteLocale={siteLocale}
        twitterUsername={twitterUsername}
        author={authorName}
        article={true}
        publishedDate={date}
        modifiedDate={new Date(Date.now()).toISOString()}
      />
      <h1>{frontmatter.title}</h1>
      ...

Add fields.slug, excerpt and cover.publicURL to the PostsBySlug query and destructure them from data.mdx and frontmatter respectively.

For the image you’ll need to do some logic as to weather the cover exists and default to the default site image if it doesn’t.

The complete src/templates/blogPostTemplate.js should look like this now:

import { graphql, Link } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'
import SEO from 'react-seo-component'
import { Layout } from '../components/Layout'
import { useSiteMetadata } from '../hooks/useSiteMetadata'

export default ({ data, pageContext }) => {
  const {
    image,
    siteUrl,
    siteLanguage,
    siteLocale,
    twitterUsername,
    authorName,
  } = useSiteMetadata()
  const { frontmatter, body, fields, excerpt } = data.mdx
  const { title, date, cover } = frontmatter
  const { previous, next } = pageContext
  return (
    <Layout>
      <SEO
        title={title}
        description={excerpt}
        image={
          cover === null
            ? `${siteUrl}${image}`
            : `${siteUrl}${cover.publicURL}`
        }
        pathname={`${siteUrl}${fields.slug}`}
        siteLanguage={siteLanguage}
        siteLocale={siteLocale}
        twitterUsername={twitterUsername}
        author={authorName}
        article={true}
        publishedDate={date}
        modifiedDate={new Date(Date.now()).toISOString()}
      />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.date}</p>
      <MDXRenderer>{body}</MDXRenderer>
      {previous === false ? null : (
        <>
          {previous && (
            <Link to={previous.fields.slug}>
              <p>{previous.frontmatter.title}</p>
            </Link>
          )}
        </>
      )}
      {next === false ? null : (
        <>
          {next && (
            <Link to={next.fields.slug}>
              <p>{next.frontmatter.title}</p>
            </Link>
          )}
        </>
      )}
    </Layout>
  )
}

export const query = graphql`
  query PostBySlug($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        date(formatString: "YYYY MMMM Do")
        cover {
          publicURL
        }
      }
      body
      excerpt
      fields {
        slug
      }
    }
  }
`

Build Site and Validate Meta Tags

Add in the build script to package.json and also a script for serving the built site locally.

"scripts": {
  "dev": "gatsby develop -p 9988 -o",
  "build": "gatsby build",
  "serve": "gatsby serve -p 9500 -o"
},

Now it’s time to run:

yarn build && yarn serve

This will build the site and open a browser tab so you can see the site as it will appear when it is on the internet. Validate meta tags have been added to the build by selecting “View page source” (Crtl+u in Windows and Linux) on the page and do a Ctrl+f to find them.

Adding the Project to GitHub

Add your code to GitHub by either selecting the plus (+) icon next to your avatar on GitHub or by going to directly to https://github.com/new

Name your repository and click create repository, then you will be given the instructions to link your local code to the repository you created via the command line.

Depending on how you authenticate with GitHub will depend on what the command looks like.

Some good resources for authenticating with GitHub via SSH are Kent Dodds Egghead.io video and also a how-to on CheatSheets.xyz.

Deploy to Netlify

To deploy your site to Netlify, if you haven’t done so already you’ll need to add the GitHub integration to your GitHub profile. If you got to app.netlify.com the wizard will walk you through the process.

From here you can add your built site’s public folder, drag ‘n drop style directly to the Netlify global CDNs.

You, however are going to load your site via the Netlify CLI! In your terminal, if you haven’t already got the CLI installed, run:

yarn global add netlify-cli

Then once the CLI is installed:

# authenticate via the CLI
netlify login
# initialise the site
netlify init

Enter the details for your team, the site name is optional, the build command will be yarn build and directory to deploy is public.

You will be prompted to commit the changes and push them to GitHub (with git push), once you have done that your site will be published and ready for all to see!

Validate Metadata with Heymeta

Last up is validating the metadata for the OpenGraph fields, to do that you’ll need to make sure that the siteUrl reflecting what you have in your Netlify dashboard.

If you needed to change the url you’ll need to commit and push the changes to GitHub again.

Once your site is built with a valid url you can then test the homepage and a blog page for the correct meta tags with heymeta.com.

OpenGraph checking tools:

Additional resources:

The Essential Meta Tags for Social Media

Thanks for reading 🙏

That’s all folks! If there is anything I have missed, or if there is a better way to do something then please let me know.

Follow me on Twitter or Ask Me Anything on GitHub.

JAMstack_conf London 2019

Fri, 19 Jul 2019 00:00:00 GMT

I’ve been wanting to go to a JAMstack conf since the first one was scheduled for October 2018. This year when it was announced there would be one in London I was super excited to get the opportunity to go.

The conference was across two days with the first consisting of workshops, lightning talks and welcome drinks. The second was the keynote and conference talks either side of a lightning round with some exciting announcements.

Tuesday - 2019-07-09

First up was the workshop events where I was attending a workshop on schema stitching with GraphQL using GraphCMS and Moltin

Workshop

Jesse was a great at going through the basics of the headless CMS and why you should be using one. The workshop consisted of us defining our CMS content model with pen and paper before creating them in the GraphCMS UI for use with the Moltin eComerce API

Technical difficulties

There were issues on both the GraphCMS and the Moltin side, mainly around the UI for Moltin. We all managed to breeze through these keeping a good pace on the content.

GraphQL Schema Stitching

Once we all got through the initial setup on our projects it was quite satisfying to get to two schemas in one query. I still have a bit of work to do on my project as we all ran out of time towards the end. Jesse covered the main goal of the workshop which was to stitch the two schemas together. The additional UI work I can pick up at a later date.

Lightning Talks

After the workshops it was time for the lightening talks.

@jamiebradley234 did a talk on the booming tech scene in Middlesbrough.

@danfascia did a great talk on how healthcare tech is benefiting from JAMstack methodologies.

Wednesday - 2019-07-10

Talks

First up we had some apologies from Phill Hawksworth on behalf of Chris Coyer as Chris couldn’t make it. We sent him a get well soon message.

State of the JAMstack Nation - Sarah Drasner

Sarah gave a demo of how quickly you could set up a JAMstack site, using Vue and Nuxt

Netlify Analytics - Matt Biilmann

Massive announcement for Netlify analytics I signed up there and then for my blog. Obviously Netlify is used to build Netlify so Matt showed off the continuous deployment for Netlify whilst putting the feature live.

Transforming the Json - GROQ (& Sanity CMS) - Knut Melvær

Knut showing off the advantages of using GROQ for querying your data.

Also it’s now open source

Stackbit - Ben Edwards

Ben announcing that Stackbit was coming out of beta. Stackbit is a great all in one tool for making JAMstack sites with CMS integration.

Code Sandbox. - Ives van Horne

Ives (Flip) went into how he made codesandbox.io whils being a college student.

If you want something build cheaply, ask a student to build it for you was the take home here for me.

Why & How Smashing Magazine moved to JAMstack - Vitaly Friedman

Brilliant talks from Vitaly on the transition of Smashing Mag from monolith over to the JAMstack. Also great detail on the redesign.

WeWorkLabs moves to JAMstack - Ramin Bozorgzadeh

JAMstack helps me sleep at night!

CSS Houdini Today - Una Kravets

Una was super jazzed about Houdini, you could do some pretty neat css tricks with it.

https://extra-css.netlify.com/

Serverless functions - Simona Cotin

Simona detailed key usecases for serveless functions.

Performance optimizing and Webpack bashing - Jake Archibald and Surma

Surma and Jake went through how to optimise a modern day minesweeper game for mobile.

“Should I worry about performance?”

Answer: YES!

Hosted web fonts slow things down, because the browser has to load from multiple servers. Optimize further by only including the characters you need. Use css, assets, fonts directly in the HTML to eliminate needing additional requests.

Here’s the repo: https://github.com/GoogleChromeLabs/proxx

Hot!

Being in the UK we had the British weather to content with and the venue although fitted with A/C units in the speaker hall the venue outside of that was hot and sweaty! I spent the majority of my time between talks situated directly in front of the A/C units.

That’s it folks!

This was a great event I met a lot of new people and several Twitter friends. I can’t wait until the next one.

Convert the Gatsby default starter blog to use MDX

Tue, 09 Apr 2019 00:00:00 GMT

In this guide we’re going to cover converting the Gatsby default blog starter to use MDX.

All the cool kids are using Gatsby and MDX in their blogs these days. If you already have a blog that uses Gatsby but want to move onto the new hotness then this is the guide for you.

Versions:

This guide is being used with the following dependency versions.

gatsby: 2.3.5
react: 16.8.6
react-dom: 16.8.6
gatsby-mdx: 0.4.5
@mdx-js/mdx: 0.20.3
@mdx-js/tag: 0.20.3

You can also check out the example code.

We’re going to need some links, which are:

Import to CodeSandbox

For this example I’m going to be using the Gatsby starter blog and importing it into CodeSandbox, looking at the docs it says you can do this with the CodeSandbox import wizard linked, paste the link in there and CodeSandbox will open the representation of the code on GitHub.

Now we can go about moving from using Gatsby transformer remark over to MDX.

Let’s take a look at what we’ll be changing for this example. But first we’re going to need to import some dependencies to get MDX running in out Gatsby project.

With the add dependency button in CodeSandbox add the following dependencies:

gatsby-mdx
@mdx-js/mdx
@mdx-js/tag

We will also need to add dependencies for styled-components so may as well add them now as well:

gatsby-plugin-styled-components
styled-components
babel-plugin-styled-components

Files to change:

gatsby-node.js
gatsby-config.js
index.js
blog-post.js

`gatsby-node.js`

First up we’re going to need to change gatsby-node.js this is where all the pages and data nodes are generated.

Change all markdown remark occurrences with MDX, that’s the initial GraphQL query in create pages, then again in the result.

Then change the node.internal.type in onCreateNode from MarkdownRemark to Mdx.

`gatsby-config.js`

Here we’re going to replace gatsby-transformer-remark with gatsby-mdx

`index.js`

Here we’re going to alter the posts variable to take the Mdx edges.

The Mdx edges are taken from the page query, which is also altered to use allMdx in place of allMarkdownRemark.

`blog-post.js`

Now last on the list to get MDX working is the blog post template, we’re going to need to import MDXRenderer from gatsby-mdx we’re going to replace dangerouslySetInnerHTML with this shortly.

Here’s where we use it, we’ll come onto post.code.body.

Again in the query we’re replacing markdownRemark with mdx and this time also doing away with html from the query and adding in code for body which we’re using in our render method.

Now we’re using MDX!

So now we can create a .mdx post, let’s do that.

Import the styled-components dependencies:

gatsby-plugin-styled-components
styled-components
babel-plugin-styled-components

Then configure them in gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    ...
    },
  },
  plugins: [
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
  ...

Now we can use styled-components, in src/components make a new component, I have called my one butt.js call yours what you like.

We’re going to use this component in a .mdx document, first the component:

import styled from 'styled-components'

export const Butt = styled.button`
  background-color: red;
  height: 40px;
  width: 80px;
`

Spicy, right! 🌶

Now we can include this component in a .mdx document so let’s go ahead and create that, in content/blog make a new directory, I’m giving mine the imaginative name first-mdx-post, in there create a index.mdx file and use the frontmatter from one of the other posts as an example of what to use:

---
title: My First MDX Post!
date: '2019-04-07T23:46:37.121Z'
---

# make a site they said, it'll be fun they said

more content yo!

This will render a h1 and a p and we should see it render in our CodeSandbox preview.

Now we can go ahead and import our beautifully crafted button:

---
title: My First MDX Post!
date: '2019-04-07T23:46:37.121Z'
---

import { Butt } from '../../../src/components/button'

# make a site they said, it'll be fun they said

more content yo!

<Butt>yoyoyo</Butt>

Wrap up!

So, that’s it, we’ve gone and converted the Gatsby starter blog from using Markdown Remark over to using MDX.

I hope you have found it helpful.

Thanks for reading 🙏

Please take a look at my other content if you enjoyed this.

Follow me on Twitter or Ask Me Anything on GitHub.

Update Windows Subsystem Linux Ubuntu from 18.04 to 18.10

Mon, 01 Apr 2019 00:00:00 GMT

Already use WSL with Ubuntu? Want an Upgrade??

This is a guide that will cover upgrading Windows Subsystem Linux (WSL) from the current LTS version to the latest ‘normal’ version 18.10.

I found this post on dev.to this weekend detailing going from version 18.04 to 18.10 on Ubuntu for Windows Subsystem Linux. You will know form earlier posts from me that trying to go the update route on WSL is time consuming and you’re basically better off starting again.

I tried it myself and got in a bit of trouble, you can see by checking out the comments on David’s post

So from uninstalling my version of Ubuntu I went ahead and tried again, if you have read the comment’s on David’s post you’ll see that I came up against an issue with being unable to reach the ‘snap store’. I don’t know what that is or means but basically it stopped my upgrade and I was left not knowing if I was fully upgraded or not.

Thankfully someone else had come across the same problem and asked on Stack Overflow, basically you need to uninstall Lxd with:

sudo dpkg --force depends -P lxd; sudo dpkg --force depends -P lxd-client

Now we can go about updating Ubuntu with the do-release-upgrade command, if you do that right away you may see something along the lines of:

This is setting the updater to to only check for Long Term Support versions, we’re going to change that now by changing the prompt from lts to normal, in bash use:

sudo nano /etc/update-manager/release-upgrades

You should see the default release upgrader settings:

You’ll need to set it to normal:

Now we can go and do the release upgrade command:

sudo do-release-upgrade

Upgrade time!

Now I was quite surprised that it didn’t really take that long at all for the upgrade to complete, you may get asked questions about modified packages and weather you want to accept the maintainers or keep your version, I will always go with the maintainers version of any packages. You can do what you like with yours, I’m not your mum 😜

That’s it

You should now have your Ubuntu WSL version at 18.10 👏

If, like me, you uninstalled Ubuntu and tried to reinstall it and are getting errors like this:

Then what worked for me was to restart the LxssManager via a PowerShell console with admin rights.

Get-Service LxssManager | Restart-Service

Wrap up!

We went ahead an upgraded our WSL Ubuntu version from 18.04 to 18.10, we removed Lxd which isn’t needed on WSL but is part of the Microsoft Store version 🤷‍♂️

Then we changed the default behaviour of the release upgrader from lts to normal.

Once we have done those two parts we can then go ahead and upgrade Ubuntu with `do-release-upgrade.

Thanks for reading 🙏

Please take a look at my other content if you enjoyed this.

Follow me on Twitter or Ask Me Anything on GitHub.

Creating a Custom React Hook for Gatsby Site Metadata

Sun, 24 Mar 2019 00:00:00 GMT

Hooks ahoy!

Ok, let’s get it on with the new hotness in Reactland, React Hooks! This is a guide covering using the Gatsby custom React hook for StaticQuery which it is now replacing with useStaticQuery.

If you haven’t used Gatsby before StaticQuery is just that, a way to query data in a Gatsby component (i.e. a react component) or a Gatsby page where the query input doesn’t change. This is a great use case for data that doesn’t change a great deal, like your site metadata.

tl;dr

Here’s me trying to even with codesandbox.io whilst I convert some of the Gatsby default starter that’s on codesandbox.io to use the useSiteMetadata custom hook.

Using codesandbox.io we take a look at implementing a custom react hook for getting site metadata in Gatsby.

Here’s a video:

The StaticQuery component uses the render props pattern, which means it takes in a function and returns/renders based off of that.

I have detailed this pattern before in a post about using the react context api, it’s a component that you pass a function to, to render a component.

Think of it like this:

<Component>
 {() => ()}
</Component>

The first parenthesis is the arguments/variables and the second is what gets rendered, so in the case of the Gatsby StaticQuery you pass a query with a graphql tag and then the data that comes back from that is what is used in the render of that component. So you have your wrapping component that returns and renders a child component, like this.

<WrappingComponent>
  {args => <ComponentToRender propsForComponent={args.propNeeded} />}
</WrappingComponent>

Here’s a cut down version of the StaticQuery component being used in the Gatsby default starter on codesandbox.io

I’ve taken out the styling to make it a bit shorter:

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div>
          <main>{children}</main>
          <footer />
        </div>
      </>
    )}
  />
)

export default Layout

The StaticQuery takes in two props, the query and what you want to render with render, this is where you can destructure the data you need out of the data prop returned from the query.

I was never really a fan of doing it that way so I adopted a similar pattern but with the component contained on it’s own and then added to the StaticQuery separately. Like this:

const Layout = ({ children, data }) => (
  <>
    <Header siteTitle={data.site.siteMetadata.title} />
    <div>
      <main>{children}</main>
      <footer />
    </div>
  </>
)

export default props => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => <Layout data={data} {...props} />}
  />
)

I found this more acceptable because you didn’t have to have all the code bunched into the StaticQuery component.

That all make sense?

Good, now forget about all of that! It’s time to use the new useStaticQuery hotness in Gatsby. 💪

Versions:

This guide is being used with the following dependency versions.

gatsby: 2.1.31
react: 16.8.4
react-dom: 16.8.4

You can also check out the example code.

The Gatsby documentation covers the use of it and also how to make your own custom react hook to use useStaticQuery, here’s the one I use in the video.

useSiteMetadata.js

import { graphql, useStaticQuery } from 'gatsby'

const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query SITE_METADATA_QUERY {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  )
  return site.siteMetadata
}

export default useSiteMetadata

This can now be implemented in the rest of the code as a function call:

const { title, description, author } = useSiteMetadata()

Let’s implement it!

In the layout component import the useSiteMetadata hook then we can go about removing the StaticQuery component and destructuring title from the useSiteMetadata hook.

It should look something like this, I have taken the styling out for brevity:

import React from 'react'
import PropTypes from 'prop-types'
import useSiteMetadata from './useSiteMetadata'

import Header from './header'
import './layout.css'

const Layout = ({ children }) => {
  const { title } = useSiteMetadata()
  return (
    <>
      <Header siteTitle={title} />
      <div>
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )
}
Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Here’s the comparison:

On now to the seo component, same again, remove StaticQuery and use useSiteMetadata in it’s place.

Here’s the comparison:

If you want to check out the code the example is available here: example code

Wrap up!

That’s it! Wh have gone from using the awesome StaticQuery render props pattern used in Gatsby over to the even more awesome useStaticQuery React hooks, hook.

Thanks for reading 🙏

Please take a look at my other content if you enjoyed this.

Follow me on Twitter or Ask Me Anything on GitHub.

Testing MDX

Sat, 09 Mar 2019 00:00:00 GMT

Moving to the new hotness!!

I’ve now moved this blog over to Gatsby MDX. You can see all the changes on my repo here.

From the pull I’m hoping you can glean that the majority of the work is in replacing gatsby-transformer-remark with gatsby-mdx, there are some additional files added, that pretty nifty Code.js component from LekoArts minimal starter blog, and the wrap-root-element.js module for (I think) the MDX rendering of the code.

Files changed:

gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
src/pages/index.js
src/templates/blogPostTemplate.js

Files added:

src/components/Code.js
wrap-root-element.js

Shout out to LekoArts, HagNerd and Chris Biscardi for their example repositories:

Things I still haven’t figured out

Code blocks

Code blocks are pretty, this is a js block with the prism-react-renderer/themes/nightOwl theme:

const onClick = () => {
  alert('clicked')
}
render(<button onClick={onClick}>Click Me!</button>)

And here is a js react-live block, try editing the code:

const onClick = () => {
  alert('clicked')
}
render(<button onClick={onClick}>Click Me!</button>)

Image for prosperity 👍

Mdx is a bit slow

Sometimes renders don’t update

Not working yet

Autolink headers
Embed tweets
Embed videos

Setting up multiple Git providers

Sun, 27 Jan 2019 00:00:00 GMT

Over the past couple of weeks now I have set up several development machines at work and have had to also use two git accounts, GitHib and Bitbucket.

To connect to both I use SSH as a preference, I have been using SSH in place of HTTPS for quite some time now, if you want to connect repeatedly without having to provide user name and password details then SSH is a good option.

If you are unfamiliar with using SSH to authenticate with git then take a look at my cheat sheets repository (ss10.me/cheat-sheets) there are several sections covering SSH, notably:

How to Authenticate with GitHub Using SSH
Use multiple SSH Keys (what this post is covering)
Re Use SSH Keys from one Machine to Another

I have come across this set-up a few times now and implemented it for myself.

You’ll need to create a config file in the .ssh folder in your home directory (Windows, Ubuntu or both if you use a WSL set-up) check with:

ll ~/.ssh/

This will list out the contents of the folder, if you get No such file or directory then you don’t have SSH configured.

Take a look at the How to Authenticate with GitHub Using SSH section on the cheat-sheets repo for details on that.

For this example let’s presume that we have already created our SSH keys for Bitbucket and GitHub and authenticated with both Bitbucket and GitHub.

Next create a config file:

nano ~/.ssh/config

This will open a new file with nano that we can add the following to:

# Bitbucket (default)
  Host bb
  HostName bitbucket.org
  User git
  IdentityFile ~/.ssh/id_default

# Github (secondary)
  Host gh
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_secondary

Just remember that the IdentityFile needs to match what you have called your SSH keys.

Check current permissions with stat:

# stat -c "%a %n" ~/.ssh/*
644 /home/scott/.ssh/config
700 /home/scott/.ssh/id_default
700 /home/scott/.ssh/id_default.pub
700 /home/scott/.ssh/id_secondary
700 /home/scott/.ssh/id_secondary.pub

Change the config file permissions as needed:

chmod 644 ~/.ssh/config

Multiple users

Ok now we should be able to push and pull to the respective GitHub and Bitbucket repositories, but unless you have the same username and email address for GitHub and Bitbucket then we’re also going to need to specify specific user details for the repositories we’re accessing, otherwise the details specified in the ~/.gitconfig are what will be used with commits.

In my case for work my default user account is Bitbucket so that is what I have specified in the ~/.gitconfig, however for the GitHub repos I work on I’ll need to specify my GitHub credentials on a repo by repo basis.

Historically I have gone into the individual repo and manually set the config details.

# from the root of the repo you want to specify the credentials
git config user.name 'Your Name'
git config user.email 'your@email.com'

I have since found an ok solution here: https://stackoverflow.com/a/43654115/1138354

Example:

Global config ~/.gitconfig


[user]
  name = play.user
  email = play.user@gmail.com

[includeIf "gitdir:~/work/"]
  path = ~/work/.gitconfig

Work specific config ~/work/.gitconfig

[user]
  name = work.user
  email = work.user@megacorp.ltd

Windows Web-dev bootstrap

Mon, 24 Dec 2018 00:00:00 GMT

From scratch to Create React App on Windows

An opinionated guide on setting up a web development environment on Windows 10

I have been a professional web developer for 10 months now and used both MacOs and Windows in that time. My preferred OS to use is Windows, for no other reason than I prefer the keyboard layout.

With Windows/Linux I like to have my Ctrl key as the key to use for copy paste operations and I can use my left pinky instead of my thumb. Anyway, let’s leave the weak reasoning behind as that’s not the purpose of this post!

If you don’t have a Windows machine then this post probably isn’t for you, if this is different from what you use, it doesn’t make it bad.

Let’s see what Ken has to say about it:

https://twitter.com/ken_wheeler/status/1075556283795824640

This is the refresh on my guide from the start of 2018 on setting up a web development environment on a Windows machine.

This guide will cover installing Ubuntu but you can use some of the other flavours of Linux available in the Windows store, the Debian setup will be very similar to the Ubuntu one.

Objective of this post

To go from a fresh instance of Windows 10 to something you can develop web apps with.

These instructions are for the Windows 10 Fall Creators Update and later.

What we’re going to cover:

Install WSL
Enable WSL on your machine
update, upgrade and autoremove
Install Node (with n)
Install Visual Studio Code
Install Windows Git
Install a Terminal (Hyper)
Install Fish Shell!
- Install Oh My Fish
  - Fish themes with OMF
Configure
Git config
Create React App
Use SSH with GitHub
- WSL SSH Config
- Windows Git Bash SSH Config
Change WSL version
Wrap up!

Install WSL

You can install Ubuntu from the Microsoft store which will be the first half of the install the second will be when ypu open the app.

Enable WSL on your machine

The official guidance covers it very well, but I’m going to add in the shortcut keys here if you don’t want to be clicking around with the mouse.

Before that however, if you haven’t selected PowerShell as your default Command Prompt you can select it from the Taskbar settings page located in the Personalisation section in the Settings, I suggest doing that now:

Whilst we’re at it we should also enable hidden folders and add files extensions for known file types in Windows File Explorer.

Open the Windows File Explorer with Windows key+e then select View from the ribbon. Then click the Options button on the far right, this will bring up the Folder Options dialog, from here we want to select the View tab and select the Radio button for Hidden files and folders with the ‘Show hidden files, folders and drives’, uncheck the option for ‘Hide extensions for known file types’ too. Click apply and Ok.

The reason we’re doing this is so that we can see the .git folder in project structures it’s also needed for files like .env files which are used for environment configuration.

Use Windows key+x, this is the same as right-clicking the windows icon on the desktop, this will open the quick link menu. From here you need to select the Windows PowerShell (Admin) option, you can do this by pressing a on the keyboard. So Windows key+x then a, will open the user account control (Admin) prompt, presuming you have admin rights on your machine you’ll need to click yes to continue.

Copy the code here and paste it into the PowerShell window, Ctrl+v will work in PowerShell, press enter to execute the command.

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

You will be prompted to restart your machine after this, which you should do.

Check the link for a complete list of windows keyboard shortcuts.

After restarting you can open the Ubuntu program from the start menu and the second install (of WSL on your system) should happen. Wait for this to complete then you will be prompted to create a user and a password for the account. You will need to remember the password created for the user as you will be prompted for it to use sudo privileges.

update, upgrade and autoremove

At the time of writing this, the version I have linked of Ubuntu is 18.04.1

The linked app will install the latest stable Ubuntu release on Windows.

You can check what version of Ubuntu you have installed with:

lsb_release -a

If you want to use a specific LTS version of Ubuntu you can get them from the Windows Store, here:

Now we’re going to go ahead an update and upgrade all the things, the three commands here will update and upgrade all the pre-installed software that comes with the Ubuntu install.

The code below is three commands joined together with &&. The -y flag is to auto accept the changes that are going to be performed with the upgrades. Auto remove will remove unused packages left behind from upgrades.

Copy the below commands into your Ubuntu terminal, and run the command:

sudo apt update && sudo apt -y upgrade && sudo apt autoremove

To go from 16.04 to 18.04 try do-release-upgrade in the terminal. be warned this takes considerably longer than just deleting the current install of Ubuntu and starting again.

Now that the base has been installed and updated we need to install the build-essential package in order to compile and build other packages, the following packages we’re going to install will all need it.

sudo apt install -y build-essential

From here on in I’d suggest using two bash windows, one with sudo enabled the other with standard permissions.

i.e. open a terminal and don’t enter sudo in there, instead use the terminal that has been granted that permission.

The reason for this is that I have found if you install node as sudo then each time you want to run an npm install command you will need to grant sudo permissions and it can all get a bit tedious. And you really shouldn’t be installing npm packages with sudo permissions.

Install Node (with `n`)

Let’s get our run-time on! If you use Node.js you will eventually have situations where you need to be able to switch Node versions, for this you may have heard to nvm (Node Version Manager) which by the way you can still use in WSL.

The reason for me opting for n over nvm is that in the past I experienced slow bash startup times whilst using nvm. Take a look at this WSL GitHub issue detailing it and the specific comment for the pros of using n.

Ok let’s install n, with n-install, the command doesn’t start with sudo so use it in the bash window you have with no sudo privileges.🧐

curl -L https://git.io/n-install | bash

This will install the latest version of Node for us, follow the prompt on the terminal screen to reload bash:

# mine looks like this
. /home/scott/.bashrc

Now check the versions of Node and npm we have installed with node -v && npm -v in the terminal.

Install Visual Studio Code

Install VSCode? What? This post is to set up WSL? Ok, so we’re going to presume that this is going from nothing to being able to web dev, so we’re going to need a text editor, and there’s nothing out there at the moment that comes close to VSCode, if you already have a text editor installed then skip to the next part.

Install the Windows version of VSCode from the Download section once installed we can enable WSL in the settings, the quickest way to do this is to open the integrated terminal in VSCode with the shortcut keys Ctrl+’ 👈 that’s and apostrophe. You will be prompted to select your default terminal, select WSL Bash.

Install Windows Git

There’s a bit of stumbling block getting Git support for VSCode, it’s well documented in the various issues mentioned in the linked issue.

There are workarounds as well with things like WSLGit which has it’s own set of issues, this all stems from users (me included) not wanting to have to install another binary for Git.

I have tried several variants when it comes to using Git with VSCode and the path of least resistance was biting the bullet and installing that additional binary, there’s an overhead with having to maintain and configure SSH keys for both Windows and WSL Git but it’s a one time setup.

Until the VSCode team incorporate WSLGit into VSCode I think this is the best option.

Install from git-scm.com the link will start downloading the install binary you can then open it and go through the install, you can keep clicking next through the install, I have selected a few options that I would like enabled.

For now, that is all we need to do, when it comes to authenticating with with GitHub using SSH we will use the Git Bash command line to configure the Windows side of things.

Install a Terminal (Hyper)

Now we have bash on Windows it’s time to install a nice Terminal app, because, let’s face it, the standard one is a bit basic.

Enter Hyper an electron based terminal app that is super themeable and configurable.

Download and install hyper for Windows, this will be the bare-bones version, it’ll look something like this:

You may notice that, this is the Windows Command prompt too, don’t worry, we’re going to configure that right now.

Open up the .hyper.js file located in the root of your user folder, or from Hyper itself use the shortcut key Ctrl+, to pop open the settings.

If the settings file (.hyper.js) opens in Notepad then you can set the default to be VSCode. In File Explorer (Use Windows key+e to open it) navigate to the file, it’ll be in your User folder, right-click the file and select Properties, then Change for ‘Opens with:’ and select VSCode from the list.

Now we can set WSL as the shell path in Hyper, open the .hyper.js settings file and search (Ctrl+f) for bash, we want to add the path to the WSL shell into the shell property defined in the file.

// amend shell path
// WSL Bash
shell: 'C:\\Windows\\System32\\bash.exe',

We can also change the appearance of Hyper from here by specifying font size and font family and also predefined themes, let’s quickly add in the hyper-adventure-time theme into the plugins section.

Open another Hyper tab with Ctrl+Shift+t, this will show the bash terminal for WSL now.

Quick orientation with the Hyper terminal keyboard shortcuts:

New tab = Ctrl+Shift+t
Close current tab = Ctrl+Shift+w
Cycle through tabs right = Ctrl+Shift+right arrow
Cycle through tabs left = Ctrl+Shift+left arrow

Now I’m going to configure some additional properties for Hyper, and change the theme to something a bit more subtle.

I purchased Dank Mono, if you want a similar font as OSS check out FiraCode.

Here’s what I changed:

module.exports = {
  config: {
    fontSize: 18,
    fontFamily: '"Dank Mono",...',
    cursorShape: 'BEAM',
    cursorBlink: true,
    copyOnSelect: true,
    plugins: ['hyper-altair'],
  },
}

Install Fish Shell!

Ok, time to install the Fish Shell! This is a completely optional step, I like to use fish for the nice intellisense you get when navigating file structures, there are also some neat themes you can get with Oh My Fish

sudo apt -y install fish

Install Oh My Fish

Now we can install Oh My Fish (OMF) and get a nice terminal theme going on too, remember we talked about running commands with the correct permissions? Well this is one of those occasions, open a new tab first then paste in the following:

curl -L https://get.oh-my.fish | fish

Fish themes with OMF

After installing OMF you can pick a theme, here you may notice that the text doesn’t fit in the screen on Hyper, a quick way to reset it is to maximise the window then back again, I did this with the Windows key+arrow up to maximise the Windows key+arrow down to restore it.

After installing omf I chose the theme agnoster, installed with omf install agnoster you can list out what is available and what you have already installed by selecting omf theme let’s change it once more to the one theme, adjust the size of the window first as things are getting a bit cramped.

Have a play around there’s loads there, I prefer the one theme because you can see what version of node you’re running on, over on the far right. Here you can also see the intellisense for fish where it shows agnoster as a previous selection, if I wanted to select agnoster I could tab to complete the rest of the command.

Configure

So, now we have a swanky looking new terminal and a bare-bones VSCode install it’s time to get things moving.

I have a cheat-sheets repo detailing a lot of the configuration we’re about to go through here, if you find something useful along the way please drop a PR with the suggestion.

First up, in place of typing out fish each time I open a new terminal, and not replacing bash which you can do, but I prefer to use an alias. So what we’re going to do is open up the .bashrc file and edit it.

From a new terminal type in nano ~/.bashrc, nano is a bash text editor. Scroll (or Page) down to the bottom of the file and add in an alias for fish, alias f=fish then to exit nano Ctrl+x and confirm changes with a y. Reload the .bashrc file like we did after using n to install Node . /home/scott/.bashrc but your username in place of mine 😄, now we can use f instead of fish! Well done you saved yourself typing three extra characters!!!.

Git config

Before we crack on with spinning up a Create React App instance we’re going to need to configure Git, via the .gitconfig file.

We’re going to use nano to add some settings for Git, both in WSL and Windows, this is the extra config I mentioned earlier, apologies!

First up we’ll config our bash environment then move onto Git bash on Windows.

# open up the .gitconfig file in WSL bash
# nano will create one if it doesn't exist
nano ~/.gitconfig

It’s nearly identical config for both environments apart from Windows uses the credential manager helper and WSL will need the cache helper.

# needed in Git Bash for Windows
[credential]
  helper = manager
# needed in WSL
[credential]
  helper = cache
[color]
  ui = true

[user]
  name = yourGitHubUserName
  email = yourGitHub@email.com

[core]
  editor = code --wait

Make your changes then Ctrl+x to exit and confirm with y, that’s the first part of the Git config done.

In Git Bash for Windows do the same in the terminal, use nano to create a .gitconfig file and add the setting to it.

Create React App

Ok, we shall get create react app going so we can get Git configured with GitHub using SSH and start making changes to commit to a GitHub repo.

We’re going to use npx to make a starter React project with Create React App. If you want to have your projects somewhere else now is the time to navigate to that directory.

From the terminal enter:

# this will create a starter react project
# called create-react-app
npx create-react-app create-react-app

This is creating the project in my home (~) folder, I’ve had to speed the gif up to 20x faster, it does take a while.🙃

Wheeeeeeeeeeeeeeeeeeeee!

So, now that we have spun up a React app to work on we should make a change and then add it to GitHub.

Navigate to the create-react-app folder in the terminal and open the project. You can open VSCode with the code . command, the . denotes the current folder in the terminal.

This will open VSCode at the root of the create-react-app project, make sure everything is working as expected by running the start script in npm.

npm run start

If you want to see what scripts are available in the current project you can also use npm run which will list defined npm commands from the package.json file.

A window will open displaying the basic Create React App landing page, we’re going to add a h1 to the App.js module then commit it, via the Source Control menu in VSCode.

Please bear in mind this is an up and running guide for a development environment, I’m not going to be detailing developing in React

Whilst the terminal is busy starting up the create-react-page we can open another tab in Hyper with Ctrl+Shift+t and open up VSCode with the code . command, navigate to the App.js component and add a <h1> tag to it just above the <img> tag with <h1>Hello React!</h1> in it.

Now the landing page should show the newly added h1, we can confirm that the file is changed in Git by doing a git status from the terminal. Then we can commit it from either the terminal or the IDE (VSCode) my preference is to use VSCode as the visual diffing of files is great.

Commit the changes with Ctrl+Enter if you have not selected the file you want to commit you wil get a dialogue telling you there are no staged changes to commit, you can select the files (in this case only the App.js file) by clicking the plus next to the file. Hitting Ctrl+Enter again will commit the changes with a message, you can check that there are no changes to commit with git status from the terminal or visually from the Source Control section in VSCode.

Ok, time to add our super sweet code changes to a repository on GitHub for the world to see!

Next up we’re going to go through adding the local changes we’ve made to a GitHub repository. If you haven’t got a GitHub account and are following along now may be a good time to set one up.

Use SSH with GitHub

First up, we’re going to make a repository on GitHub and push the changes we have made to it, here we’re going to click the + button in the top right of the GitHub home page, enter a repository name and GitHub will give you some defaults to choose from. As we have already made change locally we can ignore the first several commands but we do need the command to add the remote:

git remote add origin git@github.com:spences10/cra.git

And to push the changes up to GitHub git push -u origin master but we’re going to get an error, as we haven’t set up SSH.

WSL SSH Config

Open a new bash tab in Hyper and enter ls -al ~/.ssh check that there are no rsa files before doing this.

You’ll notice that we’re doing this in bash rather than Fish.

If there’s nothing there then generate new keys with:

# add your email address 👍
ssh-keygen -t rsa -b 4096 -C yourGitHub@email.com

Now ls -al ~/.ssh will show two additional files:

# there should be a private and public key-pair
id_rsa
id_rsa.pub

Start the SSH agent:

eval "$(ssh-agent -s)"

Add RSA key to SSH with:

ssh-add ~/.ssh/id_rsa

Now time to add the public SSH key to GitHub, in WSL were going to copy pasta the public SSH key with cat ~/.ssh/id_rsa.pub in Hyper then we can copy from Hyper to a new SSH key.

Finally authenticate with GitHub:

ssh -T git@github.com

Windows Git Bash SSH Config

For Windows Git Bash we’re going to copy our SSH keys we’ve just generated in WSL over to Windows Git Bash, there are some subtle differences when authenticating with Windows Git Bash.

From Hyper, copy the SSH files from Linux to Windows:

cp ~/.ssh/* /c/Users/spenc/.ssh/

Start the SSH agent:

eval `ssh-agent -s`

Add the key to SSH agent:

ssh-add ~/.ssh/id_rsa

Authenticate:

ssh -T git@github.com

Now the additional set up for SSH is done we should be able to go back to Hyper and push our change to GitHub.

Also you may have noticed that the SSH Key 🔑 token went from black to green on the settings screen there this indicates that you have authenticated.

Change WSL version

If you want to use a different version of Ubuntu, Debian or any of the other available distributions of Linux from teh Windows store with Hyper you will need to change the default version from PowerShell:

# list available versions
wslconfig /l
# set default
wslconfig /setdefault Debian

Wrap up!

That’s it! We have gone from scratch to a functioning web development environment. There are several other personal things I’m now going to add to my install now which is aliases for both Git and Fish shell. If you are interested in them I have a cheat-sheet for Fish with a list of all my aliases I use, the same for my .gitconfig you can find that in my dotfiles repo

Thanks for reading 🙏

Please take a look at my other content if you enjoyed this.

Follow me on Twitter or Ask Me Anything on GitHub.

Turning a job hunt into a dev project

Fri, 30 Nov 2018 00:00:00 GMT

Cliffs/TL;DR

I made a recruiter FAQ on my personal site for recruiters and created an online CV.

Preamble

Apologies up front about this post if it comes across as entitled or ranty and I’m sure a lot of people will disagree with my approach.

I’m going to try my hardest to not get too cynical here, so, first up let’s get this out there to start with. I think technical recruitment is in a very bad state! It has been for a long while (since 2010 at the very least).

Let’s call it job hunting/talent finding fatigue, as we as developers have fatigues in other areas, however this isn’t one of our own making.

Starting out on a job hunt and getting your CV out there will generate a lot of calls where the most irrelevant keyword on your CV will generate unwanted calls from what at times appear to be desperate recruiters.

Urgent position to fill: Team Lead, 6+ year experience - immediate start £900 a day, 3 month contract.

Ok, that’s a bit harsh! it’s the truth, Ruth! It all sounds a bit cliché now as well.

Being a developer I began to notice patterns with each call I got, the same questions kept getting asked over and over. Also as a developer I want to keep things DRY to save myself (and the recruiter) a bit of time.

So to this end I decided to add an FAQ section to my personal portfolio, this was a list of all the questions I had been asked on the many calls previously, so, rather than have the recruiter have me on the phone for ten minutes just to qualify me for the role they could do the vast majority of that with the provided FAQ, almost like a reverse job spec, all they have to do is READ the FAQ! Then check off my wants and needs from the list I have already provided.

For some reason though, a lot of recruiters would insist on talking to me, taking time out of my day, they’d then proceed to ask the same questions every other recruiter would ask. This would qualify them to me as someone that didn’t value my time and they’d lose any credibility they may have had with me.

So, I made a site, a portfolio, that listed all you could want to know about me. I added the About, which covers my back-story and coding history, how I got into it and where I am now. There’s also a Now section and a Uses section. They are what I’m doing now, in my life ans the things I use, like code editor and hardware.

The pages of the portfolio are all in markdown generated by Gatsby, so when there was a question asked that was not on the list I could add it quickly. Using Netlify made this even simpler, because it was a Git push and the changes would be live in minutes,

Making a site, this is more for prospective employers rather than recruiters and although the majority of recruiters will talk to you as though they are the ones considering you for the role they’re only the first stage in what can be a quite lengthy process.

So, let’s forget about recruiters for now and concentrate on the one main thing you need to get out there if you’re looking for a job, your CV.

Making a [CV], I went to the effort to make a basic site using my favourite tech stack teh JAMStack behbeh! I used the JSONresume tool to detail all the roles I had held then used the JSONresume as a guide for how I should make the individual components for the [CV].

If you want to get started with your own JSON Resume you can run the npm command npx resume-cli init to kick-start your own.

Feel free to use my CV as a template for your own as well, all you need to do is generate your CV and push it to now.sh.

This was my full employment history and quite long and as I was looking for a job in a new field the vast majority of it was not pertinent to a my job search, this is why I decided rather than blast out my [CV] everywhere I’d post out the list of answers to the questions recruiters always asked me when calling me. So rather than have them crawl through my mostly irrelevant job history they could get the answers to the questions they wanted answering. The [CV] was there if they wanted more detail on me, all they had to do was READ!

In my mind the personal portfolio and the [CV] site were a good indication of my current skill level with styling and preferred stack, in reality no one cares as long as it looks nice and recruiters even less so because it doesn’t answer the questions they want to ask.

This wasn’t field of dreams though! So, how do I get recruiters to my page? Well, rather than have a CV in MS Word format that I would post onto every job site I could find, I had, a, link to my FAQ on a MS Word doc! 🙃

On the MS Word doc I would have all the search terms a recruiter would search for, JavaScript, React, HTML, CSS and so on at the bottom of the document. At the top was a greeting:

It was a friendly hello and something different to what must be very repetitive.

I used Google analytics’s, on the FAQ and the [CV] to see how much traffic they were getting, the FAQ a lot more than the [CV], so, I could glean from that, that the recruiters were getting the answers to their questions without having to pick up the phone. Win Win, right?

The stats weren’t great however, with a bounce rate of around 3 seconds 😲 you could see the vast majority of recruiters would rather pick up the phone than READ the information provided.

Convert the Gatsby default starter to styled-components

Thu, 29 Nov 2018 00:00:00 GMT

Let’s go through getting styled-components working with the Gatsby default starter.

In this example we’re going to use the Gatsby default starter you get with CodeSandbox and add in styled-components, so first up, open a new CodeSandbox and select Gatsby from the SERVER TEMPLATES.

1. Dependencies

In the dependencies section of the CodeSandbox editor you’ll need to add the following:

gatsby-plugin-styled-components
styled-components
babel-plugin-styled-components

2. Config

Now we need to change gatsby-config.js to incorporate the new dependencies we’ve just added. It doesn’t have any configuration options so it can just go in as an extra line on the config, in this case I’m adding it after the gatsby-plugin-sharp plugin:

'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
'gatsby-plugin-styled-components',

Don’t forget the comma at the end 👍

3. Global Style

Now that we’re ready to rock n’ roll with styled-components we need to remove the currently applied styled in the default starter and apply our own.

In the src/components/layout.js component there’s an import for layout.css this is the CSS reset for the starter if we remove the import from here we’ll see the styles for border and font be reset. We can now delete the layout.css file and create out own CSS reset using the createGlobalStyle function from styled-components.

Create a new folder theme, in this example it’s in src/theme and add a globalStyle.js file in there.

This will export a GlobalStyle component for us to use throughout the app.

Let’s add in a Google font and reset the padding and margin, for visual feedback we’re going to add the font directly to the body element.

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Kodchasan:400,700');
  body {
    padding: 0;
    margin: 0;
    font-family: Kodchasan;
  }
  a {
    text-decoration: none;
  }
  ul {
    margin: 0 auto;
    list-style-type: none;
  }
`

Ok, now we can use the export component here to apply styles globally in the app. So we need to have this as high up the component tree as possible, in this case that is in the layout.js component as it wraps all the pages in this project.

In layout.js import the GlobalStyle component.

import Header from './header'
import { GlobalStyle } from '../theme/globalStyle'

Then add it in with the other components being rendered.

render={data => (
  <>
    <GlobalStyle />
    <Helmet
    ...

Ok! Global styled applied, we should now see the font change and the margin around the body of the page change.

Time to use styled-components!

4. Use styled-components

Now let’s convert all the inline styles used in the starter to styled-components.

This is the actual styling part, which is moving the existing styles to styled components, working from top to bottom of the file structure, changing:

src/components/header.js
src/components/layout.js
src/pages/index.js

header.js

import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

const HeaderWrapper = styled.div`
  background: rebeccapurple;
  margin-bottom: 1.45rem;
`

const Headline = styled.div`
  margin: 0 auto;
  max-width: 960;
  padding: 1.45rem 1.0875rem;
  h1 {
    margin: 0;
  }
`

const StyledLink = styled(Link)`
  color: white;
  textdecoration: none;
`

const Header = ({ siteTitle }) => (
  <HeaderWrapper>
    <Headline>
      <h1>
        <StyledLink to="/">{siteTitle}</StyledLink>
      </h1>
    </Headline>
  </HeaderWrapper>
)

export default Header

layout.js

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'

import styled from 'styled-components'

import Header from './header'
import { GlobalStyle } from '../theme/globalStyle'

const ContentWrapper = styled.div`
  margin: 0 auto;
  maxwidth: 960;
  padding: 0px 1.0875rem 1.45rem;
  paddingtop: 0;
`

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <GlobalStyle />
        <Helmet
          title={data.site.siteMetadata.title}
          meta={[
            { name: 'description', content: 'Sample' },
            { name: 'keywords', content: 'sample, something' },
          ]}
        >
          <html lang="en" />
        </Helmet>
        <Header siteTitle={data.site.siteMetadata.title} />
        <ContentWrapper>{children}</ContentWrapper>
      </>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

index.js

import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

import Layout from '../components/layout'
import Image from '../components/image'

const ImgWrapper = styled.div`
  max-width: 300px;
  margin-bottom: 1.45rem;
`

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <ImgWrapper>
      <Image />
    </ImgWrapper>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

5. Done

Thanks for reading

Here’s the example code we worked on if you need reference. 👀👌

Get your GraphCMS data into Gatsby

Sun, 25 Nov 2018 00:00:00 GMT

Let’s set up Gatsby to pull data from GraphCMS.

This will be a walk-through of setting up some basic data on the headless CMS, GraphCMS and then querying that data in Gatsby.

1. Set up GraphCMS

Set yourself up with a GraphCMS account at https://app.graphcms.com/signup and select the developer plan.

2. Define Data

Create a new project and add in some data to query.

Select the Create new project option, call it what you like, in this example it’s going to be a list of projects, so I’m calling it Project List.

In the side bar select the Schema and create a model, in this case Project. In the project model we’re going to have a Title and a Description.

Select the fields from the tray on the right by clicking the FIELDS tab and dragging and dropping them into the Project model we created.

3. Configure the GraphCMS public API

In the GraphCMS settings set the Public API Permissions to READ scroll down to Endpoints and copy the URL for use in configuring Gatsby.

That’s it for the CMS configuration, now to pull that data into our Gatsby frontend!

4. Configure Gatsby

In you Gatsby project install gatsby-source-graphql and configure it in gatsby-config.js the configuration should looks something like:

{
  resolve: 'gatsby-source-graphql',
  options: {
    typeName: 'GRAPHCMS',
    fieldName: 'graphCmsData',
    url: 'https://api-euwest.graphcms.com/v1/projectid/master',
  }
},

In this example we’re using codesandbox.io for our text editor and the Gatsby Default Starter you get when selecting Gatsby from the SERVER TEMPLATES available to you in codesandbox.io

5. Query the data in Gatsby GraphiQL

Now that the endpoint is set up we will be able to query the data with Gatsby’s GraphiQL UI, we can shape the query we want to use to display the data here.

In the preview of our app in codesandbox.io if you add ___grapgql to the end of the url it will bring up the Gatsby GraphiQL UI, here we can shape the data we want to query.

If we open up some curly brackets {} and Cmd+space we’ll see the available fields where we can pick out the graphCmsData field we defined in the gatsby-source-graphql plugin.

Selecting the fields we created in GraphCMS then running the query will display our defined data.

{
  graphCmsData {
    projects {
      id
      status
      title
      description
    }
  }
}

6. Display the Data

Use the graphql gatsby export to query the data from the GraphCMS endpoint.

In pages/index.js add the graphql export the the gatsby imports.

import { graphql, Link } from 'gatsby'

At the very bottom define the query:

export const query = graphql`
  {
    graphCmsData {
      projects {
        id
        status
        title
        description
      }
    }
  }
`

You will then be able to access the data prop in the IndexPage component, we’ll need to de-structure the data prop out in the arguments of the component:

const IndexPage = ({ data }) => (

Now we can access the data passed into the component, we just need a way to visualise it! Luckily for use there’s a handy component from Wes Bos that we can use called Dump, so create a new dump.js component in components then import it into the index.js file, and add in the component to see what’s inside the props:

const IndexPage = ({ data }) => (
  <Layout>
    <h1>Hi people</h1>
    <Dump data={data} />
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

The output should be the same as the result of the Gatsby GraphiQL query we created:

data 💩{
 "graphCmsData": {
  "projects": [
   {
    "id": "cjoxa812txqoh0932hz0bs345",
    "status": "PUBLISHED",
    "title": "Project 1",
    "description": "Description 1"
   },
   {
    "id": "cjoxa8cctxqqj0932710u39db",
    "status": "PUBLISHED",
    "title": "Project 2",
    "description": "Description 2"
   },
   {
    "id": "cjoxa8pbqxqt309324z9bcddv",
    "status": "PUBLISHED",
    "title": "Project 3",
    "description": "Description 3"
   },
   {
    "id": "cjoxa959vxqvz0932g1jn5ss3",
    "status": "PUBLISHED",
    "title": "Project 4",
    "description": "Description 4"
   }
  ]
 }
}

Using the React Context API - getting started

Sat, 08 Sep 2018 00:00:00 GMT

Let’s use the React Context API to change theme in an app!

But first, some context! 🤣

Ok terrible puns aside let’s have a look at what the React Context API is for and what it does. There’s a great one liner from the React docs…

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Or in other words, you can use the React Context API to avoid prop drilling if you need more detail on the concept then please do check out the links provided.

I’ve previously gone over implementing the React Context API in my Gatsby blog which I documented as I did it; you can see how that went here.

Explain the Context API to me.
A great resource on explaining the API can be found from @leighchalliday with a great usecase on the subject.

What we’re doing…

For this post we’re going to extend the example we created for styled-components getting started as it has the majority of the code we’ll need to get started with the React Context API.

We’re going to extend that example to manage the theme state of the example application.

So in summary:

Scaffold out basic CreateReact App
Use styled-components 💅 for styling
Add themes to switch between with the React Context API
Use the React Context API!

What we’ll need…

All we’ll be needing is an internet connection and a modern web browser! Because we’re going to do all of this online in the awesome CodeSandbox!

If you have a GitHub account or not, CodeSandbox will let you get started coding straight away!

Versions:

This guide is being used with the following dependency versions.

react: 16.4.2
react-dom: 16.4.2
react-scripts: 1.1.4
styled-components: 3.4.5

Let’s start

So let’s go over theming the basic create react app again, this time instead of adding state into to the component we will use the React Context API to manage the state for us. There will be people that will argue that this is a bit overkill for a theme switch but it is given as an example of when to use the Context API in the React documentation so I will let you decide on the validity of that point. For this example, I hope it will give you a clearer picture of how to use the Context API in an application.

Dependencies

Open a React CodeSandbox and add styled-components as a dependency:

File structure

Another area for bikeshedding is file structure, in this scenario we’re adding folders for components, contexts and the theme please feel free to structure your files how you see fit, this is how we’re going to do it for this example ❤️

Add the directories into the src folder so we can add in some components, the file structure should look something like this:

context-demo/
├─ public/
├─ src/
│  └─ components/
│  └─ contexts/
│  └─ theme/
└─ package.json

Scaffold out a basic Create React App

Ok, so, what we’re going to do is add in an App.js component to the components folder then use that in the src/index.js file.

The App.js component can be a stateless functional component as for this example as we’re going to be handling state with the Context API.

Here you can see my sketchy typing as I create the directories and add in the App.js component.

We can then remove the style.css file and reference in src/index.js as we’re going to be styling with styled-components 💅 and then use our App.js component:

Ok, so the reason why I have abstracted the App.js component out of the src/index.js file is so that when we come to using the Context API we can add it to the highest level in our app, which is src/index.js.

What about the rest?

So this isn’t really the Create React App, as we’re using CodeSandbox instead, I have gone over the basic styling used in the styled-components getting started post so it’s time to refer to that to mimic the styles we need.

That means what we’re going to do, rather than go into depth on the styling of each of the component parts that make up the basic Create React App appearance, we’re going to re-use components, so there’s going to be a bit of copy pasting involved now.

The Create React App boilerplate code has one file that we go over styling in the styled-components getting started post which is the App.js file, the others are left or deleted, the basic style of App.js is:

App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

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

Use styled components for styling

Now we’re going to recreate the styles from the App.css file with styled-components, let’s list them out here and go through them:

AppWrapper
AppHeader
AppTitle
rotate360
AppLogo
# We're adding our own styles for
AppIntro
Underline
StyledHyperLink
Button

AppWrapper is the top level wrapper which in a larger component could be used for layout with CSS Grid or Flexbox, in our case we’re going to align the text center.

Straightforward enough, right? Now the majority of the rest of the components will use the styled-components ThemeProvider which is what we’re going to pass our theme to from the Context API.

Add themes to switch between with the React Context API

Ok, we need to define some themes to pass to the ThemeProvider, we’re going to define several theme aspects we want to change, these are going to be:

primary // colour
secondary // colour
danger // colour
fontHeader // font
fontBody // font

Create a file to contain the theme object in the theme directory and call it globalStyle.js and add in the following:

import { injectGlobal } from 'styled-components'

export const themes = {
  theme1: {
    primary: '#ff0198',
    secondary: '#01c1d6',
    danger: '#e50000',
    fontHeader: 'Old Standard TT, sans, sans-serif',
    fontBody: 'Nunito, sans-serif',
  },

  theme2: {
    primary: '#6e27c5',
    secondary: '#ffb617',
    danger: '#ff1919',
    fontHeader: 'Enriqueta, sans-serif',
    fontBody: 'Exo 2, sans, sans-serif',
  },

  theme3: {
    primary: '#f16623',
    secondary: '#2e2e86',
    danger: '#cc0000',
    fontHeader: 'Kaushan Script, sans, sans-serif',
    fontBody: 'Headland One, sans-serif',
  },
}

injectGlobal`
  @import url('
    https://fonts.googleapis.com/css?family=
    Old+Standard+TT:400,700|
    Nunito:400,700'|
    Enriqueta:400,700|
    Exo+2:400,700|
    Kaushan+Script:400,700|
    Headland+One:400,700|
  ');

  body {
    padding: 0;
    margin: 0;
  }
`

Ok, so nothing really happening there apart from setting up the styles for use later.

You will notice that injectGlobal is being used here, this is where we’re setting the fonts for use throughout the app, injectGlobal should be used once in an app to set global styles like this.

Onwards! Let us now focus on getting the basic app styles into the App.js component. We can now start using the ThemeProvider in App.js. To do this, for now, to get some visual feedback we’re going to apply one of the themes from the themes object in globalStyle.js this is so, as we are adding in components we can see the theme being applied.

We can do this now with the AppHeader which is a styled div:

const AppHeader = styled.div`
  height: 12rem;
  padding: 1rem;
  color: ${({ theme }) => theme.dark};
  background-color: ${({ theme }) => theme.primary};
`

You will notice here that we’re beginning to use the styled-components, theme props but, if we paste this code in now there won’t be any change until the ThemeProvider is passed the theme object so we’re going to wrap App.js with the ThemeProvider component so that any component encapsulated by the ThemeProvider is able to receive theme props.

AppTitle is going to be a h1 so:

const AppTitle = styled.h1`
  font-family: ${({ theme }) => theme.fontHeader};
`

For the spinning React logo we can use the asset used previously in the styled-components getting started example

We can add it in with the imports at the top of the App.js component and add it into the AppLogo styled component as an img tag:

const logo = `https://user-images.githubusercontent.com/
    234708/37256552-32635a02-2554-11e8-8fe3-8ab5bd969d8e.png`

The keyframes helper will need to be imported alongside the ThemeProvider for the animation on the react logo.

const rotate360 = keyframes`
  from { 
    transform: rotate(0deg); 
  }
  to { 
    transform: rotate(360deg); 
  }
`

const AppLogo = styled.img`
  animation: ${rotate360} infinite 5s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1s linear;
  }
`

Shared components

Shared components are covered in the styled-components getting started guide if you need more information, for this example we’re going to bring in the final couple of components as shared ones for the StyledHyperLink and Button in src/Shared.js add the following:

src/Shared.js

import styled, { css } from 'styled-components'

export const Button = styled.button`
  padding: 0.5rem 1rem;
  margin: 0.5rem 1rem;
  color: ${({ theme }) => theme.primary};
  font-size: 1rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border: 2px solid ${props => props.border};
  background-color: Transparent;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.1s;
  &:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
  ${props =>
    props.primary &&
    css`
      background: ${({ theme }) => theme.primary};
      border: 2px solid ${({ theme }) => theme.primary};
      color: white;
    `};
  ${props =>
    props.danger &&
    css`
      background: ${({ theme }) => theme.danger};
      border: 2px solid ${({ theme }) => theme.danger};
      color: white;
    `};
  &:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
`

export const StyledHyperLink = styled.a`
  cursor: pointer;
  &:visited,
  &:active {
    color: ${({ theme }) => theme.primary};
  }
  &:hover {
    color: ${({ theme }) => theme.secondary};
  }
  color: ${({ theme }) => theme.primary};
`

Then import the components like any other:

The last three components for now, AppIntro, Underline and StyledHyperLink:

const AppIntro = styled.p`
  color: ${({ theme }) => theme.dark};
  font-size: large;
  code {
    font-size: 1.3rem;
  }
  font-family: ${({ theme }) => theme.fontBody};
`

const Underline = styled.span`
  border-bottom: 4px solid ${({ theme }) => theme.secondary};
`

const StyledHyperLink = SHL.extend`
  text-decoration: none;
  font-family: ${({ theme }) => theme.fontBody};
  color: ${({ theme }) => theme.fontDark};
`

Add them in under the AppLogo styled component and then we can add the rest of the components into the App function return, so, ready for another copy pasta? Here:

<AppIntro>
  Bootstrapped with{' '}
  <Underline>
    <code>
      <StyledHyperLink
        href={`https://github.com/facebook/create-react-app`}
        target="_blank"
        rel="noopener"
      >
        create-react-app
      </StyledHyperLink>
    </code>
  </Underline>.
</AppIntro>
<AppIntro>
  Components styled with{' '}
  <Underline>
    <code>
      <StyledHyperLink
        href={`https://www.styled-components.com`}
        target="_blank"
        rel="noopener"
      >
        styled-components
      </StyledHyperLink>
    </code>
  </Underline>{' '}
  <span role="img" aria-label="nail polish">
    💅
  </span>
</AppIntro>
<AppIntro>
  Fonts picked with{' '}
  <Underline>
    <code>
      <StyledHyperLink
        href={`https://fontjoy.com/`}
        target="_blank"
        rel="noopener"
      >
        fontjoy.com
      </StyledHyperLink>
    </code>
  </Underline>
</AppIntro>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
<Button danger>Danger Button</Button>

Sorry for the code wall! Right paste that in under the closing </AppHeader> tag and we should have the base of what we’re going to theme!

Ok? How’s it looking?

Now we have a basic React app that uses styled-components!

Use the React Context API

Now for the main event! Here we’re going to cover:

Making the theme context.
Using the context API with a component.
Consuming the Context API in multiple components.

So, passing state needlessly through components is what we can use the Context API to avoid. If we take a look at the styled-components getting started example we can see the state being managed in the App.js component and the handleThemeChange function has to be passed to the ThemeSelect component much the same way as any props would need to be passed down. That is a simplified example but it’s quite easy to imagine if that component lived on a footer component or a menu item there would be several other components that would need to have the state passed through them that would not actually need that state or props. Make sense?

example

<App>               {/* state begins here */}
  <Header>          {/* through here */}
    <Navigation>    {/* and here */}
      <ThemeSelect> {/* to be used here */}
    </Navigation>
  </Header>
  <Footer/>
</App>

Add the site theme context

In our src/contexts/ directory we’re going to make our SiteThemeContext.js, import React and define and export our context:

import React from 'react'

export const SiteThemeContext = React.createContext()

So what is a context?

A context is made up of two things, a provider and a consumer, you have a single provider which will sit up as high as possible in the component tree so that multiple consumers can get the state and props from the provider.

Hopefully you recall the point at which we abstracted the function App component out of the src/index.js file, this is so we could add in the context provider at the highest level of the app, in the src/index.js file. This means that any consumer within the app, no matter how deep into the component tree it is, it can get the state and props from that top level.

Now to create a provider, the provider is a regular React component, so:

import React from 'react'

export const SiteThemeContext = React.createContext()

export class SiteThemeProvider extends React.Component {
  render() {
    return (
      <SiteThemeContext.Provider value={}>
        {this.props.children}
      </SiteThemeContext.Provider>
    )
  }
}

What is being returned by <SiteThemeProvider> is the <SiteThemeContext.Provider> and the children of that component, the one prop you have to provide the the provider is a value prop. This is the variable that the consumer has access to. The consumer being <SiteThemeContext.Consumer> (more on this shortly).

So what we can do now is have what is passed into value be an object value={{}} so it can store multiple properties of the state and the functions that are defined in SiteThemeContext.

The state for the context needs to be the theme so we need to import the theme from src/theme/globalStyle and add that to the state, we’re going to default the theme (and state) to theme1 and add a copy of that into the value prop by spreading into state ...❤️, it should look like this:

import React from 'react'
import PropTypes from 'prop-types'

import { themes } from '../theme/globalStyle'

export const SiteThemeContext = React.createContext()

export class SiteThemeProvider extends React.Component {
  state = {
    theme: themes['theme1'],
  }

  render() {
    return (
      <SiteThemeContext.Provider
        value={{
          ...this.state,
        }}
      >
        {this.props.children}
      </SiteThemeContext.Provider>
    )
  }
}

Ok, it’s been a while since I’ve added a gif, time for another one!

And bring in the themes and add state:

Now we can add in a function to the provider to change the theme state based on what has been selected via the handleThemeChange event value:

handleThemeChange = e => {
  const key = e.target.value
  const theme = themes[key]
  this.setState({ theme })
}

This can then be consumed by any provider that wants to use it, we’re going to need to add it into the value prop, like this:

import React from 'react'
import PropTypes from 'prop-types'

import { themes } from '../theme/globalStyle'

export const SiteThemeContext = React.createContext()

export class SiteThemeProvider extends React.Component {
  state = {
    theme: themes['theme1'],
  }

  handleThemeChange = e => {
    const key = e.target.value
    const theme = themes[key]
    this.setState({ theme })
  }

  render() {
    return (
      <SiteThemeContext.Provider
        value={{
          ...this.state,
          handleThemeChange: this.handleThemeChange,
        }}
      >
        {this.props.children}
      </SiteThemeContext.Provider>
    )
  }
}

Ok, that is the site theme context component covered, pretty straight forward, right?

What I should mention is that the e in the handleThemeChange function is going to be the event from the theme select box that we’re about to make.

Let’s go through adding in the function and adding that to the state:

And now we can add the theme provider to src/index.js so anything lower in the dependency tree can access it via a consumer.

Add the theme select

Now we want a want to call the handleThemeChange function that is part of the SiteThemeProvider via the SiteThemeContext! I’m sure this all making perfect sense right now (🤣) so let’s get right in there and define the component that we’re going to use to consume the SiteThemeContext.Provider with a ThemeSelect component!

In the src/components directory add a new ThemeSelect.js component, this is where we are going to consume the site theme context with a consumer.

The child of a consumer isn’t a component it’s a function, so what we’re going to need to do is have the theme select inside the return of that function.

Let’s first set up the styled-components that will make up the select, which is a select box, some options and a wrapper.

First we’ll do it without the consumer then we’ll add it in.

ThemeSelect.js

import React from 'react'
import styled from 'styled-components'

import { themes } from '../theme/globalStyle'

const SelectWrapper = styled.div`
  margin: 0rem 0.5rem 0rem 0.25rem;
  padding: 0rem 0.5rem 0rem 0.25rem;
`

const Select = styled.select`
  margin: 1.5rem 0.5rem;
  padding: 0.25rem 0.5rem;
  font-family: ${({ theme }) => theme.fontBody};
  border: 2px solid ${({ theme }) => theme.secondary};
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  background: ${({ theme }) => theme.foreground};
  border-radius: 4px;
`

export const SelectOpt = styled.option`
  font-family: ${({ theme }) => theme.fontBody};
`

const ThemeSelect = props => {
  return (
    <SelectWrapper>
      <Select>
        {Object.keys(themes).map((theme, index) => {
          return (
            <SelectOpt key={index} value={theme}>
              Theme {index + 1}
            </SelectOpt>
          )
        })}
      </Select>
    </SelectWrapper>
  )
}

export default ThemeSelect

So from this we can list the this themes available to us in the themes object. But that’s it, the function to handle the theme change lives on the SiteThemeProvider.

Back to the SiteThemeContext.Consumer as I mentioned earlier the child of a consumer is a function () => () the first section is the value from the provider (<SiteThemeContext.Provider>) so let’s take a quick look at what we’ve previously defined in the provider:

value={{
  ...this.state,
  handleThemeChange: this.handleThemeChange
}}

Available from SiteThemeContext.Provider is the state and a function so any of those items we can extract and pass to the provider, or to put it another way the consumer can access those values.

Here we can use destructuring to pull the handleThemeChange function we need to change the theme.

import React from 'react'

import { SiteThemeContext } from '../contexts/SiteThemeContext'

const ThemeSelect = props => {
  return (
    <SiteThemeContext.Consumer>
      {({ handleThemeChange }) => ()}
    </SiteThemeContext.Consumer>
  )
}

export default ThemeSelect

Currently this isn’t going to change the theme because we have that hardcoded into the styled-components ThemeProvider, what we want to do is use a consumer for the currently selected theme in the SiteThemeContext.

Before that we’ll also need to add in the onChange event we want to use to pass the event (e) to the handleThemeChange function on SiteThemeContext.

Then in the App component we can import our <SiteThemeContext.Consumer> to consume the theme on the SiteThemeContext state and pass that to the styled-components ThemeProvider.

Want to know more?

As mentioned at the start of this article a great resource is @leighchalliday and his YouTube channel where you can find his great usecase for the React Context API.

There’s also the React community on spectrum and styled-components on spectrum.

Example code of the walkthrough is available on CodeSandbox.

Thanks for reading 🙏

If there is anything I have missed, or if there is a better way to do something then please let me know.

Follow me on Twitter or Ask Me Anything on GitHub.

Making a CI pipeline with Travis CI

Mon, 28 May 2018 00:00:00 GMT

I thought I’d set up this blog with some sort of build pipeline, the intention was to have a good Continuous Integration pipeline so that if there were any issues when building the site that I wouldn’t push a broken build. No one wants to see that 😿

I’m feeling my way around with this and I’m presuming it’s far from perfect or ideal even, but I have it as a functional work-flow.

What I’m using

Zeit’s now
Gatsby
Travis DUH!

How the set-up works

I have my GitHub project set up with two branches master and development, changes are made on feature branch of development then pushed into development then up to master once I’m happy the change is ok to go to production.

Using Zeit’s now you can define a different url for each of your environments. I have a .now.sh url for development and a sub-domain of my scottspence.me domain for master/production.

The set-up

There are a few parts to setting this up, the first is adding your repository to https://travis-ci.org/ then adding your NOW_TOKEN from https://zeit.co/account/tokens to the repository settings page on Travis-ci

The guide here covers it for using now, the part I found particularly painful was generating the secure variable for the .travis.yml file because I don’t have Ruby installed and I struggled to set it up on my OpenSUSE WSL install, so instead I used a Cloud9 machine in the end.

the flow

Issue is “Add self hosted Fonts #75” I’ll make a branch from git and give it a name to reflect the issue number dev/75/add-self-hosted-fonts I’ll make my changes locally then push to the development branch.

Once I have merged these changes into the development branch then I can view them om the .now.sh url configured in my package.json

My travis.yml looks like this:

sudo: false

language: node_js

cache:
  directories:
    - node_modules

notifications:
  email: false

node_js:
  - '9'

before_script:
  - npm prune

script:
  - npm i -g now@canary
  - npm run clean
  - npm run build
  - npm run deploy

after_script:
  - if [ "$TRAVIS_BRANCH" = "development" ]; then npm run alias:dev;
    fi
  - if [ "$TRAVIS_BRANCH" = "master" ]; then npm run alias:prod; fi
  - if [ "$TRAVIS_BRANCH" = "master" ]; then npm run release; fi
  - npm run cleanup

env:
global:
  secure: lngmfinghashvariable!

My package.json looks like this:

  "now": {
    "name": "scottblog"
  },
  "scripts": {
    "clean": "rm -rf .cache/ && rm -rf scottblog/ && rm -rf public/",
    "build": "gatsby build && mv public scottblog",
    "deploy:now": "npm run clean && npm run build && now scottblog/",
    "dev": "npm run clean && gatsby develop",
    "format": "pretty-quick",
    "precommit": "pretty-quick --staged",
    "deploy": "now scottblog/ --token $NOW_TOKEN",
    "alias:dev": "now alias blog-scottspence.now.sh --token $NOW_TOKEN",
    "alias:prod": "now alias blog.scottspence.me --token $NOW_TOKEN",
    "cleanup": "now rm scottblog --safe --yes --token $NOW_TOKEN",
    "release": "release-it"
  },

Use the React Context API with Gatsby

Tue, 22 May 2018 00:00:00 GMT

I’m a bit late to the party using the new React Context API, I did get to use it the other day at work, I also made a snippet to scaffold out a component for it.

I had followed a couple of guides explaining how to use it and neither of them as good as this great explanation of how to use it from @leighchalliday, thank you Leigh 🙏 It’s a great use case which helped me understand how to use it.

So, after doing this in a CRA project I decided to use it on one of my Gatsby projects. With Gatsby the layout is slightly different where you can have multiple layouts for differing sections of your app, so this lends well for passing context.

One thing to bear in mind is that this is for my specific use case so I’ll apologise upfront now if any of this is confusing, I’m trying to get this documented to help me understand it too 👍

With Gatsby if you want to use the React 16.3 then you will need to install the Gatsby React next plugin:

npm install gatsby-plugin-react-next

Gatsby uses React 16.2 I believe so you will need to use this plugin.

Another thing you may need to do is:

npm i react react-dom
npm un react react-dom

This may be because I was trying to use it in an old project, I’ve had to do this on three projects now as I was getting createContext is not a function errors until I did this.

One other thing you may want to consider if it appears nothing is working try using the npm ci command. This is the npm 6+ version of deleting your node_modules folder and reinstalling. 🤓

So let’s go through one of my favourite use cases at the moment and add theming support to a Gatsby site and use the React context API to manage the theme.

You can see how theme a React app without the React Context API in my styled-components 💅 getting started post.

For illustration I’ll go over it here now, you add the ThemeProvider at the highest level in the application structure so that all descendants/children of the app can access it.

I have already done this for my personal site and now I’m going to do it here so let’s go through it together.

Let’s make a component!

Ok, so everything in React is a component, that’s why I like it so much - so let’s make a SomethingContext.js component, as I want to do the things with the styled-components 💅

Let’s start by giving it an imaginative name:

touch src/layouts/components/BlogThemeContext.js

There we go 👍

Ok, the ‘things’ I want to do with the Context API are:

change the styled-components ThemeProvider
rotate the site hero patterns

Now to scaffold out the context component, I have already mentioned the VS Code snippet for my own personal use which is the basic structure for the Context which is in two parts, a Provider and a Consumer

Let’s create the Context and the Consumer in this component.

Using the snippet it should look something like this:

`src/layouts/components/BlogThemeContext.js`

import React from 'react'
// Context is made up of two things
// Provider - Single as close to top level as possible
// Consumer - Multiple have multiple consumers
export const BlogThemeContext = React.createContext()

export class BlogThemeProvider extends React.Component {
  state = {
    item1: 1,
    item2: 2,
  }

  // add function here
  functionHere = () => {
    this.setState({
      item1: 2,
      item2: 3,
    })
  }
  render() {
    return (
      <BlogThemeContext.Provider
        value={{
          ...this.state,
          functionHere: this.functionHere,
        }}
      >
        {this.props.children}
      </BlogThemeContext.Provider>
    )
  }
}

So the props passed into the <BlogThemeContext.Provider> is the state and the methods contained in BlogThemeProvider these can then be accessed throughout the app by using the <BlogThemeContext.Consumer>.

Now let’s add the BlogThemeProvider at the top level of our app so that the state and functions of the provider can are accessible for the children of the layout/index.js.

This is what it looks like before adding the context provider, you’ll notice that the styled-components ThemeProvider is a top level component here.

`src/layouts/index.js`

const TemplateWrapper = ({ children }) => (
  <ThemeProvider theme={theme}>
    <PageContainer>
      <Helmet title={nameContent} meta={siteMeta} />
      <Header />
      <Main>{children()}</Main>
      <Footer />
    </PageContainer>
  </ThemeProvider>
)

Now we already have the styled-components ThemeProvider which receives a theme object, and we want to manage the theme in our context provider. So let’s import the existing theme from the globalStyle module into BlogThemeContext and add theme to the state of the BlogThemeProvider:

import React from 'react'
import PropTypes from 'prop-types'

import { theme } from '../../theme/globalStyle'

// Context is made up of two things
// Provider - Single as close to top level as possible
// Consumer - Multiple have multiple consumers
export const BlogThemeContext = React.createContext()

export class BlogThemeProvider extends React.Component {
  state = {
    theme,
  }

  // add function here
  functionHere = () => {
    this.setState({
      item1: 2,
      item2: 3,
    })
  }
  render() {
    return (
      <BlogThemeContext.Provider
        value={{
          ...this.state,
          functionHere: this.functionHere,
        }}
      >
        {this.props.children}
      </BlogThemeContext.Provider>
    )
  }
}

BlogThemeProvider.propTypes = {
  children: PropTypes.any,
}

While we’re here let’s also add the function to handle the theme changing by replacing the dummy functionHere function in the snippet and also bring in the themes we want to switch between.

import React from 'react'
import PropTypes from 'prop-types'

import { theme1, theme2 } from '../../theme/globalStyle'

export const BlogThemeContext = React.createContext()

export class BlogThemeProvider extends React.Component {
  state = {
    theme,
  }

  handleThemeChange = e => {
    let theme = e.target.value
    theme === 'theme1' ? (theme = theme1) : (theme = theme2)
    this.setState({ theme })
  }
  render() {
    return (
      <BlogThemeContext.Provider
        value={{
          ...this.state,
          handleThemeChange: this.handleThemeChange,
        }}
      >
        {this.props.children}
      </BlogThemeContext.Provider>
    )
  }
}

BlogThemeProvider.propTypes = {
  children: PropTypes.any,
}

Use the `Context.Consumer`

So, now, let’s use it, right? The way to use is much like with the styled-component ThemeProvider, import your <ThemeSelectProvider> then you can use the <ThemeSelectContext.Consumer> to access the functions and state of the BlogThemeContext via the <ThemeSelectProvider>

The child of a consumer is a function, so rather than have your app being returned like you would with a normal React component like this:

<Wrapper>
  <Child />
</Wrapper>

So you need to embed a function like this:

<Wrapper>{() => <Child />}</Wrapper>

So you’re returning the (in this example, <Child />) app as the result of the <Context.Consumer> function, here we can also get any of the properties or state from the Context, in my use case here I want to get the theme prop out of the Context provider value (<BlogThemeProvider>) so we’ll use ES6 destructuring to pull out the theme object.

The styled-components ThemeProvider can now use the theme object supplied by the <BlogThemeContext.Consumer> so it’s safe to remove the import from globalStyle.

const TemplateWrapper = ({ children }) => (
  <BlogThemeProvider>
    <BlogThemeContext.Consumer>
      {({ theme }) => (
        <ThemeProvider theme={theme}>
          <PageContainer>
            <Helmet title={nameContent} meta={siteMeta} />
            <Header />
            <Main>{children()}</Main>
            <Footer />
          </PageContainer>
        </ThemeProvider>
      )}
    </BlogThemeContext.Consumer>
  </BlogThemeProvider>
)

There’s also a template src/template/blog-posts.js which Gatsby uses to generate the posts in this blog, let’s make it the same, let’s wrap the app in the return function for the context consumer, before it looked like this:

const Template = ({ data, pathContext }) => {
  const { markdownRemark: post } = data
  const { frontmatter, html } = post
  const { title, date } = frontmatter
  const { next, prev } = pathContext

  return (
    <PostWrapper border={({ theme }) => theme.primary.light}>
      <Helmet title={`${title} - blog.scottspence.me`} />
      <Title>{title}</Title>
      <TitleDate>{date}</TitleDate>
      ....

Now it looks like this:

const Template = ({ data, pathContext }) => {
  const { markdownRemark: post } = data
  const { frontmatter, html } = post
  const { title, date } = frontmatter
  const { next, prev } = pathContext

  return (
    <BlogThemeProvider>
      <BlogThemeContext.Consumer>
        {({ theme }) => (
          <PostWrapper border={({ theme }) => theme.primary.light}>
            <Helmet title={`${title} - blog.scottspence.me`} />
            <Title>{title}</Title>
            <TitleDate>{date}</TitleDate>
            ....

Add a ThemeSelect component

The ThemeSelect component is a select component I have used several times now, here’s the source from my personal site, it’s what we’re going to use to handle the theme change, it will use the handleThemeChange method in the BlogThemeContext so we better use a Context consumer to access the method:

`src/layouts/components/Footer.js`

<BlogThemeContext.Consumer>
  {({ handleThemeChange }) => (
    <ThemeSelectWrapper>
      <ThemeSelect handleThemeChange={handleThemeChange} />
    </ThemeSelectWrapper>
  )}
</BlogThemeContext.Consumer>

Now if we have a look at the state in the React dev tools we can see the font changing with the selection of the theme change, much like in the styled-components 💅 getting started post.

Ok, success 💯 👌 now onto the background switching/transition thingy.

Switch hero (background patterns)

So, right now to switch between Steve Schoger’s awesome hero patterns I have a function sitting in the globalStyle module which returns a random HERO pattern:

export const randoHero = () => {
  const keys = Object.keys(HERO)
  return HERO[keys[(keys.length * Math.random()) << 0]]
}

This function sets the background on the body each reload with a random key from the HERO object, now I’m going to move that to the componentDidMount() of BlogThemeContext.Provider so (for now) it selects a random key from the object every ten seconds:

export class BlogThemeProvider extends React.Component {
  state = {
    theme: theme1,
    background: HERO[0]
  }

  handleThemeChange = e => {
    let theme = e.target.value
    theme === 'theme1' ? (theme = theme1) : (theme = theme2)
    this.setState({ theme })
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      const keys = Object.keys(HERO)
      const background =
        HERO[keys[(keys.length * Math.random()) << 0]]

      this.setState({ background })
    }, 10 * 1000)
  }

  render() {
  ....

Now to find somewhere in the app that can change the background! As I mentioned before the background for the page was set on the body via styled-components injectGlobal I now want to access the background prop from Context so I have moved this to src/layouts/index.js. I already have the Context consumer added for the theme so let’s destructure the background prop out as well:

const TemplateWrapper = ({ children }) => (
  <BlogThemeProvider>
    <BlogThemeContext.Consumer>
      {({ theme, background }) => (
        <ThemeProvider theme={theme}>
          <PageContainer background={background}>
            <Helmet title={nameContent} meta={siteMeta} />
            <Header />
            <Main>{children()}</Main>
            <Footer />
          </PageContainer>
          ....

Now use the background prop in the main wrapper PageContainer

We’re passing the both the background image and colour as styled-component props now.

const PageContainer = styled.div`
  background-color: ${props => props.theme.background};
  background-image: url("${props => props.background}");
  background-attachment: fixed;

That’s it! We have used the React Context API to access state and use it at (two) different points in the app.

Thanks for reading 🙏

Thanks you for looking at all the code walls!

If you have any feedback please get in touch

You can find all the source code to this on my repo for this project here: https://thelocalhost.io/

styled-components 💅 getting started

Tue, 03 Apr 2018 00:00:00 GMT

We’re going to style the basic create react app with styled-components to look something like this:

But first, preamble✨: I have always struggled with styling sites, it seems to be an aspect of starting web development that is either an afterthought or glossed over. Up until December last year I didn’t really like styling anything at all with CSS, it was a chore rather than something I enjoyed doing.

This was until I started using styled-components, when I joined a build to learn project for a Chingu voyage (grad.then() if you’re interested) we decided to use a CSS-in-JS package, Marina who was on my team was such an inspiration for me watching how components were styled and really gave me the confidence to start using styled-components.

me with css before

I want to share what I have learned so far by going through styling a basic react application.

There’s some basic CSS concepts in this post that I was not aware of before starting out with styled-components that I presume are assumed in styling web pages.

Styling the body element of a site is assumed, so for when you are starting out with a blank canvas there are some defaults for all modern web browsers you add to your site, like leaving font size at 16px (or 1rem) or box-sizing: border-box; there’s some packages out there to take care of this for you as well.

Install styled-components

Ok let’s bootstrap the basic react application you get when using Create React App with npx, if you already have Create React App installed globally then you can use the command without npx.

npx create-react-app style-with-styled-components
cd style-with-styled-components/
npm i styled-components

Ok, now we have the basic app we can style, thankfully Dan has kindly provided the starting styles for us so let’s begin my using them with styled-components.

The way the CRA CSS is laid out, assumes that you will have a corresponding CSS file for each component, which can help with maintaining the CSS and lends to the React idea of having all your files separated into their component parts.

We can start with the App.js file and it’s accompanying App.css file. Let’s take a look at the App.js first:

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to
          reload.
        </p>
      </div>
    )
  }
}
export default App

In styled-components we’d create components for each of these elements that replace the aforementioned className‘s. Ok we can start by migrating our styles into components, let’s do one component first to get an idea of where we’re going with this.

First, import styled into the App.js module:

import styled from 'styled-components'

Now let’s look at <div className="App">, it’s the top level div for this component and is what I like to call the wrapper for the component. So let’s give it an imaginative name AppWrapper.

Referring to the App.css there is text-align: center; which belongs to this, so:

const AppWrapper = styled.div`
  text-align: center;
`

So here we have defined the AppWrapper const as a styled.div followed by back ticks inside of the back ticks we can write any regular CSS with the exact same CSS syntax you wold in a normal .css file.

Now that we have our AppWrapper we can replace the top level div on the App.js component.

import React, { Component } from 'react'
import styled from 'styled-components'
import logo from './logo.svg'
import './App.css'
class App extends Component {
  render() {
    return (
      <AppWrapper>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to
          reload.
        </p>
      </AppWrapper>
    )
  }
}
export default App

styled-components all the things

So let’s do that for the remaining four CSS classes, and take a look, I’ll define them underneath the AppWrapper here:

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`
const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
`
const AppHeader = styled.div`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`
const AppTitle = styled.h1`
  font-size: 1.3em;
`
const AppIntro = styled.p`
  font-size: large;
`

So first off we’ve created a variable for the React svg animation, you’ll need to import the keyframes helper from styled-components like so:

import styled, { keyframes } from 'styled-components'

this can now be used throughout the App.js component and we can add an on hover selector to any of our styled-components within this module. Here we’re going to add it to the AppLogo to keep the super sweet rotating React logo.

const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1.5s linear;
  }
`

Ok, our app shouldn’t look any different as we haven’t added in our styled-components to the app render() method, so let’s do that now.

Let’s also change the intro text. You can add a wrapper for the <code> tags something like:

const CodeWrapper = styled.code`
  font-size: 1.3rem;
`

But if you prefer you can nest selectors within the component, like:

const AppIntro = styled.p`
  color: ${props => props.theme.dark};
  font-size: large;
  code {
    font-size: 1.3rem;
  }
`

Let’s have a look at the render() method now…

render() {
  return (
    <AppWrapper>
      <AppHeader>
        <AppLogo src={logo} alt="logo" />
        <AppTitle>Welcome to React</AppTitle>
      </AppHeader>
      <AppIntro>
        Bootstrapped with <code>create-react-app</code>.
      </AppIntro>
      <AppIntro>
        Components styled with <code>styled-components</code>{' '}
        <EmojiWrapper aria-label="nail polish"></EmojiWrapper>
      </AppIntro>
    </AppWrapper>
  )
}

Now all the classes originally used in App.js have been replaced so there’s no need for the import './App.css' mapping, remove that aaaaand! Still no change!! Which is a good thing because at the moment we’re swapping out the .css files for styled-components.

Cool, we have now replaced all the css with styled-components, now we can take a look at injectGlobal.

Let’s take a look at how the App.js file should look before we move on:

import React, { Component } from 'react'
import styled, { keyframes } from 'styled-components'
import logo from './logo.svg'

const AppWrapper = styled.div`
  text-align: center;
`

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`

const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1.5s linear;
  }
`

const AppHeader = styled.div`
  background-color: #222;
  height: 12rem;
  padding: 1rem;
  color: white;
`

const AppTitle = styled.h1`
  font-weight: 900;
`

const AppIntro = styled.p`
  font-size: large;
  code {
    font-size: 1.3rem;
  }
`

const EmojiWrapper = styled.span.attrs({
  role: 'img',
})``

class App extends Component {
  render() {
    return (
      <AppWrapper>
        <AppHeader>
          <AppLogo src={logo} alt="logo" />
          <AppTitle>Welcome to React</AppTitle>
        </AppHeader>
        <AppIntro>
          Bootstrapped with <code>create-react-app</code>.
        </AppIntro>
        <AppIntro>
          Components styled with <code>styled-components</code>{' '}
          <EmojiWrapper aria-label="nail polish" />
        </AppIntro>
      </AppWrapper>
    )
  }
}

export default App

Style the body with injectGlobal

For styling the body of our react app we currently have the index.css file that is being imported into the mounting point of our app in the index.js file.

To style the body we can use injectGlobal from styled-components which adds the styles directly to the stylesheet.

To do this you bring in the injectGolabl named export from styled-components and add your styles between the back ticks.

The current index.css looks like this:

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

Let’s add a theme folder in the src directory and add a globalStyle.js file where we can keep all our styles we want to use throughout the app, keeping the styles on one place will make changes simpler.

In src/theme/globalStyle.js we’ll need to import the injectGlobal named export from styled-components and add the index.css styles into it:

import { injectGlobal } from 'styled-components'

injectGlobal`
  body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
  }
`

Ok, now we’re adding the body style to the stylesheet directly so there is no need for the index.css file mapping that is in index.js it should look like this now:

import React from 'react' import ReactDOM from 'react-dom'

import App from './App'

import registerServiceWorker from './registerServiceWorker'

ReactDOM.render(<App />, document.getElementById('root'))

registerServiceWorker()

We should still have our nice sans-serif font going on, but let’s add in some nice Roboto for the body and Montserrat for the heading in our globalStyle.js module. We can import Google fonts with an @import in injectGlobal and apply Roboto to the body:

injectGlobal`
  @import url(‘https://fonts.googleapis.com/css?family=Montserrat|Roboto');
 
  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }
`

Cool now we can add our imported font for or app header, and there’s the option if we want all our <h1>’s to use the same font we can add that to the injectGlobal in our globalStyle.js module.

injectGlobal`
  @import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,900|Roboto');
  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }
  h1 {
    font-family: Montserrat;
  }
`

Then we can adjust the weight on the AppTitle component:

const AppTitle = styled.h1`
  font-weight: 900;
`

To add the additional styles for fonts like Montserrat and Roboto you can specify them in the @import url() you’ll notice that Montserrat has :400,900 after it that is specifying the styles regular (400) and black (900), you can import as many as you like from Google fonts (CDN) but the more you import the longer it will take to load them, if you have a lot of fonts and styles you want in your app then consider adding them to a folder in the project, like:

import Montserrat from './fonts/Montserrat-Regular.ttf'

injectGlobal`@font-face { font-family: Montserrat; src: url(${Montserrat}); }`

Theming

Themes are often used to change the look and feel of a wide range of things at once. For example, you may have a night and day mode like in Twitter. You can create your own themes in styled-components too.

Use the styled-components ThemeProvider

Now say we want to have several components in our app that use a CSS colour property color: #6e27c5 instead of hard coding it through the app for every component that uses it we can use the styled-components ThemeProvider.

For this we will need to import the ThemeProvider named export from styled-components, then define a theme object where our colour is going to live:

export const theme = {
  primary: '#6e27c5',
}

Let’s add the newly created theme to the globalStyle module we created previously.

To make the theme object available throughout the app component we’ll wrap our app component in the ThemeProvider and import our awesome theme for use in the ThemeProvider:

import React, { Component } from 'react'
import styled, { keyframes, ThemeProvider } from 'styled-components'
import logo from './logo.svg'
import { theme } from './theme/globalStyle'

// our styled-components

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        {/* all children can access the theme object */}
      </ThemeProvider>
    )
  }
}
export default App

Now the theme properties can be used as props in our styled-components, let’s change the background-color: in the AppHeader component, whilst we’re at it let’s add a dark: #222 property to our theme object and use that for the color property:

const AppHeader = styled.div`
  height: 12rem;
  padding: 1rem;
  color: ${props => props.theme.dark};
  background-color: ${props => props.theme.primary};
`

Now we can change our app theme globally

Ok cool, can you change theme?

This is what I was thinking and it turns out you can, there’s a great Stack Overflow answer from Max on it.

It got me thinking if you can switch between themes rather than define them for different sections like in the SO answer.

I started off by defining two themes (with imaginative names) in the globalStyle.js module:

export const theme1 = {
  primary: '#ff0198',
  secondary: '#01c1d6',
  danger: '#eb238e',
  light: '#f4f4f4',
  dark: '#222',
}

export const theme2 = {
  primary: '#6e27c5',
  secondary: '#ffb617',
  danger: '#f16623',
  light: '#f4f4f4',
  dark: '#222',
}

Now we need a way to switch between the two theme objects, let’s use a select box for them, let’s create a components folder and in there make a ThemeSelect.js component, we can worry about refactoring the App.js component when I’m not here :

ThemeSelect.js

import React from 'react'
import styled from 'styled-components'

const Select = styled.select`
  margin: 2rem 0.5rem;
  padding: 0rem 0.5rem;
  font-family: Roboto;
  font-size: 1rem;
  border: 1px solid ${props => props.theme.light};
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  background: ${props => props.theme.light};
  border-radius: 2px;
`

export const SelectOpt = styled.option`
  font-family: Roboto;
  font-size: 1rem;
`

class ThemeSelect extends React.Component {
  render() {
    return (
      <div>
        <Select onChange={e => this.props.handleThemeChange(e)}>
          <SelectOpt value="theme1">Theme 1</SelectOpt>
          <SelectOpt value="theme2">Theme 2</SelectOpt>
        </Select>
      </div>
    )
  }
}

export default ThemeSelect

You’ve probably noticed the onChange={e => this.props.handleThemeChange(e) event, we’re going to add that method to the App.js component along with some state to manage what theme is selected.

App.js

import React, { Component } from 'react'
import styled, { keyframes, ThemeProvider } from 'styled-components'

import logo from './logo.svg'

import { theme1, theme2 } from './theme/globalStyle'
import ThemeSelect from './components/ThemeSelect'

// our lovely styled-components here

class App extends Component {
  state = {
    theme: theme1,
  }
  handleThemeChange = e => {
    let theme = e.target.value
    theme === 'theme1' ? (theme = theme1) : (theme = theme2)
    this.setState({ theme })
  }
  render() {
    return (
      <ThemeProvider theme={this.state.theme}>
        <AppWrapper>
          <AppHeader>
            <AppLogo src={logo} alt="logo" />
            <AppTitle>Welcome to React</AppTitle>
          </AppHeader>
          <AppIntro>
            Bootstrapped with <code>create-react-app</code>.
          </AppIntro>
          <AppIntro>
            Components styled with <code>styled-components</code>{' '}
            <EmojiWrapper aria-label="nail polish" />
          </AppIntro>
          <ThemeSelect handleThemeChange={this.handleThemeChange} />
        </AppWrapper>
      </ThemeProvider>
    )
  }
}

export default App

To summarise what we have done with App.js here is, add some state to default to theme1 where the two themes are imported as named exports of the globalStyle.js module.

Add a method to handle the change of the ThemeSelect.js component handleThemeChange this is where we can switch between the two theme objects.

Let’s try it out, we should be able to switch between the two themes we’ve defined now.

Extending styled-components

So far our app hasn’t got many styled-components that are similar but what if we were to add some buttons…

export const Button = styled.button`
  font-size: 1rem;
  border-radius: 5px;
  padding: 0.25rem 1rem;
  margin: 0 1rem;
  background: transparent;
  color: ${props => props.theme.primary};
  border: 2px solid ${props => props.theme.primary};
  ${props =>
    props.primary &&
    css`
      background: ${props => props.theme.primary};
      color: white;
    `};
`

Here I’ve added a Button component to the globalStyle.js for us to use in the App.js component. For the sake of convenience we’re going to add it here, you may find if you have a lot of similar components that you are reusing throughout your app that it may be a good idea to add them all to a components folder.

We can import the Button as you would any other component and use it in the module, as we’re extending it this means we only need to apply the specific styles we want for that button. But first in the App.js component we can specify a normal and a primary button:

<button>Normal Button</button> <button primary>Primary Button</button>

Now to specify another button with the same css as the imported button we can extend it, like in this example we’ll make the button take up 40% of the screen width and make the corners more rounded:

const BigButt = Button.extend`
  height: 3rem;
  font-size: 2rem;
  width: 40vw;
  border-radius: 30px;
`

Let’s also apply the theme for an underline on create-react-app and styled-components by adding in an Underline styled-component:

const Underline = styled.span`
  border-bottom: 4px solid ${props => props.theme.secondary};
`

Now we can switch the theme and have it applied to our components using the theme, pretty neat, right?

I have put all of the examples we have gone over here in a working example for you to play around with the theming and styled-components, enjoy.

https://codesandbox.io/s/x26q7l9vyq?from-embed

Want to know more?

A great resource for getting started with styled-components which really helped me is Simon Vrachliotis’s egghead.io styled-components playlist which is a great foundation for starting out with styled-components 👌 the first lesson is for pro members but the rest are currently available to watch for free.

There’s also the spectrum.chat community and of course Stack Overflow.

Thanks for reading 🙏

If there is anything I have missed, or if you have a better way to do something then please let me know.

Find me on Twitter or Ask Me Anything on GitHub.

How to make time for 100 days of code

Tue, 27 Feb 2018 00:00:00 GMT

Life moves pretty fast. If you don’t stop and look around once in a while, you could miss it. — Ferris Bueller.

I’m going to go over steps I have taken the help me with learning to code (again)

But fist, preamble:

Let’s pick up a new skill, get a new job, all in a few months.

That was the overriding message I got when I started out in freeCodeCamp it’s a fun and exciting time and you will see a lot of articles along the lines of ‘hey look at me I was a school teacher before, now I’m earning \$100k as a engineer for x startup’

I don’t mean this in a mean spirited or passive aggressive way, but if you’re starting out in web development and you surround yourself with other people that want to achieve, they will, you know, achieve! 🙃

There’s a bit of expectation vs reality here, if you are the kind of person that can memorize the masses of information out there relating to your chosen field then you’re onto a winner, as for myself it’s repetition, repetition, repetition until it becomes habit, there’s a lot to be said about habits.

Forming habits takes time though, on 20161230 was when I decided to take part in the #100DaysOfCode challenge I couldn’t give you an idea of how I felt then but reviewing the log entries I seemed pretty confused and a little frustrated with it all.

That’s not to say it hasn’t been an enriching and life changing experience for me.

Along the way I have met some truly awesome, inspiring people, happy to help with any issues or problems you may have. The support I found not just in the #100DaysOfCode community but the web dev community as a whole is truly amazing.

Patience

Patience is needed, instant gratification doesn’t work here, well at least not for me. This will soon come to light if you start to compare yourself to how other people (your cohorts) are progressing. You may start to wonder why you are not progressing as fast as they appear to be progressing, this will probably add to any anxiety you may have about if you can do this thing or not. Do not concern yourself with this and instead use that energy to focus on what you need to do, code.

Different people progress at different rates and learn in different ways.

Myself personally, I have found that I’m a visual learner (I’ve known this for a long time actually) where to be able to ‘join up’ concepts/paradigms I need to see them in action. This is why I will always gush about courses by Wes Bos or Kent C. Dodds as they (among many others) are great at explaining complex subject simply and visually with their awesome content on egghead.io and wesbos.com.

YMMV however, so, find what works for you, find it and stick with it.

I have discovered recently that splitting my time between projects wasn’t really helping me so I decided to work on one particular project each time I sat down to code.

The first time I did this I was struggling for hours with little to nothing show for it, it felt futile and I was getting anxious about not moving on, it was at this point when I would usually switch context and work on something else - I found though that pushing that little bit more was all I needed.

This was such psychological win for me, and gave me the confidence to do more.

This has paid dividends as I now have 6+ demos of projects I have made on my portfolio

Busy work

I’s easy to get distracted, things like apps for slack and email and Twitter should not be opened, this will eat up your time. You have a set amount of time to get something done, this will come to light when you have finished reading your Twitter updates and Slack messages only to realise you have fifteen minutes left to complete the task you set out to do.

Soon into starting #100DaysOfCode I noticed this, what I did was turn off all my phone notifications - if you need to check something then check it, don’t let your phone dictate where your attention needs to be directed.

I turned off all browser notifications for Slack and Gmail. My phone is left in another room on do not disturb whilst I work. Whilst in do not disturb mode my phone will not make a noise unless someone on my stared contacts list calls me. I pick up the phone in the afternoon to check missed calls listen to voice mails and return any calls if needed.

Make time

Saying that you don’t have the time to do 1-2 hours of coding a day isn’t going to help, it’s though, but it’s not about having the time it’s about making the time to do this. If it’s important to you, you will make time. You’re the only one that can make these things happen.

Balance

This weight gain is a mixture of illness at the start of 2017 and bad diet choices thereafter. In the past I consciously opted for ‘healthy’ foods spending that little extra time deciding what to eat.

Whilst being ill at the start of 2017 I developed a bit of an addiction to cereals (granola) 😬 it was quick and easy and I got a quick boost from it.

Quick and easy soon became the norm after that 🙃 I have identified this now and am making an effort to reduce this whilst also making time for my development.

It’s a balance though 😀

Tools

Some tools I use to help me ‘get on’ with what I’ve set out to do, a while back I started using Todoist, this is great for when you’re scrolling through your Twitter feed and find a link to a really neat looking tutorial or post you want to read but don’t want to go down the rabbit hole of working out where to document it, I will add it to Todoist and come back to it when I get the capacity to work on it.

WakaTime is a great tool for quantifying your coding, pretty handy when doing #100DaysOfCode, you get that instant feedback on how you’re doing for the day.

RescueTime, is handy for helping you identify your productivity black holes and give you a nice breakdown of where your time is spent on your computer and mobile.

Life hacks

They just used to be called handy tips, now we need to call them hacks so we can think they’re cheating the system. In reality it’s some helpful rules to aid you if you need to find the extra time.

Get up early, I’ve taken to getting up an hour earlier than I used to to squeeze an hour and a half out of the morning, I have a MI band that I have set to vibrate to wake me at that time so I do not disturb my wife.

Go to bed early, sleep is important kids, anyone that says otherwise obviously doesn’t get enough sleep 🙃

Have a mobile phone? Download podcasts, download video tutorials and try to carve a bit of time out of your day to consume these, on your way to work on the train on your lunch break. All great ways to fill ‘empty time’. Whilst you’re out running or at the gym, great times to listen to podcasts.

Good luck 👍

When I finished my last (VBA) contract in October I used that time to fully immerse myself in web development.

At the time (which was good timing actually) I started a build to learn project with two other remote developers, one in Egypt and one in Serbia. We were all participating in the Chingu Voyage, this has been a real eye opener for me and has given me the confidence to get all my portfolio projects ready for potential employers to view.

Whilst taking part in the b2l Chingu project I got to treat this time as a full time job which my WakaTime stats will attest. This was one of the triggers for me that I should start applying for jobs as a junior dev.

Windows Subsystem Linux setup

Sat, 13 Jan 2018 00:00:00 GMT

I’m a Windows user, I have been a Linux user as well but I have found that Windows is a bit less neckbeardy for me, both have their pros and cons. One of the big cons with Windows for me was when I started learning web development.

That was until Windows Subsystem Linux came along 🙏

I love it, you can have a bash shell in Windows and run all your node apps through it too and with the Windows 10 Fall Creators Update WSL is really straightforward to set up.

Quick backstory on why I’m posting this: I nuked my laptop the other day as I was having issues with bash on Windows. Related partly to using nvm with WSL and generally getting frustrated with how my computer was performing. I realise now I over reacted.

So I have had to set up my development environment again from scratch, luckily for me I keep all my settings and config information in a GitHub repo in the event of me getting a new computer or to recover from a catastrophic event [like a nuked computer].

Here’s how I set up my Windows Subsystem Linux for my development environment.

This is my opinionated view on my specif setup and usage of WSL and this is my step by step guide for the next time I have to spin up a development environment from scratch on Windows.

So, after installing WSL from the Microsoft Store and adding your default user, fist thing is to update and upgrade all the things.

sudo apt update
sudo apt -y upgrade

If you’ve not used any Linux distributions before the -y in the upgrade statement is to default the answer to yes for any prompts that are displayed in the terminal. You might not want to do this, as there may be some programs you don’t want to update but I do.

You wont have these messages 👆

Build tools

To compile and install native addons from npm you may also need to install build tools, I need this for Gatsby images which uses sharp which in turn uses node-gyp:

sudo apt install -y build-essential

Install node

Installing node via the instructions given on the nodejs.org site doesn’t give the correct permissions for me, so when trying to npm install anything I get errors, I found using using n helps:

Install node with `n`

As it’s a fresh install then we can go ahead and use n-install with:

curl -L https://git.io/n-install | bash

This will install the latest stable version of node 👍

Once the script is complete restart bash with:

. /home/my_user_name/.bashrc # the n prompt displays this for you to copy pasta

Check your node and npm versions:

node -v && npm -v

Install fish 🐟🐚

Fish is now my go to shell purely for the auto complete/intellisense 👌 there’s also some nice themes you can get for it too.

There’s two options here, one is to use the standard package that come pre installed with the Ubuntu install or you can use the Fish PPA

Use the standard package:

sudo apt -y install fish
sudo apt -y upgrade && sudo apt -y autoremove

Use the Fish shell PPA:

sudo apt-add-repository ppa:fish-shell/release-2
sudo apt update && sudo apt -y install fish

Install Oh My Fish | OMF

Oh My Fish is like a package manager for Fish enabling the instal of packages and themes.

curl -L https://get.oh-my.fish | fish

Install OMF theme

omf install clearance

The start of the beginning

Ok, so that is a basic setup for WSL, you’ll probably want to get Git set up now, I have been using SSH over HTTPS for a while now on WSL.

At the time of writing this WSL Git integration with VSCode doesn’t work so I have added a Git install to my windows machine, you can omit this and go full Git via the terminal but I really like the VSCode git integration.

To get SSH set up on your machine take a look at this handy SSH setup. I say SSH instead of HTTPS 1. because I had all sorts of issues with the Git credential manager and the keyring manager in the end it was actually quicker to create an SSH key and authenticate with GitHub - the guide I linked walks you through it.

Move your dotfiles

If you have all your dotfiles backed up in a GitHub repo then now is a good time to add them to your WSL folder, the last times I did this I manually set the permissions after moving each of the the files but have since discovered rsync to move all the files.

rsync -avzh /mnt/c/Users/dotfiles/ ~/

That will copy the contents of my dotfiles folder to the ~/ (home) directory in WSL, you can check them with:

ls -la ~/

I copied across my .gitconfig, .gitignore and .npmrc dotfiles pictured here and you can see that the permissions are not consistent with the .bashrc file.

So, the only way I know how to change the file permissions is with chmod to get the ordinals of a similar file use stat:

stat -c "%a %n" ~/.*

This will list out all everything that begins with a . here’s mine:

777 /home/scott/.
755 /home/scott/..
600 /home/scott/.bash_history
644 /home/scott/.bash_logout
644 /home/scott/.bashrc
777 /home/scott/.cache
777 /home/scott/.config
777 /home/scott/.gitconfig
777 /home/scott/.gitignore
777 /home/scott/.local
777 /home/scott/.npm
777 /home/scott/.npmrc
644 /home/scott/.profile
644 /home/scott/.sudo_as_admin_successful

I only want to change .gitconfig, .gitignore and .npmrc here so I’m going to do this:

chmod 644 .gitconfig .gitignore .npmrc

And now my files look like this. 👍

Ok now were up and running with an up to date Ubuntu install, node and fish terminal. Of course there’s still the case of installing all your global npm packages you want for development now.

Git ` — allow-unrelated-histories`

Fri, 30 Jun 2017 00:00:00 GMT

How to combine two separate unrelated Git repositories into one with single history timeline.

Just adding a quick note on this…

I had a project that started off as it’s own project but it ended up needing to go into an already existing project, so I thought ok add it as a new branch on the existing project with git remote add origin then push the changes up to the origin then all is well with the world. That was until I tried to compare the branches…

There isn’t anything to compare? Bit misleading there as there is but the commit histories are different. How do you get around it, well the first Google result was a bit sparse with the details but then I found this which was more helpful. I needed to merge the disparate branches which is now disabled by default in git but can be enabled with the —allow-unrelated-histories flag.

git merge origin use-ts-bot --allow-unrelated-histories

This brought up, understandably, a few conflicts with the branch I wanted to merge with the origin.

Auto-merging package.json
CONFLICT (add/add): Merge conflict in package.json
Auto-merging package-lock.json
CONFLICT (add/add): Merge conflict in package-lock.json
Auto-merging README.md
CONFLICT (add/add): Merge conflict in README.md
Auto-merging .gitignore
CONFLICT (add/add): Merge conflict in .gitignore
Automatic merge failed; fix conflicts and then commit the result.

To get around this I just took the latest version of the use-ts-bot branch from my GitHub account and then and used that in place of the origin conflicts as what I’m working on will ultimately replace the master branch, so it was just a copy pasta into my VSCode then recommit the changes files. Phew! I now have a branch I can compare with the master that I will one day make a PR for 😅

Moving from beginner to (slightly more) advanced git with aliases.

Thu, 01 Jun 2017 00:00:00 GMT

Speed up your git workflow with git aliases, this is a brief introduction on using aliases 👌🚀👍

The more you work with Git the more familiar you become with the commands used in your every day workflow for your projects or your team’s projects.

Commands like naming and creating feature branches making pull requests or pushing your changes if you have the requisite permissions.

So still used by me on a daily basis, and everyone else that uses git [I presume] is the git add . command, then git commit -m 'my awesome feature' and git push or git push origin <branch>

In my short time using Git I have always just typed out the full commands [usually with my cheatsheet close to hand] and thought nothing more of it, that is how you use the tool, right?

Well that was what I foolishly presumed until I learned about dotfiles, I learned about . files from listening to the toolsday.io podcast with Chris and Una a great channel for learning about tooling 👍 the podcast was about Git Tools give it a listen it’s a great show.

This was a pretty cool learning experience for me and I now have a pretty efficient git workflow 🚀

Let’s go over .gitconfig, do you remember having to enter your email address and name when first setting up Git on your computer? That information is stored in your .gitconfig file, your file will be located in your user folder on Windows C:\Users\yourusername\.gitconfig or ~/.gitconfig on Linux/Mac

If you navigate to the file in the text editor of your choice and pop it open you’ll see your details under the [user] flag, here’s mine:

[user]
  name = spences10
  email = spences10apps@gmail.com

I’m not sure what other configuration options you may have in yours so we’re just going to concentrate on the aliases, aliases can be used so that you can shorten the commands [or make them longer if you like] but I’m all for reducing key strokes, even if it is one or two less.

So let’s review the common commands I mentioned at the start:

git add .
git commit -m 'my awesome feature'
git push

So with aliases we can shorten these down a bit:

In your .gitconfig file if there’s not already one there add in the [aliases] section, I have mine above my user details, then add in some aliases:

[alias]
  a = add .
  c = commit -am
  p = push

[user]
  name = spences10
  email = spences10apps@gmail.com

So now we can shorten down our workflow for adding a change to one of our repos:

git add .
git commit -m 'my awesome feature'
git push

Will become:

git a
git c 'my awesome feature'
git p

It’s not a massive reduction in what you’re typing but you’ll be amazed at how quickly you become accustomed to it and start adding more an more.

Here’s my current list of aliases:

[alias]
  a = add .
  b = branch
  c = commit -am
  cl = clone
  co = checkout
  d = diff
  f = fetch
  i = init
  o = open # see: https://github.com/paulirish/git-open ♥
  p = push
  pt = push --tags
  s = status
  t = tag

A new one I have found out whilst making this post is clone --depth 1 which clones only the HEAD of the repository instead of the whole repository, so say if you were cloning react you’d just get the master version rather than the other 38 branches included in the repository. Pretty neat 👍 so that could be aliased into something a lot shorter git cl1d?

You’ll no doubt notice the link I have in there for o = open that little gem belongs to Paul Irish it’s an npm package that will pop open a browser tab to the current repository you are in, pretty neat right?

I’m sure there are many, many more ways to configure Git if you take a look at Paul Irish’s dotfiles repo for his .gitconfig you’ll see there is a lot of ways to configure Git, I’m still learning and finding new ways to do things.

If there is anything I have missed, or if you have a better way to dom something then please let me know 👍

Get me on Twitter or Ask Me Anything on GitHub

If you like this post or if it has helped you in any way then please give it a like and don’t forget to share it on social media 🙌

Just starting out with Git and GitHub? It gets easier, honest!

Wed, 31 May 2017 00:00:00 GMT

No doubt you have heard of Git or GitHub for source control, but what is source control?

“Revision control (also known as version control, source control or (source) code management (SCM)) is the management of multiple revisions of the same unit of information.”

Cool story br0! In other words: Source control allows distributed work in teams of any size, at different locations, while avoiding conflicts in source code changes.

Really!? Thanks for clearing that up!

Lets look at it this way…

In its simplest term it’s like a “Save As”. You want the new file without getting rid of the changes on the old one. It’s an everyday situation, except on a software project there is the potential for a lot of changes.

https://twitter.com/lindakatcodes/status/869086021220261888

A familiar sentiment for anyone starting out with Git

Concepts

There are some basic concepts about version control I’ll quickly go over here, these terms used in many SCM systems some relevant to Git and GitHub some to other systems.

Repository/repo: The database storing the files.

Branch: Create a separate copy of a repo for use on your computer.

Revert/rollback: Go back to a previously saved version of the codebase/repo.

Push: Push is an access level on the repo, if you have no push access you will need to make a pull request.

Pull: If you have no Push access you can make a pull request which will notify the repo owner you want to merge your changes into their code.

If you are just starting out then your most used commands will probably be :

git add .
git commit -m 'some informative message'
git push origin master

Those commands have served me well in my early days of learning how to get my code back up to GitHub.

video: https://www.youtube.com/watch?v=CDeG4S-mJts

Git and GitHub Git and GitHub are two separate things, Git is a free and open source version control system whilst GitHub uses Git technology to host your repositories on the GitHub.com servers.

Git and GitHub were a bit confusing for me when I first started out with them, I was familiar with VCS before but that was in the shape of Microsoft’s Visual SourceSafe and Team Foundation Server where you have a nice GUI to guide you through the check-in and check-out process, for those the process was:

Check-out: make a copy of the repository you wanted to make changes to on your machine, once you have made your change then, Check-in your changes.
Check-in: add your changes back to the repository with an accompanying message detailing the change you have made.

With Git it’s a bit less fancy, all via the command line, but pretty much the same as with VSS and TFS.

Clone the repository: Make a copy of the repo on your machine.
Make changes.
Once the changes are made then add them back with accompanying commit messages.
Push the changes back to the repo on Github.

The documentation on GitHub is fantastic for anything you want to achieve and in this post I have referenced some the documentation.

It can get a bit overwhelming though, especially if you get out of sync, i.e. forget to pull a change made on the remote then try to check your changes in before pulling the changes into your local version. I’m by no means confident if things go a bit wrong but I have developed a “Commit Often Perfect Later” approach so if you do break something you din’t lose too much of you valuable time trying to work out what went wrong where.

If you take a look at a repo you have cloned from GitHub you will see there is a file called .git this is like a little database of all the changes you have made on your machine and it contains all the information it needs to connect to GitHub and make the changes it needs to make to the master repo [or whatever branch you’re pushing the changes to].

I made a cheat sheet Gist which I used every time I went near Git, it has now turned into a repo of other cheat sheets I still use on a daily basis.

In it I cover these situations:

Make a new project on your machine that you want to add to GitHub? Look here.
Cloning a repo from someone else’s GitHub and pushing it to a repo on my GitHub, or “I didn’t make a fork, what do I do now!”
You have a fork which you need to update before making any changes.

Workflow will be different for differing situations, for me as a noob developer I have tried to document anything I have come across with Git so I can reference back to it for that one time I need it but can’t remember what I did at 21:45 on a Wednesday just to get the code checked into GitHub.

There are many GUIs that integrate with Git for use with GitHub the official GitHub one is pretty nice but I quickly got into situations that the GUI couldn’t get me out of so I have stuck with the terminal since, well there is VSCode though which has a beautiful Git UI that I use daily, but there are some things that I still use the terminal for:

git status
git checkout <branch-name>
git [push] tags

All pretty handy, there is probably extensions out there to help with these but for now I’m pretty comfortable doing it via the command line.

Any tips or tricks you use in Git you’d like to share? Please feel free to leave a comment or better still add to the repo via a pull request.

If any of this has helped you in any way feel free to like the article and share it on social media.

Many thanks.

Twitter bot playground

Tue, 23 May 2017 00:00:00 GMT

How to build and deploy a multifunctional Twitter bot!

This is a reference for me and anyone else that’s interested in Twitter bots in JavaScript.

All of the examples here use the npm package twit.

We’ll go through setting up a simple bot so each of these examples can be run with it.

I’m going to assume that you have nodejs installed along with npm and that you are comfortable with the terminal.

If you are not familiar node or do not have your environment set up to use it take a look at the README.md on my Twitter bot bootstrap repo which details getting a Twitter application set up and a development environment with c9.

A great resource is Aman Mittal’s Awesome Twitter bots repo which has resources and bot examples.

A lot of this information is already out there I’m hoping this is all the information someone will need to get started with their own Twitter bot. I’m doing this for my own learning and hopefully other people will get something out of this as well.

Set up the bot

Before touching the terminal or writing any code we’ll need to create a Twitter app to get our API keys, we’ll need them all:

Consumer Key (API Key)
Consumer Secret (API Secret)
Access Token
Access Token Secret

Keep the keys somewhere safe so you can use them again when you need them, we’re going to be using them in the .env file we’re going to create.

We’re using dotenv so that if at some point in the future we want to add our bot to GitHub the Twitter API keys are not added to GitHub for all to see.

Starting from scratch, create a new folder via the terminal and initialise the package.json via npm or yarn we’ll need twit and dotenv for all these examples.

I’ll be using yarn for all these examples, you can use npm if you prefer.

Terminal commands:

mkdir tweebot-play
cd tweebot-play
yarn init -y
yarn add twit dotenv
touch .env .gitignore index.js

If you take a look at the package.json that was created it should look something like this:

{
  "name": "tweebot-play",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Scott Spence <spences10apps@gmail.com> (https://spences10.github.io/)",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^4.0.0",
    "twit": "^2.2.5"
  }
}

Add an npm script to the package.json to kick off the bot when we’re testing and looking for output:

  "scripts": {
    "start": "node index.js"
  },

It should look something like this now:

{
  "name": "tweebot-play",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "Scott Spence <spences10apps@gmail.com> (https://spences10.github.io/)",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^4.0.0",
    "twit": "^2.2.5"
  }
}

Now we can add the following pointer to the bot in index.js, like so:

require('./src/bot')

So when we use yarn start to run the bot it calls the index.js file which runs the bot.js file from the src folder we’re going to create.

Now we add our API keys to the .env file, it should look something like this:

CONSUMER_KEY=AmMSbxxxxxxxxxxNh4BcdMhxg
CONSUMER_SECRET=eQUfMrHbtlxxxxxxxxxxkFNNj1H107xxxxxxxxxx6CZH0fjymV
ACCESS_TOKEN=7xxxxx492-uEcacdl7HJxxxxxxxxxxecKpi90bFhdsGG2N7iII
ACCESS_TOKEN_SECRET=77vGPTt20xxxxxxxxxxxZAU8wxxxxxxxxxx0PhOo43cGO

In the .gitignore file we need to add .env and node_modules

# Dependency directories
node_modules

# env files
.env

Then init git:

git init

Ok, now we can start to configure the bot, we’ll need a src folder a bot.js file and a config.js file.

Terminal:

mkdir src
cd src
touch config.js bot.js

Then we can set up the bot config, open the config.js file and add the following:

require('dotenv').config()

module.exports = {
  consumer_key: process.env.CONSUMER_KEY,
  consumer_secret: process.env.CONSUMER_SECRET,
  access_token: process.env.ACCESS_TOKEN,
  access_token_secret: process.env.ACCESS_TOKEN_SECRET,
}

Ok, that’s the bot config done now we can set up the bot, each of the examples detailed here will have the same three lines of code:

const Twit = require('twit')
const config = require('./config')

const bot = new Twit(config)

Ok, that’s it out bot is ready to go, do a test with yarn start from the terminal, we should get this for output:

yarn start
yarn start v0.23.4
$ node index.js
Done in 0.64s.

Bot is now configured and ready to go!🚀

Post Statuses

Firstly post statuses, with .post('statuses/update'... bot will post a hello world! status.

bot.post(
  'statuses/update',
  {
    status: 'hello world!',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(`${data.text} tweeted!`)
    }
  }
)

Work with users

To get a list of followers ids use .get('followers/ids'... and include the account that you want the followers of, in this example we’re using @DroidScott, you can use any account you like. We can then log them out to the console in this example.

bot.get(
  'followers/ids',
  {
    screen_name: 'DroidScott',
    count: 5,
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
    }
  }
)

You can specify with the count parameter how many results you get up to 100 at a time.

Or to get a detailed list you can use .get('followers/list'...

Here we print off a list of user.screen_name’s up to 200 per call.

bot.get(
  'followers/list',
  {
    screen_name: 'DroidScott',
    count: 200,
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      data.users.forEach(user => {
        console.log(user.screen_name)
      })
    }
  }
)

To follow back a follower we can use .post('friendships/create'... here the bot is following back the user MarcGuberti

A bot should only follow users that follow the bot.

bot.post(
  'friendships/create',
  {
    screen_name: 'MarcGuberti',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
    }
  }
)

Like with followers you can get a list of accounts that your bot is following back.

bot.get(
  'friends/ids',
  {
    screen_name: 'DroidScott',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
    }
  }
)

And also a detailed list.

bot.get(
  'friends/list',
  {
    screen_name: 'DroidScott',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
    }
  }
)

Get friendship status, this is useful for following new followers, this will give us the relation of a specific user. So you can run through your followers list and follow back any users that do not have the following connection.

Let’s take a look at the relation between our bot and @spences10

bot.get(
  'friendships/lookup',
  {
    screen_name: 'spences10',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
    }
  }
)

If the user follows the bot, then relationship will be:

[ { name: 'Scott Spence 🌯😴💻♻',
    screen_name: 'spences10',
    id: 4897735439,
    id_str: '4897735439',
    connections: [ 'followed_by' ] } ]

If the user and the bot are following each other, the relationship will be:

[ { name: 'Scott Spence 🌯😴💻♻',
    screen_name: 'spences10',
    id: 4897735439,
    id_str: '4897735439',
    connections: [ 'following', 'followed_by' ] } ]

And if there is no relationship then:

[ { name: 'Scott Spence 🌯😴💻♻',
    screen_name: 'spences10',
    id: 4897735439,
    id_str: '4897735439',
    connections: [ 'none' ] } ]

Direct Message a user with bot.post('direct_messages/new'...

A bot should only DM a user that is following the bot account

bot.post(
  'direct_messages/new',
  {
    screen_name: 'spences10',
    text: 'Hello from bot!',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
    }
  }
)

Interact with tweets

To get a list of tweets in the bots time line use .get(statuses/home_timeline'...

bot.get(
  'statuses/home_timeline',
  {
    count: 1,
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data)
    }
  }
)

To be more granular you can pull out specific information on each tweet.

bot.get(
  'statuses/home_timeline',
  {
    count: 5,
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      data.forEach(t => {
        console.log(t.text)
        console.log(t.user.screen_name)
        console.log(t.id_str)
        console.log('\n')
      })
    }
  }
)

To retweet use .post('statuses/retweet/:id'... and pass in a tweet id to retweet.

bot.post(
  'statuses/retweet/:id',
  {
    id: '860828247944253440',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(`${data.text} retweet success!`)
    }
  }
)

To unretweet just use .post('statuses/unretweet/:id'...

bot.post(
  'statuses/unretweet/:id',
  {
    id: '860828247944253440',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(`${data.text} unretweet success!`)
    }
  }
)

To like a tweet use .post('favorites/create'...

bot.post(
  'favorites/create',
  {
    id: '860897020726435840',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(`${data.text} tweet liked!`)
    }
  }
)

To unlike a post use .post('favorites/destroy'...

bot.post(
  'favorites/destroy',
  {
    id: '860897020726435840',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(`${data.text} tweet unliked!`)
    }
  }
)

To reply to a tweet is much the same a posting a tweet but you need to include the in_reply_to_status_id parameter, but that’s not enough as you will also need to put in the screen name of the person you are replying to.

bot.post(
  'statuses/update',
  {
    status: '@spences10 I reply to you yes!',
    in_reply_to_status_id: '860900406381211649',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(`${data.text} tweeted!`)
    }
  }
)

Finally if you want to delete a tweet use .post('statuses/destroy/:id'... passing the tweet id you want to delete.

bot.post(
  'statuses/destroy/:id',
  {
    id: '860900437993676801',
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(`${data.text} tweet deleted!`)
    }
  }
)

Use Twitter search

To use search use .get('search/tweets',... there are quite a few search parameters for search.

q: '' the Q is for query so to search for mango use q: 'mango' we can also limit the results returned with count: n so let’s limit it the count to in the example:

bot.get(
  'search/tweets',
  {
    q: 'mango',
    count: 5,
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      console.log(data.statuses)
    }
  }
)

Like we did with the timeline we will pull out specific items from the data.statuses returned, like this:

bot.get(
  'search/tweets',
  {
    q: 'mango',
    count: 5,
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      data.statuses.forEach(s => {
        console.log(s.text)
        console.log(s.user.screen_name)
        console.log('\n')
      })
    }
  }
)

The search API returns for relevance and not completeness, if you want to search for an exact phrase you’ll need to wrap the query in quotes "purple pancakes" if you want to search for one of two words then use OR like 'tabs OR spaces' if you want to search for both use AND like 'tabs AND spaces'.

If you want to search for a tweet without another word use - like donald -trump you can use it multiple times as well, like donald -trump -duck

You can search for tweets with emoticons, like q: 'sad :(' try it!

Of course look for hashtags q: '#towie'. Look for tweets to a user q: 'to:@stephenfry' or from a user q: 'from:@stephenfry'

You can filter out indecent tweets with the filter:safe parameter you can also use it to filter for media tweets which will return tweets containing video. You can specify for images to view tweets with images and you can specify links for tweets with links.

If you want tweets from a certain website you can specify with the url parameter like url:asda

bot.get(
  'search/tweets',
  {
    q:
      'from:@dan_abramov url:facebook filter:images since:2017-01-01',
    count: 5,
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      data.statuses.forEach(s => {
        console.log(s.text)
        console.log(s.user.screen_name)
        console.log('\n')
      })
    }
  }
)

Last few now, there’s the result_type parameter that will return recent, popular or mixed results.

The geocode parameter that take the format latitude longitude then radius in miles '51.5033640,-0.1276250,1mi' example:

bot.get(
  'search/tweets',
  {
    q: 'bacon',
    geocode: '51.5033640,-0.1276250,1mi',
    count: 5,
  },
  (err, data, response) => {
    if (err) {
      console.log(err)
    } else {
      data.statuses.forEach(s => {
        console.log(s.text)
        console.log(s.user.screen_name)
        console.log('\n')
      })
    }
  }
)

Use Twitter Stream API

There are two ways to use the Stream API first there’s .stream('statuses/sample') example:

const stream = bot.stream('statuses/sample')

stream.on('tweet', t => {
  console.log(`${t.text}\n`)
})

This will give you a random sampling of tweets.

For more specific information use .stream('statuses/filter')... then pass some parameters, use track: to specify a search string:

var stream = bot.stream('statuses/filter', {
  track: 'bot',
})

stream.on('tweet', function (t) {
  console.log(t.text + '\n')
})

You can also use multiple words in the track parameter, tis will get you results with either twitter or bot in them.

const stream = bot.stream('statuses/filter', {
  track: 'twitter, bot',
})

stream.on('tweet', t => {
  console.log(`${t.text}\n`)
})

If you want both words then remove the comma , you can think of spaces as AND and commas as OR

You can also use the follow: parameter which lets you input the ids of specific users, example:

const stream = bot.stream('statuses/filter', {
  follow: '4897735439',
})

stream.on('tweet', t => {
  console.log(`${t.text}\n`)
})

Tweet media files

This egghead.io video is a great resource for this section thanks to Hannah Davis for the awesome content!

This will be a request to get the NASA image of the day and tweet it.

For this we will need references to request and fs for working with the file system.

const Twit = require('twit')
const request = require('request')
const fs = require('fs')
const config = require('./config')

const bot = new Twit(config)

First up get the photo from the NASA api, for this we will need to create a parameter object inside our getPhoto function that will be passed to the node HTTP client request for the image:

function getPhoto() {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY,
    },
    encoding: 'binary',
  }
}

The parameters specify an api_key for this you can apply for an API key or you can use the DEMO_KEY this API key can be used for initially exploring APIs prior to signing up, but it has much lower rate limits, so you’re encouraged to signup for your own API key.

In the example you can see that I have configured my key with the rest of my .env variables.

CONSUMER_KEY=AmMSbxxxxxxxxxxNh4BcdMhxg
CONSUMER_SECRET=eQUfMrHbtlxxxxxxxxxxkFNNj1H107xxxxxxxxxx6CZH0fjymV
ACCESS_TOKEN=7xxxxx492-uEcacdl7HJxxxxxxxxxxecKpi90bFhdsGG2N7iII
ACCESS_TOKEN_SECRET=77vGPTt20xxxxxxxxxxxZAU8wxxxxxxxxxx0PhOo43cGO

NASA_KEY=DEMO_KEY

Now to use the request to get the image:

function getPhoto() {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY,
    },
    encoding: 'binary',
  }
  request.get(parameters, (err, respone, body) => {
    body = JSON.parse(body)
    saveFile(body, 'nasa.jpg')
  })
}

In the request we pass in our parameters and parse the body as JOSN so we can save it with the saveFile function which we’ll go over now:

function saveFile(body, fileName) {
  const file = fs.createWriteStream(fileName)
  request(body)
    .pipe(file)
    .on('close', err => {
      if (err) {
        console.log(err)
      } else {
        console.log('Media saved!')
        console.log(body)
      }
    })
}

request(body).pipe(file).on('close'... is what saves the file from the file variable which has the name passed to it nasa.jpg from the getPhoto function.

Calling getPhoto() should now save the NASA image of the day to the root of your project.

Now we can share it on Twitter 😎

Two parts to this, first save the file.

function saveFile(body, fileName) {
  const file = fs.createWriteStream(fileName)
  request(body)
    .pipe(file)
    .on('close', err => {
      if (err) {
        console.log(err)
      } else {
        console.log('Media saved!')
        const descriptionText = body.title
        uploadMedia(descriptionText, fileName)
      }
    })
}

Then uploadMedia to upload media to Twitter before we can post it, this had me stumped for a bit as I have my files in a src folder, if you have your bot files nested in folders then you will need to do the same if you are struggling with file does not exist errors:

Add a require to path then use join with the relevant relative file path.

const path = require('path')
//...
const filePath = path.join(__dirname, '../' + fileName)

Complete function here:

function uploadMedia(descriptionText, fileName) {
  console.log(`uploadMedia: file PATH ${fileName}`)
  bot.postMediaChunked(
    {
      file_path: fileName,
    },
    (err, data, respone) => {
      if (err) {
        console.log(err)
      } else {
        console.log(data)
        const params = {
          status: descriptionText,
          media_ids: data.media_id_string,
        }
        postStatus(params)
      }
    }
  )
}

Then with the params we created in uploadMedia we can post with a straightforward .post('statuses/update'...

function postStatus(params) {
  bot.post('statuses/update', params, (err, data, respone) => {
    if (err) {
      console.log(err)
    } else {
      console.log('Status posted!')
    }
  })
}

Call the getPhoto() function top post to Twitter… super straight forward, right 😀 no, I know it wasn’t. Here’s the complete module:

Click to expand

const Twit = require('twit')
const request = require('request')
const fs = require('fs')
const config = require('./config')
const path = require('path')

const bot = new Twit(config)

function getPhoto() {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY,
    },
    encoding: 'binary',
  }
  request.get(parameters, (err, respone, body) => {
    body = JSON.parse(body)
    saveFile(body, 'nasa.jpg')
  })
}

function saveFile(body, fileName) {
  const file = fs.createWriteStream(fileName)
  request(body)
    .pipe(file)
    .on('close', err => {
      if (err) {
        console.log(err)
      } else {
        console.log('Media saved!')
        const descriptionText = body.title
        uploadMedia(descriptionText, fileName)
      }
    })
}

function uploadMedia(descriptionText, fileName) {
  const filePath = path.join(__dirname, `../${fileName}`)
  console.log(`file PATH ${filePath}`)
  bot.postMediaChunked(
    {
      file_path: filePath,
    },
    (err, data, respone) => {
      if (err) {
        console.log(err)
      } else {
        console.log(data)
        const params = {
          status: descriptionText,
          media_ids: data.media_id_string,
        }
        postStatus(params)
      }
    }
  )
}

function postStatus(params) {
  bot.post('statuses/update', params, (err, data, respone) => {
    if (err) {
      console.log(err)
    } else {
      console.log('Status posted!')
    }
  })
}

getPhoto()

Make a Markov bot

This is pretty neat, again from the egghead.io series it uses rita natural language toolkit. It also uses csv-parse as we’re going to be reading out our Twitter archive to make the bot sound like us tweeting.

First of all, to set up the Twitter archive, you’ll need to request your data from the Twitter settings page. You’ll be emailed a link to download your archive, then when you have downloaded the archive extract out the tweets.csv file, we’ll then put that in it’s own folder, so from the root of your project:

cd src
mkdir twitter-archive

We’ll move our tweets.csv there to be accessed by the bot we’re going to go over now.

Use fs to set up a read stream…

const filePath = path.join(__dirname, './twitter-archive/tweets.csv')

const tweetData = fs
  .createReadStream(filePath)
  .pipe(
    csvparse({
      delimiter: ',',
    })
  )
  .on('data', row => {
    console.log(row[5])
  })

When you run this from the console you should get the output from your Twitter archive.

Now clear out things like @ and RT to help with the natural language processing we’ll set up two functions cleanText and hasNoStopWords

cleanText will tokenize the text delimiting it on space ' ' filter out the stop words then .join(' ') back together with a space and .trim() any whitespace that may be at the start of the text.

function cleanText(text) {
  return rita.RiTa.tokenize(text, ' ')
    .filter(hasNoStopWords)
    .join(' ')
    .trim()
}

The tokenized text can then be fed into the hasNoStopWords function to be sanitized for use in tweetData

function hasNoStopWords(token) {
  const stopwords = ['@', 'http', 'RT']
  return stopwords.every(sw => !token.includes(sw))
}

Now that we have the data cleaned we can tweet it, so replace console.log(row[5]) with inputText = inputText + ' ' + cleanText(row[5]) then we can use rita.RiMarkov(3) the 3 being the number of words to take into consideration. Then use markov.generateSentences(1) with 1 being the number of sentences being generated. We’ll also use .toString() and .substring(0, 140) to truncate the result down to 140 characters.

const tweetData =
  fs.createReadStream(filePath)
  .pipe(csvparse({
    delimiter: ','
  }))
  .on('data', function (row) {
    inputText = `${inputText} ${cleanText(row[5])}`
  })
  .on('end', function(){
    const markov = new rita.RiMarkov(3)
    markov.loadText(inputText)
    const sentence = markov.generateSentences(1)
      .toString()
      .substring(0, 140)
  }

Now we can tweet this with the bot using .post('statuses/update'... passing in the sentence variable as the status logging out when there is a tweet.

const tweetData =
  fs.createReadStream(filePath)
    .pipe(csvparse({
      delimiter: ','
    }))
    .on('data', row => {
      inputText = `${inputText} ${cleanText(row[5])}`
    })
    .on('end', () => {
      const markov = new rita.RiMarkov(3)
      markov.loadText(inputText)
      const sentence = markov.generateSentences(1)
        .toString()
        .substring(0, 140)
      bot.post('statuses/update', {
        status: sentence
      }, (err, data, response) => {
        if (err) {
          console.log(err)
        } else {
          console.log('Markov status tweeted!', sentence)
        }
      })
    })
}

If you want your sentences to be closer to the input text you can increase the words to consider in rita.RiMarkov(6) and if you want to make it gibberish then lower the number.

Here’s the completed module:

Click to expand

const Twit = require('twit')
const fs = require('fs')
const csvparse = require('csv-parse')
const rita = require('rita')
const config = require('./config')
const path = require('path')

let inputText = ''

const bot = new Twit(config)

const filePath = path.join(__dirname, '../twitter-archive/tweets.csv')

const tweetData =
  fs.createReadStream(filePath)
    .pipe(csvparse({
      delimiter: ','
    }))
    .on('data', row => {
      inputText = `${inputText} ${cleanText(row[5])}`
    })
    .on('end', () => {
      const markov = new rita.RiMarkov(10)
      markov.loadText(inputText)
      const sentence = markov.generateSentences(1)
        .toString()
        .substring(0, 140)
      bot.post('statuses/update', {
        status: sentence
      }, (err, data, response) => {
        if (err) {
          console.log(err)
        } else {
          console.log('Markov status tweeted!', sentence)
        }
      })
    })
}

function hasNoStopWords(token) {
  const stopwords = ['@', 'http', 'RT']
  return stopwords.every(sw => !token.includes(sw))
}

function cleanText(text) {
  return rita.RiTa.tokenize(text, ' ')
    .filter(hasNoStopWords)
    .join(' ')
    .trim()
}

Retrieve and Tweet data from Google sheets

If you want to tweet a list of links you can use tabletop to work though the list, in this example again from egghead.io we’ll go through a list of links.

So, set up the bot and require tabletop:

const Twit = require('twit')
const config = require('./config')
const Tabletop = require('tabletop')

const bot = new Twit(config)

On your Google spreadsheet you’ll need to have a header defined and then add your links, we’ll use the following for an example:

links
https://www.freecodecamp.com
https://github.com
https://www.reddit.com
https://twitter.com

Now from Google sheets we can select ‘File’>‘Publish to the web’ and copy the link that is generated we can use that in table top.

Now init Table top with three parameters, key: which is the spreadsheet URL, a callback: function to get the data and simpleSheet: which is true if you only have one sheet, like in our example here:

const spreadsheetUrl =
  'https://docs.google.com/spreadsheets/d/1842GC9JS9qDWHc-9leZoEn9Q_-jcPUcuDvIqd_MMPZQ/pubhtml'

Tabletop.init({
  key: spreadsheetUrl,
  callback(data, tabletop) {
    console.log(data)
  },
  simpleSheet: true,
})

Running the bot now should give output like this:

$ node index.js
[ { 'links': 'https://www.freecodecamp.com' },
  { 'links': 'https://github.com' },
  { 'links': 'https://www.reddit.com' },
  { 'links': 'https://twitter.com' } ]

So now we can tweet them using .post('statuses/update',... with a forEach on the data that is returned in the callback:

Tabletop.init({
  key: spreadsheetUrl,
  callback(data, tabletop) {
    data.forEach(d => {
      const status = `${d.links} a link from a Google spreadsheet`
      bot.post(
        'statuses/update',
        {
          status,
        },
        (err, response, data) => {
          if (err) {
            console.log(err)
          } else {
            console.log('Post success!')
          }
        }
      )
    })
  },
  simpleSheet: true,
})

Note that ${d.links} is the header name we use in the Google spreadsheet, I tried using skeleton and camel case and both returned errors so I went with a single name header on the spreadsheet.

The completed code here:

Click to expand

const Twit = require('twit')
const config = require('./config')
const Tabletop = require('tabletop')

const bot = new Twit(config)

const spreadsheetUrl =
  'https://docs.google.com/spreadsheets/d/1842GC9JS9qDWHc-9leZoEn9Q_-jcPUcuDvIqd_MMPZQ/pubhtml'

Tabletop.init({
  key: spreadsheetUrl,
  callback(data, tabletop) {
    data.forEach(d => {
      const status = `${d.links} a link from a Google spreadsheet`
      console.log(status)
      bot.post(
        'statuses/update',
        {
          status,
        },
        (err, response, data) => {
          if (err) {
            console.log(err)
          } else {
            console.log('Post success!')
          }
        }
      )
    })
  },
  simpleSheet: true,
})

Putting it all together

Ok, so those examples were good n’ all but we haven’t really got a bot out of this have we? I mean you run it from the terminal and that’s it done, we want to be able to kick off the bot and leave it to do its thing.

One way I have found to do this is to use setInterval which will kick off events from the main bot.js module, so let’s try this:

Take the example we did to tweet a picture and add it to it’s own module, so from the root directory of our project:

cd src
touch picture-bot.js

Take the example code from that and paste it into the new module, then we’re going to make the following changes, to getPhoto:

const getPhoto = () => {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY,
    },
    encoding: 'binary',
  }
  request.get(parameters, (err, respone, body) => {
    body = JSON.parse(body)
    saveFile(body, 'nasa.jpg')
  })
}

Then at the bottom of the module add:

module.exports = getPhoto

So now we can call the getPhoto function from the picture-bot.js module in our bot.js module, our bot.js module should look something like this:

const picture = require('./picture-bot')

picture()

That’s it, two lines of code, try running that from the terminal now:

yarn start

We should get some output like this:

yarn start v0.23.4
$ node index.js
Media saved!
file PATH C:\Users\path\to\project\tweebot-play\nasa.jpg
{ media_id: 863020197799764000,
  media_id_string: '863020197799763968',
  size: 371664,
  expires_after_secs: 86400,
  image: { image_type: 'image/jpeg', w: 954, h: 944 } }
Status posted!
Done in 9.89s.

Ok, so thats the picture of the day done, but it has run once and completed we need to put it on an interval with setInterval which we need to pass two options to, the function it’s going to call and the timeout value.

The picture updates every 24 hours so that will be how many milliseconds in 24 hours [8.64e+7] I don’t even 🤷‍

I work it out like this, 1000 60 = 1 minute, so 1000 60 60 24 so for now let’s add that directly into the setInterval function:

const picture = require('./picture-bot')

picture()
setInterval(picture, 1000 * 60 * 60 * 24)

Cool, that’s a bot that will post the NASA image of the day every 24 hours!

Let’s keep going, now let’s add some randomness in with the Markov bot, like we did in the picture of the day example, let’s create a new module for the Markov bot and add all the code in there from the previous example, so from the terminal:

cd src
touch markov-bot.js

Then copy pasta the markov bot example into the new module, then we’re going to make the following changes:

const tweetData = () => {
  fs.createReadStream(filePath)
    .pipe(
      csvparse({
        delimiter: ',',
      })
    )
    .on('data', row => {
      inputText = `${inputText} ${cleanText(row[5])}`
    })
    .on('end', () => {
      const markov = new rita.RiMarkov(10)
      markov.loadText(inputText).toString().substring(0, 140)
      const sentence = markov.generateSentences(1)
      bot.post(
        'statuses/update',
        {
          status: sentence,
        },
        (err, data, response) => {
          if (err) {
            console.log(err)
          } else {
            console.log('Markov status tweeted!', sentence)
          }
        }
      )
    })
}

Then at the bottom of the module add:

module.exports = tweetData

Ok, same again as with the picture bot example we’re going to add the tweetData export from markov-bot.js to our bot.js module, which should now look something like this:

const picture = require('./picture-bot')
const markov = require('./markov-bot')

picture()
setInterval(picture, 1000 * 60 * 60 * 24)

markov()

Let’s make the Markov bot tweet at random intervals between 5 minutes and 3 hours

const picture = require('./picture-bot')
const markov = require('./markov-bot')

picture()
setInterval(picture, 1000 * 60 * 60 * 24)

const markovInterval = (Math.floor(Math.random() * 180) + 1) * 1000
markov()
setInterval(markov, markovInterval)

Allrighty! Picture bot, Markov bot, done 👍

Do the same with the link bot? Ok, same as before, you get the idea now, right?

Create a new file in the src folder for link bot:

touch link-bot.js

Copy pasta the code from the link bot example into the new module, like this:

const link = () => {
  Tabletop.init({
    key: spreadsheetUrl,
    callback(data, tabletop) {
      data.forEach(d => {
        const status = `${d.links} a link from a Google spreadsheet`
        console.log(status)
        bot.post(
          'statuses/update',
          {
            status,
          },
          (err, response, data) => {
            if (err) {
              console.log(err)
            } else {
              console.log('Post success!')
            }
          }
        )
      })
    },
    simpleSheet: true,
  })
}

module.exports = link

Then we can call it from the bot, so it should look something like this:

const picture = require('./picture-bot')
const markov = require('./markov-bot')
const link = require('./link-bot')

picture()
setInterval(picture, 1000 * 60 * 60 * 24)

const markovInterval = (Math.floor(Math.random() * 180) + 1) * 1000
markov()
setInterval(markov, markovInterval)

link()
setInterval(link, 1000 * 60 * 60 * 24)

Ok? Cool 👍😎

We can now leave the bot running to do its thing!!

Deploy to now

Right, we have a bot that does a few things but it’s on our development environment, so it can’t stay there forever, well it could but it’d be pretty impcratcical. Let’s put our bot on a server somewhere to do it’s thing.

To do this we’re going to be using now, now allows for simple deployments from the CLI if you’re not fimailiar with now then take a quick look at the documentation in these examples we’re going to be using the now-cli.

There’s a few things we need to do in order to get our bot ready to go on now, let’s list them quickly and then go into detail.

Signup and install now-cli
Add now settings + .npmignore file
Add .env variables as secrets
Add npm deploy script
Re jig picture-bot.js

Ready? Let’s do this! 💪

Signup and install now-cli

Fist up let’s signup for zeit ▲ create an account and authenticate, then we can install the CLI.

Install now globally on our machine so you can use it everywhere, to install the now-cli from the terminal enter:

npm install -g now

Once it’s completed login with:

now --login

The first time you run now, it’ll ask for your email address in order to identify you. Go to the email account to supplied when sigining up an click on the email sent to you from now, and you’ll be logged in automatically.

If you need to switch the account or re-authenticate, run the same command again.

You can always check out the now-cli documentation for more information along with the your first deployment guide.

Add now settings

Ok, so that’s signup and install sorted, we can now configure the bot for deploying to now. First up let’s add the now settings to our package.json file, I’ve put it in between my npm scripts and the author name in my package.json:

"scripts": {
    "start": "node index.js"
  },
  "now": {
    "alias": "my-awesome-alias",
    "files": [
      "src",
      "index.js"
    ]
  },
  "author": "Scott Spence",

This was a source of major confusion for me so I’m hoping I can save you the pain I went through trying to configure this, all the relevant documentation is there you just need to put it all together 😎

If you find anything in here that doesn’t make sense or is just outright wrong then please log an issue or create a pull request 👍

The now settings alias is to give your deployment a shothand name over the auto generated URL that now creates, the files section covers what we want to include in the depoloyment to now we’ll go over the file structure shortly. Basically what is included in the files array is all that get pused up to the now servers.

All good so for?

Ok, now we need to add a .npmignore file in the root of the project and add the following line to it:

!tweets.csv

The tweets.csv needs to go up to the now server to be used by the bot, but we previously included it in our .gitignore which is what now uses to build your project when it’s being loaded to the server. So this means that the file isn’t going to get loaded unless we add the .npmignore to not ignore the tweets.csv 😅

Add .env variables as secrets

Ok, our super duper secret Twitter keys will need to be stored as secrets in now this is a pretty neat feature where you can define anything as a secret and reference it as an alias with now.

Let’s start, so the syntax is now secrets add my-secret "my value" so for our .env keys add them all in giving them a descriptive [but short!] name.

You will not need to wrap your “my value” in quotes but the documentation does say “when in doubt, wrap your value in quotes”

Ok, so from the terminal now secrets ls should list out your secrets you just created:

$ now secrets ls
> 5 secrets found under spences10 [1s]

                            id  name                   created
  sec_xxxxxxxxxxZpLDxxxxxxxxxx  ds-twit-key            23h ago
  sec_xxxxxxxxxxTE5Kxxxxxxxxxx  ds-twit-secret         23h ago
  sec_xxxxxxxxxxNorlxxxxxxxxxx  ds-twit-access         23h ago
  sec_xxxxxxxxxxMe1Cxxxxxxxxxx  ds-twit-access-secret  23h ago
  sec_xxxxxxxxxxMJ2jxxxxxxxxxx  nasa-key               23h ago

Add npm deploy script

Now we have our secrets defined we can create a deployment script to deploy to now, so in our package.json let’s add an additional script:

  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "deploy": "now -e CONSUMER_KEY=@ds-twit-key
        -e CONSUMER_SECRET=@ds-twit-secret -e ACCESS_TOKEN=@ds-twit-access
        -e ACCESS_TOKEN_SECRET=@ds-twit-access-secret -e NASA_KEY=@nasa-key"
  },
  "now": {

Let’s go over what we have added there, deploy will run the now command and pass it all our environment -e variables and the associated secret value, if we break it down into separate lines it will be a bit clearer:

now
-e CONSUMER_KEY=@ds-twit-key
-e CONSUMER_SECRET=@ds-twit-secret
-e ACCESS_TOKEN=@ds-twit-access
-e ACCESS_TOKEN_SECRET=@ds-twit-access-secret
-e NASA_KEY=@nasa-key

Re jig picture-bot.js

Ok, because now deployments are immutable it means that there’s no write access to the disk where we want to save our NASA photo of the day, so to get around that we need to use the /tmp file location.

Shout out to @Tim from zeit for helping me out with this!

In the picture-bot.js module add the following two lines to the top of the module:

const os = require('os')
const tmpDir = os.tmpdir()

Those two lines give us the temp directory of the operating system, so if like me you’re on Windows it will work as well as if you are on another stsyem like a linux based system, which is what now is. In our saveFile function we’re going to use tmpDir to save our file.

We’ve taken out the nasa.jpg from the getPhoto function as we can define that information in the saveFile function, the NASA potd is not just a 'jpeg some items posted there are videos as well. We we can define the type with a ternary function off of the body being passed in, this will send a tweet with a link to the video:

function saveFile(body) {
  const fileName =
    body.media_type === 'image/jpeg' ? 'nasa.jpg' : 'nasa.mp4'
  const filePath = path.join(tmpDir + `/${fileName}`)

  console.log(`saveFile: file PATH ${filePath}`)
  if (fileName === 'nasa.mp4') {
    // tweet the link
    const params = {
      status: 'NASA video link: ' + body.url,
    }
    postStatus(params)
    return
  }
  const file = fs.createWriteStream(filePath)

  request(body)
    .pipe(file)
    .on('close', err => {
      if (err) {
        console.log(err)
      } else {
        console.log('Media saved!')
        const descriptionText = body.title
        uploadMedia(descriptionText, filePath)
      }
    })
}

The completed code here:

Click to expand

const Twit = require('twit')
const request = require('request')
const fs = require('fs')
const config = require('./config')
const path = require('path')

const bot = new Twit(config)

const os = require('os')
const tmpDir = os.tmpdir()

const getPhoto = () => {
  const parameters = {
    url: 'https://api.nasa.gov/planetary/apod',
    qs: {
      api_key: process.env.NASA_KEY,
    },
    encoding: 'binary',
  }
  request.get(parameters, (err, respone, body) => {
    body = JSON.parse(body)
    saveFile(body)
  })
}

function saveFile(body) {
  const fileName =
    body.media_type === 'image/jpeg' ? 'nasa.jpg' : 'nasa.mp4'
  const filePath = path.join(tmpDir + `/${fileName}`)

  console.log(`saveFile: file PATH ${filePath}`)
  if (fileName === 'nasa.mp4') {
    // tweet the link
    const params = {
      status: 'NASA video link: ' + body.url,
    }
    postStatus(params)
    return
  }
  const file = fs.createWriteStream(filePath)

  request(body)
    .pipe(file)
    .on('close', err => {
      if (err) {
        console.log(err)
      } else {
        console.log('Media saved!')
        const descriptionText = body.title
        uploadMedia(descriptionText, filePath)
      }
    })
}

function uploadMedia(descriptionText, fileName) {
  console.log(`uploadMedia: file PATH ${fileName}`)
  bot.postMediaChunked(
    {
      file_path: fileName,
    },
    (err, data, respone) => {
      if (err) {
        console.log(err)
      } else {
        console.log(data)
        const params = {
          status: descriptionText,
          media_ids: data.media_id_string,
        }
        postStatus(params)
      }
    }
  )
}

function postStatus(params) {
  bot.post('statuses/update', params, (err, data, respone) => {
    if (err) {
      console.log(err)
    } else {
      console.log('Status posted!')
    }
  })
}

module.exports = getPhoto

Ok, thats it! We’re ready to deploy to now!🚀

So from the terminal we call our deployment script we defined earlier:

yarn deploy

You will get some output:

λ yarn deploy
yarn deploy v0.24.4
$ now -e CONSUMER_KEY=@ds-twit-key -e CONSUMER_SECRET=@ds-twit-secret
    -e ACCESS_TOKEN=@ds-twit-access  -e ACCESS_TOKEN_SECRET=@ds-twit-access-secret
    -e NASA_KEY=@nasa-key
> Deploying ~\gitrepos\tweebot-play under spences10
> Using Node.js 7.10.0 (default)
> Ready! https://twee-bot-play-rapjuiuddx.now.sh (copied to clipboard) [5s]
> Upload [====================] 100% 0.0s
> Sync complete (1.54kB) [2s]
> Initializing…
> Building
> ▲ npm install
> ⧗ Installing:
>  ‣ csv-parse@^1.2.0
>  ‣ dotenv@^4.0.0
>  ‣ rita@^1.1.63
>  ‣ tabletop@^1.5.2
>  ‣ twit@^2.2.5
> ✓ Installed 106 modules [3s]
> ▲ npm start
> > tweet-bot-playground@1.0.0 start /home/nowuser/src
> > node index.js
> saveFile: file PATH /tmp/nasa.jpg
> Media saved!
> uploadMedia: file PATH /tmp/nasa.jpg

Woot! You have your bot deployed! 🙌

If you click on the link produced you will be able to inspect the bot as it is on now there’s also a handy logs section on the page where you can check for output. 👍

Contributing

Please fork this repository and contribute back using pull requests.

Any contributions, large or small, major features, bug fixes and integration tests are welcomed and appreciated but will be thoroughly reviewed and discussed.

License

MIT License

Code life balance

Wed, 15 Mar 2017 00:00:00 GMT

Just some rationalisation of what I’m currently doing.

Recently I have decided that I’m going to improve my current skill set. To do this I’m studying with freeCodeCamp for a full stack developer certification, I’m also trying to learn as much as I can about the languages that come with that HTML, CSS and JavaScript as well as getting familiar with everything else in between like Git and GitHub, development environments like Cloud9 and services like Digital Ocean and AWS.

To do all of this I need time and being married with a young family and having a full time job my time is at a premium.

The freeCodeCamp curriculum is 2,080 hours, so let’s break that down quickly.

Like I said with a full time job and a family spare time is precious, I have taken to getting up most mornings around an hour earlier than usual @~05:30 that gave me around 1.5 hours before having to get ready for the day taking kids to school and the daily commute. In the evenings I usually have from 20:00–22:00 but this is full of interruptions so you could probably condense it down to about 1.5 hours again.

So.

Let say I’m lazer focussed and relentlessly do 1 hour in the morning and 3 hours in the evening 4 hours a day 2,080/4 so 520 days? That’s 1.4 years, wow! Ok now let’s be a bit more realistic, 1 hour in the morning 1 hour in the evening, 1040 = 2.85 nearly 3 years, oh!

Ok, so what if I was a full time student? 8 hours a day 1,080/8=135 three months! How much do I want this then?

Currently I’m managing 45min-1hour in the AM then 1hr-2hrs in the PM so at very best I could manage to finish the curriculum in a year, that’s if I finish the curriculum at all, I read loads of posts about how people have managed to get full time developer jobs after only doing half of the freeCodeCamp curriculum this doesn’t help. It’s great to see success stories and inspiring to read but a lot of the time this adds unnecessary pressure on yourself.

My family are great and understand the situation but your relationships are priority and they can get a bit strained when all you’re doing is staring at a monitor whenever you get a spare 45 minutes.

[#100DaysOfCode] has been a great tool for me with regard to building good habits and something that has both distracted me from purely concentrating on my freeCodeCamp and also accelerated my GitHub open source interactions. Since starting the challenge I have contributed to several GitHub projects and made some of my own.

I have also created a personal goals repo like the one Una Kravets has on her GitHub this will be what I’ll use going forward after I have completed the 100 Days of Code challenge, I’m not going to take part in the 301 days of code challenge as I’d like to go on holiday without having to think about any coding for a week or so.

I often think if I am a proper developer and what am I doing all this for, then I take this handy little quiz:

http://amiarealdeveloper.com/

We shall see where I am in a years time 👍

Easily set up your own Twitter bot

Sat, 28 Jan 2017 00:00:00 GMT

Want to get set up with your very own Twitter bot quickly and easily, with this guide you can be set up in under 30 minutes. But first, why should you want to build a Twitter bot?

There are some really useful Twitter bots out there that do some pretty cool stuff they don’t all spam current hashtags and follow users relentlessly.

Take the Twisst ISS alerts bot that sends you a DM when the international space station (ISS) will be visible at your location.

Or there’s public service bots like the Earthquake Robot that tweets about any earthquake greater than 5.0 on the Richter Scale as they happen.

There’s GoogleFacts which tweets facts from Google, just remember to fact check these facts on, err, Google?

And of course a robot that tweets poetry, poem.exe along with one that will retweet your tweets that also happen to be an Accidental Haiku

Bots can be used for many purposes in my case I have used it to enhance my @spences10 account by liking and re-tweeting subjects I have an interest in, in the case of the #100DaysOfCode community challenge there is a community bot which congratulates you on starting #100DaysOfCode and again on completing it, these are specific responses to tweets with keywords for a community, there is also sentiment detection used under the #100DaysOfCode community hashtag where the bot will tweet you with encouraging words if you post a tweet with negative sentiment.

One question I’m asked in job interviews quite often is “what do you get out of working with technology?“. My answer, “I like to automate stuff, repetitive tasks to save me time so I can concentrate on other stuff, I like the fact I have saved myself some time”

In the case of my @spences10 bot it’s usually an opener for a conversation with another user that follows me, so the bot can initiate the conversation and I can carry on from where the bot left off.

Bearing this in mind the bot is only as good as the person that has programmed it, whilst researching this post I found a really good resource for bots in general, botwiki.org has a bot ethics section:

Please don’t make annoying bots
An annoying bot mentions or follows people who didn’t ask for it
Posts common or trending hashtags
Please don’t make abusive or harassing robots

So, ready to get started?

Ok, let’s do this!!

Twitter bot bootstrap

This is a bootstrap for setting up a Twitter bot with Node.js using the twit library, the bot will like and re-tweet what you specify when configuring it, it will also reply to followers with a selection of canned responses.

As a primer for this there are the great posts by @amanhimself on making your own twitter bot and this is an expansion on that with further detail on configuration on Heroku

What you’ll need

Twitter account [Duh!]
Development environment with Node.js and NPM
- c9 account
- Node.js
- NPM
Heroku account

Setup twitter

Set up an application on the Twitter account you want to favorite and retweet from via: https://apps.twitter.com/app/new

As an example I’ll configure the old @DroidScott twitter account I have so you can follow along.

Straight forward enough for the twitter application, just make sure you add your phone number to your Twitter account before clicking the Create your Twitter application button.

You should now be in the ‘Application Management’ section where you will need to take a note of your keys, you should have your ‘Consumer Key (API Key)’ and ‘Consumer Secret (API Secret)’ already available.

You’ll need to scroll to the bottom of the page and click the Create my access token to get the ‘Access Token’ and ‘Access Token Secret’ take note of all four of them you’ll need them when setting up the bot.

Setup development environment

For this I’m just going to say use Cloud9 as you can be up and running in minutes with one of the pre made Node.js environments.

Set up the bot

In the project tree delete the example project files of client, package.json, README.md and server.js you’ll not need them, you can leve them there if you desire.

In your new Node.js c9 environment go to the terminal and enter:

$ git clone https://github.com/spences10/twitter-bot-bootstrap

Project structure

The environment project tree should look something like this.

Node dependencies

Before configuring the bot we’ll need to install some dependencies, from the terminal enter:

$ npm install --save twit
$ npm install --save unique-random-array

Then cd into your new folder cd tw* will move you to :~/workspace/twitter-bot-bootstrap (master) $ form here you can configure the bot, from the terminal enter.

$ npm init

This will configure the package.json file with your details as desired, just keep hitting return if you’re happy with the defaults.

Onto the Twitter keys, now you’ll need to add these to the config.js file and you can then add some keywords into the strings.js file for what you want to search on.

Then add the username of the Twitter account you are using to the tweetNow function in the bot.js file, this will ensure your bot doesn’t reply to itself when it has been followed by a user.

This step isn’t strictly necessary if this account isn’t going to be following any users.

That should be it, go to the terminal and enter npm start you should get some output:

Check the Twitter account:

Heroku

Cool, now we have a bot that we can test on our dev environment but we can’t leave it there, we’ll need to deploy it to Heroku.

If you haven’t done so already set up a Heroku account then select Create a new app from the dropdown box top right of your dashboard, in the next screen name the app it if you want, then click Create App.

You’ll be presented with your app dashboard and instructions for the deployment method.

Your app name should be displayed on the top of your dashboard, you’ll need this when logging in with the Heroku CLI.

Heroku CLI

We’re going to deploy initially via the Heroku Command Line Interface CLI

From your c9 environment terminal, log into Heroku [it should be installed by default]

$ heroku login

Enter your credentials.

$ cd twitter-bot-bootstrap
$ git init
$ heroku git:remote -a your-heroku-app-name

Deploy your application.

$ git add .
$ git commit -am 'make it better'
$ git push heroku master

You should get build output on the terminal.

Then check the output with.

$ heroku logs -t

All good? Cool! :sunglasses:

Heroku variables

Now that we have our bot on Heroku we can use environment variables to store our Twitter keys so that if in the future we want to add our code to GitHub we don’t have to exclude the config.js file or add our keys publicly.

If you take a look at the config.js file of this project you’ll see there’s several lines commented output:

module.exports = {
  consumer_key: process.env.CONSUMER_KEY,
  consumer_secret: process.env.CONSUMER_SECRET,
  access_token: process.env.ACCESS_TOKEN,
  access_token_secret: process.env.ACCESS_TOKEN_SECRET,
};

All you need to do is go to the console of your Heroku app and select the ‘Settings’ sections and add in your Twitter keys, click the ‘Reveal Config Vars’ button and add in the variables with their corresponding values.

CONSUMER_KEY
CONSUMER_SECRET
ACCESS_TOKEN
ACCESS_TOKEN_SECRET

Once you have the Heroku vars set up then you can un-comment the module.exports section in the config.js file on your development environment and you’re ready to deploy to Heroku again without your Twitter keys.

Your console commands should look something like this:

$ git add .
$ git commit -m 'add environment variables'
$ git push heroku master

Then you can check the Heroku logs again with.

$ heroku logs -t

You should now have a bot you can leave to do its thing forever more, or until you decide you want to change the search criteria :smile:

Heroku deployment via GitHub

You can also deploy your app by connecting to GitHub and deploy automatically to Heroku each time your master branch is updated on GitHub, this is straight forward enough.

Go to the ‘Deploy’ dashboard on Heroku, select GitHub as the deployment method if you have connected your GitHub account to your Heroku account then you can search for the repository so if you forked this repo then you can just enter twitter-bot-bootstrap and Search you can then click the Connect button, you can then auto deploy from GitHub.

Heroku troubleshooting

What do you mean it crashed!?

Ok, I found that sometimes the worker is set as web and it crashes out, try setting the worker again with:

$ heroku ps:scale worker=0
$ heroku ps:scale worker=1

Other useful Heroku commands I use:

$ heroku restart

By default you can only push your master branch if you are working on a development branch i.e. dev branch and you want to test on Heroku then you can use:

$ git push heroku dev:master

Contributing

Please fork this repository and contribute back using pull requests.

Any contributions, large or small, major features, bugfixes and integration tests are welcomed and appreciated but will be thoroughly reviewed and discussed.

Links

Credit for the inspiration for this should go to @amanhimself and his posts on creating your own twitter bot.

create-a-simple-twitter-bot-with-node-js

how-to-make-a-twitter-bot-with-nodejs

twitter-mctwitbot

awesome-twitter-bots

Other posts detailing useful Twitter bots.

www.brit.co/twitter-bots-to-follow

www.hongkiat.com/using-twitter-bots

Git and GitHub

Thu, 05 Jan 2017 00:00:00 GMT

I know why Linus called it that now!

If you’re reading this there’s a good chance you know at least the basics of Git but if like me and you are the only person making changes to your repos then there’s a good chance that you just use git push origin master to move your changes from your local machine to GitHub, this is not best practice.

What if it’s not your repository you want to make changes to? You’ll need to create a pull request, where you make a copy (fork) of the repo, make the changes to your copy (fork) then request that the owner of the original repo pulls your changes into their repo. All super straight forward, right?

As an example I’m going to document my change to the awesome-twitter-bots repo that @amanhimself asked me to contribute to after I made a Twitter bot with his guides.

Step 1

I will need to fork the repository on GitHub so I can make my changes.

Then clone my forked repository to where I’m all going to make the changes on my computer:

$ git clone https://github.com/spences10/awesome-twitter-bots

Connect the fork to the Original Repository:

$ git remote add upstream https://github.com/amandeepmittal/awesome-twitter-bots

Step 2:

Use git status to check what branch you are currently on.

Make a (my) branch:

I’m adding the Twitter bot I made so I’m going to give my branch the same name as my repo

$ git branch spences10-twitter-bot

Now change to that branch with:

$ git checkout spences10-twitter-bot

It should say you have switched to the branch but you can check with git status

Add your files note if you are adding a folder (like I am) just using git add . will add the folder as a file (which I learned from bitter experience), what you will need to do is:

$ git add spences10-twitter-bot/\\*

This will add the folder and all its contents, I would post my terminal ‘output of shame’ here as it would take up the whole screen. So now I have added the folder I need to commit to my local repo with:

$ git commit -m 'initial commit'

I get the terminal output confirming my files are added, then I git push to my branch I checked out earlier:

$ git push origin spences10-twitter-bot

A quick check of the repo on GitHub confirms that the files are there I’m now ready to add a contributor @amandeepmittal via the /settings/collaboration section of my repo. I can then copy the invite link and send to Aman, I’m sure he’ll be thrilled to see it!

Step 3

Visit Aman’s repo and GitHub will have detected that I have pushed a branch to a fork, from here I can click on the ‘Compare & pull request’ button.

In the ‘Open a pull request’ page I’ll need to select the my fork and then my branch, so spences10\awesome-twitter-bots and my branch which is spences10-twitter-bot click the ‘Create pull request’ button.

The rest is up to the repository owner (Aman) now where he can chose to merge my changes into his repo.

That’s not the end though

It turned out that Aman just wanted me to update the README.md on the repo so my pull request was cancelled :flushed:

This was good though because I had the opportunity to go through the whole thing again, thus getting more familiar with the process, after making my changes to my fork it was another pull request [PR] which was then successfully merged as PR #2

Resources

A great resource for me was Git-It

And obviously the GitHub Help documentation.

2fa

Another thing to note is if you’re using two factor authentication you’ll need to add your auth token in as a remote set-url so you can push/pull without having to authenticate each time.

git remote set-url origin https://yourgithubuser:your-token@github.com/yourgithubuser/yourrepo.git

Twitter McTwitBot

Wed, 04 Jan 2017 00:00:00 GMT

I must say this was great to do and a nice little introduction to node and npm.

I got to doing this from finding it on GitHub I think I was looking for the Twitter icon in bootstrap whilst working on my Random Quote Generator I stumbled across the twitter-bot-bootstrap (as you do) so after stalling with my progress on the freeCodeCamp(🔥) zipline for a Wikipedia viewer I decided to give the Twitter bot a try and managed to create it and add it to Heroku 🎉”

This app didn’t work as well as expected though 😦, so I then decided to take a look at @amanhimself’s Twitter bot he had created for the #100DaysOfCode challenge, which I just happen to be taking part in.

So with his great documentation here, and here I managed to cobble together my own Twitter-bot which I use on my @spences10 Twitter account.

If you’r wondering about the post name check here

Technologies used

Preamble out of the way, now I can walk through what was used.

Cloud 9

I love this development environment, I soon became a fan of c9 when trying to install Ruby on my windows machine and then again after installing Node.js on my computer for the first time.

Node.js

I already had this installed on my c9 environment so I just had to npm install --save twit then I was up and running

Heroku

I didn’t really get what Heroku was until I started this project but once I’d read the guides it was quite straightforward and the Heroku CLI was already installed on c9 i checked with heroku --version before attempting to install it.

GitHub

You can deploy straight from your c9 environment to Heroku and there are loads of other integration tools you can use which I haven’t had time to look into yet. It’s good practice to have your code on a repository somewhere and GitHub is widely used.

Twitter

You will need to set up a Twitter application from the Twitter dev portal

All of the information above is in addition to the guides given by Aman the stuff I’m going to go through now my experience with deploying to Heroku, you may want to host the app somewhere different.

My Approach

Use node bot.js to test locally, in @amanhimself’s example it will tweet and favourite straight away then go on a timer.

Deploy to Heroku git push heroku master

This is after I have added the changes to Git with a commit message and pushed the changes to my repo, here’s the terminal commands:

$ git add .
$ git commit -m 'my detailed commit message'
$ git push origin master
$ git push heroku master

The final command will build the app on Heroku for you with output like this:

I know this isn’t standard practice for GitHub and I am in the process of understanding how to branch and use Pull Requests so bear with me 😄

The first gotcha for me was the Heroku Procfile I couldn’t understand why it kept timing out, this was because it was trying to run the default web process instead of the worker process which is whats needed for the bot.

After getting the bare bones set up on part 1 I then got to playing around with the timings and the query strings used by the bot, this is where things started to go a bit off-piste

For quite a while I couldn’t understand why I was getting so many errors, with a whole lot of console.log(var) throughout the code I came to the conclusion that that the query string I was using:

var queryString = '#100DaysOfCode, #GitHub, #VSCode';

You can get the logs from Heroku when you app is running by typing:

$ herouku logs -t

This will give you your logs back from Heroku so you can add all the debug lines you want in there to determine whats going on.

I was getting the errors pictured so I started to play with the query string and just using one value at a time which didn’t cause any errors so I decided to pass one value at a time by adding the Gist below.

This worked, for a while then the same errors started creeping in, I then noticed that the retweet and favoriteTweet were on a timer but using the same random text from the queryString which was about as much use as the previous piece of code as it was a one time initialisation [or initialization] so the same string was being used multiple times causing the errors.

So after some head scratching and playing around with the code, [and tweeting @amanhimself numerous times] Aman suggested that I use the npm package unique-random-array to return a random string value from the string list.

So I added the var in:

var uniqueRandomArray = require('unique-random-array');

Built the query string:

var queryString = uniqueRandomArray([
  '100daysofcode',
  'freecodecamp',
  'github',
  'vscode',
  'visual studio code',
  'nodejs',
  'node.js',
  'vuejs',
  'vue.js',
  'inferno_js',
  'inferno.js',
  'jekyll',
])

Then just replaced the queryString string with the queryString() method.

Some other things to note that I discovered when playing around with the bot is the retweet and favoriteTweet function params was the result_type: options, here’s my comments copy pasted from the Twitter dev portal:

// result_type: options, mixed, recent, popular
// * mixed : Include both popular and real time results in the response.
// * recent : return only the most recent results in the response
// * popular : return only the most popular results in the response.

The next stage for this could be to use the unique-random-array package to change that value too.

That’s it for now, I still have a weird bug where if I follow someone and then someone else follows me the bot decides to tweet back to itself!

Coming up

More stuff with the .stream() function, like auto follow back and better replies.

Starting again with Jekyll

Sat, 17 Dec 2016 00:00:00 GMT

Since setting up this blog I haven’t really bothered with Jekyll any more than just forking Barry Clarke’s repo of Jekyll Now and adding these posts as and when the feeling takes me.

So I got to checking out Barry’s blog and his Jekyll Now templates and tried to make sense of the two so I could make my own, based off of the ideas I got from Barry’s blog.

Development environment, enter Cloud 9

I tried to set up Ruby on my Windows machine and it didn’t go well, then I tried to set it up on my Raspberry Pi, that didn’t go well either. Then I recalled that I could have any number of different environments with Cloud9 so I set up a Ruby machine on there and installed Jekyll, no problem

Setup

It wasn’t as simple as just going to the local host page as it’s a cloud based system so after som digging I found this from Jean-François L’Heureux jflheureux on GitHub.

https://www.jflh.ca/2016-01-18-running-jekyll-on-cloud9

Basically you need to set up a Run Configuration on your c9 box, thanks for that Jean-François.

CSS

For some reason I thought that a Jekyll page didn’t use CSS, well the reason may have been that there was nothing like that in the ‘vanilla’ Jekyll site when you run the jekyll new myblog you get very little in the was of bells and whistles.

here is the base project

Running the following from the terminal on my Ruby development box

~ $ gem install jekyll bundler
~ $ jekyll new myblog
~ $ cd myblog

Omitting the ~/myblog $ bundle exec jekyll serve and # => Now browse to http://localhost:4000 for reasons just mentioned.

Use the run configuration jekyll serve --host $IP --port $PORT --config _config.yml,_local_config.yml

You get this:

new blog yay!

Confusing

Jekyll uses Liquid templating language which, for someone like me was a bit confusing. With me just getting used to the layout of a ‘standard’ web page I was then presented with liquid ‘tags’ something I’m still not completely clear on what some of them do.

_layouts, _includes, meta.html

WTF? I had no idea, I’m still not totally clear on the why, I add a default.html then Jekyll complains that there’s a missing meta.html file, I create a _includes folder and add an empty meta.html and it builds fine, no idea.

So after creating a default.html and then comparing with Jekyll Now and Barry’s sites I was able to piece together a default.html, page.html and post.html which looked hideous so I then had to start with CSS on the page,I took the majority of it from Barry’s blog page with the intention of modifying it to my own liking.

In the end I took quite a bit of CSS, the Meyer Reset was something I knew nothing of before starting this, now I think it’s quite a handy thing to have/know.

Variables, again I knew nothing about this before playing around with Jekyll but really helped me understand CSS a little bit more than I did before.

Then stuff for analytics and Disqus, then there was stuff I added in that I liked, like font-awesome and some Google fonts I like so I could have a nice footer like the one in my CodePen portfolio I like.

Markdown

Oh, it’s not the right Markdown, why isn’t is showing the GitHub Markdown Scott?? Because you’ve used the @import "highlights"; on your style.css oh ok, so I’d prefer GitHub Markdown, ok no problem, go remove the @import "highlights"; from your style.css you’ll be golden, no worries. Queue a raft of commits with me dicking around with various combinations of having corrected _config.yml entries it got pretty messy.

Currently I am still with the _hilights.scss in the sass folder which I’m going to have to play around with to get it how I like it, hopefully I’ll get to learn a bit more about it all and understand how much of a tool I was.

Preview

One last thing that bugged me that I couldn’t do was the content preview thing on the posts, it’s partly why I went from Jekyll Now to my own vanilla build, I was getting that first paragraph to show on the main blog page I found it eventually, not on the post.html or the default.html no it was on the index.html here:

{``{ post.content | split:"" | first }``}

Then add the  tag after the first paragraph on your post, then I added a class to float the image on the top of the post and flow around the image, the CSS is this:

// see image in content preview
// only adjust width OR height so aspect ration is maintained
.floated{
  float: right;
  display: block;
  width: 33vw;
  max-width: 250px;
}

So I have the basics I think, still a fair bit to play around with but for now I have what I need.

Job hunting, one class 'A' ballache

Mon, 05 Dec 2016 00:00:00 GMT

This is basically a rant about the job market, I was laid off back in August, this is a terrible time of year to be looking for work, everyone is on holiday so things are generally pretty slow so when this happened to me I did the same and went on holiday for the end of August and first week of September. Coming back from holiday I found that things were still pretty slow with the occasional phone call about roles that were not really suited to my skill set. It was at this point that I began to struggle and stress about ever being employed again.

No one wants to hire you

For the longest time I thought there was something wrong with my CV so I read up on ATS’ and added what I thought was needed to at least meet the minimum requirements for passing the ATS if there was one for the roles I was applying for.

What I have also found is that my skill set is now in a minority, that’s not to say that banks are going to stop using Excel overnight but it does mean that there are other technologies being used here, Visual Studio Tools for Office and Excel DNA mean that there are .NET controls that can be used in lil old Excel which a lot of organisations want now.

This has basically brought me to the conclusion that I should be expanding my skill set, so I have been busy getting the skills I need to become a full stack web developer using the awesome free course material at freeCodeCamp (fCC) I’m still in the very early stages of this and am not about to start looking for full stack web developer jobs but it is something that I’m going to commit a lot of my spare time to so I can build a portfolio to showcase my skills for prospective employers. This will be an additional tool to my toolkit I’m also hoping to gain a lot of insight into general purpose programming languages, something currently lacking from my ‘skill stack’.

What I found whilst searching for roles is that someone with VBA, SQL and C# there is also the need now for Tableau, ClikView or some other data visualisation software which stands to reason that now we have all this data that we should actually be able to gain some insight from it, this is something I’ll be looking into with the scripting language Python (general purpose programming language) once I have progressed with my FCC certification.

It’s an employers market
Another thing which is bad, because it’s an employer’s market (apparently) employers are being very specific about the skills they want potential candidates to have and currently they are driving down the cost of resources with these job specifications, like: C# developer with 5 years commercial experience + x,y,z unrelated skills for £37k, that is at very least a mid-senior level role £50k+ but once one of these is on the market then other employers see this and decide to put their role at the same level.

Lessons learned

Things I have learned, most of the time the job doesn’t exist (lead generation) If it does exist and you match one of the skills on the spec you will have every resourcer in the country [and abroad] calling you for the role. Wild salary ranges £40k-£80k that’s a pretty big range, these ads usually come with every skill imaginable so it’s safe to say that they don’t really know what they want or the role doesn’t really exist.

Recruiters

So this is where we get all warm and fuzzy talking about recruiters and what great jobs they do. How they are always busy talking to hiring managers for many different roles and juggling multiple candidates.

I have worked in the past in the same office as recruiters and understand what they do for a job, and the time and effort needed to find good candidates.

What the recruiter says:

“hi Scott, just seen your profile and think you will be a really good match for a role I’m recruiting for”

What it actually means:

“you have come up in my keyword search and I'm blindly calling you, I haven’t really read your profile”

This was incredibly frustrating experience for me, yes I could have done things better and like I said this was basically a rant, this is so people can relate, BUT!

Gone are the days of carefully crafted covering letters and tailoring your CV for that specific job, most of the time your CV doesn’t even get seen by a human and is instead rejected by an ATS.

If we all went back to the days of trust and real relationships with recruiters that we trusted and had met and that understood our needs would they have the role we needed?

Just because we have an understanding with a few recruiters doesn’t mean that they have the perfect role waiting for us when we start looking for work, although you will be at the top of their list if they do get that role.

What I like and respect in a recruiter is if I can get five minutes into a phone conversation with a recruiter that has actually read my profile or my CV.

What I found with recruiters is first a ten minute conversation asking me how I’m finding the market and then asking me what my ideal next role would be.

This is basically their due diligence, what they should have determined by looking at your profile before calling you.

After this it goes one of two ways, the recruiter then being honest with you [in some cases] and telling you they actually don’t think you are suitable for the role (which they could have done if they took the time to read your profile) let’s just bear in mind ten minutes before it was,

“Hi Scott, just seen your profile on LinkedIn and I’m really keen to talk to you about a role with one of our very high profile clients I’m recruiting for.”

The call usually ends with a "I'll send the spec through for you to look at let me know what you think" and the mail never turns up or the old chestnut I'll pass you details on to my colleague\I'll update your details on our database

So now we’re near the end of Ranty McRantRant’s post, if you made it this far thank you for persevering, if you can relate I’d be keen to hear your story.

Take a look at these posts too which have partly motivated me to make this post:

LinkedIn:

Medium:

Lessons From My Post-bootcamp Job Search in London

My first Microsoft Visual Studio Code [VSCode] extension

Sat, 03 Dec 2016 00:00:00 GMT

I’m a published developer! [sort of] Well that was a bit painful, well not actually I mean from the documentation I feel I was a bit mislead.

So for those of you that know what I do for a living I’m primarily an Analyst Developer with a skill set of VBA and SQL which has put me in good stead for the last 10+ years. I’m currently ‘up-skilling’ myself on more general programming languages, but enough of that! I basically wanted to use VSCode with VBA which is fine as it’s just text files but I wanted some of the shexy stuff that VSCode comes with.

I’m not going to go into how awesome (I think) VSCode is here but I will mention that for the purpose of me wanting to use (or at least see syntax highlighting) I found this extension for VBScript which was neat but didn’t give me any intellisense for even the most straight forward stuff like to create a Sub or Function.

So that got me playing around with making my own snippets and I found that after a while I had quite a lot of them so I decided to put them on the VSCode market place.

So, what I found is that Microsoft really want you to make VSCode extensions and give you all the tools you need to do so.

I found guides here, here and here all of which have you using Yeoman by installing via npm, now I’ve never heard of Yeoman before trying to do this so I don’t have an opinion on that apart from to say it was a bit of a ballache to get any of it up and running. I tried installing it on both my home machine and a Cloud9 machine several times over with no success.

Got tired after uninstalling and reinstalling several times at home and on the cloud so moved on. I read this guide about setting yourself up as a publisher on the Microsoft VSCode Marketplace using with vsce (agin installed with npm) so after creating a Personal Access Token and creating my publisher account I could then publish my extension. But this was the thing my extension is just the vbscrip.json file on my hard drive.

How do I make it into a extension?

After reading up on extension I thought that you needed to have your package ‘packaged’ with a .vsix extension so looking at the links earlier you need to install Yeoman (bugger!)

I looked around at other snippets packages on GitHub and couldn’t understand why I needed to have my snippets packaged up in this .vsix file, all it was, was the .json file from my computer.

So this is what I did, I copied the file structure from one of another GitHub repositories that were just snippets, it basically consisted of two folders and a package.json file. I replaced all the relevant properties in the .json file and created a GitHub repository just for the sake of having all my lovingly crafted snippets kept safe.

So it looked like I had no way to get this onto the Marketplace, I was pretty bummed but thought I’d just go though the process of publishing an extension with vsce by cd’ing to the folder the package was in and going through the commands so I tried vsce publish 1.0.0

I was pretty surprised (and relieved) to see the output pictured.

I had a quick check of my publisher profile and lo and behold, there’s my extension!

Here’s my extension: VBA Snippets from there you can fin the GitHub repository too, I hope it comes in handy for you one day!

VBA Code Export for Version Control Systems

Mon, 14 Nov 2016 00:00:00 GMT

I have seen the same situation many times now in my career as a VBA Developer about how source code control is managed with VBA projects.

Source control on VBA has long been a bit of a nonsense, there isn’t any really. When I started my first developer role it was talked about in my team why we don’t use it and the best efforts the team did at the time was save the new version to a different folder location and to compare changes in the code from a previous version meant getting a text compare app copy pasting the code into it from the two different versions so you could track what was changed.

My colleague at the time and now very good friend Paul Crook came up with the base of what I have done with the VBA IDE Code Export tool I have just extended some parts of his base that I feel were needed.

What was lacking from Crookie’s code, which I brought up at the time with him was that it only exported *.bas, *.cls and *.frm files I did ask about code contained within the ThisWorkbook and the Sheet* modules. What we decided to do was if there was code in those modules was to abstract it out into its own module, so ThisWorkbook would call out to ThisWorkbook.bas this was a bit of extra work to begin with but ultimately benefited us in the long run with good version control.

I wasn’t keen on how you had to work with this so decided to have a play around with it when I put it on GitHub I decided to try right some of that, I think I may have made some things worse but I’m keen to make another revision of the tool in the future to correct that.

what did you make better

added functionality to save code from ThisWorkbook and Sheet*
made a .conf file to save the project contents to meaning there were no modules left in the project after export
added the ability to specify an import and export location, it was defaulted to the root of where the source workbook was located

what did you mess up

added a form, means more validation
added ranges to the configuration worksheet for storing locations other than the ThisWorkbook file location
didn’t add the new functionality to the existing code

up next

possibly remove the old method that copied out the project contents to a module and go full retard with the .conf file

freeCodeCamp

Sun, 13 Nov 2016 00:00:00 GMT

Ok, I have recently discovered and started doing freeCodeCamp(🔥) which so far I’m really enjoying.

Since being out of work I have had some time to start exploring different programming languages and technologies but I haven’t found any courses that I have started and thought “you know what I’m going to stick this out” that’s before I discovered FCC, FCC is very much a real world situation course where you go over some basics first then apply them, once you have learnt enough you then have to complete projects using the skills you have just learned.

So far I have made a tribute page DJ Hype and created a personal Portfolio page on CODEPEN.io there’s some great examples on CODEPEN.io to help you get started and so far I have really enjoyed them.

So now onto JavaScript!

Hello World!

Mon, 24 Oct 2016 00:00:00 GMT

My first post using Gatsby, awesome static site generator Gatsby from Kyle Mathews

So not a lot to see, I’ll just be configuring this and adding all my old blog posts.

The Localhost Feed

Open Graph Images with Gatsby and Now

Moving Large Markdown Assets to a CDN

Markdown file structure

Cool story bro

A Digital Garden

Publish all the things

Unpublish all the things

Continuous Deployments on Non Essential Projects

Busy work

Configure Custom Domain Email with Zoho and Now

What you’ll need

Set up an account

Create an admin super user

Verify you own the domain

Add the MX records

Set the Sender Policy Framework (SPF)

Make a simple, personal, URL shortener with Now.sh

Examples, why would I use a short URL?

Do I have to use Vercel? 🤔

Redirects

Get set up 🛠

Create the project

Deploy the project

Add the Project to GitHub

Use Vercel for GitHub

Add my domain to Vercel

Here’s a video detailing the process 📺

Resources

Add Analytics Tracking Links to your Markdown

The problem 🤔

The solution 💡

The other problem (for me anyway) 😧

The other solution 🤯

Here’s a video 📺

Resources 📑

Create a Custom Domain for Fathom Analytics

Create a custom domain

Add the custom domain to my site

Add DNS record in Vercel’s now.sh

DNS Editor for Vercel domains

Select custom domain in site settings

Add DNS record in Netlify

Add a Table of Contents with Smooth scroll using Gatsby and MDX

Clone the Gatsby Default Starter with styled-components

Add some content

Configure the project to use MDX

Configure Gatsby node to create the fields and pages

Create a post template

Confirm the pages were created with Gatsby’s built in 404 page

Build out the post template to use the MDXRenderer

Add page elements for the MDXProvider

Add gatsby-remark-autolink-headers for adding id’s to headers

Make a TOC component

Conditionally render the TOC

📺 Here’s a video detailing the process.

Resources that helped me

Thanks for reading 🙏

Globally Style the Gatsby Default Starter with styled-components v5

Install styled-components dependencies

Configure gatsby-plugin-styled-components and createGlobalStyle

Remove current styling

Confirm CSS reset

Create the new browser base styles

Place GlobalStyle at the top of the React tree 🌳

Make a Root Wrapper to keep things DRY 🌵

Global fonts with gatsby-plugin-google-fonts

styled-components Theme provider

Shared Page Elements

Export all your styled-components from an index file

Here’s a video detailing the process 📺

Thanks for reading 🙏

Resources

Upgrade Windows Subsystem Linux - Ubuntu 18.04 to Ubuntu 19.10

📺 Here’s a video detailing the process.

Check the current Ubuntu version

Do the release upgrade!

Set release upgrades to normal

Do the release upgrade, for realsies

Warnings and configs

Configure `gatsby-plugin-styled-components` and `createGlobalStyle`

Place `GlobalStyle` at the top of the React tree 🌳

Global fonts with `gatsby-plugin-google-fonts`