DEV Community: Jonas Schumacher

Search for word boundaries in Vim & VSCode Vim

Jonas Schumacher — Sat, 03 Dec 2022 13:33:02 +0000

So you know that / will bring up search in Vim and VSCode Vim. That's good!

But then you named a variable is and now want to find every occurence of that word - but only where it stands alone. So no places where it occurs as part of your isLargePizza() function for example.

Luckily, that's doable: \< matches the beginning of a word and \> the end.

So hitting ...

/\<is\>

... will to the trick!

Edit:

See this comment by @pbnj for additional tips relating to word boundary search.

Show hidden files & folders in Finder on macOS

Jonas Schumacher — Fri, 28 Oct 2022 09:29:50 +0000

Actually, macOS makes it very simple now to toggle the display of hidden files on and off.

Simply hit:

'Command' + 'Shift' + '.'

That's it!

Vim: Jump to first non-whitespace character in line

Jonas Schumacher — Mon, 26 Sep 2022 08:34:54 +0000

Press ...

^

Yes, that's it.

VSCode VIM Tip: Trigger Hover Info

Jonas Schumacher — Thu, 08 Sep 2022 08:58:31 +0000

Error information from the likes of ESLint, TSC etc. are shown as overlays in VSCode. These can be triggered by hovering over the marked section of your code. But this requires you to use your mouse or trackpad. Ain't nobody got time for that!

Luckily, you can just do the following when using VSCode Vim:

gh

That's it.

When you don't use VSCode Vim, you'll have to work a bit harder for that sweet, sweet error info though:

<Cmd>K + <Cmd>I

Fun!

VIM Tip: Replace Without Yanking

Jonas Schumacher — Thu, 08 Sep 2022 08:49:58 +0000

You yanked a word and want to use it to replace more than one other word. The naive approach of selecting each of these other words and then hitting p doesn't really work though, does it?

This is because the first p yanks the highlighted word at the same time, replacing the original word in the register.

The solution is to paste from the 0th register directly:

"0p

That you can do however many times you like.

VIM Quick Tip: Convert Motion to Upper- or Lowercase

Jonas Schumacher — Sun, 05 Sep 2021 12:58:59 +0000

This is part of a series of posts that give you very small, quick tips on how to do things in VIM. This time: converting motions to upper- or lowercase. There are many ways to do this, but this is the one I'm using.

Suppose you have the following "word": screaming_snake

If you wanted to convert that to uppercase, move to the beginning of the word and type gUw from normal mode, where w is the word motion. This will give you SCREAMING_SNAKE. Now, if you hit guw, it will revert back to the original.

In what order does Jest execute tests anyway? (And how to change it!)

Jonas Schumacher — Tue, 03 Aug 2021 12:34:18 +0000

Jest will execute different test files potentially in parallel, potentially in a different order from run to run. Per file, it will run all describe blocks first and then run tests in sequence, in the order it encountered them while executing the describe blocks.

Here's an illustration of that per file behavior, copied straight out of the doc link above:

describe('outer', () => {
  console.log('describe outer-a');

  describe('describe inner 1', () => {
    console.log('describe inner 1');
    test('test 1', () => {
      console.log('test for describe inner 1');
      expect(true).toEqual(true);
    });
  });

  console.log('describe outer-b');

  test('test 1', () => {
    console.log('test for describe outer');
    expect(true).toEqual(true);
  });

  describe('describe inner 2', () => {
    console.log('describe inner 2');
    test('test for describe inner 2', () => {
      console.log('test for describe inner 2');
      expect(false).toEqual(false);
    });
  });

  console.log('describe outer-c');
});

// describe outer-a
// describe inner 1
// describe outer-b
// describe inner 2
// describe outer-c
// test for describe inner 1
// test for describe outer
// test for describe inner 2

If you want to run files in sequence as well, run Jest with the --runInBand command line flag. (-i does the same thing.) Doing this, the scheduler might still run them in a different order from run to run. To prevent this as well, you will need to define your own test sequencer.

To sort test files alphabetically for example, create a file with the following contents:

// testSequencer.js
const Sequencer = require('@jest/test-sequencer').default;

class CustomSequencer extends Sequencer {
  sort(tests) {
    // Test structure information
    // https://github.com/facebook/jest/blob/6b8b1404a1d9254e7d5d90a8934087a9c9899dab/packages/jest-runner/src/types.ts#L17-L21
    const copyTests = Array.from(tests);
    return copyTests.sort((testA, testB) => (testA.path > testB.path ? 1 : -1));
  }
}

module.exports = CustomSequencer;

Then, set the following in your Jest config:

// jest.config.js
{
  "testSequencer": "path/to/testSequencer.js"
}

Great Talks: Jest Architecture Overview

Jonas Schumacher — Wed, 28 Jul 2021 08:20:24 +0000

❓ This post is the first in a series in which I will recommend and discuss talks on programming topics which I liked and found interesting. The idea is not to provide a detailed summary, but to draw your attention to and hopefully make you watch the talk itself, and then provide a few of my own observations and highlights as well.

The Talk

We'll kick this series off with a talk I watched recently. Jest Architecture Overview by Christoph Nakazawa goes over the architecture of the Jest testing framework at a really well chosen level of detail. Not too high, not too low, just right to get a better understanding of, and feeling for, what is actually going on when you run Jest.

Notes & Observations

The lo-fi presentation is actually really refeshing and makes this feel like an architecture session you would do with your colleagues
Whiteboard might actually beat out Powerpoint for technical topics, probably because it doesn't feel like you need to dumb anything down to fit the medium
Also, there's a lot more meaningful interaction between the speaker and the text
Basically, this has shown me how much unreaped potential there is for technical talks to give you real, instead of merely felt, insight
Nakazawa talks a lot about the things Jest does purely to deliver a better user experience
Jest does a lot of stuff to prioritize which tests to run first: e.g. it maintains a cache with tests and their results and will run tests that failed during the previous run first
The most basic heuristic they use for this is file size, this breaks down when a test imports a lot of stuff though
Over 50% of the work done during the firt run might actually be transforming the source, these results are cached though, which is why subseqent runs might be a lot faster
Transforms of code are done very late in the process and only when the code is needed. This isn't done earlier because this static analysis would be hard to do reliably and might actually waste a lot of time
Long-running tests are prioritized by the scheduler so they finish roughly when the smaller tests are finished as well. The idea here is to use one of the available cores or threads for such a long running process, while the others run the smaller ones. (Here, it isn't made clear what happens if there are a lot of long running tests. Will they occupy the available resources until there aren't enough long running tests to occupy all cores anymore? Or is the scheduler "smarter" than that? Would it actually be smarter at all to keep a core free, even if there are a lot of slow tests?)
Jest is made up of a lot of small packages with very specific tasks
These might actually be swapped out individually via the config if your usecase calls for it
There's a lot going on, but there also seems to be a lot of change over time, with more and more stuff being split-up, replaced etc. Nothing comes out perfectly on first try.
When it comes down to it, it's really all about the basics: walking a directory, filtering out files, importing code etc. These things are then combined into a framework. Jest's architecture makes this very explicit
Naming is hard for everyone

Automatically lint & format your code on commit when using Next.js

Jonas Schumacher — Sat, 24 Jul 2021 16:05:35 +0000

In this post, we will be setting up Next.js with Husky and lint-staged to run ESLint and Prettier whenever we commit a file.

If you want to take a look at the final product first, or if you don't care about the step-by-step, here's the accompanying repo.

You probably already know, or can imagine, the advantages of automatically linting and formatting each and every piece of code commited to your repo. So I won't convince you of its merits here, but get straight into the action.

Set up a new Next.js Project

Start by setting up a new Next.js project if you don't have one yet:

npx create-next-app --typescript
# or
yarn create next-app --typescript

Here, we are using the Typescript template. But you can simply leave the --typescript off if you like to suffer. Your choice, really.

Choose whatever name you want. I'll presume you chose "website" though.

If you want to read more about the process of setting up Next.js, take a look at their getting started guide.

Install Prettier as a devDependency

ESLint will look at your code and try to prevent potential bugs by looking at its semantics. Prettier will look at the formatting and change it according to its rules. Since Next.js comes with ESLint pre-installed and pre-configured, that's already taken care of. That leaves Prettier.

Change into your newly created project folder:

cd website

Then, install Prettier as a devDependency:

npm install --save-dev --save-exact prettier
# or
yarn add --dev --exact prettier

Create an empty Prettier config:

echo {}> .prettierrc.json

This will let tools like your editor know you are using Prettier.

Optional: Create a .prettierignore file

If you plan to use Prettier outside of the Git hook we are setting up below, you should probably create a .prettierignore file. This allows you to list folders and files you don't want to format.

touch .prettierignore

The Prettier documentation says it's a good idea to base this on your "gitignore and .eslintignore (if you have one)." So ... do that.

If you want to read more about the process of setting up Prettier, take a look at their installation guide.

Edit your .eslintrc

Some of the ESLint rules Next.js comes pre-configured with are about formatting. But we want Prettier to handle everything related to the formatting of our code. This is why we'll install eslint-config-prettier and add it to our .eslintrc, where it will disable all existing rules that might interfere with Prettier.

Install eslint-config-prettier by running the following:

npm install --save-dev eslint-config-prettier
# or
yarn add --dev eslint-config-prettier

The .eslintrc Next.js created should look like the following:

// In file .eslintrc
{
  "extends": ["next", "next/core-web-vitals"]
}

Change this to the following:

// In file .eslintrc
{
  "extends": ["next", "next/core-web-vitals", "prettier"]
}

If you want to read more about the process of combining ESLint and Prettier in a Next.js project, take a look at the Next.js "Usage with Prettier" guide, as well as Prettier's "Integrating with Linters" guide.

Install lint-staged

At this point, you would be able to run ESLint and Prettier manually. But ain't nobody got time for that. Also, "Manually Lint & Format your Code on Commit When Using Next.js" is not the title of this article and I don't want to disappoint you. So let's introduce lint-staged into the mix.

The good thing is that they make it very easy to set up:

npx mrm@2 lint-staged

This will install Husky, a tool that makes is easy to manage Git hooks, and detect which linting and formatting tools are already installed. It will then set everything up more or less correctly. We'll come to the "less" part next.

If you want to read more about the process of setting up lint-staged, take a look at their installation and setup guide, as well as Prettier's pre-commit hook guide.

Edit the Git Hook

After running the above, you should have the following entry in your package.json:

// In file package.json

// ...
"lint-staged": {
  "*.js": "eslint --cache --fix",
  "*.{js,css,md}": "prettier --write"
}

Change this to the following:

// In file package.json

// ...
"lint-staged": {
  "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
}

This will run Prettier on all staged files of the listed types when you run git commit.

Now, you would be forgiven to assume that to also run ESLint, we should put it in there as well. But since Next.js comes with its own pre-configured wrapper around ESLint, wich doesn't take the files it operates on as arguments, we will do something slightly different. We will edit the Git hook that Husky created, during the installation of lint-staged, directly. Right now, it should look like this:

# In file .husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

Change this to the following:

# In file .husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint:write && npx lint-staged

And then add the following script to your package.json:

// In file package.json

// ...
"scripts": {
  // ...
  "lint:write": "next lint --cache --fix",
},

This will call the Next.js version of ESLint and tell it to automatically --fix any issues that it finds that can be fixed automatically. Also, the --cache tells it to only do so on changed files.

If you want to read more about the undocumented command line options Next.js' lint command accepts, take a look at my post on the topic.

We're Done!

Now, when you run git commit, both ESLint and Prettier should check that you don't commit any crap. This should also work when using VSCode's own Git UI. Other Git UIs might have issues though. Sublime Merge for example can't find my node.js installation, most likely because it's installed and managed via nvm. There are almost certainly solutions to this, but since I haven't looked them up yet they fall outside the scope of this tutorial.

Don't forget that you can use or take a look at the accompanying repo.

Hope you found this helpful. If you find any erros or run into issues, feel free to tell me in the comments.

💡 This post was published 2021/07/14 and last updated 2021/07/14. Since node libraries change and break all the time, there's a non-trivial chance that all of this is obsolete and none of it works when you read this in your flying taxi, gulpin' on insect protein shakes sometime in the distant future or, let's be honest here, next week. If so, tell me in the comments and I'll see if an update would still be relevant.

How to Use the Next.js Image Component in Storybook

Jonas Schumacher — Wed, 21 Jul 2021 13:01:30 +0000

In this post, we will be setting up Next.js and Storybook in a way that makes it possible to use Next.js' Image component in components rendered inside Storybook.

Introduction

If you want to take a look at the final product first, or if you don't care about the step-by-step, here's the accompanying repo.

Rendering a component that uses the Next.js Image component inside Storybook might have you running into a few gotchas. I myself ran into two:

Storybook can't seem to find the image you statically import from your public directory, resulting in the following error:

Failed to parse src "static/media/public/<imageName>.jpg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

Storybook can't find the blur placeholder image that is automatically generated by Next.js and injected into the blurDataURL prop, resulting in the following error:

Image with src "static/media/public/<imageName>.jpg" has "placeholder='blur'" property but is missing the "blurDataURL" property.

The reasons for both of these are actually the same: when run inside Storybook, your code won't run through Next.js' build process, during which the correct URLs/Paths and alternative sizes for your hosted images as well as the placeholder images are created and injected into your code.

If you know how, both of these are straightforward to solve. But finding the solutions can be kind of an odyssey. So here they are in one place.

Note: in this post, I assume you have already set up both Next.js as well as Storybook. If not, do that and then come back here.

Storybook Can't Find Images Imported from Next.js' `public` Directory

Let's assume you have the following component:

// src/components/ImageTest.js

import Image from "next/image"

import testImage from "../public/testImage.jpg"

const ImageTest = () => (
  <Image src={testImage}
    alt="A stack of colorful cans"
    layout="fill" 
  />
)

export default ImageTest

And the following story for it:

// stories/ImageTest.stories.js

import React from 'react';

import ImageTest from '../components/ImageTest';

export default {
  title: 'Image/ImageTest',
  component: ImageTest,
};

const Template = (args) => <ImageTest {...args} />;

export const KitchenSink = Template.bind({});
KitchenSink.args = {};

If you were to run Storybook now, this would be what you saw:

When I first encountered this, I reasoned Storybook simply couldn't find the assets in Next.js' public/ directory. But running with the -s public/ command line option to tell it about the directory doesn't solve the problem.

After some digging, the issue here seems to be the things going on behind the scenes of the Image component. One of its most useful features is that it will automatically optimize the image you pass it and create and serve alternative sizings of it on demand. Next.js can't work its magic when the Image component is rendered inside Storybook though, and that's why the solution here is to simply turn these optimizations off in this context. To do this, we'll have to add the following to Storybook's setup code:

// .storybook/preview.js

import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => (
    <OriginalNextImage
      {...props}
      unoptimized
    />
  ),
});

This code will replace the Image component's default export with our own version, which adds the unoptimized prop to every instance of it. With this, "the source image will be served as-is instead of changing quality, size, or format", according to the Next.js documentation. And since we added this to Storybook's setup code, this will only be done when our component is rendered inside Storybook.

Credit for this solution goes to Github user rajansolanki, who synthesized a few prior solution attempts in this comment on the relevant Github issue.

If you want to read more about Next.js' Image component and the props you can pass into it, take a look at the introduction to its features as well as its documentation.

Storybook Can't Find the Blur Placeholder Image That is Automatically Generated by Next.js and Injected Into the `blurDataURL` Prop

Another nice feature of the Image component is that it will automatically generate small, blurred placeholder images for display during the loading of the full image.

All we need to do to activate this feature is to pass the placeholder="blur" prop:

// src/components/ImageTest.js

import Image from "next/image"

import testImage from "../public/testImage.jpg"

const ImageTest = () => (
  <Image src={testImage}
    alt="A stack of colorful cans"
    layout="fill"
    placeholder="blur" // this is new!
  />
)

export default ImageTest

But this will immediately result in the following error when we run Storybook again:

The reason for this is basically the same as before. Next.js will generate a placeholder image and inject it into the component for us. So that one line of code we added actually does a whole lot in the background, all of which, again, is not automatically done when run inside Storybook. Luckily the solution is a one liner as well:

// .storybook/preview.js

import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => (
    <OriginalNextImage
      {...props}
      unoptimized
      // this is new!
      blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAADAAQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAbEAADAAMBAQAAAAAAAAAAAAABAgMABAURUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAECEf/aAAwDAQACEQMRAD8Anz9voy1dCI2mectSE5ioFCqia+KCwJ8HzGMZPqJb1oPEf//Z"
    />
  ),
});

What we have done here is a bit of a hack, granted. But it's effective, as all good hacks are. With this, we're setting all placeholder images to be the same data, at least in the context of Storybook. The string above is actually the base64 representation of the placeholder for the plaiceholder example image on their homepage. But we could just as easily upload our own image there and use that.

And with this, you should see the following when running Storybook:

Note: our testImage for this is this image by Studio Blackthorns on Unsplash.

If you want to read more about the automatic placeholder generation of Next.js' Image component, take a look at the placeholder prop's documentation.

Don't forget that you can use or take a look at the accompanying repo.

💡 This post was published 2021/07/21 and last updated 2021/07/21. Since node libraries change and break all the time, there's a non-trivial chance that all of this is obsolete and none of it works when you read this in your flying taxi, gulpin' on insect protein shakes sometime in the distant future or, let's be honest here, next week. If so, tell me in the comments and I'll see if an update would still be relevant.

eslint command line options supported by next lint (incl. --fix)

Jonas Schumacher — Wed, 07 Jul 2021 13:33:57 +0000

next.js comes with its own CLI for linting your code, next lint, which is basically a preconfigured wrapper around eslint.

What the documentation doesn't tell you though is whether this wrapper accepts the same command line options as eslint. The short answer is: it doesn't. At least not all of them, but a whole lot more than the only one documented by next.js' sparse documentation for this command, the --dir flag.

I found out about this only via this GitHub issue. It links to this file on GitHub, which contains a comment with the full list of supported options

The exact list and place might change in the future, but it should pretty much always stay in that file, which is where you will find the most recent version of the list. Still, for convenience's sake, here's the list as of 2021/07/07:

Options
        Basic configuration:
          -h, --help                     List this help
          -d, --dir Array                Set directory, or directories, to run ESLint - default: 'pages', 'components', and 'lib'
          -c, --config path::String      Use this configuration file, overriding all other config options
          --ext [String]                 Specify JavaScript file extensions - default: .js, .jsx, .ts, .tsx
          --resolve-plugins-relative-to path::String  A folder where plugins should be resolved from, CWD by default
        Specifying rules:
          --rulesdir [path::String]      Use additional rules from this directory
        Fixing problems:
          --fix                          Automatically fix problems
          --fix-type Array               Specify the types of fixes to apply (problem, suggestion, layout)
        Ignoring files:
          --ignore-path path::String     Specify path of ignore file
          --no-ignore                    Disable use of ignore files and patterns
        Handling warnings:
          --quiet                        Report errors only - default: false
          --max-warnings Int             Number of warnings to trigger nonzero exit code - default: -1
        Inline configuration comments:
          --no-inline-config             Prevent comments from changing config or rules
          --report-unused-disable-directives  Adds reported errors for unused eslint-disable directives ("error" | "warn" | "off")
        Caching:
          --cache                        Only check changed files - default: false
          --cache-location path::String  Path to the cache file or directory - default: .eslintcache

        Miscellaneous:
          --no-error-on-unmatched-pattern  Prevent errors when pattern is unmatched - default: false

Source Your Own Daily-Quotes in Obsidian

Jonas Schumacher — Mon, 07 Jun 2021 19:31:29 +0000

Hey! This post has gotten a bit old and I'm no longer using the solution described here myself. I will keep the post around, but now recommend taking a look at either this plugin or this more elegant solution. Though I can't vouch for either myself, I no longer feel confident in my own solution decribed below as well.

In this post you will learn how to collect quotes in Obsidian and then use them inside your daily notes for inspiration. Either as a replacement or in addition to the quotes from https://quotes.rest/ many people already use.

Intro

If you use Obsidian there's a good chance you heard about the concept of daily notes. They are a great tool to add to your workflow and Obsidian makes it very easy to use them via its native Daily Note Plug-In. Also, if you have looked for inspiration in how other people set-up and use their daily notes, it's safe to assume you've seen at least a few that make use of Templater's tp.web.daily_quote() function to query https://quotes.rest/ for an inspirational quote to display for the day.

This is great! But in keeping with the spirit of letting your notes represent your interests and helping you remember what you learn, I thought it would be cool to collect my own quotes from the things I read, watch and listen to and then display a random one of those in each of my daily notes.

What You'll Need

If you want to replicate the whole workflow described below, you will need Obsidian itself and then:

Enable the "Daily notes" plugin from the Core plugins
Install the Templater Community plugin

How I Collect My Quotes

When I process some kind of media to incorporate it into my vault, I collect quotes I find interesting, beautiful or which simply describe the contents of the piece of media eloquently or succinctly.

For each of these, I create a new note with a title of the form (QUOTE) "This is the beautiful, eloquent quote I captured." (So to be clear: the quote itself goes inside the title.)

I then you'll need to put at least the tag #quote inside the body. You can additionally put whatever you want in there. But for this to work, you will need at least that tag - or another tag of your choosing you will put in all and only your quote notes - inside the note.

So, to recap: quote goes in the title, #quote (or a tag of your choosing) in the body.

Create A Script to Link to a Random Quote

Now, create a new note wherever you create your templates and put the following script in there:



<%* 
    const quoteFiles = []

    app.metadataCache.getCachedFiles().forEach(filename => { // get all filenames in the vault and iterate through all of them, calling a function for each of them
        let { tags } = app.metadataCache.getCache(filename) // get the tags in the  file w/ the given name
        tags = (tags || []).filter(t => t.tag && "#quote" === t.tag) // filter out all tags that are not "#quote"
        if (tags.length > 0 && filename.startsWith("(QUOTE)")) { // list will contain at least one tag for the relevant notes, also filter out all notes that dont start w/ "QUOTE"
            quoteFiles.push(filename.slice(0, filename.length - 3)) // cut off last three characters from filename, otherwise the links would contain `.md` at the end
        }
    })

    const randomIndex = Math.floor(Math.random() * quoteFiles.length)

    tR += `[[${quoteFiles[randomIndex]}]]`
%>

And then put this one inside your daily note template:



<% tp.file.include("[[Random Quote]]") %>

That's it!

Here's an example from my daily note from today:

(The quote is from Jeroen Fieren's great post The Opposite Collector’s Fallacy)

Thanks

In creating this, I had help from users torantine, SkepticMystic and koala from the Obsidian Discord Server. Also, the function above is heavily based on the findTargets() function from the tag-wrangler plugin.

Also, thanks to @thedyslexicpoet for catching a bug in my original script.

Edits

2021/07/24:

Fixed a potential bug in the script by removing the ' in don't in this line:



if (tags.length > 0 && filename.startsWith("(QUOTE)")) { // list will contain at least one tag for the relevant notes, also filter out all notes that don't start w/ "QUOTE"

Turning it into this:



if (tags.length > 0 && filename.startsWith("(QUOTE)")) { // list will contain at least one tag for the relevant notes, also filter out all notes that dont start w/ "QUOTE"

DEV Community: Jonas Schumacher

Search for word boundaries in Vim & VSCode Vim

Show hidden files & folders in Finder on macOS

Vim: Jump to first non-whitespace character in line

VSCode VIM Tip: Trigger Hover Info

VIM Tip: Replace Without Yanking

VIM Quick Tip: Convert Motion to Upper- or Lowercase

In what order does Jest execute tests anyway? (And how to change it!)

Great Talks: Jest Architecture Overview

The Talk

Notes & Observations

Automatically lint & format your code on commit when using Next.js

Set up a new Next.js Project

Install Prettier as a devDependency

Optional: Create a .prettierignore file

Edit your .eslintrc

Install lint-staged

Edit the Git Hook

We're Done!

How to Use the Next.js Image Component in Storybook

Introduction

Storybook Can't Find Images Imported from Next.js' public Directory

Storybook Can't Find the Blur Placeholder Image That is Automatically Generated by Next.js and Injected Into the blurDataURL Prop

eslint command line options supported by next lint (incl. --fix)

Source Your Own Daily-Quotes in Obsidian

Intro

What You'll Need

How I Collect My Quotes

Create A Script to Link to a Random Quote

Thanks

Edits

Storybook Can't Find Images Imported from Next.js' `public` Directory

Storybook Can't Find the Blur Placeholder Image That is Automatically Generated by Next.js and Injected Into the `blurDataURL` Prop