DEV Community: Stephen Smith

New Emojis

Stephen Smith — Wed, 25 Sep 2024 00:12:06 +0000

The Unicode emoji standard edition 16 was released September 2024. https://www.unicode.org/emoji/charts/full-emoji-list.html

Emoji Name	Unicode Character
Harp	"\u1FA89",
shovel	"\u1FA8F",
leafless tree	"\u1FABE",
fingerprint	'\u1FAC6'
root vegetable	'\u1FADC'
splatter	'\u1FADF'
face with bags under eyes	'\u1FAE9'

Emoji Favorite Icon

Stephen Smith — Tue, 16 Jul 2024 17:01:52 +0000

I would like to improve the post from CSS Tricks. In this post the author demonstrated how to use an emoji as a favorite icon. This is a neat trick, but It doesn't feel right to me. So I will show how to convert it to a data-uri.

Steps

1 Create a new file create-data-uri.ts.
2 Save the following code snippet as icon.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">🎯</text>
</svg>

3 Add an import to create-data-uri.ts from the "fs" module import {readFile} from 'fs'.
4 Create a function to create the data-uri as follows.

const asDataUri = (image: string) => `data:image/svg+xml;base64,${image}`

4 The function to encode the file would be as follows.
1 use 'base64' as the encoding parameter.
2 omit the 'base64' encoding parameter and use the toString method on the buffer with a value of "base64"

readFile(filename, 'base64', (readError, text)=> {
 if (readError) return readError
 return asDataUri(text)
})

or
readFile(filename, (readError, buffer)=>{
  if (readError) return readError
  return asDataUri(buffer.toString('base64'))
})

Now just copy that value and use it in the place <img src="string from function".

Reference:
https://css-tricks.com/emoji-as-a-favicon/

TypeScript Adventures: Prop Drilling Down the Rabbit Hole

Stephen Smith — Thu, 16 May 2024 18:40:59 +0000

Today we will describe how to effectively use Typescript with VueJS. I prefer modular code bases as they can follow some S.O.L.I.D principles: Single Responsibility, Open-Close Principle, and Interface (Type) Segregation. The task for to day is; Given a Vue-Router and associated routes, create an array of relevant properties for a MainNavigation component.

TLDR-Code example

The Code

Modal State Management - Using Pinia we will handle state for modals, pop-up, pop-overs, and message. Using state management will help keep snippets together based on their functionality. We will also neither have to provide nor inject the state as we would with reactive or ref objects.
Main Navigation - A presentation component which will house our top navigation bar. The navigation bar will have a hamburger menu that will toggle based on a media queries. Having a json file or a module can keep the associated data in a single location. As the project gets bigger, It can prevent duplication, improve maintainability (making source control history streamlined), and provides a single source of truth for navigation. We will add a bottom navigation page as well in the future.
Main Application - In the main application ./src/App.vue import and render the main navigation component.
Route

Create ./src/router/routes.ts which will contain an array of routes. These routes can have metadata which can be anything. The data can be attached to events, analytics, to protect routes, or refresh data from backend(database). The possibilities are endless, but we will cover that in a later topic.

2.Take the scaffolded ./src/router/index.ts and break it into parts. Break the file into the following parts.

Refactoring/Stretch Goals

In the MainNavigation module located at src/components/navigation/main-navigation.vue the useModal store can be destructured by using the storeToRefs provided by piñia see docs.
Destructure route in RouterLink loop. This will clean up the syntax a bit and reduce the amount of code that is written. You can always destructure additional parameters as needed.

Mastering The Heap: How to Capture and Store Images from Fetch Responses

Stephen Smith — Thu, 02 May 2024 15:02:49 +0000

As software developers we at times do not invest the time to understand how things work.

We always hear the adage "Don't reinvent the wheel."

This mindset can stifle creativity and a failure in advancement of our technical knowledge. This will result in less rewarding and fulfilling personal and professional lives.

To build up my previous post where our API presented an image to the browser, we will attempt to look into fetching and saving an image from an API. Why do we need this? We don't, but why not 🤷🏿.

There are many posts related to this topic, and not many approach the topic in a runtime agnostic fashion. Many examples use the DOM (Document Object Model) to accomplish this task. Today we will use a set of JavaScript runtime agnostic utilities; let's get started.

When in doubt READTHEDOCS

TLDR;

Security Considerations:

While we will attempt to use best practices, any code should be scrutinized. Do not use this in production without a approval from your organization, pentesting (penetration testing) to verify it follows your organizations safety guidelines.

Requisite Knowledge:

Data encoding (Hexadecimal, base64, ascii, utf-8, utf-16).
Fetch API (outside libraries will require additional steps).
System I/O (input/output) calls.
Asynchronous vs Synchronous programming.
Types of media (image, audio, and video)

The Setup

Install depencies.
1. curl -fsSL https://bun.sh/install | bash
Fetch/AJAX.
1. Native Fetch
2. node-fetch.
3. axios
Setup a bun-flavored project.
```
mkdir sample
cd sample
bun init
```
Setup Testing
- create a feature folder to house our testing. This should help prevent your shell's autocomplete suggestions when running the "test" command.
```
mkdir features
```
- sample test module.

Technology

ECMA Script
Data Producer
1. Random image generator API. picsum

The Code

Helper Function

Change from header keys from kebab-case to camelCase.
- Package Dependents Change Case
- DIY
  - Create a replacer function that will handle our results from the String.replace function.
  - create the case change function
  - create a function to convert case for the header's keys.
Create a jpeg image processing function. The call to the API will return a JPEG/JPG image, so we will not worry with other images.
Create a helper function to extract the content disposition header.

Fetching The Data

Prepare the object to request a new random image.
Make network request. We will be reading the raw data from the response. I do not recommend using any other library as you will have to contend with encoding as well as creating a Buffer, Blob, or TypedArray. So lets just cut the extra steps out.

Save The Data

the penultimate step is to save the data. You will have to figure this part out on your own (It's just import statements, and calling the function). I am not gonna give you everything silly.
The last step is to open the image and see what you got.

Testing

Maybe Later

Example Code

import { createWriteStream } from 'fs'
class FileNameError extends Error {
    constructor(filename:unknown) {
      super(
        `Incorrect data give for file name. Expected a string received: ${!filename ? typeof filename : filename.constructor.name}`,
      );
    }
  }
type ParsedResponse = {
    [x: string]: any;
    body?: Response;
}
/**
 * see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 */
const mediaExtensionyTypes = new Map([
    ['jpg', 'image/jpeg']
])

const headerCaseChange = (sentence: string) => sentence.replace(/\-\w/g, (word) => word.toUpperCase().slice(1))
const getFileName = ({ contentDisposition }: Record<string, string>) => contentDisposition.split(";").reduce((accum: Record<string, string|null>, current: string)=> {
    const [key, val] = current.split("=")
    const value = JSON.parse(val?.trim()||"null")
    return {...accum, [key.trim()]: value }
}, {})
const prepareFetch = async () => new Request(new URL('https://picsum.photos/536/354'),{ mode: 'cors' })
const getHeaders = (headers: Headers) => [...headers.entries()].reduce((accum, [key, value]: string[]) => ({...accum, [headerCaseChange(key)]: value}), {})

const processJpegImage = async ({ value }: ReadableStreamReadResult<Uint8Array>) => {
    if (!value?.byteLength) return 'none'
    const [ a, b, c] = value
    if (a === 0xff && b === 0xd8 && c === 0xff) return 'jpg' 
}
const fetchImage = async (): Promise<ParsedResponse> => {
    const request = await prepareFetch()
    const {headers, body} = await fetch(request)
    const reader = body?.getReader()
    const data = await reader?.read()
    if (typeof data === 'undefined') return {}
    const extension = await processJpegImage(data)
    return { extension, headers: getHeaders(headers), data}
}
const saveResponse = async () => {
    const { headers, data, extension } = await fetchImage()
    const mediaType = mediaExtensionyTypes.get(extension) ?? 'application/octet-stream'
    const { filename } = getFileName(headers)
    if (!filename) return new FileNameError(filename)
    const stream = createWriteStream(filename)
    stream.write(data.value)
    return { extension, mediaType, filename, }
}

Inspiration was for this post came from this blog post. Saving and Image...

Resources:

OWASP File Upload Cheatsheet