Solidity Basics
Solidity Basic Syntax Notes1. File StructureEvery Solidity file should start with a license identifier and the pragma version. 12// SPDX-License-Identifier: MITpragma solidity ^0.8.20; // Specifies the compiler version 2. Contract StructureA contract is similar to a class in object-oriented languages. 123456789contract MyContract { // State variables (stored on the blockchain) uint256 public myNumber; // Constructor (runs once upon deployment) constructor(uint256...
Smart Contract Basics
Smart Contract Development1. Dapp Architecture and Development WorkflowDecentralized applications (Dapps) differ from traditional centralized apps. They run on blockchains or distributed networks, and their logic and data are maintained collectively by multiple participants rather than a single entity. Dapp development requires understanding: Decentralized tech stack Smart contract programming Frontend & blockchain interaction 1.1 Dapp ArchitectureDapp architecture consists of four...
Web3 Operation
Web3 OperationWallet Key ConceptsMnemonic Phrase (Seed Phrase) A human-readable list of words used to generate private keys Usually 12 or 24 words (BIP-39 standard) Acts as the master backup of a wallet Anyone with it can fully control the wallet Private Key A secret cryptographic number Used to sign transactions and prove ownership Derived from the mnemonic phrase Must never be shared Public Key Generated from the private key Used to verify transaction signatures Safe to share...
Ethereum - basic concepts
Ethereum Basics1. What is Ethereum?Ethereum is a decentralized, open-source blockchain platform designed to support smart contracts and decentralized applications (dApps). Unlike Bitcoin, which mainly focuses on digital currency, Ethereum acts as a programmable blockchain that enables developers to build complex on-chain logic. Ethereum has a native cryptocurrency called Ether (ETH), which is used to pay transaction fees and secure the network. Ethereum is often described as a “world...
Blcokchain - Basic Concepts
Blockchain Basics1. What is Blockchain?Blockchain is a decentralized, distributed ledger technology used to record information securely, transparently, and immutably across multiple participants. It consists of a series of chronologically linked “blocks,” each containing transaction data and the hash of the previous block, ensuring the integrity of the chain. Key Features of Blockchain Immutable: Once data is written to the chain, it is nearly impossible to alter Transparent: Transactions on...
Asynchronous Javascript
Asynchronous JSJS has only one thread, so it cannot handle multiple tasks at the same time. But thanks to the non-blocking behaviour, we can carry on to the next task before the last task is finished, this is Asynchronous Javascript. HTTP/HTTPSWhen making communication with a server, we use HTTP/HTTPS requests. What happens when we make an HTTP/HTTPS request: Parse URL and check cache: to make a request we need to know the url of the server, so we need to parse the...
Object Oriented Programming in JS
PrototypeIn classic Object Oriented Programming, we have class as templates and objects are instantiated from classes. In Javascript, oop is different. In js, we have such things called prototype. We can create objects and delegate them to the linked prototype. prototype contains methods that are accessible to all objects that are linked to it, just like class methods in classes. prototype itself is an object, it usually has this structure: 1234A.prototype = { constructor: A, ...
在Hexo Butterfly 里添加自定义加载页面
DOM 生命周期事件 document.addEventListener('DOMContentLoaded', ...): 网页在载入的时候首先会解析HTML并构建DOM树。当这一步完成的时候该事件就会触发,此时css可能还没完全加载,其他网页资源如图片等也可能没完全加载完成。 window.addEventListener('load', ...): 当所有网页资源加载完毕的时候触发,一般比DOM树加载晚得多。 window.addEventListener('beforeunload', ...): 当用户要离开界面的时候触发,可能是跳转也可能是主动关闭页面。可以用来保存数据和弹出提示(现代浏览器一般会限制提示内容) 要创建一个加载页面我们一般会用到第二个事件: load。 我们可以创建一个position:fixed的加载页面,然后在监听到页面加载完成的时候将他消除,例如display:none。 在hexo butterfly添加自定义加载页面 仅仅对于hexo: 7.3.0版本 找到文件夹...
Intersection Observer API
The Intersection Observer LiteralCreating a new Intersection Observer using constructor: 1const observer = new IntersectionObserver(callback, options); callback: The function to be called whenever the target enter/leave the intersection area. options: An object that controls the condition of triggering the callback function. options ObjectThe option object looks like this: 12345const option = { root: null, rootMargin: "0px", thereshold: [0, 0.1]} root:...
All about DOM API and Browser Performance
The DOM APIThe Document Object Model (DOM) is a tree-like, in-memory representation of your HTML document.When the browser parses an HTML file, it creates objects that form a hierarchical tree structure where: Each HTML element becomes a node. Text inside elements becomes text nodes. The relationships between elements (nested tags) form parent-child links. So the key fact is that in DOM, EVERYTHING is about nodes. 


