Personal blog of Anton Ball

Superhero Layout - internationalisation

We made it to the sixth and final part of the CSS Grid Superhero Layout series. Phew. In part six we look at how CSS Grid supports internationalization (i11n). It may surprise you how much we get out of the box with CSS Grid when it comes to different reading styles. All of the layouts we have played with throughout the article series have a western layout. Reading top-to-bottom, left-to-right…

Continue reading Superhero Layout - internationalisation

Superhero Layout - CSS Shapes for text

Welcome to part five of the CSS Grid Superhero Layout series. In this fifth part, we utilise CSS Shapes to make the text flow around shapes. There are similarities to part four where we used geometric shapes to shape our panels, we will have our text flowing in unique and interesting ways. Let’s get into it. Each post in the series has started with inspiration. Part five’s inspiration arrives via…

Continue reading Superhero Layout - CSS Shapes for text

Superhero Layout - Combining CSS Grid and CSS Shapes

Welcome to part four of the CSS Grid Layout series! In this part we combine the techniques from our previous posts with CSS Shapes to create a comic book layout with uniquely shaped panels. If you want to, you can jump straight to the CodePen demo. If you need a refresher on the previous posts take a look at staggered panels, layering panels and CSS Subgrid. Let’s get into it. Here's the…

Continue reading Superhero Layout - Combining CSS Grid and CSS Shapes

Simplifying Yarn Start Commands

Photo by Tara Evans on Unsplash We wanted our projects to be quick to install and begin development. The goal was to need nothing more than running yarn and yarn start. This was tricky with our mono repo though. There were a lot of commands to choose from. Here’s how we simplified starting our mono repo using a couple of open-source tools. The possible commands covered starting The West, PerthNow…

Continue reading Simplifying Yarn Start Commands

Fix duplicate SVG ID collision in React

Building a component library within a JavaScript library, such as React or Vue, often means having a lot of SVG components built in isolation. They represent application icons, brand logos and background images. We had a little reminder about the importance of unique IDs within a HTML document and our SVG icons recently. Let's use a gradient square to represent an icon component. A workflow for…

Continue reading Fix duplicate SVG ID collision in React

Superhero Layout - CSS Layering Panels

Feel free to jump straight to the CodePen example. Welcome to part three of the Superhero Layout series. We have looked at the golden age of comics and staggered panels in part one, then CSS Subgrid and creating merged panels in part two. The next evolution came in the form of layering panels. Artists utilised overlapping panels to create depth, action and detail in comic storytelling. We revisit…

Continue reading Superhero Layout - CSS Layering Panels

Trigger GitHub actions with Azure DevOps Pipelines

DDDPerth’s website team are in the midst of a site refresh. There are many goals guiding the refresh but a significant one was gaining insight, and improving, our performance and accessibility. A convenient method to gather these metrics is an automated step within the CD process. There’s a few services to choose from but we opted for Lighthouse-CI. It has a GitHub Action, making setup quick and…

Continue reading Trigger GitHub actions with Azure DevOps Pipelines

Superhero Layout - CSS Subgrid

Welcome to the second article in the Superhero Layout CSS Grid series. The first article looked at creating staggered CSS Grids, based on the gold, silver and bronze age of comics. This time we look at the Watchmen series and how CSS Subgrid can enable us to recreate some unique aspects of its creation. Watchmen was known for adhering to a strict 9 panel grid layout (3 rows and 3 columns). Using…

Continue reading Superhero Layout - CSS Subgrid

Superhero Layout - Staggered CSS Grid

Comic books, design and web development have all been enjoyable aspects of my life. Not always in that order, it depends on how debugging is going! I wanted to sink into CSS Grid. I decided to combine these passions and recreate famous comic book layouts. The result? A collection of layouts based on Action Comics, Watchmen through to Spider-man and Saga. Each comic provided creative inspiration…

Continue reading Superhero Layout - Staggered CSS Grid

Handle empty results in a Gatsby source plug-in

Fenders’ website uses the GatsbyJS static site generator. It’s small but has important information, such as joining the Slack channel, our Code of Conduct and listing upcoming events. Meetup hosts Fenders’ events but the team added events to the site by amending a local variable. In the interest of automating this process, we wanted to have Gatsby query events itself. The site would be more up-to…

Continue reading Handle empty results in a Gatsby source plug-in

Saving history in Git commit messages

No matter the size of your project, be it side project or large-scale enterprise application, it's highly likely you're using Git for version control. When it comes time to commit our feature branch we don't always put the most effort into the commit message. It can be the last step in the process and we want to get the code up for review and shipped. Take a look at this commit message to my blog…

Continue reading Saving history in Git commit messages

CSS Subgrid Illustrated Guide

If code examples are all you need, check out the Codepen. If you have ever heard the saying “This is the best thing since sliced bread” and were wondering how that could be used when talking about layout on the web, it would be CSS Grid. Grid is the most powerful layout tool we have and it’s transforming how we approach web layout. A common layout pattern is multiple cards along a row (Figure…

Continue reading CSS Subgrid Illustrated Guide

Getting started with JSON React Layouts

Photo by Gia Oris on Unsplash When building React applications that function more like websites than web applications it’s possible to become tangled in a mess of higher-order components, Hooks and helper functions that are required for every page. JSON React Layouts is a framework that aims to alleviate issues associated with page based sites. It does this by enabling you to solve cross cutting…

Continue reading Getting started with JSON React Layouts

Getting my Details ducks in a row

Photo by JOSHUA COLEMAN on Unsplash The Details element is great for creating disclosure widgets. You gain show/hide functionality without JavaScript, plus the accessibility benefits of native HTML elements, and it can be styled, except I ran into a quirk in Safari. This is what I found. When using the Details and Summary elements I needed to hide the arrow, instead displaying an icon to the right…

Continue reading Getting my Details ducks in a row

Getting Started with Image Optimisation

Recently I gave a Getting Started with Image Optimisation talk at Perth’s Junior Developer meetup. Check Junior Dev out if you are in the area. It’s difficult to remember everything during a presentation, so to help out, I’m publishing the main points from my talk in this article as a quick reference guide, not just for attendees but everyone curious about image optimisation. There were four areas…

Continue reading Getting Started with Image Optimisation

Planning to Learn

Learning new skills can be a difficult, daunting task. Especially knowing where to start when you haven’t ventured into a topic before. How do you normally begin the learning process? Do you Google and see what you can find? Tweet for ideas? Search for others who have gone down this route before or pickup a book? That initial phase of learning new topics can feel frustrating and inefficient. At…

Continue reading Planning to Learn

TypeScript Tidbit: Const enums

Enums are a useful feature of TypeScript that allow you to define a set of named constants. A use case for enums, that I’m going to borrow straight from TypeScript’s documentation, is defining a direction: After running the above through the TypeScript compiler you’ll end up with the following JavaScript: There’s a bit to digest but the purpose of this post isn’t explaining how compiled enums work…

Continue reading TypeScript Tidbit: Const enums

CSS Property Ordering

Our office conversations are highly academic. Example: is it better to have a bat or a knife during the zombie apocalypse? (It’s bat.) Occasionally we let our hair down and discuss programming, like how best to order CSS Properties. Now, this is in the realm of tabs vs spaces, but fun to explore the two prominent opinions, alphabetical ordering vs property ordering. Personally, I prefer property…

Continue reading CSS Property Ordering