there’s no place like code

You might not need TypeScript enums #javascript #typescript #enum

Mon, 24 Feb 2025 00:00:00 +0000

With Node.js learning to ignore TypeScript annotations¹ and TypeScript getting an option that disallows runtime semantics², let’s re–evaluate if we need the most commonly used TypeScript runtime features: enums.

(Spoiler: no)

Let’s look at a common example of an enum:

enum Things {
  FOO = 'foo',
  BAR = 'bar',
  ZAR = 'zar',
}

Since values are human readable, we can use TypeScript union of strings instead:

type Thing = 'foo' | 'bar' | 'zar';

Then you can use strings for values:

let someThing: Thing = 'foo';

function logThing (thing: Thing) {
  console.log(thing);
}

logThing('bar');

List values

Sometimes it’s useful to have access to all possible values at runtime. For this, we can list them in an array and use that as source of truth for types³:

const THINGS = Object.freeze(['foo', 'bar', 'zar'] as const;)

type Thing = (typeof THINGS)[number];
// ↑ this evaluates to: type Thing = "foo" | "bar" | "zar"

as const makes TypeScript to see it as immutable (instead of Array<string>)
Object.freeze prevents from changing the array by accident at runtime

Now you can e.g. present user with a list of all options to choose from (example using lit-html):

html`<select>
  ${THINGS.map(thing => html`<option>${thing}</option>`)}
</select>`

… or sanitise user input:

function sanitise<Type>(
  dirtyValue: any,
  allowedValues: Readonly<Array<Type>>,
  fallbackValue: Type | undefined
): Type {
  if (allowedValues.includes(dirtyValue as Type)) {
    return dirtyValue as Type;
  } else {
    const error = new Error(`Unrecognised value: ${dirtyValue}`);
    if (fallbackValue === undefined) {
      throw error;
    } else {
      console.warn(error);
      return fallbackValue;
    }
  }
}

const dirtyThing = new URLSearchParams(window.location.search).get('thing');
const cleanThing = sanitise<Thing>(dirtyThing, THINGS, THINGS[0]);

Mapping

To map values to something else, use Record to make sure all values are included as keys (an no other keys are present):

const thingToLabelMap: Record<Thing, string> = {
  foo: 'Felicity',
  bar: 'Bartholomew',
  zar: 'Zahary',
}
const label = thingToLabelMap[thing];

Try it out in TypeScript playground

Switch

To make sure all values are handled in a switch statement, you can either rely on a EsLint switch-exhaustiveness-check rule, or include default case with satisfies never:

switch (thing)
{
  case 'foo':
    console.debug('foo?');
    break;
  case 'bar':
    console.debug('bar.');
    break;
  case 'zar':
    console.debug('zar!');
    break;
  default:
    // This will raise a TS error, if we add a new value
    // without adding a case
    thing satisfies never;
}

Try it out in TypeScript playground

--experimental-strip-types flag introduced in Node.js 23.0.0 and no flag needed since 23.6.0 ↩
enableSyntaxOnly option introduced in TypeScript 5.8 beta ↩
I’d put array definition in one location (e.g. src/consts/…) and types in another (e.g. src/types/…), but you do you. ↩

Project–specific tmux sessions #tmux #shell

Wed, 03 Jul 2024 00:00:00 +0000

The Problem

If you use a terminal multiplexer tmux, you might find yourself re–creating the same pane layout every time you want to start working on project. There are some tools that allows you to configure tmux sessions, like tmuxinator, but they never felt natural to me – why would I want to use YAML config file, when tmux has it’s own config syntax?

The Solution

Let’s put tmux.conf files in project directories.

Set up Git globally to ignore tmux.conf files in the root of repository.

Add this to ~/.config/git/ignore (create the directory and the file if it doesn’t exist):
```
/tmux.conf
```
Load tmux.conf from current directory, when starting a new tmux session.

Add this to your ~/.config/tmux/tmux.conf (or ~/.tmux.conf, if you prefer):
```
if-shell -b '[ -e ./tmux.conf ]' {
  set-hook -g after-new-session 'source-file -q ./tmux.conf'
}
```
If you have tmux, running, re–read the config file:
```
tmux source-file ~/.config/tmux/tmux.conf
```

Et voilà!

Examples

The one I use most often:

rename-session 'project-foo'

# Create short pane at the top of the window
split-window -vbdl 6
# Run npm install and `dev` npm script on the top pane
send -t "{previous}" "npm install && npm run --if-present dev" Enter
# Fetch latest changes in the main pane
send "git fetch" Enter

Here’s a much more involved example with multiple panes on top of the screen:

rename-session 'project-bar'

# | watch+build | serve | api |
# |-------------|-------|-----|
# | main                      |

split-window -vbl10 ; send 'npm install && nodemon -e "npm run build"' Enter
split-window -h     ; send 'npm run serve' Enter
split-window -h     ; send 'cd ../api && npm install && npm run dev' Enter

select-layout -E

select-pane -t'{next}'
send 'git fetch' Enter

Or even more complex one that waits for npm install to finish before running things in other panes:

rename-session 'project-zar'
set-environment -g SOME_IP_ENV_VAR '10.13.32.3'

# | dev | storybook | api |
# |-----------------------|
# | main                  |

# dev
split-window -vbl10

# storybook
split-window -h

send -t 0 '\
  npm install; \
  tmux send -t0 "npm run dev " Enter; \
  tmux send -t1 "npm run storybook --no-open" Enter; \
' Enter

# api
split-window -h
select-pane -t'{next}'
send 'cd ../api' Enter
send 'git fetch' Enter
send 'npm install && npm run dev' Enter

select-layout -E

# main working area
select-pane -t'{next}'
send 'git fetch' Enter

Default configuration

You can go very complex, but most of the time you will probably want to use the same config for most of your projects. But why copy the same tmux.conf to each directory?

Let’s expand our after-new-sesssion hook in tmux.conf. If ./tmux.conf is not found, it will detect if project is using npm or yarn and run run dev npm script in the top pane. While we are here, let’s use current directory name as a session name.

set-hook -g after-new-session '\
    run-shell "tmux rename-session \"$( basename \"#{pane_current_path}\" \)\""; \
    \
    if-shell -b "[ -e ./tmux.conf ]" { \
        source-file ./tmux.conf; \
    } { \
        if-shell -b "[ -e ./yarn.lock ]" { \
            split-window -vbdl 6; \
            send -t "{previous}" "yarn install && yarn run --if-present dev" Enter; \
            send "git fetch" Enter; \
        } { \
            if-shell -b "[ -e ./package.json ]" { \
                split-window -vbdl 6; \
                send -t "{previous}" "npm install && npm run --if-present dev" Enter; \
                send "git fetch" Enter; \
            }; \
        }; \
    }; \
'

Hyphenate headings as a last resort #CSS

Fri, 20 Jan 2023 00:00:00 +0000

Before I forgot about blogging for nine years in 2012, my last post here was about hyphenation. Surely things progressed since then, right?

Right?

(Not really.)

Need for hyphenation

Most of the time there is no need for hyphenation and text looks fine aligned to the ~~left~~ start¹. Where hyphenation comes in really handy is headings. It’s easy to end up with a heading set in a relatively large size and somebody will at some point put a very–long–word™ there. Then browsers with narrow viewport will start adding horizontal scrolling or – gasp! – your whole page will be shrunk to accommodate the offending word.

Ok. Let’s start putting some long words in narrow containers and see what happens.

By default words are not hyphenated and just stick out of the container.

Uncharacteristically and also extraordinarily long English words.

`hyphens: auto`

One would hope that adding hyphens: auto would make things just work, but there are a few problems with it:

Uncharacteristically and also extraordinarily long English words.

Uncharacteristically is not hyphenated. What gives?

Turns out currently both Chrome and Firefox disable hyphenation of capitalised words². This is to avoid performing it on proper nouns. Good intention, but it significantly limits usage of hyphenation in headings, which usually starts with a capitalised word or even have all of them capitalised.
extraordinarily is short enough to fit in a line, but gets hyphenated.

Browsers are eager to hyphenate. In our case we want to hyphenate words only as a last resort, when whole word doesn’t fit in a line – that’s currently not possible with CSS.

We could use hyphenate-limit-chars to make the situation better to some extend, but it’s not perfect and it’s only supported by Chrome.
Not visible in this example, but browser needs to support hyphenation for your language. Check out hyphens browser compatibility table on MDN – support for non–English is spotty to seat the least (👏 for Firefox).

Soft hyphens

You can instruct browsers of places where words can be broken using  HTML entity (or U-00AD Soft Hyphen character). This takes care of capitalised words. As a bonus it also brings hyphenation to browsers that don’t support hyphens: auto (at all or in your language).

Alas, hyphenation is still performed too eagerly. While we like that Uncharacteristically is broken into two lines, since it’s longer than our container, extraordinarily is not and could be carried over to a next line.

Uncharacteristically and also extraordinarily long English words.

The solution

Let’s try to address the shortcomings of previous attempts with what we have at our disposal in 2023.

You will not like it.

In addition to adding soft hyphens, wrap each word in an element with display: inline-block.

This will prefer carrying whole block to the next line before hyphenating. Effectively only breaking the word as a last resort – when it doesn’t fit in the line on it’s own.

Uncharacteristically and also extraordinarily long English words.

Here’s a JavaScript snippet to process your headings (you are a responsible adult and will do it only on server side, right?):

import { hyphenateSync } from 'hyphens/en';

hyphenateSync(text.trim())
  .split(/\s+/)
  .map(word => `<span class=word>${word}</span>`)
  .join(' ');

Note that this will increase weight of your HTML, so probably don’t run it everywhere. I’d only do it on headings and other elements that will be displayed in a bigger font.

This solution definitely has a distinct ’90s smell all over it and makes you feel dirty when implementing it, but it does work.

The future

There is a discussion on CSS WG about allowing hyphenating capitalised words. With this and hyphenate-limit-chars we’ll hopefully get a reasonable CSS–only solution in the future.

WebDev advent calendars 2022

Fri, 09 Dec 2022 00:00:00 +0000

Last year I tried to follow too many advent calendars, so naturally I more or less stopped reading them after a week or so. This year I’m limiting myself up three, maybe four:

Web Performance Calendar never disappoints. Topic range from basics all the way to nerdy, in depth dive–ins.
I did not follow HTMHell Advent calendar before, but it seems to be something right up my alley.
I’m not particularly a React fan, but doing most of my work in it, I also subscribed to React Holiday.
12 Days of Web starts at 13th of December. Let’s see if I’ll be still reading those by then. 😅

Mastodon misconceptions #fediverse

Tue, 06 Dec 2022 00:00:00 +0000

I’ve collected some of the things I found myself explaining to people in recent days.

Checking Mastodon out is too much of a hassle. I don’t even know if any of my friends are on it

Use fedi finder to check out how many people you follow on Twitter moved. It will also show what instances they are on. After you create an account I’d recommend using movestodon, because it allows you to follow people right from the page, instead of having to import a CSV file.

When you move, leave your mastodon handle in your Twitter description, user name or pinned tweet, so people can find you using these tools.

It’s hard to choose what instance to create account on. I don’t want to be stuck with something

You can move your account to a different insurance later. Your followers will be redirected to the new address. Unfortunately, your toots will not be moved.

“Toot” is a silly name

Agreed. But so is “tweet”, if you think about it. Also, some clients don’t use it.

How does moderation work (a.k.a. will there be nazis?)

Moderation is done on per–instance basis. That’s important to remember for few reasons:

Ideally choose an instance run by people you trust.
If you don’t feel good on your instance, don’t abandon Mastodon just yet — try finding one with admins that share your values.
Remember that many instances are run by people out of their pockets and there’s no advertising there. Look for ways to support them on insurances’ “About” pages, if you can afford it.
Everybody can host their own insurance, so there surely already are very bad™️ ones out there. There are block lists of both accounts and whole instances and they can be shared between instance admins. Hopefully this will make it easier to keep things under control.

Fediverse is just another name for Mastodon

Mastodon is built on top of open standards like Activity Pub and is not the only one using it. There’s e.g. Instagram–like PixelFed. Fediverse’s promise is that you can follow people not only from other Mastodon instances, but also from other “things”. Some already established sites may join the fun: Tumblr will implement Activity Pub and Flickr is thinking about fediverse as well.

Mastodon is also not the first one of its kind. There’s a nice thread about the history.

I don’t like Twitter/Mastodon, because it should be casual, writing about nonsense, but it stays in the internet forever. I’ll stick with Instagram Stories/TikTok

You are in luck. There’s an option in Mastodon to let your toots be deleted after a given time.

So, there are different clients?

Sure. Unlike Twitter, which didn’t really like people using non–official clients there’s healthy ecosystem for Mastodon.

The web site of your instance is installable as PWA. Because of Apple iOS browser ban you won’t get notifications on iOS, but maybe you don’t mind.

Other clients lack some of the features, e.g. DM or local timeline sections or bookmarks, viewing your started toots, but offer logging in with multiple instances/accounts and may do a better job of remembering position where scrolling your timeline.

Some of the more popular ones:

~~Pinafore~~ Semaphore¹ is a different PWA. It has a simple and highly accessible interface.
Elk is also a PWA with strong Twitter vibes.
Official Mastodon client is available for both Android and iOS
Tusky for Android
Metatext for iOS

Pinafore’s original author stopped maintaining it. Project got forked as Semaphore. ↩

Set up different work e–mail in git by directory #git

Sun, 29 Aug 2021 00:00:00 +0000

For some time now git can include additional config files depending on directory you are in (since version 2.13.0 to be precise). Most common use case for this is setting your work e–mail for repositories checked out in one directory (e.g. ~/src/@example-inc) while keeping your private e–mail for the rest of the projects.

There’s a good chance you currently have something similar to this in your ~/.gitconfig:

[user]
    name = "Test “The Face” McTestface"
    email = test@example.net
    # Hopefully you also have a GPG key for the e–mail.
    # Ignore signingKey key here and later if you don’t.
    signingKey = "0123456789ABCDEF"

If you want to use a different e–mail for work stuff, you need to remember to set it every time you create or clone a repository:

git config user.name "Test McTestface"
git config user.email "test.mctestface@example.com"
git config user.signingKey "FEDCBA9876543210"

No more!

You can add a conditional include to your ~/.gitconfig:

[user]
    name = "Test “The Face” McTestface"
    email = test@example.net
    signingKey = "0123456789ABCDEF"

[includeIf "gitdir:~/src/@example-inc"]
    path = ./.gitconfig.work

Then create ~/.gitconfig.work and put any config you want to be used for repositories checked out in ~/src/@example-inc (or its subdirectories):

[user]
    name = "Test McTestface"
    email = "test.mctestface@example.com"
    signingKey = "FEDCBA9876543210"

Presto!

If you are using vim, you may want to add a vim modeline to get proper syntax highlighting in ~/.gitconfig.work:

# vim: ft=gitconfig

`word-break-inside: avoid` kind of deal #css

Tue, 24 Jan 2012 20:25:00 +0000

I’ve spent some time looking for something like word-break-inside: avoid (sort of an opposite to <wbr /> — a way to avoid breaking words in a inline element, but do that, if it’s longer than a line, just like page-break-inside: avoid does for pages in print). Turns out there’s none.

Just seemd that’s it’s too trivial thing to use JavaScritpt for that. But actually you can do just that using display: inline-block.

```html

Licensed under Creative Commons Attribute-ShareAlike 2.0

``` View the code and result.

PHP just made me doubt printf. /: #php #wtf

Wed, 28 Sep 2011 12:18:01 +0000

call methods of objects crated on-the-fly in PHP #php

Mon, 28 Mar 2011 15:58:50 +0000

PHP sux, that’s not news.

I always wanted to do this:

(new Object())->method();

but it did not allow me. But there’s a neat trick, which makes it possible. Kind of. Just define small helper function:

function o($o){return $o;}

and now:

o(new Object())->method(); // almost like (new Object())->method();

voila!

You can also pretend to refer to array keys of arrays created on-the-fly.

function k($a, $k){return $a[$k];}

k(array_flip($array), 'key'); // almost like array_flip($array)['key']

Update

Newer versions of PHP allows that syntax.

XMLHttpRequest-Capable

Fri, 18 Feb 2011 18:33:00 +0000

Why won’t browsers send any XMLHttpRequest-Capable HTTP headers?

there’s no place like code

You might not need TypeScript enums #javascript #typescript #enum

List values

Mapping

Switch

Project–specific tmux sessions #tmux #shell

The Problem

The Solution

Examples

Default configuration

Hyphenate headings as a last resort #CSS

Need for hyphenation

hyphens: auto

Soft hyphens

The solution

The future

WebDev advent calendars 2022

Mastodon misconceptions #fediverse

Checking Mastodon out is too much of a hassle. I don’t even know if any of my friends are on it

It’s hard to choose what instance to create account on. I don’t want to be stuck with something

“Toot” is a silly name

How does moderation work (a.k.a. will there be nazis?)

Fediverse is just another name for Mastodon

I don’t like Twitter/Mastodon, because it should be casual, writing about nonsense, but it stays in the internet forever. I’ll stick with Instagram Stories/TikTok

So, there are different clients?

Set up different work e﻿–﻿mail in git by directory #git

`word-break-inside: avoid` kind of deal #css

PHP just made me doubt printf. /: #php #wtf

call methods of objects crated on-the-fly in PHP #php

Update

XML­Http­Request-Capable

`hyphens: auto`

Set up different work e–mail in git by directory #git

XMLHttpRequest-Capable