DEV Community: Daniel Bellmas

Configure Your Terminal With Shortcut keys

Daniel Bellmas — Sat, 09 Mar 2024 10:28:03 +0000

I couldn't delete a whole line with my regular shortcut:
Cmd + Backspace.

To enable those kind of shortcuts in iterm2 we need to edit the prefrences:

Preferences > Keys > Show/hide all windows with a system-wide hotkey

Resource

Stack exchange

Music Trick For Mac Users

Daniel Bellmas — Sat, 09 Mar 2024 10:11:31 +0000

For mac users, the pain of pressing the play button and accidentally triggering the apple music app is very familiar.
You must've tried to delete it but realized it can't be done.

The Solution

Of course there's a smarter person that already solved this issue - noTunes 🙏

Download

  brew install --cask notunes

Set noTunes to launch at startup

Navigate to System Settings
Select General
Select Login Items
Click the + under Open at Login and select noTunes

And...that's it!

If you wanna change the default music player you can simply run the command below and don't forget to replace YOUR_MUSIC_APP with the name of your music app.

defaults write digital.twisted.noTunes replacement /Applications/YOUR_MUSIC_APP.app

For example, I replaces mine with the YouTube music.

If you wanna hide the menu bar icon, just right click the menu bar icon and click Hide Icon.

Resource

https://github.com/tombonez/noTunes?tab=readme-ov-file#notunes

'return await' in a try/catch

Daniel Bellmas — Sat, 09 Dec 2023 15:59:02 +0000

This might sound weird to you, the first thing that comes to mind is: 'Eslint will tell me to remove the await, there is no need for an await after a return'

But the case is a different when we wrap our promise in a try/catch.

async function foo() {
  try {
    return await waitAndMaybeReject();
  } catch (e) {
    return 'caught';
  }
}

This also applies when we don't need to return resolved value of the promise, we always need to await it if the returned promise is inside a try/catch and we want to catch the error.

By returning a promise, we’re deferring its result, so our catch block never runs.
This also happens, when not awaiting a promise (regardless if we return or not).

Only outside of try/catch blocks, return await is redundant. There’s even an Eslint rule, but this rule allows a return if it's in try/catch.

Bonus🔥

If you want to print something after a return statement, instead of temporaraly creating a variable, printing and then returning, like this:

async function foo() {
  const res = await fetch();
  console.log('after fetch')
  return res;
}

We can wrap the return with a try and finallly (unless you need to print the resolved value of the promise of course), like so:

async function foo() {
  try {
    return await fetch();
  } finally {
    console.log('after fetch')
  }
}

KillNode Script For React Apps

Daniel Bellmas — Sat, 09 Dec 2023 15:32:57 +0000

TL;DR
This is a script to delete a running node process, if one exists.

#!/bin/bash

lsof_output=$(lsof -i :3000)

if [ -n "$lsof_output" ]; then
  node_line=$(echo "$lsof_output" | grep "node")

  if [ -n "$node_line" ]; then
    pid=$(echo "$node_line" | awk '{print $2}')

    # Kill the Node.js process with SIGKILL (9)
    echo "Killing Node.js process with PID $pid"
    kill -9 $pid

    echo "Node.js process killed."
  else
    echo "No Node.js process found on port 3000."
  fi
else
  echo "No process is listening on port 3000."
fi

It's very useful when running npm start to spin up a React app and you get a Port 3000 is already in use message.

You can also pair it with the npm start command right after it for a better experience. If the port is not in use the script will not do anything.

I went ahead and created an alias for even more convenience, and to do that follow these steps:

Open your .zshrc or .bashrc with: code ~/.zshrc
Add alias killnode="killnode.sh && npm start"
Run it from you app's folder

Enjoy 🦾

Spread Multiple Props With This Syntax

Daniel Bellmas — Fri, 15 Sep 2023 10:12:23 +0000

In React, when working with components, you might encounter scenarios where you want to conditionally pass multiple props based on a certain condition. Fortunately, there's a concise syntax that allows you to do just that.

The Conditional Spread Syntax

Imagine you have a React component named <Button />, and you want to conditionally pass multiple props (color and size) to it based on some condition. Here's how you can achieve this using the conditional spread syntax:

function App() {
  const [isLoading, setIsLoading] = useState(false)

  return (
    <div>
      {/* Conditional spreading of props */}
      <Button {...(isLoading && { color: 'primary', size: large })}>
        Click me
      </Button>
    </div>
  );
}

In this example:

We first define a condition in this example it's isLoading that determines whether we want to pass the additional props.
We define the color and size variables, which represent the props we want to conditionally pass to the <Button /> component.
Within the JSX, we use the conditional spread syntax:

{...(isLoading && { color, size })}.

If the condition is true, it spreads the object { color, size } as props to the <Button /> component.
If the condition is false, no props are spread, and the <Button /> component receives only its default props.

We render the <Button /> component with the conditional props, and it will have the additional properties (color and size) only when the condition is met.

This technique provides a clean and concise way to conditionally spread multiple props onto a component, making your code more readable and maintainable when you have varying prop requirements based on specific conditions.

Prefix Unused Variables With Underscore

Daniel Bellmas — Fri, 15 Sep 2023 09:52:33 +0000

We're always on the lookout for clever ways to make our code more readable and maintainable.
Today, let's explore a quick and fun little trick that involves prefixing unused variables in function arguments with an underscore (_). This simple technique can help us signal to others (and ourselves) that these variables are irrelevant to the current task at hand.

We can also only use an underscore without any variable. Still, the downside is that it can be confusing as to what this variable that we're ignoring is, and not as descriptive. (Eslint too will understand this syntax)

Imagine you're working on a web application that fetches data from an API. The API response includes a callback function with several arguments, but you're only interested in the first and last argument. Here's how the underscore prefix can help:

api.fetchData((data, _statusCode, headers) => {
  // Process 'data' and ignore '_statusCode'
  console.log(data, headers);
});

In this example, you're using the api.fetchData function, which provides a callback with three arguments. By prefixing _statusCode with an underscore, you make it clear that you're intentionally ignoring this variable in your callback function. This practice enhances code readability and helps others understand your coding intentions.

Final Thoughts

The underscore prefix is a valuable convention for callbacks that provide more arguments than necessary. It simplifies code readability and helps convey your coding intentions clearly. So, the next time you encounter surplus callback arguments, don't hesitate to prefix the unused ones with an underscore. Your fellow developers (and future self) will appreciate the clarity and maintainability it brings to your code! 🚀

Dependent Function Arguments With TypeScript

Daniel Bellmas — Fri, 04 Nov 2022 19:01:03 +0000

Typescript is an excellent tool for making sure we have fewer bugs by having the IDE complete our code in accordance with the types we defined.

Here we'll see how to use mapped types to have more control over our functions while making them more readable for the next developer that uses those functions.

const enum DATA_TYPE {
  STYLE = 'STYLE',
  THEME = 'THEME'
}

const enum STYLE_PROPERTY {
  ID = 'ID',
  NAME = 'NAME',
  DATE = 'DATE'
}

const enum THEME_PROPERTY {
  ID = 'ID',
  NAME = 'NAME',
  LAST_MODIFIED = 'LAST_MODIFIED',
  ORIGIN_THEME = 'ORIGIN_THEME',
  PROTECTED = 'PROTECTED'
}

interface ListGetTypeMap {
  [DATA_TYPE.STYLE]: STYLE_PROPERTY[];
  [DATA_TYPE.THEME]: THEME_PROPERTY[];
}

interface ObjectGetTypeMap {
  [DATA_TYPE.STYLE]: {
    [STYLE_PROPERTY.ID]?: string;
    [STYLE_PROPERTY.NAME]?: string;
    [STYLE_PROPERTY.DATE]?: string;
  };
  [DATA_TYPE.THEME]: {
    [THEME_PROPERTY.ID]?: string;
    [THEME_PROPERTY.NAME]?: string;
    [THEME_PROPERTY.LAST_MODIFIED]?: string;
    [THEME_PROPERTY.ORIGIN_THEME]?: string;
    [THEME_PROPERTY.PROTECTED]?: boolean;
  };
}

type TGetProperty = <T extends keyof ListGetTypeMap>(type: T, keys: ListGetTypeMap[T]) => ObjectGetTypeMap[T];

Try it out in this Typescript Playground 🎈

Code Breakdown

Our goal here is to make sure the developer that uses a function of type TGetProperty, will have Typescript guard the arguments he gives that function.

In our case, we want to make sure that every item in the keys array is either of type STYLE_PROPERTY[] or THEME_PROPERTY[].
By defining the type argument as DATA_TYPE.STYLE or DATA_TYPE.THEME
we get the type of the keys argument.

This is a scalable solution

If we want to add another enum like CONTENT_PROPERTY for example, all we need to do is add it to ListGetTypeMap and ObjectGetTypeMap; and we have support for it too 🎇

Let's see some examples

Say func1 is a function that is of type TGetProperty.

Bad examples ⛔

When passing DATA_TYPE.STYLE to the type argument, Typescript expects the next argument to be of type STYLE_PROPERTY only,
and the error message is pretty clear too so that's cool 🆒

Same here, passing DATA_TYPE.THEME to type will make Typescript reject an array with items of type STYLE_PROPERTY, and only accept items of type THEME_PROPERTY.

Good examples ✅

Conclusion

Use Typescript to help set guards and guidelines for the next developer that will use the functions you wrote.
This will result in fewer bugs and overall more productive coding.

5 Preferences Tweaks For A New Mac

Daniel Bellmas — Sat, 22 Oct 2022 11:02:33 +0000

1. Screenshot Shortcut

The default when taking a screenshot is to save it, but most often we want to just send it to someone right away so to make things easier, change the shortcut to:
⌘ Cmd + ⇧ Shift + 4

Go to System Preferences -> Keyboard -> Shortcuts tab

2. Speed of Mouse Cursor

The default speed is too slow in my opinion, change it to your liking, he is mine 🙂

Go to System Preferences -> Mouse

3. Speed of keyboard Cursor

The default here is also slower than what I prefer.

Go to System Preferences -> Keyboard

4. Untick the `fn` Option

This option will remove the need for pressing the fn key with one of the F1, F2, F3.... keys.

Most often I use the F2 key to change variable names in VsCode.

Unfortunately, this only works for an apple keyboard, not external ones.

Go to System Preferences -> Keyboard

5. Text Replacements

Save time by putting your most frequently used phrases here.
My favorite is the email one :)

Go to System Preferences -> Keyboard -> Text

Preload Fonts in Storybook

Daniel Bellmas — Sun, 16 Oct 2022 14:10:38 +0000

Click here to see how to Preload Fonts

To make it work in Storybook, all we need to do is to utilize the preview-head.html file (create it in the .storybook folder) that serves the same purpose as the react-helmet-async library in react - injects its content into the head tag.

See the story-rendering section in the docs for more information about how we can add code that affects all stories.

Preload Fonts

Daniel Bellmas — Sun, 16 Oct 2022 11:42:49 +0000

Usually, fonts are either downloaded from a third-party source, such as Google Fonts, or from a file that is stored in the build folder.

After running the build we get a static folder that houses 2 folders: js, css.
If we downloaded some font files they will be inside a third folder: media.

We can manually download them, or download a npm package, like @fontsource, that inside it has the files.

The browser will then load those at its own pace, but that will probably cause a UI flicker of the default browser fonts and then the desired fonts.

For a better UI feel, we have to tell the browser to preload them.

In order to achieve that we need to add a link tag that preloads the href it's given:



<link
rel="preload"
href="https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2"
as="font"
crossOrigin="anonymous"
/>

But how do I know what to put inside the `href`?

For that, we need to open the network tab in the dev tools, see what the browser loads, and copy it :)

To locate the font request, choose the Font filter at the top.

If we are using React we can add this link tag to the index.html (just like in Vanilla JS) or inside our App.tsx, but to access the head tag from App.tsx we'll need to use the help of the react-helmet-async library.
All it does is insert its children to the head tag.
And of course, instead of "dirting" our App.tsx with more code, we can wrap it in a separate component - <PreloadFonts />

This nav bar, for example, will look like this for a split second (the gif is slowed down for a better look at the change).

But after preloading the font we get no flicker:

The same process applies to the fonts that come from a library or font files that we downloaded, the only difference is that the `href` will be relative, like so:



<link
rel="preload"
href="/static/media/libre-franklin-latin-400-normal.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>

Now my question is why not all fonts are preloaded automatically if there is an evident UI flicker?!

React Typescript Snippets

Daniel Bellmas — Sat, 15 Oct 2022 10:09:02 +0000

If you too are tired of typing the same code when creating a new component in react than VS Code provides a cool solution: Code snippets 🔥.

Here are two snippets for Creating React components with Typescript:

Default Exported React Component



  "Typescript default React component": {
    "scope": "typescriptreact",
    "prefix": "rfcd",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
  }

Exported React Component



"Typescript React component": {
    "scope": "typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "export const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
    ],
  }

Flow breakdown

Type the prefix, in this case, rfc or rfcd. (You can call them whatever you like 🙂).
Write the interface props.
Press the tab to jump to the function.
Add the props you wrote in the interface. (This feels like another step that can be optimized, take the props from the interface but I haven't yet found a solution for that)
Press tab.
Start writing the return of the component or just leave it as is with the Component's name.

Vs Code gives us variables we can use in the snippets, here I'm using the TM_FILENAME_BASE variable which gives me the name of the file (without its extension).

The common convention is to make the name of the file the same as the name of the component, but if that's not your case then it's possible to alter that variable, look here for more information.

To create your own snippets you'll need to go to Code > Preferences (User Snippets under File > Preferences on Windows), and then select the language for which the snippets should appear, or the New Global Snippets file option.

I've heard of an extension called Folder Template, which creates a folder structure that has a ready-made template inside, I haven't tried it yet but it seems like a good productivity hack, so stay tuned for another post about it in the near future 🙂.

Return Type That Is Dependent On Argument's Type

Daniel Bellmas — Mon, 10 Oct 2022 13:56:25 +0000

In this example, the return type of a hook depends on whether the argument is passed.

So here we have a useBreakpoint hook that, from the screen resolution, gives us the current breakpoint we're on; and it also allows us to optionally pass a breakpointMap, which is just an object that maps a breakpoint to some styles we want to change according to the current breakpoint (activeBreakpoint).

The Objective

Tell Typescript to make mappedValue's type undefined only if the breakpointMap(the argument) is not passed.
If it is passed, we want it to be defined as the value of the mapped object.

At the return we let Typescript know the hook's return type by using type assertions.

We can use the power of Generics as if they were function arguments.

UseBreakpointsResult receives 2 generic types T and V.

T is the type of the value mapped to each breakpoint, for example:

const breakpointMap = { sm: "a", md: "b", lg: "c" }

Here, T will be a string, because "a" or "b" or "c" are the values there are mapped.

V - we pass typeof breakpointMap, which can either be undefined (no arguments passed) or T (a map object was passed).

The important thing to understand here is that `mappedValue`'s type won't be with a union separator (`undefined | T`), it's either `T` or `undefined`.

That is done by asking: V extends undefined ? never : T

If V is undefined then we don't want the mappedValue, otherwise let mappedValue's type be T.

Why is it so critical to tell `Typescript` `mappedValue` should either be `undefined` or `T`?

If we don't check the type of the argument then the type is either T | undefined, which means we have to check if it's undefined every time before we render our component, or add a Non-null assertion operator, which will uglify the code unnecessarily.

Using vs. Not Using This Method

✅ Using

When the breakpointMap is not passed the type will be undefined:

When the breakpointMap is passed the type will be, in this instance, string:

⛔️ Not Using

Here we define the mappedValue's type to be T | undefined.

When mappedValue's type is T | undefined we'll get this error:

⚡️ Even though we passed the `breakpointMap`! ⚡️

Press on `Open Sandbox` to play with the code 🎈

codesandbox.io

Typescript helps us to better communicate our intentions and understand others' intentions.
So be like this bird and go explore Typescript! 🗺 🦅

DEV Community: Daniel Bellmas

Configure Your Terminal With Shortcut keys

Resource

Music Trick For Mac Users

The Solution

Download

Set noTunes to launch at startup

And...that's it!

Resource

'return await' in a try/catch

Bonus🔥

KillNode Script For React Apps

Spread Multiple Props With This Syntax

The Conditional Spread Syntax

Prefix Unused Variables With Underscore

Final Thoughts

Dependent Function Arguments With TypeScript

Try it out in this Typescript Playground 🎈

Code Breakdown

This is a scalable solution

Let's see some examples

Bad examples ⛔

Good examples ✅

Conclusion

5 Preferences Tweaks For A New Mac

1. Screenshot Shortcut

2. Speed of Mouse Cursor

3. Speed of keyboard Cursor

4. Untick the fn Option

5. Text Replacements

Preload Fonts in Storybook

Click here to see how to Preload Fonts

Preload Fonts

But how do I know what to put inside the href?

For that, we need to open the network tab in the dev tools, see what the browser loads, and copy it :)

The same process applies to the fonts that come from a library or font files that we downloaded, the only difference is that the href will be relative, like so:

React Typescript Snippets

Default Exported React Component

Exported React Component

Flow breakdown

Return Type That Is Dependent On Argument's Type

The Objective

The important thing to understand here is that mappedValue's type won't be with a union separator (undefined | T), it's either T or undefined.

Why is it so critical to tell Typescript mappedValue should either be undefined or T?

Using vs. Not Using This Method

✅ Using

⛔️ Not Using

⚡️ Even though we passed the breakpointMap! ⚡️

Press on Open Sandbox to play with the code 🎈

4. Untick the `fn` Option

But how do I know what to put inside the `href`?

The same process applies to the fonts that come from a library or font files that we downloaded, the only difference is that the `href` will be relative, like so:

The important thing to understand here is that `mappedValue`'s type won't be with a union separator (`undefined | T`), it's either `T` or `undefined`.

Why is it so critical to tell `Typescript` `mappedValue` should either be `undefined` or `T`?

⚡️ Even though we passed the `breakpointMap`! ⚡️

Press on `Open Sandbox` to play with the code 🎈