Umbo logo
Me smiling with a river on the background
✋

Hi, I'm Umbo,

Full Stack Engineer at Elastic.

I write about the web platform, dev tooling and the subtle joy of overengineering everyday things.

Latest articles

See all
A human wrote these... patiently.
A close up photo of a Bticino Living Now switch box and an Ikea Bilresa smart remote

Wires, tubes and fancy switches: how I built my smart home

These days smart homes are all about wireless, battery powered devices, cloud connections and walled gardens. When I renovated my apartment I wanted something more solid, privacy-conscious, and long lasting.

A book titled "JS quirks 101" with late 1900s aesthetics

Use JavaScript quirks at your advantage

Dubious null representations, creative equality checks, funky object behaviors. These are usually JavaScript meme material. But what if I told you that, if used with caution, some of these quirks may turn out to be useful?

A close up photo of a keypad containing the keys G I T

Unusual Git shell aliases that work wonders

Some simple operations require verbose Git commands I always struggle to remember correctly. Here are custom shell aliases for them that I find extremely useful.

The Velociraptor logo

Velociraptor, an alternative to npm scripts for Deno

Velociraptor is a script runner for Deno. It offers a similar experience to npm scripts, but with out-of-the-box support for declarative Deno CLI options, environment variables, concurrency and git hooks.

Open Source projects

See all
Code I (sometimes) manage to squeeze in between other things.
import { LitElement, customElement } from 'lit';
import styles from './styles.css';

@customElement('web-component')
export class WebComponent extends LitElement {
  static styles = styles;

  render() {
    // ...
  }
}

Rollup plugin Postcss Lit

A Rollup plugin to Lit-ify your PostCSS'ed styles

scripts:

  fmt:
    desc: Formats the code
    cmd: deno fmt
    gitHook: pre-commit
    
  test:
    desc: Tests the code
    cmd: deno test
    env:
      ENV: test

Velociraptor

A script runner and git hooks manager for Deno

:root {
    --primary-color: #276FFF;
    --secondary-color: #00DBFF;
    --accent-color: red;
    --popover-color: gray;
    --font-family: 'Raleway', sans-serif;
    --headings-font-family: 'Montserrat', sans-serif;
    --monospace-font-family: 'Monaco', monospace;
    --spacer: 1.2em;
    --border-radius-base: 2px;
}

Visua

A brand identity automation toolkit based on standard css

Latest snippets

See all
Too small for being repos, but useful nonetheless.
# Git
alias g='git'
alias gs='git status'

# Branch (b)
alias gb='git branch'
alias gco='git checkout'
alias gcb='gco -b'
alias gsb='git switch'
alias gwhere='git rev-parse --abbrev-ref HEAD'

# Commit (c)
alias gc='git commit -v'
alias gc!='git commit -v --amend'
alias gcn!='git commit -v --no-edit --amend'

Shell aliases for hard-to-remember Git commands

1 file • shell

@use 'sass:meta';

@mixin export-vars($module-name) {
  :root {
    @each $name, $value in meta.module-variables($module-name) {
      --#{$name}: #{$value};
    }
  }
}
    
// Usage
@use 'variables-file';

@include export-vars(variables-file);

Sass vars to css vars mixin

1 file • scss