DOCSEARCHbyAlgolia
Submit Docs

jing-tech Writing

website·Indexed 31 days ago

https://www.jing-tech.me

A collection of technical articles and guides covering frontend interview questions (utility functions like cloneDeep, isEqual, debounce), data structures and algorithms (Linked List, Heap, Binary Search Tree, Queue, Stack), design system architecture (Design Tokens, Accessibility, Focus Management, Compound Components), and functional programming concepts.

Tokens
35K
Snippets
142
Records
207
Agent score
51%

What's inside jing-tech

  1. Overview of Style Dictionary for Design Token Management

    Style Dictionary is an open-source tool by Amazon used to manage design tokens and transform them into platform-specific styling formats such as CSS, SCSS, JS, Swift, and Android. It allows design teams to define visual elements (colors, fonts, spacing) in a central location (like Figma) and export them as key-value pairs in JSON, ensuring visual consistency across different platforms that may use different color definitions (e.g., RGB vs Hex).

  2. Overview of Lenses in Functional Programming

    Lenses are functional programming tools that allow developers to read, write, and modify specific sub-parts of complex, nested data structures without mutating the original data. They provide a declarative way to focus on a piece of data and apply transformations to it while maintaining immutability.

  3. Understand the components of a Design System

    A Design System is a comprehensive set of standards and tools used to improve development efficiency and ensure a cohesive user experience. It consists of the following core elements:

    • Brand Values: The core identity of the company.
    • Design Principles: Guidelines that govern design decisions.
    • Design Tokens: Visual constants (e.g., specific color hex codes, spacing values, font sizes).
    • UI Library: A collection of reusable, modular components.
    • Design Patterns: Recurring solutions to common design problems.
    • Accessibility: Ensuring components are usable by everyone.

  4. RovingFocus React implementation architecture

    The React implementation of Roving Focus is structured into three main parts:

    1. createCollection: Collects all focusable items within the group and provides them via useContext.
    2. useRovingFocus: A hook that monitors the tabStopId. When the ID changes, it updates the tabIndex (setting the current item to 0 and others to -1) and triggers the focus shift. It encapsulates the keyboard event logic for the items.
    3. <RovingFocusGroup />: A context provider that distributes the groupId, collection, and tabStopId to all child items.

  5. Understand the Slots pattern in UI design

    Slots (or placeholders) are predefined areas within a component where developers can insert custom content, such as other components, text, or images. This pattern solves two common design problems:

    1. Configuration Pattern Issues: Avoiding 'prop drilling' or overly complex APIs where a component requires dozens of props (e.g., labelProps, prefixProps) to allow customization of internal elements.
    2. Composition Pattern Issues: Preventing accessibility and consistency problems that occur when users can freely reorder sub-components (e.g., placing a Label after an Input), which can break the expected DOM order for screen readers.

  6. Understand Function Composition in JavaScript

    Function Composition is the process of combining multiple single-responsibility functions to create a new, more complex function. It allows for a declarative style of programming where the focus is on the transformation pipeline rather than the intermediate state of data.

    Key characteristics:

    • Execution Order: Functions are executed from right to left. In compose(z, g, f)(x), the execution order is f(x), then g(f(x)), then z(g(f(x))).
    • Type Constraint: The output type of one function must match the input type of the next function in the chain.
    • Associativity: compose(f, compose(g, h)) is equivalent to compose(compose(f, g), h).

  7. Understand the Presence component concept

    Presence is a utility that allows React components to perform animations (such as fade-outs) before being removed from the DOM tree. Because React does not provide a native lifecycle method to execute logic specifically before unmounting, a Presence wrapper manages the timing of the unmount, keeping the component in the DOM until its exit animation is complete.

  8. Understand the core principles of Web Accessibility (POUR)

    Web accessibility (A11y) ensures that people with disabilities can perceive, understand, navigate, and interact with the web. The four core principles are:

    1. Perceivable: Information and UI components must be presentable in ways all users can perceive (e.g., providing screen reader support for visually impaired users).
    2. Operable: UI components and navigation must be operable by all users (e.g., ensuring all functionality is accessible via keyboard, not just mouse).
    3. Understandable: Information and the operation of UI components must be understandable (e.g., generating page summaries for users with cognitive disabilities).
    4. Robust: Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.

  9. Understand Heap data structure properties

    A Heap is a specialized tree-based data structure that must satisfy two conditions:

    1. It must be a Complete Binary Tree.
    2. The value of each node must be greater than or equal to (maxHeap) or less than or equal to (minHeap) the values of its children.

  10. Understand the Accordion component

    An Accordion is a set of vertically stacked interactive headers that users can click to expand or collapse associated content sections. It is primarily used to hide content when there is too much information, allowing users to scan a high-level outline without excessive scrolling. Collapsed content is not focusable, which improves navigation for keyboard users.

  11. Understand Design Tokens in a Design System

    Design Tokens are key-value pairs that replace static visual values (like hex codes for colors or pixels for sizing) with self-explanatory, semantic names. They serve as a 'single source of truth' and a common language between designers and engineers, ensuring consistency across multiple platforms (Web, iOS, Android).

    When to use Design Tokens:

    • When planning to update a product's design or building a new product.
    • When a design system is applied across multiple products or platforms.
    • When you want to easily maintain or update styles.

    When NOT to use Design Tokens:

    • When existing applications use hardcoded values and are not expected to change for 1-2 years.
    • When the team or product lacks a formal design system.

  12. Implement theme switching with useTheme hook

    The useTheme hook manages the application's visual theme by toggling the data-theme attribute on the document root and persisting the preference in localStorage. It relies on a CSS architecture where Design Tokens are mapped to different values based on the data-theme attribute (e.g., html[data-theme='light']).
    import React, { useEffect, useState, useCallback, useMemo } from 'react'

const THEME_KEY = 'tocino-theme'
const THEME = {
  LIGHT: 'light',
  DARK: 'dark',
  SYSTEM: 'system',
}

const themeManager = {
  getTheme: () => {
    return window?.localStorage.getItem(THEME_KEY) ?? THEME.DARK
  },
  setTheme: (theme) => {
    document?.documentElement.setAttribute('data-theme', theme)
    window?.localStorage.setItem(THEME_KEY, theme)
  },
}

function useTheme(initialTheme) {
  const [theme, setTheme] = useState(() => {
    return initialTheme ?? themeManager.getTheme()
  })

  useEffect(() => {
    themeManager.setTheme(theme)
  }, [theme])

  const toggleTheme = useCallback(() => {
    setTheme((prev) => (prev === THEME.DARK ? THEME.LIGHT : THEME.DARK))
  }, [])

  return useMemo(
    () => ({
      theme,
      toggleTheme,
      setTheme,
    }),
    [theme, toggleTheme]
  )
}

// Usage Example
export default () => {
  const { theme, toggleTheme } = useTheme()

  return (
    <div>
      <h2>Current Theme: {theme}</h2>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  )
}