I’ve used several note taking applications, like <a href="https://bear.app/">Bear</a>, but more recently, I’ve been using <a href="https://www.notion.so/">Notion</a> for writing my posts and planning my episodes for my podcast. It’s used by companies such as Figma, Pixar, Nike, Amazon, Uber and Toyota.
And the fact that it does so much for free is mind blowing.
In case you don’t know what Notion is, it’s described as a connected workspace. Which offers features that support teams from Engineering, Design, to HR in creating effective documentation. Notion have also recently launched a separate <a href="https://www.notion.so/product/calendar">calendar</a> application as well.
I’ve very slowly begun to explore what Notion can do and I’m sure that over time, I’ll gradually learn more of the complex features behind it
Although the application is more geared for business use, but it’s also extremely useful for personal use. From planning trips, tracking tasks, to taking notes, Notion does it all. This is what I’ll be focusing on in this blog post.
Now don’t get me wrong, there are plenty of other free note taking applications out there. In fact, there are extensions available for the Apple Notes application such as <a href="https://smallest.app/notescmdr/">NotesCmdr</a> and <a href="https://www.pronotes.app/">ProNotes</a>.
But I’ve ended up using Notion for so many things, not just note taking:
<ul>
<li>Organising my LinkedIn Learning / Udemy course notes</li>
<li>Managing my blog posts</li>
<li>Planning trips</li>
<li>Planning a podcast</li>
</ul>
Let’s jump into a few of my favourite features
<h1>Writing</h1>
At Notion’s core is writing.
Whether it’s for personal note taking, documenting for a product, or writing a book. Notion’s minimalist design makes it appealing for writing.
If you enjoy writing in markdown, then you’ll find some similarities between Notion and markdown syntax (especially if you plan on exporting your notes).
<h1>Databases</h1>
One feature that pulled me in to using Notion was that I could create a database on a page. I ended up creating a kanban board for my blog. I would have unique posts on the board, which would link to it’s own page for me to write the post contents and move it along the kanban board.
I honestly can’t believe that I’m excited over the ability to create and manage kabnan boards.
Plus, you can create a template so that when you create a new item on your kanban board, it’ll have whatever you want ready to go. I use this feature for my podcast, so when I start planning a new episode, Notion will use the template that will have an episode layout ready for me to fill in. I’ve found that this saves time and stops having to copy and paste something I did before.
But there’s more than just kanban boards. Notion offers galleries, lists, calendars, tables and more as databases than can be added onto a page.
<h1>Media</h1>
From YouTube videos, images, files and sound; media can be easily added onto a page in Notion.
The only media I tend to embed into my blog posts is code. When I export the post, it treats it as a markdown file, which makes it easy for me to publish the post on my website.
I can see embedding media being useful on documentation for marketing or HR teams. But for personal, I don’t use this feature that much.
<h1>Integrations</h1>
A way for Notion to stop you from switching to different applications is by offering <a href="https://www.notion.so/integrations">integrations</a>. Whether you want your data in Notion to be observable to keeping data from other tools in sync, Notion offers a wide amount of integrations.
I currently use the <a href="https://www.notion.so/integrations/github">GitHub</a> integration so I can see a table of the merge requests I’ve created for my website and their status, I find it to be a handy overview of what I’ve done.
Majority of the integrations available are more aimed at businesses rather than personal use, but I’ve found the GitHub integrations mentioned above to be useful for hobby projects.
I did discover something called <a href="https://www.notion.so/integrations/nightfall-ai">Nigthfall AI</a>, which seems useful for detecting sensitive information such as API keys on your pages.
<h1>Templates</h1>
Another part of Notion is the community <a href="https://www.notion.so/templates">templates</a> that are available to use, from free to paid. There are templates for content creating, personal websites, teaching, engineering, personal finance and more!
I think this is one of the strongest points of Notion. Finding templates to suit your need where a majority are free to use is great. Plus, I find it’s a good way to learn Notion by seeing what others can create.
<h1>Publishing to the web</h1>
Speaking of templates, you can share your pages online for others to view, edit and comment.
I’ve uploaded an online version of my <a href="https://www.notion.so/Joshua-Blewitt-Resume-CV-accea10012824431bc7f8654d77590a2?pvs=21">resume</a> for anyone to see (in fact, there’s a link on the homepage to it!)
If you’re looking for a quick and professional way to build your web presence, using a Notion page is a good idea.
<h1>AI</h1>
Yes, Notion has an <a href="https://www.notion.so/product/ai">AI feature</a> as well.
And it’s something that I would use, on both personal and in a professional use case. I’ve tried this with some notes from courses I’ve taken and it works surprisingly well.
The Q&#x26;A feature is incredibly useful if you’re searching through notes and are looking for a high level summary. There’s also features for helping with writing and autofilling tables.
There are also AI powered <a href="https://www.notion.so/templates/category/ai">templates</a> as well, ranging from planning a trip to product name description.
The AI feature is free to try, but it does cost a monthly fee (starting from $8 a month).
<h1>Even more…</h1>
This is only scratching the surface of what Notion can do.
Notion can also:
<ul>
<li>Add table of contents to posts</li>
<li>Add equations</li>
<li>Add buttons</li>
<li>Breadcrumb trail</li>
<li>Add columns</li>
<li>Add dividers</li>
<li>Sync content across pages</li>
<li>And more!</li>
</ul>
<h1>Wrap up</h1>
That’s a quick overview on how I use Notion.
It’s free to use and it offers great mobile applications as well as desktop and web versions as well.
If you’re like me who has a blog with over 100 posts, using something like Notion to organise your posts is worth looking into.

Notion - the application that organises my blog posts

<h2>Introduction</h2>
Recently, I decided to work on my SQL skills a bit by exploring some COVID data produced by <a href="https://ourworldindata.org/covid-deaths">Our World in Data</a>, and you can find the GitHub repo <a href="https://github.com/JB-26/SQL-Project-Data-Exploration">here</a> if you want to recreate the database yourself (sadly my idea of uploading the backup of the database itself as a tar file didn’t work as planned, it’s too big for GitHub). Feel free to clone the repo, and explore the data.
In fact, this dataset is updated daily and can be reused freely!
I will say that preparing the data was the hardest part, so the repo will include specific CSV files if you are working with a Postgres database (like I did).
So in this short post, I wanted to share some of the queries I wrote, and what they returned.
But let’s say I’ve created the database (using Postgres), and now I need to create the two tables I need; one for deaths, and one for vaccinations:
<pre><code class="language-sql">-- Table: public.covid_deaths

-- DROP TABLE IF EXISTS public.covid_deaths;

CREATE TABLE IF NOT EXISTS public.covid_deaths
(
 iso_code character varying(50) COLLATE pg_catalog."default",
 continent character varying(50) COLLATE pg_catalog."default",
 location character varying(50) COLLATE pg_catalog."default",
 date date,
 population numeric,
 total_cases numeric,
 new_cases numeric,
 new_cases_smoothed numeric,
 total_deaths numeric,
 new_deaths numeric,
 new_deaths_smoothed numeric,
 total_cases_per_million numeric,
 new_cases_per_million numeric,
 new_cases_smoothed_per_million numeric,
 total_deaths_per_million numeric,
 new_deaths_per_million numeric,
 new_deaths_smoothed_per_million numeric,
 reproduction_rate numeric,
 icu_patients numeric,
 icu_patients_per_million numeric,
 hosp_patients numeric,
 hosp_patients_per_million numeric,
 weekly_icu_admissions numeric,
 weekly_icu_admissions_per_million numeric,
 weekly_hosp_admissions numeric,
 weekly_hosp_admissions_per_million numeric,
 total_tests numeric
)

TABLESPACE pg_default;

ALTER TABLE IF EXISTS public.covid_deaths
 OWNER to postgres;
</code></pre>
<pre><code class="language-sql">-- Table: public.covid_vaccinations

-- DROP TABLE IF EXISTS public.covid_vaccinations;

CREATE TABLE IF NOT EXISTS public.covid_vaccinations
(
 iso_code character varying(50) COLLATE pg_catalog."default",
 continent character varying(50) COLLATE pg_catalog."default",
 location character varying(50) COLLATE pg_catalog."default",
 date date,
 total_tests numeric,
 new_tests numeric,
 total_tests_per_thousand numeric,
 new_tests_per_thousand numeric,
 new_tests_smoothed numeric,
 new_tests_smoothed_per_thousand numeric,
 positive_rate numeric,
 tests_per_case numeric,
 tests_units character varying(50) COLLATE pg_catalog."default",
 total_vaccinations numeric,
 people_vaccinated numeric,
 people_fully_vaccinated numeric,
 total_boosters numeric,
 new_vaccinations numeric,
 new_vaccinations_smoothed numeric,
 total_vaccinations_per_hundred numeric,
 people_vaccinated_per_hundred numeric,
 people_fully_vaccinated_per_hundred numeric,
 total_boosters_per_hundred numeric,
 new_vaccinations_smoothed_per_million numeric,
 new_people_vaccinated_smoothed numeric,
 new_people_vaccinated_smoothed_per_hundred numeric,
 stringency_index numeric,
 population_density numeric,
 median_age numeric,
 aged_65_older numeric,
 aged_70_older numeric,
 gdp_per_capita numeric,
 extreme_poverty numeric,
 cardiovasc_death_rate numeric,
 diabetes_prevalence numeric,
 female_smokers numeric,
 male_smokers numeric,
 handwashing_facilities numeric,
 hospital_beds_per_thousand numeric,
 life_expectancy numeric,
 human_development_index numeric,
 excess_mortality_cumulative_absolute numeric,
 excess_mortality_cumulative numeric,
 excess_mortality numeric,
 excess_mortality_cumulative_per_million numeric
)

TABLESPACE pg_default;

ALTER TABLE IF EXISTS public.covid_vaccinations
 OWNER to postgres;
</code></pre>
At this point, the data can be imported, I used PgAdmin to import the CSV data into the respective tables.
And with the tables and data now ready, let’s jump into some queries.
<h2>Total Cases</h2>
Let’s look at the number of total cases vs total deaths and vs population. Essentially, these queries show:
<ul>
<li>what’s the likelihood of dying if you catch COVID</li>
<li>what’s the percentage of population that caught COVID</li>
</ul>
<pre><code class="language-sql">-- looking at total cases vs total deaths
-- shows the likelihood of dying if you contract covid in your country

SELECT cd.location,
 cd.date,
 cd.total_cases,
 cd.total_deaths,
 (cd.total_deaths/cd.total_cases)*100 AS death_percentage
FROM covid_deaths cd
WHERE cd.location like '%States'
 AND cd.continent IS NOT NULL
ORDER BY 1,
 2;

-- Looking at total cases vs population
-- shows percentage of population that caught covid

SELECT cd.location,
 cd.date,
 cd.total_cases,
 cd.population,
 (cd.total_cases/cd.population)*100 AS InfectionPercentage
FROM covid_deaths cd
WHERE cd.location like '%States'
 AND cd.continent IS NOT NULL
ORDER BY 1,
 2;
</code></pre>
For the first query, apart from selecting several rows, the death percentage is calculated by taking the total deaths, dividing it by total cases and then multiplying it by one hundred. This query would returns thousands of rows so I decided to filter it by a specific country.
What this query returns is that early on in the pandemic, the death percentage peaked at roughly 6% (as the number of deaths were high against the relatively low number of cases), but now it sits at 1%.
The second query is somewhat similar to the first, but now the infection percentage is calculated by taking the total cases, dividing it by the population and then multiplying it by one hundred. Again, I’m filtering the results by a specific country.
What this query shows is that the percentage of people infected jumped massively at the start of the pandemic. But in the United States, it seems to have settled at 30% of the population being infected.
<h2>Countries</h2>
Let’s move away from a specific country and let’s see if we can find some data about a range of countries.
<pre><code class="language-sql">-- Looking at countries with highest infection rate compared to population

SELECT cd.location,
 cd.population,
 MAX(cd.total_cases) AS HighestInfectionCount,
 MAX((cd.total_cases/cd.population))*100 AS PercentPopulationInfected
FROM covid_deaths cd
WHERE cd.continent IS NOT NULL
GROUP BY cd.population,
 cd.location
ORDER BY PercentPopulationInfected DESC;

-- showing countries with highest death count per population

SELECT cd.location,
 MAX(cd.total_deaths) AS TotalDeathCount
FROM covid_deaths cd
WHERE cd.continent IS NOT NULL
GROUP BY cd.location
ORDER BY TotalDeathCount DESC;
</code></pre>
The first query selects and then groups by the population and the location, while finding the highest value of the total cases recorded and calculating the percentage of the population that has been infected (by taking the max values of the total cases, the population, dividing them and multiplying by 100).
This query returns a list of locations, their population, the highest infection count and their percentage of population that has been infected. There are several locations that haven’t released their infection counts, so there are rows which return a <code>NULL</code> value.
The second query is slightly different, as it only finds the max value of total deaths from each location. What the query shows is that, although there are locations that didn’t report the number of deaths which show a <code>NULL</code> value, there are countries that do. The results ordered by the highest number of total deaths.
<h2>Global numbers</h2>
Let’s take a look at the global numbers for cases, deaths, and a death percentage. This attempts to calculate the percentage of deaths by taking the sum of the new deaths, dividing it by the sum of new cases, and then multiplying it by 100.
<pre><code class="language-sql">-- global numbers
-- handling dividing by zero

SELECT cd.date,
 SUM(cd.new_cases) AS total_cases,
 SUM(cd.new_deaths) AS total_deaths,
 CASE
 WHEN SUM(cd.new_cases) = 0 THEN NULL
 ELSE SUM(cd.new_deaths)/SUM(cd.new_cases)*100
 END AS death_percentage
FROM covid_deaths cd
WHERE cd.continent IS NOT NULL
 AND cd.new_cases IS NOT NULL
GROUP BY cd.date
ORDER BY 1,
 2;
</code></pre>
This is when things get slightly tricky. Calculating the death percentage at first returned an error as it couldn’t calculate dividing by zero. So to handle this issue, I decided to use a case statement to change the value from zero to <code>NULL</code>.
The query returns a lot of <code>NULL</code> rows but it does calculate the death percentage.
<h2>Vaccinations</h2>
The last query we’ll look at is examining the number of new vaccinations and the rolling total:
<pre><code class="language-sql">-- total population versus vaccinations
 -- Use Common Table Expression
WITH PopVsVac (Continent, Location, Date, Population, New_Vaccinations, RollingPeopleVaccinated) as
 (SELECT cd.continent,
 cd.location,
 cd.date,
 cd.population,
 cv.new_vaccinations,
 SUM(cv.new_vaccinations) OVER (PARTITION BY cd.location
 ORDER BY cd.location,
 cd.date) as RollingPeopleVaccinated
 FROM covid_deaths cd
 JOIN covid_vaccinations cv ON cd.location = cv.location
 AND cd.date = cv.date
 WHERE cd.continent IS NOT NULL
 AND cv.new_vaccinations IS NOT NULL)
SELECT *
FROM PopVsVac;
</code></pre>
I decided to use a Common Table Expression for this (to make it easier to read and maintain), and the rolling total is calculated by using a partition for each location.
The result of this query is that this shows the number of new vaccinations, the rolling total of vaccinations for each country. This could be expanded to show the percentage of the population that have been vaccinated.
<h2>Bonus; create a view</h2>
As an added bonus to this post, let’s look at creating a <a href="https://www.postgresql.org/docs/16/sql-createview.html">view</a>:
<pre><code class="language-sql">-- create a view

CREATE VIEW country_infection_rate AS
SELECT cd.location,
 cd.population,
 MAX(cd.total_cases) AS HighestInfectionCount,
 MAX((cd.total_cases/cd.population))*100 AS PercentPopulationInfected
FROM covid_deaths cd
WHERE cd.continent IS NOT NULL
GROUP BY cd.population,
 cd.location
ORDER BY PercentPopulationInfected DESC;

SELECT *
FROM country_infection_rate;
</code></pre>
What this view will return is the percentage of the population that has been infected in a location, ordered by the location that has the highest percentage first.
Making a view will make it easier to find this information (and that all the queries ran previously could also be made into a view).
<h2>Wrap up</h2>
So that was a quick overview of the exploratory work in SQL! Don’t forget to check out the GitHub <a href="https://github.com/JB-26/SQL-Project-Data-Exploration/tree/main">repo</a>, and if you have any feedback, get in touch!
Until next time 👋
<h2>Citations</h2>
Edouard Mathieu, Hannah Ritchie, Lucas Rodés-Guirao, Cameron Appel, Charlie Giattino, Joe Hasell, Bobbie Macdonald, Saloni Dattani, Diana Beltekian, Esteban Ortiz-Ospina and Max Roser (2020) - "Coronavirus Pandemic (COVID-19)". Published online at <a href="http://ourworldindata.org/">OurWorldInData.org</a>. Retrieved from: 'https://ourworldindata.org/coronavirus' [Online Resource]

Exploring COVID data with SQL

Fairly recently, I lost my job.
It was a weird moment. Especially waking up on Monday morning and realising I wasn’t needed at work felt incredibly weird, and slightly upsetting. I’ve found that the impact of the situation didn’t really hit until the start of the working week.
This post alone has taken more than a week to write, it’s taken time to get my thoughts down.
I decided I needed to create a strategy that would keep me positive and productive during this time. I wanted to avoid slipping into depression or just getting frustrated with applying for jobs and to maximise the amount of free time that I had available to me. I knew it was important that I found the right strategy.
So in this post, I wanted to share the strategy I’ve created and how it’s been going.
<h1>Updating my website, LinkedIn and CV</h1>
One of the first things I did was update my website, LinkedIn and CV. Which has honestly more difficult than I thought it would be. It was slightly embarrassing to be honest as I thought I’d never find myself in this situation.
It needed to be done as it would honestly reflect the situation I was in to future employers.
I’m looking forward to when I can update it again when I have a new role, and to remove the ‘open to work’ ring on my profile picture.
<h1>Taking care of myself</h1>
Self care is still very important during this time, so I’m getting enough rest and engaging in activities that bring me joy and relaxation.
I’ve also found it important to speak to my family. Finding the time to speak to my wife or parents has been very helpful throughout this difficult time. If there’s anyone else going through the same situation, definitely go and speak to anyone that you’re close with. I’m very lucky to be surrounded by a supporting family during this challenging time.
Also, I’ve found that writing helps as well. I’ve been running this blog for nearly five years now and it’s been a great hobby to have. Not only do I enjoy running and maintaining it but also it’s been a good way to destress and to distract myself.
Plus, I’ve thought of a few upgrades and improvements I can make to my site, which is great.
<h1>At my desk by 9AM</h1>
I’m still treating each weekday as a work day. So I’m at my desk by 9AM, ready to work. Reason for this as I not only want to maximise the day as much as possible, but I wanted to avoid staying in bed for most of the day. I found it was easy to stay in bed and that could impact my mental health.
So I made the effort to set my alarm to the time I normally do. And so far I think having this habit is good to have, having a routine has definitely helped with me being productive and active through a work day.
<h1>Train</h1>
I wanted to use my free time effectively and efficiently as possible. So I decided to enrol in some online courses to boost my skills in areas that I’m interested in. At the moment, I’m working my way through a data analyst course on YouTube created by the <a href="https://www.freecodecamp.org/">freeCodeCamp</a> charity (which has been a fantastic course by the way).
I’ve also been spending some time practicing my new and existing skills. Turns out there are a few areas that I needed to revisit. I tend to store course notes in Notion so I can revisit them later and this has proven to be extremely useful during this time (on a related note, the ‘Ask AI’ feature in Notion is very handy when searching notes on training courses I’ve done)
I have some future blog posts planned on what I’ve been doing and learning recently so keep an eye out for those posts in the near future.
Plus, I’ve been investigating potential updates to my other projects that I have, such as <a href="https://github.com/JB-26/super-blog-starter">Super Blog Starter</a>. Which is a project that I haven’t been able to work on since February, so it’s good to make time for these projects again.
<h1>Apply for jobs</h1>
It seems obvious but it’s worth mentioning. One of the best things to do is to search and apply for jobs when it comes to addressing any worries or anxieties.
I’ve created a Excel spreadsheet to log which jobs I’ve applied for (it even has drop down choices for several fields), just so I can keep track where I’ve applied to and the status. I might share the spreadsheet to help others who are looking for a new job.
I’ve been using resources such as LinkedIn and Indeed when it comes to finding job postings.
Once I have a new job, I plan to create a <a href="https://sankeymatic.com/">Sankey diagram</a> of my overall experience in finding a job.
<h1>Reflect</h1>
At first, I didn’t really feel the impact of the situation. I think I kept myself distracted from thinking about it over a weekend. But I knew I had to spend some time thinking and reflecting on the experience and ask myself questions on what I learned from it, what the positives were, etc. I’ve found it’s important to take the time and think about the experience, as it can give guidance on what to do next.
<h1>Did this plan work?</h1>
It’s been just over a week since I lost my job and I think the strategy I created has been working well so far. I’ve applied for (at this time of writing) twelve jobs and I’m hoping to hear back from regarding my applications soon.
I haven’t found a job yet but I imagine things on that front will change soon.
If you are currently hiring for a business analyst, a data analyst or a test analyst, then please do get in touch and let’s have a conversation.

How I’m staying positive and productive during my job search

There’s been something that has been slowly bugging me since I did the rewrite of this website (going from Gatsby to NextJS) - and that’s the fact that I changed the directory of where my blog posts are stored.
Originally, it used to be <code>/blog/</code> and now it’s <code>/posts/</code> - which turns out has caused some issues with search engines showing links to my posts.
The problem is that the search engines will display the link to older posts with the old directory, not the new one. So when a user would click on a link from a search engine, they would be greeted by a 404 page. Not a great experience for the user.
I’ve got several years worth of content and it would be great if users can easily access my content if they find it on a search engine.
Looking through the analytics on Vercel, some of my older posts were still being viewed, with the referrer being Google or Bing.
In fact, one of my more popular posts is about the <a href="https://www.joshblewitt.dev/posts/2021-04-05-ruby-httparty">Ruby package called httparty</a>. It was a post I wrote in 2021 and to this day, it remains one of my most popular posts ever.
At first I thought this problem would go away, that maybe the search engines would update their results to show the correct URL to my post. But it didn’t. And the number of views on my old posts would continue, each user seeing the 404 page.
At first, I updated the 404 page to include a search bar, hoping that people would search for the post that they were looking for, but nobody seemed to use it.
So very recently, I decided to tackle this issue and in the short post, I’m going to explain how I solved it.
<h1>Introducing redirects in Vercel</h1>
There are two ways of doing a redirect with NextJS and Vercel:
<ul>
<li><a href="https://vercel.com/docs/edge-network/redirects">A dynamic or static redirect</a></li>
<li><a href="https://vercel.com/docs/projects/project-configuration#redirects">Configuring with a vercel.json file</a></li>
</ul>
I’ll be using the <code>vercel.json</code> file for this, as I’m only doing one redirect.
Let’s take a look at what I did:
<pre><code class="language-json">{
 "redirects": [
 {
 "source": "/blog/:path*",
 "destination": "/posts/:path*",
 "permanent": true
 }
 ]
}
</code></pre>
And to explain what this does:
<ul>
<li>The source is the <code>blog</code> directory, using the wildcard path matching to redirect to any path.</li>
<li>The destination is the <code>posts</code> directory, using the wildcard path matching to redirect to any path.</li>
<li>The <code>permanent</code> flag means that the user will receive a status code of <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/301">301 Moved Permanently</a></li>
</ul>
The file sits at the root directory of the project.
And with that, the redirect is now complete!
I put this into production a few weeks ago, and so far it’s working well. People have been redirected correctly and I haven’t seen anyone being directed to the old file directory.
And that wraps up this short post, I’ve got some other posts in the pipeline which I'll upload in the future.

Vercel and redirections

Recently, Meta launched a beta for it’s <a href="https://www.theverge.com/2024/3/21/24107881/threads-fediverse-beta-launch-mastodon">Threads application to share posts on Mastodon</a>, or in other words, Threads is slowly taking steps to being apart of the Fediverse. The beta only applies if you happen to be living in the US, Canada, or Japan. Nevertheless, it’s an important step, and it’s showing how exciting the Fediverse is going to be.
Now you might be thinking; “What is this Fediverse anyway?”
To answer that question, you can listen to my <a href="https://stuff-i-dont-know.vercel.app/posts/episode2">podcast</a> about this, or you can read on!
<h1>What is the Fediverse?</h1>
In a sentence, the fediverse is an interconnected social platform system that’s based on a protocol called <a href="https://activitypub.rocks/">Activity Pub</a>, which allows you to export your data, such as your followers.
That might be a little tricky to understand, so let me give you an example.
Imagine if Facebook, X (or Twitter), and TikTok were all interoperable. So that you can post content from anywhere and all of your followers would see your content, regardless of which platform they use.
And let’s say one day you wanted to leave a platform, Facebook for example, and you wanted to join Mastodon instead. Since these platforms are interoperable, you could take all of your content, followers, everything, with you to the new platform.
The key part of the fediverse is the idea of interoperability. This is what is driving such interest in the fediverse.
Another appeal to the fediverse, is that you own your content, you just lend it to platforms.
Let’s talk a little about this protocol called Activity Pub.
The best way to describe this is that the user can read incoming messages that come from the rest of the world, but the user can also send content to the world.
The rest of the world can then read and send messages to users, which is where federation comes in.
A good way to think of it is that platforms and users share the same inbox and outbox.
<h1>Why is the fediverse being seen as the future of social media?</h1>
Mike Masnick published an essay at <a href="https://knightcolumbia.org/content/protocols-not-platforms-a-technological-approach-to-free-speech">Knight First Amendment Institute at Columbia University</a> in 2019 titled; Protocols, Not Platforms: A Technological Approach to Free Speech.
The essay talks about two current problems on big platforms:
<ul>
<li>one; the drive to acquire an ever increasing amount of data from users, resulting in concerns from users and regulators that platforms are not protecting the data they have collected.</li>
<li>and two; these platforms have become larger and more central to everyday life. There has been growing concern at these platforms about the content that can be posted, and the responsibilities that these platforms have in policing content.</li>
</ul>
These platforms can throw as much money as they want at these problems, but it’s not clear at how this problem ends with enough people being satisfied.
The essay says that although there is no silver bullet, a system of protocols would be better at protecting privacy and free speech, while minimising the impact of abusive behaviour and creating new business models that are aligned with users interests.
However, the essay does mention that there are several points why using protocols might not work. One of them, is complexity. Signing up to platforms such as Mastodon can be a daunting experience for those who are unfamiliar with the fediverse. When you sign up to Mastodon, you pick a server where you want your account to be.
Users don’t want to mess around with settings or anything like that, users want something that works. This is the major advantage that the current platforms have. Plus, the current platforms are too big that using a protocols based approach might not disrupt them.
<h1>Back to the Fediverse…</h1>
It’s understandable to be wary of Meta, they are responsible for building and maintaining Facebook and Instagram; some of the biggest platforms on the internet, and (controversially) harvest lots of user data. But I think what’s happened on Threads is a great step, it shows promise.
So what happens during the beta? You can cross post and view likes from other federated platforms, like Mastodon.
<a href="https://www.threads.net/@pcottle">Peter Cottle</a> gave a demo of this at <a href="https://fediforum.org/">FediForum</a> and it’s exciting to see in action.
I’ve seen several accounts I follow on Threads start to post over to Mastodon as well. Giving users the option to share their posts to other platforms will not only boost their audience, but will allow other platforms to interact with them.
But it’s not just Threads which is getting involved with the Fediverse, <a href="https://medium.com/@flipboard/flipboard-begins-to-federate-c56ec788feaa">Flipboard</a> is making big strides as well. Here’s an <a href="https://mastodon.social/@sciencefocus@flipboard.com">example</a> of an account that has been federated.
Another interesting application is <a href="https://pixelfed.org/">Pixelfed</a>, a federated photo sharing application. Maybe one day Instagram will be part of the Fediverse as well?
It’s important to note that accounts need to opt-in to federate. This means that some of your favourite accounts you follow may remain exclusive to one platform.
So why is the Fediverse exciting? Allowing users more control over their data is important. Being able to move to different platforms without losing your data is huge and sharing your content to the rest of the world is fascinating.
<h1>What’s next?</h1>
The fediverse feature on Threads is currently in beta, limited to three countries. Once this opens up to more countries, more accounts will be able to federate, and more data on usage along with feedback should be available.
And hopefully Threads will soon be able to let accounts see replies and follows from the Fediverse.
And who knows, maybe more platforms will begin to be a part of the Fediverse. The future of using protocols instead of platforms is very close.

The Fediverse is shaping up to be exciting and interesting

Hello and welcome to version 4.1 of this website! 👋
Let’s jump into this quick blog post with an overview of what’s new!
<h1>A new font!</h1>
Yes, a new font is being used across the website.
Introducing <a href="https://redditsans.s-ings.com/">Reddit Sans</a> - the font developed by Reddit!
<h1>CSS clean up</h1>
There were several things that have been bothering me:
<ul>
<li>Hovering over some icons would highlight them blue</li>
<li>The photo on the main page was slightly squashed</li>
<li>Hovering over the buttons would cause an underline on the text</li>
<li>And other minor issues</li>
</ul>
These have been fixed
<h1>Package updates</h1>
Several packages (including NextJS) have been updated to the latest version.
<h1>Homepage improvements</h1>
There have been a few improvements to the homepage:
<ul>
<li>More informed introduction paragraph</li>
<li>Icons for my location, current role and workplace</li>
<li>The email button has now been moved down, and centred on the screen.</li>
<li>The photo is slightly bigger.</li>
</ul>
<h1>What’s next?</h1>
Coming up I’ve got some new posts that are almost done, and some that are in the early stages of writing.
Keep an eye out for them!

What's new on Version 4.1?

I’ve said for the past few years I’ve wanted to start a podcast in a few of my ‘year in review’ posts. And today, I’m finally delivering that goal!
I’ve been listening to podcasts since I was 14 years old and I’ve always been fascinated with broadcasting since then. I’ve had this idea that I wanted to start a podcast for years, I remember wanting to get this podcast starter kit I saw on Amazon when I was a teenager, but I never got it.
This isn’t my first rodeo when it comes to content creation, I’ve previously had some experience in making YouTube videos years ago, but I’ve never created a podcast.
So, I’ve been thinking more seriously lately about starting my own podcast. It would be a fun hobby to have and learn new skills as well would be a plus.
But, what would be my podcast be about?
I had a few ideas at first, and one that did stick was something called “Josh On Tech”. It was going to be me talking about the latest tech news and my thoughts.
But what would be the hook? Why would anyone want to listen to me? I honestly couldn’t give an answer. Plus, there are plenty of podcasts about people talking about tech. I’d be entering a very crowded market.
So I decided to rethink, what would be a fun and interesting podcast that would be exciting for me to work one and entertaining to listeners? That’s when I had a lightbulb moment; what if it was about me researching and explaining a topic that I know nothing about? I’m not an expert in everything in the world, so it would be fun to learn new topics! I enjoy learning so this would be great for me. That’s when I settled on the title; “Stuff I don’t know!”
<img src="https://i.imgur.com/wUrI5Zz.png" alt="Podcast logo">
Next, there are two important questions:
<ul>
<li>Where will I host my podcast?</li>
<li>How will I record my podcast?</li>
</ul>
For hosting, I did plenty of research and narrowed it down to the following providers:
<ul>
<li><a href="https://transistor.fm/">Transistor</a></li>
<li><a href="https://redcircle.com/">RedCircle</a></li>
<li><a href="https://rss.com/">RSS</a></li>
<li><a href="https://www.simplecast.com/">Simplecast</a></li>
<li><a href="https://www.acast.com/">Acast</a></li>
</ul>
I settled on Acast as it has a pretty good free tier (and soon Acast will be part of the <a href="https://podstandards.org/">Podcast Standards Project</a>)
Next, I needed equipment to record my podcast with.
I ended up going for the following key pieces:
<ul>
<li>FDUCE SL40 microphone</li>
<li>FiFine audio interface.</li>
</ul>
And in terms of software, I’m using GarageBand, the free software that comes with a Mac (which is very good, I'm honestly surprised of how much it can do)
If you’d like to listen, check out the <a href="https://stuff-i-dont-know.vercel.app/">website</a>.
Now after visiting the website, you might think “I wish I had a cool website for my podcast!”
Well, good news, now you can! With my new project, <a href="https://github.com/JB-26/super-podcast-starter">Super Podcast Starter</a>, setting up a website for your podcast is easy!
Be sure to give it a spin!
This blog will continue, but it may not updates might be slower than usual. I’ve got plenty of topics that I want to blog about.
If you listened to Stuff I don’t know, let me know what you think! I’m happy to receive feedback.

Introducing my podcast - Stuff I don’t know!

Recently, I’ve been trying to make posts that allow the use of rendering iframes on the page. But it turns out this is trickier than I thought.
What the behaviour I was seeing was that the iframe were not being rendered at all.
Why do I want iframes? I want to be able to embed interactive elements such as YouTube videos, code from CodePen, and even podcast players.
These changes will also go into the Super Blog Starter project as well, which will happen in the near future.
So, in this post, I’m going to share my crazy journey of how I solved this problem.
<h1>Maybe it’s MDX?</h1>
My blog uses markdown files, which are converted to HTML via several packages. And at first I thought the issue lied with using markdown files themselves.
I ended up investigating supporting MDX files.
For those who don’t know, MDX files allow you to use JSX in the markdown content. So you can import components, like charts for example. MDX also supports a few other features from JavaScript, like expressions in braces.
I ended up thinking that this could be the answer.
But after bringing support to my blog for the format, iframes were not rendering still. But my time with it had shown that iframes were being stripped out of both markdown and MDX files.
On the plus side, I had something that supported both MDX and markdown, which is pretty cool. I may need to revisit that someday.
So, I knew for a fact that the issue wasn’t with the file format - but something else.
But what?
I thought about the problem for a few days until an idea popped into my head as I was getting ready for bed…
<h1>Maybe it’s how I’m converting markdown to HTML?</h1>
I use a package called remark to help with converting markdown to an HTML string.
Here’s the function in question:
<pre><code class="language-jsx">export async function getPostData(id) {
 const fullPath = path.join(postsDirectory, `${id}.md`);
 const fileContents = fs.readFileSync(fullPath, 'utf8');

 // Use gray-matter to parse the post metadata section
 const matterResult = matter(fileContents);

 // Use remark to convert markdown into HTML string
 const processedContent = await remark()
 .use(html)
 .process(matterResult.content);
 const contentHtml = processedContent.toString();

 // Ensure that the 'tags' field exists, or provide an empty array as a default value
 const tags = matterResult.data.tags || [];

 // Combine the data with the id and contentHtml
 return {
 id,
 contentHtml,
 tags,
 ...matterResult.data,
 };
}
</code></pre>
My thoughts went to the line on how the constant of ‘contentHtml’ was being created.
Is this what is stripping out the iframe in a markdown file? Is it because of the remark package I was using?
I went ahead and investigated that train of thought.
I’m not the best programmer in the world, and I’m terrified of the stackoverflow community, so I turned a resource that was welcoming and friendly.
ChatGPT.
Yes, I turned to AI to help fix this problem. As this was something I had no experience in.
At first, ChatGPT suggested packages that didn’t exist. Not a great start. After recording the question, I ended up going round in circles. But, my question to it at first was giving the code snippet and the problem I was facing. I didn’t share my thoughts on what the problem could be.
After a few days, I returned to ChatGPT with more detail on what I was thinking, and how I thought the issue was with remark.
This time, the answer I got from ChatGPT was different. And it was tailored at focusing on the creation of the ‘contentHtml’ constant.
Progress! Maybe I had arrived at the answer I was looking for.
After a lot of hours going around in circles, I had another lightbulb moment.
I decided to run some logs to the console to see if I could find where the iframe was being ripped out.
And it was here:
<pre><code class="language-jsx">// Use remark to convert markdown into HTML string
const processedContent = await remark()
.use(html)
.process(matterResult.content);
const contentHtml = processedContent.toString();
</code></pre>
Or more specifically, the use of <code>remark-html</code> was the cause of the problem.
To get around this, I removed the used of remark-html and used react markdown on the page for rendering posts.
Like this:
<pre><code class="language-jsx">export default function Post({ postData }) {
 return (
 &#x3C;Layout>
 &#x3C;Head>
 &#x3C;title>{postData.title}&#x3C;/title>
 &#x3C;/Head>
 &#x3C;article>
 &#x3C;h1 className={utilStyles.headingXl}>{postData.title}&#x3C;/h1>
 &#x3C;div className={utilStyles.lightText}>
 &#x3C;Date dateString={postData.date} />
 &#x3C;/div>
 &#x3C;ReactMarkdown rehypePlugins={[rehypeRaw]}>{postData.contentHtml}&#x3C;/ReactMarkdown>
 &#x3C;/article>
 &#x3C;div className={utilStyles.tags}>
 &#x3C;h1 className={utilStyles.headingLg}>Tags:{" "}&#x3C;/h1>
 {postData.tags.map((tag) => (
 &#x3C;Link key={tag} href={`/tags/${tag}`} className={utilStyles.tag}>
 {tag}
 &#x3C;/Link>
 ))}
 &#x3C;/div>
 &#x3C;/Layout>
 );
}
</code></pre>
The problem was fixed!
See?
And I made a small CSS change to ensure that iframes display correctly on mobile devices:
<pre><code class="language-css">iframe {
 width: 100%;
}
</code></pre>
But there was another problem, the RSS feed.
Instead of displaying the HTML, it displays the markdown. Which isn’t great for RSS readers.
So, since I knew that the original function worked, I decided to copy the original and make a new function for the RSS feed:
<pre><code class="language-jsx">export async function getPostDataRss(id) {
 const fullPath = path.join(postsDirectory, `${id}.md`);
 const fileContents = fs.readFileSync(fullPath, 'utf8');

 // Use gray-matter to parse the post metadata section
 const matterResult = matter(fileContents);

 // Use remark to convert markdown into HTML string
 const processedContent = await remark()
 .use(html)
 .process(matterResult.content);
 const contentHtml = processedContent.toString();

 // Ensure that the 'tags' field exists, or provide an empty array as a default value
 const tags = matterResult.data.tags || [];

 // Combine the data with the id and contentHtml
 return {
 id,
 contentHtml,
 tags,
 ...matterResult.data,
 };
}
</code></pre>
This won’t render the iframes in an RSS reader, but readers can view the website if they want to see the iframes.
And that’s the mystery of the iframes solved!
What started out as an estimated small fix turned into something much larger.
I’ll have to revisit adding MDX support in the future, as being able to use JSX in a markdown file could be quite useful.
Until next time 👋

The mystery of trying to get iframes to be rendered

I turned 31 recently (that’s terrifying in itself), and for my Birthday I got myself a Steam Deck. I’ve had my eye on one for ages and I finally decided to get one.
I’ve had it for about a month and for this blog post, I wanted to share my thoughts on the device.
In short, it’s a fantastic device. It’s something that’s made me get back into playing games again.
If you’re unfamiliar with the Steam Deck, it’s a handled PC that runs Linux (SteamOS that is based on Arch), which has an APU developed by AMD and has other features such as a gyroscope.
I recently went on a flight to Atlanta and the Steam Deck kept me entertained on the whole flight (thankfully I had a power socket on my seat). I would normally bring my Nintendo Switch, but this time I opted for my Steam Deck. The fact that I can bring a handheld PC on a flight is crazy to me.
Now, I don’t have the newly announced OLED model (terrible timing, but not worth the upgrade). I’ll be talking about the LCD model of the Deck.
I’ve been playing the following on my Steam Deck so far:
<ul>
<li>Warhammer 40K: Boltgun</li>
<li>Final Vendetta</li>
<li>Aperture Desk Job</li>
<li>Inscryption (which is phenomenal)</li>
<li>RoboDunk (an unappreciated gem)</li>
<li>Fate - Samurai Remnant</li>
<li>Cult of the Lamb</li>
</ul>
There are plenty of games I need to play on my Steam Deck, I have a long list of games on my wish list and in my backlog.
<h1>First impressions</h1>
My first impressions were how light the Deck is, the good build quality, and after playing Aperture Desk Job, how powerful the hardware is for the cost, the APU does a fantastic job. So a very positive first impression!
The trackpads are also great. They’re responsive and the haptic feedback is a nice touch as well, but I have found that sometimes when using the trackpads in desktop mode, it can be tricky to highlight multiple files or folders.
I also liked the fact that the Deck shipped with a hard case, which is great for travelling. Again, I took it with me on a flight and the case protected the Deck during takeoff and landing.
<h1>Performance</h1>
I’ve been very happy with the performance of the Steam Deck. Games have been running very well, without any major slow downs.
Sure, you can hear the fan spin up when things become graphically intense, but that doesn’t distract you from playing games. I’ve found that playing 2D games (like Final Vendetta) didn’t cause the fan to spin up that much.
I can’t really comment on the battery life as I tend to play the Deck in bed or connected to a power supply.
<h1>Software Compatibility</h1>
The Steam Deck runs on Linux, and a large majority of games on the Steam Library aren’t compatible with Linux. This is where Proton comes into play. Proton comprises of tools such as Wine, to make it easier for Linux users to simply press ‘Play’ on a game.
Now, not every game doesn’t work despite Proton, but developers do make an effort to update their games to make it compatible with the Steam Deck. Popular games such as Baldur’s Gate 3 is compatible with the Steam Deck, and several older games in my library such as Alan Wake are compatible with the Steam Deck. Proton is being worked on, so compatibility with games will only improve over time.
Plus, there is also the APU developed by AMD which is also receiving support. Valve have been providing support for the Steam Deck by bringing new features and improvements.
<h1>EmuDeck</h1>
I’ve recently been playing around with <a href="https://www.emudeck.com/">EmuDeck</a>, a handy tool that sets up emulators, and adds your retro games as non-Steam games. And it’s pretty fantastic. Having your retro games added as non-Steam items, with their own cover art and banners is a nice touch.
And EmuDeck handles configuring aspect ratios, themes, shaders and more with ease.
I’ve played around with Dreamcast, PlayStation 1, Nintendo 64 and Sega Saturn so far and the performance is pretty great. I need to spend more time with it and configuring it.
Importing games can be a bit weird if it has multiple discs. I’m still thinking of a good way to import my copy of Biohazard 2 as each campaign has it’s own disc, and EmuDeck thinks it’s the same game twice.
<h1>Accessories</h1>
The Steam Deck is a PC. And that means you can plug in USB accessories via the USB-C port. The only experience I have had with accessories is transferring my retro games over via a CalDigit USB hub and it worked with the Steam Deck.
I need to get the Steam Deck Dock and see what the experience is like when the deck is connected to a monitor or a TV (as I have a feeling that me and my family will be playing more of Jackbox Party Pack over Christmas)
<h1>Wrap up</h1>
I haven’t scratched the surface of what the Steam Deck can do. There are still plenty of games that I need to play on the Steam Deck (and the Autumn sale certainly is tempting me with some big discounts on games). I also need to check out the Heroic Games Launcher as well.
So would I recommend the Steam Deck? If you’re someone who is familiar with Steam or brand new then absolutely. Valve have been updating the Deck and it can recently support for HDR if supported by the external display for example.
I find that the Deck is probably the better buy for the price as well. Especially when compared to it’s competitors such as the ASUS ROG Ally and the newly released Lenovo Legion Go.
I’m looking forward to diving into the Steam Deck more over the Christmas break!

So, about that Steam Deck...

It’s been a while!
I can’t believe it’s October! It’s nearly the end of the year, where did the time go? I turn 31 years old this month which is very scary to me. The fact that I’m getting closer to 40 is frightening.
I’ve been super busy with starting a new job as an Application Analyst recently, and I’ve been planning a trip to the USA as I’m attending two weddings. Plus, I’ve been working on my house a little. So it’s been a busy month or so.
So for this short post, I just wanted to highlight some of the improvements I’ve made to the blog and my small project, <a href="https://github.com/JB-26/super-blog-starter">Super Blog Starter</a>
<h1>The blog</h1>
So, what’s new on the blog? Package updates and performance improvements.
The packages that are used on this blog have been updated to the latest version. NextJS has been upgraded to <a href="https://nextjs.org/blog/next-13-5">13.5</a>. This version has the following improvements:
<ul>
<li>22% faster local server startup</li>
<li>29% faster HMR (Fast Refresh)</li>
<li>40% less memory usage</li>
<li>Optimised Package Imports</li>
<li>next/image Improvements</li>
<li>And over 438 bugs patched!</li>
</ul>
I’ve also been doing some performance improvements on getting posts by a tag. I’ve noticed that in production, the function that gets the posts was very slow. So I decided to make some changes and it seems to be performing better!
For those who are curious, here’s the new function:
<pre><code class="language-jsx">export async function getPostsByTag(tag) {
 const allPostsData = getSortedPostsData();
 const postsWithTag = allPostsData.filter((post) => post.tags.includes(tag));

 const results = await Promise.all(postsWithTag.map(async (post) => {
 const fullPath = path.join(postsDirectory, `${post.id}.md`);
 const fileContents = await fsPromises.readFile(fullPath, 'utf8');
 const matterResult = matter(fileContents);

 const processedContent = remark().use(html).processSync(matterResult.content);
 const contentHtml = processedContent.toString();

 return {
 id: post.id,
 contentHtml,
 ...matterResult.data,
 };
 }));

 return results;
}
</code></pre>
The difference being is that this function is now an asynchronous function.
I’ve been seeing some performance improvements running locally, so hopefully this will improve the performance in production.
I’ve also fixed a weird Safari issue where the desktop view looked strange (why is it always Safari that has issues?)
There are a few other things I’d like to do with the blog as well, which I’ll work on over the next few months.
<h1>Super Blog Starter</h1>
The current version of the project is v0.0.3 and it features the improvements that I’ve been making to this website (except the improved performance of getting posts by a tag, that’s something I need to include in the next version).
The project is making steady (but slow) progress, so feel free to contribute and make suggestions!
I do have plans for this in the future, including adding some automated tests.
If you do use this starter, let me know! I’m curious to see who is using this.
<h1>The rest of the year</h1>
As we approach the end of the year, the holiday season begins, I’ll be looking to relax a bit more. I’ll be spending some time writing up my ‘end of the year’ wrap up post as well. I do have many other blog posts that are currently in progress as well, so I might find some time to finish one or two and publish them.
I’m hoping to get a <a href="https://www.steamdeck.com/en/">Steam Deck</a> for my birthday, so I might be writing up a few posts about that. I need to play more games as I need to find ways to relax. Plus, since I’ll be travelling a bit more, it’ll be good to bring with me.
Until next time 👋

What’s new on the blog and Super Blog Starter?

Hello! 👋
Things look very different here.
What’s new? Everything.
<h1>Introducing NextJS</h1>
I’m no longer using the Gatsby framework. This website is now built using NextJS. I’ve been using Gatsby for nearly four years but I’ve heard a lot about <a href="https://nextjs.org/">NextJS</a> and it’s one of the most admired frameworks according to the 2023 Stackoverflow <a href="https://survey.stackoverflow.co/2023/#section-admired-and-desired-web-frameworks-and-technologies">survey</a>.
NextJS is a React framework that has great features out of the box such as:
<ul>
<li>built-in optimisations</li>
<li>CSS support</li>
<li>Route handlers</li>
</ul>
I’m not alone in using NextJS. Here are a few <a href="https://nextjs.org/showcase">companies</a> that have used NextJS:
<ul>
<li>Twitch</li>
<li>Netflix jobs</li>
<li>Notion</li>
<li>Target</li>
<li>Nike</li>
<li>TED</li>
<li>Marvel</li>
</ul>
I’ve had a good experience with NextJS so far. It has an excellent tutorial and great documentation. Definitely give it a look if you’re looking to build a web application.
<h1>Introducing Vercel</h1>
Also after using Netlify after four years, I’m changing to <a href="https://vercel.com/home">Vercel</a> for building and publishing this website. Since NextJS is built by Vercel, it made sense to use their platform for building.
Plus, since I’m using NextJS on Vercel, I get access to the following features…
<h2>Speed Insights</h2>
Performance is important, and I want to get a better understanding of how this website is performing and Vercel offers speed insights. Now I can get a better view of what the real experience is like for users.
<h2>Vercel Web Analytics</h2>
I’m curious to see how many people view my site, where users are from and what they use to view this site. Thankfully, Vercel have a great set of web analytics available.
Plus, it’s privacy friendly! This uses a generated hash for visitors and means visitors can't be tracked between different days or different websites.
<h2>Static Site Generation</h2>
Prerender, automatically cache and distribute generated NextJS pages to every Edge Network region hosted by Vercel.
And more!
<h1>But why?</h1>
My original website has gotten really big. The number of packages I had on it was tremendous, and I’m having to install legacy dependencies for packages to get the application running now. It’s become a bit of a mess!
So, I decided to start again.
The main objectives of this redesign are:
<ul>
<li>A website that has good performance</li>
<li>A bigger focus on readability (because this is a blog)</li>
<li>Less animations (as this did impact performance slightly and probably didn’t bring that much value)</li>
</ul>
<h1>What’s new?</h1>
First, a whole new colour scheme. This site now uses three colours; white, black and blue.
The mobile view has also been modified slightly, I think it’s now slightly better.
Next a new and more consistent font choice. This will use a set of fonts that look similar to ‘San Francisco’ by Apple and has multiple fall backs in case one font isn’t available. These fonts should improve the reading experience of blog posts.
Let’s talk about the blog page, as that’s had a lot of changes. Here’s what’s changed:
<ul>
<li>Removed image at the top of the page, it was taking up a lot of space (along with the name)</li>
<li>The way the posts were being displayed got a bit messy, so this has been redone.</li>
<li>Added a signature at the end of each post with links.</li>
<li>And finally, something that I’ve been wanting for a very long time, pagination! I originally started this on my Gatsby blog, but I never got it working. Got it working on NextJS relatively quickly. I’m very excited to get this feature working!</li>
</ul>
Previous features such as a RSS feed is here as well.
<h1>Imported content</h1>
All posts (yes, all 97 posts) have been imported from my previous site to this site. Hooray for no missing content!
<h1>Start your blog, today!</h1>
As always, I keep the code to my blog free and open for anyone to use. Feel free to fork the repo, deploy to Vercel (or somewhere else like Netlify) and start your own blog! Here’s a link to the <a href="https://github.com/JB-26/web-portfolio-next-gen">GitHub</a> repo for my new blog.
I plan on making a more suitable template to make it easier to get up and running if you want to make your own blog.
The previous version of my blog (that was built with Gatsby) is still available, the README will be updated to state that it’s no longer being used.
Get in touch and let me know what you think.

Welcome to Version 4! 🎉

A while back, I enabled Lighthouse reports on Netlify to get a better understanding of how I can improve this website.
Turns out that performance was a major problem. My most recent deploy to production had a performance score of 59 out of 100.
Yikes.
Lighthouse found that
<ul>
<li>The first contentful paint took 4.8 seconds</li>
<li>Time to interactive took 6.5 seconds</li>
<li>Speed index took 4.8 seconds</li>
<li>Total blocking time took 10 milliseconds (that’s good)</li>
<li>Largest contentful paint took 9.8 seconds (that’s not good)</li>
</ul>
So overall this website was very slow, especially to new users loading the website. There’s clearly room for improvement. And thankfully, lighthouse has recommendations on how to improve the performance.
This blog post goes into detail about the performance improvements I made and the new and improved score from Lighthouse!
<h1>Images</h1>
So it turns out that the images I were using were not using a next-gen format such as WebP which offer better compression than PNG and JPEG (which means faster downloads and less data consumption) and the images I were using were not properly sized. This was one of the biggest factors for slow performance.
So I’ve changed the format to WebP for the images, and I’ve resized them!
Speaking of images, the icon used in the header didn’t have an explicit height and width defined, this has been fixed as well. The main benefit of having a set height and width is that this reduces layout shifts and improve CLS.
<h1>Text remaining visible during webfont load</h1>
Lighthouse suggested that if I use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display">font-display</a> feature, this will ensure that text is user-visible while webfonts are loading. So now each font will look something like this:
<pre><code class="language-css">@font-face {
 font-family: "DM Sans-Bold";
 src: url("../fonts/DMSans-Bold.ttf");
 font-display: swap;
}
</code></pre>
<h1>Preconnect to required origins</h1>
Lighthouse found an opportunity to establish early connections to improve third party origins by using preconnect or dns-prefetch. The third party in question is the service I used for the icons - Fontawesome.
So now the following event listener is added to each page:
<pre><code class="language-html">&#x3C;link rel="preload" href="https://ka-f.fontawesome.com/"/>
</code></pre>
Lighthouse gave an estimated saving of 0.16 seconds.
<h1>Package updates</h1>
I’ve been keeping on top of updating packages that are used by this website. The most notable updates are:
<ul>
<li>postcss</li>
<li>typography</li>
</ul>
I’ve also updated the version of Node that’s used from version 19.6.1 to 20.3.1.
<h1>Other updates</h1>
I’ve also fixed some issues found from <a href="https://eslint.org/">ESLint</a>, I forgot to update the syntax used when using classes (updated from class to className).
Also, I’ve added a meta description to improve search engine optimisation.
<h1>The final scores…</h1>
The performance improvements I’ve made have had a huge impact on the website, and now Lighthouse reports that:
<ul>
<li>The first contentful paint took 3.5 seconds</li>
<li>Time to interactive took 3.8 seconds</li>
<li>Speed index took 3.5 seconds</li>
<li>Total blocking time took 10 milliseconds</li>
<li>Largest contentful paint took 5.4 seconds (that’s much better)</li>
</ul>
With a final performance score of 71 - which is a better score!
<h1>The road ahead</h1>
One of the next big pieces of improvement is to convert the use of markdown to <a href="https://mdxjs.com/">MDX</a>. I’d like to do this before the end of the year.
I’ve also been thinking doing a slight redesign on the blog page as well.
<h1>Wrap up!</h1>
And those are the improvements that I’ve made to this website. Hopefully you’ll find that the performance is much improved!
And maybe you’ve found some ideas how you can improve the performance of your website!

Making performance improvements on the blog

<img src="https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?ixlib=rb-4.0.3&#x26;q=85&#x26;fm=jpg&#x26;crop=entropy&#x26;cs=srgb&#x26;w=4800" alt="">
I’ve been running this blog (I don’t think it’s fair to call it a website anymore, a large amount of the content I have is all on the blog) for 3 and a half years now (I think?), and it’s been a joy to work on. From:
<ul>
<li>making style changes</li>
<li>adding some enhancements</li>
<li>upgrading packages</li>
<li>a new post</li>
</ul>
This project has been fun to work on. Plus, it’s even helped me get job interviews and offers. Whenever I attend a job interview, this blog always gets brought up. Plus, I've learnt a lot about CSS and working with mobile devices along the way! So I decided to write up this post about how you can get started with a blog. I covered on why you should start a blog back in <a href="https://joshblewitt.dev/blog/2021-11-28-why-blog/">2021</a> (which honestly feels like a lifetime ago, the info in that post is still valid so go read it), but this post is more about how you can get started with a blog.
So, let’s jump in with a quick summary on why.
<h1>Why start a blog?</h1>
As previously <a href="https://joshblewitt.dev/blog/2021-11-28-why-blog/">stated</a>:
<ul>
<li>Share your ideas and views</li>
<li>A fun project for you to work on</li>
<li>Share tutorials or fixes for problems you have faced</li>
<li>Connect with others and grow your network.</li>
<li>Expand and manage your professional presence</li>
<li>Learn new skills; such as getting your blog on a custom domain</li>
<li>Own a piece of the internet</li>
</ul>
I feel that the last point, is the most important reason why you should start a blog. It’s something that you own, and something you can do whatever you want.
It’s fun to have something that you can just share what’s on your mind or if there’s something that you want to talk about.
Now that we quickly covered the reasons why, let’s talk about the how.
<h1>What do you want your blog to be about?</h1>
This is important, so do this first. What do you want to blog about?
<ul>
<li>Current events?</li>
<li>Food?</li>
<li>Tech?</li>
<li>Events?</li>
<li>Travel?</li>
<li>Life in general?</li>
<li>Cats you’ve seen in your local area?</li>
</ul>
Whatever you pick, I highly suggest an area that you’re passionate, knowledgeable, and an area that you want to learn more about.
<h1>Where can you write your blog?</h1>
Once you’ve picked what you want to write about, it’s time to pick a place on where you’ll write. There are two options on where you will write:
<ul>
<li>Use an existing platform</li>
<li>Build your own platform</li>
</ul>
I’ll talk about the pros and cons of each one
<h2>Building your own blogging platform</h2>
There are plenty of good reasons why you want to build your own blogging platform. Such as:
<ul>
<li>You have complete control how it looks, operates, etc</li>
<li>Learn and refine skills in development</li>
<li>It’s something that you own</li>
<li>It grabs attention from potential employers</li>
<li>You can do whatever you want!</li>
</ul>
However, when it comes to building your own platform, there are several challenges:
<ul>
<li>Technical knowledge required; building a website isn’t simple. It takes time, patience and a willing to learn</li>
<li>Maintaining the platform is required; if a package is updated to address security issues, or a performance improvement, you need to be the one to update the packages that you use.</li>
<li>Cost; you’ll need to pay for a domain name, hosting, etc</li>
</ul>
The points I listed above are incredibly important. You should be comfortable with programming (knowing languages such as JavaScript, and markup such as HTML and CSS for styling), knowledge of frameworks and more!
Plus, you'll need to make sure that the blog is readable, and I mean that from a user experience perspective. You don't want to use a colour scheme that makes your blog unreadable, nobody would visit it otherwise! If you're looking for inspiration for a colour scheme, checkout <a href="https://colorhunt.co/">Colour Hunt</a>.
If you want an example of a blogging platform that’s been built from the ground up:
<ul>
<li>There’s this website that you’re viewing right now!</li>
<li><a href="https://paulie.dev/">Paul Scanlon</a></li>
<li><a href="https://matt.blwt.io/">Matt Blewitt</a></li>
<li><a href="https://joshcrain.io/">Josh Crain</a></li>
</ul>
If your comfortable with the above and are up for a challenge, then great! If not, no worries, jump forward to the next section.
<h2>What framework can you use?</h2>
Great question! There are so many frameworks out there (and new ones are created all the time), so here’s a quick list of some that I know.
<ul>
<li><a href="https://www.gatsbyjs.com/">Gatsby</a> (this is what I use)</li>
<li><a href="https://react.dev/">React</a></li>
<li><a href="https://svelte.dev/">Svelte</a></li>
<li><a href="https://rubyonrails.org/">Ruby on Rails</a> (I still have a soft spot for the Ruby language after all these years)</li>
<li><a href="https://jekyllrb.com/">Jekyll</a> (I used to use this)</li>
<li><a href="https://gohugo.io/">Hugo</a></li>
</ul>
<h2>Where can you deploy your application to?</h2>
Another great question! I used to suggest platforms such as Heroku, but sadly, Heroku no longer offers a free plan. Instead, I use <a href="https://www.netlify.com/">Netlify</a> as they offer a free plan.
<h2>How can you get your own domain?</h2>
There are plenty of services out there, even Netlify offers their own service to help you with buying a domain.
You can try <a href="https://domains.google/">Google</a> or <a href="https://www.godaddy.com/en-uk/domains">GoDaddy</a> to find domain names.
However, keep in mind that the domain you want may have been registered and the price of the name varies. Some domain names can go for thousands of pounds/dollars! And remember, you’ll need to renew the domain name yearly.
<h2>Where can you get an SSL certificate?</h2>
There’s only one place I can recommend; <a href="https://letsencrypt.org/">Let’s Encrypt</a>
It’s a free and automated service (and a non profit!) that generates you an SSL certificate. You’ll need a SSL certificate if you want to enable HTTPS (which I strongly suggest you do).
<h2>What software do you need?</h2>
You’ll need a text editor that will allow you to write code and write posts.
For text editors:
<ul>
<li><a href="https://code.visualstudio.com/">Visual Studio Code</a> - it’s free and an excellent place to start</li>
<li><a href="https://www.sublimetext.com/">Sublime Text</a> - it’s not free but it’s an extremely fast editor. I use this as my preferred editor.</li>
<li><a href="https://www.jetbrains.com/fleet/">Fleet</a> - it’s free while in a public preview, but this may change as it reaches version 1.0</li>
</ul>
And for writing your posts (that have spell check)
<ul>
<li><a href="https://www.notion.so/">Notion</a> - a free to use place for wikis, documents, project planning and more! I use this for so many things</li>
<li><a href="https://obsidian.md/">Obsidian</a> - another excellent free to use application. I’m tempted to switch to Obsidian at some point. Has lots of features (that are pay to use)</li>
<li><a href="https://ulysses.app/en/">Ulysses</a> - an iOS/Mac app that is pay to use, but the subscription does offer access to the Mac application and iOS application.</li>
</ul>
<h2>Where can you get icons to use?</h2>
I use two sources for the icons on this blog (such as the icons in the footer):
<ul>
<li><a href="https://fontawesome.com/">Font Awesome</a></li>
<li><a href="https://fonts.google.com/icons">Google Fonts</a></li>
</ul>
<h2>Where can you get fonts?</h2>
I tend to get majority of the fonts I use from <a href="https://fonts.google.com/">Google Fonts</a>.
<h2>Got another tips or tricks?</h2>
<ul>
<li>Don’t rush it</li>
<li>Do plenty of research</li>
<li>Play around with the design of your blog</li>
<li>Be open to iterate and improve</li>
<li>If you want to take a look at the code for this blog, check out the GitHub <a href="https://github.com/JB-26/website-portfolio">repo</a></li>
</ul>
<h2>How can you tell how many people have visited your blog?</h2>
This is a good question. There are tools out there such as Google Analytics but for mine, I tend to keep an eye on Font Awesome as they limit the number of page views for my icons per month (they have a handy tracker when viewing your kits).
<h1>Use an existing platform</h1>
What if you don’t know how to program or aren’t comfortable with using frameworks? Not a problem, there are plenty of platforms out there that allow you to set up a blog instantly (or within a few clicks anyway).
So why use an existing platform?
<ul>
<li>Easy to set up and use</li>
<li>Plenty of free options</li>
<li>Support from the platforms</li>
<li>The platform updates and maintains it</li>
<li>Features can be added</li>
</ul>
But why not use an existing platform?
<ul>
<li>The platform could shut down</li>
<li>The platform could change from free to paid for</li>
<li>Key features can be locked behind a pay wall (like a domain name)</li>
<li>You won’t be able to fully customise your blog</li>
</ul>
<h2>What platforms can you use?</h2>
There are several places where you can get going with a blogging platform:
<ul>
<li><a href="https://medium.com/">Medium</a></li>
<li><a href="https://substack.com/">Substack</a></li>
<li><a href="https://ghost.org/">Ghost</a></li>
<li><a href="https://micro.blog/">Micro.blog</a></li>
<li><a href="https://www.tumblr.com">Tumblr</a></li>
</ul>
All these are easy to get up and going with. Medium and Tumblr are free while Ghost and Substack and Micro.blog are paid.
I do keep my eye on Ghost, there have been a few times where I have been tempted to move to their platform.
<h2>What writing tools do you need?</h2>
As mentioned above, you can use the following to write your blog:
<ul>
<li><a href="https://www.notion.so/">Notion</a> - a free to use place for wikis, documents, project planning and more! I use this for so many things</li>
<li><a href="https://obsidian.md/">Obsidian</a> - another excellent free to use application. I’m tempted to switch to Obsidian at some point. Has lots of features (that are pay to use)</li>
<li><a href="https://ulysses.app/en/">Ulysses</a> - an iOS/Mac app that is pay to use, but the subscription does offer access to the Mac application and iOS application</li>
</ul>
<h1>Where can you find free to use images?</h1>
You’ve probably seen the images I use for each blog post, and those are all found from <a href="https://unsplash.com/">Unsplash</a>. Images from Unsplash are free to use, and there are plenty of high quality images to choose from.
If you want to use your own images, you can!
<h1>How can you become a better writer?</h1>
Keep writing.
There are over 90 posts on this blog across three years, and I think my writing style has improved since I began writing blog posts.
It takes time, but finding the time to sit down and write is the only way you’ll improve. But it's important to note that you should always be yourself, you'll find it easier to write posts and find topics to write about.
Also, spend time researching about topics you want to talk about. I honestly have about 11 draft posts that are in various states of progress. Filled with notes and questions that I want to answer. You'll know when you're ready to publish the post when you feel satisfied with it.
<h1>What’s important in a blog?</h1>
I find that there are two key points:
<ul>
<li>Quality content</li>
<li>Regular updates</li>
</ul>
Having a blog without any posts isn’t good, and having a blog that doesn’t have regular updates also isn’t good! You wouldn't want to subscribe to a blog that's abandoned, right?
Make time to write, research and publish your posts. You want a readers first impression to be positive. Having posts that are of good quality plays an important part in this as well, make sure your posts can be something you would enjoy reading yourself.
<h1>Conclusion</h1>
I hope this post has helped you in deciding if you want to start your own blog. I thoroughly enjoy working on my mine, it’s a good hobby to have.
Remember, there’s no guarantee that you’ll make money or find fame through your blog. You should start one if you want to, not if you have to.
I think I’ve covered everything I can think of, but if you have a question, check out the button on the home page to get in touch or drop me a message on <a href="https://mastodon.social/@jblewitt">Mastodon</a>!

A rough step by step guide to getting started with a blog

Hello and welcome to version 3.1 of this website! 🎉
Here’s a quick rundown of what’s new:
<h2>RSS Feed</h2>
Looking to read my blog on your favourite RSS reader such as Feedly? Now you can! You can find a link to the XML file on the blog page or check out the RSS icon in the footer! Just copy the address of the file and add it to your reader.
When you add my blog to your RSS reader of choice, make sure you allow for notifications. Then you can read my latest post when it’s available.
This feature was achieved by using the <a href="https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-an-rss-feed/">Gatbsy plugin</a> for generating an RSS feed based on a GraphQL query.
<h2>Pinned post</h2>
You may notice that there is now a pinned post on the blog page! Think of this as a feature that allows me to recommend you a post that you should read.
This was achieved by creating a hook through using a static query in GraphQL. The query is set to find a specific post. I can update this to a different post in the future. This allows me to bring back posts from the archive.
You can see the pinned post at the top of the blog page, with the newer posts displayed below it.
<h2>Mobile view fixes</h2>
The mobile view was a little narrow, I’ve made a small change so that it uses more of the screen.
<h2>Small changes to the about page</h2>
The about page has had some small updates, including linking to the F1 Project (as the Video Game API no longer exists, thanks Heroku!)
<h2>New icon added to email button</h2>
I’ve added a new icon to the email button, which is also animated to grab your attention.
<h2>Package updates</h2>
This site now runs on Gatsby version 5.8.1! Every other package has been updated as well to keep things running smoothly.
As always, the code for this site is open source and free to look at, you can view the code <a href="https://github.com/JB-26/website-portfolio">here</a>.
And that’s all that’s changed in this version! If you have any feedback, let me know 👍

What’s new on version 3.1?

<img src="https://images.unsplash.com/photo-1513364776144-60967b0f800f?ixlib=rb-4.0.3&#x26;q=80&#x26;fm=jpg&#x26;crop=entropy&#x26;cs=tinysrgb&#x26;w=4800" alt="">
Hello! 👋
I’ve been running this current iteration of my website for three years now. Where did the time go? Since I created this website, I’ve made several gradual improvements to this website. From new pages, to some CSS adjustments.
But the more I looked at my website, the more areas I could find which could be improved. So, as it’s the start of a new year, I decided to make several new changes to the website (and fix some issues)!
<h1>What’s new in version 3?</h1>
<ul>
<li>New background colour</li>
<li>New favicon</li>
<li>New fonts
<ul>
<li><a href="https://fonts.google.com/specimen/DM%2BSans">DM Sans</a></li>
<li><a href="https://fonts.google.com/specimen/Bebas+Neue?query=Bebas+Neue">Bebas Neue</a></li>
</ul>
</li>
<li>Improved mobile view for the blog page</li>
<li>Improved desktop/tablet view for the blog page</li>
<li>Resolved a ‘mystery’ issue for Safari users where the top of the status bar would be purple (and also the background when pulling/scrolling the screen down would be purple)</li>
<li>New image added to the blog page</li>
<li>Images associated with blog posts are now clickable</li>
<li>The ‘Get in touch’ button on the home page has been shrunk down.</li>
<li>Removed freeCodeCamp icon from footer</li>
<li>Updated packages (it’s good to keep them updated)</li>
</ul>
Let’s quickly explain several of the big changes
<h1>The improved blog page</h1>
Yeah, the blog page needed some work to it. Originally (for those who remember), the blog page didn’t have an image associated for each post. I added images last year but there have been a few things that have bugged me since I made that change.
<ul>
<li>The mobile view was awful. The images were squashed and the description of the post would ‘spill’ over. It really looked bad on a mobile device.</li>
<li>There was so much empty space on each side of an blog entry when viewing the blog page on a desktop.</li>
<li>The text was slightly small.</li>
<li>The images were not clickable.</li>
</ul>
First, let’s talk about the improvements made to the desktop view. Each blog entry is now much bigger, taking up more of the screen. The images are bigger and the font is bigger. Now you can clearly see the associated images for each post.
Next, the mobile view. This is something that proved to be more challenging that I previously thought. Initially, I tried to display each post as a column, not as a row. The original view had images that were stretched by height with text next to it. It was an awful look. Now, I have developed a better solution to the problem:
HORIZONTAL SCROLLBAR
Yes, a horizontal scrollbar! Now in the mobile view, you can scroll horizontally on the blog posts. This takes up much less space on the page and the images aren't being squashed. Several new lines of CSS was added to make this work and I'm proud of the work that I've done.
Finally, clickable images. This seems like such a basic feature, I can't believe I forgot to implement it. Now, regardless of what device you view this website on, you can click an image for an associated blog post.
The blog page has seen the most improvements in version 3 of the website. Hopefully the improvements make an impact!
<h1>The mystery Safari issue</h1>
So this was something that I don’t think anyone has really noticed. Basically, if you were viewing this website on the Safari web browser, you’d see a purple bar at the top, and a purple bar at the bottom if you pulled the web page down. It’s been bugging me for ages!
It got me thinking “where is the browser getting this purple colour from?”. After looking through my code, I finally found the cause of the issue. It seems that the Gatsby config file had two properties called background colour and theme colour, both shared the same value of #663399. Which happens to be the purple colour that I was seeing.
After removing the properties, the issue was resolved!
<h1>The new favicon</h1>
Yes, the lightning bolt is gone. Instead, I have a new one! This one is the <a href="https://emojipedia.org/google/15.0/man-technologist/">technologist</a> from <a href="https://fonts.google.com/noto/specimen/Noto+Color+Emoji">Google Noto Colour Emoji</a>. Since this blog is about tech, it makes sense to use the technologist, right?
Let me know what you think of the new favicon!
<h1>The new blog header image</h1>
The blog is called ‘It works on my machine’, a phrase that everyone who works in software development will know and understand. And recently I thought it might be good to have an accompanying image with the title.
I’ve had this particular image saved for years and I think it sums up a scenario so many have seen or gone through.
Plus, the fact that it’s Godzilla characters makes it even better.
<h1>New fonts</h1>
I decided to update the fonts used on the links on the website to something that’s a bit more modern. I did also look at updating the font used for the paragraph text, but I decided to stick with <a href="http://vollkorn-typeface.com/">Vollkorn</a>.
And that's a brief summary of the changes that I've made for version 3 of this website!
Let me know what you think!

Welcome to version 3 of this website! 🎨

<img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-4.0.3&#x26;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&#x26;auto=format&#x26;fit=crop&#x26;w=2069&#x26;q=80" alt="">
After running my favourite command…
<pre><code>npm outdated
</code></pre>
I noticed that once again, I was falling behind on my packages being up to date.
There’s now Gatsby version 5 and all of my other packages needed to be updated as well. So I thought I’d take the time in updating them. Turns out it wasn’t straight forward, not as easy as upgrading to version 4 of Gatsby.
So if you’re running Gatsby on Netlify, be sure to read this post on how I got my site running version 5.
<h2>Gatsby 5</h2>
So what’s new in version 5 of Gatsby? Well:
<ul>
<li>GraphQL V2</li>
<li>React V18</li>
<li>Node V18</li>
<li>Head API</li>
<li>Slice API</li>
<li>Performance Improvements</li>
</ul>
If you want to see the full release notes, click <a href="https://www.gatsbyjs.com/docs/reference/release-notes/v5.0/">here</a>.
So after updating my packages file and installing with dependencies, my site was running locally with the latest versions!
In case you’re not sure on how to install with dependencies, it’s:
<pre><code>npm install --legacy-peer-deps
</code></pre>
But after running it, I noticed that there were plenty of warnings being logged in the terminal. So let’s fix them.
<h2>Anonymous arrow functions</h2>
Anonymous arrow functions cause Fast Refresh to not preserve local component state. So we need to update each page to use a constant then export it.
Here it is before:
<pre><code>export default () => ()
</code></pre>
To…
<pre><code>const about = () => ()

export default about
</code></pre>
All the pages are now using this, now the Fast Refresh preserve the local component state.
<h2>Head API</h2>
To update the header in all of my pages, I was using a package called <a href="https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/">gatsby-plugin-react-helmet</a> to add attributes to the header on each page that Gatsby builds.
But now there is the <a href="https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/">Gatsby Head API</a>, a built in Head export. The advantages of using it are:
<ul>
<li>easier to use</li>
<li>more performant</li>
<li>a smaller bundle size</li>
<li>supports the latest React features</li>
</ul>
Lots of benefits, so let’s dive in!
Here’s an example:
<pre><code>export function Head() {
 return (
 &#x3C;>
 &#x3C;title>Joshua Blewitt - About&#x3C;/title>
 &#x3C;meta charSet="utf-8" />
 &#x3C;script
 src="https://kit.fontawesome.com/TEST.js"
 crossorigin="anonymous"
 >&#x3C;/script>
 &#x3C;/>
 )
}
</code></pre>
And here is an example of working with results with GraphQL:
<pre><code>export function Head() {
 return (
 &#x3C;>
 &#x3C;meta charSet="utf-8" />
 &#x3C;title>Joshua Blewitt - Blog&#x3C;/title>
 &#x3C;script
 src="https://kit.fontawesome.com/TEST.js"
 crossorigin="anonymous"
 >&#x3C;/script>
 &#x3C;/>
 )
}
</code></pre>
All of the pages are now using the Head API!
One interesting thing I noticed was when I was testing this locally. I had one page using the Head API, and the rest using the react helmet plugin. I found that using both causes some unusual behaviour when viewing pages. The react helmet plugin would override the Head API! So some pages were displaying the incorrect Header data. Weird!
<h2>Updated GraphQL queries</h2>
Another warning I saw in the Netlify logs was this:
<pre><code>warning Deprecated syntax of sort and/or aggregation field arguments were found in your query (see https://gatsby.dev/graphql-nested-sort-and-aggregate). Query was automatically converted to a new syntax. You should update query in your code.
</code></pre>
Makes sense to update it. I only have a few queries running anyway so upgrading them shouldn’t be too difficult. In fact, the only change needed for all the queries was this:
<pre><code>allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}, limit: 5)
</code></pre>
Easy change to make!
<h2>FontAwesome</h2>
When I was upgrading Gatsby last time, I noticed that the images were taking a long time to load and that the icons in the footer appeared briefly at a much larger size before being set at the correct size. This was tied to waiting for the images to load.
I thought I solved this issue by making the images smaller in size, so that the icons would appear in the correct size. But this was not the case.
After some investigating, it turns out that I needed to use FontAwesome properly. This means creating a kit that can be used with the icons.
I was using a plugin called ‘fortawesome’ for the icons, so I needed to stop using that.
As you can see above in the Head API example, the FontAwesome kit is being used in the headers of all the pages.
<h2>Deploying to Netlify</h2>
At this stage, everything was running locally and I was ready to deploy to Netlify. But things did not go smoothly. At first, I needed to reinstall the Gatsby Essentials plugin to get the latest version. Then, I needed some extra packages. And finally, this happened:
<pre><code>10:36:25 PM: Error during NPM install
10:36:25 PM: Build was terminated: Build script returned non-zero exit code: 1
10:36:26 PM: Failing build: Failed to build site
10:36:26 PM: Finished processing build request in 17.719148076s
</code></pre>
Well, that’s confusing. Now what?
StackOverflow didn’t return anything and I couldn’t find anything on the Netlify forums. I tried deleting the package lock file, rebuilding everything and so on. If you look at the commits for this branch, you can see that I nearly lost my mind trying to figure out this problem.
I noted that the application was running perfectly fine on my machine. Nothing was wrong. So what could be causing this?
I looked at the logs more closely and found this:
<pre><code>10:36:25 PM: npm ERR! Fix the upstream dependency conflict, or retry
10:36:25 PM: npm ERR! this command with --force, or --legacy-peer-deps
10:36:25 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
</code></pre>
And there it is, legacy dependencies.
So, how can I tell Netlify to install with the legacy dependencies? Netlify makes it easy with <a href="https://docs.netlify.com/environment-variables/overview/">environment variables.</a>. And there are plenty of <a href="https://docs.netlify.com/configure-builds/environment-variables/#netlify-configuration-variables">configuration variables</a> to choose from.
We’re interested in the ‘<a href="https://docs.netlify.com/configure-builds/manage-dependencies/#npm">NPM_FLAGS</a>’ variables, and the value will be:
<pre><code> -—legacy-peer-deps
</code></pre>
So now whenever Netlify builds the Gatsby project, it’ll use the legacy dependencies.
And it worked. The preview was successfully deployed. I spent a few hours trying to figure out how to fix it, so I hope this helps someone who uses Netlify.
<h2>Anything else?</h2>
The node version used is now upgraded to 19.2.0 from 14.15.0. The version of node needed to be upgraded to support the new version of Gatsby.
And that’s the website fully upgraded! The website will now have the icon issue resolved and have improved performance.
If you’re running a Gatsby website on Netlify, I hope you found this blog post helpful!

Anonymous arrow functions, Head API, updated GraphQL and Netlify!

Updating to Gatsby 5 and using FontAwesome properly on Netlify

Hi! 👋 It's been a while!
Things may not look different, but the site is different.
Today, the website is now running on Version 4 of <a href="https://www.gatsbyjs.com/">Gatsby</a>! 🎉 AND all of the other packages that are used to build this website have also been upgraded! 🙌
Upgrading Gatsby to version 4 has been on my list of things to do for a while, and recently I decided to tackle it. So here is a quick blog post about the steps I took on upgrading it. But why upgrade? Well...
<ul>
<li>Up to a 40% reduction in build times</li>
<li>JavaScript and CSS bundling performance improvements</li>
</ul>
And <a href="https://www.gatsbyjs.com/docs/reference/release-notes/v4.0/">more!</a>
Also, a lot of my packages were outdated. Here's the list of outdated packages before I upgraded.
<img src="https://i.imgur.com/zqienmT.png" alt="">
As you can tell, that's an embarassing amount of outdated packages. Seriously, I've been running on Gatsby version 2 for nearly two and a half years. And then there is the rest of the packages that are outdated by several major versions as well!
Better late than never! Let's upgrade all these packages.
I've never really done anything like this before, my experience with Node is very limited. So I decided to update each package from the list and make the appropriate changes in the package.json file.
But things didn't exactly go to plan at first, I received plenty of errors trying to install the latest versions of the packages (which I expected, I mean I am jumping from version 2 to version 4!). In the end, I ended up running the following command:
<pre><code>npm install --legacy-peer-deps
</code></pre>
This helped me resolve all of the problems I was having, hooray! My website could run locally, everything looked good! So I created a pull request and began the process of merging the changes into main.
I also had to add a new package called '<a href="https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users#gatsby_">gatsby-plugin-postcss</a>'- and the command for installing legacy dependencies helped with this too.
And then something unexpected happened.
Netlify ran into an issue with the version of Node that was installed.
<pre><code>5:12:55 PM: $ gatsby build
5:12:56 PM: error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0).
5:12:56 PM: Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
</code></pre>
This is strange. The version I have on my machine is version 14 and Gatsby builds the application locally. So what on earth is going on?
Naturally, I went to StackOverflow and thankfully, I was not alone in this problem. Someone had the same <a href="https://stackoverflow.com/questions/70362755/netlify-says-error-gatsby-requires-node-js-14-15-0-or-higher-you-have-v12-18">problem</a>. The problem is (as explained by Ferran Buireu on StackOverflow):
<blockquote>
The problem is that you have Node 17.2.0. locally but in Netlify's environment, you are running a lower version (by default it's not set as 17.2.0). So the local environment is OK, Netlify environment is KO because of this mismatch of Node versions.
When Netlify deploys your site it installs and builds again your site so you should ensure that both environments work under the same conditions. Otherwise, both node_modules will differ so your application will have different behavior or eventually won't even build because of dependency errors.
You can easily play with the Node version in multiple ways but I'd recommend using the .nvmrc file. Just run the following command in the root of your project:
<code>node -v > .nvmrc</code>
This should create a .nvmrc file containing the Node version (node -v) in it. When Netlify finds this file during the build process, it uses it as a base Node version so it installs all the dependencies accordingly.
The file is also useful to tell other contributors which Node version are you using.
</blockquote>
Well, I didn't know that!
So, after creating a .nvmrc file, Netlify was happy and successfully deployed the branch!
At this stage, I was happy with the changes and decided to merge the changes into main.
Success!
So, what did I learn from all this?
<ul>
<li>Update your packages often</li>
<li>Read the documentation!</li>
<li>Keep up to date with changes</li>
</ul>
And that wraps it up!
Apologies for the short post, I'm super busy with other things (which I'll talk about soon).
Thanks for reading! 👍

Upgrading to Gatsby V4!

Hello!
Although it may not look it, but things are slightly different here. Let’s dive in and take a look!
A new background colour
I’ve changed the background colour to be easier for the eyes when reading. Some of my posts that I put out are quite long so a warmer colour should help.
The RGB code for this is:
<pre><code>rgb(239, 233, 228);
</code></pre>
An all new page - the Archive!
I have nearly 70 blog posts and that means the current blog page is really long. So I decided to change the current blog page to show the 5 most recent posts and the new archive page shows all the posts that I’ve written.
This has been achieved with the following GraphQL query
<pre><code>query {
 allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC } limit:5) {
 totalCount
 edges {
 node {
 id
 frontmatter {
 title
 date(formatString: "DD MMMM, YYYY")
 description
 image
 }
 fields {
 slug
 }
 excerpt
 }
 }
 }
 }
</code></pre>
The key part of this query is the use of ‘limit’; now only the the 5 most recent blog posts will be displayed. The rest are stored in the archive.
Eventually, I’ll introduce pagination on the archive page to make things easier to manage.
Also, viewing the list of posts is now more compact on mobile devices.
An updated photo on the main page
I decided to switch from a circle to a square with rounded edges instead. The photo has now been edited with <a href="https://www.pixelmator.com/pro/">Pixelmator Pro</a> (which is really good by the way).
Also, the sizing of the photo now looks better on mobile and tablet screens!
The work page, has been replaced with an about page
The work page is slightly crowded and somewhat messy. So I’ve revamped it to be an about page. With more information about myself, the work that I’ve done and some of the personal projects I’ve worked on.
You’ll also see a few photos (also edited in Pixelmator Pro) of myself on my most recent trip to Nashville, in front of Five Daughters Bakery (they sell some very good donuts) and a photo from my trip to Tokyo in 2018.
Speaking of the photos. You’ll notice that the text wraps around the photo itself. This has been achieved by using the CSS property called <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">float</a>.
A new font!
I’m now using <a href="https://material.io/blog/roboto-serif">Roboto Serif</a>! This will be replacing Roboto Slab. You’ll see this used in headers. <a href="http://vollkorn-typeface.com">Vollkorn</a> is still being used as the font for paragraph text.
I like the retro look of Roboto Serif. It stands out and it’s easy to read.
Small CSS changes
I’ve made some smaller changes to the CSS on this website. One being the animation for the footer has been changed as it didn’t work correctly on Safari.
Another change is that the list of blog posts now looks better where each entry now has the same height and width. The view on mobile devices has also been improved.
Wrap up
Looking through the commit history on GitHub for this project, I’ve been using this now for two years! 🎉 Huge thank you to everyone who has read my posts over the past two years!
Hope everyone enjoys the new changes and let me know what you think.
Thanks! 👏

New photos, new pages, new colours, bug fixes, and more!

Welcome to website version 2.1! 🎨

###A new font
Over the past few months, I've been making some slight changes to the website and today I thought I'd talk about them. I mean, it is development right?
Let's dive in with one of the most visual changes, the new font that you are seeing right now!
I've chosen the <a href="http://vollkorn-typeface.com/">Vollkorn</a> Serif font to be used for posts and text that isn't a title. I'm still using <a href="https://www.fontspace.com/quicksand-font-f6691">Quicksand</a> on other areas on the site as I find the font helps titles stand out.
Why I chose Vollkorn is that it's easy on the eyes when reading and has a wide variety of different weights. Plus, it's free to use which is great.
###Quotes and Code
I've also got some new CSS for displaying quotes and code!
<blockquote>
Here's a quote - looks nice, right?
</blockquote>
<pre><code>print("This is some code! Nice formatting!")
</code></pre>
This helps make presenting quotes and code nicer and more pleasing to read.
If you're looking for the code for either of these, then here - feel free to use it! Check out the CodePen examples!
###New button
It's now often I get excited about a button, but here we are. The button on the homepage has been updated with something that's a bit more modern and actually looks like a button.
This new button looks like the card design on the work page but with a new background and some animation.
The button itself is designed to look like a piece of textured paper or card.
There's animation for when you hover over it, the card is lifted up and then the animation for active shows the card being pressed down.
If you want to play around with it and see it for yourself (without sending me an email) - checkout the CodePen!
And that's about it!
Might not be the most exciting post ever but I wanted to highlight the improvements made to the user experience on this site.
Thanks for reading! 👏

New changes and improvements 🔨

#Website 2.0! 👏
Hi! 👋 It's been some time since I last posted a blog post! Well, I've been quite busy recently. Following the development of my first web application, Ocean, I decided to think on what I wanted to be as a developer. I enjoyed creating the web version of Ocean and there is so much going in terms of creating applications for the web. So I decided to look at becoming a web developer.
So in light of this, I decided to create a brand new personal website from scratch. But this website is built using Gatsby - which is an open soruce framework that uses React to develop applications and websites. I've seen that React is a modern JavaScript library so I decided to spend some time learning it, and this website is a result of my work! 👨‍💻
A bonus of using Gatsby is now that my blog is now on the same URL as my personal website! 👏 This means that my Jekyll blog hosted on GitLab is no longer used - this will help keep things tidy and easier to manage.
All of my previous blog posts have also been moved to this new blog as well.
I'll be resuming regular updates here now that I've finished this website.
Look forward for new posts aimed at web development! 👍

Posts tagged with Blog