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:

Error during bundle: Error: ‘ReactComponent’ is not exported by libs/library-name/src/lib/Icons/activity-log.svg
Bundle failed: library-name

Googling (as all developers do) lead me to a GitHub issue on the Nx repository, in particular this comment from alexworker23 detailing how to…


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:

The code

.container {
width: 100vw;
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.container > * {
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}

That’s not much code and because it’s native to the browser you…


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 CodePen example of the layout we are going to create. It’s a grid of card items with banner-like cards every seventh item.

The code for this layout can be boiled down to…


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. Consider Japanese manga, which has the reading style, right-to-left. Using this page from Naruto as an example:


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 Saga by Image Comics. Our goal? Wrap the text around the planet’s shape like what we see in the first panel:


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 inspiration for our layout, from Generations: Phoenix and Jean Grey by Marvel Comics.


Three balls of yarn group on the left with a trailing string going to the right
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, 7NEWS, tests, visual regression, delete everything command (we have all been there) and a bunch more. Some of those (delete everything) are rarely needed but starting mastheads are frequently used.

The idea was to show an…


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.


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 the world of Spider-man, not because it’s the only series to do this, but because it’s a favourite of mine!


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 easy, and Lighthouse scores provided the desired metrics. With that settled, how would this work in our pipeline?

Trigger a GitHub action

The first step is triggering an Action outside of GitHub. I hoped that because Microsoft…

Anton Ball

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store