Now you know that some types of content and format on webpages can pose barriers for people with disabilities. The next steps are to develop an action plan to fix web content that is currently inaccessible and implement procedures to ensure that all new and modified web content is accessible. The website accessibility checklist included in this section helps you assess what needs to be done.

A well-designed action plan would include the following steps:

1. Establish, implement, and post online a policy that your webpages will be accessible and create a process for implementation.
2. Ensure that all new and modified webpages and content are accessible.
   • Check the HTML of all new webpages. Make sure that accessible coding is used.
   • Make sure that websites are designed so they can be displayed using the color and font settings of each visitor’s browser and operating system.
   • If images are used, including photos, graphics, scanned images, or image maps, make sure to include a text equivalent, by adding “alt” tags or long descriptions, for each.
   • If you use online forms and tables, make those elements accessible by labeling each control (including buttons, check boxes, drop-down menus, and text fields) with a descriptive HTML tag.
   • When posting documents on the website, always provide them in HTML or a text-based format (even if you are also providing them in another format, such as PDF).
3. Develop a plan for making your existing web content accessible. Describe your plan on an accessible webpage, and encourage input on how accessibility can be improved. Let visitors to your website know about the standards or guidelines that you are using to make your website accessible. When setting timeframes for accessibility modifications to your website, make more popular webpages a priority.
4. When updating webpages, remember to ensure that updates are accessible. For example, when images change, the text equivalents in “alt” tags and long descriptions need to be changed so they match the new images.
5. Ensure that in-house staff and contractors responsible for webpage and content development are properly trained. Distribute the Department of Justice technical assistance document “Accessibility of State and Local Government Websites to People with Disabilities” to these in-house staff and contractors on an annual basis as a reminder. This technical assistance document is available on the ADA Home Page at www.ada.gov.
6. Provide a way for visitors to request accessible information or services by posting a telephone number or email address on your home page. Establish procedures that ensure a quick response to users with disabilities who are trying to obtain information or services in this way.
7. Periodically enlist disability groups to test your pages for ease of use; use the feedback they provide to increase the accessibility of your website.
8. Ensure that there are alternative ways for people with disabilities to access the information and services that are provided on your website. Remember, some people may not have, or be able to use, a computer.

Characteristics of a Good UX

• Usable: it means the design, structure, and purpose of the product is clear and easy to use. As you evaluate a product for usability, you can ask questions like: Is everything in the design easy to find? Is the design’s functionality easy to understand? Can users accomplish specific tasks within the design?
• Equitable: it means a design is helpful to people with diverse abilities and backgrounds. In other words, the product’s design addresses the needs of a diverse audience and ensures a high-quality experience is delivered to all users regardless of background, gender, race, or ability. Equity means providing people with the tools they need to accomplish their goals and support improved quality of life. Are the needs of a diverse group of users considered? Does the product’s design address the needs of traditionally underrepresented and excluded groups?
• Enjoyable: it means the design delights the user. The design reflects what the user may be thinking or feeling and creates a positive connection with them. Are there aspects of the design that consider the user’s feelings? Does the design inspire delight in the user? Does the design keep the user engaged throughout their experience?
• Useful: that means it solves user problems. In other words, the design intentionally solves a user problem that the designer has identified. It’s important to note that, while similar, useful and usable have different meanings. Does the design add value to the user’s experience? Does the design solve a problem for the user? Does the design help the user achieve a specific goal?

Assets:

Everything from the text and images to the design specifications, like font style, color, size, and spacing

Information architecture:

The framework of a website or how it’s organized, categorized, and structured

Prototype:

An early model of a product that demonstrates functionality

UX research:

Understand users and learn about their backgrounds, demographics, motivations, pain points, emotions, and life goals

Wireframe:

An outline or a sketch of a product or a screen

Article about Good Design

1. You should have a prompt that guides your research - i.e. Sharpen prompt. Think through your audience and identify their unique needs/problems and how your product might solve these problems. Therefore, assure they are clear and focused on the problem your portfolio project is aiming to solve. You should have 2-5 research goals drafted.
2. Define your target audience: Include a diverse but targeted group to get the best data. Note 3-6 different characteristics. Think about demographics like location, age and career.
3. Write interview questions: These questions are the foundation for feedback later on. These can be adjusted as the portfolio project progresses. Draft 4-7 questions and be sure to follow best practices and avoid biases.

Use questionnaire or some form of gathering information to acquire data on pain points and interests of target audience.

1. Understand the project scenario and customer types.
2. Create personas based on a combination of attributes from a group of users with similar needs. Personas should be representative of key user groups.
3. Consider the following while creating personas
   1. Demographic information: Did the demographic information match the persona characteristics given in the scenario?
   2. Quote: Were you able to imagine a quote that is relevant to the persona and the background you’ve built for them?
   3. Goals/frustrations: Were you able to align the goals and frustrations with the persona and the activity scenario?
   4. Brief story/scenario: Were you able to give more information about the persona, tying in their goals and frustrations, as well as their quote?
   5. Image: Did you include a picture or avatar representing the personas for your activity?

• Image Optimization Perspective
  Info on optimizing images for web
• Color Palette Generator*
  Tool to randomize a color palette
• Expand Palette on One Color
  Tool to expand palette based on input
• Color Mixer
  Tool for mixing colors
• Behance
  Creative network for showcasing and discovering creative work
• Mobile First Design - Article by Adobe
  Advantages and considerations for UI when building mobile-first
• Difference Between Splash and Landing Pages
• Google UX Design Cert Review
  Gives times for predicted amounts spent as well as summaries
• Offline Considerations and UX Design
  Perspective on web navigation for individuals with limited connectivity
• Products that address pain points
  • Google Font redesign
  • Color system and Google Maps
  • Airbnb revamped product design
• Image Grid Examples/Thoughts
• Color Fundamentals - Differences b/w RGB, CMYK, CMYKOGV, and SPOT Colors
• Colors for the Web: Suggested CSS4 Standards
• Heuristic Evaluation and Interaction Design
• Add Accents to Letters on Windows
• Line Readability and Character Count
• Using Êg to get actual height of a line
• Interactive Guide to Color and Contrast
• Lo-fi Wireframe Kit - Figma
• Future: Creative Asset Review Tool
• Text Spacing and Accessibility
• Wireframes in XD
• Fun Bad UX Example

• Emmet Cheat Sheet

• General Skills to Develop Along Path

• Difference b/w Software,Web,App Development

• Diff Checker

• Regex and Regex tests: Regex 101 or Regexr

  • Examples of possibly helpful syntax: (<!) syntax is negative lookbehind and (?!) syntax is negative lookahead

• Yellow Lab Tools - Page Testing

• HTML URL Encoding Reference
  Possible for API calls with input text

• Squoosh
  Make image files smaller so they load faster (not necessary if using Image Optimizer on macOS)

• Lorem Picsum
  Populate with random image with specified measurements

• Image Optimization Perspective
  Info on optimizing images for web

• Image Responsive Rendering

• Source Element and Attributes

• Git Stash Explained
  Quick code/example on stash use

• Remove Git Branches not on Remote

• Reset and sync local repository

• Campaign URL Builder

• QR Code Generator

• Approximate Hex Color to Filter for SVGs
  Inaccurate but free approximation for color to filter use on SVGs

• Simple YouTube SVG Explanation

• Styling svg use Content
  Tips on using svg with css, specifically using svg use

• No Line Break b/w Text and svg

• Scaling svg's

• Fixing Focus Outlines
  Correct the blob shape on focus outlines

• Favicons and OS Differences

• Favicon Cheat Sheet

• Pug Beginners Guide

• JS Focusevent

• Interactive Review of CSS Selectors

• CSS Tricks Guide: Table HTML & CSS

• Curved Text Along a Path

• Oopsie: Remove sensitive data from repo - GitHub and Stackoverflow responses about removing with git rebase -i <commit_id>

• Curl Examples and Flags and Virtual Environments & Other

• Curl Tutorial by Developer of Curl

• Build and Test WordPress locally

• Target different parts of URL w JS

• Web Accessible Nav Types from W3
  Explore for what is needed at time

• Accessible Website from Perkins School for the Blind

• Main keyboard bindings

• Best Practice for Web Accessible Lists

• Explaining Web Caching to Clients
  Brief overview of caching

• VSCode Workflow Tips

• Fetch API

• CURL (Client URL) use cases and options, etc.

• W3 Article on Templates for Future Review

• Absolute/Float Positioning in Relation to WYSIWYG Editors - for Legacy Updates

• Wrapping Text Info on MDN

• Washington Web Design and Development I

• CSS Tricks Links and Buttons Guide

• Accessibility Reviews based on Lighthouse

• CSS "One Liners"

• nth-child-tester CSS Tricks

• Accessibility and abbr, aria

• Fluid Typography and CSS clamp

• Case Against Quicklinks NNGroup and Intranets

• Expandable Menu Types

• Force Browser to Reload CSS/Styles by Changing link tag URL

  • Example: <link rel="stylesheet" type="text/css" href="/css/stylesheet.css?v=1" />

• Force Reload Cached CSS/JS

  • Use Ctrl + F5 to Clear Cache Memory in a Forced Refresh

• Remove Unused CSS

• Turn on/off echo text on bash

• Duplicate Links and NN Group Review 2016

• htaccess redirects

• htaccess redirects #2

• Keyboard Events

• Fake JSON Data

• CSS Defaults

• Free Clip Path Maker

• For fun: List of GitHub Markdown emojis

• Airbnb Readme for JSX Standards

• Understanding Nameservers

• MDN Web API Documentation

• Bubbling/Capturing Explained

• Mobile Display Issues with URL bar
• Diagnose on iPhone Safari

• deno and npm: Node Compatibility Library
• Input w RegEx and ReactJS
• SQLite Installation - Mac
• SQLite Documentation/Download
• Bash Aliases
• Duplicate VSCode Environment
• Convert Static to React (not recommended)
  • jekyll/hugo/11ty may be better for these circumstances to assure performance stays optimal
  • 11ty Documentation
  • 11ty 3 min Basic Tutorial
  • 11ty Tutorial - Kevin Powell
• Lazy load images
• Fully CSS Accessible Tested Dropdown Nav
• Swiper
• JS Node ipdata.co

• Custom Reporting
• Tracking Device Orientation
• Google Analytics Alternative: Matomo (100% data ownership)
• GitLab - DevSecOps Platform: Alternative to GitHub
• QRCode Monkey - QR code generator
• Google Analytics Campaign URL Builder

1. Decide on main campaign
2. (optional) Use campaign name and year for naming convention
3. Input URL to be used in tracking
4. Use identifier for ID (see Step 2)
5. Identify source (important)
6. (optional) Reference marketing medium (or use source name)
7. (optional) Campaign name can be the ID (see Step 4) if the ID is readable
8. (optional) Fill out other fields
9. Record the Generated Campaign URL
10. (optional) Use Generated Campaign URL on a QR code generator page to tie the campaign to a QR code
11. (optional - QR code) Decide/use pixel size based on medium (print/web/etc)

• Recursion
• Markdown Editing
• Understanding Recursion Post
  • TLDR: The general recursion function is recurse() { doWeStop() || recurse(); } considering in most languages the "or" operator short-circuits when its first operand is true

• https://playcode.io/new [Current Favorite]
• https://codepen.io/pen
• https://codesandbox.io/s/
• https://vscode.dev/
• https://replit.com

 function base64convert (files) {
   console.clear()
   const reader = new FileReader()
   reader.onload = (e) => {
     console.log(e.target.result)
   }
   reader.readAsDataURL(files[0])
 }  @font-face {
     font-family: 'myfont';
     src: url("<>");
 }
 

  @font-face {
    font-family: 'gentonabook';
    src: url(data:application/font-woff2;charset=utf-8;base64, USEBASE64HERE ) format('woff2'),
         url(data:application/font-woff;charset=utf-8;base64, USEBASE64HERE) format('woff');
    font-weight: normal;
    font-style: normal;
}
 

Note: Webhooks typically are used to connect two different applications. When an event happens on the trigger application, it serializes data about that event and sends it to a webhook URL from the action application—the one you want to do something based on the data from the first application. The action application can then send a callback message, often with an HTTP status code like 302 to let the trigger application know if the data was received successfully or 404 if not.Zapier

URL

Specifies where you want the data to go

Body

Contains the info/data you want to send

Header

Specifies how you want the info to be formatted

Request

Specifies the actions of the action app

Tip: The most common requests are GET, POST, PUT and DELETE

• git cherry-pick

  • git cherry-pick commit-SHA Merges a particular commit
  • git cherry-pick first-commit-SHA-in-range^..last-commit-SHA-in-range Merges a range of commits including the first in range
    • In git cherry-pick A..B, A should be older than B
  • git cherry-pick first-commit-SHA-in-range..last-commit-SHA-in-range Merges a range of commits NOT including the first in range

• Git Stash Explained

• Stash specific file: git stash push -m "message" <file>

• Git Merge and Delete in one line, .gitconfig alias use

• Git Commit types (not strict):

  • feat: The new feature you're adding to a particular application
  • fix: A bug fix
  • style: Feature and updates related to styling
  • refactor: Refactoring a specific section of the codebase
  • test: Everything related to testing
  • docs: Everything related to documentation
  • chore: Regular code maintenance.[ You can also use emojis to represent commit types]

• Git Commit Example:

  • type(scope): subject from Art of Writing a Good Commit Message - Dev

• Types of deletes

  • Also, WIP: Work in progress, sort of an overarching miscellaneous

• Merging using --no-ff

        _base.scss
        _layout.scss
        _components.scss
        main.scss
    

    <div class="outer">
      <div class="inner1">
        <div class="inner2">
          <p class="par1">Paragraph One</p>
          <p class="par2">Paragraph Two</p>
        </div>
      </div>
    </div>
    <style>
      .outer {
        display: grid;
        place-items: center;
        height: 100vh;
        width:100vw;
        z-index: 3;
        background-color: hsla(200, 90%, 35%, 0.4);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      .inner1 {
        height: 20vw;
        width:20vw;
        z-index: 1;
        background-color: hsla(0, 80%, 45%, 0.4);
      }
      .inner1:before {
        content: "Inner (ONE)";
        position: absolute;
        left: 30%;
        top: 35%;
        background-color: hsla(0, 80%, 45%, 0.4);
        height: fit-content;
        width: fit-content;
        border-radius: 3px;
      }
      .inner2 {
        /* box-sizing: border-box; */
        height: 100%;
        width: 100%;
        z-index: 2;
        background-color: hsla(0, 0%, 0%, 0.3);
        padding: 15px 15px;
        margin: 30px 30px;
      }
      .inner2:before {
        content: "Inner (TWO)";
        position: absolute;
        left: 30%;
        top: 40%;
        background-color: hsla(0, 0%, 0%, 0.3);
        height: fit-content;
        width: fit-content;
        border-radius: 3px;
      }
      .inner2 > p {
        /* padding: 0; */
        margin: 0;
        background-color: hsla(0, 99%, 99%, 0.6);
      }
      .par1 {
        height: 5vh;
        width: 100%;
      }
      .inner2 > p.par1 {
        margin-bottom: 5vh;
      }
      .par2 {
        height: 10vh;
        width: 100%;
      }
    </style>