§ My New Website

During 2021/2022, I had built a website to serve as my personal website. It was not very good. There were bright and flat colours which hurt the eyes, too much contrast, too little contrast. It was a visual mess.

I wanted to build a new site because I didn't want to have to redirect to HashNode for my blog posts but my last attempt at using Contentful didn't end well as embedded images did not work.

My New Website

§ Contentful

As I've learned a little more JavaScript, I decided to revisit the Contentful idea and I used the same library (contentful-rich-text-vue-renderer) and I hit the same issue. This time, however, I dug into the library and discovered the embedded-asset-block was missing. I added that (see this pull request) and everything was now displaying correctly.

However, it was taking a few seconds (anywhere from 2 to 8) seconds to fetch the content from Contentful as I had making multiple requests to fetch blog posts, images and categories. I then wanted to reformat the data from Contentful as the structure they use in their API responses is verbose and I only needed a few fields from the response.

My idea was to loop over the response from Contentful and push it to an array and return that however, this also adds more time waiting for a response from the server. What I ended up doing seems to be the ideal solution.

As I'm using Laravel on the backend I am able to leverage scheduling and commands. In app/Console/Commands/Contentful/FetchPosts.php I have the following code

<?php
$service = new ContentfulService();
$entries = $service->getAllEntries(
     (new Query())
        ->setContentType('blogPost')
        ->orderBy('sys.createdAt', true)
);

foreach ($entries as $entry) {
    $service->getEntry(
        (new Query())
            ->setContentType('blogPost')
            ->where('fields.slug', $entry['slug']),
        $entry['slug']
    );
}

$service->getAllEntries(
    (new Query())
        ->setContentType('blogPost')
        ->orderBy('sys.createdAt', true)
        ->setLimit(5),
    true
);

which calls a Contentful Service which calls this method

<?php
if (!cache()->has('contentful_posts')) {
    $items = $this->client->getEntries($query)->getItems();
    $posts = [];
    
    foreach ($items as $item) {
        $posts[] = $this->normalize($item);
    }

    cache()->put('contentful_posts', $posts, now()->addHour());
}

return collect(cache('contentful_posts'));

As you can see, this returns a collection of posts and shoves it into a cache (in this case, redis). Using this basis to iterate over every post from contentful and cache it with a unique identifier I have got page loading times to below 700ms. To keep the content fresh and up-to-date, I run the command every few minutes using a Laravel Schedule.

§ Twitch & Mastodon

For the twitch video and mastodon feed, I use much the same technique as I have for contenful and everything is very snappy and fast.

§ Design

I am not a designer by any amount of imagination so I TailwindCSS. However, a friend of mine (Salma Alam-Naylor) has a rather nice design on her personal website so I kindly ripped it off for my own design. It caused a bit of a laugh that I used TailwindCSS while she used vanilla CSS when I later showed a couple of screenshots and asked permission to rip her site off. 😜

I'm rather pleased with the result though and just need to refine text colour.

§ Screenshots

I share a lot of screenshots and I use the app "ShareX" for this. They have a feature where you can choose which service to upload your image to or even define your own service. I added a feature to receive data from ShareX and that allows me to host my own screenshots for easy sharing (like with this URL https://sketchni.uk/image/original/DkWz7v2g2Uky651Y9WXKRCQeG0uOt6pWj4jWcJs4.png).

Leveraging the power of the Intervention\ImageCache package, I am also able to cache these image responses for faster loading times but also manipulate the size of the image. Changing "original" in the URL to either small, medium, or large, I can have a resized image that is also cached!

§ The Future

Ideally this website will serve me for a few years but I do have lots more planned to add but that's mostly for my own purposes such as to-do lists, calendars, mailboxes and whatnot. I will be writing more blog posts about some of this journey as I learn more interesting technologies like RabbitMQ which I am now using instead of Redis to manage Queues in Laravel.

SketchNI