DOCSEARCHbyAlgolia
Submit Docs

Tzynwang's Technical Blog

website·Indexed 29 days ago

http://tzynwang.github.io/

A collection of technical notes and tutorials covering frontend development, including Webpack configuration, Astro static site generation, React, TypeScript, Material UI (MUI), and software engineering principles from 'Good Code, Bad Code'. The blog also features guides on Jest testing, Cypress e2e testing, and CSS container queries.

Tokens
176.9K
Snippets
653
Records
1.2K
Agent score
73%

What's inside Tzynwang Blog

  1. Overview of Cognitive Dimensions of Codebases (CDCB)

    CDCB is a framework derived from Cognitive Dimensions of Notation (CDN) used to evaluate a codebase from a cognitive rather than technical perspective. It focuses on the usability of code—specifically, how easy it is for developers to find information, modify the code, and maintain it. Instead of focusing on what the code does for the computer, CDCB examines what the code does to the developer's brain and how it affects their interaction with the system.

  2. Overview of Domain Storytelling

    Domain Storytelling is a workshop activity designed to help domain experts and developers reach a shared understanding of a product's domain, specifically focusing on usage flows and the problems being solved. The primary output is a 'domain story' (a visual map) that records the agreed-upon product flow and the objects involved. This map often serves as a reference for Domain-Driven Design (DDD). It is intended to record the results of a collective discussion and should be used to inform product specifications, not replace them.

  3. Overview of Frontend Testing Levels

    Frontend testing is categorized into several levels, each serving a specific purpose in the software development lifecycle:

    • Unit Testing: The most basic building block. It tests individual methods, functions, or components in isolation to ensure they work as expected and cover all possible edge cases.
    • Integration Testing: Validates that different functions or components work flawlessly together.
    • End-to-End (E2E) Testing: Replicates real user scenarios by testing the application's workflow from beginning to end in a real browser with a real DOM and real API/data. It is best used for common user scenarios; edge cases should be handled by unit or integration tests.
    • Visual Regression Testing: Tests the visual structure and appearance of the application. It takes screenshots of pages or components and compares them with previous successful tests to detect unintended visual changes.

  4. Overview of the JPEG compression process

    JPEG is an image compression algorithm (not a file format itself) that reduces file size by converting images from RGB to the Y'CbCr color space. It leverages the fact that the human eye is more sensitive to brightness (luminosity) than to color (chrominance) and less sensitive to high-frequency intensity changes. The process involves several key steps: transforming color space, down-sampling color information, splitting the image into blocks, applying Discrete Cosine Transform (DCT), quantizing the results to remove high-frequency data, and finally using Huffman encoding to produce the .jpg file.

  5. Analyze cognitive processes during code reading and debugging

    Reading code involves the interaction of three cognitive processes: Short-Term Memory (STM), Long-Term Memory (LTM), and Working Memory.

    For example, when processing a bug report:

    1. The bug report details are stored in Short-Term Memory.
    2. The brain searches Long-Term Memory for previous code implementations, existing understanding of the logic, and experience with similar past issues.
    3. Working Memory synthesizes this information to calculate and derive a viable solution.

  6. Understand types of dependencies in unit testing

    Dependencies are parts of a unit that are difficult or impossible to control, such as time, asynchronous functions, file systems, or network calls. They are categorized into two types:

    1. Incoming Dependencies: Act as the starting point of a unit by providing information (e.g., database records, API responses, file contents). These are replaced by stubs during testing.
    2. Outgoing Dependencies: Act as the exit point of a unit (e.g., logging results, saving to a database, sending emails, calling an external API). These are replaced by mocks to verify if they were called correctly.

  7. Choose technical writing topics based on experience level

    Depending on your experience with writing, different strategies for selecting topics can help you build a habit or increase reach:

    • For Beginners: Start with topics you are passionate about or that left a strong impression on you. This makes it easier to establish a consistent writing habit. If you lack a specific topic, write tutorial documentation; these are goal-oriented and can be expanded into related articles (e.g., "Why I chose this technology" or "Alternative tools").
    • For Experienced Writers: To create popular or high-impact content, focus on topics that solve specific problems or teach new skills, as these are the primary reasons developers seek out technical articles.

  8. Understand Pass-by-Value vs Pass-by-Reference in JavaScript

    JavaScript handles data assignment differently based on the type:

    • Primitive types (undefined, Boolean, Number, BigInt, String, Symbol) use pass-by-value. When assigned to a new variable, the actual value is copied. Modifying the original variable does not affect the copy.
    • Structural types (Object, Function) use pass-by-reference. When assigned, the memory address (reference) is copied. Both variables point to the same object in memory; modifying one affects the other.
    // Pass by value (Primitive)
let bag = "apples";
let pocket = bag;
bag = "oranges";
console.log(pocket); // output: apples

// Pass by reference (Structural)
const container1 = { apple: 6 };
const container2 = container1;
container1.apple = 3;
console.log(container2); // output: {apple: 3}

  9. Recommended README structure for software projects

    A well-structured README acts as a map for developers to understand a project quickly. The recommended outline includes the project name, a brief introduction, quick start instructions, folder structure, infrastructure requirements, system architecture/design patterns, detailed script explanations, and a miscellaneous section.
    # Project Name
## Introduction
## Quick Start
## Folder Structure
## Infrastructure
## (Optional) System Architecture / Design Patterns
## Detailed Script Explanations
## Others

  10. Define and use isolation frameworks for unit testing

    An isolation framework provides an API to define fake data (stubs and mocks), allowing developers to isolate a specific unit of code from its dependencies during testing. Jest is a primary example of such a framework, reducing the manual effort required to create mocks and stubs.

  11. Approach technical interviews as storytelling

    Instead of simply answering questions, use the interview to tell a cohesive story about yourself. The goal is to demonstrate your communication style and thought process, allowing the interviewer to see how you apply your learned experiences in a real-world context.

  12. Understand the cognitive process of problem-solving in programming

    Problem-solving is defined as a three-step process: 1. Defining the start state, 2. Defining the goal state, and 3. Finding the shortest path (state space) from start to goal within given constraints (rules). When solving a problem, the brain retrieves relevant information from Long-Term Memory (LTM). Experts typically 'recreate' rather than 'solve' problems by adapting previously successful solutions to new, similar contexts.