Personal blog of Anton Ball
When using Nx to bundle a React library, a design system in this case, that has SVG (icons and logos), you may run into an error about ReactComponet not being exported. Here's how to extend RollUp's configuration that shipped with Nx to solve the problem. Nx supports SVG through SVGR - the problem is, when you bundle, the library throws the following error: Googling (as all developers do) lead me…
Here’s a great way to achieve scroll snapping that’s native to the browser - no JavaScript required. With CSS Scroll Snap you manage how scroll containers behave as a user scrolls. Let’s look at an example using slides with the goal of each slide taking up the browser’s viewport and snapping when in view. Example If you want to jump straight to the CodePen example, feel free. The code That’s not…
CSS Grid enables responsive elements with variable sized grid items all without media queries. You may have hit a problem though. After creating different sized grid items there are holes left in the layout where a grid item didn’t fit. The spec writers thought of this scenario and with grid-auto-flow, you utilise a packing algorithm to fill those holes with grid items as they’re found. Here’s the…
Continue reading Filling holes in CSS Grid with grid auto flow dense
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…
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…
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
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…
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…
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…
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
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…
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…
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
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…
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…
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…
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…
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…
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…
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…
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…
