Emulisy's blog

My 2026 sem1 experience at MonashThis semester I took FIT2094, FIT3077 and the notorious FIT2004 and FIT2014. Overall speaking, the workload is acceptable but challenging. If not intended to go on exchange, I would recommend taking FIT2004 and FIT2014 in separate semesters. FIT3077: software architectureIt is not a decent WAM booster, but I find the assignments very interesting. The whole course is project-orientedwhere we are asked to complete a prototype for the famous board game, Ticket...

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...

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 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...

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, ...

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版本 找到文件夹...

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:...

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. ![DOM Walk Through](../img/All about DOM/DOM...

一、全局滚动属性（window 级别）这些属性用于 获取或控制整个页面的滚动状态。 属性/方法 作用 示例 window.scrollX 页面水平滚动距离（单位 px） console.log(scrollX) window.scrollY 页面垂直滚动距离（单位 px） console.log(scrollY) window.pageXOffset 同 scrollX（旧写法） ✅ 向后兼容 window.pageYOffset 同 scrollY（旧写法） ✅ 向后兼容 window.scrollTo(x, y) 跳转到页面指定位置 window.scrollTo(0, 0) window.scrollBy(x, y) 相对当前位置滚动 window.scrollBy(0, 500) window.scroll() 等价于 scrollTo()（支持对象参数） window.scroll({ top: 500, behavior: 'smooth'...

Flexbox display: flex;The main axis and the cross axisThere are two invisible axis that control the flexbox. The main axis that goes through the center of the box along the flex direction The cross axis that is perpendicular to the main axis flex-direction: row; defines the direction of the main axis, it can be set to row or column We use justify-content to control the main axis, and align-items for the cross axis. For the justify-content, the values can be: flex-start:...