JavaScript on Time Friend

Adding an Animated Logo to My Blog

Thu, 14 Aug 2025 17:00:00 +0000

That small square in the top-left corner of the site? It’s a video.

Grayscale by default. Lights up on hover — different color every time, and the playback speed surges then eases back down. Like it just woke up.

Why

The old logo was a static PNG. It felt lifeless. I had a short video clip lying around, so I swapped the static image for a video.

mp4 Has No Alpha Channel

CapCut removed the background on export, but mp4 doesn’t support transparency — it gets baked to black.

How I Built the Homepage Typing Effect

Tue, 12 Aug 2025 11:50:00 +0000

When you open the homepage, you see text being typed out character by character. Not complicated, but many people ask how it’s done.

This article explains the implementation.

How It Works

When the homepage loads, it picks a random quote from a JSON file, and uses Typed.js to simulate typing.

Homepage loads
 ↓
main.js detects it's the homepage
 ↓
Determine language (Chinese/English)
 ↓
Pick a random entry from /data/quotes.json
 ↓
Pass to Typed.js, start typing animation

Data Source: quotes.json

Quotes are stored in static/data/quotes.json.

Canvas Cross-Origin Image Ultimate Solution

Thu, 10 Jan 2019 16:14:25 +0000

Browsers, for security reasons, do not allow Canvas to use getImageData toDataURL to process cross-origin fetched images.

Traditional Solutions

1. Server Needs to Configure Access-Control-Allow-Origin

I believe everyone has seen this line of code too many times, I won’t elaborate

header("Access-Control-Allow-Origin: your-domain");

2. Set crossOrigin Attribute

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous'; // This line of code
img.onload = function () {
 context.drawImage(this, 0, 0);
 context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.xxxx.com/u/496048';

Up to here, your cross-origin problem is basically solved. But because of some objective factors, backend engineers refuse to help you set cross-origin headers, what should you do?

The Ultimate Solution for Cross-origin Images in Canvas

Thu, 10 Jan 2019 16:14:25 +0000

Browsers do not allow Canvas to use getImageData or toDataURL on cross-origin images due to security concerns.

Traditional Solutions

1. Server needs to configure Access-Control-Allow-Origin

I’m sure you’ve seen this line of code many times, so I’ll keep it brief.

header("Access-Control-Allow-Origin: your-domain.com");

2. Set the crossOrigin Attribute

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function () {
 context.drawImage(this, 0, 0);
 context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.xxxx.com/u/496048';

At this point, your cross-origin issues are mostly resolved. But what if the backend engineer refuses to set the cross-origin header for objective reasons?

Abstract Syntax Tree AST - Behind the Scenes Hero

Thu, 03 Jan 2019 17:33:33 +0000

Abstract Syntax Tree AST

In computer science, an abstract syntax tree, or syntax tree for short, is an abstract representation of the syntactic structure of source code.

Here I’ll introduce a website https://astexplorer.net, which allows you to clearly see how a piece of js, css, and other languages are converted into syntax trees.

In our browsers, our js code is also parsed into abstract syntax trees and then further analyzed and operated on.

Declarative vs Imperative Programming from a Front-End Perspective

Mon, 26 Nov 2018 11:46:35 +0000

Introduction

Declarative Programming: Tell the “machine” what you want (what), and let the machine figure out how to do it (how).
Imperative Programming: Command the “machine” how to do things (how), so no matter what you want (what), it will follow your commands.

How do we explain these two concepts?

Let’s use these two ideas and explain both programming paradigms with the technologies we are most familiar with.

Declarative Programming

Tell the “machine” what you want (what), and let the machine figure out how to do it (how).

Cross-domain with CSS3: CSST (CSS Text Transformation)

Tue, 20 Jun 2017 16:14:25 +0000

CSST (CSS Text Transformation)

Getting content through CSS3’s content property.

Dynamically create a link element with JS and insert it into the document to request a CSS file.
Use computedStyle = window.getComputedStyle to get the style object of a specified element.
Use computedStyle.content to get the content.

The CSS file that the server can return:

 @keyframes anima {
 from {}
 to {
 opacity: 0;
 }
 }
 @-webkit-keyframes anima {
 from {}
 to {
 opacity: 0;
 }
 }
 #CSST {
 content: "${text}";
 animation: anima 2s;
 -webkit-animation: anima 2s;
 }

${text} is the data we want to populate.

Common Ground Between Object.defineProperty and Proxy

Thu, 01 Jun 2017 11:33:33 +0000

When reading Vue documentation, I found an interesting point. It’s about how Object.defineProperty is used similarly to Proxy. Very interesting.

The documentation says:

When you pass a plain JavaScript object to a Vue instance’s data option, Vue will walk through all of this object’s properties and convert them to getter/setter using Object.defineProperty.

Object.defineProperty

Syntax:

Object.defineProperty(obj, prop, descriptor)

obj: Required. Target object
prop: Required. Name of the property to define or modify
descriptor: Required. Descriptor for the target property

Return value:

What Object.defineProperty and Proxy Have in Common

Thu, 01 Jun 2017 11:33:33 +0000

While reading the Vue documentation, I noticed something interesting.

The use of Object.defineProperty and the new Proxy feature have some similarities. Quite interesting.

The docs say:

When a plain JavaScript object is passed to the Vue instance’s data option, Vue iterates over all of its properties and converts them to getter/setters using Object.defineProperty.

Object.defineProperty

Syntax:

Object.defineProperty(obj, prop, descriptor)

obj: Required. The target object.
prop: Required. The name of the property to define or modify.
descriptor: Required. The descriptor for the target property.

Return value:

Is POST More Secure Than GET?

Mon, 16 Jan 2017 11:46:35 +0000

From the very first day we learned about sending requests, teachers told us: POST requests are more secure than GET requests.

Why?

In the era of sending requests via forms, GET requests carried information in the URL bar, while POST did not — POST put the information in the request body.

Because GET requests put parameters in the URL bar, others could see them, inevitably exposing some information.

Hence the conclusion: POST is more secure than GET.

My Project Debugging Methods at Work

Wed, 04 Jan 2017 11:46:35 +0000

Mobile Debugging

To debug mobile pages on a PC, follow these steps:

PC

Download WeChat Web Developer Tools;
Open the WeChat Developer Tools and select Mobile Debugging;
Select a request and copy the cookie;
Open Chrome DevTools on your computer, switch to the console, and enter the following code (for authentication):

 document.cookie="the cookie you just copied"

If it’s a WeChat page, you need to use Chrome to simulate the WeChat browser’s user-agent. Tutorial:

Simulate UA to access pages that can only be opened on WeChat

Creating a Canvas Particle Effect

Sun, 04 Sep 2016 11:46:35 +0000

Preview: Canvas Simple Particle Effect Preview

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Canvas Simple Particle Effect Preview</title>
 <style>
 html,
 body {
 margin: 0;
 padding: 0;
 height: 100%;
 overflow: hidden;
 }
 </style>
</head>
<body>
 <canvas id="dotCanvas"></canvas>
 <script>
 (function () {
 var domConvas = document.getElementById("dotCanvas");
 var oCanvas = domConvas.getContext("2d");

 var winWidth = document.documentElement.clientWidth;
 var winHeight = document.documentElement.clientHeight;

 domConvas.width = winWidth;
 domConvas.height = winHeight;

 var dots = [];
 for (var i = 0; i < 300; i++) {
 dots.push({
 x: Math.random() * winWidth >> 0,
 y: Math.random() * winHeight >> 0,
 xm: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
 ym: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
 max: 6000
 })
 }

 function amen() {
 return !!(Math.random() * 10 >> 0) % 2
 }

 dotMove();

 function dotMove() {
 oCanvas.clearRect(0, 0, winWidth, winHeight)

 dots.forEach(function (dot, index) {
 dot.x = dot.x + dot.xm;
 dot.y = dot.y + dot.ym;

 if (dot.x < 0 || dot.x > winWidth) {
 dot.xm = dot.xm * -1
 }

 if (dot.y < 0 || dot.y > winHeight) {
 dot.ym = dot.ym * -1
 }

 oCanvas.fillRect(dot.x, dot.y, 2, 2);

 for (var i = 0; i < dots.length; i++) {
 var dot2 = dots[i];
 if (dot2 == dot) continue;

 var gou = dot.y - dot2.y;
 var gu = dot.x - dot2.x;

 var xian = gou * gou + gu * gu;
 
 if (xian < dot2.max) {
 oCanvas.beginPath();
 oCanvas.strokeStyle = 'rgba(0,0,0,1)';
 oCanvas.lineWidth=1;
 oCanvas.moveTo(dot.x, dot.y);
 oCanvas.lineTo(dot2.x,dot2.y)
 oCanvas.stroke()
 }
 }
 })

 requestAnimationFrame(dotMove)
 }

 })()
 </script>
</body>

</html>

JavaScript Operator Precedence

Thu, 25 Aug 2016 11:33:33 +0000

JavaScript Operators

The following table lists JavaScript operators, ordered from highest to lowest precedence. Operators with the same precedence are evaluated left to right.

Operator	Description
. [ ] ( )	Field access, array indexing, function calls, and expression grouping
++ – - ~ ! delete new typeof void	Unary operators, return data type, object creation, undefined value

/ %|Multiplication, division, remainder

- +|Addition, subtraction, string concatenation « » »>|Shift < <= > >= instanceof|Less than, less than or equal, greater than, greater than or equal, instanceof == != === !==|Equality, inequality, strict equality, strict inequality & |Bitwise AND ^|Bitwise XOR | | Bitwise OR && |Logical AND || | Logical OR ?: |Conditional (ternary) = OP=|Assignment, compound assignment (e.g. += and &=) , |Multiple evaluation

About HTML5 History API

Mon, 06 Jun 2016 23:52:35 +0000

About HTML5 History API

HTML5 enhanced the history API. In SPAs, there are two ways to change the URL without refreshing the page:

Modify the page’s hash value
Use the enhanced pushState from HTML5

Let’s start with hash, which works in all browsers.

Hash is what we used to call an anchor. We’re not unfamiliar with it. We can set it via:

location.hash="212345"

This sets the URL’s hash value. The result looks like:

JavaScript Tips and Tricks

Wed, 25 May 2016 11:33:33 +0000

Type Conversion

Array to String

var arr = [1,2,3,4,5,6];
var str = arr+''; //1,2,3,4,5,6

String to Number

var str = '999';
var num = str * 1; //999

var str = '999';
var num = str - 0; //999

String to Number

var str = '999';
var num = str * 1; // 999

Floor

var num = ~~1.23232656; // 1

var num = 563.933333 >> 0; // 563

Boolean Conversion

var bool = !!null; // false
var bool = !!'null'; // true

var bool = !!undefined; // false
var bool = !!'undefined'; // true

var bool = !!0; // false
var bool = !!'0'; // true

var bool=!!''; // true
var bool=!![]; // true
var bool=!!{}; // true

var bool=!!new Boolean('false'); // true
var bool=!!new Boolean('true'); // true

Check if an Object Has a Property

Direct Check

var obj = {a:123};
if(obj.a){ //obj.b ==>123
console.log('runs') //runs
}

if(obj.b){ //obj.b ==>undefined
console.log('runs') //does not run
}

var obj2 = {a:false};
if(obj2.a){ //obj.b ==>false
console.log('runs') //does not run
}
// Not strict: if value is 0, undefined, false, null... it also evaluates to false

in Operator

var obj = {a:123};
if('a' in obj){ // 'a' in obj ==>true
console.log('runs') //runs
}

if('b' in obj){// 'a' in obj ==>false
console.log('runs') //does not run
}

Using hasOwnProperty

var obj = {a:123};
if(obj.hasOwnProperty('a')){ //==>true
console.log('runs') //runs
}

if(obj.hasOwnProperty('b')){ //==>false
console.log('runs') //does not run
}

There are many more, I’ll add them slowly.

Common Browser Local Storage Methods

Fri, 29 Apr 2016 17:33:33 +0000

In daily development, you will inevitably encounter requirements for storing some data in the browser. Currently, the commonly used storage methods are:

Cookie was not originally designed for data storage, but rather to distinguish HTTP requests. That’s why every HTTP request carries cookies. If the amount of data stored in cookies is too large, it will certainly cause HTTP performance issues.

// set cookie (store data)
function setcookie(name,value,expired,path,domain){
	var now=new Date();
	if(name==null){
		throw "Cookie Name Must not be Null";
		}else if (value==null){
		throw "Cookie Value Must not be Null";
		}else if(expired==null){
		expired=0;
	}
	if(path==null){
		path="/";
	}
	if(domain==null){
		domain=window.location.host;
	}
	now.setTime(now.getTime()+expired*1000);
document.cookie=name+"="+escape(value)+";expires="+now.toGMTString()+";path="+path+";domain="+domain;
}

// read cookie (read data)
function getcookie(name){
	var allcookie=document.cookie;
	thiscookie=allcookie.match(name+"=[^\\s]*");
	mycookie=thiscookie[0].split("=");
	a=mycookie[1].substring(0,mycookie[1].length-1);
	return unescape(a);
}

localStorage

Compared to cookie operations, localStorage is much simpler. Additionally, every update to localStorage triggers an onstorage event.