DEV Community: Evan Winter

Publishing my own CSS utility library on NPM

Evan Winter — Tue, 10 Jan 2023 03:07:30 +0000

I'm writing this because this is something I find myself creating and re-creating and re-creating every time I start a new side project.

I just wanted a set of simple CSS utility classes based on a few sets of SCSS variables.

Something like this:

$spacing: (
  'xs': 0.25rem,
  'sm': 0.5rem,
  'md': 1rem,
  'lg': 2rem,
  'xl': 4rem,
);

@each $key, $value in $spacing {
  .m-#{$key} {
    margin: $value;
  }
  .p-#{$key} {
    padding: $value;
  }
}

$colors: (
  "black": rgb(33, 33, 33),
  "black-75": rgba(33, 33, 33, 0.75),
  "black-50": rgba(33, 33, 33, 0.5),
  "black-25": rgba(33, 33, 33, 0.25),
  "white": rgb(247, 247, 247),
  "white-75": rgba(247, 247, 247, 0.75),
  "white-50": rgba(247, 247, 247, 0.5),
  "white-25": rgba(247, 247, 247, 0.25),
);

@each $key, $value in $colors {
  .color-#{$key} {
    color: $value;
  }
  .background-#{$key} {
    background-color: $value;
  }
}

...which makes available classes like...

.m-sm { margin: 1rem; }
...
.pb-lg { padding-bottom: 2rem; } 
...
.color-black { color: rgb(33, 33, 33); }
...

I haven't jumped on the Tailwind train just yet. I've used Tachyons, but even that feels like more than I need, and my brain prefers the class names to be slightly more verbose.

I don't need much — usually just colors, spacing, and breakpoints. Things like m-<size> for margin: <size>; and background-<color> for background-color: <color>;.

I liked the idea of maintaining my own little design-system-like-thing that I can pull into projects to set a baseline that I'm super familiar with. And I was pleasantly surprised with how easy it was to accomplish!

The following is a walkthrough of the steps I followed to publish my package, @evanwinter/styles.

They are specific to publishing a scoped and public npm package, where the source code is written in SCSS.

Write your code

For a bare minimum example, create a folder called css-utilities or whatever you wanna call it.

Create a file called index.scss and put some code like the SCSS code above into it.

Create a `package.json`

Run the following code, replacing "" with your actual npm username.

For example, this was npm init --scope=@evanwinter for me because my username is "evanwinter".

npm init --scope=@<your-npm-username>

Follow the prompts, naming your package @<your-npm-username>/css-utilities (or whatever you named your folder, or really whatever you wanna name it).

The entry point ("main" in package.json) should point to your index.scss file — the "root" file of your project.

Add sass dependency

To compile your SCSS into CSS, install the sass package from NPM as a devDependency:

npm install -D sass

In your package.json, update the "scripts" entry to look like this:

...
"scripts": {
  "build": "sass index.scss dist/index.css --style=compressed"
},
...

This means when npm run build runs, it will convert index.scss into a CSS file and place it at dist/index.css.

Run a build

Run the following:

npm run build

You should now see a dist/ folder created, with an index.css file inside it, containing a compressed CSS version of your original index.scss file.

Publish it!

Now you'll just need to log in to npm from your terminal, like so:

npm login

Go to the URL it gives you, and log in to your npm account.

Then, if successful, return to your terminal and run the following to publish it:

npm publish --access public

And that's it!

Use it in another project

To use the CSS classes generated by your new utility library, simply import the library in a CSS file.

For example:

// my-project/index.scss
@import "@evanwinter/styles";

...
<p class="m-xs">Hello world</p>
...

TIL – Generate unique IDs with Crypto.randomUUID()

Evan Winter — Fri, 18 Feb 2022 15:18:04 +0000

Today I learned that you can generate UUIDs using the Web Cryptography API.

Here’s what it looks like:

let uuid = self.crypto.randomUUID();
console.log(uuid); // “36b8f84d-df4e-4d49-b662-bcde71a8764f”

MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

TIL – CSS inset property shorthand

Evan Winter — Wed, 16 Feb 2022 20:45:39 +0000

I recently learned about inset, a CSS shorthand for top, right, left, and bottom properties.

I've used it a lot as a more expressive way of saying, "this thing is full-screen".

For example, to make an element take over the entire screen:

.fullscreen {
  position: fixed;
  inset: 0;
}

It's effectively the same thing as:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// or, what I always used to do...

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/inset

TIL – List formatting with Intl.ListFormat

Evan Winter — Thu, 03 Feb 2022 04:09:00 +0000

Intl.ListFormat is an object for formatting lists into human-friendly language.

It takes an array of values and turn it into a comma-separated string list with an 'and', 'or' or '&' (and other languages' equivalents) before the last word.

Basic usage:

let fruit = ['Apples', 'Oranges', 'Bananas'];
let formatter = new Intl.ListFormat('en');
let result = formatter.format(fruit);
// Result:  'Apples, Oranges, and Bananas'

With 'or' instead of 'and':

let list = ['Chicago', 'Minneapolis', 'Madison'];
let formatter = new Intl.ListFormat('en', { type: 'disjunction' });
let result = `Are you in ${formatter.format(list)}?`;
// Result: 'Are you in Chicago, Minneapolis, or Madison?'

One downside is that you can't remove the Oxford comma, the one before 'and'/'or'/'&'.

MDN Docs: ('https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat')

Simple Page Transitions with SvelteKit

Evan Winter — Fri, 14 May 2021 19:09:54 +0000

Demo: https://sveltekit-page-transitions.netlify.app/
Source code: https://github.com/evanwinter/sveltekit-page-transitions

Overview

Create a <PageTransition /> component that does a simple fade-out-and-in transition (using Svelte's built-in transition directive) when a given prop changes.
Create a layout file, wrap its content with the <PageTransition /> component, and pass the current page's path to the component as a prop.

Step 1: Creating the `<PageTransition />` component

Create a component file at src/lib/components/PageTransition.svelte.

Import the fly transition from Svelte's built-in transition library, and setup an element that flys in and out. Add a delay to the in transition that's equal to or greater than the duration of the out transition (otherwise, the user will see them happen at the same time).

Export a variable called url and wrap the element inside of a #{key ...} block.

The contents of the block will be destroyed and recreated only when the value of url changes.

When that happens, the out transition will be executed immediately, and the in transition happen once the out transition finishes –– creating a "fade-out-and-back-in" effect.

<!-- PageTransition.svelte -->
<script>
  import { fly } from "svelte/transition";
  export let url = "";
  const pageTransitionDuration = 500;
</script>

{#key url}
  <div in:fly={{  x:-5, duration: pageTransitionDuration, delay: pageTransitionDuration }}
       out:fly={{ x: 5, duration: pageTransitionDuration }}>
    <slot />
  </div>
{/key}

Step 2: Using the `<PageTransition />` component

Create a layout file at src/routes/__layout.svelte.

<!-- __layout.svelte -->

<!-- 1. Using a `load` function, pass the current URL to the layout component as a prop -->
<script context="module">
  /** @type {import('@sveltejs/kit').Load} */
  export const load = async ({ url }) => ({ props: { url } });
</script>

<script>
  import PageTransition from "$lib/components/PageTransition.svelte";
  export let url;
</script>

<div>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>

  <!-- 2. Pass the `url` prop to the `PageTransition` component, causing it to re-render when the page changes -->
  <PageTransition {url}>
    <slot />
  </PageTransition>
</div>

The load function runs before the component is created or updated.

We store the current url in a variable and pass it to the PageTransition component as the url prop.

The PageTransition component will then destroy and recreate itself (transitioning out and back in) only when the user navigates to a new page.

Use Web Workers in a Gatsby project

Evan Winter — Fri, 30 Aug 2019 17:14:47 +0000

Update Feb. 2022 – This probably doesn't work anymore... I haven't worked on a Gatsby project in a while. I'll try to find some time to revisit this and get it working again.

Introduction

Have a CPU-intensive task that's blocking your UI? Do you want to offload it to a background thread using a Web Worker? Here's how it's done in the context of a Gatsby project.

I came across this approach in a GitHub issue, and decided to write it up here for anyone else looking for the same solution.

Install dependencies

Install workerize-loader:

npm install --save workerize-loader # or yarn add workerize-loader

Add workerize-loader to Webpack bundle

Now, we need to inject our workerize-loader configuration into the Webpack bundle generated by Gatsby.

To do so, add the following code to gatsby-node.js:

exports.onCreateWebpackConfig = ({ actions: { replaceWebpackConfig }, getConfig }) => {
  const config = getConfig()

  config.module.rules.push({
    test: /\.worker\.js$/,
    use: { loader: 'workerize-loader' }
  })

  config.output.globalObject = 'this'

  replaceWebpackConfig(config)
}

This code gets the current Webpack config generated for us by Gatsby, and adds the workerize-loader rule which finds files with a .worker suffix and processes them as Web Workers.

Create a worker file

Create a file with a .worker suffix, like so:

// expensive.worker.js
export function doExpensiveTask(num) {
  let result = 0
  for (let i = 0; i < Math.pow(num, 10); i++) {
    result += result / i
  }
  return result
}

Usage

Now, you can import it and use it like a normal function.

import MyWorker from "path/to/expensive.worker.js"

const result = MyWorker.doExpensiveTask(5)

Bonus: Async Example

// expensive-async.worker.js
export async function doExpensiveAsyncTask() {
  const url = "https://jsonplaceholder.typicode.com/todos/1"
  return await fetch(url)
}

import MyAsyncWorker from "path/to/expensive-async.worker.js"

const result = await MyAsyncWorker.doExpensiveAsyncTask()