DEV Community: Bobby Plunkett

REST or GraphQL, which do you choose?

Bobby Plunkett — Mon, 18 Apr 2022 15:48:45 +0000

Context

When I started developing, REST APIs were the go-to and became the de facto in all of my projects. Fast forward to early 2019, and I was introduced to my first GraphQL project. When I first saw a GQL implementation, I had plenty of bad things to say about it, most of them stemming from GraphQL being so different from what I had grown used to.

While I had a lot to say about GraphQL when I first used it, I have not created a new REST project since first being introduced to GraphQL.

My Reasoning

It's probably confusing why I continued to use GraphQL over REST. Even after being repulsed when seeing it implemented for the first time. But there are a few things that kept me around:

GQL allows the client to ask only for the data it needs, eliminating under/over fetching data.
- Introduces easy client-side optimizations (Less data == Load Faster)
Removes the need for API versioning as fields can be added and deprecated without affecting the client.
Strongly typed, meaning you know what data is available and the type of data it is.
Integrations with other services.
- The biggest one for me personally is the ability to take GQL projections and apply them to my MongoDB queries. This reduces the amount of data processed through the network and reduces the overhead of the queries.
Subscriptions are fantastic and make introducing real-time data into your application easy.
Apollo, yes, this library is one of the main reasons I still use GraphQL. Setup is quick and easy, comes with a great configurable caching system, handles errors, and plenty of other utilities, making the experience a lot nicer.

Your Thoughts?

Even though I use GraphQL, what are your preferences and thoughts on either technology? I would like to see other viewpoints on this topic, maybe even learn something new in the process.

function or const, which do you prefer? (TypeScript/JavaScript)

Bobby Plunkett — Fri, 15 Apr 2022 15:38:12 +0000

When it comes to writing a function, which style do you prefer?

const

const doSomethingCool: string = () => 'yes'

function

function doSomethingCool(): string {
  return 'yes';
}

My Thoughts

Personally, after years of using const, I have recently switched back over to function for a few reasons.

The intent is clear and concise, so that readers quickly differentiate between variables and functions. The faster you know what is going on, the better right?
Function hoisting, meaning it lets you use a function before you declare it in your code, where with const it will be undefined until it has been reached in the execution.
- Also hoisting issues related to using function in bundling tools is no longer the issue it once was
Named functions show up in stack trace messages, which is handy

Edge-cases

While I have switched to using function in most cases, arrow functions still serve a important purpose in my codebase. Such as providing callbacks to high order functions, such as map, reduce, forEach, etc...

function iStillLikeArrows(users: Array<User>): Array<string> {
  return users.map(u => u.name);
}

What Are Your Thoughts?

I would love to hear other opinions on this topic, and see different reasons/viewpoints as to why to favor one side more than the other.

Also remember, no one is wrong choosing one or the other, it's a personal preference.

Light/Dark Mode Toggle Using MUI and Recoil (TS)

Bobby Plunkett — Fri, 08 Apr 2022 16:52:35 +0000

What Are We Going To Do Here?

Recently, I needed a good way to toggle between light and dark mode in a project. I also needed it to remember the user's decision when they refresh or leave the site by storing the value within local storage. This is probably not the best way to do this; it is just what I came up with for the task. My project was already using both MUI and Recoil, which is the reasoning behind using these libraries. If you are only using Recoil within your project, then this guide still may be helpful with some tweaks to fit your theme framework.

Getting Started

In the next section, we will create a new React project, install Recoil & MUI, and set everything up.
I will not be installing any other packages than what is required for this guide, such as linting, formatting, etc.

Install The Dependencies

First, we need a React project, and for this, I will be using the Typescript template. (Ignore if you already have one set up)

npx create-react-app light-dark-toggle --template typescript

Now install Recoil

If you are using any other package manager such as yarn or pnpm, just replace npm with whatever one you use. For simplicity, I will be using NPM for this guide.

npm install recoil

⚠️ If you do NOT want MUI in your project, skip the section below, but warning that parts of this guide will be incompatible depending on your theme framework. ⚠️

Now last thing we need is to install MUI, emotion, Roboto Font, and MUI SVG Icons

npm install @mui/material @emotion/react @emotion/styled @fontsource/roboto @mui/icons-material

Setting It All Up

To set up Recoil we simply need to wrap our app with a RecoilRoot component.

import React from 'react';
import { RecoilRoot } from 'recoil';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <RecoilRoot>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </RecoilRoot>
  );
}

export default App;

If you installed MUI, you also need to set up the Roboto font we installed.

If you are in a new React project, head to src/index.tsx. If you did not just create your project, in most cases the same path will still be valid, but if it is not, then find the root of your project, which is usually the file that contains a call to ReactDOM.render.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

/* Import the required sizes of the Roboto font */
import '@fontsource/roboto/300.css';    // 300
import '@fontsource/roboto/400.css';    // 400
import '@fontsource/roboto/500.css';    // 500
import '@fontsource/roboto/700.css';    // 700

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

You also want to include this option within the tsconfig.json file:

"jsxImportSource": "@emotion/react",

Creating The Atom 🔬

Recoil is a state management library, and the data store object is represented as an atom. For our use case, we will be storing the current mode within an atom, also leveraging some cool things the library offers to store and retrieve values from local storage.

Defining The Data

Create a new file to store our atom, and name it whatever you like. For this guide, I chose app-atoms.ts. Then create the atom to store our theme mode.

import { atom } from 'recoil';

export type ThemeMode = 'light' | 'dark';

export const appThemeMode = atom<ThemeMode>({
  key: 'AppThemeMode',
  default: 'light',
});

But you're probably asking, "How does this use local storage to store the user's choice?" and that makes sense.

The answer is pretty simple. It doesn't.

But don't fret. This is where another cool Recoil feature makes this job easy. Atom Effects are similar to Reacts useEffect. However, they are triggered by changes within the atom rather than a component. This is useful because this decouples the state outside a single component, avoiding any prop juggling to provide data to child components.

Effects And Local Storage

Since we need to store and retrieve data from local storage, we can use atom effects to pull data on load and update on change.

import { atom, AtomEffect } from 'recoil';

export type ThemeMode = 'light' | 'dark';

/**
 * This is our Atom Effect which will behave similarly to React.useEffect with
 * the atom in the dependencies array
 *
 * @param key the value used to store and retrieve data from local storage
 */
const localStorageEffect =
  (key: string): AtomEffect<ThemeMode> =>
  ({ setSelf, onSet }) => {
    // Retrieve the value stored at the specified key
    const stored = localStorage.getItem(key);
    // Check if the value exists and is light or dark
    if (stored === 'dark' || stored === 'light') {
      // If the value is valid, the call the provided function setSelf which initializes the atom value
      setSelf(stored);
    }
    // Creates the callback triggered when the atom is changed
    onSet((value, _, isReset) => {
      if (isReset) {
        // If atom has been reset then remove it from local storage
        localStorage.removeItem(key);
      } else {
        // If value has changed then store the value in local storage
        localStorage.setItem(key, value || _); // the || is a fail-safe if for any reason value is null the value will revert to default
      }
    });
  };

export const appThemeMode = atom<ThemeMode>({
  key: 'AppThemeMode',
  default: 'light',
  // Now we need to add it to our effects array
  effects: [localStorageEffect('example-theme-mode')],
});

And now as our atom changes, it will store, update, and remove our theme data from local storage as needed.

Creating A Theme Provider

⚠️ The following section will be focused on MUI. If you did not import this package, you would need to improvise to fit it into your framework. ⚠️

MUI provides a great theme system and will be using that for this guide. To keep things a bit more clean and tidy, we will create a new component that will provide this theme system, which I named ThemeProvider.tsx. This component will read the atom, and memoize an MUI Theme object to only update when the atom value changes.

import React, { ReactElement, useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { createTheme, CssBaseline, ThemeProvider } from '@mui/material';
import { appThemeMode } from './app-atoms';

interface Props {
  children: ReactElement;
}

function AppThemeProvider({ children }: Props): ReactElement {
  const mode = useRecoilValue(appThemeMode);
  const theme = useMemo(
    () =>
      createTheme({
        palette: {
          mode,
          primary: {
            main: '#61dafb',
          },
          secondary: {
            main: '#EB9612CC',
          },
        },
      }),
    [mode]
  );
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

export default AppThemeProvider;

Let's Make Mode Toggle Button

We also need to make a button that toggles light/dark mode, this component will change the icon based on the current mode and update it the mode once clicked. This relies on the atom data source we created earlier.

import React, { ReactElement } from 'react';
import { useRecoilState } from 'recoil';
import { IconButton } from '@mui/material';
import LightModeIcon from '@mui/icons-material/LightMode';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import { appThemeMode, ThemeMode } from './app-atoms';

interface DynamicIconProps {
  mode: ThemeMode;
}

function DynamicIcon({ mode }: DynamicIconProps): ReactElement {
  if (mode === 'dark') return <DarkModeIcon />;
  return <LightModeIcon />;
}

function ModeToggleButton(): ReactElement {
  const [mode, setMode] = useRecoilState(appThemeMode);

  const toggleMode = () => {
    setMode((prevState) => (prevState === 'light' ? 'dark' : 'light'));
  };

  return (
    <IconButton onClick={toggleMode} sx={{ width: 40, height: 40 }}>
      <DynamicIcon mode={mode} />
    </IconButton>
  );
}

export default ModeToggleButton;

Also, to make the default project a bit nicer, let's slim down the standard CSS as MUI will replace them.

Open the App.css file and replace the contents with:

HTML,body,#root {
  height: 100%;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Finally, Putting It All Together

We now have all the pieces we need to get this running, with some last few modification to App.tsx we can finally see
our working mode toggle with persistence.

import React from 'react';
import { RecoilRoot } from 'recoil';
import { Container, Link, Stack, Typography } from '@mui/material';
import AppThemeProvider from './AppThemeProvider';
import ModeToggleButton from './ModeToggleButton';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <RecoilRoot>
      <AppThemeProvider>
        <Container sx={{ height: '100%' }}>
          <Stack direction="row" justifyContent="flex-end" sx={{ my: 4 }}>
            <ModeToggleButton />
          </Stack>
          <Stack justifyContent="center" alignItems="center" height="75%">
            <img src={logo} className="App-logo" alt="logo" />
            <Typography>
              Edit <code>src/App.tsx</code> and save to reload.
            </Typography>
            <Link
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
              underline="none"
            >
              Learn React
            </Link>
          </Stack>
        </Container>
      </AppThemeProvider>
    </RecoilRoot>
  );
}

export default App;

Let's See It Already

Assuming I explained it clearly, and you got it all put together in the right places, you can run:

npm run start

Drumroll...... 🥁

It should also remember the last decision you made after refreshing or navigating away from the URL.

Conclusion

As I said before, I'm not claiming this is the best way to approach this task, but this is what worked for my project, and I thought I would share the solution I was able to come up with. I hope someone finds this helpful, and if you have a question, please feel free to ask! If you have any suggestions or comments, please let me know. I'm always looking for other viewpoints and areas to improve.

Thanks for reading!

yet another TS/JS color library (but with extra steps)

Bobby Plunkett — Wed, 06 Apr 2022 06:24:29 +0000

Hello

Before I start, scroll down to see a quick and dirty example if you don't like reading or don't care and want to see code. For more information and examples, head over to the Documentation resource or the GitHub Repo.

Over the past couple of months, I have slowly written a color conversion and manipulation library, @skinnypete/color, in my off-time and have finally published the package to NPM.

The project is still being actively developed but is at a usable point, and getting feedback and maybe even some community support would be beneficial.

To learn more about the project:

Oh, did I mention it's written in Typescript? So everything is type-safe. But no worries if TS isn't your flavor; the package also supports JS.

What Does It Do? And Why Should I Use It?

@skinnypete/color is a modern, lightweight, color manipulation & conversion library. It can be used for simple tasks, like just changing a color, to even more complex operations which require specific color models.

Some stuff it offers:

Supports multiple color models
- RGBA
- HSL
- HSV
- HWB
Accepts CSS color-names
Full of features and easy-to-use (Builder Pattern design)
Written in Typescript
Plenty of QOL enchantments
Lots of unit tests and coverage
Works directly within the color space instead of relying on a single color model to generate output values
Dependency free

But Why?

Yes, I know there are other excellent libraries when dealing with colors, and to be honest, my favorite for quite a while now has been color. However, I wanted to approach it differently than I have seen among other libraries (for better or worse).

The design of @skinnypete/color differs because each color model is treated as its own instance. Most libraries use a single model, most of the time being RGBA, and leverage that model to generate output values such as CSS color values, hex, etc. This library treats each model separately and performs operations directly within the model. This allows for the isolation of models and retaining accuracy for sensitive projects while providing an easy-to-use API and digestible structure.

Well, That's Cool. How Do I Use It?

Well, it's pretty easy.

import {RGBA, HSLSpace } from '@skinnypete/color'

const hsl: HSLSpace = RGBA.fromCssColor('RebeccaPurple')
    .lighten(10)
    .rotate(0.45)
    .fade(25)
    .toSpace('hsl');

console.log(hsl.toString())     // hsl(315,50%,44%)
console.log(hsl.toHexString())  // #a8388c
console.log(hsl.toObject())     // { hue: 315, saturation: 50, lightness: 44 }

Now do break down what is going on here:

import {RGBA, HSLSpace } from '@skinnypete/color' - Import the library of course
RGBA.fromCssColor('RebeccaPurple') - We use the RGBA color model space to generate a new instance using a CSS color name
lighten(10) - Lightens the RGBA model by 10%
rotate(0.45) - Rotates the Hue of the RGBA model by 45% (You can use both 0-1 and 1-100 for ratio values)
fade(25) - Fade the alpha of the RGBA model by 25%
toSpace('hsl') - Convert the current color space to the HSL color model
toString() - Returns a valid CSS color value
toHexString() - Converts the color model to a hex color value
toObject() - Return the color model data as an object

There is many other methods available for manipulating and converting your color; to learn more about these methods head over to the documentation resource site.

You Can Use These Models At The Moment

They are currently still being added, but now the following are available:

RGBA (Red, Green, Blue, Alpha)
HSL (Hue, Saturation, Lightness)
HSV (Hue, Saturation, Value)
HWB (Hue, Whiteness, Blackness)
CMYK (Coming Soon™)

I Appreciate You

Honestly, if your read all this, thanks. Hopefully, I was convincing enough to get a consideration next time you're skimming through NPM looking for a color library.

To learn more, head over to @skinnypete/color, and if you have any questions or just want to say it sucks please let me know :)