DEV Community: Chris Westbrook

creating a next.js front end with a express backend using typescript

Chris Westbrook — Fri, 12 Apr 2024 12:47:59 +0000

Well I didn't realize my last youtube video was a disaster, no one could see my screen. I think we got it sorted now so that people can see my screen and me. Check out my next video on how to create an express backend with a next.js front end in typescript

My First Youtube live stream

Chris Westbrook — Thu, 11 Apr 2024 20:16:21 +0000

I am a blind web developer, and I made my first youtube livestream today. i converted a webhook using clerk authentication from a next.js webhook to an express route for use in an express api server. I recorded my screen reader as well so you would be able to hear how I code. I hope the visuals turned out OK i.e. you can actually see my screen, I'm not very familiar with how obs works, I just added the sources. Are there any virtual react/programming meetups out there, I live in a small town so there isn't much here. Link to the video below:
https://www.youtube.com/watch?v=ZRTmhZY6SK4&t=42s

accessibility tips from an accessibility engineer

Chris Westbrook — Wed, 13 Mar 2024 02:08:32 +0000

I am a blind accessibility engineer and programmer and I thought I would write an article detailing some of the common things I see in my day job. Accessibility may seem overwhelming, but it doesn't have to be. So here are three things you can do to improve your website's accessibility right away.

use semantic html
If something should be a button, make it a If something should be a link, make it a link. Don't use purely clickable divs to indicate actions. If you must make a custom web control, reach for a library that has implemented aria best practices. There are a lot of complications to using aria correctly, and why reinvent the wheel?
label form fields
It is super important to label form fields. Otherwise, people using assistive technology may not understand which fields need which data. Labeling is typically done using the tag which takes the id of the form field as the for attribute and wraps the visible label. For example:

<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName"/>

You may also use the aria-describedby attribute, which takes the id of a div/span htat describes the control. This is typically used to add additional instructions to a form field or convey validation errors.

properly mark up modals and set focus to them You need to set focus to an element inside a modal dialog when it opens, otherwise people using assistive technology will have no clue that your modal opened. Also decorate your modal with the role="dialog" and aria-modal="true" attributes. Ensure that users cannot escape the modal by tabbing out of it into the page content behind it. A good library should take care of this for you.

I hope this short post has been helpful. Please leave feedback/questions in the comments.

Labeling of Html Form Fields

Chris Westbrook — Fri, 03 Jun 2022 00:59:11 +0000

Here is a post I wrote on labeling of forms. I hope it helps someone.

queryRaw with Prisma

Chris Westbrook — Wed, 01 Jun 2022 22:00:05 +0000

Here is a post. Let me know what you think.

A Blind Web Developer's Portfolio

Chris Westbrook — Wed, 01 Jun 2022 00:09:33 +0000

I am a blind web developer by hobby, accessibility engineer by occupation, and I just recently published the start of my portfolio. Would love to communicate with other developers and get feedback. View my project and blog at https://www.chriswestbrook.com. Leave a comment here or on my blog.

Creating an accessible autocomplete

Chris Westbrook — Thu, 29 Jul 2021 02:29:08 +0000

I am a blind web developer who happens to work for a great company that tests websites for accessibility called Accessible 360. I thought I would attempt to write a helpful post on making your autocomplete controls accessible.
Let's get started:

Ensure the correct aria is present on your input and results list. These include:
Most important, aria-activedescendent property When an item is selected with the arrow keys, the ID of that list item should be set in the aria-activedescendent property. So this property should change with each new selection that is made as the user arrows through the suggestions.
aria-expanded: set this attribute to true when list items are shown.
aria-controls: set to the ID of the ul that contains the results.
aria-haspopup=listbox and aria-autocomplete=list on the input control.
The ul containing the results must be set to a role of listbox. IN addition, each li within the ul must have a role of option and an ID to match to aria-activedescentent property of the input.
Optionally, an aria-describedby attribute should be present on the input pointing to the id of a div/span with instructions, such as start typing and arrow down to see results, etc.
I hope this article helps someone. I made a code sandbox with a simple accessible autocomplete in react that can be found at
https://codesandbox.io/s/objective-chatelet-ikr7k?file=/src/App.js

Managing Focus in React

Chris Westbrook — Sun, 04 Aug 2019 20:21:22 +0000

There are times when you may wish to set focus to a specific element in your react component, such as when the component first mounts, or perhaps after form submission. This is done relatively easily in react, and today I will show you how.

Ref api

In react, you can access a dom element easily using the ref attribute. Consider the followoing simple react component.

import React, { useRef } from 'react';
const HelloWorld = () => {
    const mainRef = useRef(null);
    return (
        <div>
            <h1 ref={mainRef} tabIndex="-1">
                Hellow World
            </h1>
            Hello World
        </div>
    );
};

export default HelloWorld;

Notice in the above component, I created a variable with the name mainRef, though it could have been called anything. It simply has to be initialized with

useRef(null);

then when that variable is created, it can be referenced anywhere in the returned markup for the component using hte ref attribute. Here I set it on an h1 element, but it could have been set to anything. a form field, a div, a button, etc. I included a tabIndex of -1 on the h1 so that the element would be focusable, which we will handle in the next section.

setting focus with ref.current

Now we can set focus to a react ref by using an effect, like so:


useEffect(() => {
        mainRef.current.focus();
    }, [mainRef]);
    ```


This effect is pretty self-explanatory. it uses mainRef.current to get the dom element and then calls focus() on it. If it were an input, you could have set the value with mainREf.current.value="blah"; Anything you can do witha dom element you can do with ref.current.
#making things easier with a custom hook
You can make the task of setting focus on initial component mounting even easier with a custom hook. I created a custom hook that sets focus to a given ref as well as set the document title to a given string. It is below:


```jsx
import { useEffect } from 'react';
const useInitialfocus = (ref, title) => {
    useEffect(() => {
        ref.current.focus();
        document.title = title;
    }, [ref, title]);
};
export default useInitialfocus;

Here is the HelloWorld component with my useInitialFocus hook in use:

import React, { useRef } from 'react';
import useInitialFocus from './hooks/useInitialFocus';
const HelloWorld = () => {
    const mainRef = useRef(null);
    useInitialFocus(mainRef, 'Hello World');

    return (
        <div>
            <h1 ref={mainRef} tabIndex="-1">
                Hellow World
            </h1>
            Hello World
        </div>
    );
};

export default HelloWorld;

Make sure to change the import to useInitialfocus depending on your folder structure, etc. I hope this post gives you some incite on how to manage focus in react. Happy coding!!!

Using a custom hook to make form creation a breeze

Chris Westbrook — Mon, 29 Jul 2019 00:58:39 +0000

Writing forms in react can be tedious. There are form libraries that can help, but that means adding another dependency to your project and potentially another layer of complexity that you don't need. Here I will show you how to make a simple set of functions that can be used with any form using a custom hook. I'll assume you know the basics of react, but I will try to explain as much as possible to help beginners. So here goes.

what are hooks?

Some of you may be wondering what hooks are? Perhaps you just started working in react, or you have not dived into the latest and greatest react yet. In short, hooks are an easy way to share stateful logic across components without using crazy things like render props or higher order components. This is made possible because now, the state of your react components can be stored in functions, which can easily be shared between components and even projects. I would highly suggest reading the react hooks documentation for more details.

What should this thing do, anyway?

Think about a form. You might have a signin form with a username and password, or a form that collects order information to be submitted to a database. What parts of the form can be made generic that are common to all form? Well, all forms will need an object to store data, an onChange event to capture changes, an event for validating form input, an onBlur event for keeping track of the touched state of the inputs, and a submit event. It should take as parameters a function for handling specific validation, a function for handling form submission, and a set of initial values for the form. Let’s get started!!

setting up

First let’s start with the basics. We need to import the useState hook from react. Then we need to set up the signature for our hook. I will call it useForm, but you can call it whatever you like. Note that whatever you call it must start with the word use, as there are certain rules with hooks that you can read about in the documentation. Create a new file and paste the code below:

import { useState } from 'react';

const useForm = (handleSubmitCallback, validateCallback, initialValues) => {

There is not a ton going on here, we are just importing the useState hook and then setting up a constant variable equal to an arrow function with the parameters we spoke of above. We will later export this constant from this file so we can use it elsewhere.

setting up state

Now we need to set up the state variables we need. This is done with the useState function which returns an array containing two items, a variable containing the state and a function to set the state value later. These state variables should be pretty self explanatory. I have included them below.

const [form, setForm] = useState(initialValues); //for holding initial form data

    const [errors, setErrors] = useState({}); //for validation errors
    const [success, setSuccess] = useState(false); //set to true if form was submitted successfully
    const [submitting, setSubmitting] = useState(false); //set to true when first submitting the form to disable the submit button

#setting up touch

I mentioned before that we needed to have a variable that kept track of touched status. This is important for displaying form errors. You don’t want to display that a form field is invalid before the user has had a chance to interact with it. The touched variable should initially have the same shape as the form’s initial values, with all fields set to false [not touched]. Below is the code.

 const touchedInitial = {};
        //if the initial values aren't populated than return an empty object.
        if (!form) return {};
        //create a new object using the keys of the form object setting all values to false.
        Object.keys(form).forEach(value => {
            touchedInitial[value] = false;
        });
        return touchedInitial;
    };
    const [touched, setTouched] = useState(setInitialTouched());

setting up validation

Validation is an often overlooked part of form creation. Here I create a form validation wrapper function that calls the function that was passed into the hook, then sets the error state to the value that is returned as well as return that value from itself. The reason the function returns the value as well as setting state is because state changes are not reflected instantly, so if you are going to use a value later in the same function you change the state in, you need to keep a local copy of that value. We will see that in the submit function later. For now here is the validation function.

const validate = () => {
        let e = validateCallback();
        setErrors(e);
        return e;
    };

handleBlur and handleChange

These two events are pretty self-explanatory if you’ve worked with forms in react. I am using object destructuring to get the name and value off the target of the event and then setting state in the form object accordingly.

    const handleChange = e => {
        const { name, value } = e.target; //use destructuring ot get name/value from target for ease of use
        setForm(state => {
            //here we use the spread operator to return the object. This puts the properties of
            //state into a new object and then adds on the newly created value.
            //since properties on the right side of a spread operation always "win", the new value will be returned with the new objecgt.
            return { ...state, [name]: value };
        });
    };
    const handleBlur = e => {
        const { name } = e.target;
        setTouched(c => {
            return { ...c, [name]: true };
        });
        validate();
    };

handling form submission

Honestly this is the part of the hook that I struggled the most with and might need the most improvement. I made handleSubmit an async function because my handleSubmitCallback function that I pass to the hook is expected to return a promise resolving to true or false, indicating a successful form submission or not. I then use this return to set the state of success, which is then returned from the hook so the calling component can do whatever it wishes, i.e. redirect to another component, display a message to the user, etc. Also before form submission happens, all fields are set to touched and the form is validated so all form validation errors will be displayed.

    const handleSubmit = async e => {
        setSubmitting(true);
        //set all fields to touched
        const touchedTrue = {};
        Object.keys(form).forEach(value => {
            touchedTrue[value] = true;
        });
        setTouched(touchedTrue);
        e.preventDefault();
        const err = validate();

        if (Object.keys(err).length === 0) {
            //if there are no errors, set submitting=false and submit form.
            //I am setting submit to false before calling handleSubmitCallback because in my calling component I am performing a redirect with react-router and if I wait until 
            //after I get a warning about trying to set state on an unmounted component.
            setSubmitting(false);
            console.log('no errors.');
            setSuccess(await handleSubmitCallback());
        } else {
            setSubmitting(false);
            setSuccess(false);
        }
    };

wrapping up

Now all that's left to do is return everything from my hook and export it.

return {
        handleChange,
        handleBlur,
        handleSubmit,
        setForm,
        form,
        errors,
        touched,
        submitting,
        success,
    };
};
export default useForm;

Now the calling component simply needs to call the hook with one line of code at the top level of the component:

const { handleChange, handleSubmit, handleBlur, setForm, form, errors, success, submitting } = useForm(
        handleSubmitCallback,
        validationCallback,
        initialValues
    );

Now these functions can be used like so:
<input type="text" name="test" onChange={handleChange}... you get the idea.
You can also use these functions in conjunction with inline onBlur or onChange functions if you needed to run calculations for a specific field like so:

<input onBlur={e=>{
//do calculations here...
handleBlur(e);
}}/>

If you have any suggestions for improvement please feel free to make them. This is my first really big dev.to post, so I would appreciate constructive criticism on how I can improve.
Here is the entire hook source code:

import { useState } from 'react';

const useForm = (handleSubmitCallback, validateCallback, initialValues) => {
    const [form, setForm] = useState(initialValues); //for holding initial form data
    const [errors, setErrors] = useState({}); //for validtion errors
    const [success, setSuccess] = useState(false); //set to true if form was submitted successfully
    const [submitting, setSubmitting] = useState(false); //set to true when first submitting the form to disable the submit button
    //below is a function that creates a touched variable from hte initial values of a form, setting all fields to false (not touched)
    const setInitialTouched = form => {
        const touchedInitial = {};
        //if the initial values aren't populated than return an empty object.
        if (!form) return {};
        //create a new object using the keys of the form object setting alll values to false.
        Object.keys(form).forEach(value => {
            touchedInitial[value] = false;
        });
        return touchedInitial;
    };
    const [touched, setTouched] = useState(setInitialTouched());
    const validate = () => {
        let e = validateCallback();
        setErrors(e);
        return e;
    };
    const handleChange = e => {
        const { name, value } = e.target; //use destructuring ot get name/value from target for ease of use
        setForm(state => {
            //here we use the spread operator to return the object. This puts the properties of
            //state into a new object and then adds on the newly created value.
            //since properties on the right side of a spread operation always "win", the new value will be returned with the new objecgt.
            return { ...state, [name]: value };
        });
    };
    const handleBlur = e => {
        const { name } = e.target;
        setTouched(c => {
            return { ...c, [name]: true };
        });
        validate();
    };
    const handleSubmit = async e => {
        setSubmitting(true);
        //set all fields to touched
        const touchedTrue = {};
        Object.keys(form).forEach(value => {
            touchedTrue[value] = true;
        });
        setTouched(touchedTrue);
        e.preventDefault();
        const err = validate();

        if (Object.keys(err).length === 0) {
            //if there are no errors, set submitting=false and submit form.
            //I am setting submit to false before calling handleSubmitCallback because in my calling component I am performing a redirect with react-router and if I wait until
            //after I get a warning about trying to set state on an unmounted component.
            setSubmitting(false);
            console.log('no errors.');
            setSuccess(await handleSubmitCallback());
        } else {
            setSubmitting(false);
            setSuccess(false);
        }
    };

    return {
        handleChange,
        handleBlur,
        handleSubmit,
        setForm,
        form,
        errors,
        touched,
        submitting,
        success,
    };
};
export default useForm;

The best thing you can do to make your website accessible

Chris Westbrook — Fri, 26 Jul 2019 11:39:45 +0000

Are you interested in making your website accessible, but don't know where to begin? are you afraid of the complexity involved? are you daunted by testing with a screen reader? There is one technique that will get you 90% of the way there: use the appropriate HTML control for what you are intending to do.

Just the other day I found a site that had an option in it's payment form called "Cover Fees" which was a yes/no toggle. Rather than use a checkbox, they used a clickable element They did go to some length to make it keyboard accessible, it was in the tab order with a proper tabIndex, but there was no way for a screen reader to tell if the option was on or off because it was simply a clickable div. Had they used a checkbox, not only would it have been in the tab order by default, but screen readers automatically announce the state of checkboxes and they can be easily changed. Not to mention that checkboxes are actually considered form controls. We as blind people have different keyboard shortcuts to move quickly between form fields, and as long as they are properly labeled with the label tag (another soapbox issue of mine) the screen reader will read the controls correctlyy. clickable divs don't participate in this because they are not form controls. While there may be some ways through aria to make some things accessible, and I realize there is certainly a need for widgets (modals, for example), wherever possible we should be using the controls the browsers give us. This will go a long way to making your app accessible right out of the box. I hope this is helpful to someone.