DEV Community: John Halsey

I’m 40!

John Halsey — Wed, 18 May 2022 19:39:58 +0000

I'm 40. I'm not saying that to brag, I'm not saying it's old, because it's definitely not old. No it's not. But I feel like it's important for context.

I got into web development later than my peers, I was in my mid 20's when I took a Home Learning College course on HTML and Flash. That was when Adobe Dreamweaver CS3 was the text editor of choice. Just by me typing that out, I feel old and it feels like an age ago that I signed up for that course and received all my course books and Adobe software in the post. I had a crappy (good at the time) Windows computer at home running the even crappier (always crappy) Windows Vista.

Back then It was just me and my wife at home, no kids and few distractions. So I was able to set aside a good chunk of time to go through the coursework and complete the challenges. And by "complete the challenges" I mean, fumble my way through the big ring-bound course books and copy the code from there onto my computer.

When I was in school, any kind of web development lessons just wasn't a thing. We had IT classes, but the coolest thing about that was the swivel chairs. I can clearly remember my first IT lesson in school, the teacher gathered us all round to look at one computer screen, and he said "So when you're typing and the cursor gets near the end of the screen, you can just.. [short pause while he tapped some keys] ..keep typing, and the cursor will automatically go onto the next line." Yes, that was about the extend of our IT lessons, that and messing about in Microsoft Paint.

I was lucky enough to have a computer at home. An Olivetti... something. A chunky cream coloured monitor the size of a large microwave, that sat on top of an even chunkier, even creamier breeze block of a computer with a floppy disk slot. I used that to practice typing the alphabet. It was OK for typing out documents with zero styling and then printing it out. You couldn't do anything else with it, except maybe hurl it at burglars with the intent of doing some serious physical harm.

A bit later, Dad would bring home his Mac he used for work. Don't get excited we're still talking about the early 90's, so it wasn't great, but better than anything we had before. That had Quark Express and Adobe Illustrator, which I actually got pretty good at. I would draw out side-on views of Formula One cars in vector point images, and learn how to use layers and gradients and stuff. That was a lot of fun. Plus it had a cool flying game on it, where you could just fly around islands and things.

Fast forward about 20 years, in 2014 I got my first junior developer position for a digital agency. I’d done a couple of small sites before then but was all very basic. At the agency, I remember I was once told to put a domain in my host file so that I could see the site in my browser. I didn't know what a host file was so of course I said "yeah no problem", and quickly had to look it up to see what it was and how to access it. Think I got away with that one. But I was eager to learn and tried to just soak up as much as I could, without looking like a total idiot.

In a previous job I’d been using Windows (7 I think) and was quite familiar with that, but when I started with the agency I soon realised that a Mac was a better option. I can remember attempting to use Putty or Play D’oh or some such terminal programme and found it tricky to understand. Meanwhile, my colleague (and now friend) was having a much better time on his MacBook Pro with his smug face perfect parting.

I wanted a Mac for home anyway so I used all my savings and bought myself a 16” MBP which I was then able to use for side projects and at work. I tastefully suggested that they could shove the Windows machine up their arse and that I really enjoyed working there.

While there I worked on custom Wordpress themes and plugins, attempting to understand the hooks and filters (I still only partially get them), and started working on Laravel applications. Also did a lot of stuff in the front end and loads of jQuery and vanilla JavaScript, also learned about Bootstrap layouts, gulp, grunt, guzzle, handlebars, less, sass, bower, npm, composer, the list goes on. And on.

And on.

Later down the line, I did a little bit with Angular, before really moving into VueJS, and fully immersing myself in Laravel. Which I am still using today. But that comes with its own learning challenges. Thankfully Laracasts is amazing as a developer learning resource, which I’ve basically competed.

More recently I moved into a leadership position with another company and these days it’s likely you’ll find me planning an agile sprint, preparing for a Retrospective or other company meetings. Sometimes I'll be searching for gifs that are loosely related to the latest marmite-and-cheese-hating comments on the companies #general slack chat.

Mentoring is also now a large part of my job role and it's really satisfying to watch a new a generation of junior developers grow in confidence and ability. Each new task is an opportunity to learn something new and that never really stops.

For any junior devs out there now possibly reading this article, let me tell you this, developing is hard. It's not easy, at all. There is so much to learn and remember. Google is your friend. Bash aliases are a lifeline. Live Snippets in PHPStorm are a godsend. Any shortcuts you can find to speed up your development will drastically improve your productivity. But it's a long hard slog. You cannot learn to code effectively in a weekend, it takes years to learn your craft. You'll go through highs and lows, you'll get imposter syndrome, you'll lack confidence, you'll start to question your own existence, and you will at some point say, out loud, "why the fuck doesn't this fucking thing fucking work!".

Other common phrases include “How did this ever work in the first place?”, “Why does this look different on [insert name of browser]?” and the old classic, “Well, it works on my machine”.

But, it is extremely rewarding, and when things do eventually start to work there is so much pride in your work, you'll start to look round the room to see who you can show this awesome piece of code to, this amazing, smart and clearly ground-breaking piece of functionality to, until you realise you're working from home, and theres no-one there except the cat. Who doesn’t care. He’s too busy licking his balls or pulling up the carpet.

I still enjoy developing and regularly throw in the occasional bug that my team will have to fix later. I like to leave my mark and keep them on their toes.

Looking back at that first conversation I have with a Home Learning College rep who sold me that course and when I think about all the cool things I’ve built and learned over the years, it’s been a wonderful, albeit difficult, but thoroughly rewarding journey.

Now if you don’t mind, it’s time for my nap.

Is HTML a programming language? I finally get to the bottom of it.

John Halsey — Fri, 20 Aug 2021 18:56:32 +0000

Can you write a programme with it. No. You cannot. Move on.

Creating a masonry layout from scratch in VueJs (and CSS Grid)

John Halsey — Thu, 25 Jul 2019 11:32:01 +0000

I wrote my own website in Laravel and VueJS. It’s nothing special, just a page about me and some of my skills, and a blog page. Eventually I intend to have a page for some projects to showcase some of the things I've created in my spare time.

A few days ago, the blog index page was, well… shite, just a paginated list of the posts, nothing exciting and a pretty crap layout. I wanted to spruce it up with a masonry feel, but didn’t want to import any packages, so had a go at building it myself.

This is resulting outcome. Check it out here johnhalsey.co.uk/blog

So how did I achieve this?

Firstly, I make an api call to get the posts from the database. I send back a JSON response in a Laravel resource (not shown here).



export default {
    name: 'Posts',
    props: {
        category: {
            type: String
        }
    },
    data () {
        return {
            posts: []
        }
    },
    mounted () {
       this.getPosts()
    },
    methods: {
        getPosts () {
            let params = {}
            if(this.category != '') {
                params.category = this.category
            }
            window.axios.get('/api/posts', {params})
                .then(response => {
                    this.posts = response.data.data
                    this.calculateImageCount()
                })
        }
    }
}

The masonry layout is achieved with CSS Grid and a javascript calculation for each post that works out how many grid rows it needs to take up, but it can't start to work that out, until all the images have loaded and rendered on the browser, and since not all posts have images, I calculate how many of the posts have images.



data () {
    return {   
        imageCounter: 0
    }
},
methods: {
    calculateImageCount () {
        for (let i = 0; i < this.posts.length; i++) {
            if (this.posts[i].media.featured.medium != '') {
                this.imageCounter++
            }
        }
    }
}

Then in the template, when looping through the posts, I mark when each image is loaded, and increment a counter.



<template>
    <div class="masonry">
        <div v-for="(post, key) in posts"
             :key="key"
             class="card"
        >
            <div class="card-content">
                <div v-if="post.media.featured.medium != ''">
                    <img :src="post.media.featured.medium" :alt="post.title" class="img-responsive" @load="rendered">
                </div>
                <div class="p-20">
                    <a :href="post.link">
                        <h3>{{ post.title }}</h3>
                    </a>
                    <a v-for="category in post.categories" :key="category.id" :href="'/blog?category=' + category.slug">{{ category.title }} <br></a>
                    <p class="font-12">Posted on {{ post.published_at }}</p>
                </div>
            </div>
        </div>
    </div>
</template>



export default {
    data () {
        return {
            imagesCount: 0
        }
    },
    methods: {
        rendered () {
            this.imagesCount++
        }
    }
}

I watch the image counter and when it gets to the same number of images I know I’m expecting, I can calculate the height of the post cards.



watch: {
    imagesCount: function () {
        if(this.imagesCount == this.imageCounter){
            this.resizeAllMasonryItems()
        }
    }
},

Then the magic happens. the resizeAllMasonryItems() method loops through all the posts now that all images have loaded, and calls another method to actually resize the item, and it does that by applying a grid-row-end: span [dynamic number] style to each post card.



resizeAllMasonryItems () {
    // Get all item class objects in one list
    let allItems = document.getElementsByClassName('card');

    /*
     * Loop through the above list and execute the spanning function to
     * each list-item (i.e. each masonry item)
     */
    for (let i = 0; i < allItems.length; i++) {
        this.resizeMasonryItem(allItems[i]);
    }
}

Each item gets passed into the resizeMasonryItem() method.



resizeMasonryItem (item) {
    /* Get the grid object, its row-gap, and the size of its implicit rows */
    let grid = document.getElementsByClassName('masonry')[0],
        rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')),
        rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));

    /*
     * Spanning for any brick = S
     * Grid's row-gap = G
     * Size of grid's implicitly create row-track = R
     * Height of item content = H
     * Net height of the item = H1 = H + G
     * Net height of the implicit row-track = T = G + R
     * S = H1 / T
     */

    let rowSpan = Math.ceil((item.querySelector('.card-content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));

    /* Set the spanning as calculated above (S) */
    item.style.gridRowEnd = 'span ' + rowSpan;
},

I style the parent element with some basic CSS, using CSS Grid.



<style type="text/css">
    .masonry {
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 0;
    }
</style>

Finally, when the component is created I put event listeners on load and resize of the page to keep calculating the card heights. Technically I don’t even need the load event listener, but seems nice to have it there.



created () {
    let masonryEvents = ['load', 'resize'];
    let vm = this
    masonryEvents.forEach(function (event) {
        window.addEventListener(event, vm.resizeAllMasonryItems);
    });
}

That’s it, now I have a pretty cool masonry layout for my blog posts. The whole thing looks like this. And it's responsive too.



<template>
    <div class="masonry">
        <div v-for="(post, key) in posts"
             :key="key"
             class="card"
        >
            <div class="card-content">
                <div v-if="post.media.featured.medium != ''">
                    <img :src="post.media.featured.medium" :alt="post.title" class="img-responsive" @load="rendered">
                </div>
                <div class="p-20">
                    <a :href="post.link">
                        <h3>{{ post.title }}</h3>
                    </a>
                    <a v-for="category in post.categories" :key="category.id" :href="'/blog?category=' + category.slug">{{ category.title }} <br></a>
                    <p class="font-12">Posted on {{ post.published_at }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Posts',
        props: {
            category: {
                type: String
            }
        },
        data () {
            return {
                posts: [],
                imageCounter: 0,
                imagesCount: 0
            }
        },
        mounted () {
            this.getPosts()
        },
        created () {
            let masonryEvents = ['load', 'resize'];
            let vm = this
            masonryEvents.forEach(function (event) {
                window.addEventListener(event, vm.resizeAllMasonryItems);
            });
        },
        watch: {
            imagesCount: function () {
                if(this.imagesCount == this.imageCounter){
                    this.resizeAllMasonryItems()
                }
            }
        },
        methods: {
            rendered () {
                this.imagesCount++
            },
            getPosts () {
                let params = {}
                if(this.category != '') {
                    params.category = this.category
                }
                window.axios.get('/api/posts', {params})
                    .then(response => {
                        this.posts = response.data.data
                        this.calculateImageCount()
                    })
            },
            calculateImageCount () {
                for (let i = 0; i < this.posts.length; i++) {
                    if (this.posts[i].media.featured.medium != '') {
                        this.imageCounter++
                    }
                }
            },
            resizeMasonryItem (item) {
                /* Get the grid object, its row-gap, and the size of its implicit rows */
                let grid = document.getElementsByClassName('masonry')[0],
                    rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')),
                    rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));

                /*
                 * Spanning for any brick = S
                 * Grid's row-gap = G
                 * Size of grid's implicitly create row-track = R
                 * Height of item content = H
                 * Net height of the item = H1 = H + G
                 * Net height of the implicit row-track = T = G + R
                 * S = H1 / T
                 */

                let rowSpan = Math.ceil((item.querySelector('.card-content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));

                /* Set the spanning as calculated above (S) */
                item.style.gridRowEnd = 'span ' + rowSpan;
            },
            resizeAllMasonryItems () {
                // Get all item class objects in one list
                let allItems = document.getElementsByClassName('card');

                /*
                 * Loop through the above list and execute the spanning function to
                 * each list-item (i.e. each masonry item)
                 */
                for (let i = 0; i < allItems.length; i++) {
                    this.resizeMasonryItem(allItems[i]);
                }
            }
        }
    }
</script>

<style lang="scss" type="text/css">
    .masonry {
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 0;
    }
</style>

Life in The Matrix

John Halsey — Wed, 10 Jul 2019 13:00:52 +0000

Come on, we've all done it. We've all pretended we're in The Matrix whilst coding. I don't mean just pretending to be in the film, but actually be inside the matrix where we can see the world around us, in code format, scrolling letting and numbers that seem to make sense to us, and seemingly, no-one else.

I'm lucky enough to be in a job that I love, to be a web developer and spend ~~all~~ ~~most~~ some of the day coding, creating new features is a really cool thing, but it does mean that it makes it hard to describe to family or friends, what it is that I actually do. Sometimes when talking to muggles (non magic/web folk), I shouldn't, but I do play up on it a bit.

"So John, what do you do?"
"I'm a web developer". Nothing, I mean just blank stares while they think of something intelligent to say.
"What's that then?" Game on.
"I teach spiders how to create better, more efficient, intricate webs, in order to catch more pray, thus being more effective and more profitable." Nothing.
"Oh right".

Sure its funny for a while, but eventually it does make me come across a bit of a weirdo. Which really isn't fair because it's only partly true. The thing is though, that even people who know what I do, and what it involves have a hard time understanding the finer details. When attempting to explain a particular piece of work to my wife (muggle), I can see she's interested to a point, but then the generic nodding and "mmm hmm" sounds start coming out of her mouth, her eyes glisten over while she stares straight through me, into some black hole abyss of boredom and daydreams.

So I talk for as long as possible.

She doesn't ask about my day anymore.

Then there are the people who know what I do, know what it involves, and even have some basic understanding of how programming works or may have done some real simple coding, or have looked at HTML once before. These people are interesting because they think they "get it", and will attempt to instigate conversations about project I may be working on, or how they "could have been a developer", "thought about being a developer", or "have a family member/friend who is a developer". (Squibs). These people are actually OK to talk with, and can hold up reasonable conversation about basic coding concepts or underlying HTML and Javascript, but ask them about tabs vs spaces, and their game goes to shit. They crumble like a soggy digestive biscuit dunked in cold tea by a fat fingered pencil pusher with food in her beard.

Actually being in The Matrix though is where its at for me, I'm not too fussed about whether or not I can comprehensively explain what I do for a living, or if anyone is even interested. Truth be told, I don't care what you do, so why should you care what an XSRF token is, or what a 418 response status really means?

Talking dev is kinda like having a special Masons handshake, everyone around you can hear what you're saying, you're speaking English, they could talk with me too if they want, but the conversation are very different, and its all kind of a secret.

A fellow developer might say, "I spent the morning fixing a bug that prevented the side menu sliding out properly on mobile devices, which meant the nav was all skewed". Or "Ive been cleaning up some controllers in my application, created a trait for similar methods, and now its a lot more DRY". Reasonable dev talk.

A muggle might say "You work with computers, right? Do you know why I can't connect to the printer?" And theres nothing sarky I can say here that doesn't involve me getting fired on the spot. So inevitably I spend three hours wasting my time trying to connect to a printer that I can see, I can touch, I can smell, but that it turns out isn't turned on. It's not even plugged in. Once it's up and running and they say "Thank you so much" (if you're lucky) I respond with "My pleasure". But of course it isn't, and I'll spend the rest of my life avoiding them at all costs.

I like to spend as much time in The Matrix as is possible, in the digital world where I can control and alter the elements as I wish, like God. Yes, now that I think about it I'm basically God for the internet. I giveth, and I taketh away. I never really thought about it like that before, but that makes a lot of good sense. Think about it, in the beginning God created the heavens and the earth. (The framework, and the database migrations), and God said, “Let there be light,” and there was light (data, seeded at first), and saw that it was good (validated). I think this really speaks for itself, why do you think the first thing anyone ever learns to develop is a Hello, World application?

Time in The Matrix is a funny thing too, because when you're in there it goes much faster than normal, meaning you have less time to do anything. It's like the exact opposite of Inception. Seriously, I'll go in at say 14:00pm o'clock in the afternoon, and before you know it, it's five in the evening, the next day! This makes estimating task durations far harder. How long can it really take to make a small box panel with some text in it, maybe a picture, and a link. Oh and it needs to be responsive, have dynamic content, only appear if there's an 's' in the day and compliment you on your ability to use the internet? Longer than you think. I tend to add four hours onto any estimation just to be sure. Five if it's a Friday. Six if it's a Monday. Seven if it's a Tuesday or Thursday.

To look at my computer monitor, and specifically at my code editor (PhpStorm, what else is there?), you would see a dark background with cool colours for different elements of code. Red for operators and statements, yellow for text strings, Blue for classes, orange for properties, white for variables and so on. I prefer a darker theme for The Matrix because it is genuinely easier to read the code like that. But now here's the thing, muggles and even other developers assume that because I like a dark theme editor, I like dark mode on everything which is far from the truth. I actually prefer a normal, brighter, whiter theme for everything else. I don't set my macOS to dark mode, I don't set Chrome to a dark mode, or anything. Having a dark mode all the time would be like walking round your house with the lights off, or driving on the motorway at night with no lights on, because it's cool. Umm no it isn't, it's stupid and everyone should stop it right now.

Dark mode is like the new cool kid at school that offers you sweets, you might like it at first, then you start to feel sick and soon start to hate it until you realise that it's actually the school bully who will get you into a headlock and flush you down the toilet unless you abide by his rules.

I digress. I'm God, I create all the things and I see that it is good. And occasionally I do some developing.