Make buttons controllable via the keyboard within test using testing-library.Test is Different than BrowserIn the browser, we can focus a button and press enter, and the onClick handler is triggered, and all is good.In the test environment, it's a different story. Here, we'll look at tests written f...

Ideas come and go. Act on them now or (quite possibly) never.Advice to self:Strike while the idea is hot. (That's a good Jim Rohn'ism I picked up.) When it comes to you in a flash, you might remark to yourself how great the idea is. But it will leave just as quickly if you do nothing about it.Our em...

Here's a method to re-render a React input when its defaultValue prop changes.Why Update defaultValuedefaultValue is meant to be uncontrolled. So, why would you want to control it?defaultValue is supposed to allow an input to receive some starting data but then React usually will forget that it was ...

This is a shell command to find and replace over multiple files recursively in MacOS.This is surprisingly difficult to figure out how to do. There are many options an nuances. This may work for your particular OS version, Terminal, Shell, and installed tools. Lol, what a disclaimer!Anywho, the comma...

Here's are some methods on changing colors for the UI in Vim.Color one-offs in .vimrcMost of the colors you have will probably come from a theme. I've been using Dracula lately, and it's great.But if you want to make one-off color adjustments yourself, you can stick those in your .vimrc file.Highlig...

Here are a couple methods to the OS dark theme within JavaScript.Respecting the user's OS theme color is something that more websites should do. It's magical when it works.How many of you sit for hours looking at a dark terminal window while the bright white browser window blazes next to it, burning...

Here's a way to keep the contents of a cell in a CSS grid layout from filling the whole width of the cell.Columns are easyWhip out a grid. It'll solve your problems. They're easy to start and powerfully affect your layout..container { display: grid; grid-template-columns: 1fr 1fr; }I've got two equa...

Here's a method for how to exclude typings files from dependencies when compiling TypeScript projects.Install a problem dependencyThe problem comes when we install a dependency into our already-TypeScript project that has other typings that mess up the project we're in.For example, I was working on ...

Letters are made up of special lego bits. Here is an incomplete catalog.I just watched a great typography fundamentals video on Pluralsight.A part of that training was learning some of the specific parts of letterforms in typography. Here are some of the bits I learnedStrokeGenerically, a line in th...

Here are some lessons in creating magical designs from Peter Smart from Fantasy Interactive.These are drawn from his Awwwards video, Creating Magic.Minimum Love-able ProductWe all know what an MVP is. It's the worst thing that provides still provides value that we can release to our users. If we hav...

This is a way to mock the fetch function in a Jest test.Why Mock FetchWe are probably using test fakes to avoid testing dependencies. In the case of fetch, we want to avoid the dependency of the network and whatever endpoints we might be making requests to.Avoiding the network will make our test les...

If we are direct in our communication, we are more likely to get the results we seek.Understanding what we wantTo be direct, we must understand clearly what we want. We have to think a little more to be direct. Without this clarity, we won't be able to get to the direct requests in our communication...

Does tech debt increase during an economic downturn?Less Money All AroundIf there's a lack of money in the general economy, as in a wider economic downturn, there's probably a lack of extra funds within our company as well. It's difficult to make a sale. Clients are holding their coin closer. The mo...

The testing pyramid can point out the greatest ROI for our tests.Traditional Testing PyramidThe testing pyramid is traditionally used to show where we should focus our testing time and effort. According to it, we should do mostly unit tests because they're cheap, stable and fast.[Testing pyramid gra...

Screen reader support will get more real with a support plan.Browser SupportBrowsers get a support plan. There's a model for which browsers we'll support. There are support docs that state our policy. Users that come to our site know what to expect. When we file bugs, we know to report the browser i...

Postgres docker image upgrades require postgres data upgrades.Incompatible Database FilesAt some point, you'll have a docker image for Postgres that you want to upgrade. I had been working on a certain version and upgraded to the next. I got the image pulled down fine, but after that, the data that ...

How do we sense if we should keep building or start from scratch?Historical ContextWe want to make progress in the thing we're building. How did this thing start? It came into being because of some purpose. It wasn't made and doesn't now exist in a vacuum. There was a historical context within which...

Here's quick summary of the meaning of color vocabulary.To say something is "the color" blue, for instance, is to over-simplify. We can describe a bit more about color with a bit more vocabulary.HueHue is the word that we really mean when most of us say "color". Going around the color wheel, when we...

If you narrow an interface in Typescript, you can operate on it more specifically. And you can keep your type safety.Multiple TypesNarrowing types requires first the challenge of having two or more types. Let's say you have two interfaces:interface Legacy { render(): void } interface Current { updat...

Tests that actually exercise the system will provide value.Any TypeThere's often discussion about which type of tests one should be writing: unit, integration or functional, etc. But I think this point matters less than other things. It matters much more what our test is actually testing.It might fe...

Tabbing with the keyboard should approximate what a mouse does.Like a MouseIf you're not a keyboard-first or -only user, it can sometimes be a challenge to determine what the keyboard tabbing experience should be like. This rule of thumb should help:Try to make the keyboard tabbing approximate what ...

What level should I log this at? This is my approach.What is Logging?Logs are developer-facing feedback. Developers place lines of code in their source to prompt logs -- messages and associated data -- to be output. It is output by a program at runtime. It might go straight to stdout, a file, a UI o...

We want to live true to something. What we believe in is different. But the desire to have integrity, to live to it, seems universal.What We Live ByWe believe in universal truth and right, set by God. We want to live to learn and act as best as we can to that divine standard.Or we feel a compass ins...

Reasonable deadlines also constrain the solution space.Purpose of DeadlinesThis is what deadlines are for, after all. They help us finish. They help us make up our minds. Among other things...They also help us have a more accurate view of when something will be done. They help us coordinate a shared...

It might be worth exploring the unhelpful -- and it might not.When you're trying to learn, you might try something that isn't going to yield fruit. But unless you try, how do you know?When you're trying to make sense of something, you might compare or contrast it to other similar things. These model...

I ran Docker yesterday, and I thought to myself, "Docker is nice to run a bunch o server junk."What, junk?Of course, "junk" doesn't sound thrilling or particularly nice, and I guess that's how I felt the other day. That's what makes Docker nice. You can throw something into a black box and now have ...

NestJS comes with nice integration with TypeORM and with a nice @nestjs/config package. But getting them to work well together using dependency injection was a bit of a trick.The docs make it look easy, and in the end it does look easy. For some reason, the docs seem incomplete and the solution not ...

Macros are sequences of commands in Vim that can be recorded to build up more complex tasks and then run them again.Record a vim macroThis will put you in a mode where you'll be recording your commands as they run until later, when you say to stop recording.q - start the recording.a-z - store the ma...

If you need to publish a Lerna-managed packaged to npm without commit and pushing to Github, here's a way.Lerna VersionsWeird things seem to happen infrequently enough with Lerna that they always leave me wondering what happened and at a loss as to the resolution. Most of the time, Lerna does a grea...

You'd think that 100vw would fill the viewport and no more, but that's not always true. Sometimes it overflows horizontally.The mysteryWeb dev has its share of mysteries to solve. Some days it's amazing anything works at all. Today we had one of those. There were users reporting a horizontal scrollb...