Lazy Blog Technical Documentation

website·Indexed 30 days ago

https://lazydd.github.io/lazy-blog/

A collection of technical tutorials and notes covering a wide range of development topics, including Docker deployments for Nginx, Redis, MySQL, and Verdaccio; web frameworks like Vue, React, and Flutter; programming languages such as Rust, Java, and JavaScript; and embedded systems programming for C51 and STM32 microcontrollers.

Tokens
15.9K
Snippets
108
Records
116
Agent score
73%

What's inside Lazy Blog

  1. Use Markdown for note creation in lazy-blog

    In lazy-blog, every page is a Markdown file. Notes are written and recorded using standard Markdown and Markdown extended syntax.
  2. Publish packages to a private Verdaccio registry

    Once the Verdaccio container is running and the registry is accessible (default port 4873), use the standard npm CLI to authenticate and publish your packages.
    # Log in to the private registry
    npm login
    
    # Publish the package
    npm publish
  3. Transmit audio data via WebSocket

    Initialize a WebSocket connection to a server and send the encoded PCM DataView directly. Handle the onmessage event to receive incoming audio Blobs for playback.
    const initWs = (wsUrl) => {
    	ws = new WebSocket(wsUrl);
    	ws.onopen = () => { isConnected = true; };
    	ws.onclose = () => {
    		if (recorder) recorder.disconnect();
    		isConnected = false;
    	};
    	ws.onmessage = (e) => {
    		if (e.data instanceof Blob) {
    			listen(e.data);
    		}
    	};
    };
    
    const sendData = () => {
    	if (size !== 0) {
    		const pcmData = encodePCM();
    		if (pcmData && isConnected) {
    			ws.send(pcmData);
    		}
    	}
    };
  4. Initialize and display text on an LCD1602 using C51

    To display text on an LCD1602, you must initialize the display settings (clear screen, entry mode, display control, and interface format) and then send the character data to the specific memory address. The LCD1602 uses a specific command set where adding 0x80 to a value sets the cursor position for the first row. If using Port 0 (P0) for data, external pull-up resistors are required.
    #include <reg52.h>
    
    #define LCD_Data P0
    sbit LCD_RS = P2 ^ 0;
    sbit LCD_RW = P2 ^ 1;
    sbit LCD_E  = P2 ^ 2;
    
    void delay(unsigned int t) {
        while (t--);
    }
    
    void LCD_Init() {
        LCD_Write_Cmd(0x01); // Clear screen
        LCD_Write_Cmd(0x06); // Entry mode: AC increment, no shift
        LCD_Write_Cmd(0x0c); // Display on, cursor off, blink off
        LCD_Write_Cmd(0x38); // 8-bit interface, 2-line display, 5x7 dots
        LCD_Write_Cmd(0x80); // Set cursor to row 1, col 1
    }
    
    void main() {
        unsigned char code Data[] = "   I Love You   ";
        unsigned char i;
        LCD_Init();
        LCD_Write_Cmd(0x00 + 0x80); // Set cursor to first row, first column
        for (i = 0; i < 16; i++) {
            LCD_Write_Data(Data[i]);
        }
        while (1);
    }
  5. Compress fonts using font-spider

    To compress fonts using font-spider, follow these steps:

    1. Create an index.html file. Inside the <body>, place the text content that requires the compressed font within a div. In the <style> section, define a @font-face rule where the font-family matches your target font and the src points to your font files.
    2. Create a folder named fonts in the root directory. The tool will output the compressed font files into this directory.
    3. Run the font-spider command pointing to your HTML file.
    font-spider index.html
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8" />
    		<style>
    			@font-face {
    				font-family: 'Lato-Medium';
    				src: url('./fonts/Lato-Medium.eot');
    				src: url('./fonts/Lato-Medium.eot?#font-spider') format('embedded-opentype'), url('./fonts/Lato-Medium.woff')
    					format('woff'), url('./fonts/Lato-Medium.ttf') format('truetype'), url('./fonts/Lato-Medium.svg')
    					format('svg');
    				font-weight: normal;
    				font-style: normal;
    			}
    		</style>
    	</head>
    	<body>
    		<div>123456789</div>
    	</body>
    </html>
  6. Install FVM (Flutter Version Management)

    FVM is a tool used to manage multiple Flutter SDK versions. It can be installed via the Windows Store using the 'sidekick' visual tool, by downloading releases from GitHub, or via the Dart CLI.
    dart pub global activate fvm
  7. Set up a local MQTT broker with Aedes

    Use the aedes and net modules to create a local MQTT broker. This implementation includes a custom authentication function to validate usernames and passwords, and event listeners to log client connections and disconnections.
    npm install aedes mqtt
    // index.js
    const aedes = require('aedes')();
    const mqttServer = require('net').createServer(aedes.handle);
    const port = 1883;
    
    mqttServer.listen(port, function () {
    	console.log('mqtt server started and listening on port ', port);
    });
    
    // Authentication: callback(error, successful)
    aedes.authenticate = function (_client, username, password, callback) {
    	callback(null, username === 'user' && password.toString() === '123456');
    };
    
    // Client connection event
    aedes.on('client', function (client) {
    	console.log(
    		'Client Connected: \x1b[33m' + (client ? client.id : client) + '\x1b[0m',
    		'to broker',
    		aedes.id
    	);
    });
    
    // Client disconnection event
    aedes.on('clientDisconnect', function (client) {
    	console.log(
    		'Client Disconnected: \x1b[31m' + (client ? client.id : client) + '\x1b[0m',
    		'to broker',
    		aedes.id
    	);
    });
  8. Integrate GitHub comments using giscus

    To add GitHub comments to your blog, follow these steps:

    1. Install the giscus app in your GitHub repository.
    2. Enable Discussions in your GitHub repository's Settings.
    3. Configure giscus at giscus.app by providing a public repository address and setting the category to Announcements.
    4. Extract the configuration tokens (repo ID, category ID, etc.) from the giscus configuration page.
  9. Control buzzers with C51

    Active buzzers only require power to sound, while passive buzzers require a pulse signal. Because microcontroller current is low, a transistor is often needed to drive the buzzer. To play music, toggle the buzzer pin at specific frequencies based on tone and duration arrays.
    #include <reg52.h>
    sbit BEEP = P0 ^ 0;
    
    unsigned char code SONG_TONE[] = {212, 212, 190, 212, 159, 169, 212, 212, 190, 212, 142, 159, 212, 212, 106, 126, 129, 169, 190, 119, 119, 126, 159, 142, 159, 0};
    unsigned char code SONG_LONG[] = {9, 3, 12, 12, 12, 24, 9, 3, 12, 12, 12, 24, 9, 3, 12, 12, 12, 12, 12, 9, 3, 12, 12, 12, 24, 0};
    
    void PlayMusic() {
        unsigned int i = 0, j, k;
        while (SONG_LONG[i] != 0 || SONG_TONE[i] != 0) {
            for (j = 0; j < SONG_LONG[i] * 30; j++) {
                BEEP = ~BEEP;
                for (k = 0; k < SONG_TONE[i] / 3; k++);
            }
            delay(100);
            i++;
        }
    }
  10. Download STM32f10x startup files

    For STM32f10x development, startup files can be downloaded from the project's GitHub repository. For other STM32 series, files should be downloaded from the official STMicroelectronics website.
    STM32f10x Startup Files: https://github.com/Lazydd/startup%5Fstm32/tree/main/startup%5Fstm32f10x
    Official ST Website: https://www.st.com.cn/zh/embedded-software/stm32-standard-peripheral-libraries.html