Posted on in #development #new-year

Every New Year is a fresh slate, people make resolutions, review the previous year and set intentions on what they want to do this year. I'm no different! My site was very outdated and cringe worthy, last post was in 2013 and things have changed (2 kids happened and tiredness is at 11!) I did intend to get the new site out of the door in January but with client work and a 2 month old baby things didn't go to plan!

Perfect is the enemy of good

Recently I read a great article about how good is better than perfect which sums up my sentiments on creating a new website, there's always more things I want to do and tweak, this or that isn't quite right which leads to things never being fully finished or released :( I tried to avoid limit that by building it as an MVP and even then I wasn't fully satisfied but I don't think I ever will be so getting it out of the door is a priority and then try to hopefully improve it iteratively each day/week.

Development

The old site was built using CakePHP and a little CSS framework called Skeleton, things move fast and Laravel disrupted the PHP ecosystem in a massive way and that's what's being used here. I did consider using Tailwind for the front end framework but settled for Bootstrap 4 out of familiarity and wanting to get it out of the door as soon as possible. I may revisit Tailwind in the future, it's getting a lot of attention in the Laravel community and I really like using the utility classes in Bootstrap.

CSS

I'm using the default Laravel Mix Webpack setup that comes as default with Laravel, learning Webpack is on my learn list as it's a bit of a mystery to me currently. Instead of importing all of Bootstrap's components I've been selective and only enabled what I'm using:

// Bootstrap
// @import '~bootstrap/scss/bootstrap';
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Optional
@import "~bootstrap/scss/root";
// @import "~bootstrap/scss/tables";
...

Colour palette comes from an old UI Kit that I've always wanted to use on a project, seems the site is down but managed to find the free version on Github. I've used those in a _variables.scss file before importing Bootstrap and they'll be used instead of the defaults:

// Colors
$blue: #02baf2;
$indigo: #a88cd5;
$purple: #9175bd;
$pink: #f66D9b;
$red: #f84545;
$orange: #f6993f;
$yellow: #fad46b;
$green: #3eb5ac;
$teal: #28948c;
$cyan: #3eb5ac;

$primary:       $blue;
$secondary:     $gray-800;
$success:       $green;
$info:          $purple;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

Quite powerful and lets you quickly change from the bog standard Bootstrap colours e.g.

Checkout the Bootstrap docs for more info on theming.

SVG Header Image

One thing I do quite like about the design is the top header background image on the homepage, I used an SVG image from SVG Backgrounds and they provide CSS that you can use. I did want to keep theme colours so using SASS I was able to use Bootstrap's theme-color-level(dark) and shades such as theme-color-level(dark, -1) which is pretty nice. One issue I had is that the # in the colour wasn't encoded so I had to hunt down a wrapper function that encodes it so now I can use colours like fill='#{encodecolor(theme-color-level(dark))}' in my SASS file that uses my theme colour in an SVG image (this also uses interpolation with the hash and brackets). Noice.

Reducing CSS Size

Using Laravel Mix I was able to use spatie/laravel-mix-purgecss which does a great job of reducing the size of your CSS file by using Purgecss to remove all the styles that your views/templates/files don't use. Installation is pretty easy and works out of the box and I'm seeing a reduction in size from 95.1 KiB to 17.4 KiB saving 77.7 KiB!!

Reducing Image Size

Laravel Mix doesn't optimise images out of the box so my searching came up with this great comment which details how to install imagemin and setup webpack to copy and optimise an image folder which works great.

mix.webpackConfig({
    plugins: [
        new CopyWebpackPlugin([{
            from: 'resources/images',
            to: 'img',
        }]),
        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            plugins: [
                imageminMozjpeg({
                    quality: 80,
                })
            ]
        })
    ]
});

Javascript

I didn't really want to bring in any frameworks for a simple blog site so I've used vanilla JS for the small chunks for functionality where needed and even then it isn't much. I did initially include Font Awesome for the 3 icons in the homepage header and couldn't find an easy way of just pulling in specific ones without integrating them into the build process so just went plain SVG images in the end.

I have some image lazy loading to make the page load quickly, I just attach the image src as a data attribute and simply loop through them all on window load, create new Image instances, set an onload event handler to set the src on the element (needs to be done before actually setting the image src) and finally set the image instance src to the data attribute src.

<img data-src="http://example.com/image.jpg">

window.onload = function () {
    document.querySelectorAll('[data-src]').forEach(function (el) {
        img = new Image();
        img.onload = function () {
            el.src = this.src;
        };
        img.src = el.dataset.src;
    });
};

Packages

Just a few packages have been included, it's a simple site so didn't need much:

"nothingworks/blade-svg"  - for inlining svg images in Blade templates
"pagerange/metaparsedown" - for parsing Markdown AND yaml metadata
"spatie/laravel-feed"     - for an rss feed
"spatie/laravel-honeypot" - for protecting the contact form
"spatie/laravel-responsecache" - for caching responses

nothingworks/blade-svg

Super useful for inlining svg images in Blade templates e.g. @svg('twitter', 'icon').

pagerange/metaparsedown

For parsing Markdown AND yaml metadata, as mentioned my posts are written using Markdown, Laravel uses the erusev/parsedown package for emails which is great however I also wanted to include meta data in my posts so that I didn't have to touch the database for custom things e.g. meta description, header images etc so I found this (which extends the package used by Laravel) for doing both which seems to work well. Allows me to do the following in my files which are then imported via a command:

---
title: 'Hiphopopotamus'
meta_description: 'Awesome song!'
tags: 'songs'
---
Here's the Hiphopopotamus, The hip hop hippo, They call me the Hiphopopotamus, My lyrics are bottomless...

spatie/laravel-feed

A quick and easy way to enable an RSS feed to the site. I feel RSS is still one of the best ways to keep upto date with multiple sources, still think about Google Reader R.I.P - now I use Feedly!

spatie/laravel-honeypot

For protecting the contact form from tricksy spamers.

spatie/laravel-responsecache

For caching entire page responses for super quick requests.

Goals

I've always tried to keep a few goals throughout the year, usually they peter out throughout the year :( so hopefully documenting them publicly will help me keep on track.

Meditation

I'm always hearing lots about the benefits of meditation, when I sit quietly even for a moment the monkey brain spews out all sorts of things. Meditating can help and I've found it does, I've been using an app called Oak from Kevin Rose which I really like. Simple and I've been using the same track each time. Currently on a 62 day streak!

Spanish

Language learning is good for the brain (apparently) I've been learning French since school but seems never to stick and recently switched to Spanish. Tried Duolingo but got fed up with them constantly changing the app and gaming it with more hearts blah blah. Now using Lingvist to learn words which is working really well, there's a goal of 100 words a day with the aim of 20 new words. Doing 100 works well but 20 a day is a bit of a stretch. Really need to accompany this with Michel Thomas for practical speaking. It's just finding the time! Currently on a 37 day streak.

Reading

I love reading, I use Goodreads to keep track of everything and sign up to their yearly challenges. Missed my 2018 of 35 books by 2 so dropped it to 30 this year, having a toddler and a fresh baby doesn't give me much time but trying where I can. Highlights of last year include Annihilation, Iron Gold, Shoe Dog & the Mistborn series.

Exercise

Working for myself, from home can be pretty sedentary. Picked up an Ikea sit/stand desk last year which is great but working out and lifting heavy things needs to be a priority. I'm getting older and my health is on my mind, I'm also a pretty small guy and putting on weight/muscle isn't easy for me. Trying to be consistent and work on chest/back and arms throughout the week. I've got a pull up bar and various weight dumbbells and apps to track push ups and pull ups. Doing well and improving each week by keeping track and monthly strength tests. Not seeing it on the scales yet, having a baby leads to increase stress and severe lack of sleep which also doesn't help for me. Will try to post about all this in more detail in future.

Blogging

With a new blog comes great responsibility, more blogging! Need to up my game and start a streak of posts. Is 1 a week too much?! Probably unless they're smaller. Maybe I'll try 1 longform a month and a small one a week. Got a few freelance, remote, dev, dad related ideas so I'll aim to keep up momentum.

Minimalist

Started listening to The Minimalist Podcast last year and picked up their Essential book which I'm currently reading. Living with less is becoming more important so I've already started to de-clutter and had a trip to the charity shop with unwanted stuff. Hope that brushes off to my wife and I'm trying to teach that to my toddler which is kinda going ok. I have his permission to "recycle" a few of his old toys which is certainly a start!

Love people, use things. The opposite never works.

https://www.theminimalists.com/lovepeople

Sub Goals

Guitar

Each year I put down guitar as a goal and I always reach a plateau of enthusiasm and skill. Not really touched it this year but would like to pick it back up and start playing again. Set myself a full song a month previously so may

Gaming

Very bottom of the pile, picked up a PS4 last year with God of War which I have yet to finish and Red Dead Redemption 2 at Christmas which I've only fired up for an hour or so :( Time is a premium and sleep is a priority those first difficult months of having a baby. Hopefully by mid year things will have settled and my free time opens up for me to play! Also have a Switch which is an amazing bit of kit so will try to pick that up too!

Good is Better Than Perfect

Still lots todo! I use Trello for most of my projects and it helps me keep track of things, some of which include:

  • Add page caching (spatie/laravel-responsecache)
  • Add my ginger face to the homepage header
  • Add favicon
  • Move and minify all JS (instead of per page)
  • Setup outgoing email on contact form (currently using Mailtrap)
  • Upgrade to Laravel 5.8
  • Add old post warnings e.g. 6 months old, 1 year old
  • Transfer Medium posts
  • Add to Google Search Console
  • Integrate header images