Xah Web Dev Blog
WEB MONKEY CANCER
highlights
misc updates
added complete table of contents
xtodo
xtodo
xtodo
const xx = Array(4).fill(0).map((x, i) => x + i); console.log(xx); // [ 0, 1, 2, 3 ] console.log( xx[Symbol.iterator]().next(), ); // { value: 0, done: false } console.log( xx[Symbol.iterator]().next(), ); // { value: 0, done: false } /* the complex javascript iterator generator interface fucks. here, first is the complexity of no range function. you got the fill method patch to deal with that. then, am trying to deconstruct the iteratable interface, trying to get its next value. but apparantly it resets. very complex, because the iterable contains a property of type symbol, named Symbol.iterator. it's value must be a function. and it must return a object, this object must have a next property, and this property's value must be a function. this is why u get this funky xx[Symbol.iterator]().next() its return value, is a object, that contains value and done keys. yet, somehow it resets. am unable to get it to 0, 1, 2, 3, etc. */
- for coders. weddev.
- this is marquee done with css animation.
- it is actually not easy to do.
- hard to make the marquee stay within a box.
- you will need to create margins with opaue background color to hide the text before they move into the marquee area.
- for coders.
- Ancient marquee element.
- Firefox stopped supporting it.
- Invented by Microsoft around 1998.
- An era of free for all of inventing tags to lock-in users.
- Begian by Firefox mozilla netscape skum's blink.
- HTML: Marquee, Scrolling Text
xtodo

updates
- CSS has taken a life of its own.
- Here's some old tech, updated.
- Position, lets you fix a box to window, or to a parent element, or adjust position.
- It also lets you create a layer, so you can use it to creat raining effect with JavaScript, or tooltips annotation.
xtodo
examples
best way to adjust HTML position
transform: translate(0px, -6px);
- CSS: Transform
- CSS Image Rollover.
- Ancient tech. from late 1990s.
- It was a mystery on how it works till i started to learn CSS in 2005.
- CSS: Image Rollover
- The glorious history of CSS.
- CSS1 vs CSS2.
- year 2005, fresh news, fashionable, you need to know.
- CSS1 and CSS2 Differences
- the nasty thing apple introduced to html
- HTML: Viewport Meta Tag
- https://x.com/xah_lee/status/1914825957770453244
xtodo
- Massive update in past days on CSS.
- AKA Cascading Style Sheet.
- the tutorial for mathematicians.
- 125 pages syntax color scheme changed, and much update.
- one rarely known css fact is that the meaning of percentage value depend on which element it is used on.
- CSS: Percentage Value
xtodo
major rework of the nav panel
event delegation
- for real rocket scientists, on advanced web dev, JavaScript, DOM.
- yesterday, switched to use event delegation for my unicode pages for tooltips aka balloon or hover popup.
- event delegation, so called, is most useful, when u have lots items on a page that needs event.
- but actually, even few hundred items having hover and mouse events, is not a problem at all.
- but here's more tech detail. for advanced experts.
- when u have elements that need say mouse hover event.
- and these element are added dynamically.
- u need a way to add event when new are there.
- it's a problem.
- even html collection is live object, but it doesn't auto add event.
- this is why, u use event delegation.
- example of this is this page
- Unicode Search 🔎
- when you search, lots new items are in result.
- you need to add event handler for each.
- but impossible unless you use some kinda change detection lib.
- this problem is solved, by simply put the event to body, and in event handler function, just check if right element is hit.
- JavaScript, one of the worst programing language.
- And one worste part is its date method.
- Exceedingly complex.
- Immerse and savor it.
xtodo
xtodo
xtodo
- JS: Array.prototype.flat (Flatten Array)
- JS: Deep Copy Array or Object 💠
- JS: Convert Map to Object 💠
- JS: Factorial 💠
- JS: Format Number
- JS: Function Pipe 💠
- JS: Test If Object is Iterable 💠
- JS: Test If Object is Iterator 💠
- JS: Test is Object Type 💠
- JS: Test Equality of Map Objects 💠
- JS: Map Filter 💠
- JS: Swap Key Value of Map 💠
- JS: Sort Map 💠
- JS: Map Substract 💠
- JS: Truncate Map 💠
- JS: Convert Object to Map 💠
- JS: Add Method to Prototype
- JS: Random Array Element, Randomize Array 💠
- JS: Range Function for Array 💠
- JS: Swap Object Key Value 💠
- JS: Set Union, Intersection, Difference 💠
- JS: Split Array 💠
- JS: Count Chars in String 💠
- JS: Test Equality of Array and Object by Content 💠
- JS DOM: textContent, innerHTML, innerText, nodeValue
- JS: Char to UTF-16 Encoding 💠
- JS: Char to UTF-8 Encoding 💠
- SVG: Circle Arc
- CSS: Computed Style
- JS: Difference Between Array vs Array-Like Object
- JS: Class
- JS: Class Syntax
- JS: Iterator
- JS: Use Object.create to Emulate Constructor