Forem: Dawid

How to use a custom font on Excalidraw.com

Dawid — Thu, 06 Jun 2024 18:44:52 +0000

Introduction

Excalidraw is a great whiteboarding tool, useful for technical diagrams and wireframes.

Problem

The default handwritten font looks quite unprofessional and can be difficult to read

Additionally, there is no official way to add custom fonts.

Solution

The solution is to run a custom script on every page load to override the default fonts.

1. Download the "scripty" chrome extension

You can download the extension here

This will allow you to inject custom js on specific web pages.

2. Configure automatic script injection

Once you have scripty installed, create a new script and configure it to run automatically when the URL contains https://app.excalidraw.com/

3. Add custom font script

Write a script to override one of the Excalidraw default fonts with your chosen font


(() => {
  console.log("Custom font script started");

  // Add the font-face definition
  const style = document.createElement("style");
  style.textContent = `
  @font-face {
    font-family: 'Helvetica';
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/shantellsans/v9/FeVhS0pCoLIo-lcdY7kjvNoQg2xkycTqsuA6bi9pTt8YiT-NXidjb_ee-maigL6R8nKVh8BbE1mv4wwMMm1lebY.woff2) format('woff2');
  }
  `;
  document.head.appendChild(style);
  console.log("Custom font added");
})();

At the time of writing, the default fonts are:

Handdrawn = 'Virgil'
Normal = 'Helvetica'
Code = 'source-code-pro'

4. Bonus tip: using google fonts

Find your font in google fonts, click on embed code, and under the web tab select the @import option

The problem here is that google fonts default import url will set the font name to be the real name of the font.

We want to manually alter the name of the font to override the fonts in excalidraw.

To achieve this, you can navigate to the font url in the browser eg visit https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap

From here you can copy the entire css, paste it into vs code, and use find/replace to change all the font names .

For example, to replace the default handdrawn font (Virgil) with a custom handdrawn font (Shantell Sans), you can use the link above, copy all the CSS and change the name from 'Shantell Sans' to 'Virgil' to trick Excalidraw into replacing the fonts.

Now add this code into the script provided above and youre ready to go.

Here is the script for a fully working example https://pastebin.com/raw/1LULgXuX

Conclusion

This article provides you with everything you need to implement a custom font in Excalidraw.

I hope that someone finds this useful

Simplifying Complex Type Display in TypeScript and VS Code

Dawid — Fri, 24 May 2024 10:40:05 +0000

Introduction:

Complex typescript types can result in a huge confusing mess when hovering on a variable.

This can make it hard to quickly understand the type information.

In this article, we'll explore techniques that can help simplify the display of complex types in VS Code using TypeScript.

The Problem:

Consider the following example where we have a State<T> type and a createState function:

export type State<TStateValue extends StateValue> = {
    // ...
    get: <
        TSelector extends (state: TStateValue) => unknown = (
            state: TStateValue
        ) => TStateValue,
    >(
        selector?: TSelector
    ) => TSelector extends (state: TStateValue) => infer TReturnType
        ? TReturnType
        : TStateValue;
    // ...
};

function createState<T extends StateValue>(initialValue: T): State<T> {
    // ...
}

When using the createState function to create a store with a specific type, like createState(0), VS Code expands the type and displays a verbose and complex type definition:

const numberStore = createState(0);
/*
numberStore: {
  get: <TSelector extends (state: number) => unknown = (state: number) => number>(selector?: TSelector | undefined) => TSelector extends (state: number) => infer TReturnType ? TReturnType : number;
  set: (newValueOrFn: number | ((prev: number) => number)) => void;
  use: <TSelector extends (state: number) => unknown = (state: number) => number>(selector?: TSelector | undefined, equalityFn?: EqualityChecker<...> | undefined) => TSelector extends (state: number) => infer TReturnType ? TReturnType : number;
  onChange: (callback: (value: number, prevValue: number) => void, options?: OnChangeOptions<...> | undefined) => UnsubscribeFn;
}
*/

The Solution: making the type more Opaque

To simplify the display of complex types in VS Code, we can leverage TypeScript's intersection types and a clever type definition. Here's how it works:

Define a Simplify utility type:

export type Simplify<T> = T extends any[] | Date
    ? T
    : {
            [K in keyof T]: T[K];
        } & {};

This type expands objects to show all the key/value types. Given an empty object, it will resolve to an empty object.

Intersect your complex type with Simplify<{}>:

export type State<TStateValue extends StateValue> = {
    // ...
} & Simplify<{}>;

By intersecting the State<T> type with Simplify<{}>, we trigger a mechanism in VS Code that simplifies the displayed type when hovering over variables or types, without altering the actual type.

Use the modified type in the createState function:

function createState<T extends StateValue>(initialValue: T): State<T> {
    // ...
}

const numberStore = createState(0);
// Hovering over `numberStore` will display `State<number>` instead of the expanded type

When using the createState function with the modified State<T> type, VS Code will display the simplified type name State<number> instead of the verbose type definition when hovering over numberStore.

Note: from my experiments, using type NumberStore = State<number> does not achieve the same result. It seems to only work when the type is a return of a function.

Achieving the Reverse effect: expanding the type

Sometimes you may want to expand the whole type to show all the values on hover, instead of showing the Type<Generic>.

The Simplify generic type can help you achieve this

type Input = SomeBuilderType<SomeSuperComplexParsingFunction>
// when you hover on the input, it's to know what the input type is

type ExpandedInput = Simplify<Input>
// ExpandedInput = { id: number }

Conclusion:

The workaround presented in this article can help simplify the display of complex types in VS Code when working with TypeScript.

I hope this article helps you navigate and simplify the display of complex types in your TypeScript projects using VS Code. Happy coding!

How to Make your Web App Super-Satisfying in less than 5 minutes with Davstack Sound

Dawid — Sun, 07 Apr 2024 23:30:40 +0000

Why sound?

Game devs have know this for years - our reward systems love the satisfying feeling of hearing ticks and clicks when we engage with the environment, and celebrations when we make progress.

Even though effect of sounds is often subconscious, the impact of high quality micro-interactions should not be underestimated.

However, with a million other things to do, it can be hard to find the time and effort to implement sounds effects and sound settings into your web apps.

For this reason, I made a small but mighty react makes the process of adding sounds to your React/Next.js a joy to work with - both in terms of developer experience (DX) and user experience (UX).

Usage demo

After a quick 2-minute setup, you will have access to a wide range of high quality sound effects that you can call anywhere in your app with 1 line of code!

import { soundStore } from '@/lib/sound-store';

export const Button = () => {
    return (
        <button
            onClick={() => {
                soundStore.playSound('switchOn');
            }}
        >
            Click me
        </button>
    );
};

Quick Start Guide

Step 0: What is Davstack sound?

Davstack Sound is super fast and simple typescript sound management library for React/Next.js apps.

It is built on top of Howler.js, a battle-tested audio library that supports all major browsers.

It also makes global sound settings a breeze, allowing users to change volume, mute, or stop all sounds.

Step 1: Installing Davstack Sound

To get started, install Davstack Sound in your project by running the following command:

npm install @davstack/sound

Step 2: Adding Sound Assets

Davstack sound is completely sound-agnostic - feel free to use whatever sounds right to you and your users.

Simply place all your sound assets into your /public folder (assuming Next.js usage, adjust otherwise)

I recommend using the Material Design Sound Assets. These assets provide a wide range of well-crafted sounds that are well suited for application interactions.

If you want to use the Material Design Sound Assets, follow these steps:

Download the Material Design Sound Assets from the official website: Material Design Sound Resources
Extract the downloaded ZIP file and locate the 4 main sound folders. (.ogg file format is recommended for a balance between quality and file size)
Rename the folders to: alert, navigation, hero, secondary.
Copy the renamed folders into the /public/sounds/material .

Step 3: Defining Your Sound Store

With the sound assets in place, it's time to define your sound store. Create a new file called sound-store.ts in your project's lib directory (or any other appropriate location).

Sound Store definition example:

// lib/sound-store.ts
import { createSoundStore } from '@davstack/sound';

// path relative to /public (assuming you are using next.js) eg `./public/sounds/switch-on.mp3`
const SOUND_BASE_PATH = './sounds';
export const soundStore = createSoundStore({
    soundNameToPath: {
        switchOn: `${SOUND_BASE_PATH}/switch-on.mp3`,
        switchOff: `${SOUND_BASE_PATH}/switch-off.mp3`,
    },
});

To import all material sounds, copy the following example:

// lib/sound-store.ts
import { createSoundStore } from '@davstack/sound';

const MATERIAL_SOUND_BASE_PATH = '/sounds/material'; // points to /public/sounds/material

const materialSoundNamesToPaths = {
    // can also add any other custom sounds here
    alert: {
        highIntensity: `${MATERIAL_SOUND_BASE_PATH}/alert/alert_high-intensity.ogg`,
        simple: `${MATERIAL_SOUND_BASE_PATH}/alert/alert_simple.ogg`,
        gentleAlarm: `${MATERIAL_SOUND_BASE_PATH}/alert/alarm_gentle.ogg`,
        ringtoneMinimal: `${MATERIAL_SOUND_BASE_PATH}/alert/ringtone_minimal.ogg`,

        error1: `${MATERIAL_SOUND_BASE_PATH}/secondary/alert_error-01.ogg`,
        error2: `${MATERIAL_SOUND_BASE_PATH}/secondary/alert_error-02.ogg`,
        error3: `${MATERIAL_SOUND_BASE_PATH}/secondary/alert_error-03.ogg`,
    },
    notification: {
        decorative1: `${MATERIAL_SOUND_BASE_PATH}/alert/notification_decorative-01.ogg`,
        decorative2: `${MATERIAL_SOUND_BASE_PATH}/alert/notification_decorative-02.ogg`,
        highIntensity: `${MATERIAL_SOUND_BASE_PATH}/alert/notification_high-intensity.ogg`,
        simple1: `${MATERIAL_SOUND_BASE_PATH}/alert/notification_simple-01.ogg`,
        simple2: `${MATERIAL_SOUND_BASE_PATH}/alert/notification_simple-02.ogg`,
    },
    navigation: {
        backwardSelection: `${MATERIAL_SOUND_BASE_PATH}/primary/navigation_backward-selection.ogg`,
        forwardSelection: `${MATERIAL_SOUND_BASE_PATH}/primary/navigation_forward-selection.ogg`,
        hoverTap: `${MATERIAL_SOUND_BASE_PATH}/primary/navigation_hover-tap.ogg`,
        backwardSelectionMinimal: `${MATERIAL_SOUND_BASE_PATH}/primary/navigation_backward-selection-minimal.ogg`,
        forwardSelectionMinimal: `${MATERIAL_SOUND_BASE_PATH}/primary/navigation_forward-selection-minimal.ogg`,
        selectionCompleteCelebration: `${MATERIAL_SOUND_BASE_PATH}/primary/navigation_selection-complete-celebration.ogg`,
        transitionLeft: `${MATERIAL_SOUND_BASE_PATH}/secondary/navigation_transition-left.ogg`,
        transitionRight: `${MATERIAL_SOUND_BASE_PATH}/secondary/navigation_transition-right.ogg`,
        unavailableSelection: `${MATERIAL_SOUND_BASE_PATH}/secondary/navigation_unavailable-selection.ogg`,
        cancel: `${MATERIAL_SOUND_BASE_PATH}/secondary/navigation-cancel.ogg`,
    },
    stateChange: {
        confirmDown: `${MATERIAL_SOUND_BASE_PATH}/primary/state-change_confirm-down.ogg`,
        confirmUp: `${MATERIAL_SOUND_BASE_PATH}/primary/state-change_confirm-up.ogg`,
    },
    hero: {
        decorativeCelebration1: `${MATERIAL_SOUND_BASE_PATH}/hero/hero_decorative-celebration-01.ogg`,
        decorativeCelebration2: `${MATERIAL_SOUND_BASE_PATH}/hero/hero_decorative-celebration-02.ogg`,
        decorativeCelebration3: `${MATERIAL_SOUND_BASE_PATH}/hero/hero_decorative-celebration-03.ogg`,
        simpleCelebration1: `${MATERIAL_SOUND_BASE_PATH}/hero/hero_simple-celebration-01.ogg`,
        simpleCelebration2: `${MATERIAL_SOUND_BASE_PATH}/hero/hero_simple-celebration-02.ogg`,
        simpleCelebration3: `${MATERIAL_SOUND_BASE_PATH}/hero/hero_simple-celebration-03.ogg`,
    },
    ui: {
        cameraShutter: `${MATERIAL_SOUND_BASE_PATH}/primary/ui_camera-shutter.ogg`,
        lock: `${MATERIAL_SOUND_BASE_PATH}/primary/ui_lock.ogg`,
        unlock: `${MATERIAL_SOUND_BASE_PATH}/primary/ui_unlock.ogg`,

        tapVariant1: `${MATERIAL_SOUND_BASE_PATH}/primary/ui_tap-variant-01.ogg`,
        tapVariant2: `${MATERIAL_SOUND_BASE_PATH}/primary/ui_tap-variant-02.ogg`,
        tapVariant3: `${MATERIAL_SOUND_BASE_PATH}/primary/ui_tap-variant-03.ogg`,
        tapVariant4: `${MATERIAL_SOUND_BASE_PATH}/primary/ui_tap-variant-04.ogg`,
        loading: `${MATERIAL_SOUND_BASE_PATH}/secondary/ui_loading.ogg`,
        refreshFeed: `${MATERIAL_SOUND_BASE_PATH}/secondary/ui_refresh-feed.ogg`,
    },
} as const;

export const soundStore = createSoundStore({
    soundNameToPath: materialSoundNamesToPaths,
});

Note: you may want to comment out the sounds you are not using to avoid unnecessary loading of sound assets.

Step 4: Playing Sounds

With the sound store set up, playing sounds in your app is a breeze. Simply import the soundStore and call the playSound method with the desired sound name.

import { soundStore } from 'lib/sound-store';

soundStore.playSound('hero.decorativeCelebration1');

In this example, we import the soundStore and play the "hero.decorativeCelebration1" sound using the flattened object notation.

Step 5: Initializing Sounds (Optional)

To ensure that sounds play instantly without any delay, you can initialize the sounds when your app loads. This step is optional but recommended for the best user experience.

// app/layout.tsx
import { soundStore } from '@/lib/sound-store';

export const Layout = ({ children }) => {
    return (
        <>
            {children}
            <soundStore.InitAllSounds />
        </>
    );
};

Place the soundStore.InitAllSounds component in your app's root layout component. This will preload and cache all the sounds, ensuring instant playback when needed.

Step 6: Customizing Sound Settings

Adjusting global/individual sound settings

Davstack makes it easy to define global sound settings, such as adjusting volume or enabling/disabling sounds.

// Adjusting settings when playing a sound
soundStore.playSound('pop', {
    volume: 0.5,
    playbackRate: 2,
});

// Adjusting global settings
soundStore.volume.set(0.8);
soundStore.soundEnabled.set(false);

Giving users control over global volume

It is best practice to provide users with control over sound settings in your app.

To give users control over the global volume, you can create a volume control component that interacts with the soundStore.

// components/volume-control.tsx
import { soundStore } from '@/lib/sound-store';

export const VolumeControl = () => {
    const volume = soundStore.volume.use();
    return (
        <input
            title="Volume control"
            type="range"
            min="0"
            max="1"
            step="0.01"
            value={volume}
            onMouseUp={() => {
                soundStore.playSound('pop');
            }}
            onTouchEnd={() => {
                soundStore.playSound('pop');
            }}
            onChange={(e) => {
                soundStore.volume.set(parseFloat(e.target.value));
            }}
        />
    );
};

In this example, we create a range input that represents the volume control. It retrieves the current volume value from the soundStore using the use method and updates the volume when the input value changes.

We also play a 'pop' sound when the user releases the mouse or ends a touch interaction to provide auditory feedback.

Note: if the global sound is set to 0.5 and you pass in a volume of 0.5 to the playSound function, the sound will play at 0.25 volume (0.5 * 0.5)

Allowing users to enable/disable sounds globally

To allow users to enable or disable sounds globally, you can create a sound toggle component that interacts with the soundStore.

// components/sound-toggle.tsx
import { soundStore } from '@/lib/sound-store';

export const SoundToggle = () => {
    const soundEnabled = soundStore.soundEnabled.use();
    return (
        <button
            onClick={() => {
                if (soundEnabled) {
                    soundStore.playSound('switchOff');
                    soundStore.soundEnabled.set(false);
                } else {
                    soundStore.soundEnabled.set(true);
                    soundStore.playSound('switchOn');
                }
            }}
        >
            {soundEnabled
                ? 'Sound On (press to turn off)'
                : 'Sound Off (press to turn on)'}
        </button>
    );
};

In this example, we create a button that toggles the sound on or off. It retrieves the current soundEnabled value from the soundStore using the use method and updates the value when the button is clicked. We also play different sounds ('switchOff' and 'switchOn') depending on the state change to provide auditory feedback.

Conclusion:

While adding sounds to your web app may seem like a subtle change, it can make for a surprisingly satisfying user experience.

With Davstack Sound, the process of integrating sounds into your React/Next.js app becomes a delightful and effortless experience.

If you found this guide / package helpful then check out the other Davstack packages for more tools to enhance your web development workflow.

Have a great day, and happy coding! 📈

PS Please share a link to any other audio-asset resources or your website on the comments, I'd love to see your creations!

Boost Your Productivity: Essential Git Aliases to Save 20 Minutes Daily

Dawid — Tue, 05 Dec 2023 15:35:22 +0000

(note: surprisingly, this article was not written by Ai)

Introduction:

Git aliases are a powerful method of automating tasks - saving you time and making coding more enjoyable.

This blog post will give you everything you need to know to get started with optimizing your workflow.

Keep reading to get access to my custom code snippets that are will definitely save you many precious dev minutes and guarantee a job at google (100% guaranteed, no doubt)

Setting Up Prerequisites (2 mins)

Before diving into the aliases, here are a few prerequisites

Ensure you have Git Bash installed. for more info see the official download page
Ensure you have the code command configured (See below)
(optional) I recommend to set up git bash as default vs code terminal, for more info see setting up git bash with vs code

Setting up the `code` command

The code command creates a new file AND opens it in your code editor

  ~/your-project-directory/src> code my-file-name.tsx

NOTE: unlike touch , when the new file is open in your code editor you must hit ctrl+s to ensure is saved.

The convenience this provides is why it is beloved by many developers and a consistent part of my daily development workflow.

The code command is required for some of the advanced bash scripts later in this article to work.

Here is how to set it up:

Inside vs-code, press F1 to open the command pallete
type shell command to find Shell Command: Install 'code' command in PATH command and hit enter
restart your terminal

For more info on this, see this stack overflow post

Defining Git Bash Aliases

My approach

These scripts have been written with typescript / python developers in mind.

My aim is to create scripts that are easy to understand and change by developers most familiar with high-level programming languages.

While some members of the Bash scripting community may find my snippets somewhat unconventional, I hope that the majority finds my methods to helpful.

Defining aliases overview:

~/.bashrc is where you will be placing all of your alias definitions.
You can access this using code ~/.bashrc (or the rc alias later on)
After making changes, ensure to save .bashrc restart your terminal

A few tips:

use ctrl+' to open terminal in vs code
use ctrl+shift+5 to add a new terminal
- eg if you have your development sever running in one terminal, you can still use the second terminal to write commands
use ctrl+d to close the specific terminal instance that you are focused on
use ctrl+c to cancel operation
can “restart” the terminal by using ctrl+shift+5 to create a new one and then ctrl+d to close the current one

Basic use cases

These basic use cases are mostly for convenience and DX

The alias for aliases!

  # Overview: 
  #   Opens ~/.bashrc in vscode so that you can edit your aliases
  # Usage:
  #   ~/anywhere> rc
  alias rc="code ~/.bashrc"

Relative navigation aliases

  # Overview:
  #   Aliases for easily navigating relative to the current directory
  # Usage:
  #   ~/dev/my-app/src/folder/nested-folder> ...
  #   ~/dev/my-app/src> 
  alias .='cd .'            # navigate to current directory
  alias ..='cd ..'          # navigate to parent directory
  alias ...='cd ../../'     # navigate to grandparent directory
  alias ....='cd ../../../' # navigate to great-grandparent directory

Package manager

  # Overview: 
  #   Runs pnpm as normal but more concise
  #   Replace with yarn or npm if needed
  # Usage:
  #   ~/dev/my-app> x dev 
  alias x='pnpm "$@"'

Advanced custom use cases

These are custom use cases that save me a lot of time and effort everyday, and I highly recommend trying them out!

Absolute Navigation (relative to the root of the repo)

  # This a helper function for the git aliases below

  # credit: https://stackoverflow.com/a/38852055
  # Print the name of the git working tree's root directory
  function git_root() {
    local root first_commit
    # git displays its own error if not in a repository
    root=$(git rev-parse --show-toplevel) || return
    if [[ -n $root ]]; then
      echo $root
      return
    elif [[ $(git rev-parse --is-inside-git-dir) = true ]]; then
      # We're inside the .git directory
      # Store the commit id of the first commit to compare later
      # It's possible that $GIT_DIR points somewhere not inside the repo
      first_commit=$(git rev-list --parents HEAD | tail -1) ||
        echo "$0: Can't get initial commit" 2>&1 && false && return
      root=$(git rev-parse --git-dir)/.. &&
        # subshell so we don't change the user's working directory
      ( cd "$root" &&
        if [[ $(git rev-list --parents HEAD | tail -1) = $first_commit ]]; then
          pwd
        else
          echo "$FUNCNAME: git directory is not inside its repository" 2>&1
          false
        fi
      )
    else
      echo "$FUNCNAME: Can't determine repository root" 2>&1
      false
    fi
  }

  # Overview:
  #   Custom implementation of cd command that uses absolute path from git root
  #   Supports custom aliases eg: r a = cd to apps
  #   The alises configured below are specialised for monorepo development with turbo.build 
  #   You can easily tailor these to your needs eg for a non-monorepo setup 
  # Usage examples:
  #   ~/dev/my-app> r a 
  #   => ~/dev/my-app/apps
  #------------------------
  #   ~/dev/my-app> r a/w
  #   => ~/dev/my-app/apps/webapp
  #------------------------
  #   ~/dev/my-app> r a/d
  #   => ~/dev/my-app/apps/docs
  #------------------------
  #   ~/dev/my-app> r p 
  #   => ~/dev/my-app/packages
  #------------------------
  #   ~/dev/my-app> r p/ui
  #   => ~/dev/my-app/packages/ui
  #------------------------
  #   ~/dev/my-app> r t
  #   => ~/dev/my-app/tooling
  function cd_from_git_root() {
    local root
    local input=${1:-}
    local base_key=""
    local subpath=""

    # if no argument provided, set default path
    if [[ -z $input ]]; then
      input="."
    fi

    # Extract base key and subpath
    base_key=${input:0:1}
    subpath=${input:2}

    # Define key => path mappings
    declare -A key_to_base_path
    key_to_base_path[a]="apps"
    key_to_base_path[p]="packages"
    key_to_base_path[t]="tooling"

    # Define specific shortcut => path mappings
    declare -A shortcuts
    shortcuts[a/w]="apps/webapp"
    shortcuts[a/m]="apps/marketing"
    shortcuts[a/d]="apps/docs"

    # Check for specific shortcuts first
    if [[ -n ${shortcuts[$input]} ]]; then
      path="${shortcuts[$input]}"
    elif [[ -n ${key_to_base_path[$base_key]} ]]; then
      path="${key_to_base_path[$base_key]}/$subpath"
    else
      path=$input
    fi

    # Remove leading slash if present
    path=$(echo $path | sed -r "s/^\///")

    root=$(git_root) || return 1  # Get git root using custom git_root function
    root="$root/$path"
    cd "$root" || return 1  # Navigate to the path or return an error
  }

  # add convenient names
  alias cdr='cd_from_git_root'
  alias r='cd_from_git_root'

Scaffolding folders

  # Overview:
  #  A custom implementation of the mkdir command that scaffolds a folder and inner files
  #  first argument is the folder name
  #  second argument is a string of options
  #  options:
  #   - s: (Story)  => generate story file (folder_name.story.tsx)
  #   - d: (Docs)   => generate docs file (folder_name.mdx)
  #   - r: (React)  => make all generated files .tsx instead of .ts 
  #   - t: (Test)   => generate test file (folder_name.test.tsx)
  # Usage examples:
  #   ~/dev/my-app> mkdir+ my-component rst
  #   creates:
  #     my-component
  #       - index.ts
  #       - my-component.tsx
  #       - my-component.story.tsx
  #       - my-component.test.tsx
  #------------------------
  #   ~/dev/my-app> mkdir+ my-component s
  #   creates:
  #     my-component
  #       - index.ts
  #       - my-component.tsx
  #       - my-component.story.tsx
  #------------------------
  #   ~/dev/my-app> mkdir+ my-util t
  #   creates:
  #     my-util
  #       - index.ts
  #       - my-util.tsx
  #       - my-util.test.tsx
  #------------------------
  mkdir+() {
      # get values from arguments
      folder_name=$1
      options=$2

      # Default options
      declare -A opt
      opt[test]="false"  # Could set to true if you want to generate test files by default
      opt[story]="false"
      opt[docs]="false"
      opt[react]="false"

      # Update options based on the input string
      if [[ $options == *"s"* ]]; then
          opt[story]="true"
      fi
      if [[ $options == *"d"* ]]; then
          opt[docs]="true"
      fi
      if [[ $options == *"r"* ]]; then
          opt[react]="true"
      fi
      if [[ $options == *"t"* ]]; then
          opt[test]="true"
      fi

      # Set file extension based on React option
      file_extension="ts"
      if [[ ${opt[react]} == "true" ]]; then
          file_extension="tsx"
      fi

      # Create folder and base files
      mkdir "$folder_name" && cd "$folder_name" &&
      touch "index.${file_extension}" &&
      echo "export * from './$folder_name';" >> "index.${file_extension}" &&
      touch "$folder_name.${file_extension}" &&
      code "$folder_name.${file_extension}"

      # Generate test file by default
      touch "$folder_name.test.${file_extension}"

      # Generate story file if 's' is present
      if [[ ${opt[story]} == "true" ]]; then
          touch "$folder_name.story.${file_extension}"
      fi

      # Generate docs file if 'd' is present
      if [[ ${opt[docs]} == "true" ]]; then
          touch "$folder_name.mdx"
      fi

      # navigate back to where the command was run so that the user can create multiple folders
      cd ..
  }

Evaluation of git alias vs node.js code gen tools

Combining this approach of absolute navigation (r alias) with the folder scaffolding alias (mkdir+) can it super fast to build out a project. This has a significant speed advantage when compared to using node.js codegen tools like plop.js as it only uses bash and therefore can execute the commands without starting up a node.js server.

Although using plop.js is more well for usecases where you have a predictable boilerplate pattern that you reuse frequently. This is because plop enables you to more easily define the contents of the file by using the handlebars templating langauge. I do not recommend trying to define similar templates using bash.

I personally use plop for defining UI components as they all share a similar syntax for the stories / testing / definition file. Let me know if you are interested in accessing my code generation files and I may write another post to share them with you.

Conclusion:

Incorporating these Git aliases into your daily routine can significantly enhance your productivity. For further resources on coding efficiency, check out my other posts on snippets and monorepo management.

Thank you for your time and engagement. If you found this post helpful or have your own snippets to share, I’d love to hear from you in the comments.

About the author:

Thanks for reading! I’m Dawid, founder of Ream and a software engineer passionate about integrating technology with holistic personal growth. My experience in psychology, computer science, and business has fuelled my drive to create human-centric digital tools. This blog reflects my commitment to practical, efficient solutions in software engineering and beyond. If you found this post helpful or want to connect, feel free to reach out. Let’s continue to learn and grow together in our tech journeys.

Forem: Dawid

How to use a custom font on Excalidraw.com

Introduction

Problem

Solution

1. Download the "scripty" chrome extension

2. Configure automatic script injection

3. Add custom font script

4. Bonus tip: using google fonts

Conclusion

Simplifying Complex Type Display in TypeScript and VS Code

Introduction:

The Problem:

The Solution: making the type more Opaque

Achieving the Reverse effect: expanding the type

Conclusion:

How to Make your Web App Super-Satisfying in less than 5 minutes with Davstack Sound

Why sound?

Usage demo

Quick Start Guide

Step 0: What is Davstack sound?

Step 1: Installing Davstack Sound

Step 2: Adding Sound Assets

If you want to use the Material Design Sound Assets, follow these steps:

Step 3: Defining Your Sound Store

Sound Store definition example:

To import all material sounds, copy the following example:

Step 4: Playing Sounds

Step 5: Initializing Sounds (Optional)

Step 6: Customizing Sound Settings

Adjusting global/individual sound settings

Giving users control over global volume

Allowing users to enable/disable sounds globally

Conclusion:

Boost Your Productivity: Essential Git Aliases to Save 20 Minutes Daily

Introduction:

Setting Up Prerequisites (2 mins)

Setting up the code command

Defining Git Bash Aliases

My approach

Defining aliases overview:

Basic use cases

The alias for aliases!

Relative navigation aliases

Package manager

Advanced custom use cases

Absolute Navigation (relative to the root of the repo)

Scaffolding folders

Evaluation of git alias vs node.js code gen tools

Conclusion:

About the author:

Setting up the `code` command