TIL

A project I’m working on uses SVGO to clean and minify SVG files. There’s one problem: SVGO by default removes the viewBox attribute, which comes embedded in the SVG’s I receive and have stylistic meaning in my codebase. You can override this default by using an SVGO config file: // svgo.config.js module.exports = { plugins: [ { name: 'preset-default', params: { overrides: { removeViewBox: false, }, }, }, ], }; Applied like so: ...

Autojump is my tool of choice for navigating directories. If I enter the following into the terminal: $ j til Autojump will try to guess where I want to go among directories I’ve previously visited. It uses a database of directories and their relative rankings to do so. But there’s a problem! These day I only want to visit ~/oss/til. In the past I’ve visited ~/oss/hr-til and ~/oss/tilex hundreds of times. Autojump always sends me there first. I don’t want that! ...

Today in “Let JavaScript Surprise You”: let array = [1, 20, 11, 10, 7, 17, 2]; console.log(array.sort()); > [1, 10, 11, 17, 2, 20, 7] 😳 The numbers are not sorted as we might expect. What’s going on here? From Mozilla’s docs: The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values. Now this sorting makes sense! Luckily, sort accepts a function, so here’s the sorting we intended: const sortNumbers = (first, second) => first - second console.log(array.sort(sortNumbers)) > [1, 2, 7, 10, 11, 17, 20]

Have you ever wanted to take a JavaScript array of strings and turn them into a sentence? Here’s how you do that. const toLearn = [ 'object-oriented programming', 'frontend engineering', 'testing', ] const sentence = new Intl.ListFormat().format(toLearn) > "object-oriented programming, frontend engineering, and testing" ListFormat takes options. This has cross-browser support! The days of building a ’to sentence’ function in JavaScript are over.

When viewing a Figma design file, you can zoom in/out with CMD and up/down on a trackpad or magic mouse. Scroll left or right with one-finger swipe left or right. Zoom and scroll; along with adding comments and copying CSS, that’s most of what I do in Figma. I’m sure that these commands are useful in many other settings, but I find them especially valuable in a Figma file, which can feel otherwise challenging for me to navigate.

You’ve been iterating on your Tmux configuration file, and now you want to your configs in action without closing the program. But how? Here’s the command to source an updated tmux.conf: $ tmux source-file tmux.conf

Last week we encountered a breaking change in our Tmux configuration, and briefly lost the ability to scroll with the mouse. It became an opportunity to re-learn Tmux’s copy mode, and liberate ourselves from the mouse a little more. Enter copy mode with <prefix> [. From here, you can navigate with standard Vim commands. ctrl-u moves you a half-page up, perfect for wading through test failure backtraces.

Let’s say you have a string evaluated into a HTML template that contains newlines, like "getting\n\things\ndone" and you want those newlines to be reflected in the presentation. Like this: getting things done We can solve this with the following CSS on the string’s containing element: white-space: pre-wrap; With pre-wrap, “[s]equences of white space are preserved. Lines are broken at newline characters, at [breaks] and as necessary to fill line boxes.” white-space docs

The local environment is a great place to iterate on a CircleCI configuration. You’ll catch errors faster than pushing to CI, and help drive a fast, iterative configuration process. Install the CircleCI CLI via Homebrew (or any package manager of your choice): $ brew install circleci Then, in the same directory as your .circleci/config.yml, run: $ circleci config validate # Config file at .circleci/config.yml is valid

When I upgrade ASDF, I sometimes get an error like this when I try to run a command: /Users/jakeworth/.asdf/shims/jq: line 3: /usr/local/Cellar/asdf/0.9.0/libexec/bin/asdf: No such file or directory The issue is that I’ve upgraded ADSF to v0.10.2, but the jq shim doesn’t know that and can’t find it in a directory called “0.9.0”. This issue persists even after running asdf reshim. My solution is to force ASDF to rebuild shims directory by renaming it. A rename lets me get back to where I am now, in case I need to. ...