DEV Community: aronsantha

> Dynamic SVG in Vue with Vite

aronsantha — Thu, 06 Jun 2024 20:06:31 +0000

Let me show you a super useful implementation of Vite's Glob Imports: creating a wrapper component for displaying SVGs.

This Vue 3 component below imports all files that

are located in /src/assets/svg folder, and
have .svg extension

// BaseSvg.vue

<template>
  <div v-html="svg" v-if="svg"></div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

const props = defineProps<{
  name: string;
}>();

const modules = import.meta.glob("/src/assets/svg/*.svg", {
  query: "?raw",
  import: "default",
  eager: true,
});

const svg = computed(() => {
  return modules["/src/assets/svg/" + (props.name ?? "") + ".svg"] ?? null;
});
</script>

Here's what we need to do when we add a new SVG to the project:

Drop the file in the /svg folder
Import the BaseSvg component and use it in the template
Pass the filename we want to display, as the name prop.

// script
import BaseSvg from "@/components/BaseSvg.vue";

// template
<BaseSvg name="heart-icon" class="w-12 text-slate-500" />

💡TIP: Set each svg file's width and height to "100%", and fill (or stroke) to "currentColor". This will help with adding styles to the component. Eg.:

// heart-icon.svg

<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z" fill="currentColor"/>
</svg>

So, there you have it. This wrapper component comes really handy in projects that use many custom icons. It helps DRYing up the code and keeping maintenance at a minimum.

Good luck, and have fun using it!

> Digital Accessibility 2: HOW

aronsantha — Fri, 20 Oct 2023 15:31:49 +0000

Digital accessibility (abbreviated as a11y) is about:

designing and building digital products...
so that they can be used in a meaningful and equal way...
by as many people as possible — including those with disabilities.

HOW: How can you measure and improve it?

Using accessibility standards, such as:

local and international laws, policies and industry standards
Web Content Accessibility Guidelines (link)

Web Content Accessibility Guidelines (WCAG)

Facts:

Gold standard for digital accessibility.
Created for: app designers and developers.
Created by: the creators of the World Wide Web, in association with international organizations and governments.

Three levels (read more):

Level A: Basic (30 rules)
Level AA: Strong (Level A + 20 rules)
Level AAA: Excellent (Level AA + 28 rules)

POUR Principles:

Facts:

First step towards accessibility, based on WCAG.
Human centric: Instead of hard-and-fast rules, it helps you understand the diverse needs of your users (including people with disabilities), and facilitating those needs.
Four aspects: Perceivable, Operable, Understandable, and Robust.

1. Perceivable 👀

Consider:
Can all users perceive all essential information on the screen?

Tips:
Some ways to make your product more perceivable:

Offer alternative ways to access information.
- text content: screen-reader friendly (mark-up for headings, lists, tables etc), translations, simplified language.
- non-text content (images, videos, charts): descriptions, captions, transcripts.
Make content easier to see and hear.
- provide sufficient contrast between the background and foreground elements (text, graphics, buttons etc)
- ensure color is not the only method of conveying meaning.
- ensure users can pause, stop, and adjust the volume of audio and video content.
- ensure no information is lost when users resize text up to 400%

2. Operable 🖱️

Consider:
Can all users interact with all interactive elements of your product?

Tips:
Some ways to make your product more operable:

Ensure that all functionality that is available by mouse is also available by keyboard and touch-screen (click, scroll, navigate)
Provide necessary controls for page-navigation (Go back, breadcrumb), slideshows and videos.
Give users enough time to fill out a form or a method to extend the time.

3. Understandable 🧠

Consider:
Can all users understand the operation of the UI and the information presented on it?

Tips:
Some ways to make your product more understandable:

Write clear and simply:
- avoid complex words wherever possible, and provide interpretation for any unusual words, abbreviations, symbols.
Ensure predictability and consistency:
- provide predictable navigation mechanisms
- make sure repeated components look and behave the same way
Ensure error messages are clear and easy to resolve.

4. Robust 🔌

Consider:
Is your app compatible with different devices, browsers, assistive technologies, and other user agents?

Tips:
Some ways to make your product more compatible:

Ensure content is consistently accessible:
- with different screen reader technologies
- regardless of screen size and orientation

Note: This post is part of a series on digital accessibility. The content of this series is based on various resources, including the Learn Accessibility course.

> Digital Accessibility 1: WHY and WHO

aronsantha — Fri, 20 Oct 2023 14:51:11 +0000

Digital accessibility (abbreviated as a11y) is about:

designing and building digital products...
so that they can be used in a meaningful and equal way...
by as many people as possible — including those with disabilities.

WHY: Why focus on it?

Over 15% of the world's population self-identify as having a disability. By catering to them, you broaden your audience. (You also avoid getting a bad reputation and facing discrimination lawsuits).
When you design for accessibility, you also enhance the user experience for everyone else. (This is called the curb-cut effect).

Let me do the math for you:

larger audience + happier users = increased revenue

WHO: Main groups to consider

1. Visual impairments 👁️

Examples: blindness, low vision, color blindness
Prevalence (worldwide): 13% vision loss, 3% color blind
Pain points:
- digital products that do not work with screen reader software
- mobile websites/apps without pinch to zoom, complex graphs and charts differentiated by colors alone
- color contrasts that make it difficult to read text on the screen

2. Mobility impairments ♿️

Examples: arthritis, paralysis, amputees, seizure disorders
Prevalence (worldwide): 1 in 7 people
Pain points:
- elements that are only designed to work with the use of a mouse.

3. Hearing impairments 👂🏼

Examples: deafness, heard of hearing
Prevalence (worldwide): 20%
Pain points:
- audio content without text transcripts
- video content without well-synchronized captions

4. Cognitive impairments 🧠

Examples: Down's syndrome, autism, ADHD, dyslexia, aphasia
Pain points:
- busy interfaces that make it overly complicated to focus on the task at hand,
- large blocks of (justified) text with minimal whitespace
- small or hard-to-read fonts

+1. Others who can benefit from improved accessibility

Temporarily disabled: a person with a broken leg, or with slower thinking due to medication.
Situationally disabled: a person experiencing glare on a device screen or someone watching a video without sound on the train.
Mildly disabled. A person needing eyeglasses to see a screen or captions to understand audio.
Older people with age-related diminishing senses, eg. vision, grip, cognitive abilities.
Non-native speakers: they can take longer time to understand content.
SEO bots

Note: This post is part of a series on digital accessibility. The content of this series is based on various resources, including the Learn Accessibility course.

> From flexbox 101 to flex-grow 9999

aronsantha — Fri, 13 Oct 2023 09:27:24 +0000

I love responsive design - making sure my app can scale across all screen sizes. But here's the thing: I also want to avoid media queries whenever possible. Why? Because breakpoint are too rigid, too "hardcoded".

Flexbox 101

So, the other day I had to place two DIVs next to each other - if they fit. And if they don't, then stack them on top of each other.

Easy: Apply display: flex and flex-wrap: wrap on their parent container.

Okay, now how to make sure they fill in the available room both when they are inline, and also when they are stacked?

Add flex-grow: 1 to both DIVs.

The trick:

So far, it's been Flexbox 101. But here comes the tricky part: I want DIV2 to expand as wide as it can, and shrink DIV1 to its minimum.

Removing flex-grow from DIV1 would solve this issue when the DIVs are in a row, but it would prohibit DIV1 from growing when they are stacked.

So what do we do?

Change flex-grow: 1 to flex-grow: 9999 on DIV2.

Now, the two DIVs behave as required:

If they fit next to each other: they fill up the container's width, with DIV2 getting priority to take as much room as possible, shrinking DIV1 to its minimum width.
If they don't fit in a row: the DIVs wrap under one another, and they each expand to the container's width.

> Merging arrays (with and without duplicates)

aronsantha — Fri, 29 Sep 2023 08:59:13 +0000

Today, I ran into a situation where simply merging two arrays was not enough: the new array had to only include unique values. Let's see how I tackled it.

Before: Using Spread Operator to Combine Arrays:

To merge two arrays and include all elements from both, we can use the Spread operator like this:

return [...arrayOne, ...arrayTwo];

After: Using Set to Remove Duplicates:

To include only unique elements from each array, we can use Set:

return [...new Set([...arrayOne, ...arrayTwo])];

Let's break down how this solution works:

First, we merge the two arrays using the spread operator - just like we did before:

[...arrayOne, ...arrayTwo]
Then, we wrap the result in a new Set, which removes duplicates.

new Set([...arrayOne, ...arrayTwo])
Finally, we convert the Set into an array using the spread operator.

[...new Set([...arrayOne, ...arrayTwo])]

> Remove formatting for test data

aronsantha — Sun, 24 Sep 2023 13:05:43 +0000

Use <pre> tags during development to print data with unformatted text. It will:

display a fixed-width font, and
preserve spaces and line breaks.

FYI, most browsers use these styles to format <pre> tags:

  display: block;
  font-family: monospace;
  white-space: pre;
  margin-top: 1em;
  margin-bottom: 1em;

> ACCESS GRANTED

aronsantha — Fri, 25 Aug 2023 09:17:34 +0000

Hey Future/Past Aron,

I've been worried sick you wouldn't find my Multidirectional Chronocapsule... But you did! Well done! 🙌🏻

Sidenote:

If you happen to be an imposter (and NOT Aron), I've got a couple of things to tell you:

Firstly: Shame on you for reading my personal notes! 😠
Still, your Multidirectional-Chronocapsule-finding skills amaze me! So, go ahead and take a look... and I hope you'll find my notes useful. 🤗
And if they don't quite cut it: tough luck! That's what you get for snooping through my private stuff. 😠

End of sidenote.

Now, I know what you're thinking: what the heck is a Multidirectional Chronocapsule? 👀

Well... it's a time capsule that defies temporal constraints, offering access to its contents across the space-time continuum.

In very simple terms (I'm looking at you, Curious George): I'm using it to send notes for myself in the past (things I wish I knew before) and in the future (stuff that I should remember later).

The notes typically (but not always) fall into one of these three categories:

Note to Self: Personal discoveries, reflections, and practical takeaways from my professional journey as a software engineer.
Code Capsules: Code snippets of clever solutions and not-so-clever-but-life-saving hacks.
Learning Archives: Documenting the lessons and wisdom gained from external sources (courses, books, etc).

Alright, I've gotta go! And you can dive right in... 😉

See you around! 👋

Aron