Anton Ball – Medium

Sep 15, 2021

Extending Rollup configuration for NX

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…

2 min read

Jan 19, 2021

Scroll snap with CSS

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. …

CSS

2 min read

CSS

2 min read

Nov 26, 2020

Filling holes in CSS Grid with auto flow dense

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. …

CSS

3 min read

Filling holes in CSS Grid with auto flow dense

CSS

3 min read

Oct 19, 2020

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). …

CSS

4 min read

CSS

4 min read

Published in

Level Up Coding

·Sep 19, 2020

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…

CSS

4 min read

CSS

4 min read

Published in

Level Up Coding

·Aug 5, 2020

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…

CSS

6 min read

Super Hero Layout — Combining CSS Grid and CSS Shapes

CSS

6 min read

Published in

Pixel and Ink

·Jul 13, 2020

Simplifying Yarn Start Commands

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. …

NPM

2 min read

NPM

2 min read

Published in

Pixel and Ink

·Jun 18, 2020

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. …

SVG

3 min read

SVG

3 min read

May 19, 2020

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…

CSS

6 min read

CSS

6 min read

Published in

The Startup

·Apr 13, 2020

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…

Azure Devops

3 min read

Azure Devops

3 min read