DEV Community: Nico Bachner

Next.js + Splitbee

Nico Bachner — Sun, 24 Apr 2022 13:32:11 +0000

This guide is an extension and update of the Splitbee Next.js Proxy Documentation. I have added the Next.js Script Component to the guide, along with a few more quality-of-life improvements.

Next.js Config Setup
Creating the Analytics Component
Using the Analytics Component

Next.js Config Setup

First, we need to make use of Next.js Rewrites to point the local payload url to the Splitbee server.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/bee.js',
        destination: 'https://cdn.splitbee.io/sb.js',
      },
      {
        source: '/_hive/:slug',
        destination: 'https://hive.splitbee.io/:slug',
      },
    ]
  },
}

module.exports = nextConfig

Creating the Analytics Component

Next, we add a script tag that imports the Splitbee code. As per the original documentation:

data-api sets the endpoint for all tracking calls. We are using /_hive in this example.

src needs to point to the Splitbee JS file that is proxied through your servers. We are using /bee.js in this example. Feel free to adapt those paths & filenames.

We can abstract the logic into an Analytics component.

// components/Analytics.tsx
import Script from 'next/script'

export const Analytics: React.VFC = () =>
  typeof window != 'undefined' &&
  window.location.href.includes('[site_url]') ? (
    <Script src="/bee.js" data-api="/_hive" strategy="afterInteractive" />
  ) : null

Replace [site_url] in window.location.href.includes('[site_url]') with the name of your production deployment domain. This will prevent errors from popping up in the console during development.

You can also adjust the strategy attribute according to your needs (view the documentation for the available options). However, in most cases, you should stick to "afterInteractive".

Using the Analytics Component

Now all that remains is to import the Analytics component into the application – ideally in _app.tsx to avoid duplication.

// pages/_app.tsx
import { Analytics } from 'components/Analytics'

import type { AppProps } from 'next/app'

const App: React.VFC<AppProps> = ({ Component, pageProps }) => (
  <>
    <Analytics />
    <Component {...pageProps} />
  </>
)

export default App

Composable Tailwind

Nico Bachner — Sat, 19 Mar 2022 15:54:53 +0000

Tailwind CSS is one of the most popular Atomic CSS frameworks. The API is excellent, adding minimal mental overhead and no code bloat once set up. Their documentation is extensive, covering their API, as well as nearly all other use cases imaginable.However, there is a relatively common issue that is not mentioned – one that is inherent to all class-based styling solutions in JSX¹. This issue is composing styles.

Utility classes work great when there is a single source of truth for styling. However, once faced with more complex scenarios such as conditional styling or prop-based styling, one can easily end up with a mess of template literals:

<div
  className={`m-4 p-4 ${condition1 == true ? 'text-white' : 'text-black'} ${
    condition2 == true ? 'bg-white' : 'bg-black'
  }`}
/>

The above can quickly become unreadable.

Fortunately, there are other ways we can approach this. As I have previously proposed in my guide to CSS Modules, we can instead reach for string concatenation to compose classes. The above example would now look like this:

<div
  className={[
    'm-4 p-4',
    condition1 == true ? 'text-white' : 'text-black',
    condition2 == true ? 'bg-white' : 'bg-black',
  ].join(' ')}
/>

This approach brings a few clear benefits to the table:

More readable code
Grouping by source
Clear order of execution²

Let us apply this to a real-world example. We'll have a button with two variants (primary and secondary), with an escape hatch for the possibility of customising the button, should that be necessary (this happens more often than you would expect).

// Button.tsx
type ButtonProps = {
  variant: 'primary' | 'secondary'
  className?: string
}

export const Button: React.FC<ButtonProps> = ({
  children,
  property1,
  property2,
  className,
}) => (
  <button
    className={[
      'rounded border border-black px-8 py-4',
      variant == 'primary' ? 'bg-black' : 'bg-inherit',
      className,
    ].join(' ')}
  >
    {children}
  </button>
)

Now we can consume this button as expected:

<Button variant="primary" className="mt-4">
  {children}
</Button>

This is not an issue with CSS-in-JS styling solutions, such as Stitches. While they compile down to classes at the end of the day, the authoring is done as individual styles (in JS Object format), which are much easier to compose. ↩
What is meant by this is that the styles at the end override the styles at the beginning. ↩

CSS Scroll Snap

Nico Bachner — Sun, 13 Mar 2022 14:25:06 +0000

The CSS Scroll Snap property allows you to adjust the scrolling behaviour of the browser to better align with your content.

The desired effect can be seen here: scroll-snap-demo.vercel.app

The most straightforward way to achieve this is to have child elements that make up the page content, along with a parent element that wraps the content.

<div class="scroll-parent">
  <div class="scroll-child">
    <p>Child 1 Content</p>
  </div>
  <div class="scroll-child">
    <p>Child 2 Content</p>
  </div>
  <div class="scroll-child">
    <p>Child 3 Content</p>
  </div>
</div>

In the above example, .scroll-parent and .scroll-child are used. Next, you need to apply the following two sets of styles to the container and the child elements, respectively:

/* the container element */
.scroll-parent {
  /* make the container overflow vertically */
  height: 100vh;
  overflow-y: auto;

  /* define scroll snap behaviour */
  scroll-snap-type: y mandatory;
}

/* the child element */
.scroll-child {
  /* adjust based on desired behaviour */
  scroll-snap-align: start; /* start or center or end */

  /* add for a slideshow-like feel */
  height: 100vh;
}

You can view the source code on GitHub. Feel free to copy as much as you want.

In terms of edge cases, please bear in mind that you should exercise caution when modifying the scroll behaviour of your page, as it can lead to some unintended side effects, such as the user not being able to scroll to certain parts of your page, a behaviour which CSS Tricks explains well.

Styling with CSS Modules

Nico Bachner — Fri, 10 Sep 2021 12:17:37 +0000

CSS Modules are one of the most common methods to style React applications. Because they consist of plain CSS, they are easily understandable.

CSS Modules achieve what is referred to as weak scoping. Although styles are scoped to their respective components, they can be overridden by external styles. Depending on how you use this property, this is what makes CSS Modules so useful.

The usual approach to styling components using CSS Modules looks something like this:

The CSS is written in a .module.css file, and target class names.

/* Component.module.css */
.component {
  property-1: 'value-1';
  property-2: 'value-2';
}

These classes are then imported as a JS object – usually given the name styles. The imported object is has the class names defined in the .module.css file as keys.

// Component.tsx
import styles from './Component.module.css'

export const Component: React.FC = ({ children }) => (
  <div className={styles.component}>{children}</div>
)

// index.tsx
import { Component } from './Component'

export const ParentComponent: React.VFC = () => (
  <Component>Some Content</Component>
)

That's all well and good. But what if you want to be able to adjust the styles from outside the component? Now things start to get tricky.

Fortunately, CSS Module imports are regular JavaScript objects. That means we can manipulate them as we usually would. One possible manipulation that is especially useful for us is string indexing¹. It allows us to choose which style to apply based on a string input.

If we apply string indexing to the previous example, we get the following:

/* Component.module.css */
.variant-1 {
  property-1: 'value-1-1';
  property-2: 'value-2-1';
}

.variant-2 {
  property-1: 'value-1-2';
  property-2: 'value-2-2';
}

.variant-3 {
  property-1: 'value-1-3';
  property-2: 'value-2-3';
}

// Component.tsx
import styles from './Component.module.css'

type ComponentProps = {
  variant: '1' | '2' | '3'
}

export const Component: React.FC<ComponentProps> = ({ children, variant }) => (
  <div className={styles[`variant-${variant}`]}>{children}</div>
)

// index.tsx
import { Component } from './Component'

export const ParentComponent: React.VFC = () => (
  <Component variant="1">Some Content</Component>
)

We now have the ability to change the styling of the component through one of its props.

But why stop there? What about styling through multiple props?

It is possible, and can be achieved through string concatenation². Applied to our example, it looks like so:

/* Component.module.css */
.property1-1 {
  property-1: 'value-1-1';
}
.property2-1 {
  property-2: 'value-2-1';
}

.property1-2 {
  property-1: 'value-1-2';
}
.property2-2 {
  property-2: 'value-2-2';
}

.property1-3 {
  property-1: 'value-1-3';
}
.property2-3 {
  property-2: 'value-2-3';
}

// Component.tsx
import styles from './Component.module.css'

type ComponentProps = {
  property1: '1' | '2' | '3'
  property2: '1' | '2' | '3'
}

export const Component: React.FC<ComponentProps> = ({
  children,
  property1,
  property2,
}) => (
  <div
    className={[
      styles[`property1-${property1}`],
      styles[`property1-${property2}`],
    ].join(' ')}
  >
    {children}
  </div>
)

// index.tsx
import { Component } from './Component'

export const ParentComponent: React.VFC = () => (
  <Component property1="2" property2="3">
    Some Content
  </Component>
)

If distilling all component styling into props feels too limiting, there exists a solution. It is possible to give a component custom styles by passing it a className prop:

/* Component.module.css */

/* omitted for brevity — same as the above example */

// Component.tsx
import styles from './Component.module.css'

type ComponentProps = {
  property1: '1' | '2' | '3'
  property2: '1' | '2' | '3'
  className?: string
}

export const Component: React.FC<ComponentProps> = ({
  children,
  property1,
  property2,
  className,
}) => (
  <div
    className={[
      styles[`property1-${property1}`],
      styles[`property1-${property2}`],
      className,
    ].join(' ')}
  >
    {children}
  </div>
)

// index.tsx
import styles from './ParentComponent.module.css'

import { Component } from './Component'

export const ParentComponent: React.VFC = () => (
  <Component property1="2" property2="3" className={styles.component}>
    Some Content
  </Component>
)

One thing to look out for is the whitespace as the argument of .join(). Without it, the class names would be concatenated into one long name which the browser cannot recognise. Adding the space separates the class names into recognisable tokens.

Notice how have full control over how fine-grain the control should be? While the first example only had one prop (the variant), the second had a prop for each individual style property (property1 and property2). The ability to choose the level of abstraction can be useful in many situations, such as architecting a design system.

String indexing: The accessing a property of an object using the corresponding string ↩
String concatenation: The joining of two strings together into one large string ↩

SvelteKit Theme Switch

Nico Bachner — Wed, 19 May 2021 21:47:50 +0000

When adding dark mode to my new SvelteKit project, I ran into a few issues when creating the theme switch. In this guide, I would like to share the solution I came up with.

Before we begin, I'd like to note that this guide uses TypeScript. TypeScript (TS) is JavaScript with types¹, so if you are using regular JavaScript (JS), you can skip the type definitions.

Types

Note: this step is not necessary for those using JS instead of TS, and is also optional (but recommended) for those using TS

The first thing we'll do is to define our themes. We can do this in the global type definitions (src/global.d.ts). That way, we'll have access to the types throughout our project.

// src/global.d.ts
type Theme = 'system' | 'light' | 'dark'

What we're doing here is declaring a global type called Theme, which we can access from anywhere in our project. This means that if we declare a variables type to be Theme, then we can only assign the values 'system', 'light', or 'dark' to it.

Apart from 'system', you can choose your theme values freely. You're also not limited to only two, so experiment away!

The 'system' value here is important. We want to greet the user with their preferred theme when they first visit the site. Therefore, we want the theme to correspond to their operating system's color scheme by default.

Svelte Store

Now that we've got type definitions out of the way, we can move on to the heart of the theme switch: the theme store.

The theme store is a Svelte Store. To create it, we use the writable function provided by Svelte.

// src/lib/stores.ts
import { writable } from 'svelte/store'

const theme = writable('system')

export { theme }

Here, we're creating a Svelte Store called theme and assigning it the default value of 'system'. Again, it is important that 'system' is the default so that we respect the user's preferences.

Theme Switch Component

We can now use the Svelte Store we created in our theme switch component.

<!-- src/lib/components/ThemeSwitch.svelte -->
<script lang="ts">
  import { theme } from '$lib/stores'
</script>

<select bind:value="{$theme}">
  <option value="system">System</option>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
</select>

There's a lot going on here, so a quick walkthrough is in order.

We first import theme from '$lib/stores'. $lib/stores is a path alias for src/lib/stores.svelte, the file in which we created our theme Svelte Store.

We now want to modify the value of theme. We could do this by calling theme.set() (more info in the writable stores documentation). However, there is an easier way: using auto-subscriptions.

Since $theme is mutable², we use the Svelte binding bind:value to get theme to track the changes to the value of the selected option. The browser does most of the heavy lifting in this case, since all we need to do is read the value attribute.

Style Switcher

We now have a Svelte Store that stores the theme value, and a theme switch component that updates the theme value. All that remains is the functionality for changing the theme based on the theme value.

The way I went about this is swapping stylesheets in the head of the generated document.

<!-- src/routes/__layout.svelte -->
<script lang="ts">
  import { theme } from '$lib/stores'
</script>

<svelte:head>
  <meta name="color-scheme" content={$theme == 'system' ? 'light dark' :
  $theme}/> <link rel="stylesheet" href={`/theme/${$theme}.css`} />
</svelte:head>

<slot />

Here, we are dynamically loading a CSS stylesheet based on the current theme value. For example, on page load, the previous code will generate the following:

<head>
  <meta name="color-scheme" content="light dark" />
  <link rel="stylesheet" href="/theme/system.css" />
</head>

And if the user then changes the theme to 'light', the head changes accordingly:

<head>
  <meta name="color-scheme" content="light dark" />
  <link rel="stylesheet" href="/theme/light.css" />
</head>

Theme Styles

The only thing that remains is to define the styles of our project. We can do this anywhere in the static/ directory, as long as we remember to adjust the path in the stylesheet link accordingly.

Structure

If we follow the path convention I set up, we get the following structure:

static
└── theme
    ├── system.css
    ├── light.css
    └── dark.css

Example

In light.css and dark.css (or whatever you choose to call you themes), we style our project accordingly. An example³:

/* light.css */
:root {
  --color-lightest: hsl(0deg, 0%, 100%);
  --color-lighter: hsl(0deg, 0%, 80%);
  --color-light: hsl(0deg, 0%, 60%);
  --color-strong: hsl(0deg, 0%, 40%);
  --color-stronger: hsl(0deg, 0%, 20%);
  --color-strongest: hsl(0deg, 0%, 0%);
}

System Preferences

While light.css and dark.css are straightforward, the file system.css requires more attention. This is because we need to think about the user's system preferences. While the prefers-color-scheme media query makes accessing the user's preference a straightforward process, we need to keep in mind that the browser provides only two predefined choices, light and dark. Hence we need to style accordingly:

/* system.css */
@media (prefers-color-scheme: light) {
  :root {
    --color-lightest: hsl(0deg, 0%, 100%);
    --color-lighter: hsl(0deg, 0%, 80%);
    --color-light: hsl(0deg, 0%, 60%);
    --color-strong: hsl(0deg, 0%, 40%);
    --color-stronger: hsl(0deg, 0%, 20%);
    --color-strongest: hsl(0deg, 0%, 0%);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-lightest: hsl(0deg, 0%, 0%);
    --color-lighter: hsl(0deg, 0%, 20%);
    --color-light: hsl(0deg, 0%, 40%);
    --color-strong: hsl(0deg, 0%, 60%);
    --color-stronger: hsl(0deg, 0%, 80%);
    --color-strongest: hsl(0deg, 0%, 100%);
  }
}

Conclusion

That's it! You now have a working theme switch.

If you want to further improve your theme switch, you could store the selected value in localStorage. Then, when the user selects a particular theme, the same theme will also be loaded the next time they visit the page.

Types in TypeScript explicitly declare the type of a variable. TypeScript also supports the definition of custom types, called type aliases. These can be manipulated similarly to JavaScript variables and imported from external files. ↩
If a value is mutable, that means it can be changed by assigning a new value to it. In JavaScript, for example, let and var create mutable variables, whereas const creates immutable ones. ↩
This guide uses CSS Custom Properties (a.k.a. CSS Variables) for theming, but the solution works with any theming method, as long as the styles are defined inside the files we are working with. ↩

SvelteKit is now Open Source

Nico Bachner — Sat, 13 Mar 2021 14:26:02 +0000

As of yesterday (March 12), SvelteKit is Open Source. Hooray!

While not officially in public beta yet, the GitHub repository is now public, and I encourage anyone reading this to check it out. Give it a star while you're at it.

There are obviously still many wrinkles that need to be ironed out before the release of the public beta, such as getting TypeScript working again, but now that the source repository has been opened up to the general public, us Sveltelowda will most likely resolve these major bugs soon.

The reason behind the early release is also rather unexpected and even quite entertaining.

If you want to take SvelteKit for a spin, you can get started quickly with npm.

npm init svelte@next

You will run into the following notice, but don't be discouraged; you can still experiment with it freely. Just don't use it for anything serious yet.

█████████  ███████████    ███████    ███████████  ███
███░░░░░███░█░░░███░░░█  ███░░░░░███ ░░███░░░░░███░███
░███    ░░░ ░   ░███  ░  ███     ░░███ ░███    ░███░███
░░█████████     ░███    ░███      ░███ ░██████████ ░███
░░░░░░░░███    ░███    ░███      ░███ ░███░░░░░░  ░███
███    ░███    ░███    ░░███     ███  ░███        ░░░
░░█████████     █████    ░░░███████░   █████        ███
░░░░░░░░░     ░░░░░       ░░░░░░░    ░░░░░        ░░░

Pump the brakes! A little disclaimer...

svelte@next is not ready for use yet. It definitely can't
run your apps, and it might not run at all.

We haven't yet started accepting community contributions,
and we don't need people to start raising issues yet.

Given these warnings, please feel free to experiment, but
you're on your own for now. We'll have something to show
soon.

When prompted to use TypeScript in Components, you should type N since the development server will still crash if you use TypeScript. (Once https://github.com/sveltejs/kit/issues/424 is fixed, TypeScript should hopefully become useable again.)

? Use TypeScript in components? › (y/N)

Now you'll run into three CSS options. I use vanilla CSS, but as far as I know, all three currently work.

? What do you want to use for writing Styles in Svelte components? › - Use arrow-keys. Return to submit.
❯   CSS
    Less
    SCSS

To finish, you can now install the dependencies:

npm i

That's it for the setup.

To see the starter in action, start the development server.

npm run dev

Now, you can visit localhost:3000, where you'll be greeted with a cute little counter app.

There are a great many things you can do with the starter. SvelteKit is only a toolkit for extra features beyond Svelte, so you can do anything you are able to do in regular Svelte, and more. The additional features are not yet well documented, if at all, so it is still the Wild West out there. What documentation exists can be found in the GitHub monorepo.

In the future, though, everything SvelteKit will be available at kit.svelte.dev, according to Rich Harris in this GitHub issue.

If you feel like you might need a refresh on Svelte, or if you want to check out new features, the Official Svelte Guide is a great place to do so. The api docs are also a fantastic resource.

I must say, I'm really looking forward to seeing how SvelteKit will evolve in the future.

By the way, the cover photo is by Achim Vedam.