jonrh / jonrh.is

💻 Personal website, built with React & Next.js

⌛️ Tímavera co-founder, time tracking for contractors
🤏 Tiny CRM, hobby project with a friend, WIP
🏡 Icelandic 🇮🇸 frontend engineer
⚡️ Specialisation: JavaScript, React, React Native
👩‍💻 Exploring: Serverless, FaunaDB, Deno & Deno Deploy, Tailwind
👋 Please say hi! [email protected]

jonrh.is's Issues

Stop using GatsbyJS

This blog is currently written in GatsbyJS. It has been exciting but quite painful to set up and maintain. Basically I don't consider the cost of it worth it anymore. I think I would be better off by using create-react-app or reason-scripts.

Reasons I'm unhappy with GatsbyJS:

• Setting the blog up was very laborious, at a time when documentation was very sparse.
• I maintain my blog sporadically, every time I've come back to it something new is broken. Latest issue was node-gyp (used by the sharp image resizing plugins) not being able to work when I have Python 3 set up as default on my system.
• I have never been happy with the way images are compressed. They get double compressed and therefore loose quite a bit of quality.
• One of the reasons why I was excited for GatsbyJS was offline storage. I ran into a major issue early on which essentially bricked my website. There was a bug in gatsby-plugin-offline. Removing service worker files from cache turned out to be quite the pain.
• The GatsbyJS starte templates had a lot of dependencies to other work by Kyle Mathews. It felt like a cheap way to promote his other work.
• Some plugins struggled to be updated in the early days (not sure if that's still the case today).

Get rid of React Warning messages

Deprecation warnings from React about PropTypes and createClass() in preparation for React v16. I think I use PropTypesin my code but createClass() probably comes from GatsbyJS internals.

These warning messages only appear when developing locally but it would be ideal to get rid of them if possible.

Research testing

Given GatsbyJS fast development and braking changes I think it might make sense to look into a full fledged testing of my site. A simple approach would be to visit every path and fail if there is any errors.

Ideas for things to test for:

• After deploy, make sure robots.txt exists on dev.jonrh.is. It should not exist on jonrh.is
• After deploy, do images work?

Create a multi-year GitHub & GitLab contribution visualisation

The idea is to create a visualisation like the one above (from GitHub) except for multiple years and it combines contributions form GitLab and Bitbucket as well. Each year would be another row of the image above.

It might also be prudent to research of someone has already implemented this.

Figure out CircleCI caching to speed builds

At the time of writing I have successfully set up CircleCI to automatically deploy static files to S3 on AWS and to invalidate the CloudFront cache. The build takes about 2 minutes but could be improved in a few ways.

1. First I'm manually installing awscli with a bunch of overhead. It may be that CircleCI is clever enough to use that as a cache but maybe not.

2. The big gain is going to be in node_modules/. I tried to cache on the yarn.lock file but it didn't seem to work (see commit 8a58059). In related commits I had it set up for package.json. Maybe that's good enough.

Here is an example config:
https://github.com/CircleCI-Public/circleci-demo-javascript-express/blob/master/.circleci/config.yml

Overall I'm not too concerned about this at the moment, 2 minutes is fine.

Bootstrap call error

I do not think that this is causing any major problems, it just bangs up the style for source code (Prism). I found this issue that seems to be related:

gatsbyjs/gatsby#1043

Create and add proper high-res favicons

For more than 10 years I've used a Internet Explorer compatible favicon.ico with a single dot (because it's only 16x16). It probably time to change that. The Bespoke Dashboard logo would be probably be a good candidate.

The tasks:

• Research how modern day favicons are implemented (Firefox, Android, Chrome, etc).
• Figure out how to render the favicon in all the different sizes. There is probably some online tool that does that.

Add <meta> description tags for blog posts

Write a 50-160 character summary of every blog post for better SEO. Refactor components/Post.js to accept an additional metaDescription prop which will be put in a <meta name="description" contents={metaDescription}> tag in the <Head>. Update every blog post accordingly.

Add LaTeX style hyphenation

Make blog text justified. I think this should just be a simple CSS property but we will see. Look into if it is possible to have LaTeX style hyphenation. I have seen it before but not sure how it is implemented.

Upgrade to latest dependencies

Currently I'm using GatsbyJS v1.1.0, latest is v1.9.49. I'm guessing there have been a lot of changes since then so it would probably be worth it to upgrade so I can keep up with the latest features/documentation.

Fix Bio component, div inside of p

This is how it should look like:

This is what it sometimes looks like:

Apparently a <div> can not be nested in a <p> in HTML. Which I guess makes semantic sense when I think about it. According to this a <div> automatically closes a <p> which would explain the funky look. It looks correct while developing locally but breaks when built for release.

The task is to rework the Bio component to avoid this issue.

Figure out how to properly write draft posts

The example code on using remark has a usage of having draft blog posts. Replicate something similar:

https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark

robots.txt is missing on jonrh.is

The way I have it set up right now is that the file robots.txt is only put on https://dev.jonrh.is. See the CircleCI config file. I thought that a missing robots.txt file was technically okay. However when testing http://browsershots.org/ I get a warning saying the file is missing.

https://dev.jonrh.is/robots.txt <- Exists as expected
https://jonrh.is/robots.txt <- Error 404

Tasks

• Add robots.txt file on jonrh.is that allows all search bots, don't allow them on dev.jonrh.is as before.
• Add a test that checks for the existence of robots.txt on both environments and make sure the content is as expected.

Implement a continuous delivery / auto deployment

Start work on implementing automatic deployments when new commits land in Git. Currently I am manually building npm run build then dragging the generated files over to Cyberduck to upload to AWS S3. It is not too bad but the experience could be a lot better.

What I have in mind is to have two environments: jonrh.is and dev.jonrh.is. Ideally I would like to simply push to master which would deploy to jonrh.is but I have run into few differences between locally tested sites and sites deployed. For example issues with HTTPS. I haven't decided yet on a branch strategy but intuitively I think it would be best if master would deploy automatically to jonrh.is and a dev branch would automatically deploy to dev.jonrh.is.

I haven't decided yet on what CI tool to use. Might be worth re-surveying the SaaS options out there. Trusty Jenkins also comes to mind.

robots.txt breaks the master branch deployment

CircleCI is set up in such a way that when deploying the master branch we delete the file robots.txt. That file is not deleted on the dev branch because we want to tell search engines "hey, don't index dev.jonrh.is" so that my site doesn't get duplication penalty.

GatsbyJS supposedly supports adding static files by putting files in the static/ folder. I tried it however it didn't seem to work. The task is to look into this and get it working properly. This blocks automatic deployments to jonrh.is.

It might be that I'm running an old version of GatsbyJS that didn't have built-in support for the static folder. Might have to upgrade. Worth looking into it first though.

Template children prop type warning

Error message in the Chrome developer console:

I'm fairly sure that the culprit is in the file Template.js:

At the moment I'm not quite sure what is causing this issue nor what real effect it has.

Might be related: gatsbyjs/gatsby#1082

Add a favicon

Currently the developer console of browsers give a 404 error message that no favicon was found. The task is to add my previous one. It is probably no problem so this issue serves mainly as a reminder.

Set up error reporting

With the amount of errors and fast development pace of GatsbyJS I think it might be prudent to set up error reporting for the site. Rollbar or something similar.

Might want to look into if that can be done in the first place, that is see if it okay to have a Rollbar key being bublic. If it is an issue I could maybe obfuscate the key, would at least ward off crawlers.

I guess it would make sense to set up a Slack channel with notifications as well.

Language Translations

Long term I would like to have my site in few different languages: English, Mandarin, Hindi. Maybe Icelandic, Spanish, and French.

• Figure out if there is a proper way in HTML5 to indicate the availability of other languages, for accessibility and SEO reasons.
• Research if there is an established way to deal with translations in GatsbyJS.

Figure out the problem with Service Workers

I believe I have found the problem that blocks me from publishing the website.

HTTP local dev

No errors appear when developing locally.

HTTP, works correctly

When the site is tested on HTTP: http://dev.jonrh.is.s3-website-us-east-1.amazonaws.com/

HTTPS, does not work

When the site is tested on HTTPS: https://dev.jonrh.is/

The Problem

I suspect that something is broken with the plugin gatsby-plugin-offline. On HTTP Chrome alerts that since the service worker does not have a HTTPS origin it was blocked. Then the site works as expected. However when HTTPS is used there seems to be some error in the service worker and you can not switch between pages.

One way to solve this temporarily would be to try to disable or remove the gatsby-plugin-offline plugin.