DEV Community: Anthony Zhang

I refactored my Discord clone app to see if using Redux helps with state management, and here is what I found…

Anthony Zhang — Mon, 24 Jun 2024 21:12:15 +0000

The Story

Before I chose the tech stack for my Discord clone app, I didn't expect this would be such a complex project so Redux was not part of the stack initially. The purpose of building this app, in the beginning, is I have been using Discord since 2017, and it is such a fun place to hang out with my friends, play games, chat, etc, so I want to replicate the experience. Later on, as I started to get a hang of modern web technologies, I became curious about what it takes to build Discord with the technologies I'm familiar with, for example, React.js.

The Problem

It took me about 2 to 3 months to finish building the app with all the basic discord features ready for end users to use, such as direct messaging, group messaging, voice calling, friend invites, server and channel invites, group audio and video chat, and more. However, the code I wrote made me want to stop myself from even beginning this project because it is really hard to maintain and the code is barely readable. My wish is to keep this project alive and add more features later on, so I decided to refactor it no matter what.

Evaluation before Refactoring

It is very obvious to me that my main App.js file is too bulky. It contains almost all states, functions, hooks, and so on with about 1000 lines of code. Even though the initial design of dividing each section to separate React components is quite nice, to be honest, there is still too much props drilling, which results in chaotic state management. Just to give you an idea of what my App.js looks like before refactoring.

Here is my react component with all the props passed to it,

<Route
    index
    element={
        <Fragment>
            <Channel
                currentServer={currentServer}
                setCurrentServer={setCurrentServer}
                currentUser={currentUser}
                currentChannel={currentChannel}
                setCurrentUser={setCurrentUser}
                signOut={signOut}
                handleAddChannel={handleAddChannel}
                handleCurrentChannel={handleCurrentChannel}
                channelModal={channelModal}
                setChannelModal={setChannelModal}
                handleChannelInfo={handleChannelInfo}
                newChannel={newChannel}
                voiceChat={voiceChat}
                setVoiceChat={setVoiceChat}
                currentVoiceChannel={currentVoiceChannel}
                setCurrentVoiceChannel={setCurrentVoiceChannel}
                handleLocalUserLeftAgora={handleLocalUserLeftAgora}
                muted={muted}
                defen={defen}
                handleDefen={handleDefen}
                handleVideoMuted={handleVideoMuted}
                handleVoiceMuted={handleVoiceMuted}
                voiceConnected={voiceConnected}
                isSharingEnabled={isSharingEnabled}
                isMutedVideo={isMutedVideo}
                screenShareToggle={screenShareToggle}
                stats={stats}
                connectionState={connectionState}
            />
            {
                voiceChat ?
                    <VoiceChat
                        voiceChat={voiceChat}
                        currentVoiceChannel={currentVoiceChannel}
                        config={config}
                        currentUser={currentUser}
                        isMutedVideo={isMutedVideo}
                        remoteUsers={remoteUsers}
                        setRemoteUsers={setRemoteUsers}
                        currentAgoraUID={currentAgoraUID}
                    />
                    :
                    <Chat
                        currentUser={currentUser}
                        currentServer={currentServer}
                        currentChannel={currentChannel}
                        handleAddMessage={handleAddMessage}
                        handleChatInfo={handleChatInfo}
                        currentMessage={currentMessage}
                    />

            }
        </Fragment>
    }
/>

Here are the states and useEffect handling user authentications,

const navigate = useNavigate();
const GoogleProvider = new GoogleAuthProvider();
const FacebookProvider = new FacebookAuthProvider();
const TwitterProvider = new TwitterAuthProvider();
const GithubProvider = new GithubAuthProvider();

//show modal for new server/channel
const [channelModal, setChannelModal] = useState(false);
const [serverModal, setServerModal] = useState(false);

//add new server/channel
const [newChannel, setNewChannel] = useState("")
const [newServerInfo, setNewServerInfo] = useState({ name: "", serverPic: "" });
const [serverURL, setServerURL] = useState(null);
const [file, setFile] = useState(null);

//current Login USER/SERVER/CHANNEL
const [currentUser, setCurrentUser] = useState({ name: null, profileURL: null, uid: null, createdAt: null });
const [currentServer, setCurrentServer] = useState({ name: "", uid: null });
const [currentChannel, setCurrentChannel] = useState({ name: "", uid: null });
const [currentMessage, setCurrentMessage] = useState("");

const [imageDir, setImageDir] = useState("")
const [isLoading, setIsLoading] = useState(false);

const [friendList, setFriendList] = useState([])

//google sign in with redirect
const googleSignIn = () => {
    signInWithRedirect(auth, GoogleProvider)
}

const facebookSignIn = () => {
    signInWithRedirect(auth, FacebookProvider)
}

const twitterSignIn = () => {
    signInWithRedirect(auth, TwitterProvider)
}
const githubSignIn = () => {
    signInWithRedirect(auth, GithubProvider)
}

//auth/login state change
useEffect(() => {
    const loginState = onAuthStateChanged(auth, (user) => {
        console.log(user)
        if (user) {
            const userRef = doc(db, "users", user.uid);

            getDoc(userRef).then((doc) => {
                const has = doc.exists();
                if (has) {
                    setCurrentUser({ name: doc.data().displayName, profileURL: doc.data().profileURL, uid: doc.data().userId, createdAt: doc.data().createdAt.seconds, status: doc.data().status })
                } else {
                    setDoc(userRef, {
                        displayName: user.displayName,
                        email: user.email ? user.email : "",
                        profileURL: user.photoURL,
                        userId: user.uid,
                        createdAt: Timestamp.fromDate(new Date()),
                        status: "online",
                        friends: [],
                    }).then((doc) => {
                        setCurrentUser({ name: doc.data().displayName, profileURL: doc.data().profileURL, uid: doc.data().userId, createdAt: doc.data().createdAt.seconds, status: doc.data().status })
                    })
                }
            })

            //if user not in the storage, add to the local storage
            if (!localStorage.getItem(`${user.uid}`)) {
                localStorage.setItem(`${user.uid}`, JSON.stringify({ defaultServer: "", defaultServerName: "", userDefault: [] }));
            } else {
                const storage = JSON.parse(localStorage.getItem(`${user.uid}`))
                setCurrentServer({ name: storage.defaultServerName, uid: storage.defaultServer })
                setCurrentChannel({ name: storage.userDefault.lengh == 0 ? "" : storage.userDefault.find(x => x.currentServer == storage.defaultServer).currentChannelName, uid: storage.userDefault.find(x => x.currentServer == storage.defaultServer).currentChannel })
            }
            navigate('/channels')
        } else {
            updateDoc(doc(db, "users", currentUser.uid), {
                status: "offline",
            })
            setCurrentUser({ name: null, profileURL: null, uid: null, status: null })
            navigate('/')

        }

    })

    return () => {
        loginState();
    }

}, [auth])

//auth sign out function
const signOut = () => {
    auth.signOut().then(() => {

        const userRef = doc(db, "users", currentUser.uid)
        updateDoc(userRef, {
            status: "offline"
        })
        setCurrentUser({ name: null, profileURL: null, uid: null, createdAt: null })
    }).then(() => {
        navigate("/", { replace: true })
    })
}

Here are some of the states and functions handling voice group chat using Agora SDK,

const [voiceChat, setVoiceChat] = useState(false);
const [currentVoiceChannel, setCurrentVoiceChannel] = useState({ name: null, uid: null })

const [config, setConfig] = useState(AgoraConfig)

const [isSharingEnabled, setIsSharingEnabled] = useState(false)
const [isMutedVideo, setIsMutedVideo] = useState(true)
const [agoraEngine, setAgoraEngine] = useState(AgoraClient);
const screenShareRef = useRef(null)
const [voiceConnected, setVoiceConnected] = useState(false);
const [remoteUsers, setRemoteUsers] = useState([]);
const [localTracks, setLocalTracks] = useState(null)
const [currentAgoraUID, setCurrentAgoraUID] = useState(null)
const [screenTrack, setScreenTrack] = useState(null);

const FetchToken = async () => {
    return new Promise(function (resolve) {
        if (config.channel) {
            axios.get(config.serverUrl + '/rtc/' + config.channel + '/1/uid/' + "0" + '/?expiry=' + config.ExpireTime)
                .then(
                    response => {
                        resolve(response.data.rtcToken);
                    })
                .catch(error => {
                    console.log(error);
                });
        }
    });
}

useEffect(() => {
    setConfig({ ...config, channel: currentVoiceChannel.uid })
}, [currentVoiceChannel.uid])

const [connectionState, setConnectionState] = useState({ state: null, reason: null })

useEffect(() => {
    agoraEngine.on("token-privilege-will-expire", async function () {
        const token = await FetchToken();
        setConfig({ ...config, token: token })
        await agoraEngine.renewToken(config.token);
    });
    //enabled volume indicator
    agoraEngine.enableAudioVolumeIndicator();

    agoraEngine.on("volume-indicator", (volumes) => {
        handleVolume(volumes)
    })
    agoraEngine.on("user-published", (user, mediaType) => {
        console.log(user.uid + "published");
        handleUserSubscribe(user, mediaType)
        handleUserPublishedToAgora(user, mediaType)
    });
    agoraEngine.on("user-joined", (user) => {
        handleRemoteUserJoinedAgora(user)
    })
    agoraEngine.on("user-left", (user) => {
        console.log(user.uid + "has left the channel");
        handleRemoteUserLeftAgora(user)
    })
    agoraEngine.on("user-unpublished", (user, mediaType) => {
        console.log(user.uid + "unpublished");
        handleUserUnpublishedFromAgora(user, mediaType)
    });

    agoraEngine.on("connection-state-change", (currentState, prevState, reason) => {
        setConnectionState({ state: currentState, reason: reason })
    })

    return () => {
        removeLiveUserFromFirebase(currentAgoraUID)

        for (const localTrack of localTracks) {
            localTrack.stop();
            localTrack.close();
        }
        agoraEngine.off("user-published", handleRemoteUserJoinedAgora)
        agoraEngine.off("user-left", handleRemoteUserLeftAgora)
        agoraEngine.unpublish(localTracks).then(() => agoraEngine.leave())
    }

}, []);

And this is only part of the code for my main App.js file. The reason I was putting all of them in here is because a lot of the state needs to be shared across child components, so I have to put it at the top of the DOM tree to be passed. (If you want to take a look at my old App.js file, here it is for you.)

Refactoring

The refactoring consists of a few steps. First, I need to divide them into different slices with different features, such as authentications, voice chat(Agora states), channel, server, message input, user, etc. Second, to further shrink the size of my App.js file, I need to group functions with similar purposes and put them into separate folders, for example, a util folder for all the utility functions, a handler/service folder for all the handlers such as user input handlers, voice chat room control handlers, server handlers, and more.

The Result

Here is the shrunken-down version of my App.js file after refactoring. It serves as the project entry point and only deals with routing making the code clean.

function App() {
    const dispatch = useDispatch()
    const { user } = useSelector((state) => state.auth)
    const { isVoiceChatPageOpen } = useSelector(state => state.voiceChat)
    const { currVoiceChannel } = useSelector(state => state.channel)

    const navigate = useNavigate();

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, async (user) => {
            if (user) {
                const userRef = doc(db, "users", user.uid);
                const userDoc = await getDoc(userRef);

                if (userDoc.exists()) {
                    const userData = userDoc.data();
                    console.log("userData", userData)
                    dispatch(setUser({ ...userData }))
                } else {
                    const userDoc = await setDoc(userRef, {
                        displayName: user.displayName,
                        email: user.email ? user.email : "",
                        avatar: user.photoURL,
                        id: user.uid,
                        createdAt: Timestamp.fromDate(new Date()),
                        status: "online",
                        friends: [],
                        bannerColor: await getBannerColor(user.photoURL)
                    })
                    if (userDoc) {
                        dispatch(setUser(userDoc))
                    }
                }
                getSelectStore()
                dispatch(setIsLoggedIn(true))
                navigate("/channels")
            } else {
                dispatch(setUser(null))
                dispatch(setIsLoggedIn(false))
                navigate("/")
            }
        })

        return unsubscribe;
    }, [auth])

    return (
        <ThemeContextProvider>
            <CssBaseline />
            <Error />
            <Routes>
                <Route path="/" element={<LoginPage />} />
                <Route path="/reset" element={<ResetPasswordPage />} />
                <Route path="/register" element={<RegisterPage />} />
                <Route element={
                    <Box className="app-mount">
                        <Box className="app-container" >
                            <Outlet />
                        </Box>
                    </Box>
                } >
                    <Route path="/channels"
                        element={
                            <Fragment>
                                <ServerList />
                                <Outlet />
                            </Fragment>
                        }>
                        <Route index
                            element={
                                <Fragment>
                                    <Channel />
                                    {
                                        isVoiceChatPageOpen ?
                                            <VoiceChat currVoiceChannel={currVoiceChannel} />
                                            :
                                            <Chat />
                                    }
                                </Fragment>
                            }
                        />
                        <Route
                            path='/channels/@me'
                            element={
                                <Fragment>
                                    <DirectMessageMenu />
                                    <DirectMessageBody />
                                </Fragment>
                            } />
                    </Route>
                </Route>
                <Route path="*" element={<PageNotFound />} />
            </Routes>
        </ThemeContextProvider>
    )
}

export default App;

Here is the Redux state graph. Almost all states are managed inside Redux.

Does Redux help with state management? For the obvious reason, yes it does. It makes my code way easier to read and maintain. Also with Redux, I can access the global state wherever I want. For example, both channel and voice chat components need to access the mic mute/unmute and camera on/off state, I can easily grab them in each child component.

My take on how to improve the performance and accessibility of our website with React? (2) Accessibility

Anthony Zhang — Sat, 09 Dec 2023 04:03:40 +0000

The topic of creating a more accessible internet environment has been raised a lot more in recent years, especially in web development. Making web pages available to read for disabled people is almost a required skill for front-end engineers.

How could we improve the accessibility of our website?

Use semantic HTML tags and add AIRA attributes

By using HTML tags, the type of content that is highlighted would be read out by the screen readers. These are built-in features that are interactive elements with keyboard support. For example, , ,, are the most used ones.

Disabled people could use Tab and Shift + Tabnavigate through each element.

Basically, each element tag would have one or more of the following 4 properties:

type. Describe its type such as a button, or an input area.
name. Describe its name or title. Mostly, it is the computed label. If there is no title or placeholder attribute, we could use AIRA attributes such as aria-label and aria-labelledby.
value. Usually associate with . What the user has typed in the text field.
**state. **For example, can be expanded or collapsed.

Color and contrast accessibility

Unlike sight-impaired people, some people may see things with low vision but have difficulty perceiving colors. Color and contrast accessibility are another important part we need to consider adding to our website.

The WebAIM guidelines give the following standards for developers to follow:

Level A is a basic requirement for some users with disabilities to be able to access and use web content.
Level AA indicates overall accessibility and removal of significant barriers to accessing content.
Level AAA provides improvements and enhancements to web accessibility for some users with disabilities.

Typically, Level AA is the minimum recommendation with the following criteria:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text

*Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;*

Incidental

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes

Text that is part of a logo or brand name has no contrast requirement.

These color and contrast ratio can be confusing since these are usually taking into account by the UI and UX engineers. But as front-end developers, playing a role in the web development process, we should at least know that what they are and how they work.

After putting these standards into practice, I tested my personal portfolio website with Google Lighthouse, and here is my result.

If we look through the report, I did pretty well on the naming and labeling part, but I still lack the experience in getting the correct contrast ratio correct. However, Google Lighthouse can guide me to improve the accessibility each time, and each time my accessibility score went up.

With these accessibility features, more people could access the endless web world. The developer community differs vastly from other working communities as it is friendly and inclusive, and it is one of the prior reasons why I chose front-end engineer as my career path. I hope that after reading this article, more developers will understand the importance of making our website more accessible to the disabled community.

Let’s connect:

Portfolio | Github | Medium| LinkedIn

Introduction to Web Accessibility

Web Content Accessibility Guidelines

My take on how to improve the performance and accessibility of our website with React? (1) Performance

Anthony Zhang — Sat, 09 Dec 2023 03:57:32 +0000

Usually, SEO ranking plays a huge role in making our website stand out. As you may have known, page loading speed is one of several factors that affect your SEO ranking, and improvement in website performance results in ranking up in SEO. Therefore, this leads to the topic I will be discussing in this article,

How could we improve the performance of our website?

1. Reduce bundle size, unused packages, and third-party libraries

When we first started coding as a Frontend Developer, Create React App(or CRA for abbreviation) was our best friend. It bootstraps our single-page application in React so that we don’t have to worry about the required configuration. However, there are tradeoffs in using CRA. The drawbacks are: that its bundle size is bulky, and with all the unused packages preinstalled it can slow our website in terms of performance.

One solution is that we don’t use CRA in the first place and configure Webpack and Babel depending on the situation. However, for those who already used CRA for their projects, it can be hard and time-consuming to eject our existing project.

Therefore, one workaround I found to reduce the bundle size is with the use of a library named **depcheck**. We can install the package by

**npm install depcheck**

and run command,

**depcheck**

Then we will see all the unused dependencies and missing dependencies in a list. which later we can uninstall accordingly. Here is an example of the list I got for my portfolio website.

PS D:\Github Projects\portfolio-website> depcheck
**Unused dependencies**
* [@fortawesome/fontawesome-free](http://twitter.com/fortawesome/fontawesome-free)
* [@fortawesome/free-regular-svg-icons](http://twitter.com/fortawesome/free-regular-svg-icons)
* [@material](http://twitter.com/material)-ui/icons
* [@mui/styles](http://twitter.com/mui/styles)
* [@testing](http://twitter.com/testing)-library/jest-dom
* [@testing](http://twitter.com/testing)-library/react
* [@testing](http://twitter.com/testing)-library/user-event
* body-parser
* concurrently
* mongoose
* node
* react-swipeable-views
* request
* sass
* web-vitals
* webpack
**Missing dependencies**
* eslint-config-react-app: .\package.json
* [@material](http://twitter.com/material)-ui/styles: .\src\components\Project\ProjectDetails.jsx

My take: Third-party UI libraries are usually bulk in size, which could dramatically lower the performance of our website. For example, my website uses icons from fort awesome, UI components from Material UI, and an animation library from GSAP. From the Lighthouse Treemap below, we can see a lot of unused resources from them(on the right half).

Therefore, think considerably before you implement them in your projects.

2. Use lazy loading and code-splitting

There are a lot of different ways to lazy load. And we can lazy load different elements.

Component lazy loading in React

For components, luckily in React, there are build-in methods that we can use to lazy load our components. It allows us to dynamically import components.

const MusicPlayer = **React.lazy**(() => import("./MusicPlayer"));

Here is an example taken from my website, where I am dynamically importing my Music Player component. The reason to use lazy loading is, that this component is at the very bottom of my page near the footer, so users do not need to see it during the first painting.

The lazy component should later be rendered inside a Suspense component that looks like this,

**<Suspense** 
     **fallback**={
        <Box>
             <Widget>Loading...</Widget>
        </Box>}
**>**
     <MusicPlayer />
**</Suspense>**

My take: The habit of breaking our website into smaller reusable components now makes more sense because in a way we can only load the essential components during the first painting, so users won’t have to wait for everything to be loaded. Though the differences for smaller websites are in milliseconds, for a scalable website that later becomes enormous, these differences could add up to seconds I could imagine.

Metadata preloading (audio/video)

Set preload attribute to none restricts the browser from loading the audio or video file when the page is loaded, thus saving a lot of network resources.

Here is an example taken from my website,

<audio id='audio' **preload='none'** ref={audioRef}></audio>

My take: The audio/video files are usually greater than 3MB (before compression), which takes longer time to load if we wait for it. Therefore, loading the metadata after the user takes their first action could greatly improve page load speed.

Lazy loading with images

Set loading attribute to lazy would delay the loading until everything else is loaded. This is extremely helpful if we have a lot of images to display on our website.

Example:

<img src="image.jpg" alt="..." **loading="lazy"**>

My take: Although theoretically we can lazy load every image on our website, we don’t want to apply these settings to images that are within the first viewport that users can see.

Results by Google Lighthouse shows performance improvement

I will show the improvement of my website. Simply doing these tricks I mentioned in the article, makes me realize that even a small effort in doing so could lead to a 34% performance leap. (Your result may vary.)

Before:

After:

In the next article, I will be discussing how we could improve the accessibility of our website, which is also a measure factor of SEO ranking. Make sure to keep your eyes on my next medium update.

Let’s connect:

Portfolio | Github | Medium| LinkedIn

Code-Splitting - React

Lazy loading - Web Performance | MDN

Building a Music Player using React hook useState() with my own implementation

Anthony Zhang — Sat, 09 Dec 2023 03:46:00 +0000

Having been practicing the piano for almost 10 years, I came across this idea to add a music player playing my favorite music on my portfolio website as the development process was halfway through. I feel that it’s just a nice and unique feature to have because it can also showcase my personality through the music I listen to.

The building process is a struggle. I got a painful and slow start with this idea. I did not know what technology I would be using to implement the basic functionalities of a music player, such as play/pause, previous/next song, volume control, backward/forward, etc. Fortunately, there are methods that I found build-in with JavaScript that can do some of these things. However, features like go to the next song can not be found within its function library(Correct me if I’m wrong), so I decided to write my own functions with the help of hook useState().

We need some sort of music player layout with good aesthetics to start with so that it is appealing to people’s eyes. Here, I take the music player layout from Material UI, where they showcase an example for their Slider component.

For a better user experience, with just a little twist I added a previous and next song button and a mute volume icon.

With our layout ready, we can start thinking about the logic behind functionalities and start coding.

First, we need to initialize a few state. A few elements we need to consider are:

Duration, playback position and time left indication.
Playing? Or, paused?
song unique ID.
Volume.

From above, we have the following state initialized:

// song length in sec
const [duration, setDuration] = useState(0);

// playback position
const [position, setPosition] = useState(0);

// playing or paused
const [paused, setPaused] = useState(true);

const randomizer = Math.floor(Math.random() * (musicList.length - 1) + 1)
//initial random song
const [songId, setSongId] = useState(randomizer);

//0.2 means 20% volume
const [volume, setVolume] = useState(0.2);

One thing to point out is that we need the song to be paused initially because it can be obtrusive if the song played by itself. This is better practice because you usually want your video or audio to be muted unless the play interaction is started by the users. Think about a college student or your colleagues opened your website during a class or a meeting but forget to mute their laptop, it will be very awkward for them.

To start putting audio element on the webpage, we need an tag, and its will depend on the songId that we choose from my manually imported music list. With useRef(), we can easily access the DOM. (audioRef.current)

Here is a peek of the structure of my music list data in a JavaScript file. You can add more songs later on.

Here comes the main part, where we are going to implement features for each of our buttons and bars.

Playing/Paused. Fairly simple. JavaScript includes play() and pause() functions. All we need to do is to change their state when the button is clicked.

2. Rewind/Forward. Playback bar. I found 5 secs to be reasonable for rewind and forward. currentTime gives the current playing timestamp for the song. It is one of the properties of audioRef.current.

If the song is at the beginning 5 seconds, it should not go below 0 seconds. For the same reason, if a song is at the end 5 seconds, it should not go beyond song’s duration. Otherwise this music player will be bugged out.

Keep in mind. We not only have to change the currentTime of our song, but also have to show its position on the playback bar. The code below keeps them in sync. Every time a user drags the playback bar, it will update its position and assign the value to the currentTime property.

3. Previous/Next Song. This is more complicated because there are more things to be considered.

If this is the last song in our music list, it should skip to the first song. Otherwise, it will proceed as a normal song skip. And every time we skip a song, we need to load the new data and play so that the user do not need to click the play button again. For better experience, we could add an error handler if something went wrong with the loading.

4. Volume Change. Here I use localStorage to let the browser remember what user’s previous volume is.

To show the mute volume icon when volume reaches 0, I simply use a ternary operation.

5. Display current playback time/Time left. Current playback time is the same as current playback position. Time left will be song duration minus current playback time.

Due to the fact that the duration property of audioRef.current is in seconds, we need to format it into min:sec.

We can only get the song duration after song data is being loaded so here we can use the onLoadedMetadata event handler.

The loadedmetadata event is fired when the metadata has been loaded.

6. Time update on each tick. Keep track of playback in real time, and if song reaches to the end, it will trigger the skip next song function. Here we use another event handler onTimeUpdate.

The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.

We have finished writing all the functions with the buttons and bars. The last thing we need to do is to put these functions in their corresponding onClick event handler as well as incorporating them with our layout. (For bars, you would need to use onChange event handler).

Now I have a bug free music player on my portfolio website created by myself. I know for sure this is not the best practice to build it this way, so please leave a comment if you know anything that can improve upon on my implementation.

Here is my entire code for the music player component in JSX: Code. If you like my work, please don’t forget to star my repo.

Let’s connect:

Github | Medium|

Web Audio API best practices - Web APIs | MDN

Form Validation with Material UI Text Field component and React

Anthony Zhang — Sat, 09 Dec 2023 03:31:34 +0000

In this article, I will talk about form validation, and how you could use Text Field component in Material UI with React to create a great user experience in form validation.

First of all, what is form validation? Form validation is one of the fundamental features in web development. Client-side validation helps ensure that the data, users submitted to the server side, is in the correct format. It stops the issues from reaching to the server thus saving times back and forth. However, form validation can sometimes be tricky because there are a lot of things to consider during the process.

Below are a few functionalities I found necessary and important to include in the validation process:

Format Validation

Format validation is mainly about the use of regular expression. I will not go deep into the concept, but it basically helps restrict the input pattern to match the correct character format in strings. A few common use cases are formats with phone number, email address, mail address and password.

2. Required

With required, we are able to tell the end users what information we are looking for and remind them with some forms of feedbacks, such as an error message or a popup. This will prevent any submission with missing information.

3. Feedback

This is probably the most important part out of these three points. As front end developers, we could write a perfect logic for form validation, but without clear feedback, users could be confused with what to expect and thus results in drop in efficiency. This reminds me of an idea that Steve Jobs mentioned in the WWDC’97,

You’ve got to start with the customer experience and work backward to the technology.

I think this is what we should keep in mind as we build web applications.

To start our example, first we need to have our layout ready and import all the required components from Material UI. Here, I use component="form" for the component, so it serves as a component equivalent to a integrated with the element.

If we need to set this text field required, we can simply add required={true} as one of our props for , and as we click on the submit button, a warning pops up indicating “Please fill out this field.”,

For form validation, we are going to first define the input rules like this,

const reg = new RegExp("[a-z]");

There are other regex for different purposes, I will include one here for email address. (You can easily find other regex rules on the internet)

(?:[a-z0–9!#$%&’+/=?^_`{|}~-]+(?:.[a-z0–9!#$%&’+/=?^_`{|}~-]+)|”(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])”)@(?:(?:a-z0–9?.)+a-z0–9?|[(?:(?:(2(5[0–5]|[0–4][0–9])|1[0–9][0–9]|[1–9]?[0–9])).){3}(?:(2(5[0–5]|[0–4][0–9])|1[0–9][0–9]|[1–9]?[0–9])|[a-z0–9-]*[a-z0–9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])

and then we can use test() to test whether the input matches the character combinations in strings, and return true/false. With custom hook in react useState() and form event handler onChange , we can write,

const [value, setValue] = useState("");
**const [valid, setValid] = useState(false);**

const handleValidation = (e) => {
    //set value to user input
    setValue(e.target.value);

    //define regex     
    const reg = new RegExp("[a-z]");

    //test whether input is valid
    **setValid(reg.test(e.target.value));**
};
...
<TextField
    name="Name"
    label="Name"
    variant="outlined"
    value={value}
    **onChange={(e) => handleValidation(e)}**
    required={true}
/>

How do we let user know that their input are invalid? has another useful prop error , where if we pass in false, it will change the color of the textfield border to red, indicating an invalid input. Here we can simply pass in valid like this,

<TextField
    name="Name"
    label="Name"
    variant="outlined"
    value={value}
    onChange={(e) => handleValidation(e)}
    **error={!valid}**
    required={true}
/>

If we put in “123” as our input,

Voilà! There we have it. A simple form validation with Text Field Material UI and React.

Here is all the code in Code Sandbox: Demo

Let’s connect:

Github | Medium |

How can I validate an email address using a regular expression?

Client-side form validation - Learn web development | MDN

DEV Community: Anthony Zhang

I refactored my Discord clone app to see if using Redux helps with state management, and here is what I found…

The Story

The Problem

Evaluation before Refactoring

Refactoring

The Result

More Questions Ahead

My take on how to improve the performance and accessibility of our website with React? (2) Accessibility

How could we improve the accessibility of our website?

Use semantic HTML tags and add AIRA attributes

Color and contrast accessibility

My take on how to improve the performance and accessibility of our website with React? (1) Performance

How could we improve the performance of our website?

1. Reduce bundle size, unused packages, and third-party libraries

2. Use lazy loading and code-splitting

Results by Google Lighthouse shows performance improvement

Building a Music Player using React hook useState() with my own implementation

Form Validation with Material UI Text Field component and React