DOCSEARCHbyAlgolia
Submit Docs

whinc.github.io Blog and Documentation

website·Indexed 29 days ago

https://whinc.github.io/blog/

A personal technical blog and documentation site built with Docusaurus. It features articles and tutorials on web frontend development, including React, Vue, Ant Design, Redux, and Node.js (Knex.js), as well as showcases of open-source projects like WebConsole.

Tokens
17.5K
Snippets
85
Records
106
Agent score
67%

What's inside whinc.github.io

  1. Overview of 小而美工具 (uCalc) Mini Program Features

    小而美工具 (uCalc) is a WeChat Mini Program providing a collection of utility tools for daily life, health tracking, and calendar services. Key available features include:

    • Calculators: Basic smart calculator with history, mortgage calculator, retirement age calculator, and childcare subsidy calculator.
    • Health & Growth: BMI calculator for adults (18+), height/weight assessment for children (0-7 years), and growth/genetic height assessment for teenagers (7-18 years).
    • Calendars & Dates: Perpetual calendar (万年历), Traditional Chinese Almanac (老黄历), Buddhist calendar (佛历), Taoist calendar (道历), and a holiday/solar term query tool.
    • Utilities: Relative kinship title lookup (亲戚称呼), Flashlight, and a QR code generator.

  2. Introduction to Knex.js SQL Query Builder

    Knex.js is a popular SQL query builder for Node.js that allows developers to write SQL queries using JavaScript instead of raw SQL strings. It supports multiple database dialects, including MySQL, PostgreSQL, SQLite, and Microsoft SQL Server. It provides capabilities for building complex queries (joins, subqueries, aggregate functions), transaction management, and batch inserts/updates.
    const knex = require('knex')({ client: 'mysql' });

// Build a query to select 10 users and convert it to a SQL string
knex.select('*').from('users').limit(10).toSQL();

  3. Overview of ApiSharp network request library

    ApiSharp is an H5 Web-based network request library developed in 2019. It is designed to be similar to axios but includes additional built-in utility features such as request retries, logging, and caching. Note that the project has been deprecated and is no longer maintained as of 2021.

  4. Introduction to Knex.js SQL Query Builder

    Knex.js is a popular Node.js SQL query builder that allows developers to write SQL queries using JavaScript instead of raw SQL strings. It provides a JavaScript-based DSL that closely mirrors SQL syntax and supports multiple database dialects, including MySQL, PostgreSQL, SQLite, and Microsoft SQL Server. Key capabilities include building complex queries (joins, subqueries, aggregate functions), transaction management, and batch insertions/updates.
    const knex = require('knex')({ client: 'mysql' });

// Build a query to select 10 users and convert it to a SQL string
knex.select('*').from('users').limit(10).toSQL();

  5. Introduction to Knex.js SQL Query Builder

    Knex.js is a popular SQL query builder for Node.js that allows developers to write SQL queries using JavaScript instead of raw SQL strings. It provides a Domain Specific Language (DSL) that closely mirrors SQL syntax and supports multiple database dialects, including MySQL, PostgreSQL, SQLite, and Microsoft SQL Server. Key capabilities include building complex queries (joins, subqueries, aggregate functions), transaction management, and batch insertions/updates.
    const knex = require('knex')({ client: 'mysql' });

// Build a query to select 10 users and convert it to a SQL string
knex.select('*').from('users').limit(10).toSQL();

  6. Overview of Knex.js

    Knex.js is a popular Node.js SQL query builder that allows developers to write SQL queries using JavaScript instead of raw SQL strings. It acts as an abstraction layer (similar to JDBC in Java), providing a unified API that reduces coupling with specific database dialects and simplifies migration between different databases (e.g., using SQLite for local development and MySQL for production). It supports MySQL, PostgreSQL, SQLite, and Microsoft SQL Server.

  7. Overview of the 小而美工具 (uCalc) project

    小而美工具 is a WeChat Mini Program developed since 2023, designed as a practical life toolbox. It started as a calculator and has evolved to include various utility tools. The project is currently under active development.

  8. Understand Glob pattern matching for file paths

    Glob patterns are used in computer programming to specify pathnames with wildcards. This functionality allows for expanding wildcards in command lines or scripts to match multiple files. It originated from the glob command in Bell Labs Unix and was later implemented as a C library function glob(), which is used by shell interpreters to provide pattern matching in shell scripts and command-line interfaces.
    # Example: List all .js files in the src directory
$ ls src/*.js
src/a.js src/b.js

  9. Follow the three fundamental principles of Redux

    To ensure maintainability and predictability in state management, Redux applications must adhere to these three principles:

    1. Single Source of Truth: The entire application state is stored in a single object tree within a unique store. This simplifies debugging by allowing a snapshot of the entire application state at any moment.
    2. State is Read-Only: The only way to change the state is to trigger an action. This prevents race conditions and ensures that all state transitions are centralized and sequential. Since actions are plain JavaScript objects, they provide a clear audit trail of state changes.
    3. Reducers are Pure Functions: Reducers must not mutate the state directly; instead, they create and return a copy of the state with the necessary changes. Reducers must not perform side effects (e.g., network requests or modifying external variables) to ensure state changes remain predictable and dependent only on the action.

  10. Understand Redux core concepts

    Redux is a frontend state management library designed to make state changes predictable by enforcing a unidirectional data flow. It relies on three core concepts:

    1. State: A plain JavaScript object that holds the current application state. The View subscribes to state changes to re-render the UI.
    2. Action: A plain JavaScript object describing an operation to be performed. It must contain a type property and can include a payload of data.
    3. Reducer: A pure function that takes the current state and an action as arguments and returns a new state. Reducers are the only place where state logic is defined; they do not mutate the existing state but return a new copy.

  11. Generate conventional commit messages with commitizen

    Commitizen provides an interactive command-line interface to ensure commit messages follow the Conventional Commits specification. Use npx git-cz instead of git commit to prompt for required fields.
    # Install commitizen
npm install --save-dev commitizen

# Initialize adapter
npx commitizen init cz-conventional-changelog --save-dev --save-exact

# Commit code interactively
git add .
npx git-cz

# Retry last commit message
npx git-cz --retry

  12. Handle Promise-returning handlers in then()

    A naive then() implementation simply passes the return value of a handler to the next promise's resolve. However, if a handler returns another Promise (or a 'thenable' object), the chain should wait for that returned Promise to settle before resolving the next promise in the chain. This requires a resolveProcedure to check if the returned value x is a thenable and handle it accordingly.
    // Example of the problem: 
// If onResolved returns a Promise, the next .then() receives the Promise object 
// instead of the resolved value of that Promise.
let p1 = new ES6Promise((resolve, reject) => {
    resolve(1);
}).then(value => {
    return new ES6Promise((resolve, reject) => {
        setTimeout(() => resolve(value + 1), 1000);
    });
}).then(value => console.log(value)); // Expected: 2, Actual: ES6Promise object