Forem: Amera White

7 Easy Design Patterns For Cognitive Accessibility

Amera White — Wed, 08 Nov 2023 04:40:49 +0000

Did you know that just by following a few simple guidelines while creating your applications, you could provide people with learning disabilities and cognitive differences a better web experience.

The WCAG has 7 design patterns that can be easily followed to assist users in understanding what things are on a page and how to use them. The goal is to better meet these cognitive accessibility needs.

Design Patterns:

1. Make the Purpose of Your Page Clear

Every user will need to know the context and the purpose of the page. You can help your users by using a clear title. Use headings that sum up the purpose of the content. This help show people who are easily distracted, have ADD/ADHD, or impaired attention and memory what the page is about, as well as, what they are doing.

2. Use a Familiar Hierarchy and Design

This can be achieved by simply sticking to a standard layout, placing elements where users would normally expect them to be located, and abiding by visual hierarchy. Users expect the same patterns used in popular sites. There is no need to re-invent the wheel. By sticking to familiar practices, like a button that looks and functions as a button and standard styled underline links, users will be able to better locate and recognize the desired items to interact with. This also helps to lessen the feeling of being overwhelmed or lost that some users may experience by unexpected layouts and rearranged content hierarchy.

3. Use a Consistent Visual Design

Consistency is key! Be consistent in your design themes, from the appearance of links and buttons to icons and font styles. It takes users time to learn new designs and to recognize various elements, so it is to everyone's benefit to continue the same theme throughout a sites pages. Plan out the design before adding any content. What colors will you use? Where will text blocks appear? The cognitive load for certain user can become too much and impede their ability to complete tasks due to not sticking to a predetermined design course.

4. Make Each Step Clear

There are users who can easily forget what they were doing, get distracting from their current activity, or simply lose focus. This is why it is important to provide indicators to users about their progress. This information helps users to orientate themselves inside a task or the site. When you are able to give the information about the steps needed to complete a task, users can decide if they can successfully finish. Use headings to inform a user where they are inside the content or breadcrumbs to indicate the past, current, and future steps in a process.

5. Clearly Identify Controls and Their Use

Controls are the parts of a site that do an action. A checkbox, link, and a button are all controls. You want users to recognize and understand how to use these controls. Some users have trouble when controls have a different shape, look, or color than they have used before. This may cause a user to struggle while trying to interact and leave the site. This can be avoided by using typical and easy to find controls on the page. Make sure the controls are easy to identify, understand, and use regardless of how a user uses the page.

6. Make the Relationship Clear Between Controls and the Content They Affect

Imagine being on an e-commerce site and finding an item you'd like to purchase. You use a button that is labeled "add to cart" located below the item you want. Suddenly, you are navigated to an unrelated external page...whoa! that's not what you expected. The relationship between controls and affected content should be clear and unambiguous. If a control on a page operates in an unexpected manner, it can be hard to tell what it will affect and what it will not. Some users with cognitive or learning disabilities may not be able to work out what to do, become overwhelmed, or stop interacting all together. Good practice would be to associate controls with the section they control, place the control inside the section, and have clear borders around the section.

7. Use Icons that Help the User

Some user may rely on symbols to understand content and navigate to content they need, due to different cognitive abilities. Symbols also help people who struggle with language and attention to navigate content. Help assist these users by utilizing common icons, images, or symbols with important content ,like a button or section heading.

When we build with accessibility first, everyone benefits.

Resources :

Intro to Web Accessibility

Mozilla - MDN Web Docs

JS Code Challenges : 1

Amera White — Wed, 25 Oct 2023 16:41:56 +0000

JS Code Challenge 1

Problem:

Create an algorithm using a for loop that can add the sum of all natural numbers up to 100.

The Breakdown:

Natural numbers are positive whole integers

ex: 1, 2, 3

Find sum of natural numbers

ex: Find the sum of natural numbers of 5

1 + 2 + 3 + 4 + 5 = 15

Goal is to find the sum natural number up to 100

Hint: Use a for loop.

Solution:

Step 1

We need to have a constant variable that will not change.

That should be the value of 100.

const val = 100;

Step 2

We need a variable to hold our sum. We also know our sum is NOT constant and will be changing as we are on our way to the sum natural numbers up to 100.

let sum = 0;

Step 3

Now that we have these variables we should be able to initialized a loop. We will use a for loop that will decrement.

for (let i = val; i >= 1; i-- ){ 

     //code to execute  

 }

Start by letting i equal our val (100)
Next, we want the loop to continue until i is greater than or equal to 1 (only natural numbers remember)
Then, for each loop we want to decrement

Step 4

Okay so, now we need to figure out what logic to implement every time the loop is executed.
Inside our code block ...

for (let i = val; i >= 1; i-- ){

   sum = sum + i  

 }   

//can also be written as sum += i

To keep up with the changing sum, we want to update sum by making it equal to whatever the previous sum value is plus i

Test:

To test if we are going in the right direction, since we already know the sum of natural numbers of 5 is equal to 15 (from our Breakdown example).

Let's plug 5 into our loop, then console log the result. ***Don't forget to change it back to val after you're done the test.

for (let i = 5 ; i >= 1; i-- ){ 

 sum = sum + i

}

console.log('answer', sum); //returns 15

This means our loop is working correctly...Congrats!

Step 5
Alright, let's console log the current value of sum to get our answer.

for (let i = val; i >= 1; i-- ){ 

 sum = sum + i  

 }     

 console.log('answer', sum ); //returns 5050

Now, it’s your turn!

Practice

Try writing this out from scratch
Choose a different number to find the sum of its natural numbers
Use something other than a for loop to solve

Follow me for more!

IDK: Local Scope vs Global Scope

Amera White — Fri, 18 Aug 2023 14:05:12 +0000

In order to discuss the differences between Local scope and Global scope, we first need to know what scope even means. So, What is scope? Basically, scope describes where a variable was declared and where it can be accessed.

Great! now that you have an idea of what the scope of a variable is referencing. Let’s move on to figure out the difference between Local vs Global scopes.

What are Local scope variables?

Local variables refer to those declared inside of a function block. This means the variable can only be used and accessed within that particular block of code.

Example:


function localScopeBlock() {  
let x = 5;  
return x
}

console.log(localScopeBlock()) //this will return the number 5 in the console

//Next, try to log the x variable, along with the function call 

console.log(localScopeBlock(), x) //this will cause an error in the console

The error occurred because x was declared inside of the code block and can not be accessed.

What are Global scope variables?

Global variables refer to those that are declared outside of a function block. This means the variable can be accessed and used from anywhere in the javaScript document, because it is at the highest level in the scope tree.

Example:

let x = 3;

function globalScopeBlock() {  
let x = 5;
return x;
}

console.log(globalScopeBlock(), x) //this will show the numbers 5 and 3 in the console

Unlike the previous example, the console doesn’t throw an error.
The function call returned 5 (local scope variable), then the number 3 was logged to the console from our global variable located outside of the function.

Side-note

When declaring variables, you should use let and const to be more precise in your javascript code. When you use var to declare variables they are automatically move to the global scope. This is not best practice and can ultimately create unintended errors in your code.

Building inclusive UI for Neurodivergent Users

Amera White — Wed, 16 Aug 2023 23:01:36 +0000

Building inclusive UI for Neurodivergent Users

Most commonly, people think of users with various hearing or vision abilities when including accessibility features. You may even think of elderly user or a 'temporarily disabled' user (like someone with a broken arm) but let us also remember to be mindful of our cognitive and neurodivergent users as well.

Sometimes these users may not always be included, not purposely, but due to lack of awareness. I have been guilty of this too. My daughter is the whole reason this type of awareness was brought to my attention.
To give a little insight, I have a 7-year-old who is autistic and has a sensory processing disorder. A few years, I open the Starz application on our television and as the logo enlarges on the screen, a loud drum noise bellows out. I watch my daughter grab her ears and squeeze her eyes tightly closed, the run into a corner with the tv out of sight. I was so confused. I'd seen and heard this plenty of times before and it never bothered me. I thought maybe she was overreacting. Then, the same type of issue happened when opening the Netflix application, after aloud chime and an array of flashing colors scroll across the screen, I look at my daughter and she is in tears, eyes closed, and tightly covering her ears. I wondered...what was going on? why would this be her reaction?

What I learned was some people with autism and/or sensory processing disorders tend to perceive sensory stimuli differently. The sounds that may not influence myself but can be painful and overwhelming to her. Also, she has a very low tolerance to bright, flashing lights.

She is the reason why I am here. After those events occurred, I began to wonder how many others are affected by loud or repetitive noises, or flashing, pulsating animations when use the web. I want to encourage you to create for users like her, as well as others with various cognitive and neurodivergent abilities (ex: ADHD, Autism, and Dyslexia).

Issues and barriers users with different neurodivergence or cognitive abilities may experience:

An overload of bright colors, this may become overstimulating or even distracting to the web experience
Large sections of text may make it difficult to understand, impair reading comprehension, and word recognition
Having visible timers on screen, this can sometime cause anxiety and create unnecessary stress
Loud music and/or sound effects
Flashing light, and lights with pulsing patterns, could potentially cause seizures in some cases
Blinking images, Gifs, automatic scrolling sections, these could be overstimulating and distracting
Too many images or information in one block, content- crowding, cluttered sections crammed with text, images, videos, etc. This is known as Visual noise.

Here are a few practices that you may want to implement:

Keeping navigation/menu placement consistent throughout the website/application. This creates accessibility for all users and predictability. Users need to understand the order of menu items, and where the search bar and navigation links are located.
If possible, do not include content that flashes, blinks repeatedly, or pulsates at a particular rate or pattern. If this type of content is necessary, add warnings to the users before the content is displayed. It would even help to give users a way to switch off the animations if they aren't essential.
Giving users the ability to use commands like pause and stop on content such as rotating images or slides. Also, the ability to hide non-related articles or content.
Use of a Screen Mask. This is a reading tool that follows the mouse or touch to assist with eliminating page distractions. This gives the user the ability to focus one block of information at a time. (Google Chrome has a screen mask tool induvial can use on their browser)

Of course, all the listed techniques will not be possible to implement on every application. The goal is to find a way to ensure that users with neurodivergent conditions can adjust and navigate a website that suit their personal needs. Slight changes, like font size, color contrast, and alternative ways to relay information (i.e., video, audio) could make the difference for a more comfortable web experience.

We all have unique abilities, personalities, and ways of communicating. It is important for us as developers, designers, content creators to understand that when we create, build, design, and write with purpose of making our websites and applications accessible first, the web experience is enhanced for us all.

RenderATL : An Introvert’s worst nightmare … in the BEST way.

Amera White — Tue, 06 Jun 2023 15:54:53 +0000

Hi, my name is Amera and I am an introvert. I can easily be overwhelmed by spaces with lots of people or just a lot of movement in general. Just to put everything into perspective, I was elated when grocery stores began online shopping and delivery….you mean to tell me I don’t have to circle the produce section over and over again to find an opening for a head of cabbage…..genius 🤯!!

Just hear me out…I’m going somewhere with this, I promise.

In an attempt to network, engage, and “put myself out there”, I signed up to be an ambassador for RenderATL and was chosen. I was so excited to get the news and then it hit me… I have to go OUTSIDE. If you aren’t aware, RenderATL is a tech conference that brings the tech community together. In all transparency, I have never attended a tech conference and had no idea what to expect.

So, what do you do when you are unaware of something, you start doing your research… at least that is what I did. I began to look up information, watch YouTube videos, and read blog posts on other tech conferences. I needed to get an idea of what I may be coming across as I prepared for my role. That’s where I went wrong.

I quickly learned RenderATL is NOT like any other tech conference you’ll ever attend. It is a whole tech community experience.

As a noob in the tech space and an introvert, a conference like this is perfect. Let me tell you why. Jumping out of your comfort zone is tough, but every single person I encountered at RenderATL was rooting for me in some way. Greetings and smiles from every direction. Flows of good vibes and energy surrounded the entire event. There were so many strangers that left as friends, #irl Twitter reunions, and connections being made all around. I had the opportunity to meet people that have unknowingly inspired me during my tech journey from their podcasts, YouTube videos, blog posts, or even their courses. I shook hands with representatives from companies that many would dream of working with. I listened to speakers who shared their knowledge and advice on various topics, like “Neurodiversity In The Workplace “ by Wesley Faulkner and “Streaming Server Rendering with Suspense “ by Shaundai Person. There were great panel discussions about building community, leadership, and career growth from some amazing voices in the industry, including Anthony D. Mays, Kristina Dixon , Lawrence Lockhart, and so many more. The hosts of the event were super dope and all the staff were amazing.

It doesn’t just end there… RenderATL made it a point to encourage socializing with your peers. To let your guard down and engage with people you wouldn’t normally be in the position to speak with and get to know in comfortable social settings. There was a variety of after-hour events to choose to attend. You could go check out the latest cars at the EV Car Show or enjoy smooth R&B at the Skyline Park Rooftop Party, all while in the company of people who are also passionate about their profession in tech. To top it off, RenderATL ended the festivities with a live performance from KAYTRANADA at the Historic Fourth Ward Skatepark.

Justin E. Samuels (Founder-CEO of RenderATL) and the entire RenderATL team did an amazing job at curating this safe space for a beautifully diverse tech experience.

What I take away from this conference is to be okay with stepping out and embracing your surroundings, networking, and building your community. Some people are where you are in your career path or understand what you’re experiencing on your journey. Some genuine people want to see you excel in your journey.

Please do yourself a favor & Check out RenderATL

I’m looking forward to connecting with you at the next one… who knows, you may become an extrovert by the end of this conference.

IDK - Memoization & useMemo React Hook

Amera White — Mon, 15 May 2023 19:24:32 +0000

IDK - Memoization: React.memo & useMemo

I don't know what Memoization is or how it works with React.

That’s okay let's figure it out together.

What is memoization in React?

Memoization is a computer science technique that stores the output of a function based on the function’s inputs. This way if the function is called again with the same inputs, it will return the cached (stored) result rather than recomputing the output.

Does Memoization help with performance?

Yes, because of the way Memoization works, by reducing the resources, as well as, the time needed to execute a function. This is especially useful for functions that are called frequently (or expensive 💰).

How can Memoization be used in React?

Inside React, Memoization can be utilized with functional components using the React.memo() higher-order components. The React.memo() function will return a new component that will ONLY re-render if its props change.

This is exactly how the performance of a React application could be improved when using Memoization. You can now prevent any unnecessary re-renders to the functional components.

For example, you are creating list that will hold a large list of items inside:

export const TaskList = ({tasks})=>{  
return (
     <ul>        
      {tasks.map( (task) => (                    

       <li key={task.id}>     
            {task.title} 
       </li>
      ))}         
    </ul> 
 );
}

To provide better optimization, you could apply memoization :

export const MemoizedTaskList = React.memo(TaskList);

When you wrap the functional component within React.memo(), React will only re-render if the props have changed. So, if nothing is added, updated, or removed from the task list and it remains the same. React.memo() will perform a shallow comparison of the previous props and the new props and re-render only if the props have changed.

React Hook: useMemo()

useMemo is a built-in React hook that lets you cache the result of an expensive calculation. Again, assisting with optimizing re-rendering performance in the application by telling React to skip re-rendering or to reuse the cached value if the data hadn't changed

Syntax:

const cacheValue = useMemo( calculatedValue, dependencies )

Parameters:

calculatedValue - This is the function that will be used to calculate the value that you want to cache.

dependencies - A list of reactive values (state, props, functions, and variables declared directly inside the component body) that are referenced in the calculatedValue function.

Reminder:

useMemo is a Hook, which means it must be called at the top level of the component.
If you are using Strict Mode, React will call the calculation function twice (According to react.dev, this is developmental behavior to find any accidental impurities and does not affect production)

Example:

import {useMemo} from 'react'; 
function TaskList({tasks, tab, theme}) {
 const visibleTasks = useMemo( () => filterTasks(tasks, tab), [tasks, tab]);     
 //...   
}

1) visibleTasks the variable for our cacheValue
2) () => filterTasks(tasks, tab) is the calculatedValue function, in this case the function takes no arguments and will return what you want to calculate
3) [tasks, tab] are the dependencies (or list of reactive values)

One the initial render, useMemo will return the result of the calculatedValue function. After that render, React will compare the dependencies with the dependencies passed during the previous render. If none of the dependencies have been changed, then useMemo will return the cached value. If the dependencies had been changed, then React will re-run the calculation and return the new value.

Additional resources:

https://react.dev/reference/react/useMemo

Hopefully, this helps to give a better understanding of what Memoization is and how it works, as well as usage of the useMemo React Hook.

It's okay to say, " I don't know"

We can figure it out together.

IDK - useSWR - React Hook for Data Fetching (Client-Side)

Amera White — Wed, 03 May 2023 17:03:41 +0000

IDK - useSWR - React Hook for Data Fetching (Client-Side)

I don't know how to use the useSWR React Hook.

That’s okay, let’s figure it out together.

When building web applications in React, you almost always come to a point where you need to get some data from some where. While you can just use the built-in JavaScript Fetch API by itself, there are more effective and efficient ways of utilizing it. My new favorite way is by using the JavaScript Fetch API alongside the useSWR hook.

What is SWR?

According to SWR, SWR (stale-while-revalidate) is a strategy to first return the data from cache (data that has been stored in a temporary location to be accessed faster), then send a fetch request (revalidate...the process of refreshing the data), and lastly returning up-to-date data.

This is nice. It allows you to simplify the logic involved in fetching data for your projects.

SWR also comes with numerous valuable features you may not have known you needed like, refetching on intervals. It can even be used with TypeScript.

The useSWR hook takes in a few parameters:

useSWR( key, fetcher, options )

key : this is a unique key string needed for the request. (i.e. URL or an endpoint)
fetcher : a promise returning function to fetch the data (i.e. a function using the Fetch API or Axios) **optional
options : an object of various options for use with this SWR hook **optional

What will you get back from the useSWR hook?

There is so much information you are able to retrieve when using the hook. We will focus on the main return values :

data : the data resolved from the fetcher
isloading : if the request is still ongoing and no data has been loaded yet
error : any error that has been thrown by the fetcher while attempting to fetch the data

There are more return values and a long list of options that are extremely useful. You can learn more on

How do you get started using the useSWR hook in you React application?

You'll need to install the package into you project.
npm i swr
Next, import the useSWR to the functional component.

import useSWR from 'swr'

We need to create a fetcher. Although, the useSWR hook is super convenient, it alone does not fetch the data. We’ll create a fetcher using JavaScript Fetch API, but you can use other ways fetch data as well, like Axios.

const fetcher = (...args) => { fetch(...args) .then(res => res.json()) }

Using object destruction, we'll get a few our return values to help us determine the 3 possible states of our request.

const  UserProfile = () => { 

const key = 'api/user-info/123'

const { data, isLoading, error } = useSWR(key ,fetcher); 

  return(    
    <> ... </>
 )
}

Great! Now we can use the return values in a meaningful way.

If there was an error while fetching our data, we could :

if(error) return <div> Error </div>

If the data is still being loaded, we could :

if(isLoading)return 
<div> Loading... </div>

We have successfully retrieved our data, we could now display that data.

import useSWR  from 'swr' 

const  UserProfile = () => { 

const key = 'api/user-info/123' 
const { data, isLoading, error} = useSWR( key ,fetcher);   

if(error) return <div> Error </div>  

if(isLoading) return <div> Loading... </div>  

return(   
    <div>       
       <p> Hello, </p>    
       <h3> {data.name} </h3>              
  </div>
 )
}
export default UserProfile;

I have enjoyed using the useSWR hook so far and I hope you give it a try.

There are so many other features when using SWR, I definitely encourage you to check out the docs at SWR

As always...It's okay to say IDK.

IDK- API basics and React

Amera White — Tue, 04 Apr 2023 14:21:41 +0000

APIs & React

What is an API? Yes, we know what API stands for...Application Programming Interface, but what is it really?

I am quite sure there are plenty of technical definitions that can make learning what an API is and does, very convoluted and hard to comprehend. So, I'll tell you what my understanding of what an API is.

Let's think about it like you're going to pick out a vehicle at a car lot. The car lot has a catalog of vehicles. The catalog
is organized into various categories, like Sedans, SUVs, Trucks, and Vans. The catalog may also have additional information
about the vehicles, including the price and features. After glancing through the catalog, you simply tell the car salesman (the sever) what you want. I'd like a 2024 Range Rover SV please...👀. Next, the salesman takes order and brings your vehicle of choice all ready and prepared to go. You'll recieved what you wanted and you
don't even need to know how the car lot made it happen. The only thing you need to understand is how to make a request
the for the vehicle and now you get to drive off the lot into the sunset in your brand new Range Beep Beep.

I know this analogy doesn't cover all the bases of APIs, it is just meant to give you a general idea of how an API works.

You want data from an API
You make a request to that API
API returns the data requested

What information is needed to know how to interact with the API?

Most times the entity with the data will provide the documentation necessary to make the request.Like the car lot catalog, they will tell you what data is available and instructions on how to retrieve that data. Then, just like the salesman on the lot, you request the data from the API, it
goes to get the data and brings it back for you to use.

This is the Request and Response cycle.

Request (I want some data) ===> Reponse (Here's the data)

The Request and Response cycle involves your Web Browser (the client) communicating with a Server.The typical request is a GET request, you are making a request to get data from a server.

What will the data look like ?

The most common format the data sent back will in JavaScript Object Notation (JSON).
JSON is formats the data like JavaScript objects, using key-value pairs

EXAMPLE :

{
  "type": "SUV",
  "name": "Range Rover SV" ,
  "price": "$$$$"
  "features": ["cool","stuff", "here"]
}

one key (or property) would be "type" and the value would be "SUV"

How do you make the request for the the data?

There are a few different tools you can use to fetch data from an API, including the built-in JavaScript
Fetch API, Axios library, SWR, or even React Query.

I will use a simple example to fetch data from the DOG API (https://dog.ceo)

-This example uses React, the useEffect/useState hook, and the Fetch API


import React, { useEffect, useState } from "react";

const FetchExample = () => {
  const [data, setData] = useState(null);

 useEffect(() => {
    fetch("https://dog.ceo/api/breeds/image/random")
      .then((resp) => resp.json())
      .then((apiData) => {
        setData(apiData.message);
      });
  }, []);

Finally, you can use the data for you want. In this case, I'll just display the image on the screen.


return (
    <div>
      <h1> My new dog </h1>
      <img 
        width={500} 
        src={data}     
        alt=‘image of dog’
      />
    </div>
  );
}

export default FetchExample;

That's it.

Great! Now, you're an expert!
Well, maybe not an expert but, you're definitely on your way to becoming one.

I've added a few useful resources with information on free APIs you can use for your
future projects or just to practice.

https://github.com/public-apis/public-apis
https://apilist.fun
https://rapidapi.com (Free & Paid)

Happy Coding :)

Do you take notes when learning how to code?

Amera White — Tue, 07 Mar 2023 18:21:53 +0000

Do you take notes while coding or learning to code?

I'm guilty. I write down EVERYTHING...of importance of course. I am a note-taking enthusiast. Plus, I am old-school. I love the feeling of pen to paper. I use anything from spiral notebooks, sticky note pad, and even scratch paper. Basically, if my pen's ink will show up on it, then I'm probably going use it to write on. There are plenty of people who may not understand the reason to take notes while learning to code and think its a waste of time. Clearly, I strongly disagree.

Benefits of Note-Taking

Engage your mind. While writing you are actively listening and deciding what to include into your notes. This means that you are alert and you body is active and involved.
Organize the information your way. You are in control. You can choose what information should be highlighted, emphasized, and bold. You are able to create a structure, style, and a method that gives you better understanding.
Did you know that tools for your hands are also tools for your brain? Handwritten notes a very strong tool for encrypting embodied cognition. This supports your brain's capacity for retrieving information. When you are writing, your brain is provided tactile feedback from the contact of pen or pencil to paper.This is the key to creating the neurocircuitry between the hand-brain relationship.
It's fun. You can doodle badly drawn illustrations to express the point being made. Add little shapes and random arrows to point at items on the page. Taking notes is the only time I get to use all the other colored highlighters in the package.

Now, I know I said I like old-school, pen to paper, but I also understand that while learning to code that may not always work out the best. If you are on-the-go or need quick access to a specific topic, it may take a minute to rummage through the pages of your notebook. So, even I have progress from the stone-age and have fallen in love with the benefits of technology.

My Ipad is my BFF, she always holds me down periodt 💅🏾

Note Applications

There are quite few note applications available, but not all are best when writing code in you notes.

Here are a some I suggest, in no particular order:

GoodNotes
Notion
MicroSoft OneNote
Notability
Evernote

Using these various applications, you can easily access, update, share, and even print your notes.

What should you write down?

Anything that you deem noteworthy and useful. Take note of topics you are learning, keep track of new methods, vocabulary, and various concepts.

This doesn't mean to rewrite all the documention.

Common Commands that you frequently use. This could include project enviroment commands, git commands, and console commands.
Keyboard shortcuts. Sometimes I come across shortcuts I didn't know existed and never realize how helpful they could be. Keeping a list that you can reference will come in handy.
Code snippets / Code Blocks. You can write utility functions, method examples, or things you find yourself looking up often.
How-Tos ...step by step layout on how to perform various tasks you may need.
Your Projects Sometimes before I begin coding a new project, I write a plan down. What does my application do? what functionaliy should I include to do certain things? You could sketch your page layout, components, and wire-framing

Overall, you will have your own ideas of what to write down and how to best organize your notes.

Don't let people fool you into thinking note- taking isn't important or even necessary.

Note-Taking is an important tool and you should definitely utilize it.

IDK - React Router V6.4+ Basics

Amera White — Tue, 10 Jan 2023 18:32:09 +0000

I recently decided to finish an unfinished project that began working on a few months ago. Hold on! don’t judge me…. we’ve all done it, but this time I’m going to complete it 👀. Anyway, back to my point, I realized the routing was not working properly and could not figure out what the problem was. I must’ve missed the notice about React Router V6.4+ update (it’s at 6.6 now, I believe). No biggie! I went through the process of re-routing my router and let me tell you…. I kind of like it. It is not like I didn’t like the previous version, but something about the new way of initializing the router now just seems more aesthetically pleasing. We all love nice aesthetics.

The main changes in this update were mostly with data fetching in React and to really utilize the features we must adjust how our routes are defined.

If you missed the update memo too, don’t worry I got you. I can show you what I did to update the routing on my current application.

Step 1: Re-heat your coffee, it’s probably cold now.

Step 2: You will need to install React Router if you haven’t already. You can do this by running the command: npm install react-router-dom inside your terminal.


npm install react-router-dom

Step 3: Next, you must import a few things to begin using React Router in your App.js file.

Step 4: Now, you can create a variable name router that will hold the createBrowserRouter object, this will allow your URL to update and manage the history stack using the DOM History API. The createBrowserRouter may have already been available prior to this most recent update but was not required. Using another function provided to us by React Router, createRoutesFromElements, you will place each route with its corresponding element inside of here.

Step 5: Now, if you notice the first path= ’/ ’ has the element: . We have not created this Root element yet, so we’ll take care of that now. The Root element’s purpose is to help structure anything related to the router on your application that isn’t defining routes, like our navigation or a global styling component.

Towards the bottom, underneath the return statement, define the Root component. Inside of the Root component, you will also need to use . It sort of works like a placeholder to show how you are going to display the other pages or routes inside of the Root component.

So, essentially every page in your application will have a navigation bar and whichever route is supposed to be displayed.

Step 6: Great! Now that our Root component is completed, you can create the other routes inside of it. This part should look familiar if you already have experience with React Router, when you would create a component tree and place the routes inside of the return statement using BrowserRouter, Route, and Routes. The “Home” page path will now be index (meaning the first page).

Step 7: Almost done! Now we want our application to be able to display our routes. To do this, we need to use a RouterProvider inside of the return statement. The RouterProvider is a self-closing component. You need a prop called router and you’ll pass in the router that you created.

Now, you should be able to go to your browser, refresh, and see the changes.

I’m sure there is plenty more to learn and if you’re interested you can go to reactrouter.com

Boom! Just like that you’re all caught up like me…. now go finish your unfinished projects!

Learning how to code from my autistic 3 year old....

Amera White — Fri, 06 Jan 2023 18:32:05 +0000

I am a mom. I have 4 daughters. Being a parent, I have experienced a lot of situations... no one prepares you for. For example, when my oldest daughter was 5, she put an eraser from the end of pencil in her ear. It got stuck. No one told me that this little human would be weird and curious enough to attempt to ruin her own hearing, or even how to explain this to the emergency room doctors. The point I am making is, as a parent you don't really know what situation you may face on a daily basis, but you still have to figure out how to maneuver through it...Parenting 101.
This lesson I learned is one I learned from my youngest daughter, she is autistic. I never knew what autism was or knew anyone that was on the spectrum before her. She is also non-verbal (meaning she lacks functional language), and has a sensory disorder (meaning certain sounds, lighting, or even the feel of something can be overstimulating or extremely off-putting). As, her mother , I became super aware, protective and slightly overbearing over her. I did the worst thing a mother could do (I'm exaggerating...but it did make me feel bad). I doubted her abilities.
When my youngest daughter was 3, she began attending ABA Therapy. While picking her up after one of her therapy sessions, her therapists asked if I'd ever given her a particular puzzle (it was one of those block puzzles with a picture on each side, and when placed together it forms a whole picture) to play with and put together. My response was, "No. She can't. She won't be able to do that type puzzle, because it is too complicated for her." . I know...I know... how dare I doubt her abilities!! Little did I know, her therapist wasn't asking me to see if I'd go buy this type of puzzle and try it out, she was making me aware that my daughter had mastered all of the puzzles of that type in their facility. Herself, as well as , all other therapists, and employees had been so impressed that they wanted to know if I had taught or shown her how to work the puzzles before. Needless to say, I was embarrassed and elated all at the same time. Embarrassed, because I allowed myself to be so closed minded about her abilities, that I didn't believe that she could accomplish the task of completing this type of puzzle. I was also elated, because at that very moment, I realized my daughter was going to be fine. She was able to show me and the world that even though she processes information and communicates differently, she is able and capable of doing whatever she wants to do. From that moment on, I have always presented her with choices, opportunities, and tasks just as I have with my other daughters. I thought I was being protective and in reality, I was being a barrier.

“Autism is.... about finding a way to survive in an overwhelming, confusing world… It is about developing differently, in a different pace and with different leaps.”

I began to challenge myself and learn how to code, shortly after that moment. I started teaching myself JavaScript, taking courses on CodeAcademy, FreeCodeCamp, and YouTube. I realized that I had been doubting my own abilities. She taught me that I am enough and that I am able to do whatever it is that I set out to accomplish, regardless of what other people may deem as obstacles in my path.

So, I'm sharing this story to encourage anyone who has doubts about their path to continue working towards your goals and remember that YOU ARE ENOUGH and YOU ARE ABLE.

P.S. The doctor's were able to remove the eraser from my oldest daughter's ear.