Forem: ⚡️Ren⚡️

3 Ways to Start Incorporating Accessibility

⚡️Ren⚡️ — Thu, 02 Feb 2023 00:42:17 +0000

Traditionally, many think accessibility only benefits those with disabilities and helps people using mobile devices or those who experience slow network connections. In other words, by incorporating accessibility, you are expanding your user base and potential customers. The equity and equality of a website also become apparent; just like it is wrong to bar access to building for folks with disabilities, it would also be wrong to block access to your website.

A note before we continue, assistive technology will mostly be referred to by AT throughout this post.

1) Add Text Alternatives & programmatically determined names

Text alternatives or alternative text are text-based substitutes for non-text content on the web. Non-text content can include images, multimedia, data visualizations, and other visual or auditory presentation of information.
Programmatically determined names are the accessible names available to the browser and accessible technologies. Browsers use an algorithm called the Accessible Name and Description Computation to determine these names. It's the information used by assistive technologies(AT) to identify the HTML element.
- The accessible name for an element can be derived from the element's content, an attribute, or an associated element.
- ie. When a Screen Reader reads through the DOM and comes to an interactive element, it will announce the element and its name.
- i.e., Using speech recognition, a user can target an element by the accessible name.

Benefits

Adding text alternatives to non-text content serves several functions:

AT will present the text-based substitution to its user, helping those with visual or certain cognitive disabilities be able to perceive the content and function of the non-text content.
If an image file becomes corrupt, broken, fails to load, or the user has blocked images from loading, the browser will provide the user with the text alternative.
Good Text alternatives provide good SEO, and search engines will use text alternatives' content in their page assessment and rating.

Applying descriptive and concise accessible names provides access:

Providing role, state, and value information on all user interface components enables compatibility with AT, such as screen readers, screen magnifiers, and speech recognition software used by people with disabilities.

Text Alternative and Accessible Names in action

Different ways to apply text alternatives

ARIA

aria-describedby MDN reference
- This attribute lists the ids of the elements that describe the object.
- Can be used with images, form controls, widgets, groups of elements, regions with headings, definitions, and more
- When AT reads associated aria-describedby text, all semantics are removed

<img src="EllenTerry-ladymacbeth.jpg" alt="Lady Macbeth" aria-describedby="heading p1">
<h2 id="heading">Ellen Terry as Lady Macbeth</h2>
<p id= "p1">Lady Macbeth, standing, draped in a blue and green dress, raising a crown above her head. This painting dates back to 1889 and is oil on canvas. John Singer Sargent is the painter of the portrait of famous actress Dame Ellen Terry in her role of Lady Macbeth</p>

For your inspection:

Ellen Terry as Lady Macbeth

Lady Macbeth, standing, draped in a blue and green dress, raising a crown above her head. This painting dates back to 1889 and is oil on canvas. John Singer Sargent is the painter of the portrait of famous actress Dame Ellen Terry in her role of Lady Macbeth

HTML/ Inherent Attributes and Elements

alt="descriptive text here" MDN reference
- Defines an alternative text description of the image.
- Setting the alt attribute to an empty string indicates that this image is a decorative element and is not essential to the content.
  - You can also set an image to be decorative if there is enough information from the contextual text to provide the description.
  - i.e. a profile picture followed immediately by the name of the person (this example is not always applicable in social media use cases.)
SVG: <title /> MDN reference
- The SVG accessible name element
- Provides an accessible, short-text description of any SVG container element or graphics element

    <!-- Using the alt text to describe the information present in the image -->
    <img src= "EllenTerry-ladymacbeth.jpg" alt= "Lady Macbeth standing, draped in a blue and green dress raising a crown above her head"/>

    <!-- Decorative Images -->
    <img src="decorativeBG.jpg" alt=""/>

For your inspection:

Different ways to apply accessible names

ARIA

aria-labelledby MDN reference
- Enables developers to reference other elements on the page to define an accessible name
- With aria-labelledby an element or elements that label the control are applied to it
- When AT reads associated aria-labelledby text, semantics are removed
- ARIA labels override the content and accessible names for HTML elements
aria-label="descriptive text here" MDN reference
- Defines a string value that labels an interactive element
- When the default accessible name is missing or does not accurately describe the content/functionality, and aria-labelledby isn't used to reference other content that could give it meaning, apply aria-label
- ARIA labels override the default text and accessible names for HTML elements

<!--aria-labelledby-->
<section>
    <input type="checkbox"  aria-labelledby="TermsConditions" />
    <p id="TermsAndConditions">I agree to the Terms and Conditions.</p>
</section>

<!--aria-label-->
  <button aria-label="Close Dialogue" onclick="close()">
    <img src="close.svg" alt="" />
  </button>

HTML

Associating the <label> element explicitly MDN reference
- Best practice for accessible form elements is to use the label element to associate text with form elements explicitly.
- Utilizing the for attribute that takes in a single id for the form-related element
  - When using libraries like React, you'll use htmlFor to programmatically set the for attribute React Ref

    <label for="firstname">First name:</label>
    <input type="text" name="firstname" id="firstname">

Associating the <label> element implicitly MDN reference
- In some cases, form controls cannot be labeled explicitly
  - i.e. a form field is generated by a script, there may and/or may not be an id, and the developer may not have knowledge of the id and its contents
- To implicitly label a form control, you use the <label/> as a wrapper

    <label>
      First name:
      <input type="text" name="firstname" >
    </label>

Labeling buttons MDN reference
- The label and name for a button are set inside the element.
  - Button content/labeling can include markup
  - If creating a button using the <input/> tag, the label is set with the value attribute

  <button type="submit">Submit</button>
  <button type="button">Cancel</button>

  <input type="submit" value="Submit">
  <input type="button" value="Cancel">

Learning Resources

Alt Text

WCAG References
- WCAG: Understanding SC 1.1 Text Alternatives Guideline
- WCAG SC1.1.1 Non-text Content (Level A)
WebAIM - techniques - alt text
W3C Image Tutorials

Accessible Names

2) Use Semantic HTML

What does it mean to write Semantic HTML?

Using Semantic HTML5 to write the markup of the document content provides meaning and structure. This meaningful structure makes it easier for the browser and AT to digest the content and make it perceivable to the users.

A few Basics on Semantic HTML

There are over 100 HTML elements; a couple don't offer any semantic value but often need to be used more in defining a page structure.

<div />
<span />

Using elements that don't offer semantic value have their place, but contribute very little when defining the hierarchy of the page. Defining a hierarchy is helpful for users of AT for perception, operation, and understanding. Many users of AT use this hierarchy to navigate through a page.

<!-- Using div and span by themselves offer 
a poor user experience for AT users -->

<div>
  <span>LOGO</span>
  <div>
    <a>home</a><a>about</a><a>contact</a>
  </div>
</div>
<div>
  <span>Some Important Words</span>
  <div>
    <span>content</span>
    <span>content</span>
    <span>content</span>
    <span>content</span>
  </div>
  <div>
    <span>content</span>
    <span>content</span>
    <span>content</span>
    <span>content</span>
  </div>
</div>
<div>
  <span>copyright</span>
</div>

While the visual presentation can give a little perspective to the code above, it only does a little for how an AT can interpret and provide context. The only elements with semantic value are the anchor(<a/>) tags, which let the AT know that those elements are links and the user knows that they'll be navigated somewhere by interacting with them. But if we refactor the code above with accessibility in mind, we'll see something of much greater value to AT users.

<!-- 
Using semantics provides a better user experience for AT users.
 -->
<header>
  <span>LOGO</span> 
<!-- 
I prefer not to have the Logo be the h1 element as it is a redundant item and doesn't reflect page content. 
-->
  <nav>
    <ul>
      <li><a>home</a></li>
      <li><a>about</a></li>
      <li><a>contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Some Important Words Defining the Page Content</h1> 
<!-- 
I prefer having my h1 reflect the content of the page,
the content of the h1 should also be similar to the unique content of 
the page title element 
-->
  <section>
    <h2>Some Important Words defining the Section Content</h2>
    <h3>subheader content</h3>
    <p>content</p>
  </section>
  <section>
    <h2>Some Important Words defining the Section Content</h2>
    <h3>subheader content</h3>
    <p>content</p>
    <article>
      <header>
        <h4>Some Important Words defining the Article Content</h4>
      </header>
      <!--
        If the `<header>` element is used inside `<article>`and `<section>` elements are not associated 
with those elements.
        It does not get the WAI-ARIA banner role 
and needs certain behavior in assistive technologies.
      -->
      <p>content</p>
      <h4>subheader content</h4>
      <p>content</p>
    </article>
  </div>
</section>
<footer>
  <p>copyright</p>
</footer>

By using semantics in the code example above, the hierarchy is defined using the heading(h) tags, and the structure of the page is determined using the landmark tags <header />,<main />,<footer />, and <nav />. The landmarks' structures are defined by the grouping or region tags <section /> and <article />. We can now understand the architecture because we provide meaning and structure using these semantic HTML5 elements.

Headings and Hierarchy

tags, ranging from 1 to 6. They represent the six levels of section headings.

<h1> is the highest ranking in the hierarchy.
- It is the most important of the levels
- Best practice: there should only be one <h1> per page.
- Its content should describe the page content at the highest level
- The heading tags after are nested in order
<h6> is the lowest in the hierarchy

Do

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Don't

<h1>Heading 1</h1>
<h4>Heading 4</h4>
<h6>Heading 6</h6>

Nesting

In the list below, we can see an example of how to use the heading(h) tags for defining hierarchy within the page.

h1 Main Topic
- h2 h2.1 supporting main topic
- h2 h2.2 supporting main topic
- h2 h2.3 supporting main topic
  - h3 h3.1 supporting h2.3 > main
  - h3 h3.2 supporting h2.3 > main
  - h3 h3.3 supporting h2.3 > main
- h2 h2.4 supporting main topic
  - h3 h3.4 supporting h2.4 > main
    - h4 h4.1 supporting h3.4 > h2.4 > main
  - h3 h3.5 supporting h2.4 > main
    - h4 h4.2 supporting h3.5 > h2.4 > main
    - h4 h4.3 supporting h3.5 > h2.4 > main
  - h3 h3.5 supporting h2.4 > main
  - h3 h3.7 supporting h2.4 > main

Semantics Elements for Structure

<header />

The top-level <header> is considered a landmark role, and the implicit ARIA banner role
It has different semantics depending on where it is nested
- When a <header> is nested in <main>, <article>, or <section>, it just identifies it as the header for that section and isn't a landmark.

<nav>

Ids content as navigation
If nested in the top level <header>, the <nav> is considered the main navigation
If it were nested in an <article> or <section>, it would be internal navigation for that section only
Considered a landmark

<main>

Ids the main content of the document
There is only one
Considered a landmark

<section>

Nested in the <main>
Sections should have a heading, with very few exceptions
Encompasses generic standalone sections of a document
- When there is no more specific semantic element to use
Articles can be nested within Sections
Implicit role of region

<article>

Nested in the <main>
Represents a complete or self-contained module of content
- Independently reusable
Implicit role of article

<aside>

For content that is indirectly or tangentially related to the document's main content
The <aside> is also a landmark, with the implicit role of complementary

<footer>

The main <footer> is considered a landmark role and the implicit ARIA contentinfo role
It has no specific role if it is nested and is not a landmark if not the main <footer>, the accessibility tree would call it a FooterAsNonLAndMark

Full List of Semantic elements in HTML:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Check them out on MDN

The Role Attribute

When building out your sites or apps, it is best practice to use Semantic HTML elements before using ARIA roles. The role attribute describes an element's role in the document's context. The role attribute is global, so every element accepts this attribute. The role is used primarily by AT, but can be used to cast elements into different roles(this is not recommended). There are six categories of ARIA roles:

Document structure roles
Widget roles
Landmark roles
Live region roles
Window roles
Abstract roles

For more on ARIA Roles checkout the W3C documentation on the Role Models

Learning Resources

3) Make your Website/App Responsive

Responsive design is good practice for multi-device experiences but can also yield good accessibility results. Some WCAG success criteria can be met by keeping responsive design in mind.

1.4.4 Resize text
- Introduced in WCAG 2.0
- The page is readable and functional when the page is zoomed to 200%.
1.4.10 Reflow
- Introduced in WCAG 2.1
- No loss of content or functionality occurs, and horizontal scrolling is avoided when content is presented at a width of 320 pixels.
  - This requires responsive design for most websites.
  - This is best tested by setting the browser window to 1280 pixels wide and then zooming the page content to 400%.
1.4.12 Text Spacing
- Introduced in WCAG 2.1
- No loss of content or functionality occurs when the user adapts paragraph spacing to 2 times the font size, text line height/spacing to 1.5 times the font size, word spacing to .16 times the font size, and letter spacing to .12 times the font size.

Tips for Responsive Design

Use the viewport meta tag
- match the screen's width in device-independent pixels by setting content=" width=device-width
- Establish a 1:1 relationship between CSS pixels and device-independent pixels by setting initial-scale=1.0
- Instructs the browser to fit your content to the screen size

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Don't disable zooming
- avoid these settings:maximum-scale=1 or user-scaleable=no
Use relative units for text
- This will enable the whole site to reflow as the user zooms, creating the reading experience they need to use your site.
- em
  - This unit of measure adjusts relative to the parent element
- rem
  - This unit of measure adjusts relative to the root element
Keep DOM order and Visual order connected
- Don't use CSS to reorder the HTML elements. It can confuse tab order as well as folks that use screen readers in combination with the visual presentation.
- Use CSS Grid and Flex-box appropriately
  - Utilize the flexible nature of these layout methods.

Learning Resources

Those are just three easy ways to start incorporating accessibility into your developing practice.

Give this post a reaction if you found it helpful, and follow me on Twitter and Dev.to to keep up with new posts!

How to serve your Datastream directly to your PDF Viewer

⚡️Ren⚡️ — Mon, 12 Sep 2022 18:23:58 +0000

I recently learned about Stream data and how to feed it directly into the PDF viewer I am using. The solution was fairly easy, but it took me a bit to find it and understand what was happening.

A little context

On this project I am using NextJS, MinIO (To access my s3 Buckets), and React PDF Viewer. I'm using NextJS at it's base setup for the api, so that means I'm using the inherent api directory in pages. I am very fond of the auto-magic routing system they've got going on in the background there. Now you are probably wondering why I need to feed the data directly from the API. The S3 Bucket for this project was configured to only be available within our K8s(Kubernetes) cluster, this means I could not use a pre-signed URL to fetch the document from the browser because the browser is outside or the cluster. Thus I needed a way to retrieve the Data from within the cluster. This lead to serving up the data directly from the API.

Sample NextJS Structure

├─ app
    ├── components
    ├── lib <-- custom
    │   ├── **/*.ts
    │   ├── minio.ts
    └── pages
        ├── api
        │   ├──[documentId].ts
        └── index.tsx

MinIO

I am working with the MinIO JavaScript Client SDK, so I can make my MinIO connections in the API.

I first set up a MinIo config file that has my client definition where I feed in environment variables to connect to my AWS S3 bucket and the methods I need for my app.

import * as Minio from 'minio';
import config from 'lib/config';
import { Readable } from 'stream';
import { NextApiResponse } from 'next';

const { BUCKET_NAME, BUCKET_HOST, BUCKET_PORT, AWS_ACCESSKEY_ID, AWS_SECRET_ACCESS_KEY } = config;

export default function minio(): Minio.Client {
    global.minio =
        global.minio ||
        new Minio.Client({
            endPoint: BUCKET_HOST,
            port: Number(BUCKET_PORT),
            useSSL: false, 
            accessKey: AWS_ACCESSKEY_ID,
            secretKey: AWS_SECRET_ACCESS_KEY,
        });
    return global.minio;
}

// Checks if Bucket exists, create bucket if it does not
export const upsertMinioBucket = async (minioClient: Minio.Client) => {
    const bucketExists = await minioClient.bucketExists(BUCKET_NAME);
    if (bucketExists) {
        return true;
    } else {
        await minioClient.makeBucket(BUCKET_NAME, 'us-east-1');
        return await minioClient.bucketExists(BUCKET_NAME);
    }
};

// Upload file to bucket and returns with object => (err| objInfo)
// Uploads contents from a file to objectName.
// fPutObject(bucketName, objectName, filePath, metaData[, callback])
export const upsertMinioFile = async (minioClient: Minio.Client, filePath: string, fileName: string) => {
    if (filePath) {
        const objectMade = await minioClient.fPutObject(BUCKET_NAME, fileName, filePath, {});
        return objectMade;
    } 
};

export const loadMinioStream = async (minioClient: Minio.Client, fileName: string | string[]) => {
    const response = await minioClient.getObject(BUCKET_NAME, fileName).then((err, stream) => (!err ? stream : err));

    return response;
};

export const streamToResponse = async (stream: Readable, res: NextApiResponse): Promise<any> => {
    return new Promise<any>(() => {
        stream.on('data', function (chunk) {
            res.write(chunk);
        });
        stream.on('end', () => {
            res.end();
        });
        stream.on('error', (err) => res.end(err));
    });
};

`getObject`+ `streamToResponse` = ❤️

In the API route [documentId].ts, I use the MinIO Object operation getObject and custom method for for running through the stream data to write the stream directly to the response.

import { NextApiRequest, NextApiResponse } from 'next';
import { runMiddleware } from 'lib/middleware';
import CORS from 'cors';
import minio, { loadMinioStream, streamToResponse, upsertMinioBucket } from 'lib/minio';
const client = minio();
// Initializing the cors middleware
const cors = runMiddleware(
    CORS({
        methods: ['GET', 'POST', 'OPTIONS'],
    })
);

export default async function handler(_req: NextApiRequest, res: NextApiResponse) {
    await cors(_req, res);
    const { documentId = '1' } = _req.query;
    const resp = await getDocumentStream(documentId, res);
    res.json(resp);
}

export const getDocumentStream = async (documentId: string | string[], res: NextApiResponse) => {
    try {
        const exists = process.env.NODE_ENV !== 'test' ? await upsertMinioBucket(client) : false;
        let resolve: any = null;
        if (exists && process.env.NODE_ENV !== 'test') {
            const stream = await loadMinioStream(client, documentId);
            resolve = await streamToResponse(stream, res);
        }
        return {
            statusCode: 200,
            data: resolve,
        };
    } catch (e) {
        return {
            statusCode: 500,
            data: {
                success: false,
                error: `${e}`,
            },
        };
    }
};

Feeding into React PDF Viewer

So then to get my file to show up into the PDF viewer, I feed it my API route as the fileURL, and Blam it's there.

export default function PDFViewer({ document}){
    ...
    const [filePath, setFilePath] = useState('');
    const workerUrl = 'https://unpkg.com/pdfjs-dist@2.14.305/legacy/build/pdf.worker.js';


    useEffect(() => {
            if (document) {
                let path = `//${window.location.hostname}${port}/api/documents/pdf/${document?.id}`;
                const port = window.location.port == '80' ? '' : ':' + window.location.port;
                setFilePath(path);
            }
    }, [document]);

}

    return(
        <Worker workerUrl={workerUrl}>
            <Viewer fileUrl={filePath}  />
        </Worker>
    )

Note: This particular solution is not specific to a PDF, it could be used in cases of images, binary, etc.

If you have made it to this point, I would like to say congrats! You made it to the end! As a reward I present to you this gif!

Getting to Know the Basics of Nuxt Automatic Routing

⚡️Ren⚡️ — Thu, 20 Jan 2022 17:24:46 +0000

To really understand how cool Nuxt's automatic routing is, you need to understand how to set up a router in a traditional Vue project. But why do you need to know that? It is because Nuxt uses vue-router. Now the fastest way to set up a router in a vue project is to use the Vue CLI tool, so you can have template for setting up your router.

Setting up a Vue app router

The file tree for the Vue router set up:

src/
--| assets/
--| components/
--| router/
-----| index.js
--| views/
-----| Home.vue
-----| About.vue
--| App.vue
--| main.js

Using the CLI tools helps setting up the router much faster by providing a template to follow, however whenever you need to add pages you need to manually add routes to the router configurations you see below.

`src/router/index.js` 1

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import("../views/About.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

`src/App.vue` 2

When adding navigation to the router you use a <router-link/> and use the <router-view/> for rending the component of the mapped path.

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

`src/main.js` 3

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

Alright you probably thinking, with the CLI tool setting up a router doesn't seem tedious at all. Well that is true, it's just a little extra work to have to add to or adjust the route mapping and App template. Nuxt, which is based in Vue, has automatic routing, as in it Auto-magically adds to the route mapping and templates. So essentially all you need to do to make routing work is put .vue files in the pages directory and blam routing.

The file tree for Nuxt automatic routing:

Basic Routes

components/
layouts/
pages/
--| index.vue
--| About.vue

In vue-router there's the <router-link/> to navigate to the app's internal pages within the router, in Nuxt the component is <NuxtLink/>, both have to="#" attribute, which acts like the href of the anchor tag <a href="#" />. That being said the <NuxtLink/> is only used for Internal navigation, any external navigation should use anchor tags.

So in terms of how the basic routes are generated, let's reference the Nuxt automatic routing file tree above, and explore the router object that would be created.

const router = {
  routes: [
    {
      name: "index",
      path: "/",
      component: "pages/index.vue",
    },
    {
      name: "About",
      path: "/about",
      component: "pages/About.vue",
    },
  ],
};

When creating an index.vue file within the top level of the pages directory, this automatically will have the base path / assigned to it. When the files are named it will create a path associated with the what you've named the .vue file. Additionally you can create Dynamic routes and Nesting routes.

Dynamic Routes

components/
layouts/
pages/
--| index.vue
--| _slug/
-----| index.vue
--| users/
-----| _id.vue

Dynamic routes are routes where the name of the route includes unique identifiers and/or are unknown. A good example of this is if you are going to specific user's profile page, like: someSite.com/userID. In Nuxt we create dynamic link by adding an underscore to the beginning of the name of the route, like we see in the file tree above with _slug.vue and users/_id.vue. You can have both dynamic directories and dynamic routes.

Nested Routes

components/
layouts/
pages/
--| index.vue
--| users/
-----| _id.vue
--| users.vue

Nested routes are created when a directory and a .vue file are at the same level and named the same, you can see an example of this above in the file tree for nested routes.

Creating these more complex file trees for the routing system still creates a router object similar to the basic routes, but a little different, specifically in terms of the nested routes. Below is an example holding both dynamic routes and nested.

const router = {
  routes: [
    {
      name: "index",
      path: "/",
      component: "pages/index.vue",
    },
    {
      name: "About",
      path: "/about",
      component: "pages/About.vue",
    },
    {
      // this is the basic nested route
      path: "/blog",
      component: "pages/blog.vue",
      children: [
        {
          name: ":id",
          path: "/blog/:id",
          component: "pages/blog/_id.vue",
        },
      ],
    },
    {
      // this is the basic dynamic route
      name: "User",
      path: "/user/:id",
      component: "pages/user/_id.vue",
    },
  ],
};

When creating your routes, you can locally access the route params at both the page and component level. You can gain access through referencing this.$route.params.{parameterName}.

And there are the basics surrounding the coolness of the Nuxt Automatic Routing system. If you wanted to learn more about Nuxt router you can checkout how to extend the Nuxt router, reading about it in the Nuxt Docs under the File System Routing Feature: Extending the Router!

Thanks for reading!

Resources

Getting to Know Web Vitals!

⚡️Ren⚡️ — Tue, 11 Jan 2022 19:02:27 +0000

What are Web Vitals?

In a recent project, my NextJS with Material UI deployment has been loading the initial render slow. So I am learning the debugging process behind that performance lag, which has me getting to know the Web Vitals a bit better. And I thought I'd share what I've learned thus far with you.

I can gain access to the Web Vitals in a few different places, but currently I just want the value output so I'm using the reportWebVitals function that is inherit in NextJS and logging them out for quick access, for more detail and suggestions I can run a Lighthouse report.

Web Vitals

In the simplest terms, Web vitals are useful metrics that help in the examination of the user experience of a webpage. They are an initiative from Google, that hope to simplify and help focus evaluations to what matters most, these culminate into the Core Web Values.

So what are the Core Web Values?

A subset of web vitals that can be applied to all web pages, should be examined and weight by site owners, and have a thread to all the Google tools. The subsets, each has a reference to a specific type of user experience. These references provide measurements and can reflect critical user-centric outcomes.

The Core Web Vitals:

LCP: Largest Contentful Paint
FID: First Input Delay
CLS: Cumulative Layout Shift

The metrics listed above are used in measuring important performance elements of user experience, when interacting with a webpage. If you were running a Lighthouse report, the thresholds that are reflected for each metric helps define the performance score for the webpage you're reviewing. Below the Core Web Vitals are expanded upon, along with other metrics that are available through the reportWebVitals, which include Web Vitals and NextJS specific metrics.

The Web Vitals metrics I have access to through the `reportWebVitals` method:

TTFB: Time To First Byte
- This metric refers to the time it takes to receive the first byte of information after the browser request it.
FCP: First Contentful Paint
- The metric reflect the time to the first bit of content rendered to the DOM.
- This is where a user can start consuming page content.
LCP: Largest Contentful Paint
- This metrics measures loading performance, for "Good UX", loading should take between 0 and 2.5 seconds.
- Using the reportWebVitals, the value is represented in milliseconds
FID: First Input Delay
- A metric for measuring Load responsiveness, when this number is low the site is typically easier to use and navigate.
- The perception of the end user's experience while interacting with the web page.
- It help measure the time from when the user first interacts with the page to the time when the browser processes the interaction.
- For "Good UX", that time should fall between 0 and 100 milliseconds
CLS: Cumulative Layout Shift
- A metric for measuring visual stability.
- This measures the largest burst of layout shifts that are unexpected through out the life of a page.

Additional NextJS Specific Metrics:

Next.js-hydration
- This measures the length of time from start to finish, it takes a page to Hydrate in milliseconds.
- What is Hydration?
- The process of attaching react listeners to HTML-DOM nodes.
- Rehydration is basically the same, but in reference to Server Side Rendered(SSR) rendered HTML. The listeners still need to be attached.
Next.js-route-change-to-render
- How long it takes a page to start rendering after a route change.
- It is measured in Milliseconds.
Next.js-render
- How long it takes a page to finish rendering after a route change.
- It is measured in Milliseconds.

Thoughts on improving the Core Web Values

LCP: Largest Contentful Paint
- Remove unnecessary 3rd part scripts
- Set up Lazy or Dynamic loading, Loading components only when they are needed
- Remove large page elements
- Minify your CSS
- Upgrade your hosting
FID: First Input Delay
- Minimize JavaScript, page interactions are slowed down if the page is loading javascript.
- Remove any unnecessary 3rd party scripts
- Use a browser caching
CLS: Cumulative Layout Shift
- Set size attributes for any medias types
- Ads should have reserved space, placeholders
- Adding new UI elements should happen in a way that they don't unexpectedly push content down or over.
- Avoid content shifting around the page.
- Dynamically/ lazy load components

I'm in the process of testing out different solutions, for my larger numbers. I'm looking at rendering a static page initially, fingers crossed it's the first solution (we all know it never is)! It's been a joy learning as new development opportunities that have come with bigger responsibilities. I hope my notes help on your learning path as well.

Resources

5 Free Awesome Resources to Start Learning Accessibility!

⚡️Ren⚡️ — Sat, 18 Sep 2021 15:43:06 +0000

If it is your goal to start learning about accessibility, any one of these resources could help you on your journey! They are beginner level and most importantly free! Learning accessibility is not only beneficial for you, but it also benefits your friends, your place of business, and society! It was made abundantly clear how much accessibility is needed in technology during the quarantine, when many people were unable to have physical access to resources without using the web. In terms of social inclusion accessibility also support people in rural areas, people in developing countries, and older people. All-in-all getting a start on learning accessibility is helpful for everyone.

W3C Web Accessibility Initiative's Introduction to Web Accessibility

"When websites and web tools are properly designed and coded, people with disabilities can use them."

Key points:

Strong introduction to what accessibility is including examples of different types of disabilities.
Helpful resources for going further into accessibility throughout.
Short videos to help with explanations.

A11y 101

"The goal is to make it as easy as possible for people who use assistive technology like screen reader software while also pointing out how things will change the web experience."

Key points:

Use of scenarios in explaining accessibility and bias toward disabilities.
Writing style is conversational and easy to understand.
Covers base topics in Design and Development to start working toward creating accessible content and code.

Udacity:Web Accessibility by Google

"In this course you’ll get hands-on experience making web applications accessible."

Key points:

This course is lesson based.
Video based some times featuring additional text based information.
Gives reference and resources on specific topics that videos are talking to.
Covers a base in Development needs, but is good for anyone looking to learn about accessibility.

Coursera: An Introduction to Accessibility and Inclusive Design

"This course introduces some of the fundamental principles of accessibility and prepares learners for further study in accessibility and inclusive design."

Key points:

Enrollment is similar to auditing a class.
Breaks course up into a 4 week learning schedule.
Video based, with reading and practices exercises (quizzes).
Course covers a base understanding of disabilities and what accessibility is, legal parameters, POUR and WCAG 2.0, and material that need to be considered for accessibility.

Course is offered by University of Illinois at Urbana-Champaign.

Coursera: Introduction to Accessible Web Development, a guided project

A guided project, where you will learn the basics of accessible web development.

Key points:

Project based for learning accessible web development.
Use of an online IDE, featuring a side-by-side video tutorial.
Listed as intermediate
Topics covered:
- Assistive Technology
- Semantic HTML
- Focus / Tab Index
- Basic ARIA usage

Is offered by coursera project network.

How Cool is Nuxt?

⚡️Ren⚡️ — Tue, 24 Aug 2021 18:38:56 +0000

I recently updated my personal resume website, and I thought it would be a good opportunity to refresh on Vue and learn NuxtJs. So, I thought I'd give a run through of my experience.

The general setup of Nuxt is pretty self explanatory with in its stepper. They've got setup docs for yarn, npx, and npm. I went through the npx choose your own adventure setup.

Choose Your own adventure: `npx` style

npx create-nuxt-app <project-name>

As you journey through the npx create-nuxt-app route, you will be asked many questions.

What Package manager?
- yarn
- npm
What programming language?
- JavaScript
- TypeScript
Do you want a UI Framework?
- Ant Design Vue
- BalmUI
- Bootstrap
- Buefy
- Chakra UI
- Element
- Framevuerk
- Oruga
- Tachyons
- Tailwind CSS
- Windi CSS
- Vant
- View UI
- Vuetify
Nuxt.js modules:
- Axios - Promise based HTTP client
- Progressive Web App (PWA)
- Content - Git-based headless CMS
Linting tools:
- ESLint
- Prettier
- Lint staged files
- StyleLint
- Commitlint
Testing framework:
- None
- Jest
- AVA
- WebdriverIO
- Nightwatch
Rendering mode
- Universal (SSR / Static)
- SPA
Deployment target
- Server (Node.js hosting)
- Static (Static/JAMStack hosting)
Development tools
- jsconfig.json
- Semantic PR
- Dependabot (for GitHub only)
Continuous Integration
- GitHub Actions
- Travis CI
- CircleCI

My route:

npm
JavaScript
No UI framework
Axios
ESLint, Prettier, Stylelint, Lint staged files
Like a horrible person I didn't add a testing library
SPA
Static (I deploy to github pages)
jsConfig, Dependabot
No CI

I wanted a really clean slate to work with, but you can obviously manipulate or add in some of these options later if you find you need them.

Once you are all built, you can head into your directory!

cd <project-name>
npm run dev

Me though, I chose a more dangerous and tedious route:

My previous code base was a create-react-app. I created a new branch and carefully removed that information making sure not to delete items that would remove my connection to git then copied over my new Nuxt project into the directory. Once everything was correctly manipulated then I could npm run dev.
There was probably an easier way to do this, but I sometimes just impulsively start things without thinking, when trying to learn new things... oops

Up until this point, I had been using react based frameworks. Most recently, I had been using NextJS, which has a lot in common functionally as NuxtJS. Both have an opinionated routing system, meaning it's built in, which made setup go much faster. It was kind of auto-magical! But because of my experience with Next it made working in Nuxt a bit easier.

Project Setup, Time to build

After getting my project setup and my new branch pushed to Github, I felt it was safe to start adding and adjusting content as I saw fit.
...

Cool things about Nuxt

Nuxt has a present directory structure that helps in the dynamic and auto importing.

My Fave Things

Components
- The auto imports is available v2.13+
- Easy to use Lazy loading, by just prefixing Lazy to the front of you component.
- <LazyTheFooter />
- Using the lazy prefix you can also dynamically import a component when an event is triggered.
Layouts
- This may be more in line with liking the templating feature in Vue, but I dig the reusable layouts. On my personal resume site I really only extended the default layout, but the fact that I can create different layouts for specific templates is just cool.
Pages
- I mentioned before that Nuxt like Next has an opinionated routing system. The router is built-in, cool right? Well not half as cool as the router configurations being automatically created for me just by adding my files to the Pages Directory!!!!

I'm using Dependabot, for the first time, I'm like it so far also. It's kind of like how My cats tell me if they need fed, but plants don't... as in the Dependabot tells me about when my Dependencies need updating and if I relied on my own watchful eyes, the dependencies would probably die like any plants I've tried to keep.

Coolest thing about Nuxt, It has great Documentation! It's pretty understandable and followable.

The things I needed to add or change

I needed to update a few things. I needed to add a .stylelintignore, to ignore the .nuxt directory, it was not thrilled with how some of the css was being built out and was refusing to commit because of it. I could have updated the rules to include it, but I actually like the rule it was breaking, in the end I guess that is a linting preference. That being said, I'm thrilled that they included stylelint in the Nuxt template creation. It's my go to for style linting now-a-days.

The site is built! Time to Deploy!

Well I mean the site has content. That means it's time to generate the static build and publish.

Generate for static.

The first step in deploying is generating the build the static web app. And you do that by running the generate script:

npm run generate

This creates a dist directory. It contains everything I needed to deploy to my Github pages site.

After running this script you will need to commit your changes at the very least, because if you try to deploy with the changes not committed, you will receive a error in deployment.

Deploy to `gh-pages`

The deploying documentation is stellar! It's also not limited to GitHub and that's pretty darn cool!
But for GitHub you want use push-dir

npm install push-dir --save-dev

Then you add the deploy script:

"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},

Then like magic my site would be deployed and be live pretty quickly!

Last Impressions

Nuxt is cool and handy for getting a quick start! I would recommend this more for refreshing on VueJS rather than trying to learn both how to work in Nuxt and writing VueJS templates.

5 tools for Designing, Developing, and Testing Accessibility

⚡️Ren⚡️ — Tue, 20 Jul 2021 19:58:47 +0000

No matter what you are working on, considering accessibility is definitely a best practice. Below is a list of five tools to help get you started with accessibility in your projects.

Stark

This tool provides a wide array of color and contrast checking abilities along with simulators to test you design again visual disabilities.
Stark has plugins to go in various design tools, but also in chrome.

Deque's Dev tools AXE extension

There are extensions/add-ons for Chrome, Firefox, and Edge.
Additionally, Lighthouse accessibility checks are powered by AXE Core as well.

WAVE

WAVE is powered by WebAim and functions similarly to Deque's AXE extensions.
An interesting element of WAVE's functionality is that it give an accessibility markup over the entire site.

ANDI - Accessibility Testing Tool

ANDI (Accessible Name & Description Inspector) is a free accessibility testing tool.
- ANDI allows you to inspect your page on the basis of accessible names which come in handy especially if you're working with interactive elements.

Linting

VS Code AXE Accessibility Linter

Checks React (.js, .jsx, .ts, .tsx), Vue (.vue), HTML (.html, .htm), and Markdown (.md, .markdown) files so you can avoid common accessibility defects. Angular (HTML) is not currently supported.

ESlint Accessibility Plugins

There several different plugin depending on what framework/ tech stack you're working with.
- I work a lot in React so my team frequently uses this plugin:
  - eslint-plugin-jsx-a11y

How to Integrate axe into your Next.js project

⚡️Ren⚡️ — Thu, 20 May 2021 17:33:23 +0000

Integrating the axe wrapper in your Next.js project

Why do I even need this?

Because you're a nice person, who wants to make sure everyone is accounted for when designing and developing your projects. Also, it is plausible you may be legally obligated, depending on funding or location, you may need to comply with web accessibility standards such as WCAG (Web Content Accessibility Guidelines). But really, there are millions of people that are affected by disabilities, so why not consider them as potential users of your software, and just start making your software accessible from the beginning.

Install axe-core/react

npm i --save-dev @axe-core/react

You may also need to install react-dom if it is not in your dependencies

Once your dependencies are installed, you'll need to place the wrapper within one of your Next files. It works best if you choose a file that is a wrapper itself, like the pages/_app file, that way the axe wrapper will read the entire app.

Determine if you are running on the Server

Now that you have chosen the page you want to set up your axe-core wrapper, you need to write a method for checking whether you are rendering via server-side or client-side. Below is an example of how to do this.

const isServerSideRendered = () => {
  return typeof window === 'undefined'
}

You'll want to place this method outside of the React functional component or class setup. I put mine between my imports and the react component declaration.

What do you mean I need to import `React`?

Notably, we're using Next.js so we don't have to import React, but to set up the axe wrapper we'll need to import it into whichever file we've selected to place the wrapper.

Alright, we've imported React and set up our method for checking how the app is rendering. Now we can finally set up our axe wrapper.

Setting up the Axe wrapper

Ok, first we want to make sure this is not annoying to anyone but us, so you'll want the wrapper to conditionally render only when you're in your development environment. This is where we'll be using our isServerSideRendered method in conjunction with an environment check.

if (process.env.NODE_ENV !== 'production' && !isServerSideRendered()) {
    ...
}

Now comes the tricky part, setting up the wrapper. For this, I'm using dynamic imports so that the modules will only load within the development environment. We don't need unused modules loitering in production.

// Imports
//
// import React from 'react';
//

const isServerSideRendered = () => {
  return typeof window === 'undefined'
}

if (process.env.NODE_ENV !== 'production' && !isServerSideRendered()) {

    // we import react-dom and @axe-core/react dynamically
    // so that we'll receive warning in our console about
    // inaccessible code.

    import('react-dom').then((ReactDOM) => {
        import('@axe-core/react').then((axe) => {
            axe.default(React, ReactDOM, 1000, {})
        })
    })
}

// React component Declaration
// const App =()=>{return<></>}
// export default App;

You can find an example here in the next cli project that Mile Two is putting together for open source consumption.

It will give you results that will give the severity of the issue, a code snippet of the where the issue is found, and link to an explanation in detail as to why the issue is inaccessible.

And that is how you add the axe wrapper into your Next.js project! Thank you for reading!

If you are using VS Code, and want to make sure you are writing accessible code, you can install the axe Accessibility Linter.

Taking the Axe to inaccessibility

⚡️Ren⚡️ — Fri, 11 Dec 2020 17:50:13 +0000

Let's talk accessibility!

When you are developing apps for everyone it's great to have some cool tools in your belt. One of these tools is React Axe as brought you from Deque.

There are of couple ways you can use Axe. The first being an extension for dev tools Extensions.

google's Developer's Tools extension

Firefox Developer's Tools Add-on

To access Axe through the extension simply open your developer's tools and click the axe tab, then you can inspect your page.

Another way is to wrap your app in the Axe wrapper, and you do this by first installing @axe-core/react:

npm i axe-core/react --save-dev

or whatever you use to install

At this point, you head to the file your ReactDom.render set up, this is usually the index.{js,jsx,tsx}.

Once you've made it there it is a fairly straightforward setup to get it working.

First, you'll want to set it up so that the wrapper does not render in production, that would just be awkward like leaving random console.logs everywhere that say 'hi!'.

if (process.env.NODE_ENV !== 'production') {
// Not For Production
ReactDOM.render(app, document.getElementById('root'));
} else{
// For Production
ReactDOM.render(app, document.getElementById('root'));
}

Now, that we have that set up we can conditionally import our module.

if (process.env.NODE_ENV !== 'production') {
// Not For Production
 import('@axe-core/react').then(axe => {
        axe.default(React, ReactDOM, 1000);
        ReactDOM.render(app, document.getElementById('root'));
    });
} else{
// For Production
ReactDOM.render(app, document.getElementById('root'));
}

We can start up our project and open up our developer's tools and go to the console.

These Axe wrapper outputs should help in concurrent development, as well as open up conversions with your design team to discuss color contrast issues or other conversations about accessibility.

What The 'F' is Section 508: The government's response to A11y!

⚡️Ren⚡️ — Mon, 07 Dec 2020 21:26:04 +0000

Hello! And welcome to this super basic intro to Section 508 of The Rehabilitation Act.

So, What is Section 508?

First, as mentioned earlier Section 508 is a part of The Rehabilitation Act of 1973. I'm sure your thinking, 1973!!!! what that's crazy. But not really, because like most laws The Rehabilitation Act has been amended throughout the years. This section, in particular, becomes of interest in 1998. Changes were introduced that give us the updated versions of Sections 504 and 508.

The act itself prohibits discrimination on the basis of disability in programs conducted by Federal agencies, in programs receiving Federal financial assistance, in Federal employment, and in the employment practices of Federal contractors.

The standards for determining employment discrimination under the Rehabilitation Act are the same as those used in title I of the Americans with Disabilities Act.

Section 508 of the act, as now amended, provides for us a blueprint of just what is intended in Section 504.

Thus, Section 504 provides the context of the law, and Section 508 provides the direction.

For Context: Section 504 of the Rehabilitation Act of 1973

504 is a Civil Rights Law
The first legislative act to provide protection to those who have disabilities.

This applies to employers and organizations that receive federal financial assistance.

The message of this section is precise:

No otherwise qualified individual with a disability in the United States... shall, solely by reason of her or his disability, be excluded from participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving Federal financial assistance.

And Now: Section 508 of the Rehabilitation Act of 1973

The reauthorized Rehabilitation act of 1998 included amendments to section 508 of the act.

This section bars the Federal Government from procuring E&IT (electronic and Information Technology) goods and services that are not fully accessible to those with a disability status.

This includes Web Design and creation

The Architectural and Transportation Barriers compliance board was enlisted to create binding, enforceable standards.

The Board enlisted the help of various accessibility advocacy groups to create the Electronic and Information Technology Access Advisory Committee or ‘EITAAC’
- The committee helped create the first set of accessibility Standards and published them on December 21st, 2000.

Hi! I’m Section 508, I’m kind of a big deal...

Section 508 is extremely influential, Here are a few reasons:

It provides the first US Federal standard for the internet.
It provides compliance language that can be monitored from a distance.
State governments may be held accountable for compliance.
Business must comply with Section 508 when providing E&IT goods and services to the federal government.

Section 508 Enforcement & Evaluation of Conformance

Enforcement

The US Department of Justice of Civil Rights is charged with enforcing Section 508.
When Complaints arise members of the public, students and federal employees can:
- File an Administrative Complaint
- File a private lawsuit in federal court
- File a formal complaint through the US Department of Justice of Civil Rights

Evaluation of Conformance

The Attorney General is required to evaluate how well the government is conforming.
- They are required to give an updated report on both accessibility and the Federal E&IT to people with disabilities and the resolution of section 508 complaints filed against federal agencies
- The first report was given in August 2001, the subsequent reports would be given every 2 years after.

508 Requirements for federal departments and agencies.

Accessibility
- Development, procurement, maintenance, or use of E&IT
- Each federal Department & agency (including the Post office) must ensure that individuals with disabilities can use their technology.
  - Exceptions: An undue burden imposed on the department or agency...
- Alternative means effort:
- If in the case of undue burden, the department or agency will provide information or data in an alternative means of access
E&IT Standards
- In general
- No later than 18 months the Architectural and Transportation Barriers Compliance Board (referred to in this section as the `Access Board') after consulting with various related agencies and POCs
  - Discussion included consultation on relative research findings and conversion with organizations that represented those with disabilities
  - Defining the technical and functional criteria necessary to implement the requirements for this law
- Review and Amendment
- The access board will periodically review and amend if necessary.
Incorporation of Standards
- No later the 6 months after the publishing of the standards the Federal Acquisition Regulatory Council will revise the Federal Acquisition Regulation and subsequently each federal department/agency will revise Federal procurement policies and directive to incorporate the standards or if revised by the access board the revisions.
Acquisition Planning
- If the compliance is determined to impose an undue burden, the documentation will explain why there is an undue burden
Exemption for National security systems
- Section 508 won’t apply to national security systems.
Construction
- Equipment
- Equipment is only required to be present at the location where the public is granted access to E&IT.
- The Federal department or agency isn’t required to purchase equipment except for the location where the public is granted access to E&IT.
- Software & peripheral devices
- Accessibility related software or devices are not required to be supplied to workstations of those without disabilities
  - Technical assistance
  - The Admin of General Services will provide assistance concerning the requirements
  - Agency Evaluations
  - 6 months after enactment evaluations of the state of accessibility in comparison to the usability of tech by those without disabilities will occur, a report will be submitted to the Attorney General
  - Reports
  - Interim
    - 18 month after enactment
  - Biennial
    - 3 years after enactment followed by a report every 2 years thereafter.
- Corporation
- Each head of relative boards (this includes the Access Board) will provide information to the Attorney General to conduct evaluations
- Enforcement
- General
  - Complaints
  - 2 years after enactment complaints can be filed when an agency fails in the compliance
  - Application
  - Applies to E&IT procured not less than 2 years after enactment.
- Administrative Complaints
  - Complaints filed with the Federal agency or department alleged to be non-compliant.
- Civil Actions
  - Remedies, procedures, and rights that are set and explained in sections 505(a)(2) and 505 (b) will be the Remedies, procedures, and rights that are available to any individual with a disability filing a complaint under paragraph 1 of this section.
- Application to other federal laws
  - Section 508 will not be construed to limit any right, remedy, or procedure otherwise available under any provision of the federal law that provides greater and equal protection for the rights of individuals with disabilities

THE GUIDELINES

For Proper Legal speak, the Outline of the guidelines can be found: Text of the Standards and Guidelines: Section 508.

At the above site, the Access Board details the application and scoping requirements of section 508 of the Rehabilitation Act (as amended).

At the above site the Access Board details the application and scoping requirements of section 508 of the Rehabilitation Act (as amended).
- The guidelines apply to:
- The guidelines apply to:
- Application
- General Exceptions
- Access to Functionality
- Functional Performance Criteria
- Electronic Content
- Hardware
- Software

Checklists are always helpful!!

WebAIM: 508 Checklist
- As of January 2018 the guidelines were updated to reflect the WCAG 2.0 guidelines following AA level success criteria.
- While the above site is out of date, it still gives excellent reference to the law’s checklist prior to 2018.
HHS: Section 508 checklists
- Checklists are provided in CSV/Excel format for better reporting.
- The accessibility checklists provide the evaluation criteria that must be met to ensure content is accessible to all users
- Checklists are provided for software, web applications, web sites, and various documents (Word, PowerPoint, Excel, PDF)
- Content was last reviewed in July of 2020

Other Laws Related to Accessibility

USA:
- ADA: Americans with Disabilities Act
- CVAA:21st Century Communications and
- Video Accessibility Act
- ACAA: Air Carrier Act
- State Web Accessibility Laws
International:
- Canada:
- Web Standards for the Government of Canada
- AODA: Ontario: The Accessibility for
- Ontarians with Disabilities Act
- Quebec: Web accessibility standards
- EU: EN 301 549: "Accessibility requirements suitable for public procurement of ICT products and services in Europe"
- England: The Equality Act of 2010
- Brazilian Law for Inclusion of Persons with Disabilities
- Japan: The Act on the Elimination of
- Discrimination against Persons with Disabilities

Ok that was heavy.

Thank you for sticking around until this point, I put this together to help me learn about the A11y compliance law for work and wanted to share with all of you! See you next time.

How to switch from Sass-lint to Stylelint

⚡️Ren⚡️ — Wed, 04 Nov 2020 13:41:02 +0000

Moving from Sass-Lint to Stylelint

Why make the transition?

So frequently in the past, sass-lint was used as a linting staple, so why make the change from a tried and true linter to stylelint? Well for one, Sass-Lint is no longer being maintained, but also Stylint has a wider realm of support and contributions. stylelint has a wide variety of configs and plugins to extend, which allows you to match and go beyond the rules that are present in Sass-Lint. Not only that it also parses the syntaxes SCSS, Sass, Less, and SugarSS , while also extracting style from in-line HTML styles, markdown and CSS-in-JS objects/ template literals. So it's great to use with a variety of frontend frameworks.

What are the steps?

First, you'll want to install stylelint and any of the plug-ins and configs you plan on using. The plugins and configurations available to you are great in numbers, so you won't be left wanting. Links can be found within the stylelint repository on GitHub under a sub-directory called awesome-stylelint. For the transition, we use stylelint-config-recommended, stylelint-config-sass-guidelines, stylelint-config-standard, and stylelint-scss.

There are additional formaters within the list of plugins, but stylelint comes with inherent formatting functionality.

To Install stylelint and any plug-ins/additional configs:

npm i stylelint stylelint-config-recommended stylelint-config-sass-guidelines stylelint-config-standard stylelint-scss --save-dev

Setting up the rules

Once stylint is installed, you can start putting together your rc file. You would create it with the name of .stylelintrc.yml. The rc file is where you'll extend and apply your plugins and configuration modules you've installed, but also where you will define and manipulate the rules that are provided in those plugins and configurations. I like to compare my .sass-lint.yml to find comparable rules.

This is an example of a .stylelintrc.yml file :

defaultSeverity: warning
extends:
    - stylelint-config-standard
    - stylelint-config-recommended
    - stylelint-config-sass-guidelines
plugins:
    - stylelint-scss
rules:
# Line Spacing
rule-empty-line-before:
    - always-multi-line
    - ignore:
        - after-comment
        - first-nested
        - inside-block

# Disallows
selector-max-id: 2
comment-no-empty: true
declaration-block-no-duplicate-properties: true
block-no-empty:
    - true
    - ignore:
        - comments
no-descending-specificity:
    - true
    - ignore:
        - selectors-within-list
no-extra-semicolons: true
color-no-invalid-hex: true
number-no-trailing-zeros: true
length-zero-no-unit: true
scss/at-extend-no-missing-placeholder: null
selector-no-qualifying-type:
    - true
    - ignore:
        - attribute
        - class
        - id
property-no-unknown:
    - true
    - ignoreProperties:
        - 'box-orient'

# Nesting
max-nesting-depth:
    - 5
    - ignore: ['blockless-at-rules', 'pseudo-classes']  

# Name Formats
selector-class-pattern: ^[A-Z].*$
scss/at-mixin-pattern: ^[A-Z].*$  

# Style Guide
indentation: 4
color-named: 'never'
declaration-block-trailing-semicolon: always
unit-case: lower
color-hex-case: lower
number-leading-zero: always
unit-no-unknown:
    - true
    - ignoreUnits:
        - /^[-+][\d$(]/
font-family-no-duplicate-names: true
string-quotes: single
selector-max-compound-selectors: 6

# Inner Spacing
function-calc-no-unspaced-operator: true
declaration-block-semicolon-newline-after: always
block-opening-brace-space-before: always
block-opening-brace-newline-after: always
block-closing-brace-newline-after: always
declaration-bang-space-after: never
declaration-colon-space-after: always

# Final Items
scss/at-import-partial-extension-blacklist: [/css/]

These files are super flexible and not set in stone, they are made to be updated per a project's needs.

Adding the scripts

Stylelint uses npx to run inherently, so when you write your scripts in your package.json you need to add the npx in for it to work properly. Below are the base scripts for running the linter and formatting based on your rules.

"scripts": {
    ...
    "stylelint": "stylelint '**/*.scss'",
    "stylelint-fix": "stylelint '**/*.scss' --fix",
    ...
}

Ok the rules are set up you have your scripts, so running the scripts to make sure they work is key. Now, running the stylelint-fix will not fix everything magically. Likely, you will still need to go through and make some changes before your transition is complete.

At this point, you can add your npm run stylelint and npm run stylelint-fix to your lint and format script replacing whatever you had there for sass-lint.

Time to remove Sass-lint

Since we replaced the sass-lint scripts in the lint and format scripts we can uninstall sass-lint.

npm unistall sass-lint sass-lint-auto-fix

Now you can delete your sass-lint.yml file, after that is done I like to do a fresh install by running:
rm -rf node_modules/ package-lock.json
then
npm i

Get to fixing

From here you are free to run your lint and formats. Your new rule definitions will likely introduce new warnings for you. So you can run the formatter to see how far that gets you, but inevitably you will need to fix some

Resources

Stylelint
Sass Lint

Pour Explained: R is for Robust

⚡️Ren⚡️ — Fri, 09 Oct 2020 19:22:29 +0000

Principle 4 -- Robust

Content MUST be robust so that a variety of user agents and devices can interpret it. This includes assistive tech.

Again, a quick refresher on the levels:

A, AA, AAA
Many entities try to maintain a level AA compliance because it is achievable as well as meaningful. Maintaining just a level AA compliance is still falling short in being accessible and inclusive.
Every guideline success criterion is necessary to at least some users with disabilities, so don't ignore level AAA compliance.

Guidelines:

4.1 Compatible

Compatability must be at the forefront of planning so that current and future user agents will be compatible. This includes assistive tech.

Success Criteria:

4.1.1 Parsing

Level A

Following these standards:

Content must be implemented in markup languages
Elements must have complete start and end tags.
Element must be nested to their specifications
Elements don't include duplicated attributes
Id's assigned to elements must be unique
Exception:
- Only where specs allow

4.1.2 Name, Role, Value

Level A

For all UI components:

Name & Role programmatically determined
States, Properties, and Values that can be set by users can be programmatically set.
Changes allow for notifications to the user agents.

This particular success criterion is primarily for web authors, who build custom controls

4.1.3 Status Messages

Level AA

Content that is implemented by using markup languages, a status message, or messages can be programmatically determined through role or props such that they can be present to the user through assistive tech without receiving focus.

Oh... My... Glob! We've made it! We have covered the POUR Principles of the WCAG 2.0 & 2.1 Guidelines. That is so exciting! I'm hoping that this is just the beginning of your journey into exploring accessibility and wish you the best as you continue to study to make software and the web a better place for all.

Forem: ⚡️Ren⚡️

3 Ways to Start Incorporating Accessibility

1) Add Text Alternatives & programmatically determined names

Benefits

Text Alternative and Accessible Names in action

Ellen Terry as Lady Macbeth

Learning Resources

Alt Text

Accessible Names

2) Use Semantic HTML

What does it mean to write Semantic HTML?

A few Basics on Semantic HTML

Headings and Hierarchy

Do

Don't

Nesting

Semantics Elements for Structure

The Role Attribute

Learning Resources

3) Make your Website/App Responsive

Tips for Responsive Design

Learning Resources

How to serve your Datastream directly to your PDF Viewer

A little context

MinIO

getObject+ streamToResponse = ❤️

Feeding into React PDF Viewer

Getting to Know the Basics of Nuxt Automatic Routing

Setting up a Vue app router

src/router/index.js 1

src/App.vue 2

src/main.js 3

Basic Routes

Dynamic Routes

Nested Routes

Resources

Getting to Know Web Vitals!

What are Web Vitals?

Web Vitals

So what are the Core Web Values?

The Core Web Vitals:

The Web Vitals metrics I have access to through the reportWebVitals method:

Additional NextJS Specific Metrics:

Thoughts on improving the Core Web Values

Resources

5 Free Awesome Resources to Start Learning Accessibility!

W3C Web Accessibility Initiative's Introduction to Web Accessibility

Key points:

Key points:

Udacity:Web Accessibility by Google

Key points:

Coursera: An Introduction to Accessibility and Inclusive Design

Key points:

Coursera: Introduction to Accessible Web Development, a guided project

Key points:

How Cool is Nuxt?

Choose Your own adventure: npx style

My route:

Me though, I chose a more dangerous and tedious route:

Project Setup, Time to build

Cool things about Nuxt

The things I needed to add or change

The site is built! Time to Deploy!

Generate for static.

Last Impressions

5 tools for Designing, Developing, and Testing Accessibility

Linting

ESlint Accessibility Plugins

How to Integrate axe into your Next.js project

Integrating the axe wrapper in your Next.js project

Why do I even need this?

Install axe-core/react

Determine if you are running on the Server

What do you mean I need to import React?

Setting up the Axe wrapper

Taking the Axe to inaccessibility

Let's talk accessibility!

What The 'F' is Section 508: The government's response to A11y!

Hello! And welcome to this super basic intro to Section 508 of The Rehabilitation Act.

So, What is Section 508?

`getObject`+ `streamToResponse` = ❤️

`src/router/index.js` 1

`src/App.vue` 2

`src/main.js` 3

The Web Vitals metrics I have access to through the `reportWebVitals` method:

Choose Your own adventure: `npx` style

What do you mean I need to import `React`?