Forem: kohki_takatama

TIL: Tag Function / Tagged Template Literals

kohki_takatama — Wed, 08 Jan 2025 23:56:49 +0000

Overview 🔍

Tagged Functions, also known as Tagged Template Literals, are an advanced feature of template literals introduced in ES6 (2015). They enable more control over how template literals are processed, allowing for custom formatting, parsing, or even validation.

One popular use case for tagged template literals is in GraphQL for building query strings dynamically.

Syntax

Definition

A tagged template literal is a combination of a "tag function" and a template literal. The tag function receives the literal's strings and interpolated values as arguments, enabling custom processing.

Here’s a basic example:

const bar = "var bar";

function tag(strings, ...values) {
  console.log(strings); // Array of string literals
  console.log(values);  // Array of interpolated values
}

Usage

tag`foo ${bar} baz`;

// Output:
// ['foo ', ' baz']  // Array of strings
// ['var bar']       // Array of values

Use Cases

1. Internationalization (i18n)

Tagged template literals can be used to process strings dynamically for localization.

Example:

function i18n(strings, ...values) {
  const translations = {
    "Hello, ": "Hola, "
  };

  return strings.reduce((acc, str, i) => {
    const translatedStr = translations[str] || str; // Translate if possible
    return acc + translatedStr + (values[i] || '');
  }, '');
}

const name = "Alice";
const result = i18n`Hello, ${name}!`;
console.log(result);
// Output: "Hola, Alice!"

2. GraphQL

In GraphQL, tagged template literals are widely used to define and manipulate query strings.

Example:

const query = gql`
  query {
    user(id: 1) {
      name
      age
    }
  }
`;

3. Handling Arguments with Tagged Template Literals

Tagged template literals can also process arguments by passing an additional value to the tag function and applying functions within the template literal.

Example:

function tagged(baseValue) {
  return function(strings, ...functions) {
    return strings.reduce((acc, str, i) => {
      const value = typeof functions[i] === 'function' ? functions[i](baseValue) : '';
      return acc + str + value;
    }, '');
  };
}

const result = tagged(2)`foo${n => n * 0}bar${n => n * 1}baz${n => n * 2}`;
console.log(result);
// Output:
// "foo0bar2baz4"

Discussion and Insights 💭

Tagged template literals enable dynamic string processing with custom logic, making them ideal for use cases like query building, internationalization, and input sanitization. They improve code readability and maintainability, especially in scenarios requiring advanced string manipulation.

References

TIL: Why Does a SPA Have Multiple URLs? 🤔

kohki_takatama — Fri, 27 Dec 2024 04:49:21 +0000

What is SPA

A Single Page Application (SPA) is a web application that interacts with the user by dynamically rewriting the current page, rather than loading entire new pages from the server.
Antonym: Multi-Page Application (MPA), where each page load requires a server request.

Why Does a "Single Page" Have Multiple URLs?

Even though a SPA is designed as a single page, it often mimics traditional multi-page behavior by updating the browser's URL dynamically.
This dynamic URL change serves multiple purposes:
- Enabling features like bookmarking, deep linking, and maintaining browser history for a better user experience.
- Treating URL changes as events to trigger application state updates and screen re-renders.

How Does a "Single Page" URL Change?

SPAs use the History API—specifically, methods like history.pushState() and history.replaceState()—to update the URL without reloading the page.

Why Doesn't a Page Reload Work in SPAs?

A page reload in a SPA results in a request to the server for the current URL, which often leads to a 404 error unless the server is configured to handle SPA routing (e.g., serving the SPA's index.html for all routes).
To avoid this issue, developers use tools like client-side routing (e.g., React Router) and server-side configuration to properly handle SPA routes.

Reference

https://qiita.com/ozaki25/items/41e3af4679c81a204284

How to Validate Inputs Using Only HTML

kohki_takatama — Mon, 16 Dec 2024 09:24:51 +0000

Overview 🔍

Validation refers to checking user input and ensuring that it meets specified criteria. If the input is invalid, it can be rejected or adjusted accordingly.

Let's take a look.

type=file: `accept`

<input type="file" accept="image/png">
<input type="file" accept="video/*">
<input type="file" accept="video/*">

The accept attribute restricts the input to specific file types.

For example, accept="image/png" denies the selection of .jpg files.

We can also use * as a wildcard. For instance, accept="video/*" accepts .mp4 and .webm files.

type=file, select: `multiple`

<input type="file" accept="video/*" multiple>

File and select input fields accept one value or file by default.

Using the multiple attribute allows inputting multiple values or files.

type=text etc.: `pattern`

<input type="text" pattern="[a-z]*">
<input type="text" pattern="[a-z]*">
<input type="text" pattern="[a-z]*">

input:invalid {
  border: red solid 3px;
}

The pattern attribute allows using regular expressions to validate input.

If the input does not match the regular expression, the patternMismatch property is set to true, applied the :invalid CSS pseudo-class.

type=text etc.: `maxlength` / `minlength`

<input type="text" maxlength="15">
<input type="text" minlength="5">

input:invalid {
  border: red solid 3px;
}

The maxlength attribute limits the maximum number of characters a user can input, while minlength sets the minimum required characters.

If the input does not meet the minlength requirement, the field is marked as invalid (:invalid CSS pseudo-class).

type=number, range: `step` / `min` / `max`

<input type="number" step="1" min="0" max="100">
<input type="range" step="5" min="0" max="50">

The step attribute specifies intervals between allowed values for number or range input types. For example:

step="1" allows only whole numbers.
step="5" in a range input lets users select values in increments of 5 (e.g., 0, 5, 10, ...).

Use the min and max attributes to restrict the range of values further.

type=any: `required`

<input type="text" required>
<input type="text" required>

input:required {
  border: blue solid 3px;
}
input:invalid {
  border: red solid 3px;
}

Fields with the required attribute are styled using the :required CSS pseudo-class and marked as invalid with the :invalid pseudo-class if left empty.

type=any: `readonly` / `disabled`

<input type="text" value="Read-only" readonly>
<input type="text" value="Disabled" disabled>

These attributes disable some validation.

The readonly attribute makes an input field non-editable while still allowing users to select and copy the value.
The disabled attribute disables user interaction with the field entirely, meaning the value cannot be edited, copied, or submitted with the form.

form: `novalidate` / `formnovalidate`

<form novalidate>
  <input type="text" required>
  <button type="submit">Submit</button>
</form>

<form>
  <input type="text" required>
  <button type="submit" formnovalidate>Submit Without Validation</button>
</form>

The novalidate attribute disables form validation for the entire form. This is useful for debugging or custom validation using JavaScript.
The formnovalidate attribute can be added to individual submit buttons to bypass validation for specific submissions.

Discussion and Insights 💭

HTML provides many built-in validation attributes to enhance user experience and ensure valid data. These attributes can reduce the reliance on JavaScript for basic validation, simplifying your codebase.

However, it's essential to test validation behaviors across different browsers to ensure consistency. Always combine client-side validation with server-side validation for robust and secure input handling.

Thank you for reading! 🙌

TIL: LIFO Solution and Regular Exprresion Techniques【CodeWars】

kohki_takatama — Thu, 05 Dec 2024 08:21:42 +0000

Overview 🔍

The challenge Directions Reduction ask you to find shortest route from array of directions.

Examples:

Input
-> Output
["NORTH", "SOUTH", "SOUTH", "EAST", "WEST", "NORTH", "WEST"]
-> ["WEST"]
/* 
Because moving "NORTH" and "SOUTH", or "EAST" and "WEST", is unnecessary.
*/

/* 
Case: omit the first "NORTH"-"SOUTH" pair 
["NORTH", "SOUTH", "SOUTH", "EAST", "WEST", "NORTH", "WEST"]
-> ["SOUTH", "EAST", "WEST", "NORTH", "WEST"]

Case: omit the "EAST"-"WEST" pair 
-> ["SOUTH", "NORTH", "WEST"]

Case: omit the "NORTH"-"SOUTH" pair 
-> ["WEST"]
*/

// this case cannot be reduced:
["NORTH", "WEST", "SOUTH", "EAST"]
-> ["NORTH", "WEST", "SOUTH", "EAST"]

Solutions 1: LIFO

function dirReduc(plan) {
  var opposite = {
    'NORTH': 'SOUTH', 'EAST': 'WEST', 'SOUTH': 'NORTH', 'WEST': 'EAST'};
  return plan.reduce(function(dirs, dir){
      if (dirs[dirs.length - 1] === opposite[dir])
        dirs.pop(); // Remove last direction if it's the opposite
      else
        dirs.push(dir); // Otherwise, add current direction to the stack
      return dirs;
    }, []);
}

This is a LIFO (Last-in-First-out) approach implemented using reduce.

Steps:

Declare an empty stack (dirs)
For each direction in the input array (plan), check if the last element of the stack (dirs) is the opposite of the current direction
If they are opposites, pop the last element from the stack (and skip current direction). Otherwise, push the current direction onto the stack.
Repeat this process until all directions have been processed.

Solutions 2: Regular Expression

function dirReduce(arr) {
  let str = arr.join(''), pattern = /NORTHSOUTH|EASTWEST|SOUTHNORTH|WESTEAST/;
  while (pattern.test(str)) str = str.replace(pattern,''); // Remove pairs while they exist
  return str.match(/(NORTH|SOUTH|EAST|WEST)/g)||[];
}

Alternative Version:

function dirReduc(arr) {
  const pattern = /NORTHSOUTH|EASTWEST|SOUTHNORTH|WESTEAST/;
  let str = arr.join('');

  while (pattern.test(str)) {
    str = str.replace(pattern, ''); // Remove pairs while they exist
  }

  const result = str.match(/(NORTH|SOUTH|EAST|WEST)/g);
  return result || [];
}

Steps:

Join the input array (arr) into a single string so we can manipulate it using regular expressions.
Define a regular expression (pattern) that matches opposite direction pairs (e.g., 'NORTHSOUTH', 'EASTWEST').
Use the replace method in a loop to remove any direction pairs found by the regular expression.
After all pairs have been removed, use the match method to extract the remaining directions from the string and return them as an array.

Discussion and Insights 💭

I believe the minimum case for this solution is as follows:

1. ["SOUTH", "EAST", "WEST", "NORTH"]
-> []

2. ["NORTH", "WEST", "SOUTH", "EAST"]
-> ["NORTH", "WEST", "SOUTH", "EAST"]

I prefer Solution 2, as it is concise and uses regular expressions in a clever way. Initially, I couldn't imagine solving it with regular expressions, but the use of join, match, while, replace, and test methods to eliminate pairs is impressive.

If you're curious about these solutions or want to explore more challenges, visit here.
Welcome to leave a comment below!

Thank you for reading 🙌

TIL: How to Trim Trailing Zeros【CodeWars】

kohki_takatama — Mon, 02 Dec 2024 22:02:38 +0000

Overview 🔍

The challenge No zeros for heros which is 8kyu (easiest level), requires removing trailing zeros from a number while preserving its integrity.

Examples:

Input -> Output
1450 -> 145
960000 -> 96
1050 -> 105
-1050 -> -105

Solutions 1

function noBoringZeros(n) {
  while (n % 10 === 0 && n !== 0) {
    n = n / 10
  }
  return n
}

Procedural programming approach using while loop.

Solutions 2

const noBoringZeros = n => n % 10 === 0 && n !== 0 ? noBoringZeros(n / 10) : n;

Declarative programming approach using recursion.

Solutions 3

function noBoringZeros(n) {
  return +`${n}`.replace(/0*$/, "");
}

Uses a regular expression to remove trailing zeros.
Converts the number to a string using template literals (${}), applies .replace(), and reconverts the result to a number using the + operator.

Solutions 4

[][(![]+[])[+!![]]+(!![]+[])[+[]]][([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+([][[]]+[])[+!![]]+(![]+[])[!
![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]]
)[+!![]+[+[]]]+(!![]+[])[+!![]]]((!![]+[

(here's an excerpt)

Overly complex solution. (but I like it.)

for more information, visit here

Discussion and Insights 💭

I prefer "Solution 3" because it's simple and reader-friendly while still demonstrating some useful techniques.

If you're curious about these solutions or want to explore more challenges, visit here.

Thank you for reading! 🙌

Forem: kohki_takatama

TIL: Tag Function / Tagged Template Literals

Overview 🔍

Syntax

Definition

Usage

Use Cases

1. Internationalization (i18n)

2. GraphQL

3. Handling Arguments with Tagged Template Literals

Discussion and Insights 💭

References

TIL: Why Does a SPA Have Multiple URLs? 🤔

What is SPA

Why Does a "Single Page" Have Multiple URLs?

How Does a "Single Page" URL Change?

Why Doesn't a Page Reload Work in SPAs?

Reference

How to Validate Inputs Using Only HTML

Overview 🔍

type=file: accept

type=file, select: multiple

type=text etc.: pattern

type=text etc.: maxlength / minlength

type=number, range: step / min / max

type=any: required

type=any: readonly / disabled

form: novalidate / formnovalidate

Discussion and Insights 💭

TIL: LIFO Solution and Regular Exprresion Techniques【CodeWars】

Overview 🔍

Examples:

Solutions 1: LIFO

Steps:

Solutions 2: Regular Expression

Steps:

Discussion and Insights 💭

TIL: How to Trim Trailing Zeros【CodeWars】

Overview 🔍

Examples:

Solutions 1

Solutions 2

Solutions 3

Solutions 4

Discussion and Insights 💭

type=file: `accept`

type=file, select: `multiple`

type=text etc.: `pattern`

type=text etc.: `maxlength` / `minlength`

type=number, range: `step` / `min` / `max`

type=any: `required`

type=any: `readonly` / `disabled`

form: `novalidate` / `formnovalidate`