DEV Community: JorensM

Creating a tab-synced music player in React

JorensM — Wed, 10 Jan 2024 08:24:54 +0000

Warning, kind of a long read, here is the source code if you don't feel like reading the entire article

Hi dear readers!

In a recent project, I was tasked with creating a music player. The requirements were as follows:

The player had to work and sync even with multiple tabs open
The player state needed not to be reset upon a refresh

It was certainly an interesting task and the features listed above were something I hadn't worked with before.

In this article I'd like to recreate this music player, and show you, step-by-step, how to do it.

Our player will have the following features:

Tab syncing
State persistence between refreshes
Play/Pause/Prev/Next buttons
Song info such as cover art and title/author
Songs will be fetched from the app's public folder, and you can easily add more songs by adding a sound file, cover art and a metadata file to the app's public folder

The project will be written in TypeScript, but you can use JS just as well (just omit any TypeScript syntax).

This is what the final result will look like:

Set up

I will assume that you already know how to set up a project. I will personally be using Vite to set up my project.

After having set up our project, we will need to install 2 libraries (that I wrote myself) - react-tab-state and react-persist-state. These libraries will allow us to sync our player instances between tabs and also persist them even after the page has been closed. If you want to learn how these libraries work (they're actually quite simple), I wrote 2 articles about that, which you can find by following the links below:

For icons, I will be using the following ones:

But you can of course use any icons you want.

Project Structure

After having set up our project, let's walk through our project structure and which files we'll be writing

The project structure will be as follows:

App.tsx - The page where our music player will be displayed
style.css - Where our styles will reside
useMusicPlayer.ts - A hook for manipulating audio
MusicPlayer.ts - The music player component
SongMetadata.ts - Type for our song metadata objects
util.ts - Utility functions
IconButton.tsx - Reusable icon button with animations
PlayButton.tsx - Component for our play button
TimeDisplay.tsx - Component for displaying time in the playere player

Additionally, our public folder will have the following structure:

cover_art/ - This is where we will keep the cover art for the songs. The file name should be of .jpg format and should match the ID of the song defined in songs_metadata.json
icons/ - Folder with our icon files
songs/ - Folder with our songs. The files should be of .wav filetype and their name should match the ID of the song
worker.js - Our worker file that will manage the information about the main tab (needed for syncing the players across tabs)
songs_metadata.json - This is where information about our songs will be, such as song ID, title and author.

Alright, now we know what our project structure will look like, we can start coding! If at any point you feel lost as to where a certain piece of code should go, feel free to refer to the source code!

`useMusicPlayer.ts`

First of all, let's write our useMusicPlayer hook.

Let's begin by scaffolding our function



export default function useMusicPlayer() {

}

Next up, let's add all the necessary state



export default function useMusicPlayer() {
    const audio = useRef(document.createElement('audio'));

    const [isPlaying, setIsPlaying] = useTabState(false, 'is_playing');
    const [src, setSrc] = useState<string>("");
    //setCurrentTime is for local use only, for setting time use updateTime
    const [currentTime, setCurrentTime] = useTabState<number>(0, 'current_time');
    const [updatedTime, updateTime] = useTabState(0, 'updated_time');

    const [isMainTab, setIsMainTab] = useState<boolean>(false);

    const [storedTime, setStoredTime] = usePersistState(0, 'stored_time');

    const [maxTime, setMaxTime] = useState(0);
}

Let's go through each line and see what kind of state they define

First we create an audio ref, this will hold a reference to our HTML audio element that we will use to play audio. We won't actually be showing this element on the page, we'll just be using it for playback.

Next we have isPlaying. This determines whether our player is currently playing or paused. You may notice that we're not using a regular useState() function to create this state. useTabState() is a special hook that I created that allows you to sync the given state across tabs. So if the value changes in one tab, it will also change in any other tabs for this page. The first argument is the initial value, and the second argument is a unique ID to identify our state.

Then we have a src state that determines the URL of the source sound file that the audio player should be playing.

Next we have currentTime and updatedTime. currentTime tells us the current time of our audio playback, and updatedTime is needed to act as a proxy when setting current time, so we don't run into an infinite loop when setting current time with our slider and syncing state across tabs. You may notice that currentTime and 'updatedTime' also use useTabState, this is because we want to sync the current time across tabs.

Next up is isMainTab. This tells us whether the current tab is the 'main' tab. Later we will be writing a small worker script that will determine which tab should be the main tab. We need this 'main tab' feature because we will want to have audio playing only from one tab if there are multiple tabs open.

storedTime will hold state for our 'stored' current time that will be saved into localStorage and persisted across refreshes. This state uses another one of my custom hooks - usePersistState, which creates a state that gets persisted across page refreshes. Just like with useTabState, the first arg is the initial value and the second arg is the localStorage key to store the state under.

And finally maxTime tells us the max time (length) of our current song.

Alright, now that we have set up our state, let's write our useEffects

First off let's write the useEffect that gets called upon mounting of our app. Here we will set up our connection with the worke and add event listeners to the audio element:



useEffect(() => {
    worker.port.start();

    setInterval(() => {
        worker.port.postMessage({
            type: "ping"
        });
    }, 1000)

    worker.port.onmessage = (e) => {
        const data = e.data;
        switch(data.type) {
            case 'set_main_port': {
                setIsMainTab(true);
                break;
            }
            case 'unset_main_port': {
                setIsMainTab(false);
                break;
            }
        }
    }

    audio.current.preload = 'metadata';

    audio.current.ondurationchange = () => {
        setMaxTime(audio.current.duration)
    }

    audio.current.onended = () => {
        setIsPlaying(false);
    }

    audio.current.ontimeupdate = () => {
        setCurrentTime(audio.current.currentTime)
    }

}, [])

Don't worry if you don't understand some of the code - I will explain what it does.

First of all we set up our connection with the worker. worker.port.start(); ensures that our port is open and can receive/send messages.

Next we create an interval using setInterval that gets run every second. We use this interval to ping our worker to let it know that our tab has not been closed. For example if a tab gets closed, it will stop pinging the worker, and the worker will assume that the tab was closed and, if the tab was the main tab, will change the main tab to a different one.

We add a message handler to worker.port.onmessage to be able to receive messages from the worker. There will only be 2 messages - set_main_port, which notifies the tab that it should be the main tab, and unset_main_port, which notifies the tab that it should stop being the main tab.

Next up we add some event listeners to our audio element. We add an ondurationchange listener which updates our maxTime state whenever the length of the song changes. Then we add an onended listener which sets our isPlaying state to false when the playback has ended, and finally we add an ontimeupdate listener which updates our currentTime state whenever the current time of the audio element changes.

Ok, great, we have set up our initialization logic! We're about halfway done with this file!

Our next useEffect will be as follows:



useEffect(() => {
        if(currentTime != 0 && currentTime != null) {
            setStoredTime(currentTime);
        }
}, [currentTime])

What this simply does is update our storedTime variable and store it in localStorage whenever currentTime changes.

Now let's write the useEffect for when the src state changes



useEffect(() => {
    if(!audio.current.src || audio.current.src == '' && storedTime != 0) {
        updateTime(storedTime)
    } else {
        setStoredTime(0);
        updateTime(0);
    }

    if(src != "") {
        audio.current.src = src;
    }

    if(isPlaying && isMainTab) {
        audio.current.play();
    }
}, [src])

First of all, we check if our src is defined and if storedTime is not 0, in which case we update our current time in accordance to the storedTime. This will only ever happen when the page first opens, and will allow us to persist our current time between page refreshes.

Next we check if src is not an empty string, in which case we set the audio element's src property to the new src.

Finally we check if the player should be playing and if the current tab is the main tab, in which case we have our audio element play our song.



useEffect(() => {
    audio.current.currentTime = updatedTime;
    setCurrentTime(updatedTime);
}, [updatedTime])

Next we have a useEffect that runs when updatedTime changes. We use this updatedTime state as a proxy to set our currentTime because we cannot set currentTime directly. I'll be honest, I forgot the exact reason why we can't set currentTime directly, but I know that it can cause an infinite loop when syncing tabs and using the slider to change our current time.

Additionally we update the currentTime property of the audio element, which makes it playback at that time.



useEffect(() => {
    if (isPlaying && isMainTab) {
        // console.log('is main')
        audio.current.play();
    } else {
        audio.current.pause();
    }
}, [isPlaying])

Our final useEffect will be run when isPlaying changes. In it, we check if isPlaying is set to true and if the current tab is the main tab, in which case we play the audio. Otherwise we set the audio on pause.

Finally, let's return all the relevant functions and state:



return {
    isPlaying,
    setIsPlaying,
    setCurrentTime,
    currentTime,
    updateTime,
    maxTime,
    setSrc
}

And we're done with our useMusicPlayer hook!

If you want to see what the final file looks like, refer to the file in the source code

Now let's create our worker.ts file

`worker.ts`

Our worker will manage the information about the current main tab, and determine which tab should be the main tab. Depending on your configuration, the worker.js file should go either into the src folder or the public folder. In my case I put it into public.

Our worker will look like this:



const ports = [];
let main_port = null;
let pinged = true; // Did Main port ping?

const postMessageAll = (message, exclude_port) => {
    ports.forEach((port) => {
        if(port != exclude_port) {
            port.postMessage(message)
        }

    })
}

const setMainPort = (port) => {
    main_port = port;
    main_port.postMessage({
        type: "set_main_port"
    })
    postMessageAll({
        type: "unset_main_port"
    }, main_port);

}

// Ping check
setInterval(() => {
    if(!pinged) {
        const port_index = ports.findIndex(_port => _port == main_port);
        ports.splice(port_index, 1);
        setMainPort(ports[0])
    }
    pinged = false;
}, 2000);

onconnect = (e) => {
    const port = e.ports[0];

    ports.push(port);

    if(ports.length == 1) {
        setMainPort(port)
    }    

    port.onmessage = (e) => {
        const data = e.data;

        switch(data.type){
            case "ping": {
                if(port == main_port) {
                    pinged = true;
                }

            }
        }
    }
}

First we define some variables that our worker will need to use. ports stores a list of all our open ports, main_port stores a reference to our main port/tab, and pinged tells us whether main port has successfully pinged the worker.

Next we create a utility function postMessageAll() which posts a message to all of the ports. Optionally you can pass a port as the second arg, which will exclude that port from being messaged.

Then we create a function setMainTab which sets our main tab - it sends a message to the new main tab to let it know that it is now the main tab, and also sends a message to all the other tabs to let them know that they are not the main tab.

Next up we create an interval that checks every 2 seconds whether the main tab has successfully pinged our worker without a timeout. If the main tab failed to ping the worker, then the worker assumes that the main tab was closed and sets another tab as the main one.

Finally, in onconnect we add some initialization logic - if there is only 1 port open, then it should be set to the main port. And we also listen for the ping message from the tabs to make sure that the main tab has pinged the worker and hasn't been closed.

That's it for our worker!

Next up let's create our utility functions in util.ts

`util.ts`

Our util.ts file will contain some reusable utility functions that will make our code a bit more readable.

First of all is the secondsToMinutesAndSeconds() function:



export function secondsToMinutesAndSeconds(time: number) {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time - minutes * 60);

    return {
        minutes,
        seconds
    }
}

What it does is simply convert seconds to an object storing seconds and minutes.

Next up is numberToPercent():



export function numberToPercent(n: number, max_n: number) {
    const percentage = n == 0 ? 0 : (n / max_n) * 100;
    return percentage
}

What this does is tell you how much percent is n of max_n.

Finally let's add percentOf():



export function percentOf(n: number, percentage: number) {
    return n * percentage / 100
}

This function tells us how much is percentage of n

And our util.ts file is done!

`SongMetadata.ts`

The SongMetadata.ts will hold the type for our song metadata object, it's quite simple:



type SongsMetadata = {
    id: string,
    title: string,
    author: string
}

export default SongsMetadata;

As you can see it just holds some basic info about the song such as its ID, title and author.

At this point, functionality wise our player is done - we could progammatically invoke this hook and use its functions to play our audio! All that is left is to implement the UI!

Let's start with the small components first

`IconButton.tsx`

This will be the component for our icon buttons. It will have some basic animations that you'll see once we get to the style.css file.



type IconButtonProps = {
    src: string,
    onClick: () => void,
}

export default function IconButton({ onClick, src }: IconButtonProps) {
    return (
        <div
            onClick={onClick}
        >
            <img className='icon' src={src} />
        </div>
    )
}

As you can see it's basically just a button wrapper around an image with an icon class. the src prop tells us the image url, and onClick is the click handler.

`PlayButton.tsx`

The PlayButton component will just be a basic wrapper around IconButton with specific icons that will change depending on the playing prop:



import IconButton from './IconButton'

type PlayButtonProps = {
    playing: boolean,
    onClick: () => void,
}

export default function PlayButton({ onClick, playing }: PlayButtonProps) {
    return (
        <IconButton
            onClick={onClick}
            src={playing ? 'icons/pause.svg' : 'icons/play.svg'}
        />
    )
}

`TimeDisplay.tsx`

Time display will be a component that will take a time (an object of seconds and minutes) prop and display this time.



type TimeDisplayProps = {
    time: {minutes: number, seconds: number};
}

export default function TimeDisplay({ time }: TimeDisplayProps) {

    return (
        <div className='time-display'>
            {time.minutes}
            :
            {time.seconds.toString().padStart(2, '0')}
        </div>
    )
}

Alright we've made it this far, we only have 1 component left to go - the MusicPlayer component itself.

`MusicPlayer.tsx`

The MusicPlayer component will be the component that will use the useMusicPlayer hook and the sub-components that we created to display a fully functioning music player.

Let's start by scaffolding our component:



export default function MusicPlayer() {

}

Now let's start first by adding our state.



    const musicPlayer = useMusicPlayer();

    const [sliderValue, setSliderValue] = useState(0);
    const [isSliderActive, setIsSliderActive] = useState(false);

    const [currentTime, setCurrentTime] = useState({minutes: 0, seconds: 0});
    const [maxTime, setMaxTime] = useState({minutes: 0, seconds: 0});

    const [currentSong, setCurrentSongLocal] = usePersistState<number>(0, 'current_song_index');
    const setCurrentSong: (new_state: number) => void = useTabStateControl(currentSong, setCurrentSongLocal, 0, 'current_song_index')
    const [songsMetadata, setSongsMetadata] = useState<SongsMetadata[]>([]);

musicPlayer is the useMusicPlayer hook that we wrote earlier.

sliderValue and isSliderActive are states that we will use to track and manage our time slider

currentTime and maxTime are the same as their equivalent states in useMusicPlayer, except they've been converted to seconds/minutes objects.

currentSong is the state that will track the index number of the current song in the songsMetadata array. You can see that we have 2 lines for defining currentSong and setCurrentSong. First we create the local state with usePersistState in order to have the state be stored to localStorage, then we use useTabStateControl to additionally sync the state across tabs. useTabStateControl is another hook that I wrote that allows you to combine a state handler with useTabState. So you can have both persistant state and tab synced state this way. Another cool thing (and the initial reason I made useTabStateControl) is that this way you can hook up any state management library, like Redux or Zustand to the useTabState hook.

songsMetadata holds an array of the available songs.

Now let's start writing the functions that the component will use.



const onPlayButtonClick = () => {
    musicPlayer.setIsPlaying(!musicPlayer.isPlaying)
}

As the name suggests, this function will handle the clicking of the play button, and simply toggle the music player's isPlaying state.



const onPrevButtonClick = () => {
    if(currentSong == 0) {
        setCurrentSong(songsMetadata.length - 1);
    } else {
        setCurrentSong(currentSong - 1);
    }
}

const onNextButtonClick = () => {
    if(currentSong == songsMetadata.length - 1) {
        setCurrentSong(0);
    } else {
        setCurrentSong(currentSong + 1);
    }
}

These 2 functions will handle the clicking of the previous/next buttons. What they do is simply increment or decrement the currentSong index by 1, or have it loop to the first/last index.



const fetchSongsMetadata = () => {
    fetch('songs_metadata.json')
    .then(res => res.json())
    .then(setSongsMetadata);
}

This function simply fetches our songs metadata file and adds the returned array to the songsMetadata state



const onSliderChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSliderValue(parseInt(e.currentTarget.value));
    setIsSliderActive(true);
}

const onSliderMouseUp = () => {
    const new_time = percentOf(musicPlayer.maxTime, sliderValue);
    musicPlayer.updateTime(new_time)
    setIsSliderActive(false);
}

These 2 functions handle the slider. onSliderChange gets called every time our slider gets dragged around, and it updated our sliderValue as well as marks the slider as being active (in dragging state). We don't want to update our songs current time every time the slider value changes(this would result in a jagged sound when the slider gets moved around), but only once it has been released. For this we have the onSliderMouseUp function, which gets called whenever the slider handle has been released. The function updates our music player's current time, and marks the slider as not being dragged anymore.



const loadSong = (index: number) => {
    if(songsMetadata.length) {
        musicPlayer.setSrc('songs/${songsMetadata[index].id}.wav')
    }
}

Important: You should replace quotes with backticks here. I used quotes because otherwise the post was not getting formatted correctly.

The loadSong function simply loads the songs at the given index of songsMetadata array, by setting the music player's src to that song's source url.

Next up, let's add our useEffects



useEffect(() => {
    fetchSongsMetadata()
}, [])

useEffect(() => {
    loadSong(currentSong);
}, [songsMetadata])

These 2 useEffects make sure that the song metadata gets downloaded and that the initial song gets loaded.



useEffect(() => {
    if(!isSliderActive) {
        if(!musicPlayer.currentTime || !musicPlayer.maxTime) {
            setSliderValue(0)
        } else {
            setSliderValue(numberToPercent(musicPlayer.currentTime, musicPlayer.maxTime));
        }

    }
    setCurrentTime(secondsToMinutesAndSeconds(musicPlayer.currentTime));
}, [musicPlayer.currentTime, musicPlayer.maxTime])

This useEffect updates the slider value to the current time of the song, so you can see at which point in time the song is currently playing. We also make sure that the slider value doesn't get updated while the slider is being dragged (because this would result in buggy behavior).



useEffect(() => {
    setMaxTime(secondsToMinutesAndSeconds(musicPlayer.maxTime));
}, [musicPlayer.maxTime])

Finally we has a useEffect for the music player's maxTime which updates the component's maxTime accordingly.

Alright, we're almost done! Now all that is left is to build out the markup and css! This is what the markup looks like:



return (
    songsMetadata.length > 0 ?  
    <div className='music-player'>
        <div className='music-player-info'>
            <img 
                src={'cover_art/${songsMetadata[currentSong].id}.jpg'} 
                width='100%'
            />
            <h5>{songsMetadata[currentSong].title}</h5>
            <h6>{songsMetadata[currentSong].author}</h6>
        </div>

        <div className='music-player-controls'>
            <IconButton
                onClick={onPrevButtonClick}
                src={'icons/prev.svg'}
            />
            <PlayButton onClick={onPlayButtonClick} playing={musicPlayer.isPlaying} />
            <TimeDisplay time={currentTime} />
            <input 
                type="range" 
                min="0" 
                max="100" 
                value={sliderValue} 
                className="slider" 
                onMouseUp={onSliderMouseUp}
                onChange={onSliderChange}
            />
            <TimeDisplay time={maxTime} />
            <IconButton
                onClick={onNextButtonClick}
                src={'icons/next.svg'}
            />
        </div>
    </div>
    : null
)

First of all we make sure to render the music player only if we have any songs downloaded.

Next up we have the music-player-info element which shows the cover art of the song, the song's title and artist.

Below that we have music-player-controls which holds the control elements of our player - the prev/next/play buttons and the slider.

The first IconButton component is the prev button, and we make sure to hook up the appropriate event handler.

Next is the PlayButton component, where we also make sure to add the event handler.

Then we have a TimeDisplay component which displays the current time of the song.

Then we have our slider element which uses the native HTMLS range input.

Next we have the time display for our maxTime

And finally we have our 'next' button.

We're so close! All that is left now is to add the necessary styles!

`style.css`

This is what our CSS looks like:



body, html {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

  margin: 0px;

  height: 100vh;
  width: 100%;
}

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}



.player-wrapper {
  max-width: 400px;
  width: 100%;
}

/* Icons */

.icon {
  width: 32px;
  height: 32px;

  cursor: pointer;

  transition: transform 0.1s ease-in-out;
}

.icon:hover {
  transform: scale(105%);
}

.icon:active {
  transform: scale(70%);
}

/* Music player */

.music-player {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.music-player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Music player info */

h5 {
  font-size: 16px;
  margin: 0px;
}

h6 {
  font-size: 14px;
  margin: 0px;
  font-weight: normal;
  color: gray;
}

/* Time display */

.time-display {
  margin-bottom: 2px;
  color: gray;
}

/* Slider */

.slider {
  -webkit-appearance: none;
  flex-grow: 1;
  height: 4px;
  background: #d3d3d3;
  border-radius: 100px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  min-width: 0px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 100px;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 100px;
  background: #04AA6D;
  cursor: pointer;
}

I won't be going into details about how the CSS works because I don't think I'd be able to explain it haha. But if you have any questions about any of the code feel free to ask and I will try my best to explain!

Aaaaaand we're done with our music player!

`App.tsx`

Finally, in our App.tsx, we will add the following code to display our music player component:



import MusicPlayer from './MusicPlayer';


function App() {

  return (
    <div className='player-wrapper'>
      <MusicPlayer />
    </div>
  );
}

export default App

Now you can go ahead and test your music player and see that it(hopefully) works! You can even add your own songs! Just add the appropriate files (.wav for the song itself, .jpg for the cover art and then add the song info to the songs_metadata.json)

Conclusion

Whew, this was a long one! The longest article I've ever written! If you read through the whole post then congratulations!

In this post we explored a way on how to build a tab-synced and persistant music player in React. If you're interested in how useTabState and usePersistState work, check out the articles linked below:

How to keep state between page refreshes in React
How to sync React state across tabs with workers
I hope you learned something new from this article. If you have any questions or feedback, feel free to leave a comment!

If you're interested in more web dev content, consider subscribing to my bi-weekly newsletter. There I share with you top web dev articles that I've recently found on the internet.

If you have any requests or ideas for an article, feel free to share them with me in the comments or at jorensmerenjanu@gmail.com.

Have a great day!

Architecture design of my game My Pixel Plant

JorensM — Tue, 02 Jan 2024 06:15:16 +0000

Hi dear readers!

Recently I published my small browser game My Pixel Plant. Developing it was lots of fun and so I thought I'd share some insights into how I was making it. I'm willing to guess that many (or at least some) of us here are also game developers, so I thought this would make for an interesting read!

In this article I will share with you the architecture design behind my game.

Source code

Overview

The code is written purely in TypeScript/HTML/CSS, and it took me around 30 hours to write it. I'm using Webpack to bundle my code. When writing my code, I tried to keep portability in mind to allow for easy porting to other platforms, if needed.

The architecture

So the basic architecture of my game is like so: I have a base Game class, and that Game class has several "manager" component classes that manage different parts of the game.

The current manager classes are as follows:

UIManager
SaveManager

I am planning to refactor the Game class to also have a PlantManager that manages the plant behavior, as the code for that currently resides in Game, which violates the Single Responsibility Principle

I know that the manager pattern has received some critique in the past, but I found that it worked very well in my game as a means of organizing and decoupling code.

In addition to manager classes, I also have several low-level modules that handle stuff like rendering and cache. These classes don't 'manage' anything, but give access to low-level functionality such as rendering and storage. I want to eventually implement an interface for each of the low-level classes, so that they can be swapped for others, for example for another renderer. This would allow for my game to be more easily portable to other platforms.

There are the following low-level classes:

Renderer
Cache
Storage

Additionally, I have a Plant class that holds the data and behavior of the plant.

Low-level classes

The low level classes are the classes that handle the low level behavior such as rendering and storage. These classes are cruicial for allowing for easy porting of the game.

Renderer

The Renderer class is the one responsible for rendering. It holds methods such as drawPlant, drawSprite, drawRect, drawProgressBar. It uses the HTML canvas for rendering. It should be possible to easily swap it for a different renderer class that uses something other than Canvas (OpenGL/WebGL) for example. I plan to accoplish this by creating a Renderer interface/abstract class that the subclasses must implement, so the game can work with any type of renderer.

Source code for the Renderer class

Storage

The Storage class is the class responsible for persistent data storage, which is the save data in the case of this game. This class uses the browser's localStorage, but just like Renderer, should ideally be swappable with other types of storage such as file storage

Source code for the Storage class

Cache

The Cache class is responsible for storing non-persistent, per-session data. This is so that the game runs faster and doesn't have to re-download an image each time it is needed. Under the hood it is basically just an object that can be accessed through Cache's getter and setter

Source code for the Cache class

Manager classes

The managers manage different parts of the game and its behaviors

UIManager

The UIManager class manages the UI of the game, - initializes it, adds event listeners to buttons, and changes it depending on game's data. In order to decouple UIManager from the rest of the code, I used a global event system. When a button is clicked, for example, instead of directly calling the appropriate function, the button click emits an event that can be read by the Game class, and then the Game class reacts appropriately to the event. This has drastically lowered the amount of dependencies that the UIManager requires.

Source code for the UIManager class

SaveManager

The SaveManager class is responsible for handling the saving of data. It uses the Storage class to save the data into localStorage

Source code for the SaveManager class

Utility classes

Utility classes are the 'unit' classes that are completely independent from the rest of the game, and could potentially be reused in other games.

GameObject

The GameObject class is the basic unit of the game. Currently it only holds a single property - position. In hindsight this class may be redundant at the current stage of the project.

Sprite

The Sprite class holds information about a sprite, its dimensions, texture and position. Renderer has a drawSprite() method that allows you to draw a sprite

Source code for the Sprite class

Plant

This is the central, and probably the most interesting class of the game. The Plant class holds information about the plant, its water levels, stages, sprites, etc.

Source code for the Plant class

Data

Each plant type is stored in a .json file, which get fetched upon game load. It stores information such as growth rate, water levels, plant name and ID. When creating a new Plant instance, I pass the plant .json file to Plant's fromJSON() method, and an instance gets created from that plant file. Sprites for the plants are stored in folders named after the plant IDs, and each sprite has a name such as 1.png or 4.png, the number indicating the growth stage.

Conclusion

In this post I talked about the architecture behind my game My Pixel Plant. I hope it was informative and that you learned something new from it. If you're interested in learning more, feel free to check out the source code

Frontend VS Backend

JorensM — Thu, 28 Dec 2023 12:30:57 +0000

Hi, in this article I would like to tell you about what are frontend and backend, and the difference between them.

Overview

A web application can typically be separated into 2 distinguishable parts - frontend and backend. Simply speaking, frontend is the 'presentational' part of the app, the part that is directly exposed to the user, i.e the page that the user interacts with, the UI, etc. Whereas backend is the part of the app that is not directly exposed to the user - the server and the database. The user usually cannot directly interact with the backend - instead they do it by interacting with the frontend and then the frontend passes whatever data is provided to the backend, and optionally the backend passes some data back to the frontend for the user to see.

Developers are usually also divided into two groups - frontend developer and backend developer respectively. There is also 'full stack developer', who is a developer who does both frontend and backend.

Frontend

The frontend, the presentational part of the app, also often called the 'client', is basically anything that the user has direct access to. For example if we have a web app, then the frontend would be the page that the user is interacting with and the HTML, CSS, JavaScript that runs on the page.

Frontend developers aim to implement the UI and UX according to the provided design, while also making sure that the code is well-written, semantic and performant. It is important to write semantic frontend code because it is the code that gets exposed to screen readers. And it is also important to write performant code for a great user experience.

Frontend code usually deals with components/elements, state and styles of the webpage.

Security on the frontend is practically (or even completely) non-existent, as the user usually has complete control over the code that gets run on the frontend. Still, it's a good idea to secure your frontend as much as possible, but beware that any frontend security can be bypassed. One method of securing frontend code is obfuscating code by running it through a JavaScript bundler.

Frontend frameworks

A frontend framework is a library that eases the development of the frontend of the app by offering features such as reusable components and state management. Some notable examples are:

React
VueJS
Angular
Svelte

But there are many more frontend frameworks that you can find with a simple Google search.

Backend

The backend - the server and database, are parts of a web app that the user doesn't have direct access to. The user may communicate with the backend through the frontend, but not directly(usually). The backend deals with things like HTTP requests, REST APIs, authentication.

Backend developers deal with the implementation of backend features such as handling of routes, database access, authentication, and overall architecture of the backend system.

Backend code is much more asynchronous in contrast to frontend code, because it usually must deal with many requests at once and perform many actions concurrently. As such, backend code heavily uses things like async functions, multi-threading and events.

The backend is much more secure (if done properly) than the frontend, and because of this any sensitive information must be stored on the backend. The backend can be secured by using authentication methods such as sessions, JWTs or OAuth.

Backend languages

In web dev, the frontend is almost always written in HTML, CSS and JavaScript, whereas the backend is usually written in some programming language, such as:

Java
PHP
C++
Go

The backend can also be written in JavaScript using runtimes such as NodeJS or Bun.

Hybrids

There exist a good amount of apps and programs that run only locally, without the need for a server. In this case you could say that the app is frontend-only, but I think it is more useful to still separate this app into frontend and backend. In such an app, the frontend would be the parts of the app that the user directly interacts with, such as the UI, while the backend would be any behind-the-scenes logic such as file writing/reading, mathematical operations, etc.

Conclusion

In this article we explored the concepts of frontend and backend, and the difference between the two.

I hope you enjoyed reading this article, and I hope you learned something new from it!

Have a great day!

My Developer Journey

JorensM — Thu, 28 Dec 2023 09:22:53 +0000

Image by Joshua Woroniecki from Pixabay

Hello, my name is Jorens.

In this article I would like to tell you my life journey and how I've become a developer.

Since I was a very little kid I was very much into gaming, and also wanted to make games myself. When I found out that my uncle is a programmer, I felt inspired to become a game programmer myself.

My first experience with progamming started with Java, when I was around 8 years old, where I printed out a PDF book for Java beginners. It was amazing writing my first programs and seeing them run. After tinkering with it for a few weeks I got bored and left programming up until I was around 14.

At 14 I started learning C++ from an old book that my uncle had, as well as online resources. When I discovered libraries I was in awe - so many possibilities! I tinkered around with many libraries such as SDL, SFML and Irrlicht, eventually settling with SFML because it was the simplest and easiest to use. I never managed to make anything worth noting though, only lots of unfinished projects in their early stages of development (I bet most of you can relate).

After tinkering with C++ for a few years until about 16, I started working with web technologies - HTML, CSS and JavaScript. I mostly did half-finished projects again.

At 18 years old I stopped doing programming once again, up until around 21.

At 21, that's when I really started seriously doing coding. I built up a portfolio, found some gigs on Upwork and started earning money. It felt great to earn money doing what you truly love. And that's what I'm still doing, at 24.

Recently I've started writing articles on coding as I enjoy writing.

So this is my developer journey.

What was your developer journey like?

I hope you enjoyed reading this, have a great day!

How to keep state between page refreshes in React

JorensM — Tue, 19 Dec 2023 13:15:03 +0000

Hello dear reader!

In this article I would like to show you how to keep state between page refreshes in React. Check it out in action:

This sort of thing is called state persistance, and it allows you to keep your state intact even through page refreshes or closing of the browser.

State persistance has many use cases, for example you might want to keep the filled fields in a form stay even after the user has left the page and then came back later.

Making state persistant is actually quite easy. We will be utilizing local storage for this.

This project will be using TypeScript, but you can use JavaScript too, in which case just omit the types.

So without further ado, let's get started!

Project Structure

We will be creating a hook called usePersistState() that will be used just like a regular state hook, with the added bonus of being persistant.

This article assumes that you already know how to set up a project, so I will skip that part. Feel free to use any tool such as CRA, Vite, NextJS, etc. for setting up the project.

Our project structure will look like this

index.tsx - page where we will test our hook
usePersistState.ts - file where we will hold our hook

So now that we have laid out our project structure, we can start coding!

usePresistState.ts

First of all, let's scaffold our hook function:



export default function usePersistState<T>(initial_value: T, id: string): [T, (new_state: T) => void] {

}

So we have declared a function usePersistState that has a generic type T. As arguments you can specify the state's initial value, as well as an unique id to identify our state within local storage. Finally we specify it's return type as an array containing the state and the state setter function (just like a regular useState()).

Next let's create a new _initial_state variable that will determine whether to use the value from local storage or the value passed to the hook.



// Set initial value
const _initial_value = useMemo(() => {
    const local_storage_value_str = localStorage.getItem('state:' + id);
    // If there is a value stored in localStorage, use that
    if(local_storage_value_str) {
        return JSON.parse(local_storage_value_str);
    } 
    // Otherwise use initial_value that was passed to the function
    return initial_value;
}, []);

What we do here is check if localStorage has an item already stored for our state. If yes, then we use the localStorage's value for our initial state. Otherwise we use the initial_value that was passed as an argument to our hook. We wrap this in useMemo so the _initial_value gets set only once, upon mount (because we only need this upon mount).

Next let's add the state itself that uses the _initial_value we defined in the previous code snippet.



const [state, setState] = useState(_initial_value);

Now let's add add an useEffect that runs every time our state changes, in order to save the state into local storage:



useEffect(() => {
    const state_str = JSON.stringify(state); // Stringified state
    localStorage.setItem('state:' + id, state_str) // Set stringified state as item in localStorage
}, [state]);

What this does is simply, whenever our state changes, store the state value in localStorage.

Finally, let's return our state and setState().



return [state, setState];

Aaaand we're done! Our hook is ready, now we can test it out!

index.tsx

In index.tsx, paste the following code:



import { usePersistState } from '@printy/react-persist-state/src/index';
import React from 'react'

export default function PersistStateExample() {

    const [counter, setCounter] = usePersistState(0, 'counter');

    return (
        <div>
            <button
                onClick={() => setCounter(counter + 1)}
            >
                {counter}
            </button>
        </div>
    )
}

What we do here is create a counter state using our newly made hook and a button that shows the counter value as well as increments the counter whenever it is clicked. Try clicking it a few times, then refreshing the page. You will see that the state has persisted. You can even completely close your browser and repoen the page, and the state will have remained!

Conclusion

In this article we learned how to create persistant state in React that doesn't reset when we refresh the page. I hope this article was useful to you and that you will find a way to use this method.

If you have any questions or feedback, feel free to leave a comment down below!

Thanks for reading, and have a great day!

How to sync React state across tabs with workers

JorensM — Mon, 18 Dec 2023 12:46:08 +0000

Hello, in this article I will show you how you can sync state in React across multiple tabs. We will be using the SharedWorker API to achieve this. If you want to skip the tutorial and just use it, I have an npm package react-tab-state

The tutorial is written in TypeScript (aside from the worker), but you can just as well use JavaScript for this.

This is what the final result will look like:

So without further ado, let's get started!

Project structure

I will assume that you already know how to set up a React project. You can use CRA or Vite or even NextJS, just make sure that the environment supports shared workers(it probably does)!

For this project we will have 3 main files -

index.tsx, where our page code will reside
useTabState.ts, where the code for our tab- synced-state hook will reside
worker.js, where the code for our shared worker will reside

worker.js

First of all let's write the code of our worker.

First let's add some variables



let ports = []; // All of our ports
let latest_state = {} // The currently synced states.

So first we have ports which stores all of open ports. There is a single port for each tab. A port is basically a connection between a tab and the shared worker, which allows you to send and receive messages. We need this array so we can send a single message to all ports at once

Next, latest_state stores the most recent synced state values in an object. Each key in the object will be a unique id for that particular state. This is so we can have multiple states. We will need this variable in order to sync the state of a newly opened tab

Now let's add a function to post a message to all ports



// Post message to all connected ports
const postMessageAll = (msg, excluded_port = null) => {
    ports.forEach( port => {
        // Don't post message to the excluded port, if one has been specified
        if(port == excluded_port){
              return;
        }
        port.postMessage(msg);
    });
}

What this does is simply post a provided mesage to all ports in the ports array. You can also optionally provide an excluded_port, to which the message won't be sent. This is so that when a tab wants to update state in the rest of the tabs, you don't send a message back to the initiator tab.

Let's write an onconnect handler. Here we will define message handlers and some initialization logic



onconnect = (e) => {
    const port = e.ports[0];
    ports.push(port);
}

In the code above, we have created an onconnect handler and also made sure that the newly connected port gets been added to our ports array.

In the onconnect handler, let's add handlers for receiving messages



port.onmessage = (e) => {
    // Sent by a tab to update state in other tabs
    if (e.data.type == 'set_state') {

    }
    // Sent by a tab to request the value of current state. Used when initializing the state.
    if (e.data.type == 'get_state') {

    }
}

What the code above does is create a message handler for the connected port. So each time a tab sends a message to the worker, this handler will be invoked. Then in the handler we check the type of message and act accordingly.

Now let's add a handler for each message



if (e.data.type == 'set_state') {
    latest_state[e.data.id] = e.data.state;

    postMessageAll({
        type: 'set_state',
        id: e.data.id,
        state: latest_state[e.data.id]
    }, port);
 }

This handler will get called when a tab sends a set_state message, a.k.a when state is updated in one of the tabs. When this happens, we update our latest_state with the state that the tab has sent us for the key with a matching ID, as well as send the new state to all the other tabs. We exclude the tab that initially sent the message because it already has the new state.

Next let's add our get_state handler. It will be called when a tab with our page first opens, to retrieve the up-to-date state value.



if (e.data.type == 'get') {
    port.postMessageAll({
        type: 'set_state',
        id: e.data.id,
        state: latest_state[e.data.id]
    });
}

What we do here is simply send a set_state message to the tab that requested it, with our up-to-date state.

And that's it for the worker! Pretty simple, right? We're about halfway done.

Now let's write our useTabState hook.

useTabState.ts

Our useTabState will be used the same way as a regular useState - you call the hook and it will return an array with the state and a setState() function

Let's start writing our function:



export default function useTabState<T>(initial_state: T, id: string): [T, (new_state: T) => void]{
  const [localState, setLocalState] = useState<T>(null);
}

So far we have made a hook that accepts 2 arguments - initial_state for the initial state and id for a unique ID to distinguish between multiple tab states.

Then we create a state called localState and set its initial value to null

You may have noticed that we're using generics here. If you're using TypeScript but don't know how to use generics or don't want to use them, you can remove the <T> and change any occurence of T to any. If you're using plain JavaScript then you can remove the <T> and omit the types completely.

Next up let's create a function below the localState that updates the state across all tabs



const setTabState = (new_state: T) => {
    setLocalState(new_state);
    worker.port.postMessage({
        type: 'set_state',
        id: id,
        state: new_state
    });
}

What this function does is set its localstate as well as sends a set_state message to the worker, resulting in state being synced across all tabs. This is the function that our hook will return.

We're almost done! Now all we have to do is create a listener for when the shared worker sends a message to the tab.

Create a useEffect and add the following code to it:



useEffect(() => {
    worker.port.addEventListener('message', e => {
        if (!e.data?.type) {
            return;
        }

        switch (e.data.type){
            case 'set_state': {
                if (e.data.id == id) {
                    if (e.data.state) {
                        setLocalState(e.data.state);
                    } else {
                        setLocalState(initial_state);
                    }

                }
            }
        }

    })

    worker.port.start(); // This is important, otherwise the messages won't be received.

    worker.port.postMessage({
        type: 'get_state',
        id: id
    });
}, []);

As you can see in the code above, we add a message event listener and update our local state with the up-to-date state when a set_state message has been received. Also we send a get_state message upon mount to get the up-to-date state. If the up-to-date state is null, then we use the initial_state value.

Finally, let's return our localState as well as the setTabState function:



return [localState, setTabState];

And we're done! Now all that is left is to test our hook!

index.tsx



import useTabState from './useTabState';

export default function TabStateExample() {
    const [counter, setCounter] = useTabState<number>(0, 'counter');

    return (
        <div>
            <button
                onClick={() => setCounter(counter + 1)}
            >
                {counter}
            </button>
        </div>
    );
}

In the code above, we simply create a button that shows a number, and increments this number each time it is clicked. Try testing this page with multiple tabs!

Conclusion

In this article we explored a simple way how one can add a tab-synced state behavior to their app using the SharedWorker API. I hope you learned something new and that you will find a use for this pattern. If you don't want to go through the hassle of learning and implementing this yourself (though it's quite simple), you can use my NPM package react-tab-state

If you have any questions or feedback, feel free to leave it in the comments or email me at jorensmerenjanu@gmail.com

Good luck in your dev journey and your projects!

How to avoid the ripple effect when programming

JorensM — Thu, 05 Oct 2023 06:56:16 +0000

Image by 200 Degrees from Pixabay

Preface

I would like to start this article by saying that the methods shared here are not the only methods available and there are many other ways how one can avoid the ripple effect.

Also I would like to say that I am not a senior, but rather a mid-level programmer and as such the tips shared in this article may be lacking in some aspects. Feel free to correct me or suggest improvements.

And finally I would like to thank you for taking your time to read this article, it means a lot to me!

Preface
How to avoid the ripple effect when programming
- The premise
- Think ahead and think thoroughly
- Write abstract code
- Make your code backwards compatible
- Define good interfaces
Conclusion

How to avoid the ripple effect when programming

What is the ripple effect? You have most likely encountered it before when coding, whether you know about it or not. Simply put, in programming, the ripple effect is when you make changes to your existing code, and it causes your codebase to break, requiring you to make even more changes to your code. Let me demonstrate with a simple example:

Let's say you have a function sum() which takes two number arguments and returns the sum of these number.

function sum(a, b) {
    return a + b
}

Now let's say that you start using this method extensively in your code:

//file a.js...
const variable = sum(1, 5)

//...file b.js...
const another_variable = sum(x1, x2)

//...file g.js...
const yet_another_varible = sum(y1, y2)

//...and so on...

Now let's say that you've decided to update the sum()function to be able to sum an indefinite amount of numbers, so you change it to accept as an argument a single array and return the sum of the numbers in that array.

function sum(numbers) {
    let total = 0
    numbers.forEach( n => total += n)

    return total
}

(In JavaScript this can be solved by using the spread operator to accept an indefinite amount of args, but for the sake of the example I'm using an array)

Okay, so we've updated our function, great!

But now we have to go through our code and update each call to sum() to the new format.

//file a.js...
const variable = sum([1, 5])

//...file b.js...
const another_variable = sum([x1, x2])

//...file g.js...
const yet_another_varible = sum([y1, y2])

//...and so on...

This is the ripple effect in action.

The ripple effect is not as relevant in a small project where there is not much code (though it's still good to follow best practices), but it is quite relevant in larger projects where a single change can require us to make many other changes across the codebase.

So now that we know what the ripple effect is, let's explore how we can prevent it.

The premise

The premise upon which we will be solving the ripple effect problem is the following:

the ripple effect is caused by changes in the outcome, and not the process.

By this I mean that changing the code in a way thay doesn't change its API/interface/return values - but instead only changes only how the outcome is achieved - won't cause the ripple effect. So to prevent the ripple effect, we must minimize the changes in the outcome of our code. Below are some tips to achieve this:

Think ahead and think thoroughly

Before you start writing any code, carefully think through where and how it will be used and how it may be used in the future. Consider all the possible use cases of the code that you are going to implement, both the current use cases and possible future use cases. This will ensure that your code will be long lasting and won't require many changes along the way, which will help you avoid the ripple effect.

Write abstract code

It's not always the case, but oftentimes a function or a class can become more useful and less prone to causing a ripple effect if you make it abstract.

For example, let's say you have a function that takes a string and a name of a color and outputs the string in the console, in the specified color

function logWithColor(str, color) {
    switch(color) {
        case 'green':
            //Code for outputting green text
            break
        case 'red':
            //Code for outputting red text
            break
        case 'blue':
            //Code for outputting blue text
            break
    }
}

currently, you can only pass specific names of color strings for the colors, such as 'green', 'red', etc. This may become cumbersome if we decide to update the definition of 'green' to a different hex value, which will make each log using 'green' output a different color than before, which may not be what we want.

This can be solved by making our function more abstract. We can do this by changing the function to accept a hex color as an argument instead of a specific color name.

function logWithColor(str, hexColor) {
    //Code to output text according to the hex color
}

Now when we can call it and use a specific hex color, and not worry that the definition of 'color' changes.

Do note that it is not always favorable to abstract code away, and sometimes it is better to keep it specific.

We've updated our function to be more abstract, but now we've met with a new problem - any code that used the old format of the function will break because now it accepts a hex string instead of a color name - see the next section for the solution.

Make your code backwards compatible

Making code backwards compatible means changing code in such a way that it still supports the old format of accessing it.
Let's take the function from our previous example. After we updated the function to accept hex colors, any code that uses the old format will need to be updated to use the new format. This can be avoided by making the function backwards compatible. We can do this by making the function process both hex values and color names:

function logWithColor(str, color) {
    switch(color) {
        case 'green':
            //Code for outputting green text
            break
        case 'red':
            //Code for outputting red text
            break
        case 'blue':
            //Code for outputting blue text
            break
        default:
            //Code for outputting hex
            break
    }
}

This will ensure that any code that uses the old function's format won't break, and in turn will help us avoid the ripple effect.

Define good interfaces

Another method to avoid the ripple effect is to write good interfaces.

What is an interface? An interface is a part of a system that is exposed to the user(also called the client), AKA the public part. The user can be anything that uses the interface - an end-user using an app, a program using a library or making requests to a REST API. In these examples, the interfaces respectively are the user-interface of the app, the methods and classes of the library that the program can access, and the endpoints that the program can call.

When speaking within the scope of a single program, an interface can be anything that another part of the program uses. For example, if you have a program that calls function A, function A can be said to be an interface that your program is using.

In OOP, an interface is a more specific term that describes a specific type of class - a class with the purpose of describing the public parts of it (so the idea is the same). But in these examples an interface can be anything that is used by a client(or user)

So how do we define a good interface? In my opinion the first step to writing a good interface is writing it in such a way that will make it extensible.
This builds on top of the first tip - think ahead.

Making an interface extensible is similar to making it backwards compatible. Making an interface extensible means defining it in such a way that any future changes won't require changing the existing parts.

Let's say we have the following class:

class Point {
    x = 0
    y = 0
    setPosition(x, y){
        this.x = x
        this.y = y
    }
    getPosition() {
        return {
            x: this.x,
            y: this.y
        }
    }
}

This class holds two variables and two methods - x and y for the position, setPosition() for setting the position variables, and getPosition() for retrieving them.

Now let's say we've decided to make this class 3D and support the Z axis.

class Point {
    x = 0
    y = 0
    z = 0

    setPosition(x, y, z) {
        this.x = x
        this.y = y
        this.z = z
    }

    getPosition() {
        return {
            x: this.x,
            y: this.y,
            z: this.z
        }
    }
}

With the way we had initially written the class, we needed to rewrite the setPosition() and getPosition() methods to accommodate the newly added z variable. This means that the class wasn't extensible, because when we made additions to it, we had to rewrite some of the existing code.

Let's try writing our class again from the beginning, but this time in such a way that we don't need to rewrite code when making additions:

class Point {
    position = {
      x: 0
      y: 0
    }
    setPosition(position) {
        this.position = position
    }
    getPosition() {
        return this.position
    }
}

As you can see, this time we've written the class a bit differently - we store the position as a single object and accept an object in the setPosition() method, and directly return the position object in the getPosition() method. You'll see why we've done this in a second.

So now let's try extending our class with the Z position once again:

class Point {
    position = {
      x: 0
      y: 0
      z: 0
    }
    setPosition(position) {
        this.position = position
    }
    getPosition() {
        return this.position
    }
}

As you can see, this time all we had to do was add a z property to our position object - we didn't need to alter getPosition() and setPosition() at all.

Be mindful that it's better to write extensible code from the start, otherwise you will still have to face the ripple effect and rewrite the code that uses the old format of the interface (unless you make it backwards compatible)

Conclusion

In this article we explored the root cause of the ripple effect in programming and explored some ways how we can prevent it when writing our code.

Even with all the tips available from this and other resources, it may not always be evident how you can prevent the ripple effect in your specific cases. Ultimately, it is something that comes with experience and as you code more and more, you will naturally learn to solve problems like these before they've occurred.

Thank you so much for reading this article and I hope you've learned something from it. If you have any feedback or questions, feel free to leave them in the comments or email me at jorensmerenjanu@gmail.com (I will definitely respond - I'm not a busy person)

How to make command-line apps accessible?

JorensM — Sat, 23 Sep 2023 07:54:18 +0000

Hi, recently I started working on a command-line tool and wanted to make it accessible. I posted a question about it on stackoverflow but didn't get any answers, so I've decided to ask you, the DEV community - how does one make their command-line app accessible?

Also general dicussion about command-line accessibility and accessibility in general.

How to practice writing

JorensM — Sun, 10 Sep 2023 16:08:23 +0000

Image by David Schwarzenberg from Pixabay

This article was originally published on Medium, but I thought that it would fit nicely here on DEV because many of us are not just developers, but also writers.

There is a popular saying - 'practice makes perfect', and I completely agree with it. If you repeat an activity for 10, 100, 1000 times, you are certainly going to get good at it eventually. The same principle applies to writing, too. If you write once every day, you are going to be a better writer than if you had been writing once every week or not at all. Practice certainly helps you improve. So if you want to become a good writer - practice. Practice every day, or practice every week - it doesn't matter - go at your own pace that feels comfortable to you.

But how do you practice writing? That is the topic of this article. In this article we will explore some common and effective ways how you can practice your writing to become a better writer, and what aspect of writing each method helps you improve. The methods will focus on improving your article writing skills as opposed to story writing or any other type of writing. But worry not, as these methods can be applied to any type of writing.

So let's dive in!

Reading
Freewriting
Rewriting others' work in your own words
Participating in writers' communities
Keeping a diary/journal

Reading

The first method doesn't actually involve any writing, ironically. Here is a quote from the popular American writer Stephen King:

"if you want to be a writer, you must do two things above all others: read a lot and write a lot.ˮ - Stephen King

Reading is a very effective way to improve your writing skills. It improves you in every aspect of writing - grammar, vocabulary, originality. But be picky about what you read. Every person's writing habits are more or less a sum of all the work that they have read in the past. So what you read will be what you will write. That is why it's important to carefully choose what you read, as it will reflect on your writing.

Reading improves you not just as a writer, but as a person - it helps you develop your perspective and helps you gain knowledge.

Read books, read magazines, read newspaper's - doesn't matter, as long as you read. It is a good idea to read a bit on a topic before starting to write about it.

Freewriting

Freewriting is the act of 'brainstorm-writing', where you write something spontaneously without having thought about it beforehand.

This type of writing improves your idea making skills and critical thinking. (In regards to writing, critical-thinking means that you can quickly come up with original and fitting paragraphs).

When freewriting, don't worry about the outcome of your writing - don't worry about grammar, spelling mistakes, etc. The goal of freewriting isn't to improve your grammar, but to improve your originality, so grammar doesn't matter here.

Freewriting improves you not just in the area of writing, but in general. It helps you develop your creative skills and critical thinking, which you can apply not just to writing, but to pretty much anything in life. Here is an informative article from Grammarly on freewriting.

Rewriting others' work in your own words

This is my favorite one, and I do it the most often. Paraphrasing others' work is a rewarding way of practicing writing and at the same time learning something new. When you rewrite others' work, you learn to extract key information from content, which is especially useful if you're writing informative articles. There are some things to keep in mind though:

Don't plagiarize. This is very important. Taking someone else's work and passing it as your own is seen as taboo and frowned upon in the writers' community.
Don't blatantly copy. If you copy someone's work word-by-word, you won't learn anything new. The advantage of rewriting someone's work is that you learn to extract information from it, which you won't learn if you just copy word-by-word.

Do note that in some cases, it is considered plagiarism even if you paraphrase someone's work. In cases where the article presents original ideas and concepts not seen anywhere else, it is considered plagiarism even to paraphrase the article. So be careful what you paraphrase.

Participating in writers' communities

There are many writers' communities, both in the real world and on the internet. Participating in these communities and their events and activities will definitely help you improve your writing skills. You will get a chance to collaborate with others and learn from them. You can find your local or online communities by searching for them on Google. Some notable online writing communities include:

Writing Prompts subreddit on Reddit.com. On this subreddit, people post their prompts and writers try to write a story according to these prompts.
Writing subreddit on Reddit.com. This is a general subreddit where people discuss their writing tools, techniques, ideas and more.

There are many more communities online that you can find with a simple Google search.

Keeping a diary/journal

Keeping a journal is a good way to practice writing because you will do it every day. Keeping a journal and writing into it regularly will reinforce your habit of writing, which will make you a better writer because, as we discussed earlier, practice makes perfect. Write down your activities, plans and thoughts.

Keeping a journal is a bit similar to freewriting because you don't think too much ahead of what you write, except that you usually write into a journal regularly and the content is a bit more structured/clean.

Conclusion

In this article we explored some ways how one can practice and improve their writing skills. I hope you learned something from this article and I hope that these methods will help you become a better writer. Do you have a practice method that wasn't mentioned in this article? Let me know in the comments!

Thank you so much for reading!

Creating a form In React Native With Formik

JorensM — Thu, 31 Aug 2023 10:35:55 +0000

Introduction

Forms are an integral part of many mobile applications. Whether it's a sign-up/sign-in form, a 'create post' form or any other type of form, one thing is for sure - forms are important.

What is a form? You probably already know what a form is, but let me give you a definition anyway. In software, a form is a UI element that allows you to fill out data fields and then store this data or send this data to the software's servers. Forms allow the user to provide information to the app to create new content or to tailor the app experience to the user's preferences, among many other things.

Do you want to create a form in your React Native app but don't know how? Then this post is for you! In this post I will teach you how to create forms using a library called Formik , as well as how to integrate non-native form components with Formik. Additionally you will learn how to validate forms using Yup (which Formik supports out of the box)

Introduction
Setup
Building the components
Building the form
Adding validation
Improving our code - pass props down

Source code for this project

Setup

Before we begin working on our project, we must set it up and install all the necessary dependencies. We will be using Expo for this project. Expo is a React Native management tool that handles a lot of heavy stuff for us, such as efficiently compiling code and assets, as well as provides us with a productive development environment. Also we will be using Typescript for this project, but don't worry, the process is practically identical to Javascript, so if you don't know Typescript that's fine. This article assumes some basic understanding of React and React Native , such as components, hooks and state. You must also have Node.js installed on your computer.

First things first, let's set up our Expo project. Navigate to the directory where you want your project folder to reside, and run the following command:

npx create-expo-app -t expo-template-blank-typescript

This will set up a fresh expo app with a TypeScript template.

You may be prompted to install a package, in which case just press enter to confirm its installation. After that, you will be prompted to name your project. You can name it any way you want - I named mine react-native-form

To test that our app works, run npm run web or npm run android or npm run ios.If you're testing on mobile, make sure to have a device connected. If you're testing on web, you will get an error asking you to install necessary dependencies for web, so go ahead and install them and run the command again.

Next up, let's install all the necessary dependencies. We will need Formik for form handling, Yup for form validation, react-native-element-dropdown for our dropdown component and react-native-slider for our slider component. We don't need any libraries for text input because text input is natively supported by React Native.

To install the aforementioned packages, run the following command:

npm i react-native-element-dropdown formik yup @miblanchard/react-native-slider`

Now we're ready to start coding!

Building the components

We will create 4 components for the form: FieldBase, SliderField, TextField, DropdownField. The latter 3 will extend from first one, so let's start with it!

FieldBase

The FieldBase component will be used to reuse parts that are common across all field components, such as the label or the field layout.

First, create a components folder at the root of your project. In this directory we will hold all of our components.

Next, in the newly created folder, create a file FieldBase.tsx, or FieldBase.jsx if you're using plain Javascript (from now on assume that all .tsx files should be .jsx if you're using JS):

FieldBase.tsx :

import { PropsWithChildren } from 'react'
import { View } from 'react-native'

export type FieldBaseProps = {
    label: string
}

export default function FieldBase({ 
    label,
    children
}: PropsWithChildren<FieldBaseProps>) {
    return (
        <View>
            { children }
        </View>
    )
}

This is the basic FieldBase component. Currently all it can do is act as a wrapper for its children. PropsWithChildren is a function that allows you to use the children prop in your component (you don't need this function if you're using Javascript). The function accepts a generic that should be the type of your props.

You may have noticed that we're also exporting FieldBaseProps. This is so that we can reuse this type in our other components.

Next, let's add some styles and have our component show a label.

FieldBase.tsx :

import { PropsWithChildren } from 'react'
import { StyleSheet, View, Text } from 'react-native'

export type FieldBaseProps = {
    label: string
}

export default function FieldBase({ 
    label,
    children
}: PropsWithChildren<FieldBaseProps>) {
    return (
        <View
            style={ styles.container }
        >
            <Text
                style={ styles.label }
            >
                { label }
            </Text>
            { children }
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column'
    },
    label: {
        fontSize: 14,
        color: '#a8a8a8'
    }
})

As you can see we have added some styles to the component using the StyleSheet.create() function. Learn more about StyleSheet. Additionally we have added a Text component for our label.

At this point, if you use this component somewhere in your app's code, like so:

<FieldBase
    label='My field'
  >
    <Text>Field input will be here</Text>
</FieldBase>

You should see something like this:

Awesome! So this will be the base of our fields that we will extend from. The purpose and advantage of creating such a 'base' component is that you can reuse code and avoid duplicating code.

Next up is TextField.

TextField

In the components folder, create a file called TextField.tsx:

TextField.tsx :

import FieldBase, { FieldBaseProps} from './FieldBase';

type TextFieldProps = FieldBaseProps & {
    name: string
}

export default function TextField({ 
    name, 
    label 
}: TextFieldProps) {
    return (
        <FieldBase
            name={name}
            label={label}
        >

        </FieldBase>
    )
}

As you can see we've used the FieldBase in our new component. This allows us to specify a label and show it without needing to rewrite the code for it. Right now the component can't do anything, so let's go ahead and introduce a TextInput component to it!

import { TextInput, StyleSheet } from 'react-native'
import FieldBase, { FieldBaseProps} from './FieldBase';

type TextFieldProps = FieldBaseProps & {
    name: string
}

export default function TextField({
    name,
    label,
}: TextFieldFieldProps) {
    return (
        <FieldBase
            label={label}
        >
            <TextInput
                style={styles.input}
            />
        </FieldBase>
    )
}

const styles = StyleSheet.create({
    input: {
        height: 32,
        width: 200,
        borderWidth: 1,
        borderColor: '#a8a8a8'
    }
})

As you can see we've added a new component - TextInput - TextInput is a native React Native component. Also we have applied some basic style to the input.

So far so good!

Right now if we added the TextField to our app, it would look like this:

You can try entering some text into it to see that it works!

If we added it to a Formik form though, at this point it wouldn't work - no data would be submitted. We have to integrate our component with Formik, like so:.

TextField.tsx :

import { useField } from 'formik'; // +

/* ... */

const [ value, meta, helpers ] = useField(name) // +

const handleChange = (new_text: string) => { // +
    helpers.setValue(new_text) // +
} // +

return (
    <FieldBase
        label={label}
    >
        <TextInput
            style={styles.input}
            onChangeText={handleChange} // +
            value={meta.value} // +
        />
    </FieldBase>
)

/* ... */

What we have done is made this component work with a Formik form. We did this by making the onChangeText handler update the input value stored in the Formik form. Now, if we added it to a form, entered a value and hit submit, the values would be passed to the Formik's onSubmit prop.

Right now if we tried to use this component in our app, we would receive an error, because now the component expects to reside in a Formik form (which we are yet to build). But before we build our form, let's build the other 2 field components - DropdownField and SliderField

DropdownField

Now let's create a dropdown field component. For this component we will use the library react-native-element-dropdown that we installed in the Setup chapter.

In the components folder, create a new file DropdownField.tsx:

DropdownField.tsx :

import { useField } from 'formik';
import { Dropdown } from 'react-native-element-dropdown';
import { StyleSheet } from 'react-native'
import FieldBase, { FieldBaseProps} from './FieldBase';

type DropdownFieldProps = FieldBaseProps & {
    name: string
    data: {label: string, value: string}[]
}

export default function DropdownField({ 
    label,
    name,
    data,
}: DropdownFieldProps) {

    const [ value, meta, helpers ] = useField(name)

    const handleChange = (new_value: string) => {
        helpers.setValue(new_value)
    }

    return (
        <FieldBase
            label={label}
        >
            <Dropdown
                style={styles.dropdown}
                data={data}
                labelField='label'
                valueField='value'
                value={meta.value}
                onChange={(data) => handleChange(data.value)}
            />
        </FieldBase>
    )
}

const styles = StyleSheet.create({
    dropdown: {
        height: 32,
        width: 200,
        borderWidth: 1,
        borderColor: '#a8a8a8',
        paddingLeft: 4
    }
})

As you can see the process is practically identical with the previous component - simply make the Formik's saved value update whenever the input's value changes. We have also applied some styles to our dropdown. We also pass a data some prop down to the Dropdown component, so that the component can show the options

If we tried rendering this component, we'd again get an error because we haven't created a form for it yet. Bear with me, we're almost there!

SliderField

Finally let's create a SliderField component that will allow the user to input a value with a slider.

In the components folder, create a file SliderField.tsx:

SliderField.tsx :

import { useField } from 'formik';
import { StyleSheet } from 'react-native'
import FieldBase, { FieldBaseProps} from './FieldBase';
import { Slider } from '@miblanchard/react-native-slider'

type SliderFieldProps = FieldBaseProps & {
    name: string
}

export default function SliderField({ 
    label,
    name
}: SliderFieldProps) {

    const [ value, meta, helpers ] = useField(name)

    const handleChange = (new_value: number[]) => {
        helpers.setValue(new_value[0])
    }

    return (
        <FieldBase
            label={label}
        >
            <Slider
                containerStyle={styles.slider}
                minimumValue={0}
                maximumValue={100}
                step={1}
                value={meta.value}
                onSlidingComplete={handleChange}
            />
        </FieldBase>
    )
}

const styles = StyleSheet.create({
    slider: {
        height: 24,
        width: 200,
    }
})

As you can see once again, the process is nearly identical - just update Formik's value when the input's value changes.

Okay, now that we've created our components, let's create a Formik form and hook them up!

Building the form

To build our form, we will use Formik's <Formik/> and <Form/> components. First of all, let's add a foundation to our App component in App.tsx

App.tsx :

import { View, StyleSheet } from 'react-native'

export default function App() {

    return (
        <View style={styles.container}>

        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        padding: 16
    },
});

Nothing much to see yet.

Now, let's define our form's initial values

App.tsx :

/* ... */

type FormValues = { // +
    username: string, // +
    profession: 'developer' | 'cook' | 'writer', // +
    coolness: number // +
} // +

export default function App() {

    const initialValues: FormValues = { // +
        username: '', // +
        profession: 'developer', // +
        coolness: 50 // +
    } // +

    /* ... */

}

These will be the default values that will be set on the fields when the form loads/reloads. You can specify other values or even properties.

Now let's add the Formik and Form components to the app:

App.tsx :

import { View, StyleSheet } from 'react-native'
import { Formik, Form } from 'formik'; // +

/* ... */

export default function App() {

    /* ... */

    return (
        <View style={styles.container}> // +
            <Formik // +
                initialValues={initialValues} // +
                onSubmit={console.log} // +
            > // +
                <Form> // +

                </Form> // +
            </Formik> // +
        </View>
    );
    /* ... */

We have created our Formik component, which accepts an initialValues prop, which we specify as the initialValues variable that we created before. Additionally Formik accepts an onSubmit prop, which specifies which function to run when the form is submitted. We have made it so that the submitted values simply get logged into the console on submit.

Now let's add our fields and some styles to the form.

App.tsx :

import { View, StyleSheet, Pressable, Text } from 'react-native' // +
import { Formik, Form } from 'formik'; // +
import TextField from './components/TextField'; // +
import DropdownField from './components/DropdownField'; // +
import SliderField from './components/SliderField'; // +

/* ... */

export default function App() {

/* ... */

return (
    <View style={styles.container}>
        <Formik
            initialValues={initialValues}
            onSubmit={console.log}
        >
            {formik => ( // +
                <Form
                    style={styles.form}
                >
                    <TextField // +
                        label='username' // +
                        name='username' // +
                    /> // +
                    <DropdownField // +
                        label='profession' // +
                        name='profession' // +
                        data={[ // +
                            { // +
                                label: 'Developer', // +
                                value: 'developer' // +
                            }, // +
                            { // +
                                label: 'Cook', // +
                                value: 'cook' // +
                            }, // +
                            { // +
                                label: 'Writer', // +
                                value: 'writer' // +
                            } // +
                        ]} // +
                    /> // +
                    <SliderField // +
                        label='How cool are you?' // +
                        name='coolness' // +
                    /> // +
                    <Pressable // +
                        style={styles.submit_button} // +
                        onPress={() => formik.submitForm()} // +
                    > // +
                        <Text>Submit</Text> // +
                    </Pressable> // +
                </Form>
            )} // +
        </Formik>
    </View>
);

/* ... */

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        padding: 16
    },
    form: { // +
        display: 'flex', // +
        flexDirection: 'column', // +
        gap: 16 // +
    }, // +
    submit_button: { // +
        borderWidth: 1, // +
        borderColor: 'blue', // +
        width: 104, // +
        alignItems: 'center', // +
        padding: 8 // +
    }
});

Alright, we've added our fields to our form. We've also added a submit button and some style for the form and the button. If you try to submit the form, you will see the values logged to the console. Hooray! We've made our form!

Adding validation

The next step is to add validation to our fields. We will do this by using the library Yup, which Formik supports out of the box.

First of all let's add an ErrorMessage component to our FieldBase. We will also need to add a name prop to our FieldBase that we can pass to the ErrorMessage so it know which field's error to display.

FieldBase.tsx :

import { ErrorMessage } from 'formik' // +
import { PropsWithChildren } from 'react'
import { StyleSheet, View, Text } from 'react-native'

export type FieldBaseProps = {
    label: string
    name: string // +
}

export default function FieldBase( { 
    label,
    name, // +
    children
}: PropsWithChildren<FieldBaseProps>) {
    return (
        <View
            style={ styles.container }
        >
            <Text
                style={ styles.label }
            >
                { label }
            </Text>
            { children }
            <ErrorMessage            // +
                component={Text}     // +
                style={styles.error} // +
                name={name}          // +
            />                       // +
        </View>
    )
}

const styles = StyleSheet.create({
    /* ... */
    error: {          // +
        fontSize: 14, // +
        color: 'red'  // +
    }                 // +
})

/* ... */

Next we have to update our TextField, SliderField and DropdownField to pass the name prop down to FieldBase, like so:

TextField.tsx :

export default function TextField({ 
    label,
    name
}: TextFieldProps) {

/* ... */

return (
    <FieldBase
        label={label}
        name={name} // +
    >
/* ... */

The code above shows how to do it for TextField, but it's the same process for SliderField and DropdownField

Now we have to add the validation schema to our Formik form:

App.tsx :

import { View, StyleSheet, Pressable, Text } from 'react-native'
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import TextField from './components/TextField';
import DropdownField from './components/DropdownField';
import SliderField from './components/SliderField';

/* ... */

const validationSchema = Yup.object().shape({  // +
    username: Yup.string()                     // +
        .min(2, 'Too short!')                  // +
        .max(16, 'Too long!')                  // +
        .required('Required'),                 // +
    profession: Yup.string()                   // +
        .oneOf(['developer', 'cook', 'writer'], 'Invalid value')                                // +
        .required('Required!'),                // +
    coolness: Yup.number()                     // +
        .min(0, 'Value must be between 0 and 100')// +
        .max(100, 'Value must be between 0 and 100')// +
        .required('Required!')// +
})

return (
    <View style={styles.container}>
    <Formik
        initialValues={initialValues}
        onSubmit={console.log}
        validationSchema={validationSchema} // +
    >
/* ... */

Yay! We added validation to our form! Now try submitting the form with an empty username and you should see an error message pop up.

And we're done with our Formik form!

Conclusion

I hope you learned something new from this post. If you have any questions or comments feel free to leave them here, on the project repo or by emailing me at jorensmerenjanu@gmail.com

Debounce function with a return value using promises

JorensM — Mon, 29 May 2023 09:29:27 +0000

In this article I will show you how to write a debounce function that allows you to return a value using promises.

What is a debounce function?

First of all, what is a debounce function? Simply put, a debounce function is a function that prevents another function from being called too often. When you call a debounce function, it sets a timer and runs the target function only after the timer has run out. But if the debounce function gets called again before the timer has run out, the timer gets reset, preventing the target function from being called repeatedly. So you can call the debounce function multiple times in a row, and the target function will only get called once, after the timer runs out.

This is especially useful in search inputs, where you only want to make a search request after the user has finished typing. Let me explain.

Without a debounce function, when you type into a search bar, for each character that you type, a HTTP request would be made. For example if you wanted to search for the term 'book', you would type 'b', and then a request would be made. Then you would type 'o', and another request would be made, and so on. Lots of pointless requests!

Whereas a debounce function allows you to postpone the search request until you have finished typing the search query. You would type 'b', then the debounce function would be called, starting the timer for the target function. Then you would type 'o', and the debounce function would get called once again, resetting the timer and preventing the target function from being called too early. Then you would type 'o', and the timer would get reset again. After typing the last character, the debounce function would get called one last time, and after the timer runs out, it would call your target function - in this case the search request. So only one HTTP request gets made, after the user has finished typing!

Below are two examples, without a debounce function and with a debounce function.

Without debounce function:

With debounce function:

As you can see, example #1 updates the results each time you type a letter, whereas in example #2, the results only get updated after the user has finished typing.

In these examples, mock data is used and the results show up instantly. But if you used real data that gets fetched from a server, example #1 would be making lots of HTTP requests for every typed letter, clogging the queue. Whereas example #2 would only make one HTTP request, after typing in the full query.

Let's get coding!

Alright, now that we know what a debounce function is, let's see how it works.

The debounce function is actually surprisingly simple, and can be written in as little as 9 lines of code(and even less if you try):

function debounce( callback, delay = 300 ){
    let timer;
    return ( ...args ) => {
      clearTimeout( timer );
      timer = setTimeout( () => {
        callback( ...args );
      }, delay );
    }
}

The function takes a callback and delay duration as arguments. First it stores an empty reference to the timer, to be used later. Next it returns a function (that we will then store in a variable and call). This function clears the timer, and then sets a timeout with our specified delay, after which our callback will be run. If the returned functions gets called again before the timer has run out, the timer gets reset and the callback function gets prevented from being called until the timer runs out.

This is how to use the debounce function:

function search( term ){
  console.log( `searched for ${term}` );
}

const debouncedSearch = debounce( search, 600 );

Now we can call debouncedSearch() and it will debounce the search function. Let's see it in action.

First, let's try calling the search function several times in a row(without using debounce) and see what happens.

search( 'book' );
search( 'book' );
search( 'book' );
search( 'book' );

As you can see, the search function got called 4 times.

Now let's see what happens if we do the same, but with debounce.

debouncedSearch( 'book' );
debouncedSearch( 'book' );
debouncedSearch( 'book' );
debouncedSearch( 'book' );

As you can see, the search function only got called once, even though we called the debounce function 4 times! This is because we called the debounce function quickly one after another, so the callback got debounced (meaning that the timer got reset and the callback was prevented from being called)

If we waited until the timer ran out and then called the debounce function again, it would call the search function again(because the timer would run out)

setTimeout( () => {
  debouncedSearch( 'book' );
  setTimeout( () => {
    debouncedSearch( 'book' );
    debouncedSearch( 'book' );
      setTimeout( () => {
      debouncedSearch( 'book' );
      debouncedSearch( 'book' );
      debouncedSearch( 'book' );
    }, 1000 );
  }, 1000 );
}, 1000 );

Let's try implementing the search input from the earlier example using the debounce function

HTML:

<input type='text' id='search-input' placeholder='Search'/>

<h4>Results:</h4>
<ul id='results'>

<ul/>

JS:

//Mock data
const data = [
  'Book',
  'Book Number One',
  'Book Number Two',
  'Book Number Three',
  'Book Numero Uno',
  'Book Numero Dos',
  'Book Numero Tres',
  'Book #1',
  'Book #2',
  'Book #3'
]

//Results list element
const results_list_element = document.getElementById( 'results' );
const search_input_element = document.getElementById( 'search-input' );

//This function renders specified results into the results element
function renderResults( results ){
  //Clear the results element
  results_list_element.innerHTML = '';
    //Loop through results
  for ( const result of results ) {
      //For each result, append an element to the results list
    results_list_element.insertAdjacentHTML( 'beforeend', `<li>${result}</li>`);
  }
}

//This function filters data by term and then renders the results
function search( term ){
  const results = data.filter( item => item.toLowerCase().includes( term.toLowerCase() ) );

  renderResults( results );

}

//Debounce function
function debounce( callback, delay ) {
  let timer;

  return( ...args ) => {
       clearTimeout(timer);
       timer = setTimeout( () => {
         callback( ...args );
       }, delay );
  }
}

//Debounced search()
debouncedSearch = debounce(search, 600);

//Show all results before user has typed anything
renderResults( data );

//Add event listener for searching
search_input_element.addEventListener( 'input', e => {
  //Call debounced search with the input value
  debouncedSearch(e.target.value);
})

Below is a working CodePen:

So far we have learned how to implement and use the traditional debounce function.

A caveat of the traditional deboucne function that we used here is that it does not allow the callback to return a value. This forces us to have to write all the logic right in the callback function, since we can't extract any data from it. But luckily there is a solution.

Promises to the resuce!

With the help of promises, we can rewrite our deboucne function in such a way that it returns a promise that we can then then() to access the callback's return value.

This is what the updated debounce function looks like:

//Debounce function with return value using promises
function debounce( callback, delay ) {
  let timer;

  return( ...args ) => {
    return new Promise( ( resolve, reject ) => {
      clearTimeout(timer);
      timer = setTimeout( () => {
          try {
            let output = callback(...args);
            resolve( output );
          } catch ( err ) {
            reject( err );
          }
      }, delay );
    })

  }
}

The difference from the previous implementation is that we're returning a promise instead of a regular function, and then resolve/reject it with our callback's return value once the timer runs out. This allows us to add a return value to our callback, which we can then access with the 'then()' function, like so:

//Filters data by term and then returns the results
function search( term ){

  const results = data.filter( item => item.toLowerCase().includes( term.toLowerCase() ) );

  return results;

}

search_input_element.addEventListener( 'input', e => {
  //Call debounced search with the input value
  debouncedSearch(e.target.value)
  .then( results => renderResults( results ) )
  .catch(err => console.log(err.message));
})

Below is a CodePen with the updated debounce function. Visually speaking it behaves exactly the same way as the previous CodePen, but internally we are extracting the search results from the callback, instead of running all code right in the callback.

Conclusion

In this article you learned about the debounce function, its use case and how to implement one.

If you have any questions, comments or suggestions, feel free to leave them in the comments!

Thank you very much for reading and I hope you learned something new!

DEV Community: JorensM

Creating a tab-synced music player in React

Set up

Project Structure

useMusicPlayer.ts

worker.ts

util.ts

SongMetadata.ts

IconButton.tsx

PlayButton.tsx

TimeDisplay.tsx

MusicPlayer.tsx

style.css

App.tsx

Conclusion

Architecture design of my game My Pixel Plant

Overview

The architecture

Low-level classes

Renderer

Storage

Cache

Manager classes

UIManager

SaveManager

Utility classes

GameObject

Sprite

Plant

Data

Conclusion

Frontend VS Backend

Overview

Frontend

Frontend frameworks

Backend

Backend languages

Hybrids

Conclusion

My Developer Journey

How to keep state between page refreshes in React

Project Structure

usePresistState.ts

index.tsx

Conclusion

How to sync React state across tabs with workers

Project structure

worker.js

useTabState.ts

index.tsx

Conclusion

How to avoid the ripple effect when programming

Preface

Table of contents

How to avoid the ripple effect when programming

The premise

Think ahead and think thoroughly

Write abstract code

Make your code backwards compatible

Define good interfaces

Conclusion

How to make command-line apps accessible?

How to practice writing

Table of Contents

Reading

Freewriting

Rewriting others' work in your own words

Participating in writers' communities

Keeping a diary/journal

Conclusion

Creating a form In React Native With Formik

Introduction

Table of contents

Setup

Building the components

FieldBase

TextField

DropdownField

SliderField

Building the form

`useMusicPlayer.ts`

`worker.ts`

`util.ts`

`SongMetadata.ts`

`IconButton.tsx`

`PlayButton.tsx`

`TimeDisplay.tsx`

`MusicPlayer.tsx`

`style.css`

`App.tsx`