In 2021 I read a total of 68 books - 66 in English, and two in Japanese. Like my wrap-up posts in 2020 and 2019, I’ve listed some of favourite books from the past year, as well as a reflection on how my year went. My top 5 books of 2021 I gave 15 books 5 stars this year. As always, it’s hard to pick a top five, so I decided to try and pick each one from different genres. Into Thin Air by Jon Krakauer Krakauer's best known for his book Into the Wild. I'd also recently read his book about Mormonism, Under the Banner of Heaven. However I had no idea he had first-hand experience climbing Mt Eve ..read more

2021 was a much more quiet year on my blog than compared to 2020. Continuing the tradition of my 2020 review post, here’s how my site has performed over this past year. My most popular posts on emgoto.com I published 13 posts on my website in 2021, and received 165,203 page views (according to Google Analytics): I only received 25k views in 2020, so it's a pretty huge jump. One of my goals for this blog was to eventually hit 10k views a month, and I passed this milestone in May ? This growth is largely due to my posts showing up more frequently in Google search results. My top three posts wer ..read more

On Writing Well’s key message is to be economical in your writing. Find the most efficient way to express your ideas. Skip the fancy prose, because your readers will see through its pretentiousness, and instead focus on expressing your ideas clearly. As a writer you might worry that by doing this, you will lose any chance standing out and having your own unique writing style. But like carpentry, you have to start from the foundations. And over time, your style will grow. The book reiterates some of the advice laid out in the Elements of Style: Use active verbs Cut out most adverbs (e.g. “blar ..read more

After publishing a post to my site, I usually cross-post it to DEV.to. Originally I would use their RSS feature and cross-posting was quite a painless process, but over time I've added new features to my blog like: Line highlighting and code block headings (covered in my post on Gatsby code blocks) MDX components Additional Markdown frontmatter fields that aren’t used in DEV.to Which meant that I had to keep making manual changes to all my posts to make them ready for publishing on DEV. To save me some time, I wrote a script to automate this process. If you've never written a script before ..read more

I use the Ulysses text editor to write all my posts. Converting them into Markdown files for my blog isn’t as easy as copy-pasting, especially when things like frontmatter and images are involved. So here's the script I use to convert Ulysses files to Markdown. Right click a sheet in Ulysses and choose the Quick Export option. Choose the Textbundle format. Save the Textbundle folder to your desired location. I save it inside the scripts folder of my repository. Then run the following script to convert the Ulysses file to Markdown. #!/usr/bin/env node const { renameSync, unlink, rmdir ..read more

Inline editing allows users to edit content without navigating to a separate edit screen. In this tutorial, we’ll be building an accessible inline edit component in React. Here’s the final product: We’ll also learn how to write some unit tests with React Testing Library. Let’s get started! This tutorial assumes a basic understanding of React, including hooks. If you want to jump straight to the full code, check out the React inline edit example on Codepen. Inline editing and accessibility When creating any React component, keep accessibility in mind. For example, your component should: Wor ..read more

As a kid I really wanted a dog. After begging my mum, she gave in with the proviso that I would be in charge of feeding and walking it twice a day. And so I got my dog, Aka, in 2005. Aka was a year or two old in that photo (and that's me and my younger brother). You can see me holding onto him pretty tightly - it was the only way to get him to sit still for the photo! My mum chose his name (Aka means "red" in Japanese) which was probably for the best because at the time I would've chosen a name like "Rusty" or "Foxy". She chose a Shiba Inu out of some sense of patriotism (she's Japanese) but ..read more

One of the ways you can make your Gatsby posts stand out to readers is to add a social card image. In this post, you'll learn how to generate these images automatically with gatsby-plugin-react-social-cards. What is a social card? A social card is the preview shown when you paste a link into a site like Twitter: This can give readers more context on your post, and entice them to click the link. There are a couple of existing Gatsby plugins which let you create social card images from a template. However their customisation options are quite limited. Up until now I've been using a modified ver ..read more

A table of contents lets your readers see a high-level summary of your page. In this tutorial, we’ll be building a table of contents with React. This component will dynamically render a list of page headings and highlight which heading you are currently viewing. Here's our final product: If you are viewing this post on my website, you will be able to see it in action there as well. Looking for a full code example? Check out the tutorial’s Codepen. Get started with a new component file To begin, let’s create a new TableOfContents file. src/components/tableOfContents.js const TableOfContent ..read more

Does your Gatsby blog have a commenting system set up? If not, you could be missing out! Comments help drive engagement by giving your readers an avenue to ask you questions and add useful information to your blog posts. Gatsby doesn’t provide comments out of the box, but I’ll be showing you how easy it is to get started with two separate commenting systems - utterances and GraphComment. Add comments to your Gatsby blog with utterances How does utterances work? utterances is a commenting system built on top of Github. Users will have to authenticate with their Github account before they can le ..read more