DEV Community: Adam Laycock

Robocopy, the best copying tool you already have.

Adam Laycock — Mon, 25 Nov 2019 21:31:56 +0000

Robocopy is an amazing tool that is built into Windows. If your running Windows 10 you already have it! Just fire up a command prompt and your away.

I've known about and used Robocopy for quite a few years now. In my line of work I often find I need to copy multiple terrabytes of data from one server to another and the standard Windows file copy is just not setup for that.

The standard file copy does some helpful stuff that doesn't scale well. Counting the remaining files, estimating the time remaining, and calculating the total transfer speed all take time and effort that could be spent copying.

Robocopy or Robust File Copy to use its full name is a command line utility that is faster and has quite a few more options than the standard file copier.

Some Numbers

Lets put some numbers to the performance of robocopy.

First off the standard copy dialog.

To keep things fair I am copying the same 140MB folder from one place on my SSD to another.

Standard File Copy (SFC so I don't have to keep typing it) managed to copy the folder in 9 seconds which isnt bad.

Robocopy on the other hand managed the same copy in 2 seconds.

Thats a pretty good reduction although you do lose more than 7 seconds to opeing command prompt and typing the command out but thats not the point, if you need robocopy over the standard file copy chances are your copying something pretty big.

More features

Robocopy can do more than just copy files/folders from one place to another. The quickest way to use robocopy is with /MIR e.g.

robocopy C:\Data D:\Backup /MIR

/MIR or Mirror is a shorthand for /E /PURGE which means copy all subdirectories include empty ones (/E) and delete files/folders in the destination that are not present in the source (/PURGE). Couple this with the fact that robocopy will skip exisiting unchanged files and youve got a great way to migrate data. I frequently run a robocopy that takes hours one week then come back a week later to finish the job and have a really quick robocopy only unpdate the destination with the weeks changes.

There are a multitude of options that can change the way robocopy works. I wont go into them all here robocopy /? will list them all for you. The options I use a lot is /XD which can exclude directories from your copy and /XF which does the same for files. These options are incredibly useful when copying a user profile.

robocopy C:\Users\Adam D:\Backups\Adam /MIR /XD AppData /XF ntuser.dat

This excludes AppData that is normally pretty big and contains a lot of content that isnt really something you can copy, ntuser.dat is the users registry which if your logged on as the user you are copying will be in use and un readable.

/W:0 /R:0 also features alot when I do big copies as it reduces the wait time to 0 and the retries to 0 which stops robocopy wasting its time on corrupt or in use files. As menitoned earlier I can simply re run the same copy later and it will only try the files it had problems with again.

The robocopy help file an be read online over on Microsoft Docs which goes into great detail of the other options robocopy has.

Destructuring in JavaScript

Adam Laycock — Mon, 25 Nov 2019 13:20:56 +0000

Destructuring allows you to assign values to variables in a quick shorthand instead of having multiple lines. I use it pretty much every day but I can’t remember a time when I actually learnt anything about it, it just kind of appeared in my code and I’ve used it ever since.

A prime example of its use in the wild is React, take this function component.

const MyComponent: React.FC<{startCount: number}> = ({startCount}) => {
  const [count, setCount] = useState(startCount)

  return <button onClick={() => setCount(count + 1)}>Count ({count})</button>
}

Without destructuring it would look like this.

const MyComponent: React.FC<{startCount: number}> = (props) => {
  const countState = useState(props.startCount)

  return <button onClick={() => countState[1](countState[0] + 1)}>Count ({countState[0]})</button>
}

Both types of destructuing occur in this example so lets take a look at them.

Array Destructuring

const array = [1,2,3]

const [c1, c2, c3] = array

c1 // 1
c2 // 2
c3 // 3

With Array Destructuring you are taking the elements in the array and assigning them to variables, as a result the order of variable names is important.

This is how React’s useState works and it is used here because the React developers that wrote useState have no idea what the names you want to use for the variables are.

Object Destructuring

const author = {
  age: 29
  name: 'adam'
}

const {age, name} = author

age // 29
name // adam

With Object destructuring the names of the object’s properties are important. The properties of the object become the variables that come out of the destructuring.

Lets say useState actually returned an object of {value: T, setValue: (newValue: T) => void} we would have to assign those values as:

const {value, setValue} = useState(1)

As you can see its not very descriptive which is why the return value from useState is an array.

You can assign different variable names to destructured properties but the process would be cumbersome if we had to do it for every useState call.

const {value: count, setValue: setCount} = useState(1)

useQuery and useLazyQuery

A great example of when/why you would use either return type is Apollo GraphQLs React Hooks of useQuery and useLazyQuery.

useQuery runs the query the moment the component is mounted and returns an object. This is great as you usually only have one query per component, and if you have more you should really merge them or move the code into another component. This means at a minimum you are pulling loading, error and data from useQuery.

const {loading, error, data} = useQuery(SOME_QUERY)

useLazyQuery on the other hand waits until it is called to run the query. To this end it returns an array the first element of which is the function to run the query and the second is the same return object as useQuery with an additional called property.

const [getAuthors, {called, loading, error, data}] = useLazyQuery(AUTHOR_QUERY)

I use destructring every day across all the code I write and it’s become my default way of working as I’m sure it has for a lot of my fellow developers. Hopefully this article gives everyone new and old to destructuing an idea of what is going on when you use it.

Using HTMR to bring life to links in Gatsby

Adam Laycock — Wed, 15 May 2019 10:12:51 +0000

One of the amazing things about Gatsby is that your site is a full blown React app. Because of this it’s always bugged me that whilst the navigation within app is extremely fast anything I link to from my markdown triggers a full request for the page.

This happens because the links in markdown are just an a tag placed on the page from dangerouslySetInnerHTML. This means no event listeners or anything, just a plain old fashioned link. The solution is to parse the HTML string and swap ot the links for the proper React components.

There are a few HTML to React converters but I found HTMR easy to use for my needs. I’m only looking to swap out a tags for a Link component, not binding events or anything fancy like that.

I already have a Content component that takes a html prop. I created it for just such a case as this where I want to change the way content is rendered across the whole site.

import React, {ReactHTMLElement} from 'react'
import convert from 'htmr'
import {HtmrOptions} from 'htmr/lib/types'
import {OutboundLink} from 'gatsby-plugin-google-gtag'
import {Link} from 'gatsby'

export const Content: React.FunctionComponent<{html: string}> = ({html}) => {
  const transform: HtmrOptions["transform"] = {
    a: (node: Partial<ReactHTMLElement<HTMLAnchorElement>["props"]>) => {
      const {href} = node

      if(href!.substr(0, 4) === 'http'){
        return <OutboundLink href={href!}>{node.children}</OutboundLink>
      }

      return <Link to={href!}>{node.children}</Link>
    }
  }

  return <div>{convert(html, { transform })}</div>
}

So what is this doing?

convert comes from HTMR and performs the actual conversion. I’ve put it in a div tag here to deal with the edge case of html being a string with no tags in it. To bring life to links I used the optional transform option that you can pass to the convert function. From here you can map tags to other tags e.g. b: 'strong' to use strong instead of b for all b tags. Or you can provide a replacement component, button: Button to use a styled button instead. The third usage method is to provide a function.

The function is passed a single argument which is the props that HTMR would use for the orginal tag.

For Example:

// HTML
<a href="/something">a link</a>
// Props
{href: '/something', children: 'a link'}

In the code above I do a check of the href prop to see if this is an internal link, or an external link. If its an external link it is replaced with an OutboundLink which makes sure Google Analytics handles the link correctly. Otherwise it must be an internal link which gets replaced with a Link.

The outcome of all this is much faster internal links.

Take this link to about me it is an internal link that is now a proper Link. Give it a try and notice how fast it is. This link to my uses page on the other hand, thats a full blown link and works like internal links did before HTMR.

There is the plugin gatsby-plugin-catch-links that provides a similar outcome but does it in a very heavy handed way. It binds itself to all links in the browser and on a per-link basis decides if its an internal link and how to navigate to its target. My method with HTMR fixes the links during site build and requires no extra even bindings on the client side. Plus it only applies to the markdown and not other links on the site that are already React components.

Generated Social Images

Adam Laycock — Wed, 23 Jan 2019 13:30:00 +0000

I follow dev.to who have some great images on their tweets that are bascially just the post title and author. I really like the way it looks and want to try something here.

I’m not a fan of manual labour and that includes using photoshop to create an image for each post so that only leaves generating the images with Gatsby.

JIMP

I wanted to keep the image generation entirely in Gatsby to keep things easier. This meant I needed a JS only image creation library which is where I found JIMP.

I fire my createImage function for nodes that I might share like posts, notes and books during the on-create-node hook.

This function creates an image for both Facebook and Twitter that I link to through the open graph tags in the templates Helmet.

The images themselves are nothing special just the content background colour, the sites icon, the post date, and the title. Take the one for this post:

The code to do this is pretty simple and can be found in the sites source here. I was surprised how easy this turned out to be.

Having gatsby generate the images instead is pretty handy. I can keep the images out of the git repository which is already pretty big and I wont have to remember to make sure they commit.

This is a small feature that most users of the site wont even see but its a nice one to have. I’ve been more and more impressed with Gatsby as I’ve been using it to the point that I now think along with Netlify CMS it can be a complete replacement for WordPress for the School websites I build.

Netlify CMS on the filesystem with Gatsby

Adam Laycock — Sat, 19 Jan 2019 21:35:47 +0000

I was looking at Netlify CMS for a website I was building and I wanted to test it before I put code to repo. Unfortunatley by default Netlify CMS will only let you use git as a backend which is great once the site is launched but when I want to test the CMS or dratically change the config the only way to test it would be to commit code that should work and then hope. This leaves a bad taste in my mouth, if code is hitting the repo it should pass tests so comitting something that on paper should work doesn't feel right to me.

Netlify CMS edits the source files directly normally by commiting to the git repo. I needed a way of making changes to the local file system directly.

Before making changes to the config I needed to install gatsby-plugin-netlify-cms which adds everything you need to get going with Netlify CMS and Gatsby and created static/admin/config.yml.

The important part of the file for this article is the backend which for me is:

backend:
  name: github
  repo: Arcath/...

FS Backend

Enter netlify-cms-backend-fs.

To get this working in Gatsby I needed to make a couple of edits to my gatsby-config.js to load the fs-api and configure gatsby-plugin-netlify-cms so that it uses the fs backend.

First off the entry in the plugins array needs changing to this:

{
  resolve: `gatsby-plugin-netlify-cms`,
  options: {
    modulePath: `${__dirname}/src/cms/init.js`, // Or another path if you don't want to create /src/cms/init.js
    enableIdentityWidget: false,
    publicPath: 'admin',
    htmlTitle: 'Content Manager',
    manualInit: true,
  },
}

After that I needed to require the file system api from the backend.

let fsApi = require('netlify-cms-backend-fs/dist/fs/fs-express-api')

The Gatsby config needs the middleware loading which can be done by adding developMiddleware: fsApi to the config object.

To use it in development I added a development_overrides key to my config.yml:

development_overrides:
  backend:
    name: file-system
    api_root: 'http://localhost:8000/api'

Now I have all the config in place I just need to tie it all together with src/cms/init.js

import CMS, { init } from 'netlify-cms'
import {FileSystemBackend} from 'netlify-cms-backend-fs'

// If running in development
if(process.env.NODE_ENV === 'development') {
  window.CMS_ENV = 'development_overrides' // Set the CMS_ENV to the development_ overrides.
  CMS.registerBackend('file-system', FileSystemBackend) // Register the FileSystemBackend.
}

// Start NetlifyCMS
init()

This has worked really well for me letting me test and use Netlify CMS on my local machine.

Originally posted on my blog here