• 1. Training
• 2. Websites and Website Information
• 3. Naming Conventions
• 4. Terminology
• 5. Shortcuts
• 6. ITSM Standards
• 7. Asana Tracking Standards
• 8. Personal UX Standards
• 9. SVG
• 10. Web Accessibility
• 11. Grace Link Recommendations
• 12. Helpful Links (WIP **)
• 13. Purpose of Meetings

• 14. To Do

• FERPA Basics - PRV802
• Review FERPA Information
• Protecting Social Security Numbers & Identity Theft Prevention - PRV804
• Protecting UF: Information Security Training
  • UFIT Acceptable Use Policy
• PCard Refresher for Cardholders
• Compliance and Ethics: Doing your part for the Greater Good
• Maintaining a Safe and Respectful Campus
• Blue Man - Review of EM Protocols
• BEC Active Shooter - DEM827
• At-Risk for Faculty & Staff Kognito Training
  
  
  
• (Optional) Get eduroam on mobile device

⬆ Back to Top

Web Content Accessibility Guidelines

• Web Content Accessibility Guidelines (WCAG) 2.2
• Florida Accessibility Statement and Section 508

⬆ Back to Top

• camelCase for variables, CSS classes and smaller-scoped items
  • camelCaseExample
• PascalCase for globals, constants and classes that are objects (programming)
  • ClassForCodeReuse
• underscores for images/media
  • underscore_example.jpg
• dashes for filenames/folders/within CSS frameworks
  • filename-or-folder-example

⬆ Back to Top

• EM

  Container: Box that holds content in a mockup, prototype, webpage, etc.

  Mockup: A draft visual representation of a design

  Yield: Period in which students get accepted and decide on where to go to university

  Specialized Terms:

  • Designers

    • Hyphen

      Never split words with hyphens

    • Leading

      Leading, or line-height, should be smaller on p elements if possible

    • Specs

      A design with exact measurements and colors defined and listed for reference

    • Orphan

          ~~~
          ~~~
      ~~~   
       x
                      

    • Runt

           x
      ~~~ ~~~
      ~~~
      ~~~
                      

    • Widow

           x
          ~~~
      ~~~ ~~~
      ~~~
                      

  • Web Developers
    • Signifiers/Affordances:

      These are indicators that show users how to interact with new objects/situations

⬆ Back to Top

⬆ Back to Top

flowchart LR
    A([Detect]) --> B[Record];
    B --> C{Classify};
    C -.-> D[Incident];
    D -.-> E[Investigate];
    E -.-> I[Resolve];
    C -.-> F[Request];
    F -.-> G[Fulfill];
    G -.-> I[Resolve];
    I --> J([Close]);

Impact: Number of users/items affected/influenced
Urgency: Based on time until significant impact

⬆ Back to Top

• Priority: Current use is
  • 🟨:Low
  • 🟧:Med
  • 🟥:High
• Task Progress: Current use is
  • 🟦: In Queue
  • 🔲: In Progress
  • 🟨 (lighter tone): Waiting/On Hold
  • 🟧: Revisions Requested
  • 🟥: Ready for Review/On Test Site
  • 🟩: Completed/Published

⬆ Back to Top

Accessible Accordion

⬆ Back to Top

 ```html
 <svg viewBox="0 0 100 100">
      <path d="M10,10 Q50,20 50,50 T90,90" />
 </svg>
 ```

 ```css
 svg:hover path {
      d: path("M10,10 Q80,20 50,50 T90,90")
 }
 ```

⬆ Back to Top

Web Content Accessibility Guidelines (WCAG) 2.2

• WebAIM Contrast Checker
  Manual checks for color contrast issues
  • JSON Color Checker for #FFF White on #07317B Dark Blue
    UF Blue
  • JSON Color Checker for #FFF White on #FA4616 Orange
    UF Orange
  • JSON Color Checker for #07317B Dark Blue on #81D2D9 Teal
    EM Teal
  • JSON Color Checker for #07317B Dark Blue on #ECECEC Gray
    EM Gray
• Chrome Color Contrast Analyzer
  Extension with explanation on use
• Color Blindness Filter Checker
  Check ADA, CTA effectiveness and Gradient use
• Web Accessibility Compliance Consultants Blog
• Great Color Branding Guide from UCLA

• Windows Narrator Keyboard Shortcuts
  Narrator keyboard commands and touch gestures page via Windows Support
• Cross Browser Environments and Screenreaders
  Considerations for accessibility-first development and screenreaders
• PDF Accessibility from WebAIM
• Helpful Walkthrough for InDesign Accessibility Tools and Use & Adobe InDesign Accessibility Documentation

• Access UF Training Sessions
  Access some accessibility training through UF
• Training Ideas for Accessibility at UC based on Job Filters
  Access categories based on job to preview directions of study

• Beta ADA.gov Website
  Official Beta for ADA linking to extra resources
• Web Accessibility Under Title II of the ADA
  ADA State and Local Toolkit
• Web Accessibility Standards: ADA, Section 508 and WCAG
  Understanding web accessibility standards
• Font Size Change in Browser for Users
  See how people use resizing to view content better
• Parallax Effects and Accessibility
  Read why not to use parallax and possible usable variants
• Images and SVG's and Accessibility
  Different methods for making these elements accessible
• Decent Article on Accessibility
• Grid and Check accessible animations
• Accessiblity and Animations
• Blog on Accessibility and CSS & Lobotomized Owl Selector

⬆ Back to Top

UX Design Course Notes

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

Get to Know the User

Questions to ask about users:

• Do my users have impairments or disabilities to consider–whether temporary, situational, or permanent?
• How familiar are my users with technology?
• How are my users accessing the product or service?
• Where and when are my users accessing the product or service?
• Have I considered all my potential users?

What is user research, and what's its purpose?

Designing Cross-Platform Experiences

• A platform is the medium that users experience your product on. Some common platforms are:

  • Desktop computers
  • Laptop computers
  • Mobile phones
  • Tablets
  • Wearables, like smart watches
  • TVs
  • Smart displays
• Concerns for these experiences would be Screen Size, Interaction, Content layout and Functionality

Terms

Accessibility:

The design of products, devices, services, or environments for people with disabilities

Alternative text (alt text):

Text that helps translate something visual, such as an image or graph, into a description that can be read by screen readers

Brand Identity:

The visual appearance and voice of a company

Call-to-action (CTA):

A visual prompt that tells the user to take action, like to click a button

Color modification:

Features that increase the contrast of colors on a screen, like high-contrast mode or dark mode

Design Sprint:

A time-bound process, with five phases typically spread over five full 8-hour days. The goal of design sprints is to answer critical business questions through designing, prototyping, and testing ideas with users. Are there many potential solutions to your design challenge? Does a design challenge require people from cross-functional teams to weigh in? Is the design challenge's scope wide enough for a sprint?

Design Thinking:

A UX design framework that focuses on the user throughout all five phases: empathize, define, ideate, prototype, and test.

Sprint Brief:

A document that you share with all your attendees to help them prepare for the sprint

Five phases of design sprints

Understand > Ideate > Decide > Prototype > Test

Each phase lasts a day

Resource: Google Design Sprint Kit

Plan Design Sprints

User research > Call in the experts > Find the right space > Gather supplies > Establish sprint rules > Plan introductions > Post-sprint planning

Sprint Brief

A sprint brief is shared with attendees and includes the following:

• Sprint challenge/Challenge item

  • What is the challenge that you want to solve in the sprint?

  • Four things that make a great challenge:

    • Challenge is something real the team needs to deliver
    • It's stated in an inspiring way - something to solve for
    • It's clear/concise
    • It includes a time frame

• Key Deliverables

  A few tips for deliverables

  • Aim for the highest quality deliverables possible. Polished digital work, videos, and interactive prototypes are better than sketches.
  • List all platforms that need to be designed for - e.g., web, mobile, tablet/physical product + website/environment

• Logistics

  • Where?
  • When?
  • Who? (list at end of doc - bookmark)
  • Sprint Leader (established before brief created)
• Approvers: People who sign off before launch (ex. internal stakeholders, etc.)

• Resources:

  • For short term sprints: Assignment development team, if any (ex. engineering team)
  • For long-term / vision sprints: Plan to secure resources

• Project Overview

  1. Current state of project - what's been created already?
  2. Roadblocks - what stands in our way?
  3. Early wins, if any. - Has our team demonstrated any wins or learnings in the space already?
  4. Estimated launch plan - when is projected launch for piece being designed? What is this likely to look like at launch? (Include list in challenge statment as well)
• 5 Day Schedule: Specific hour by hour even to the 5 minute increment and should include break times

Define Research Goals / Questions

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.

Build Empathy

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

Create Personas

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>