DEV Community: Bernie January Jr.

Web Accessibility

Bernie January Jr. — Mon, 28 Aug 2023 13:36:56 +0000

People have diverse abilities, skills, tools, preferences, and expectations that can impact how they use the Web.

I want to start by citing reference to stats I found via Sheri Byrne-Haber, a prominent inclusion leader and advocate for universal web accessibility.

Over 95% of the web is inaccessible to individuals who use assistive technologies and it takes approximately 8 seconds for them to make up their minds about whether they will continue or abandon that website or application.

Web accessibility means that websites, tools, and technologies are intentionally designed and developed so that people with disabilities can use them.

Creating accessible websites and apps reaches significantly more users.

We can better reach users who may have:

Permanent disabilities, such as visual, mobility, cognitive or auditory impairments
Temporary Disabilities, such as a user with a broken or sprained finger or temporary vision loss due to lost glasses or contacts
Situational Disabilities, where for example, a parent might be cooking with one hand, holding a a child in another arm while trying to place an order on a website. OR something as common as low screen visibility due to bright sunlight

Web Accessibility encompasses so much, I've included resources for more info at the end of this post. Because I can only scratch the surface here, I'll focus on 3 major accessibility considerations.

1. Perceivable Content

Provide Text Alternatives for Non-Text Content

Informative Images: For images that convey information or content, provide concise, descriptive alt text.

alt=”description of image”;

Complex Images: If an image is complex and cannot be fully described in a few words, consider providing longer descriptions through aria-describedby or linked descriptions.

<button aria-describedby="delete-desc">Add Friend</button>

<p id="delete-desc">  Items that are deleted will be permanently removed immediately. Deleted items can no longer be accessed after deletion. </p>

Both aria-labelledby and aria-describedby reference other elements to calculate a text alternative, but a label should be concise, while a description is intended to provide more verbose information; a label describes the essence of an object, while a description provides more information that the user might need.

The elements linked via aria-describedby don't need to be visible. It is possible to reference an element even if that element is hidden. For example, a form control can have a description that is hidden by default that is revealed on request using a disclosure widget like a "more information" icon. The sighted user clicks on the icon; for assistive technology users the description is referenced from that form field directly with aria-describedby.

Icons with Text Labels: Whenever possible, pair icons with text labels. This helps users with different types of disabilities understand the context. Also, generally use ARIA Labels: ARIA (which stands for Accessible Rich Internet Applications) labels to provide additional information about icons or graphics, if necessary.

// The aria-label attribute defines a string value that labels an interactive element.
<button aria-label="Open" onclick="modal.open()">

2. Operable User Interface

Keyboard Accessibility

Keyboard accessibility is a fundamental aspect of web accessibility. It ensures that people with mobility impairments, especially those who cannot use a mouse, can navigate and interact with a website using only keyboard inputs.

Good HTML Semantics
includes the proper use of nav, section, main, and heading tag hierarchy: h1 thru h6 tags. This allows for users to:
Skip Links:
skipping navigation links with a keydown of the 'tab' key at the beginning of the page allows users to jump directly to the main content or important sections, bypassing navigation menus.
Tab Order:
Arrange the tab order of elements in a logical sequence that mirrors the visual layout. Users should be able to navigate through content in a predictable and intuitive manner. Setting tab orders: tabindex="0" means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values. The focus navigation order of these elements is defined by their order in the document source.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <div class="overflow-hidden">
      <p>Click Here and start tabbing.</p>
      <label>First in tab order:<input type="text" /></label>
      <div tabindex="0">Tabbable due to tabindex 0.</div>
      <div>Not tabbable: no tabindex.</div>
      <label>Third in tab order:<input type="text" /></label>
      <div>Not tabbable: no tabindex AGAIN.</div>
      <div tabindex="0">Tabbable due to tabindex 0.</div>
      <div>Not tabbable: no tabindex AGAIN.</div>
      <div tabindex="-1">Not tabbable: due to tabindex -1 HERE.</div>
      <script src="./index.mjs" type="module"></script>
    </div>
  </body>
</html>

Focus indicators: Ensure that interactive elements, such as links, buttons, and form fields, have visible focus indicators when they are highlighted using the keyboard. focus-visible helps users understand where they are on the page and which element is currently selected.


input:focus-visible,
div:focus-visible {
  outline: 2px solid blueviolet;
  border-radius: 3px;
}

3. Testing Accessibility Features

Test the site or app with screen readers. Here's a great screen reader demo by Mark Sutton of UC San Francisco:
https://www.youtube.com/watch?v=dEbl5jvLKGQ
Test Type Colors v. Background Colors with a Contrast Checker: https://webaim.org/resources/contrastchecker/
Check the Accessibility of the website with an automated checker: https://wave.webaim.org/
User Testing and getting Feedback is ideal when launching any feature. Be sure to involve users with disabilities in testing. This is extremely important if we truly want to ensure user accessibility.
Keep Gathering feedback. Continue to make improvements and text compatibility with a variety of assistive technologies as these technologies evolve over time.

Thanks for reading and I truly hope this was helpful.

Resources

W3C: https://www.w3.org/WAI/fundamentals/accessibility-intro/
Quick reference: https://www.w3.org/WAI/WCAG21/quickref/
Contrast Checker: https://webaim.org/resources/contrastchecker/
WCAG 2: checklist & standards: https://webaim.org/standards/wcag/checklist
ADA.gov guidelines for web accessibility: https://www.ada.gov/resources/web-guidance/
UCSF screen reader demo: https://www.youtube.com/watch?v=dEbl5jvLKGQ
What do people with disabilities check when they first arrive on a website: https://www.youtube.com/watch?v=xYl2lAX-BTM

Why use Next.js?

Bernie January Jr. — Mon, 14 Aug 2023 09:59:59 +0000

Next.js is an open-source web framework created by Vercel and built on top of React.

As you probably already know, React is a JavaScript library developed by Facebook for building user interfaces. React allows for the development of reusable UI components and application state management.

So why would one use Next JS over just using React. Well, Next JS offers a few considerable upgrades that streamline the development process. Let's preview a few.

But First, if you're interested in spinning up a quick Next.js app:

run npx create next-app <your-apps-name> in your terminal
spinning the app up like this will prompt a series of question like if you want to use eslint, TypeScript, Pages Router, etc. Choose your preferences.
cd into your app
run npm run dev in your terminal, which starts your Next.js app development server on port 3000

Built-in Routing

THE ISSUE:

React doesn't provide native routing capabilities. We have to use third-party libraries like React-Router to handle client-side routing, specifically when creating multi-page applications.

THE SOLUTION:

Next.js introduces file-based routing, where the file structure of your project's "Pages" directory determines the routes. Each file in the Pages directory corresponds to a route.

When a file is added to the Pages directory, it's automatically available as a route.

A Page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the Pages directory.

Each Page is associated with a route based on its file name. Let’s just import a Next.js Link component, export your functional React component/Page, and below we'll link our Page back to our home page: index.js with the Link component.

import Link from 'next/link';
import Image from 'next/image';

export default function Presentation() {
  return (
    <>
      <h1>Presentation Page without React Router set-up</h1>
      <h2>
        <Link href='/'>Back to home</Link>
      </h2>
      <Image src='/huh.jpg' width='425' height='375' alt='confused meme' />
    </>
  );

}

Server Side Rendering

THE ISSUE:

React applications are typically client-side rendered (CSR), meaning the rendering of components happens on the browser side.

THE SOLUTION:

Next.js offers built-in support for server-side rendering. Server-side rendering (SSR) is the process of rendering a web page on the server and sending the fully-rendered HTML to the client. A big benefit to SSR is that search engines can easily crawl and index pre-rendered HTML content. This leads to improved search engine ranking (easily improved SEO) and visibility for your pages, as compared to CSR where search engines might have difficulty indexing content that relies heavily on JavaScript.

Static Site Generation (SSG)

SSG is a technique where the content of a web page is generated at build time and then served as static HTML files. This means that the server generates the HTML for each page before the application is deployed, and the same HTML is then sent to all users who visit that page. This can greatly improve site wide performance, as the server load is minimized, and users receive pre-rendered content without needing additional processing on the server or client side. This is particularly useful for serving static pages that all users see like: landing pages, e-commerce product listings, blog posts, etc.

Other Reasons to Try Next.js

Next.js has automatic code-splitting: the process of splitting the application's bundle into smaller chunks required by each entry point. The goal is to improve the application's initial load time by only loading the code required to run that page.
Simplified data fetching with async/await in Server Components, and an extended fetch API for request memoization, data caching and revalidation.
Next.js automatically optimizes images with a built-in Image component that replaces img tags. Plus optimizations for Fonts and Scripts.
If you want a more streamlined development experience with fewer configuration requirements, peruse the Next.js docs, which are truly user-friendly, to learn more about the aforementioned features and more.

Resources:

Next.js Documentation (beginner-friendly): Link.
Digital Ocean's: reasons to use Next.js over Plain React: Link

I truly hope you found this info helpful.

Motion UI in React

Bernie January Jr. — Tue, 01 Aug 2023 04:48:13 +0000

Motion UI refers to the use of animations, transitions, and visual effects to add movement and dynamism to user interfaces. It involves animating various elements, such as buttons, menus, cards, and page transitions, to create an interactive and engaging experience for users.

There are many animation libraries and techniques that leverage React's declarative nature to define and manage animations in a straightforward and efficient way. I'll touch more on that later.

Planning Motion UI for Your React Application

Proper planning ensures that your animations serve a purpose, enhance user experience, and align with your app's overall design and functionality. Here are a few key steps to consider when planning Motion UI for your React app:

Identify the Right Use Cases:
Begin by identifying areas in your React app where motion adds value. Not all components or interactions require animations, so focus on those that can benefit from clear visual feedback or improved user engagement. Common use cases include page transitions, form validation, loading states, navigation menus, hover effects, and interactive elements.
Understand User Expectations and App Requirements:
Consider your target audience and their preferences when it comes to animations. Some users might appreciate subtle animations, while others might prefer more pronounced effects. Align the animations with an overall user experience strategy to ensure they enhance functionality rather than distract from it.
Set Clear Goals:
Define the objectives you want to achieve with animations. Animations may aim to improve usability, guide users through complex processes, provide visual feedback, or simply add aesthetic value.

Choosing the Right Animation Library

Two of the most popular animation libraries for React include React Spring [26.1k+ GitHub stars] and Framer Motion [19.6k+ GitHub stars], but there are many to choose from. Arafat Islam has a great list of animation libraries here.

React Spring is a physics-based animation library that excels in creating smooth and lifelike animations. It uses spring animations to achieve natural motion, useful for a wide range of animation types: simple transitions to more complex interactions. React Spring is known for its performance optimizations, allowing developers to create visually appealing animations without sacrificing speed. Documentation Link.
Framer Motion provides a flexible and intuitive API for creating various animations and transitions. It is popular due to its ease of use and visual editor support. Framer Motion allows developers to create animations using keyframes, gestures, and more, making it a versatile option for a variety of animations. Documentation Link.

Common Use Cases and Considerations

Using Framer motion, let's demo a couple of examples:

A. Creating Smooth Transitions

Using easing functions to achieve natural motion
Avoiding abrupt or jerky animations
Implementing staggered animations for a polished look

Demo: Progress Scroll Bar



import React from "react";
// Import motion and useScroll from Framer Motion.
import { motion, useScroll } from "framer-motion";
const Scroll = () => {
  // useScroll hook from framer JS AND By default, useScroll tracks the page scroll
  const { scrollYProgress } = useScroll();

  return (
    <>
      {/** The core of Motion is the motion component. Think of it as a plain HTML or SVG element, supercharged with animation capabilities. */}
      <motion.div
        className="progress-bar"
        style={{ scaleX: scrollYProgress }}
      />
      <div>
        <h1>Demo time!</h1>
      </div>
    </>
  );
};
export default Scroll;

B. Enhancing User Interactions

Animating user interface elements during interactions
Adding visual feedback for better user understanding
Implementing drag-and-drop animations and gestures

Demo: Responsive Accordion



import React, { useState } from "react";
// Import motion, AnimatePresence, LayoutGroup from Framer Motion.
import { motion, AnimatePresence, LayoutGroup } from "framer-motion";

function Item({ color, isOpen, onClick }) {
  return (
    <motion.li animate onClick={onClick} style={{ "--choiceColor": color }}>
      <motion.div animate className="image" />
      {/** AnimatePresence allows components to animate out when they're removed from the React tree. AnimatePresence works by detecting when direct children are removed from the React tree. Any motion components contained by the removed child that have an exit prop will fire that animation before the entire tree is finally removed from the DOM.*/}
      <AnimatePresence>{isOpen && <Content />}</AnimatePresence>
    </motion.li>
  );
}

function Content() {
  return (
    <motion.div animate className="content">
    {/** The core of Motion is the motion component. Think of it as a plain HTML or SVG element, supercharged with animation capabilities. */}
      <motion.span
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        />
        {/** initial, animate, and exit properties set start, animation, and end animation state */}
      <motion.span
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        />
      <motion.span
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        />
    </motion.div>
  );
}

export default function App() {
  const [currentColor, setColor] = useState(false);

  return (
    <div>
    {/** LayoutGroup is a Group of motion components that should perform layout animations together. */}
      <LayoutGroup>
        <motion.ul animate>
          {colors.map((color) => (
            <Item
              key={color}
              color={color}
              isOpen={currentColor === color}
              onClick={() => setColor(currentColor === color ? false : color)}
            />
          ))}
        </motion.ul>
      </LayoutGroup>
    </div>
  );
}

const colors = ["#0099ff", "#ff0055", "#000"];

C. Responsive Motion Design

Designing animations for various screen sizes and devices
Utilizing media queries to adjust animation behavior
Testing animations across different devices and browsers

Debugging and Testing Motion UI

Debugging and testing Motion UI in your React app is crucial to ensure that animations work as intended and provide a seamless user experience.

Animation Timing and Delays:
Check for correct animation timing and delays. Ensure that animations start and end at the appropriate times and that delays are consistent. Animation timing should be consistent and on par with branding consistency as all animated elements should have similar timing conventions as well as look and feel.
Performance and Optimization:
Evaluate the performance of animations. Measure and analyze their impact on rendering and overall app performance.
Accessibility Testing and Considerations
Test animations for accessibility. Ensure that users with disabilities can understand and interact with the UI even if they cannot perceive the animations. Use ARIA attributes for screen reader compatibility and provide alternative options for users who may have motion sensitivity.

I hope this article was helpful.

Below are some resources that might continue to be helpful:

Resources

Framer Motion : Documentation Link
Afarat Islam's: Best Animation Libraries for React Link
Framer Motion Github: Link

CSS Best Practices

Bernie January Jr. — Mon, 19 Jun 2023 13:59:12 +0000

How does CSS work:

Cascading Style Sheets (CSS) is unique amongst the programming languages. Knowing why it works the way it does may help in understanding why it's sometimes difficult to wrangle. Credit goes to Miriam Suzanne for my better general understanding of it.

The web, specifically the network of HTML documents we call the web, was created to be device agnostic, which just means that anyone on any device can view web HTML documents. In other words, the client-side (a website end user) controls the display of our webpage. Think different devices: phones, tablets, desktop computers, different browsers, different settings, and different user needs: screen readers, assistive devices, etc. A webpage or application today must be adaptive and shape shift to fit the shape of our users client-side customizations.

The ‘Cascade’ in CSS takes all of these sources of information and defines a set of rules for how our web presentation renders in the browser. So when writing CSS, you’re sort of suggesting how output SHOULD look on an end user’s screen. It’s very different than designing for print, where we dictate the exact output of what our end user sees and receives. CSS can seem to act weird because it is resilient and adaptive by design. When CSS attributes fail, the browser is told to ignore them. CSS is an optional decorator for which parts can and intentionally fail to preserve our webpage’s content.

Reset CSS:

We all know that CSS has more than a few weird quirks that can feel buggy and slow down your workflow. We can get around some of these ‘bugs’, by what many call a CSS reset.

The most notable CSS reset is probably this one created by Eric Meyers some years ago. I found out about this reset through another CSS legendary resource: Kevin Powell. If you want to learn more about CSS, I definitely recommend checking out his YouTube channel.

For me… the Meyer’s reset is a bit wordy and exceeds the needs of my projects. I cherry-pick the resets that I utilize most here:

margin: 0 for everything.

/* resetting CSS margin: remove default margin on text tags */
* {
  margin: 0;
}

box-sizing: border-box tells the browser to account for any border and padding in the values you specify for an element's width and height.

/*
  Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

font: inherit: I hate having to deal with the default fonts for button, input, textarea, and select elements. You can fix this by having it inherit whatever font you set your body to.

/* remove built-in form typography
margin: remove default margin on text tags
*/
input,
button,
textarea,
select {
  font: inherit;
}

overflow-wrap: break-word: There’s almost never a time when you’d want your text to overflow outside of the container div you place it within.

/*
  Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

Organize Your CSS

By organization, I really mean to stress = Consistency. Consistency is everything. It will speed up your workflow, reduce debugging, and make edits easier. And, there are always edits.

It’s best practice to keep unique component css files separate so that you separate your styling logic just as you would your component logic: app.css, sidebar.css, navbar.css, etc.
Even if you have a single style.css file, be sure to separate global css i.e. css that impacts tags like body, h1, p, etc. and local css i.e. .nav-buttons, #nav-title, #nav-bar… it's best-practice to keep like with like.
Use :root variables for often used styles like color, font-size, and font-family. This makes for easy color look-up/auto fill and worry-free consistency with your design brief and prototype UI.

/* //// ROOT VARIABLES  */
:root {
  --black: #000000;
  --teal: #86FDF1;
  --light-blue: #C9D6EA;
  --violet: #52489C;
  --yellow: #FFD449;
  --white: #F7F3F3;
  --title-font: vollkorn, serif;
  --primary-font: system-ui, sans-serif;
  --secondary-font: Georgia, serif;
  --lg-font: 2.5rem;
  --md-font: 1rem;
  --sm-font: .5rem;
}

/* //// GLOBAL | site-wide */

body {
  background-color: var(--black);
  font-family: var(--primary-font);
}

Comment Your CSS

Create comments in your CSS, trust me…. you or the developer who will update the project in the future will appreciate it.

CSS Comment:
/* This is a CSS comment*/

It’s common convention to add a block of comments between sections of your stylesheet, helping you to differentiate between sections at a glance. If you use a string that won’t appear in your code, you can easily jump from section to section i.e. ////

/* //// ROOT VARIABLES  */

/* //// GLOBAL | site-wide */

/* //// HEADER + NAV  */

/* //// MAIN  */

/* //// FOOTER  */

/* //// MEDIA QUERIES  */

Accessible HTML/CSS:

Follow Title Tag Hierarchy: It's best practice to only have one h1 tag per page and to follow title tag hierarchy h1 > h2 > h3 > h4 > h5 > h6 as screen readers and search engines recognize HTML title tags.
Alt attributes: Be sure to provide descriptive alt text for all your non-decorative images. Individuals that require or prefer to use screen readers to traverse your website or app will have image context and will have better User Experience (UX) with descriptive alt text. It’s also important for Search Engine Optimization (SEO). Generally speaking, creating a more accessible product makes for better UX for all users.

<img id="meme" src="img/viral-meme-squat-squint-woman.webp" alt="A viral meme of a woman squatting and squinting in a stylish pink blazer, gold hoop earrings, and heels trying to figure out why you didn't place ALT text in your image tag"/>

ARIA states and properties: ARIA attributes allow developers a way to modify an element’s states and properties as defined in the accessibility tree. Some of the most common attributes are:

aria-label: defines a string value that labels an interactive element. It describes an action that one might expect of a particular element. A button that closes your navigation menu might look like this:

<button aria-label=“close” on-click=”navMenu.close()”></button>

aria-selected: indicates the current "selected" state for gridcell, option, row and tab roles. If true, the selectable element is selected and when false, vice versa.

<div class="tab-interface">
  <div role="tablist" aria-label="Sample Tabs">
    <span
      role="tab"
      aria-selected="true"
      aria-controls="panel-1"
      id="tab-1"
      tabindex="0">
      First Tab
    </span>
    <span
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1">
      Second Tab
    </span>
  </div>

Test Your Media Queries:

Match your media queries to common device dimensions AND TEST IT!
Also, Media Queries always go at the end of the CSS file per convention

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Here are typical screen sizes:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

For orientation: landscape v. portrait (the default):

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

I hope this was helpful. Thanks for reading.

Below is a list of Resources that might continue to be helpful.

Resources

CSS MDN docs: link
Miriam Suzanne's: explanation of why CSS is so weird: link
Eric Meyer's: THE CSS reset: link
Kevin Powell's: Youtube Channel to learn CSS: link
The Box Model MDN docs: link
ARIA attributes MDN docs: link

Intro to TypeScript

Bernie January Jr. — Mon, 12 Jun 2023 13:50:44 +0000

TypeScript(TS) is essentially JavaScript, with sugar on top… a Superset of JavaScript(JS). Because of this, whatever code you’d write in a JS file would be legit in a TS file.

JavaScript was created in just 10 days, by Brendan Eich, an employee of Netscape at the time. Yeah, 10 days.

When JavaScript was built, its intended purpose was to create small snippets of code that can be embedded into a webpage, which still happens of course. Today, in addition to JS embeds, developers and software engineers create full-stack web applications that can be written almost entirely in JavaScript.

The language exponentially outgrew its initial scope, and there are more than a few odd quirks and buggy occurrences that may surprise even an experienced developer. For example:

JavaScript’s equality operator (==)

console.log(“” == 0); // logs >> true // that can’t be right?

JavaScript property access

const square = {width: 5, height: 5};
const sqArea = square.widht * square.height; 
console.log(sqArea) // logs  >> NaN // Ok, I'm not the best speller. NaN, really? Shouldn't this log an error?

TypeScript was created to solve these sorts of problems in JavaScript.

Static Type Checking in TS

TypeScript’s core benefit is static type checking, which simply means it will check for an error in your type values without you having to run your code. TS forces JS to act like a statically-typed programming language.

C++ Example: Statically-Typed Programming Languages:
A statically-typed programing language like C++, C# or Java requires different types of variables that explicitly define and store each type of value. A variable that stores an integer in the programming language C++ might look like this:

int num = 10; // declaring a C++ variable as an integer
num = “x” // NOPE can’t reassign an integer to a string in C++

In this example, the variable num can’t be assigned to a string or any other value that is not a whole number, in fact the number can’t even include a decimal because there’s a different type of variable for floating point numbers called double.

JavaScript Example: A Dynamically-typed Programming Language:
In JavaScript, variables are dynamic and declared at runtime / when the code executes. Variables can also change or be reassigned. As you already know, for example:

let num = 10; // declaring a JS variable
num = “x”; // OK reassigning a JS variable from a number to a string // JS is 100% ok with this

Now, let’s run Math.round() on our num.

console.log(Math.round(num) // logs >> NaN // This result is frustrating when you have dozens or hundreds of lines of code in your codebase. You’re now chasing down the value for: num.

Again, TS is trying to solve potential bugs from the code above.

Defining Types in TS

Let’s take advantage of TS static type checking. To do so, we’ll need to define our types explicitly upon declaration like we would in a statically-typed programming language. A demo perhaps… Below is a side-by-side comparison of functions. One written in JavaScript syntax and the same function in TypeScript, where we explicitly define the function’s type arguments.

JavaScript:

function calcArea(radius) {
return 3.14 * radius * radius; // from grade school // π r² 
}
console.log(calcArea(5)); // logs >> 78.5 // that’s what I expected
console.log(calcArea(‘answer’); // log >> NaN // again with this

TypeScript:

function calcArea(radius: number): number {
return 3.14 * radius * radius; // from grade school // π r² 
}
console.log(calcArea(5)); // logs >> 78.5 // again, expected
console.log(calcArea(‘answer’); // logs >> Error message // now that’s more like it

In TypeScript, you can declare any variable types that you could declare in JavaScript, and bonus, there are a few additional variable types.

Types in Javascript:
number, string, boolean, null, undefined, object
Typescript includes the above and adds:
any, unknown, never, enum, tuple

Examples of TS with Type Variables

let numeric: number = 123_456_789; // type of number
let words: string = 'Typescript'; // type of string
let blog_published: boolean = true; // type of boolean
let stringsArray: string[] = []; // type of array with strings
let person: [number, string] = [1, 'bernie'] // type of tuple // array with 2 values / flaw with push method
let anything; // type any // can be any type // should rarely be used
function calcTax(income: number){ // function with type of number arguments
return income + 100;
}

In VSCode, you can simply hover on a TS variable or TS function invocation and see what type value is expected before running the function. The Typescript compiler catches these type errors before runtime.

In Conclusion

Structure Made for Teams

While on the surface, it may seem like it will take more time writing your code in TS versus JS. Let’s imagine the likely scenario where you’re working with a team of developers on a project. Working on a JavaScript project with a team can sometimes feel like hosting a party where every guest speaks a different language.

And what if you’re working in a codebase you’re unfamiliar with and/or a large codebase, in addition to working with a team... This is a situation ripe for miscommunication and misunderstandings i.e. less effective use of time and more collective time debugging.

With TS type definitions and clear interfaces, TypeScript comes to the party keeping everything nice and tidy AND takes on the role of universal translator. TypeScript helps structure your codebase with known values thereby making it easier to maintain.

Resources:

TypeScript Docs: The best resource usually lies within the core documentation. The TypeScript docs are organized in a way that both beginners and experienced developers can find what they're looking for. Here is a link to the TypeScript Documentation.
TS Setup in less than 10mins | I’d highly recommend watching Alex Ziskind’s YouTube video called TypeScript Set-up in VSCode. He does a really good job of taking things step-by-step in less than 10mins.
TS Deep Dive in about 1 hour | The Programming with Mosh channel from software engineer Mosh Hamedani rarely misses, and Mosh does a great job of explaining TypeScript from nuts to bolts in this 1 hour tutorial: TypeScript in 1 Hour.

I hope this was helpful. Happy coding!

Customizing your Webflow site with jQuery

Bernie January Jr. — Fri, 05 May 2023 18:57:03 +0000

If you’re a designer or web developer and you haven’t yet given Webflow a try, you’re missing out… especially if you’re familiar with jQuery.

First things first. What is Webflow?

Webflow is a unique website building platform used by over a million designers/developers to design modern web experiences with minimal to no code. The Webflow interface allows you to design highly customized web layouts, CSS animations, and frontend visuals in HTML, CSS and JavaScript, without actually having to write every line of code yourself. Also, Webflow has an amazing cadre of curated tutorials via Webflow University and a supportive community of designers/developers that can be found on YouTube, blogs, and the like.

So, why jQuery if Webflow writes the code for us?

jQuery is a rich, popular JavaScript library that makes things like DOM manipulation and event handling much simpler and easier to read. Also, Webflow automatically loads jQuery into all web projects so you don’t even have to import it.

In my experience, it is totally possible to design a great website in Webflow without writing a single line of code.

But… There are a number of instances when it’s easier, faster, and better to write just a few lines of jQuery. There might be situations where your design vision or site functionality would otherwise require a scale back without a bit of code. We’ll walk through a few Webflow-specific examples in a bit.

But… Why jQuery when we could just write JavaScript?

Okay, here’s a quick demo. Let’s say you want to add a ‘click’ event listener to a <button> element. When the button is clicked, text is added to a <p> paragraph element.

As opposed to writing something like this:



const paragraph = document.getElementById('appear-on-click');

document.querySelector('button').addEventListener('click', () => {
  paragraph.innerHTML = "Button has been clicked with JavaScript!"
})

You could write less code with arguably more readable jQuery… for instance:



const $paragraph = $("#appear-on-click");

$("button").click(() => {
  $paragraph.text("Button as been clicked with jQuery!");
});

Again, Webflow already loads the jQuery library on every site automatically.

Before the Click Event:

After the Click Event:

Disable Body Scroll with Open Menu Click

First use case for using jQuery in Webflow:

When creating a custom navigation menu in Webflow, there are a few features you’ll likely want to add to the menu that make the navigation experience more user friendly. One of the most common is to disable page scroll while the navigation menu is open. Here’s how you could handle that.

CREATE ‘scroll-disabled’ CLASS: Inside the Webflow designer, select the body element. You’ll want to add a class of ‘scroll-disabled’ to the body element. Then set that class to Overflow hidden. Then REMOVE that class by clicking backspace/delete within the style selector.
ADD jQuery TO PAGE: Inside the Webflow designer toolbar within the section titled ‘Before </body> tag’, just drop this jQuery function. Be sure to replace the placeholder class name below with the class name of your button. Just click publish in the Webflow designer, and voila!



// replace '.menu-btn-class-here' with the class name of your menu button element and use the jQuery .click method to add a ‘click’ event listener
$(".menu-btn-class-here").click(() => {
 // use jQuery .toggleClass method to add and remove the 'scoll-disabled' class on click
  $('body').toggleClass('scroll-disabled')
})

FYI: Custom code changes added before the page’s closing body tag section will NOT appear in preview BUT will be made to the live staging site after being published.

Close Menu when User Clicks Off Menu

Second use case for using jQuery in Webflow:

Here’s another custom navigation menu feature that is easy to fix with a few lines of jQuery. When creating a custom navigation menu, you’ll want users to be able to close the open menu when they click anywhere outside the menu itself. This provides another way for users to close the menu without actually clicking the close menu button. This really simple feature improves the user experience a ton.

ADD jQuery TO PAGE: Again… Inside the Webflow designer toolbar within the section titled ‘Before </body> tag’, just drop this jQuery function. Be sure to replace the placeholder class names below with your actual class names. Just click publish in the Webflow designer, and voila!



/ Again use the jQuery .click method on the element with the class name of your background div
$(".background-class-name-here").click(() => {
 // replace '.menu-btn-class-here' with the class name of your menu button element
 $(".menu-btn-class-here").click();
})

FYI it’s important that your menu <div> element is not (nested within) a child of the background <div> element as any click on or off the menu element would glitch and close the menu.

There are so many opportunities to upgrade your Webflow site with just a little bit of jQuery. Thanks for reading!

If you’re yearning for more, here are a couple of great resources that I personally reference often:

Timothy Ricks | an amazing Webflow Developer. Here’s a link to his YouTube tutorial on using jQuery in Webflow.
FinSweet | an amazing go-to for everything Webflow. Here’s a link to their page with some great jQuery hacks and tutorials.

Intro to Web Animations

Bernie January Jr. — Mon, 27 Jun 2022 12:24:33 +0000

Everyone loves web animations. Why? because they provide users with perceptual context so that digital interactions look and feel like physical, real-world ones.

That being said… one shouldn’t ambush their users with animations that don’t enhance the user’s experience. The best web animations have real-world feel, are well-timed, and demonstrate purpose.

Purpose-driven Web Animations:

Web Animations or Motion UI ideally supports usability. Here are a few goals to keep usability in mind:

Reinforce what our user EXPECTS to happen minimizing the gap between user expectations and experience. i.e. Clicking on a hamburger menu should expand a user’s next available options.
Guides users through a continual NARRATIVE of events, or a series of scenes we create that culminates in the user experience of the product. i.e. using scroll-in animations to guide the user experience narrative. For Example
Develop CONSISTENT relationships between web elements to guide user understanding. i.e. create a system for how animations engage users by, for example, building consistent button hover events in regards to potential color change, timing, and easing (we’ll focus more on Easing below).

Using Animation or Motion UI to Guide User Experience:

Provide a Visual Response

Animations that reveal state transitions indicating that an interaction has taken place and gives users a response for their engagement. Hover on a button. Color change on a link.

image credit:Nikola Popovic

Emphasize Elements for User Engagement

Animations that bring attention to specific elements to draw users in towards engagement. An indicator to click. A Call-to-Action horizontal scroll banner. A chatbot nudge. An toggle arrow to keep scrolling.

Guide User Focus: Hide / Reveal

Animations that are called upon when information is needed. Navigation menu. Appear on Scroll web elements. Expandable / Collapsable tabs. Elements that reveal themselves upon page scroll.

The Importance of Timing

Most importantly, no animation or motion UI interaction should take more time than a user might reasonably expect. Creating interactions that have long load-times may cause users to disengage with your content, or just keep scrolling, or in the worst case, leave the page or app entirely.

There’s also a key difference between realtime interactions and delayed Interactions.

A real-time interaction or ‘direct manipulation’ is when the user is engaging with web elements directly and those elements respond immediately.

image credit: UX in Motion.

A delayed interaction occur after user input is received, and momentarily pauses the user’s direct engagement until after the interaction transitions.

image credit: UX in Motion.

The Principles of Motion:

The 12 Principles of Motion draws its origins from the 12 Principles of Animation… and I mean animation in the traditional cartoon definition of the word. The principles of animation have been used by Disney animators since the 1930s and were outlined by Ollie Johnson and Frank Thomas in a book called The Illusion of Life: Disney Animation in 1981. While similar conceptually to the Principles of Animation, the Principles of Motion focus on animated interactions that drive user engagement and usability.

image credit: UX in Motion

If you’re really curious about UX motion, I encourage you to follow Issara Willenskomer, the founder of UX in Motion, and read more about the 12 Principles of Motion in Issara’s post here.

Easing Animations in CSS

Starting with the basics and probably the most commonly utilized principle, let’s use CSS transition properties to demonstrate the Easing interactions on few div elements. Again, timing is everything. Here's a little easing cheatsheet to help.

ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end

EASING Code Example with CSS:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
    border-radius: 50%;
  background: #0075F2;
  transition: width 1.5s;
  margin-bottom: 1em;
  margin-left: 2em;
  text-align: center;
  line-height: 100px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: medium;
  color: #FFEAEE;
}

div:hover {
  width: 700px;
}

h1 {
  color: #0075F2;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

#cir2 {transition-timing-function: ease;}
#cir3 {transition-timing-function: ease-in;}
#cir4 {transition-timing-function: ease-out;}
#cir5 {transition-timing-function: ease-in-out;}


</style>
</head>
<body>

<h1>CSS transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="cir2">EASE</div><br>
<div id="cir3">EASE-IN</div><br>
<div id="cir4">EASE-OUT</div><br>
<div id="cir5">EASE-IN-OUT</div><br>

</body>
</html>

What you see in the browser:

Get Inspired. Follow other creators.

I highly recommend following designers, animators, and web developers who design and develop projects that you admire. There are some really talented folks on Behance.net, Dribbble.com, Webflow.com, awwwards.com/, etc.

Sources and More Info:

If you’re just getting started or what to learn more about UX/UI, I would highly recommend checking out the following resources. Thanks for reading.

Awesome: curated list for Motion UI Design: https://project-awesome.org/fliptheweb/motion-ui-design

PageCloud: https://blog.prototypr.io/how-to-use-animations-and-motion-in-web-design-2fd1f68e6e02

Creating Usability with Motion: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

Tools for Animating through CSS:

Animate.css: https://animate.style/tool for making basic animations. Primarily for transitions.

Bounce.js: https://github.com/tictail/bounce.js/blob/master/README.mdlibrary that lets you create and embed animations into CSS.

A Quick Start into Material UI

Bernie January Jr. — Mon, 20 Jun 2022 03:21:43 +0000

If you’re curious about Material UI (MUI), aren’t really sure where to start, and are looking for a short jumpstart guide into setting up MUI components using React. This is for you.

What is Material UI?

A popular UI library that allows developers to reuse well-designed components from Material Design, a best-practice design system for front-end development. MUI plays well with React, and provides interactive components for designing responsive user interfaces.

MUI Has Excellent Documentation

The Material UI documentation provides a ton of information on multiple components from a simple button to nav menus, to tabs, tables, sliders, etc. You name it, and Material UI has a component that fits your needs. The MUI component API documentation is stocked with great information on each component’s properties, a description of the property with it’s default values, CSS rules, Demos, and code examples.

Quickly Getting Started in React & Material UI

1- Let's first get set-up in React. If you already have a React project ready and waiting, you can skip down to "Using MUI Components." If not, in your terminal, make a new folder with the git commands: mkdir and whatever you want your app folder to be called. I’m calling mine: material-ui-app

mkdir material-ui-app

2- Open your project in VScode or whatever local development environment you’re using. In your LDE terminal, you can quickly start-up a new project in react with the git command:

npx create-react app

3- Start the development server with

npm start

4- Then bundle the app into static files for production with

npm run build

React is an article (multiple articles) for another time. For now, we’re going to use it right out of the box and move on to installing what we need to begin using Material UI components.

Using MUI Components

First step, let’s add the Material UI library as a dependency to our React Project, and this will set us up with everything we need to begin importing components. In your LDE terminal type:

npm i —save @material-ui/core

Let's head over to your App.js file and make sure your initial file looks similar to this:



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


function App() {

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

export default App;

We're going to start off with the basics. In our App.js file, let's import a Typography component. We'll need to import the component destructured directly from the MUI Library and add the <Typography> tags directly into our App <div>. Read more via the Typography API documentation . As you can probably tell, we're going to be adding a switch component later so I'll type "Here's Our Switch as our text between the <Typography> component tags.



import React from 'react';
import { Typography } from '@material-ui/core';
import './App.css';


function App() {

  };

  return (
    <div className="App"> 
      <Typography>
        Here's Our Switch
      </Typography>
    </div>
  );
}

export default App;

Let’s customize our Type:

We’re going to use the built-in MUI properties of align, color, and variant.

align
this prop comes with type values of: ‘left’, ‘center’, ‘right’ and ‘justify’

variant
this props uses type values of standard html tags: h1 through h6, and body1, caption, etc.

color
this prop has values of ‘inherit’, ‘primary’, secondary’ etc.
The color of each component is supported by MUI themes. Each color prop is automatically adapted by default per component.

In our example I’ll use: align="center" color="primary" variant="h2", but you should feel free to choose values that you like best.



import React from 'react';
import { Typography } from '@material-ui/core';
import './App.css';


function App() {
  return (
    <div className="App"> 
      <Typography align="center" color="primary" variant="h2">
        Here's Our Switch
      </Typography>
    </div>
  );
}

export default App;

So you might be asking... Where does the color come from? And can I change it? This brings us to the fun part. Themes!

MUI Themes

There’s a lot of great documentation on each component’s theme.

Themes are customizable. I’d recommend taking a deep dive into the default theme object. Found here: https://v4.mui.com/customization/default-theme/#default-theme,

This is where all of our default values are coming from and this is how we are going to gain access to each property that we are going to customize. Default Theme is here to help us keep all styles consistent, a UI best-practice.

Let’s Create our own Theme:

You'll want to create a new js file called theme.js. You can do a lot with the theme object, but for simplicity we're going to focus on customizing the primary and secondary colors.

I've added custom HEX codes to the primary and secondary object. Feel free to choose your own colors. If you're not confident about choosing color palettes, coolors.co is a great place to go to help generate ideas / great color combinations.
Below is an example of my theme.js file.




import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  palette: {
    primary: {
      light: '#b4d6e4',
      main: '#09BC8A',
      dark: '#004346',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

export default theme;

In our index.js we need to import a ThemeProvider and our theme.js file like so:



import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ThemeProvider } from '@material-ui/core';
import theme from './theme'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
     </ThemeProvider>
  </React.StrictMode>
);

Ok, back in the App.js file. Let’s add a switch component just for fun. Again, just head back to the MUI component options. Choose the type of switch you’d like to add to your React app. Use their component code, and voila. As you can see, you’re switch will also inherit the custom theme / color that we created earlier.



import React from 'react';
import Switch from '@material-ui/core/Switch';
import { Typography } from '@material-ui/core';
import './App.css';


function App() {
const [state, setState] = React.useState({
    checkedA: true,
    checkedB: true,
  });

  const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };

  return (
    <div className="App"> 
      <Typography align="center" color="primary" variant="h2">
        Here's Our Switch
      </Typography>
      <Switch
        checked={state.checkedB}
        onChange={handleChange}
        color="primary"
        name="checkedB"
        inputProps={{ 'aria-label': 'primary checkbox' }}
      />
    </div>
  );
}

export default App;

And, here's our type and switch.

In Conclusion

There you have it, your first customized Material UI components. Thanks for reading.

Here are some Free Resources via MUI’s getting started page.
Introduction to Material-UI: a series of videos covering all the important Material-UI components.
- 📹 The videos
Customize Material-UI for your project: a look at how you can customize Material-UI to align with your company identity (design system) and products
- 📹 The videos
Meet Material-UI — your new favorite user interface library: a blog post that guides you in building a Todo MVC while covering some important concepts of Material-UI.
- 📝 The blog post
Learn React & Material-UI: a series of videos covering all the important Material-UI components.
- 📹 The videos
Getting Started With Material-UI For React: a blog post that guides you in building a simple card list.
- 📝 The blog post
- 📹 The video
Elegant UX in React with Material-UI: a blog post covering some important Material-UI concepts.
- 📝 The blog post

An Intro to UX/UI

Bernie January Jr. — Mon, 13 Jun 2022 05:20:56 +0000

Let's begin with the obvious...
Also, be sure to read to the bottom of the page as I provide some additional resources if you're hungry for more.

So, what is UX/UI?

UX/UI is a new term for a design concept that has been around for quite some time, but let’s break the terminology down into its component parts.

UX stands for User Experience. UX is how an end-user i.e. the specific audience you’re developing for: a customer, website visitor, app user, etc. experiences your product from the first touch to last.

UI stands for User Interface. A user interface refers the presentation of your product to your end-user i.e the look and feel of your product, the components of a website or app, and the interactivity of those components.

These design concepts can be applied to the creation of any product like... a car for example: the UX for the driver will depend on the car’s performance, safety features, the drive experience, etc. The car UI for the driver includes: the car’s exterior and interior styling, the dashboard, entertainment console, the steering wheel, how the car presents to the user, etc.

We’ll focus our attention on digital products moving forward, but these design concepts have broad application across many product types.

Human-centered Design:

You’ve probably heard of the term Human-centered or user-centered design within the context of UX/UI, and if you haven’t, we want our products to be user-centered (i.e puts the user front and center) because well, we’re making them for people, and our end-user should be at the center of every design decision.

What does it mean for a product to be Human-centered, I’m so glad you asked. It means our products should specifically be Usable, Equitable, Enjoyable, Useful.

UX | How Users experience your product

Usable - Is it functional? The design and function is clear for everyone to understand. Self-guiding questions one can ask to determine if a product is usable: Can users accomplish specific tasks within the design? Is the functionality of the product easy to understand?
Equitable - Are the needs of a diverse group of users considered? Our products should be inclusive of end-users of diverse abilities and backgrounds. Questions to ask to determine if a product is equitable: Does the product address the needs underrepresented groups? Does the product only work for abled users?
Enjoyable - Does it keep the user engaged? Our goal is to create a positive connection between our users and our product. Questions to ask to determine if a product is enjoyable: Does the product and it’s design inspire delight in the user? Are there aspects of the design that consider the user’s feelings?
Useful - Does it solve a problem? We should make products that add value to people’s lives. Questions to determine if a product is useful: Does the product design solve a problem for the user? Does the design / product help your users achieve a specific goal?

UI | How your product looks & responds to User actions

Creating a Design System: the user interface is the juncture where the user and the product meet through the medium of a digital device like a mobile phone, computer, or tablet. Check out this color system / global color guide from Material Design.

It’s important to keep your product design consistent, coherent, and accessible…. i.e choosing colors with high enough contrast for users to read type while avoiding color combinations that strain a user's vision.

A product’s UI is created with a visual collection of design elements that include typography, color schema, icons & buttons, animations, imagery, and responsive layouts that adapt to device type. Again, I cannot stress enough the importance of consistency regarding these elements because a good design system reinforces user confidence, coherence, and product usability.

The Product Development Lifecycle

Everyone wants to dive in and create prototypes, but developing a great product requires quite a few steps before jumping into prototyping. Because a product's UX and UI are informed by one another and most importantly, the end user. Product development is a cycle of research, iteration, and testing.

image credit: Google UX

Brainstorm
Initial process for coming up with ideas for/about product.
Define
Defining the product. Who is the end user for this product? What will the product do? What features are needed to be successful? Pin down the focus of the product.
Design
Draw wireframes, create low-fidelity prototypes & high-fidelity, and create early models/user-flows of the product’s functionality.
Test
Test the product with users to consider the interactivity of product design and decide what might need to change based on user feedback.
Launch
Sharing a finished version of product with the public
Real-world understanding

Back to Prototyping & Using Prototypes in Development

I know what you’re here for. Adobe XD and Figma are the most common and widely used design tools for building UI Prototypes. There are some great tutorial resources out there, but Adobe XD's Start Page and Figma's Learn Design Page are great places to start.

Use the built-in developer tools: in Adobe XD:
Use the share tab to export a development friendly link that includes CSS.

Use built-in developer tools: in Figma:
Use the inspect tab and the ALT or OPTION key to inspect your UI prototype that includes CSS

Inspect the CSS
Be sure to test the CSS taken from any prototype. You should be especially careful of the prototype's CSS position. In most cases, your UI prototype will default to absolute, which won't give you the responsive elements that you likely desire.

For More Info

If you’re just getting started or want to learn more about UX/UI, I would highly recommend checking out the following resources.

Resources Links:

Thanks for reading. If you found this content useful, every like and share is appreciated.

** cover image designed by: Freepik **

Your Icons should probably be SVG files. Here’s why.

Bernie January Jr. — Sun, 24 Apr 2022 22:43:46 +0000

After reading this, you may never use a .PNG file for an icon again.
First things first.

What is an .SVG file?

An SVG (Scaleable Vector Graphic) is a popular, web-friendly file format.

The advantages SVG files have over PNGs or JPGs:

Unlike raster files (i.e. JPGs and PNGs), which are made up of pixels, vector graphics like SVGs always maintain their resolution no matter how large or small you make them. No more blurry icons! You need not worry about SVGs losing their visual quality in certain browsers or when you resize them to appear in different places.

Basic SVG files often have smaller file sizes than PNGs or JPGs, which are built from tons of pixels as opposed to mathematical algorithms.

Because SVG files treat text as text, screen readers can scan any words contained in SVG images. Therefore, your website is more accessible and useful for people who need help reading webpages. Search engines can also read and index SVG image text.

If you’re interested in learning more, here's an SVG deep dive from Adobe: here.

Now for the fun part… adding SVGs to your project.

How to Add SVGs to your website:

You can insert SVGs directly into your HTML file and easily adjust them with CSS.

Let’s break it down step-by-step:

STEP 1: Create an SVG file or Find an SVG file:
When creating an SVG, it’s best-practice to use a vector graphics editor like Adobe Illustrator. Not a designer; not to worry. You can find free SVGs and/or purchase SVGs on sites like: The Noun Project or Icons8.

I’m saving this example SVG via Adobe Illustrator.

Step 2: Get the SVG code:
The easiest way to get your SVG file’s code is simply to right-click the file and open it in a simple text editor like TextEdit. I’m also going to change the attribute id to “icon” inside of my svg tags, but feel free to give your id any name you like. Like so: <svg id=”icon”… ></svg> Now, select all of the text starting from the SVG open tag through to the close tag <svg id=”icon”…. ></svg> and copy it (CMD + C on a Mac or CTRL + C on Windows).

Step 3: Adding your SVG code into your project:
There are a few ways to do this. So, feel free to go off-script here if you have a preferred method for adding elements to the body of your html file. Especially if you’re looking to place your SVG inside a specific <div>.

But for simplicity's sake, I’m going to paste (CMD + V on a Mac or CTRL + V on Windows) my SVG code directly inside the body tag of my html file: <body> (paste here) </body>.

<body id="body">
  <svg id="icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path

d="M12,.92A11.08,11.08,0,1,0,23.08,12,11.08,11.08,0,0,0,12,.92Zm5.52,15.191.41,1.41L12,13.41,7.89,17.52,6.48,16.11,10.59,12,6.48,7.89,7.89,6.48,12,10.59l4.11-4.11,1.41,1.41L13.41,12Z" />
  </svg>
</body>

This is what you should see when you preview your html file.

Step 4: Styling your SVG code:
You can style your SVG any way you’d like. Choose the colors, size, attributes, etc. that fit your fancy. I’m going to change the size of my SVG to 5em. (Yes, I know that's too big. Ignore that... it's for screenshot visibility.)

In your CSS file, type: '#icon', which references id="icon" in your SVG code in your html file, and within the curly brackets, type: 'width: 5em;' or whatever size width you'd like your icon to be.

#icon {
  width: 5em;
}

This is what you should see when you preview your html file.

I'm going to change the fill color of my SVG to blue in my project’s CSS file.

#icon {
  width: 5em;
  fill: blue;
}

Again, this is what you should see when you preview your html file.

And there you have it. Easy-peasy lemon squeezy.

It’s also pretty simple to add hover effects or animations to your SVG file with CSS. Design, experiment and iterate away.

If you liked this article, give it a like, share, or comment.
Thanks for reading.