Forem: ryanAllMad

Context vs Props in React

ryanAllMad — Fri, 23 Dec 2022 23:14:55 +0000

Hey! Thanks for dropping in. This article focuses on the difference between React props and React Context. I’ll walk you through a, hopefully, familiar concept to teach you how to use Context and when to use props.

Before we begin, go ahead and check out the code here. And see the app in action here.

Estimated reading time: 8 minutes

The Concept

If you’ve ever studied JavaScript and have touched on or dived into Objects, then you’re probably familiar with the Person example. To jog your memory, below is a Person object in Vanilla JS:

function Person(age, favoriteColor, hobbies, gender) {
this.age = age;
this.favoriteColor = favoriteColor;
this.hobbies = hobbies;
this.gender = gender;
}

And if I wanted to create an object from this object (aka prototypal inheritance) then I’d do something like this:

const Mykol = new Person("30", "blue", "kicking ass, taking names", "female")

Now that Mykol is a Person object, I can access information about her like this:

console.log(Mykol.age)

Hopefully the above concept makes some sense to you. We’re going to use this same Person example to create a React app that uses both props and context to show the difference of these two concepts and when to use them.

For our project we’re going to use three friends and co-workers who all have individual qualities (as humans do) and one thing in common: they won’t go to the company retreat unless their friends are going.

Looking for more fun with Javascript concepts in React? Check out this Array Methods in React post here.

Getting Started

As always, we’re going to navigate to a project folder in our VS Code and open a terminal. Here we’ll use the Create React App command to spin up a React App:

npx create-react-app persons-context

After that’s done:

remove all of the code inside the App.css file and save.
inside the App.js file, remove everything except the div with the className="App"
create a folder in the /src directory titled ‘components’
create a folder in the /src directory and title it ‘context’

Your App is now scaffolded and ready for us to begin working. If you want to add some text inside the App.js file inside the div with the className=”App” and run npm start in your terminal, you should. That can give you a good idea if you’ve scaffolded your project correctly or not.

Context

We’re going to start with our Context component. In this component we want to share the value that our Person’s components will share: Whether they are going to go to the company retreat or not.

Inside the /context folder create a file called PersonContext.js.
at the top of the file add: import { createContext, useState } from 'react'
on a new line add const PersonContext = createContext()
on a new line create the following function:

export const Provider = ({children}) => {
const [retreatStatus, setRetreatStatus] = useState('not going')

const data = {
        retreatStatus,
        changeRetreatStatus: () => {
            setRetreatStatus('going')
        }
    }

    return <PersonContext.Provider value={data}>{children}</PersonContext.Provider>
}

Finally, at the bottom of the file, add your default export:

export default PersonContext

Note that now you have a named export “Provider” and a default export “PersonContext”. Pay attention to the way we import these two exports to understand the difference between named exports and default exports.

How to Utilize Context

So that our app can utilize the Context we’ve just created, we need to navigate to our index.js file. At the top of this file, under your other import statements, import the named Provider export like so:

import { Provider } from './context/PersonContext'

Inside the root.render function, we’re going to wrap our App component with the Provider component we’ve just imported.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>
);

That’s all we have to do to ensure that our components have access to the Context we’ve just created. But we still haven’t started using the context system yet. We’re going to move on to using props now and come back to how to access this Context in our components when it makes more sense to do so.

The Components

Inside of our /components folder, we’re going to create a Person component, an AriaLive component and three “People” components. Feel free to name these people whatever you want, I’m going to use my friends in this example.

Person Component

Starting with the Person component, in the /components folder create a file called Person.js

At the top of the file add your import statement like so:

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

Note: notice that we are not using Context in this component, this is very important because this is a ‘parent’ component to our other components, yet there is no need to use Context here.

Next lets create our person. This component is going to use a lot of props, props that our child components are going to need. Under the import statements on a new line add the Person functional component:

const Person = ({ name, children, age, favoriteColor, hobbies, gender }) => {
    const [pronouns, setPronouns] = useState({subject: 'they', object: 'them'})
    const changePronouns = () => {
    if( gender === 'male') {
        setPronouns ({
            subject: 'he',
            object: 'him'
        })
    }
    if(gender ==='female') {
        setPronouns({
            subject: 'she',
            object: 'her'
        })
    }
   } 
   useEffect(() => changePronouns(), [])
    return (
    <div className={name}>
        <h3>{`${name.toUpperCase()}`}</h3>
        <h4>{age}</h4>
        <p>Gender: {`${gender}`}</p>
        <p>{`${name.toUpperCase()}`}'S favorite color is {`${favoriteColor}`}. {`${pronouns.subject.toUpperCase()}`} enjoys {`${hobbies}`}. 
        Today {`${pronouns.subject}`} is {children}
            to the company retreat. 
        </p>
    </div>
    )
}

This component probably looks very complicated and it does have some complexity. Let’s break it down. The component makes use of the following props:

name
children (not actual children, but React children)
age
favoriteColor
hobbies
gender

We are creating a piece of state for the pronouns. These pronouns are an object with 2 properties, the subject pronouns (such as he, she, they) and the object pronouns such as (him, her, them).

After that we are calling a function within the useEffect hook that will render the correct pronouns depending on the person’s gender.

Not too difficult when you break it down.

Context vs Props

Jason – A Person component

We’ll use Jason as our main example because he’s a great guy and we stan. Inside our components folder we’ll create a file called Jason.js

At the top of our file we’re going to import something new here, the useContext hook. And this will allow us to finally use the Context component we’ve created.

import React, { useContext } from "react"
import PersonContext from "../context/PersonContext"
import Person from "./Person"

The Person Props

We’ll create our Jason functional component and assign the Person props some values. Notice how these values are individual values? I’ve left a comment where the children prop is being called. We’ll set that up next.

const Jason = () => {
    return  (
    <Person age="36" name="jason" favoriteColor="black" hobbies="writing, making stacks" gender="male">
        {/*something will go here*/}
    </Person>
    )

}

export default Jason

Next its time to use the Context system finally. Below I’ve updated the Jason component. We are destructuring out the retreatStatus and changeRetreatStatus context from the PersonContext Provider. We are then creating a button component that will use these pieces of Context.

const Jason = () => {
    const { retreatStatus, changeRetreatStatus } = useContext(PersonContext)
    return  (
    <Person age="36" name="jason" favoriteColor="black" hobbies="writing, making stacks" gender="male">
        <button onClick={changeRetreatStatus}>{retreatStatus}</button>
    </Person>
    )

}

export default Jason

Now in my App.js file I am going to import Jason into this file and return the Jason component within my App.

import React from "react"
import './App.css';
import Jason from './components/Jason';


function App() {
  return (
    <div className="App" role="main">
      <h1>Person Context App</h1>
      <h2>These are people. They all are individuals, but they have one thing in common, 
        they won't go to a retreat unless their friends are going too.</h2>
      <Jason />
    </div>
  );
}

export default App;

I’ll repeat this process to make 2 more people. My App now looks like this below:

import React from "react"
import './App.css';
import Jason from './components/Jason';
import Mykol from './components/Mykol';
import Ryan from './components/Ryan';

function App() {
  return (
    <div className="App" role="main">
      <h1>Person Context App</h1>
      <h2>These are people. They all are individuals, but they have one thing in common, 
        they won't go to a retreat unless their friends are going too.</h2>
      <Jason />
      <Mykol />
      <Ryan />
    </div>
  );
}

export default App;

AriaLive – An accessibility feature

I like accessibility and aim to make everything I build be as accessible as possible. Therefore, so that this project would alert a non-visual user to changes in the document, I have created an AriaLive component within my /components folder. Below is the simple code for this component:

import React from "react"

const AriaLive = () => {

    return <span className="screen-reader-text" aria-live="polite">All of the friends are now going to the retreat</span>
}

export default AriaLive

Here’s where it gets cool. Back in my App component I’m going to import this component and I want to conditionally render this aria-live region to my non-visual users when the retreatStatus changes to ‘going’. How I do this is by using Context once again.

I’ll first import useContext again and PersonContext. Then I’ll import the AriaLive component so that my import statements in my App.js file look like this once complete:

import React, { useContext } from "react"
import PersonContext from "./context/PersonContext"
import './App.css';
import Jason from './components/Jason'
import Mykol from './components/Mykol'
import Ryan from './components/Ryan'
import AriaLive from './components/AriaLive'

Before my return statement I want to destructure the retreatStatus value from the PersonContext component. This is the only value I really need in my App component.

  const { retreatStatus } = useContext(PersonContext)

Finally, within my App components return statement, I’m going to conditionally render this aria-live region like so:

  return (
    <div className="App" role="main">
      <h1>Person Context App</h1>
      <h2>These are people. They all are individuals, but they have one thing in common, 
        they won't go to a retreat unless their friends are going too.</h2>
      <Jason />
      <Mykol />
      <Ryan />
      {retreatStatus === 'going' && <AriaLive />}
    </div>
  );

Want to learn more about what Aria actually is? Check out this WTH is WAI-ARIA post here.

Conclusion

This article focused on the difference between React props and React Context. Hopefully this project helped you to get familiar with these concepts and when to use each and why. Context is best to use when you want to pass values throughout your components but not necessarily from parent to child. Context is used well when the value is something your components share. Props are like individual traits, props get passed down from parent to child and are best used for defining individual properties. Hopefully the difference between Context and Props is a lot more clear to you. Thanks again for stopping by and for reading all the way to this part (impressive!).

Array Methods in React

ryanAllMad — Fri, 18 Nov 2022 22:32:52 +0000

Hey and welcome! Thanks so much for stopping by. If you are looking to learn how to work with array methods beyond map in React such as filter(), sort(), or some() you’re in the right place! I’ll show you how to use array methods in React.

In this article we are going to take a React List that’s mapped out, filter through it with the Array.filter() method, then we’ll sort our React List with Array.sort() and finally we’ll test the contents of the list using the Array.some() method.

In this project we're using React + Typescript, but if you have no experience with Typescript that's okay. Just change the file extensions from .ts to .js and .tsx to .jsx 👍 I've left comments for the code below to know what you can ignore if you're using a regular create-react-app application.

To get the most out of this article, check out the build here and check out the source code here.

To get started

Open your terminal in VSCode and run:

npx create-react-app my-app

Or if you’re using Typescript:

npx create-react-app my-app --template typescript

File Structure

In the /src directory create a new folder called /components

Inside the components folder create three files:

BestNovel.tsx
Button.tsx
List.ts

The List Data

The list data is housed inside our components folder. Because there is no JSX in this file, this file ends with .ts. This file houses our List which is an array of objects. Each object stores data about Nebula Award Winning Novels written by a woman.

// If you aren't using Typescript
// Ignore the interface and ': IList[]' from the List export below

export interface IList {
    Title: string,
    Author: string,
    Year: number,
    id: number
}
// Female Nebula Award Winners for Best novel:
export const List: IList[] = [
    {Title: 'The Left Hand of Darkness', Author: 'Ursula K. Le Guin', Year: 1969, id: 1},
    {Title: 'The Dispossessed', Author: 'Ursula K. Le Guin', Year: 1974, id: 2},
    {Title: 'Dreamsnake', Author: 'Vonda McIntyre', Year: 1978, id: 3},
    {Title: 'The Falling Woman', Author: 'Pat Murphy', Year: 1987, id: 4},
    {Title: 'Falling Free', Author: 'Lois McMaster Bujold', Year: 1988, id: 5},
    {Title: 'The Healer\'s War', Author: 'Elizabeth Ann Scarborough', Year: 1989, id: 6},
    {Title: 'Tehanu: The Last Book of Earthsea', Author: 'Ursula K. Le Guin', Year: 1990, id: 7},
    {Title: 'Doomsday Book', Author: 'Connie Willis', Year: 1992, id: 8},
    {Title: 'Slow River', Author: 'Nicola Griffith', Year: 1996, id: 9},
    {Title: 'The Moon and the Sun', Author: 'Vonda McIntyre', Year: 1997, id: 10},
    {Title: 'Parable of the Talents', Author: 'Octavia E. Butler', Year: 1999, id: 11},
    {Title: 'The Quantum Rose', Author: 'Catherine Asaro', Year: 2001, id: 12},
    {Title: 'The Speed of Dark', Author: 'Elizabeth Moon', Year: 2003, id: 13},
    {Title: 'Paladin of Souls', Author: 'Lois McMaster Bujold', Year: 2004, id: 14},
    {Title: 'Powers', Author: 'Ursula K. Le Guin', Year: 2008, id: 15},
    {Title: 'Blackout/All Clear', Author: 'Connie Willis', Year: 2010, id: 16},
    {Title: 'Among Others', Author: 'Jo Walton', Year: 2011, id: 17},
    {Title: 'Ancillary Justice', Author: 'Ann Leckie', Year: 2013, id: 18},
    {Title: 'Uprooted', Author: 'Naomi Novik', Year: 2015, id: 19}
]

We’re importing this List into our BestNovel.tsx file at the top.

Import Statements

At the top of our BestNovel.tsx file we’re importing the following:

import React, { useState } from 'react'
import Button from './Button'
import { List } from './List'

At the top of our Button.tsx component we’re just importing React:

import React from 'react'

Finally, at the top of our App.tsx component, we’re importing the following:

import React from 'react';

import BestNovel from './components/BestNovel';

import './App.css'

State

Back in our BestNovel.tsx component, we’re using two pieces of state the newList and the newTitle. We’ll update our App component based on these pieces of state.

const BestNovel = () => {    
    const [newList, setNewList] = useState([<li></li>])
    const [newTitle, setNewTitle] = useState('')

// onClick handlers here

// return jsx here
}

In the BestNovel.tsx return statement below, we can see where each piece of state is being declared.


return (
        <>
        <h1>Novels by Women who've won a Nebula Award:</h1>
        <ul>
            {List.map(list => (
                <li key={list.id}>
                    <span className='author'>{list.Author} - </span>
                    <span className='title'>{list.Title} - </span>
                    <span className='year'>{list.Year} </span>
                    </li>
            ))}
        </ul>
        <>
        <div className='filtered-list'>
            <h2>{`${newTitle}`}</h2>
            <ul>{newList}</ul>
            </div>
        <div className='buttons-bar'>
            <Button onClick={handleFilter} name="Filter Novels that won in the 2000's" />
            <Button onClick={handleSort} name='Sort the authors by first name' />
            <Button onClick={handleSome} name="Some Author's names Ursula exist" />
        </div>
        </>
        </>
    )

In our onClick handlers we are going to change the state of our newList component from an empty list item to whichever list we’ll be returning. We are also updating the newTitle piece of state within each handler as well.

The App Component

The App component is simply putting out the BestNovel.tsx component. This full code is below:

import React from 'react';
import BestNovel from './components/BestNovel';
import './App.css'

function App() {
  return (
    <div className="App">
      <BestNovel />
    </div>
  );
}

export default App;

The meat of our work is within the BestNovel.tsx component.

The Buttons

We have a Button.tsx component in our components folder. That code is below and it’s very basic. It has a name prop for the button label, and an onClick prop for the onClick function.

import React from 'react'


// If you aren't using Typescript
// Ignore the interface and ': React.FC<IButton>' from 
// the Button export below

interface IButton {
    name: string,
    onClick?: () => void
}

const Button: React.FC<IButton> = ({name, onClick}) => {
    return <button onClick={onClick}>{name}</button>
}
export default Button

We’re implementing the button in our BestNovel component like this:

        <div className='buttons-bar'>
            <Button onClick={handleFilter} name="Filter Novels that won in the 2000's" />
            <Button onClick={handleSort} name='Sort the authors by first name' />
            <Button onClick={handleSome} name="Some Author's names Ursula exist" />
        </div>

As you can see we have defined the name prop on each button and have provided onClick handler function calls to each onClick prop.

Filtering the list

Inside our handleFilter() function we do the work of filtering our List component.

    const handleFilter = () => {
       const updatedList = List.filter(list => {
            if(list.Year < 2000) {  
                return
            }
            return list
        })

        setNewList(updatedList.map(list => (
            <li key={list.id}>
                <span className='author'>{list.Author} - </span>
                <span className='title'>{list.Title} - </span>
                <span className='year'>{list.Year} </span>
            </li>
        ))

        )
        setNewTitle("Novel's that won after the year 2000")
    }

We are assigning the value of the filtered list to the updatedList variable. We are doing an early return for any novels awarded before the year 2000. And finally we return the list, or what is left from being filtered out. In our setNewList() function we are mapping through the updatedList variable to update the state of the newList element.

Check out the full post here.

Tips and Tricks to make Coding Easier

ryanAllMad — Sat, 16 Jul 2022 23:36:00 +0000

In this article I’ll be discussing how to use Emmet, and various VS Code extensions to make your coding life easier and more organized.

Professional Dev's utilize shortcuts to make coding faster and more efficient. You can do that too! Get started today learning how to set up some of these same tools to make your coding life easier.

What Is Emmet and How Do I Use It?

Emmet is a set of keyboard abbreviations that will automatically convert to the language you're using them with. Although that may sound confusing, it's a lot simpler than it sounds. Emmet allows you to type less and create code more quickly. It is simply a list of shorthand keystrokes that will fill out as HTML, CSS, and other languages. Checkout the Emmet Cheat Sheet here to see all of the available languages and to get started. Let's dive right in to see Emmet in action.

If you want, you can check out how to get started with Emmet in my help article here.

What is ESLint and How Do I Use It?

ESLint is a tool that will analyze your JavaScript code and let you know if problems exist within it while you're coding. If you want to avoid running into common syntax errors or other simple errors before you run your code in a JavaScript Runtime Environment like a browser, then you should start using ESLint today. You can use ESLint to make your coding life easier and I'll show you how. To find out more about ESLint, check out their documentation here. In short, after setting up ESLint in VSCode, you'll be able to find problems in your code and fix them before ever running it in the browser.
Check out my blog post about how to set up ESLint in VSCode.

What is Prettier & How Do I Use It?

To put it simply, Prettier is a code formatter. The reason we format code is to make it readable, not only for others, but for yourself as well. Check out the Prettier docs for more info here.

Readable code is workable code and you can make your code easy to work with if you format it appropriately. The problem with formatting your code manually is that not only is it error prone, but it's tedious and time consuming. Using a tool like Prettier can save you time, and prevent errors in your formatting. Your code will be more legible and you'll have an easier time navigating your code if you haven't looked at it in a while. You can even set up Prettier in VSCode to format your code whenever you save it. Configuring Prettier is not always a straight forward process. In this article I'm going to show you how to set Prettier up in VSCode to make your coding life easier.

Check out my blog post about how to set up Prettier in VSCode.

Biggest CSS Mistakes to avoid

ryanAllMad — Sun, 19 Jun 2022 19:22:59 +0000

If you're not a fan of CSS, or if you're brand new to front end coding, you might run the risk of making needless errors when you're developing the styling of your products. Learn the biggest CSS mistakes to avoid and how to prevent them, and even how to fix them when you find them.

Links in this post will forward you to a longer, 14 minute, informative blog post.

Why do I need to learn this? I hate CSS.

If you hate CSS, trust me when I say, the rest of us can tell. Regardless of your feelings on the language, best practices should always be followed, and CSS can be pretty cool actually.

We need to know these things because Web Development is all about building on top of others' code. CSS is no exception, it is in fact designed to build upon itself.

Whether you're working with the latest supported version of a language, a new framework, or trying to make your product work with someone else's code; to scale you need a solid foundation.

Let's get right into The Biggest CSS Mistakes to Avoid:

CSS Variables and CSS Layers: What, When, and How?

ryanAllMad — Thu, 02 Jun 2022 20:43:52 +0000

This is a brief summarization of the main principles covered in my extended post here . Check it out if you're looking to understand these concepts more fully.

CSS Variables

CSS Variables allow you to create pre-defined CSS properties and assign their scope.

When to Create CSS Variables

When defining variables it’s important to consider how they can cut down on your development time in the future.

Let’s consider this some more in the form of a design theme. For my project I want to have a masculine and feminine theme. I am going to be using background svg’s, images, border, font, and color styles to define each theme. Using CSS Variables, I can change the styles for all of my elements across the board more easily.

Where to Define CSS Variables

When defining the scope of your variables, you can set them to the :root object. That will ensure your variables can be used on all of the document’s elements.

If you have variables that should only be used in certain contexts, for instance variables just for containers, then adjusting the scope of the variables to the .container class makes more sense.

Example of this scoping principal in action:

CSS Layers

With normal CSS, the only way to overwrite styles is to use a more specific selector. Or as a last resort by using the !important directive (ewwww David).

With CSS Layers, you can create modules of CSS that will apply to elements under different contexts and you can also prevent writing hyper specific code or using !important when you don’t need to.

How to Use CSS Layers

CSS Layers provide you with a way to specify which styles to load and in what order. This is helpful especially if you have different stylesheets for different things.

For instance, you might have a utilities stylesheet that sets the padding, margins, and button properties to given class names. During development, you only need to add those class names to your HTML to see it magically styled in front of your eyes. You could use layers to define when to load utility stylesheets like Bootstrap and Tailwind to your project.

How to Define CSS Layers

With CSS Layers, you can use shorthand in a style tag to define the layer precedence like this below. If you define this at the top of your head element, it won’t matter in what order you load your stylesheets 🎉 :

<style>@layer third-most, second-most, most-important;</style>

When you first load my codepen here, you’ll see four total CSS layers applied to this site design.

layout (layer 0)
utilities (layer 1)
typography (layer 2)
femmeTheme (layer 3)

If you open up the inspector tools in Chrome 99 and up and click on the “Toggle CSS layers view” button, you can see the order in which the browser is prioritizing these layers.

The Femme Theme Layer and Variables

In my femmeTheme layer, although the H1 element has properties defined in the typography layer, I don't need to add a class name to my H1 element to overwrite the previous styles.

Similarly, I don't need to add additional specificity to the header element to adjust the border-bottom property. The CSS layer does the work for me.

I’m using Javascript to replace the images, and insert an internal stylesheet into the page.

=> When you click the “Change Theme” button, you’ll see the site design change.

What’s really going on under the hood?

As you can see in the below image, I’ve used CSS Variables to re-define the properties already in use. I’ve also overwritten the H1 property a second time without having to adjust the specificity at all 😏.

When the button is clicked, this stylesheet is inserted after the beginning of the body tag. This ensures that it will have more precedence than any of the layers that were defined before it.

See the project here:

Create a Cookie Consent Banner with Vanilla JS

ryanAllMad — Wed, 01 Jun 2022 19:27:32 +0000

This easy, step by step article will show you how to create, manipulate, and remove DOM elements. With relevant links to MDN docs along the way, this is sure to help any JavaScript newbie hit the ground running.

=> Start a new pen on CodePen here.

Getting Started

=> Paste this HTML in the HTML section of your Pen



<header>
  <div>Site Title</div>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  </header>
  <main>
  </main>
  <footer>
      <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  </footer>

=> Paste this CSS in the CSS section of your Pen.



/**
Web Page Styles
**/
* {
  font-family: "Arial", sans-serif;
  font-size: 16px;
}
header {
  background: white;
  color: darkblue;
  border-bottom: .5px solid darkblue;
  width: 100%;
  padding: 2%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}
header div {
  grid-column: 1 /span 1;
  grid-row: 1;
  display: flex;
  margin: 1em;
  justify-self: left;
}
nav {
  grid-column: 2 /span 1;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
}
nav ul {
  display: flex;
  justify-content: space-evenly;
  width: 40%;
}
nav li {
  list-style: none;
}
main {
  min-height: 600px;
  background: url('https://images.unsplash.com/photo-1651505343248-26d2400939c4?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTM5NjcxMTM&ixlib=rb-1.2.1&q=80') 0 0 no-repeat;
  opacity: .5;
}

Your pen should look a bit like a web page:

Manipulating the DOM

=> Create a div element in the JS section of your Pen by using the createElement() method.

=> Add a class name and insert text and a button into the Cookie Consent Banner using the classList.add() and innerHTML methods.

=> You can use this HTML for your innerHTML content if you'd like. ‼️important!! Be sure to include the button HTML as is.



This site uses 🍪 cookies 🍪 to track everything you do, except not really, idk actually I am just an example <button class="btn" aria-pressed="false">Got It</button>

=> Insert this DOM element you've created into the DOM using prepend()

Now you have created a banner and inserted it into the DOM 🎉

=> Style the Cookie Banner.

You can use this CSS, or design it yourself.



.cookie-message {
  width:100%;
  padding: 2% 0;
  background: white;
  box-shadow: 12px 12px 25px #444444aa;
  border-bottom: .5px solid limegreen;
  text-align: center;
  letter-spacing: .12em;
}
.btn {
  width: 100px;
  margin-left: 1%;
  background-color: limegreen;
  padding: .5% 1%;
  border: 2px inset white;
  outline: 2px outset black;
  color: white;
  border-radius: 5%;
}

Your Banner should look something like this:

=> Remove the Cookie Banner when the user clicks the button.

=> Use querySelector to select the button by its class and store it in a variable.

=> Add an event listener for the click event to the button variable you created.

=> Use the remove() method to remove the banner element from the DOM.

=> OPTIONAL: Add a setTimeout() function within the event handler to prepare for the next steps. Take this project even further with my complete post here.

See the complete project here:

Build Accessible React Toggle Buttons

ryanAllMad — Sat, 14 May 2022 05:06:34 +0000

Do you want to make button components with React, but aren't sure where to start? Interested in making them fully versatile and functional for the widest possible audience? Does User Experience and Accessibility matter to you? Well you've come to the right place. I will show you step by step how to make reusable, accessible toggle buttons with React. After reading this post you'll also be able make inclusive button elements that you can reuse in all of your React projects.

We'll be covering how to make the Button Component, How to use and re-use the Button Component in the App Component, and How to style the components for Accessibility using CSS.

Estimated reading time: 11 minutes

Why make Accessible Toggle Button With React?

React is a generally easy to use Javascript Library that allows developers to create reusable, interactive elements for user interfaces. React is exploding in popularity, yet I don't see much focus in online tutorials for making React components accessible.

Building for accessibility with HTML alone is time consuming, and error prone. With React, you have the capability to make easy to reuse, plug and play components. Starting off with accessibility at the forefront seems to be the wise choice.

What are toggle buttons?

Not all buttons are created equally. Or in some cases they have multiple states of being, but generally perform only one task or another. Buttons like on/off switches, send message buttons, or next/previous buttons are all considered toggle buttons.

Toggle buttons should respond to the user to inform them of its current state. If you, as the web developer, don't relay the current state of a toggle button to the user, the user will have no idea if the button performed its task. For a send button, a user might ask themself, did I hit send?

Therefore, you need to relay the message of state to your user. As a developer, you have to consider that not all users will be able to see. Those that are may have difficulty understanding the state you're trying to communicate. In this tutorial, I'll show you how to make buttons that are easy to understand for a wide range of users.

Key Concepts

Easing Cognitive Load - We use color, iconography, and styling for easier understanding and better comprehension.

👀 Learn about Cognitive load.

Buttons, Semantic Structure, and Labeling- Learn how to build buttons the way they were meant to be built.
👀 See how Semantic HTML5 works for labeling buttons.

Visual Feedback - This refers to communication from the Web Application to the user after the user has performed some action. Most of us are familiar with visual feedback, like hover or focus color changes on buttons and links. Something to keep in mind is that non-visual feedback should also be provided since some users will not be using a visual interface. In this article we provide visual feedback through the styling of the aria attributes and with the use of icons.

👀 See how to style toggle buttons inclusively.
👀 See how to incorporate Font Awesome Icons for visual understanding.

Audio Feedback - Learn how easy it is to provide audio feedback for toggle buttons.
👀 See how I provide audio feedback to non-visual users.

Let's start!

Starting off, below is an image of the project. You can see the build here, on Github Pages. Also, check out the source code here so you can see the complete picture.

Making The Button Component Accessible

Because we are building this component to be reusable, let's start by adding some props to the button component. The button will only need two props. A label, and the fontIcon. I'll go into the font icon more below.

Creating the Button Component:

Inside the App.js file, I have created the Button Component. This allows me to pass all of my button functionality down as props.

const Button = ({label, fontIcon}) => {
}
    return <button className={label} ref={buttonRef} onClick={onButtonClick} type="button" aria-pressed={ariaPressed}>{faIcon}{label}{faIcon}</button>;
}

Labeling Accessible React Toggle Buttons

The great thing about using semantic HTML, and therefore a button element, is that the button element will tell the browser what its role is a button, and needs no additional labeling besides the text inside the button. Another benefit to the HTML button element is that this label will be translated by translation services in the browser. This makes the toggle buttons even more inclusive.

The button element below has a type="button" attribute and a label prop that will allow us to reuse this component as needed. For the text of the button, and for the className attribute we use the label prop. This allows our classes to be generated dynamically and speeds up our development process.

    return <button className={label} ref={buttonRef} type="button">{label}</button>;
}

Providing Audio Feedback

You can tell screenreader's the role of your toggle button using the Aria-Pressed attribute. The user is only told that the button is pressed, so long as the aria-pressed attribute is true. And this is how we provide audio feedback to our non-visual users.

Below I've added an aria-pressed attribute. Then we connect it to a piece of state. I've also added an onClick function called onButtonClick:

    return <button className={label} ref={buttonRef}  type="button" aria-pressed={ariaPressed}>{label}</button>;

Next, I'll add this state to my inclusive button component:

const Button = ({label, fontIcon}) => {
    const [ariaPressed, setAriaPressed] = useState(false);

Here's how we use the ariaPressed state in our onButtonClick function:

const Button = ({label, fontIcon}) => {
    const [ariaPressed, setAriaPressed] = useState(false); 
    const [faIcon, setFaIcon]           = useState(fontIcon);
    const buttonRef = useRef(null);

        //enter button events
const onButtonClick = () => {
    if (ariaPressed === false){
        setAriaPressed(true); 
        setFaIcon(<FontAwesomeIcon icon={faThumbsUp} />);
        setTimeout(() => {
            setAriaPressed(false);
            setFaIcon(fontIcon);
        }, 1555);
 console.log("button clicked");
    } else {
        setAriaPressed(false);
        setFaIcon(fontIcon);
    }
}

As you can see, in the if statement above I've added a setTimeout function. This function will only allow the pressed state to last for about 1.5 seconds. If I send an email and my aria-pressed=true state is left true (or pressed) I may not be able to send a message again.

The Button Component

const Button = ({label, fontIcon}) => {
    const [ariaPressed, setAriaPressed] = useState(false); 
    const [faIcon, setFaIcon]           = useState(fontIcon);
    const buttonRef = useRef(null);

        //enter button events
const onButtonClick = () => {
    if (ariaPressed === false){
        setAriaPressed(true); 
        setFaIcon(<FontAwesomeIcon icon={faThumbsUp} />);
        setTimeout(() => {
            setAriaPressed(false);
            setFaIcon(fontIcon);
        }, 1555);
 console.log("button clicked");
    } else {
        setAriaPressed(false);
        setFaIcon(fontIcon);
    }
}
    return <button className={label} ref={buttonRef} onClick={onButtonClick} type="button" aria-pressed={ariaPressed}>{faIcon}{label}{faIcon}</button>;
}

Reusing the Inclusive Button Elements in The App Component

Because I created a state and onClick function for my label and font awesome icons inside of my Button component, I am able to reuse these buttons endlessly in my App Component.

Creating The App Component:

Below I have two containers. The first contains the next and previous toggle buttons. The second contains the Send button.

Each label is set in the Button component attributes and the icons that are set correspond with the purpose of the button. The aria-pressed attribute is set to false when the component first renders.

The App Component:

const App = () => {
    return (
        <div className="wrapper">
        <div className=" button-section container">
            <Button fontIcon={<FontAwesomeIcon icon={faBackward} />} label="previous" />
            <Button fontIcon={<FontAwesomeIcon icon={faForward} />} label="next" />
            </div>
        <div className="container two">
            <Button fontIcon={<FontAwesomeIcon icon={faPaperPlane} />} label="send" />
        </div>
        </div>
            );
}

export default App;

How To Style Accessible React Toggle Buttons

Truly inclusive button elements will provide users comprehensive understanding of the user interface in split seconds. In other words, don't make your users think! Make the feedback to the user as easy to understand and informative as possible by planning your elements ahead of time.

What Is Cognitive Load?

According to Wikipedia, cognitive load refers to the used amount of working memory resources. I like to imagine we each wake up each day with a cognitive load fuel tank that may or may not be full. The amount of fuel you have is your available cognitive ability. Users with sensory processing, mental health disorders, or difficulties with executive function are going to expend more of this cognitive fuel tank than others would. So, it's our job as developers to be as "fuel efficient" as possible for our users.

Styling the toggle buttons inclusively

Color queues can help increase the "fuel efficiency" of our accessible toggle buttons. Targeting the various states of the toggle button can help the user know if they haven't pressed the button yet, that they pressed the button, and that they had pressed the button.

Button not pressed:

The Button pressed (aria-pressed=true):

Ths user pressed the button at some point:

Color alone cannot account for all users. Many users experience color differently. To build our toggle buttons inclusively, we need to first ensure our contrast ratio's pass, and second include icons for better visual comprehension.

We start with the basic button styles. We ensure that our background and foreground colors are passing the contrast ratio test, linked above:

button {
    font-size: inherit;
    border: 0.125rem solid transparent;
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    min-width: 150px;
    background: #595959;
    margin: 3% 5%;
    color: #fff;
}

For the user interaction styles,

First, we add a style for [aria-pressed]; this sets up how the button will appear to be "pressed" when the :focus element is active.
Next, we add a style for the [aria-pressed]:focus element so that a user sees a change and knows the button was pressed at some point, but is ready to use.
Finally, we add our [aria-pressed=true]:focus style; which appears to depress the button as well as changes the color to a passing contrast of green and white.

/**User interaction styles**/
[aria-pressed] {
    position: relative;
    top: -0.25rem;
    left: -0.25rem;
    box-shadow: 0.125em 0.125em 0 #fff, 0.25em 0.25em #000;
}
[aria-pressed]:focus {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 0.25rem #222;
    color: #ffffff;
    border: 2px solid #ffffff;
    background: #595959;
    transition: background-color ease-in-out 500ms, 
    color ease-in 200ms, border-color ease-in 200ms, 
    box-shadow ease-in 200ms;
}

[aria-pressed='true']:focus {
    box-shadow: 0 0 0 0.25rem #222, 
    inset 0 0 0 0.15rem #595959, 
    inset 0.25em 0.25em 0 #fff;
    background-color: #006600;
}

Iconography for Visual Understanding

First, you’ll want to install Font Awesome in your React App. Start here.

Starting back at my Button component

I import the Font Awesome react library and import the thumbs up icon.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';

This icon is a part of my onButtonClick function. It tells the user that so long as aria=pressed is true, they receive a thumbs up letting them know the process was successful.

const onButtonClick = () => {
    if (ariaPressed === false){
        setAriaPressed(true); 
        setFaIcon(&lt;FontAwesomeIcon icon={faThumbsUp} />); //so long as aria-pressed is true show a thumbs up
        setTimeout(() => {
            setAriaPressed(false);
            setFaIcon(fontIcon);
        }, 5555);
 console.log("button clicked");
    } else {
        setAriaPressed(false);
        setFaIcon(fontIcon);
    }
}

We can see that the aria-pressed attribute is true and the button has a thumbs up icon:

Back in my App component

I'm going to add icons to help the user understand what the button does.

At the top of my file, I import the Font Awesome React components I need:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faForward } from '@fortawesome/free-solid-svg-icons';
import { faBackward } from '@fortawesome/free-solid-svg-icons';
import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';

And within each button component, I've included the font awesome component and icon I need:

  <Button fontIcon={<FontAwesomeIcon icon={faBackward} />} label="previous" />
  <Button fontIcon={<FontAwesomeIcon icon={faForward} />} label="next" />

Styling the icons

Because my button component has two instances of the font icon, I need to be sure I hide the unnecessary duplicate icon.

/**Icon styles**/

.next > svg:first-of-type, 
.previous > svg:last-of-type,
.send > svg:first-of-type {
    display: none;
}
.svg-inline--fa {
    padding-left: 7px;
    padding-right: 7px;
    margin-bottom: -2px;
}
.next > svg:last-of-type {
    margin-bottom: -1px;
}

Here we can see that, while there are two svg elements within this button, only the arrow to the left shows for the previous button while the right arrow is set to display:none;

Wrapping Up

In this article, we built a Button Component that can be used and re-used in the App Component for anything you can think of. We learned how to provide audio feedback using semantic HTML and the aria-pressed attribute. How to also use iconography and the aria-pressed attribute to style our buttons to ease cognitive load. Hopefully, now you have a pretty solid understanding of how to build accessible toggle buttons with React.

If you're interested in learning how to make more React Components Accessible, check out this post on making an Accessible To Do list with React.

Photo by Ferenc Almasi on Unsplash

Build An Accessible React Carousel

ryanAllMad — Mon, 11 Apr 2022 16:31:14 +0000

Hey front end developer! Are you working on your React.js skills? Looking for a project that uses React Hooks? If you’re wanting to learn how to build an Accessible React Carousel with multiple items from scratch, one that’s accessible, translation ready, and inclusive you’re in the right place.

Estimated reading time: 10 minutes

Original Post here.

The Accessible React Carousel Project

The Idea behind this build is a React accessible carousel built to have an easy and friendly experience for any user using any device.

The accessible React carousel tackles these specific problems that different users face:

Creating a visual experience for sighted users
Creating an audio experience for non-sighted, or less-sighted users
Building a Translation ready project for sighted, non-sighted, or less-sighted users who don’t speak English
Built in animation consent for users with vestibular, or sensory impairments.
Color, iconography, and labeling for cognitive ease.

This React accessible carousel comes out of the box with features that allow sighted and non-sighted users to experience it equally. The carousel is built to be interacted with for people consenting to interact with it.

In other words, folks who deal with sensory, or balance issues won’t be forced to see movement when the carousel first loads. Instead, they get to choose whether they want to interact with the carousel or not.

All of the features of this carousel are translation ready so anyone with a translation service will be able to experience this carousel visually or not.

Check out the build here, and see it in action right here.

Key Concepts

Focus Management & Feedback – In this project I was thinking about keyboard focus and how I can use it to provide feedback to users who access my carousel from different devices.

👀 Check out how I use focus to instruct users on what to do.

👀 Check out how I incorporate that focus into the feedback.

Consent – For some users unanticipated motion can cause discomfort and agitation. Those are not ideal reactions to something you’ve built, so why not provide your users a way to choose whether or not they want to interact with motion?

👀 Check out how I manage consent in the Carousel Gallery Controls.

App Component

The major elements we’re going to cover in the App Component are the Slide Component, Instructions, and Gallery Controls. As you can see in the image below, we have

5 Slide Components within an unordered-list element.
Below the [aria-labelledby=”gallery-label”] element is the instructions div

Below that is our gallery-controls div where we are using Buttons Components.

State and Function of the App Component

The App Components uses the useState() React Hook on the main element to handle Mouse Touch events for mobile users. The point behind this use of state is to ensure that our labeling of the Instruction Component will work appropriately on mobile and not just on desktop.

We define the use of state like this:
const [touched, setTouched] = useState('');
We set the state on the main element like this and call an onTouchStart function:

Next, we create the onMainTouchStart function which will add a class name to the main element when touched:

const onMainTouchStart = () => {
    setTouched('touched');
}`
Styling the touched class
We add the following style which is going to make a lot more sense when we build the instruction component:

`.touched #hover {
    display: block!important;
}

Focus Management

For the [aria-labelledby='gallery-label'] element, we are adding a tabIndex attribute of 0. This allows the user to navigate to the body of the carousel component.

When the keyboard is focused on this element, the instructions will print out a different message than if the user mouses over it. That helps the message be clearer depending on the device.

<div role="region" aria-labelledby="gallery-label" tabIndex="0" aria-describedby="focus">`

##Instructions
The instructions div contains a paragraph tags that explain to the user how to interact with the accessible carousel.

##Instruction HTML
    `<div className="instructions">
        <p id="hover">use buttons or scroll left or right for more</p>
        <p id="focus">use buttons, tab, or your left and right arrow keys for more</p>
    </div>

Instruction CSS

Next, we need to style each of these paragraphs so only the correct instructions appear depending on the device and interaction from the user. We start by setting the display to none on the hover and focus messages.

Then we include the :hover and :focus sudo classes and the .touched class we talked about earlier to display when the gallery-label element is either hovered by a mouse, focussed on by a keyboard, or touched by a touch device.

#hover, #focus {
    display: none;
    text-align: center;
    max-width: 50%;
    word-break: break-word;
    margin: 10px auto;
}
[aria-labelledby="gallery-label"]:hover + .instructions #hover, 
[aria-labelledby="gallery-label"]:focus + .instructions #focus,
.touched #hover {
    display: block!important;
}

When the keyboard focuses on the [aria-labelledby="gallery-label"] element, the paragraph explains to the user to use the buttons, tab key, or the left or right arrow buttons.

If the user is using the mouse or a touch screen and focuses on this element, the paragraph tells them to use the buttons or scroll left or right.

This is partially the Key Concept of Feedback, and partially the concept of Focus. How the user accesses the component will inform the type of instructions they’re given.

Slide Component

The Slide Component is made up of a list item, figure, image and linked figcaption. The idea behind this component is a gallery of image items. We could change these to be whatever we want, like a post carousel, but for the purposes of this tutorial we’re doing an image gallery.

Below we see the list item, figure, img, figcaption etc that all make up a Slide Component:

According to the Unsplash API documentation, the gallery should have a link back to the artist’s profile. There are some other required items to include here.

To make the gallery accessible, the images should include an alt description too. Some artists on Unsplash incorporate alt descriptions, and using the Unsplash API, you can pull that information into a prop.

The gallery item should also include:

the image url
the artists name
whether or not the image should be lazyloaded in

We’re going to use chrome native lazy loading to help speed up the load time of our carousel. Images in the initial paint shouldn’t be lazy loaded. Since I designed the carousel to show the first two images by default, I left out the lazy loading attributes on the first two Slide Components.

Props of the Slide Component

The props of the Slide Component are as follows;

We pass the {url} prop to the image file
the alt attribute gets the {description} prop
the artist’s name is the {caption} prop
the artist’s link as the {user} prop

import React from "react";

const Slide = ({url, description, caption, user, loading}) => {
return (
<li>
    <figure>
        <img loading={loading} width="700px" src={url} alt={`the photographer's desctipion is ${description}`} />
        <figcaption><a href={user} target="_blank" rel="noreferrer" title={`to ${caption} profile`}> By: {caption}</a></figcaption>
    </figure>
</li>
);
}

export default Slide;

Once the slide has been incorporated into the App Component and we have defined these props from the Unsplash API, we end up with a list item that looks something like this:

Gallery Controls

We make up the Gallery Controls with two list items containing toggle buttons. The buttons scroll the carousel for the user. You may have noticed by now that this carousel doesn’t scroll automatically. That’s intentional.

Managing Consent

Fast paced movement can actually cause physical pain and discomfort for some users. Giving the users complete control to move the gallery when they want to is the more inclusive way to design these types of elements.

Incorporating the Button Components

Check out my accessible toggle buttons post here to learn how to build these highly reusable components. I’ve taken these buttons and placed them within the same App Component file.

Props of the Buttons Component

If you checked out that tutorial, you may have noticed that I’ve changed the way the Props work in the Buttons components in this project.

The Buttons component needed the following props:

{label} for the button text and classname,
{fontIcon} for the appropriate Font Awesome icon,
{ariaButton}to control the state of the aria-pressed attribute, and
{onEvent} to create unique event handling for the button’s use.

Include the Button Component in the same file as the App Component:

const Buttons = ({label, fontIcon, ariaButton, onEvent}) => {
    return (
        <div className="button-section">
        <button onClick={onEvent} className={label} aria-pressed={ariaButton} type="button">{fontIcon}{label}{fontIcon}</button>
        </div>
            );
}

I realized I needed my previous and next buttons to perform different tasks. The previous button needed to scroll to the left and the next needed to scroll to the right. I was also able to refactor these buttons so the fontIcon prop could call the icon necessary for the button (ie. for the previous button the faIconPrev icon).

Utilize State for the Button Components

We are defining state for the aria-pressed attribute to handle the function and styling of our button.

The faIconNext and faIconPrev states define the Font Awesome Icon we’ll be using for the button.

//button hooks
    const [ariaPressed, setAriaPressed] = useState(false); 
    const [faIconNext, setFaIconNext]           = useState(<FontAwesomeIcon icon={faForward} />);
    const [faIconPrev, setFaIconPrev]           = useState(<FontAwesomeIcon icon={faBackward} />);

Utilize Scroll Functions with the UseRef Hook

In the App component, define the galleryRef:

const galleryRef            =   useRef();
Back on the aria-labelledby="gallery-label" element, we utilize this ref:

<div ref={galleryRef} role="region" aria-labelledby="gallery-label" tabIndex="0" aria-describedby="focus">

Scroll Functions

Inside the App Component, I create the scrollNext, and scrollPrev function to scroll to the left or right respectively using the galleryRef element:

const scrollNext = () => {
    galleryRef.current.scrollBy({
        top: 0,
        left: 625,
        behavior: 'smooth'
      });
}
const scrollPrev = () => {
    galleryRef.current.scrollBy({
        top: 0,
        left: -585,
        behavior: 'smooth'
      });
}

OnClick Button Events

We define the onEvent prop for each button from the Buttons Component:

        <li>
        <Buttons ariaButton={ariaPressed} onEvent={onButtonPrevClick} fontIcon={faIconPrev} label="previous" />
        </li>
        <li>
        <Buttons ariaButton={ariaPressed} onEvent={onButtonNextClick} fontIcon={faIconNext} label="next" />
        </li>
Next inside the onButtonNextClick and onButtonPrevClick functions we’ll call the scrollNext or scrollPrev functions respectively, and set the state for the font icon.

//next click
const onButtonNextClick = () => {
    scrollNext();
   if (ariaPressed === false){
        setAriaPressed(true); 
       setFaIconNext(<FontAwesomeIcon icon={faThumbsUp} />);
       setTimeout(() => {
        setAriaPressed(false);
        setFaIconNext(<FontAwesomeIcon icon={faForward} />);
     }, 600);
     console.log("button clicked");

   } else {
      setAriaPressed(false);
      setFaIconNext(<FontAwesomeIcon icon={faForward} />);
}
}
//prev click
const onButtonPrevClick = () => {
        scrollPrev();
    if (ariaPressed === false){
         setAriaPressed(true); 
        setFaIconPrev(<FontAwesomeIcon icon={faThumbsUp} />);
        setTimeout(() => {
         setAriaPressed(false);
         setFaIconPrev(<FontAwesomeIcon icon={faBackward} />);
      }, 600);
  console.log("button clicked");
    } else {
       setAriaPressed(false);
       setFaIconPrev(<FontAwesomeIcon icon={faBackward} />);
 }
 }

What we end up with is cohesive and exact button behavior for each of our buttons.

Conclusion

Hopefully now you have the basic building blocks you need to build any kind of Accessible Carousel with React.js.

A wider audience of users will be able to utilize and enjoy your React accessible carousel.

Some key concepts covered were how to create visual feedback based on the device and current usage. We utilize color, iconography, and labeling for easier cognitive load for sighted users. We widened our audience by incorporating labeling for users who aren’t sighted and who may not speak English. And by incorporating focus management and consent into the build, our Accessible React Carousel is inclusive of all types of users.

Photo by Serge Kutuzov on Unsplash

Looking for more React projects? Check out how to make an accessible To Do List and how to create Accessible Toggle Buttons.

Using The Media Query for Printable Web Pages

ryanAllMad — Thu, 06 Feb 2020 22:48:51 +0000

How to Use the Print Media Query & When

When would I even need this?

I actually had to style the e-commerce pages of a site recently because the site needs to allow its customers the ability to print out a nice and neat receipt page. Just like with all projects, consider what your client's users will use the page for. Most of the time they will not need to print out these web pages, but I'm sure if you have ever attempted to print out a DIY project from the web you were most likely annoyed at all of the superfluous content that wasted both your paper and printer ink. It's something to consider, and it's relatively easy to make work.

How do I use it?

The Print media query is as simple as they come:

@media only print {/*code to do something*/}
The 'only' part of this query ensures your styles within the media query brackets will *ONLY be used for print mode
The styles within these brackets should target any elements that are hard to read, or make the document break up into pages in a weird way.
Hit Ctrl + P on your keyboard after each change you save to test the print view

Simple Example:

Original Print:

Updated with print media query:

Here is the simple code for this example:

@media only print { /*reset all font sizes so that they don't break in Print Mode*/ h1, table, thead tr, tfoot { font-size:1em; } /*set the width of each table cell to 1/4 width, since there are 4 cells per row*/ td { width:calc(100% / 4); } }

See the simple example here:

Notes on a more complex example:

In my project below, I first made an edit specific to Codepen, because codepen won't allow you to print but the first page. So this is good to know if you want to design a web page and have it fit all onto one page:

`body {
/these are the pixel dimensions of a standard A4 piece of paper/
max-height:3508px;
max-width:2480px;

/this is a style choice you do not need it/
text-align:center;
}`

The code above sets the maximum printable area to one standard sized A4 printer paper.

I hid the following styles because the user will not need this information once the page is printed out. They neither need the top level navigation, nor do they need the footer elements.

nav, footer { display:none; }

On a normal web page, the background image style of the main div tag would show up in the Print View, but it doesn't here. To hide it I set the background to transparent.

main div { background:transparent; }

Next, I wanted to make sure the text was full width as the row of text is much harder to read than top to bottom. So, I set my printer styles as such:
` main {
display:block;
}
main div {
width:100%;
margin:0 auto;
padding:0;
background:transparent;
/if you do not remove these they will show up in print, yuck/
box-shadow:none;
border-radius:none;
}

.logo {
/if this were a normal web page the background gradient would need to be turned off, or not, whatever/
background:transparent;
/if you do not remove these they will show up in print, yuck/
border-radius:0;
box-shadow:none;
}`

So, now you end up with a very basic one page print out with just the main body content and the logo:

One last thing, if you have hover (or other) effects and try to print the page, the hover effects will show up in the print view. So, I removed these as well:

nav p:hover, .logo:hover, main div:hover { box-shadow:none; transform:translate(0, 0); }

Check it out on Codepen

When you do, be sure to:

Open in Full Page
Hit CTRL + P to see the printer friendly version of the page
Check out the page in Responsive Design Mode in your Browser.

DISCLAIMER:

Codepen has some limitations for this experiment I have done. It is not capable of fully acting as a real web page when using the "Full Screen Mode", so some features behave differently than a standard web page would.

The first major issue with this experiment is that background images aren't showing in the Print Window by default. Browsers usually show background images in the print view, and thus for legibility you might need to remove them using the print media query. Of course, many browsers also give the user the ability to remove background colors and images in the print settings, but this presents UX Design issues. Issues like; does the user know about this feature? And what happens to the legibility of the text if they remove the background images & colors?

If you don't believe me, check out this page (Right click and open in a new tab) Starbucks.com page:

You can see the image graphic in the background of the section with the hummingbird is a background image if you check it out in inspector. Now, go ahead and hit CTRL + P. You can see the background image appears in the Print Window.

Codepen will only allow you to print one page.

I'm aware this design is kinda ugly 😟. I used light colors, border radius, and box-shadows on purpose because these are some features that will show up in the print window and they will look even worse, I also didn't want to use a ton of images so I made use of shapes and colors. Another thing you might notice at the bottom of the stylesheet, is that I tested out the use of 2 other media query properties for the first time instead of designing mobile first.

I learned 3 things using CSS Grid + Flexbox for a standard site.

ryanAllMad — Mon, 23 Sep 2019 06:05:53 +0000

I really enjoyed my little project of translating a Graphic Design Grid into a Web page using CSS Grid, but the idea of building a standard website with CSS Grid was still tripping me up. So I went ahead and built something basic and standard with CSS Grid. My original grid's template row height was set in pixels and adjusting heights for responsiveness is even too crazy for me, so I set my template rows as such:

 
    grid-template-rows: repeat(12, minmax(0px, max-content));

Now I have a grid that is responsive ready. The above style sets my grid to 12 flexible rows that will shrink down to 0px if there were no content.

For me, building a standard site should start mobile and work back to desktop. But because I'm slightly mad, I built the desktop version first. In my head I was thinking "I just wanted to layout a header, sidebar, cover image, main area, and footer and see it all fit together." This later bit me in the butt. I am obsessive about building mobile first with "min-width" media queries (quite mad, since I started backwards). It's no shock that when I started shifting things around for responsiveness, I found CSS Grid to be clunky (or rather I blamed CSS Grid), BUT and this is a big BUT, I started my design as a desktop design, so working backwards from there using min-width media queries will always be more work (I am admitting I shouldn't blame CSS Grid for the extra work as it was poor planning on my part). When I "respons-ified" my Graphic Design Grid, which was also built for desktop first, I used max-width media queries and it was incredibly less work.

1.

If you are building with CSS Grid decide whether you are building for a mobile or desktop screen first...

if desktop then use max-width media queries
else use min-width.

2.

Display flex inside your Grid.

Laying out the ancestor elements of my Grid was infinitely easier when I set it's child elements to "display:flex;" I tried creating a sub-grid at first, and that will take more study to be sure. For a simple design, I found that minimal effort was required when I set, for instance, the header element to:

display:flex; 
flex-flow:row nowrap; 
align-items:flex-end;

The header element is the child of the .container which is set to display:grid; And so the header has the Grid Child Properties set to it like grid-columns and grid-rows. But the header's display property can be set to flex so that the header's children take on the flex alignment properties.

After I made the design responsive I started making it less standard and added my funky little touches. I don't like hearing things like "nobody uses box shadows anymore" and "nobody does rounded corners." Well, whatever, I did and I think it looks fun, sue me (no don't really I'm broke and I got mouths to feed). At any rate I added my little responsive touches, the box shadow moves on hover over the elements meant to link somewhere, they also have a "ripple effect" I learned from Ben Szabo

3.

CSS Grid can give you better control of your JavaScript Scroll Events.

Lastly, I added some JavaScript since I'm also in the process of honing those skills. JavaScript may be easier to predict when using CSS Grid with scroll effects since a lot of the object properties will be effected by "positioned elements" meaning, if you are using a lot of elements with position relative, absolute, sticky, etc. , then your scroll effects are going to get very hard to predict. With CSS Grid you don't have to use positioning very much. I only have two elements with positioning properties added to them, my logo has position:absolute; and my .content-main has position:relative; so that my scroll functions work the way I expect them to.

RESULT

How many tutorials or info blogs do you have bookmarked?

ryanAllMad — Wed, 18 Sep 2019 04:51:16 +0000

If you had to guess how many informational articles, documentation items, and tutorials you had bookmarked right now (whether on dev, social media and/or your browser) how many would you think you've got?

I think mine is around 50.

😵😭

Ghostbusters Challenge/JavaScript Challenge

ryanAllMad — Sat, 14 Sep 2019 03:58:21 +0000

Okay,

I thought of this stupid little snippet of JS that has been cracking me up all day. I wanted to create a snippet of JS code that would emulate the line from the Ghostbusters theme song: "If there's something strange in your neighborhood, who you gonna call? Ghostbusters"

So this is what I came up with:

{
let somethingStrange = 1;
let neighborhood = 1;

function whoYouGonnaCall() {
if (somethingStrange === neighborhood) {
whoYouGonnaCall = 'Gohstbusters';
console.log(whoYouGonnaCall);
} else {
console.log('I ain\'t afraid of no ghost');
}
}
whoYouGonnaCall();

}

This prints Ghostbusters to the console.

I thought this would be a great learning exercise for me and others to learn something from other JS devs. I know there are more experienced JS devs out there who can put together a more creative JS snippet that expresses this same line in a different way, and I would love if you would take a crack at it.

Challenge:
Please show us how you would use JS to express:
"If there's something strange in your neighborhood, who you gonna call? Gostbusters"

Rules are:
1.) it has to work.
2.) it would be great if you explained why you chose the snippet you chose
3.) Please share an explanation of it's result.

Thanks!!