README.md

EveryDay

GitHub ｜ Timeline ｜ Blog ｜ Blog-SSG ｜ Chinese

Diligent study is like a spring seedling—unseen growth each day, yet it steadily thrives;
To abandon learning is like a whetstone—unseen wear each day, yet it slowly dwindles.

If you like it, give it a star 😁

The repository contains 520 articles, totaling 101624 lines, 836989 words, and 5764706 characters.

This is the learning journey of a front-end beginner. If I only study without documenting anything, it would almost be like learning in vain. The name of this repository, EveryDay, is meant to motivate me to keep learning daily. The articles below are accumulated starting from 2020.02.25, all written based on research and synthesis of numerous references. The topics include HTML basics, CSS fundamentals, JavaScript basics and advanced concepts, Browser-related knowledge, Vue usage and analysis, React usage and analysis, Plugin-related content, RichText editors, Patterns design patterns, Linux commands, LeetCode solutions, and other categories. The content is fairly basic—after all, I’m still a beginner. Additionally, almost every example is designed to be run immediately—just create a new HTML file, copy the code, and open it in a browser, or run it directly in the console.

If you’d like to read the notes in order, you can check the table of contents. Alternatively, for a more structured view, you can visit my Blog. The blog is also the gh-pages branch of this repository, built as a purely static page on GitHub Pages, with jsDelivr and Cloudflare used as caching solutions to improve access speeds for visitors in China. Later, I deployed an SSG (Static Site Generator) version of the New Blog on the gh-pages-ssg branch, with an English-translated version provided by ChatGPT. This branch is hosted on Vercel to address access speed issues in China. The blog contains much more content—aside from study notes, there are project records, pitfalls encountered, and more. If you find it helpful, please give it a star, it really means a lot to me!

HTML

• DOCTYPE
• HTML Semantics
• Cookies and Sessions
• localStorage and sessionStorage
• iframe Framework and Pros and Cons
• HTML Node Operations
• Manual Implementation of Carousel
• Canvas Basics
• Front-end Performance Optimization Solutions
• New Features of HTML5
• Inline Elements and Block Elements
• Scheme for proportional scaling of images
• Implementing a Waterfall Layout
• Implementing Image Lazy Loading
• Web Worker
• 300ms Click Delay
• Default Behaviors and Prevention
• Replaced Elements and Non-Replaced Elements
• Differences between HTML and XHTML
• Common Compatibility Issues
• The Difference Between Attribute and Property
• Implementation of Sliding Puzzle Captcha
• Implement Loading Indicator Component
• Implementing a Message Alert Component
• The Difference Between DOM and BOM
• Implementing Three-column Layout
• Understanding Shadow DOM
• Application of Service Worker
• Solution to prevent page scrolling with overlay
• SVG and foreignObject elements

CSS

• Vertical Centering
• CSS Pseudo-classes and Pseudo-elements
• CSS Box Model
• CSS Selectors
• CSS Specificity
• Flex Layout
• Grid Layout
• Table Layout
• SVG Basics
• Ways to Import CSS
• CSS3 New Features
• Implementation of Responsive Layout
• Block Formatting Context
• Positioning
• Float
• Text Overflow Truncation and Ellipsis
• Methods to Hide Elements with CSS
• How to Avoid FOUC
• Values and Effects of display
• Common CSS Units
• Implementing Frosted Glass Effect
• CSS Implementation of Graphic Effects
• Implementing Text Scroll Playback
• CSS Implementation of Expand Animation
• CSS Implementation of Fade In and Fade Out Effect

JavaScript

• Ajax
• ES6 Features
• Prototypes and Prototype Chains
• JavaScript Closures
• JavaScript Variable Hoisting
• Anonymous Functions and Immediately Invoked Function Expressions
• apply(), call(), bind()
• Event Bubbling and Prevention
• The JS event flow model
• Function Declaration and Function Expression
• Understanding this in JavaScript
• The new Operator
• Summary of Array Traversal in Js
• Promise Object
• async/await
• Generator Function
• Equality Operators == and === in JavaScript
• JavaScript Selectors
• JSON WEB TOKEN
• JavaScript Module Import and Export
• let and const
• Scope and Scope Chain
• Asynchronous Mechanism in JavaScript
• JavaScript Array Manipulation
• Implementation of Js Inheritance
• Function and Object
• Strict mode in JavaScript
• Manually Implementing apply, call, bind
• Summary of Traversing Objects in JavaScript
• Getting the Data Type in JavaScript
• Manually Implementing Promise
• Implementing array sorting in JavaScript
• Implementation of Linked List Operations in JavaScript
• Getter and Setter
• Stacks in JavaScript
• Debounce and Throttle
• The Garbage Collection Mechanism in JavaScript
• Translate into English:
• Map and WeakMap
• Set and WeakSet
• Object Object
• Methods for catching exceptions in Js
• Fetch Method in JavaScript
• Comparison of XML and JSON
• Asynchronously Loading Js Files
• Understanding JavaScript Arrays Deeply
• Simple Implementation of Template Syntax
• The use of Thunk functions
• Analyzing async/await
• The Difference Between null and undefined
• Ways to create objects in JavaScript
• The RegExp Object in JavaScript
• The Number Object in JavaScript
• Math Object in JavaScript
• Issue of Empty Elements in JavaScript Arrays
• Array object in JavaScript
• Application of Currying in JavaScript
• The Date Object in JavaScript
• valueOf and toString
• Understanding Modular Development in JavaScript
• Common Memory Leak Scenarios
• Proxy Object in JavaScript
• The Reflect Object in JavaScript
• Logical Operators in JavaScript
• Ways to Convert a String to a Number in JavaScript
• Understanding this in JavaScript
• Bit operators in JavaScript

Browser

• Cross-Domain
• XSS Cross-site Scripting Attacks
• CSRF Cross-Site Request Forgery
• SQL Injection
• Browser Rendering and Kernel
• Repaint and Reflow
• Overview of HTTP Protocol
• CSS Hijacking Attack
• Process of HTTPS Encrypted Transmission
• Symmetric Encryption and Asymmetric Encryption
• Distributed Session Consistency
• Three-way Handshake of TCP
• Differences and Similarities between TCP and UDP
• Browser Events
• Browser page rendering process
• RESTful Architecture and RPC Architecture
• Development History of the HTTP Protocol
• Principles of WeChat Mini Program Implementation
• The Window Object
• OSI Seven-Layer Model
• Browser Window Communication
• OAUTH Open Authorization
• Single Sign-On (SSO)
• DNS Resolution Process
• Strong Cache and Negotiation Cache
• The Difference Between GET and POST
• Understanding CDN caching
• Understanding domReady
• Document Object
• Location Object
• SSRF Server-Side Request Forgery
• Browser Local Storage Solutions
• Node Object
• History Object
• Navigator Object
• Element Object
• HTMLElement Object
• Event Object
• IntersectionObserver Object
• MutationObserver Object

Vue

• Vue Study Notes
• A Brief Discussion on the Differences Between Vue-Cli4 and Vue-Cli2
• Vue Lifecycle
• The role of key in Vue
• Vue Data Two-Way Binding
• Why does data return as a function?
• Understanding $nextTick in Vue
• Understanding of the MVVM Pattern
• The Difference Between v-if and v-show
• Understanding $refs in Vue
• Understanding Virtual DOM in Vue
• Understanding the Diff Algorithm in Vue
• Difference between $router and $route
• Understanding of the keep-alive component
• Pros and Cons of Single Page Applications
• Principle of Vue Event Binding
• Vue Array Change Monitoring
• Vue Parent-Child Component Lifecycle
• Analysis of computed in Vue
• Analysis of Vue Router Hash Mode
• Analysis of Vue Route History Mode
• Analysis of v-model Data Binding
• Vue Route Lazy Loading
• VueRouter Navigation Guards
• Understanding of Server-Side Rendering (SSR)
• Common Vue Performance Optimization
• Vuex and Ordinary Global Objects
• Core Methods in Vuex
• Ways of component communication in Vue
• New Features of Vue 3.0
• Why does Vue use asynchronous rendering
• Three Watchers in Vue
• Potential issues with v-html
• Vue First Screen Performance Optimization Component

React

• React Lifecycle
• Understanding the Virtual DOM in React
• Understanding JSX in React
• State and Props of React Components
• Stateful and Stateless Components
• Controlled Components and Uncontrolled Components
• Pure Components in React
• Higher Order Components in React
• Understanding refs in React
• Synthetic Events in React
• Implementation of ReactRouter
• Ways of Communicating Between Components in React
• Ways to Reuse React Components
• Understanding the diff algorithm in React
• useState in Hooks
• Understanding useEffect and useLayoutEffect
• useMemo and useCallback
• Synchronous and Asynchronous Scenarios of setState
• Handwriting useState and useEffect
• Differences and Similarities between Mobx and Redux
• Context and Reducer
• The Difference Between Hooks and Ordinary Functions
• Hooks and Event Binding
• The trap of closures in React
• React Portals - The Gateway for Component Teleportation
• React-based SSG Rendering Solution
• React-based virtual scroll solution
• State Management Solution for Low-Code Scenarios

Plugin

• Commonly Used Git Commands
• Comparison between Git and SVN
• Basic Usage of Rollup
• Mocking Network Requests in Jest
• Built-in Types and Extensions in TS
• Race Condition and RxJs
• Handling Git History Blob Files with BFG
• Building a Flowchart Editor Based on drawio
• Exploring webpack plugin development
• Exploring Writing Loaders for Webpack
• Exploring webpack: Building for Multiple Platforms in a Single Application
• Exploring the resolver in webpack
• Chrome Extension Implemented from Scratch
• Browser events based on Chrome extensions
• Examining Chrome Extensions from the Perspective of Script Managers
• Issues and Solutions Related to Browser Extension Development
• LAN File Transfer Based on WebRTC
• File Transfer Solution Based on ServiceWorker
• Building a Resume Editor Based on Canvas
• Data Structure Design of Canvas Editor
• Handling Clipboard Data in Canvas Editor
• Graph State Management in the Canvas Editor
• Rspack Project Practice in Canvas Editor
• Canvas Resume Editor - Layered Rendering and Event Management Capability
• Canvas Editor: Selected Drawing Interaction Scheme
• Implementing Basic RAG Service Based on Vector Retrieval
• Incremental Rich Text Parsing Algorithm in Streaming Markdown
• Implementing Prompt Variable Template Input Box Like Bean Pack
• Implementing a Task Queue and Graceful Shutdown Based on NodeJs

RichText

• First Look at Rich Text: Overview of Rich Text
• Exploring Rich Text Editor Engines
• A First Look at Rich Text OT Collaboration Example
• Exploring CRDT Collaborative Algorithm for Rich Text
• Exploring CRDT Rich Text - A Collaboration Example
• Exploring rich text React real-time preview
• Exploring the Document Diff Algorithm in Rich Text
• Exploring Rich Text: Online Document Delivery
• Exploring the Ability of Selective Commenting in Rich Text
• Exploring Rich Text: Document Virtual Scrolling
• Exploring the Search and Replace Algorithm for Rich Text
• A First Look at Serialization and Deserialization of Rich Text
• Building Document Editor with Slate
• WrapNode Data Structure and Transformation Operations
• TS Type Extension and Node Type Checking
• Decorator Rendering Dispatcher
• Mapping between Node and Path
• Designing and Implementing a Rich Text Editor from Scratch
• Editor Architecture Design Based on MVC Pattern
• Linear Data Structure Model Based on Delta
• Core Interaction Strategy of Browser Selection Model
• Expressing the State Structure of Editor Selection Model
• Synchronizing Browser Selection with Editor Selection Model
• Half-Controlled Input Mode Based on Composite Events
• Uncontrolled DOM Behavior in Browser Input Mode
• Controlled Handling of Editor Text Structure Changes
• Extending the Pattern of React View Layer Adapters
• Immutable State Management and Incremental Rendering
• Component Presets for Editable Nodes in React
• React Non-Editable Node Content Rendering

Patterns

• Simple Factory Pattern
• Factory Method Pattern
• Abstract Factory Pattern
• Builder Pattern
• Prototype Pattern
• Singleton Pattern
• Facade Pattern
• Adapter Pattern
• Proxy Pattern
• Decorator Pattern
• Bridge Pattern
• Composite Pattern
• Flyweight Pattern
• Template Method Pattern
• Observer Pattern
• State Pattern
• Strategy Pattern
• Chain Of Responsibility Model
• Command Pattern
• Visitor Pattern
• Mediator Pattern
• Memo Pattern
• Iterator Pattern
• Interpreter Pattern
• Chain Pattern
• Delegation Pattern
• Data Access Object Pattern
• Debounce and Throttle Mode
• Simple Template Pattern
• Lazy Loading
• The Participant Pattern
• The Waiter Pattern
• Synchronous Module Pattern
• Asynchronous Module Pattern
• Widget Mode
• MVC Pattern
• MVP Pattern
• MVVM Pattern

Linux

• aspell command
• The awk command
• chattr command
• chmod Command
• chown Command
• col command
• The colrm Command
• comm command
• cp Command
• csplit Command
• curl Command
• diff command
• The diffstat command
• Disk Usage Management with du
• ed Command
• egrep command
• ex command
• The expr command
• fgrep Command
• The file command
• find command
• fmt command
• fold command
• Grep Command
• ifconfig Command
• ip command
• journalctl command
• kill command
• Less Command
• ln Command
• locate command
• Look Command
• lsattr Command
• mc command
• The mktemp Command
• more Command
• mv command
• Netstat Command
• od command
• The paste command
• Patch Command
• Pico Command
• ps command
• rcp command
• rm Command
• The route Command
• SCP Command
• Sed Command
• split command
• systemctl Command
• The tee Command
• tmpwatch Command
• Top Command
• touch Command
• tr Command
• Traceroute command
• umask command
• The updatedb command
• whereis command
• Which Command

MiniProgram

• Shandong University of Science and Technology Station
• QQ Mini Program Payment Java Backend
• How to obtain the user_id (openid) of Alipay Mini Program using ThinkPHP
• WeChat Mini Program School Calendar Component
• Migrating Uniapp Mini Program to TypeScript

App

• Nvue/Weex

PHP

• ThinkPHP5.0 Vulnerability Testing
• Example of PHP CAPTCHA Recognition

Java

• QQ Mini Program Payment Java Backend

Security

• Simple Security Protection
• Adding a Message Box to the Disassembled EXE at Startup
• Adding a Startup Message Box to the Disassembled EXE Using IDA
• XSS Cross-site Scripting Attacks
• CSRF Cross-Site Request Forgery
• SQL Injection
• CSS Hijacking Attack
• ThinkPHP5.0 Vulnerability Testing
• SSRF Server-Side Request Forgery
• Record of Node question in ByteCTF

Environment

• Setting up local running environment for CMD in VScode (2.0)
• Recovery
• Installing QQ Robot on Ubuntu
• Add SublimeText to the right-click menu
• Capturing HTTPS Traffic on Mobile (Fiddler & Packet Capture)
• Selecting and Copying Text
• Publishing Npm package to GitHub Packages
• Improve the Heat Dissipation of the PHICOMM K3C Router
• Fix the PPTP Client Connection Issue Under ufw
• Establishing DNS tunnel to bypass campus network authentication
• Setting up CuckooSandbox environment on Ubuntu 20.04

IMGProcess

• StrongWisdom Education System CAPTCHA Recognition with OpenCV
• StrongWisdom Academic Affairs System Verification Code Recognition Tensorflow CNN
• YOLOV3 Object Detection
• Example of PHP CAPTCHA Recognition

LeetCode

• Permutations
• Generate Parentheses
• Binary Sum
• Top Iterator
• Zero Matrix
• Stack Sorting
• Smallest Subarray with Sum
• Letter Shifting
• Diving Board
• Path Sum
• Intersection of Two Arrays II
• Permutations II
• Constant Time Insertion, Deletion, and Retrieval of Random Elements
• Longest Common Prefix
• Divisor Game
• Circular Array Loop
• Adding Strings
• Valid Parentheses String
• One Time Editing
• Surrounded Regions
• The Kth Largest Element in an Array
• Teemo Attacks
• Similar Trees with Leaf-Like Leaves
• Minimum Depth of Binary Tree
• Balanced Binary Tree
• Combinations of Phone Number
• Minimum Add to Make Parentheses Valid
• Binary Tree Paths
• Binary Tree Level Order Traversal II
• Combinations
• Inverting Binary Tree
• Subsets
• Mode in Binary Search Tree
• Jewels and Stones
• Reverse String
• Swap Nodes in Pairs
• Long Pressed Name
• Unique Number of Occurrences
• Intersection of Two Arrays
• Subsets II
• Sort Array By Parity II
• Reconstruct Queue Based on Height
• Heater
• Increasing and Decreasing String
• Maintaining the City Skyline
• Different Paths
• Dota2 Senate
• Monotonic Increasing Digits
• The Best Time to Buy and Sell Stocks with Commission
• First Unique Character in a String
• The Weight of the Last Stone
• The Flower Planting Problem
• Sliding Window Maximum
• Summary Ranges
• Replaced Longest Repeating Character

Interview

• Tencent Summer Daily Intern Front-end Interview
• Meituan Summer Daily Internship Front-end Interview
• ByteDance Summer Daily Internship Front-end Interview
• Journal of 2021 Spring Internship Recruitment
• ByteDance Summer Internship Front-end Interview
• Meituan Summer Internship Front-end Interview
• Ant Summer Internship Frontend Interview
• Recording My 2022 Internship Job Hunting Journey
• Baidu Autumn Campus Recruitment Front-End Interview
• DJI Early Admission Front-end Interview
• 360 Autumn Recruitment Formal Front-end Interview
• Lenovo's Autumn Campus Recruitment Officially Conducts Front-end Interviews
• JD Autumn Recruitment Official Front-end Interview
• Shunfeng autumn recruitment formal batch front-end interview
• Pinduoduo Autumn Recruitment Official Front-end Interview Experience
• Ctrip autumn recruitment official interview for front-end batch
• Tencent Autumn Recruitment Official Batch Front-end Interview
• 2022 Autumn Recruitment Journey

MyLife

• A fun tree-planting competition
• Journal of 2021 Spring Internship Recruitment
• Tencent Internship Experience 2021
• Record of Node question in ByteCTF
• Recording My 2022 Internship Job Hunting Journey
• Address to my four years of university life
• 2022 Autumn Recruitment Journey
• A Tribute to My Three Years of Graduate School Life
• 2022 Byte Internship Chronicles
• Graduated for over half a year, looking back at the interesting open-source projects I've done from college to now
• Recording Some Daily Thoughts and Reflections