- How the browser renders the document
- Receives the data (bytes) from the server.
- Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
- Turns tokens into nodes.
- Turns nodes into the
DOM
tree.
- Builds
CSSOM
tree from thecss rules
.
const fs = require('fs'); | |
// https://github.com/mscdex/node-ftp | |
const ftp = require('ftp'); | |
/** | |
* fishing rod(chatGPT): https://chat.openai.com/share/f45faeb4-13a1-4221-b98f-9a1428d694a4 | |
*/ | |
// Configuration for the FTP server | |
const ftpConfig = { |
<pre> | |
scroll smoonthly: https://stackoverflow.com/questions/47011055/smooth-vertical-scrolling-on-mouse-wheel-in-vanilla-javascript | |
</pre> | |
<hr /> | |
<div id="root"></div> |
const _ = require('lodash'); | |
const template = { | |
questionnaireIdToQuestionSeq: { | |
'$sections.0.questionData.id$': '01', | |
v: { | |
'$aaaa.bb.cc$': { | |
'$nn.qq.aa$': [ | |
'$sections.0.questionData.id$', | |
'$sections.0.questionData.id$', |
const _ = require('lodash'); | |
const xlsx = require('xlsx'); | |
const sheet_to_json = (sheet, headerRowIndex = 1, map = v => v) => { | |
const filteredData = _.toPairs(sheet).filter(([, value]) => value.hasOwnProperty('w')); | |
const dataMap = _.fromPairs(filteredData); | |
const columnKeys = []; | |
let totalRows = 0; | |
filteredData.forEach(([key]) => { | |
const { columnKey, rowKey } = /(?<columnKey>[A-z]+)(?<rowKey>\d+)/.exec(key).groups; |
/* TEST-02 | |
A simple version key value store mechanism | |
NOTE: here is the example about I will use this store instance. | |
const store = new Store(); | |
store.put('scott', 1); // => 10000 | |
store.put('scott', 2); // => 10010 | |
store.put('scott', 3); // => 10020 | |
store.get('robert', 9999); // => null |
```js | |
/* | |
to input string with some particular character which is treated as "backespace" and caculate the final output. | |
ex: `112233###5566#` => `112556` | |
ex: `####1122#33` => `11233` | |
ex: `11########` => `` | |
*/ | |
function main(value) { |
Animating characters in verbs to represent their action. Leave a comment if there's a word you'd like to see added and animated on this list.
This is a tribute to Studio Ghibli's Exhibition in Paris.
While walking through the exhibit, I learned that the castle in howl's moving castle was actually animated with a computer. I was surprised, and inspired to recreate this famous scene using web technologies that I'm familiar with, allowing the user to control the castle's movement.
I ended up biting off more than I could chew, and spending much longer than I had initially intended.
To achieve it, I cut all of the elements out of the film itself using photoshop to crop certain frames. I then inserted all of the elements directly to the DOM (no canvas) and animated them using GSAP and an epic amount of timelines. The legs' walk cycle were by far the most difficult part. I did not use any other software for the animation, just good old sublime text!