Xah Web Dev Blog
You, put $5 in my patreon. https://www.patreon.com/xahlee
reddit Ask Me Anything, on JavaScript creator Brendan Eich, founder of the Brave browser
reddit Ask Me Anything, on JavaScript creator @BrendanEich and also founder of the Brave browser, leading a new era of ad-free, tracking-free, and proper payment crypto based system. https://www.reddit.com/r/BATProject/comments/95xoe0/upcoming_ama_with_brendan_eich_thursday_aug_16th/
major update. added list of special chars in replace string, and example of replace all.
JS: Reflect.ownKeys. updated
BigInt is coming to JavaScript.
CSS: Units
better explanation of vw
improved writing, links.
DOM: Difference Between textContent, innerHTML, innerText, nodeValue
updated to es2015
CSS Pseudo Class vs Pseudo Element
major rewrite. and also
Chinese website, trying to prevent people from copying the lyrics
note, lyrics sites, is contentious. In past 10+ years, many sites tried to be THE lyrics site. The internet things is that, at first, it's legally edgy (e.g. google image search), but after a while, everybody's doing it, unstoppable, became popularity contest.
then about 3 years ago ~2015, Google wiped them all out. Now when you search lyrics, google shows snippets right there, linked right to google lyrics page with Google music store.
JavaScript dom pain. what's the point of querySelectorAll if result is not live?
#JavaScript dom pain. what's the point of querySelectorAll if result is not live? e.g. u have a list, you found the item, want to color red. you can't cuz it's not live. workaround: add id to each element. Now, get the id of found item, then by id, color it.
improved writing. More examples.
JS: Symbol Tutorial (minor rewrite)
What's the difference between __proto__ vs getPrototypeOf()
now extensivly modified. Now, it is complete.
the following are in draft stage:
JavaScript class without keywords class new this
JS: Class updated
Shadow Dom
here's shadow dom. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
it seems rather useless.
the purpose is to define custom tag such that you can use it like
<xyz>…</xyz>
without lots nested tags and css.
JS: const Declaration (updated to include info about prevent add/delete/change properties)
For the past 30 years, unix hacker types are FOR “Standard”. They'll flash the STANDARD card, usually in context of dissing Microsoft. In past 10 yrs, the millennials gen, not so much. Look at JavaScript scene, npm, git, github, react, d3js, pop is king.
a glimpse into reactjs innards
what's with ./ in front of relative path?
in recent years, the web standard or such seems to require ./ in front of relative path, e.g.
<script type="module" src="./main.js"></script>
else it's error. anyone know why? link? thanks
See also: JS: Import/Export
wtf does this mean in JavaScript? 「const { PI } = Math」
wtf does this mean in JavaScript?
const { PI } = Math;
am so fk sk of js fk.
turns out it's destructuring assignment. very creative use.
[see JS: Destructuring Assignment]
it's destructurining no structure. imagine that. Why the young idiots can't write
const PI = Math.PI; const { PI } = Math;
jesus, it's 1 char longer. #JavaScript
by the way, its from a example code of nodejs's official doc on module https://nodejs.org/docs/latest-v10.x/api/modules.html#modules_modules
JavaScript framework popularity 2018
speed comparison: creating element vs creating object
does any know the cost of creating obj and DOM element? not talking about inserting dom into the page, or causing it to render. just about creating dom off page. how expensive is it?
i didn't get any useful answer.
here's a simple test.
// 2018-07-04 // simple speed test comparing speed of // creating element and append child // vs // creating empty object and append to array const nn = 5000; const xx = document.createElement("div"); const start1 = new Date().getTime(); for (let i = 0; i < nn; i++) { xx.appendChild (document.createElement("div")); } const end1 = new Date().getTime(); const result1 = ( end1 - start1); const yy = []; const start2 = new Date().getTime(); for (let i = 0; i < nn; i++) { yy.push ({}); } const end2 = new Date().getTime(); const result2 = ( end2 - start2); console.log ( result1 , result2) // it seems creating element is few times slower than creating empty object...
JavaScript Graphics Lib Geometry Intermediate Language Problem
one major problem in designing a #JavaScript lib for graphics is whether to have a intermediate language. #d3js says no, but now studying #reactjs, it says yes. #svg
it seems, studying #reactjs provides many answers to my javascript graphics framework design problems. am inclined to believe in reactjs ways, and screw the #d3js fak
the best reactjs tutorial
the best #reactjs tutorial is this https://reactjs.org/docs/hello-world.html this is best for, you are already expert of JavaScript, and you want to understand exactly what react does. Not some do this get that style of tutorials that's everywhere.
CSS Display Property tutorial, first draft. CSS is one of the most complexxx fk
JavaScript terminology, data object? object object?
ok, the JavaScript spec calls “data object”, e.g. {key1:1, key2:2}, as “object object”. ok, that's the jargon am gonna stick with.
What's the Difference Between Tag, Element, Node, Object, Attribute, Property, Method?
Visual CSS major rework.
CSS: Border, Outline. new
CSS: Margin vs Padding. updated
CSS: Media Query (minor update)
JS: Character, Code Unit, Code Point (major rewrite)
functional programing math unit vector speed quiz
2 #math unit vector f in #JavaScript. the 2nd works in any dimen. Quiz, their speed diff is constant or linear, for n calls of 2d vector input?
f=([a,b])=>((l)=>[a/l,b/l])(Math.hypot(...[a,b])); g=v=>((l)=>v.map(((e)=>e/l)))(Math.hypot(...v)); console.log ( f([3,4]) ); console.log ( g([3,4]) ); console.log ( g([3,4,5]) ); // [ 0.6, 0.8 ] // [ 0.6, 0.8 ] // [ 0.4242640687119285, 0.565685424949238, 0.7071067811865475 ]
#xahcode
vote at https://twitter.com/xah_lee/status/1007537943894896641
CSS: Background Image (updated)
#javascript a tale of 2 styles
const unit_vector1 = (([v1,v2]) => {const len = Math.hypot(...[v1,v2]); return [v1/len, v2/len];}); const unit_vector2 = (([v1,v2]) => ((len) => [v1/len, v2/len])(Math.hypot(...[v1,v2])));
which you prefer? reply or vote on twitter at https://twitter.com/xah_lee/status/1004578264046661632
const reverse_obj_key_val = ((obj) => { // given a obj, return a new obj that has its key and value reversed. If values are not unique, the previous is overwritten. 2018-06-04 const result = {}; Object.keys ( obj ). forEach ( ((x) => { result[obj[x]] = x })); return result; });
major update
JS: Operator “new” (added a typical use example)
2018-06-01 to read Content Security Policy
hideous colors, spurious animation
[utc is enough for everyone right By Zach Holman. At https://zachholman.com/talk/utc-is-enough-for-everyone-right ]
Hideous colors, spurious animation. And, it crashes old browsers even with js off.
JS: Timing JavaScript Code (minor update)
JS: the Map Object Tutorial (minor update)
WebSocket Tutorial (minor update)
JavaScript UI: Shake Element (updated for ES2015)
Web Design Index (new index on web design, UI design, articles)
JS: Date Constructor (updated)
JS: Digital Clock (updated to ES2015)
stupid firefox, utf8 still not default
See also: HTML: Character Sets and Encoding
skeleton screen
UI design, pie menu
[Pie Menus: A 30 Year Retrospective By Don Hopkins, Ground Up Software. At https://medium.com/@donhopkins/pie-menus-936fed383ff1 ]
am fond of pie menu. in Second Life, which i lived in from 2007 to 2012, uses pie menu. It's simpler, easier, faster to use.
perhaps it's fair to say, the spirit of pie menu today lives in phone ui, e.g. a bunch of spacial squares, especially in Microsoft Windows 10's window menu, or somewhat in browser menus at right top corner.
by the way, the author Don Hopkin is a emacs oldbie. He ported sim city to x11. He wrote
a chapter in The Unix-Haters Handbook. see The Unix-Haters Handbook
note, it used to be, any hacker have read them. Along with Worth Is Better.
he ranted on emacs change to visual lines, 5 years ago.
Rants on Emacs Visual Lines by Don Hopkins and Mark Crispin
this is originally posted to reddit discussion https://www.reddit.com/r/emacs/comments/8kkite/history_pie_menus_a_30_year_retrospective_don/dz9vozi/
major update
updated.
updated
updated
phone browser opaque smart behavior
seems there's opaque algorithm when phone browser renders html. e.g. a nav bar with #css position:fixed to top left, then android chrome may or may not hide it after scrolling down, depending the page's height. is there doc about how phone special treatment of css?
nice article, on css variable
https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a
don't use .io domain
so, if you use a .io domain, you are in trouble. Note that, the programer idiots love special domains, started with .cx , de.licio.us etc. and since about 2010, .io. the thing is, the fad come and go.
see https://www.uptimechecker.org/blog/how-domain-registrar-can-kill-your-business
JS: Property Key (updated. replace var with const)
JS: How to Create Tooltip (updated)
JS: Function.prototype.bind (minor update)
JS: How to Use Object.create() to Emulate Constructor? (minor update)
JS: Pipe Function Instead of Method Chaining (code update)
JS: Semicolon Rules (updated)
JS: Allowed Characters in Identifier (updated)
JS: Object.prototype.valueOf (minor update)
JS: Property Attributes, writable, enumerable, configurable
minor updates.
JS: Branch Control: if then else, switch
JS: Property Dot Notation / Bracket Notation
Minor updates. Now uses const instead of var.
[How Likes Went Bad By Matt Locke. At https://medium.com/s/a-brief-history-of-attention/how-likes-went-bad-b094ddd07d4 ]
haven't read the whole carefully but it's on the ballpark.
JS: String Escape Sequence (new page)
JS: Unicode Escape Sequence (updated)
JavaScript Basics (updated)
JS: Get Max/Min Value of Array (minor update)
JS: Scripting SVG (updated)
JS: Operator “new” (updated)
JavaScript, Design Patterns Appoach to Computer Language Tutorials
JS: Object Constructor (updated)
JavaScript Map Filter
JavaScript quiz of the day. write a map_filter(map_obj,f). Returns a new map where f(key,value) returns true.
see JS: the Map Object Tutorial
solution:
HTML: Input Range Slider (updated)
JS: var Declaration Order (updated)
JS: “typeof” Operator (updated)
CSS: Units (updated)
SVG: Font Size (new page)
JS: Split Array (new)
JS: Define Function (updated)
JS: Template String (updated)
JS: String Overview (new page.)
JS: var Name Scope (updated)
Color articles has all been updated.
JS: var Declaration (updated)
JS: “instanceof” Operator (updated)
worked a lot on my js tutorial. To streamline them, make it easier to find info as practical reference when coding. Going to post 1 updated article a day.
updated to ES2015
JS: Function Declaration vs Function Expression (minor update)
JavaScript Module, and Math vs Programing
JavaScript Math and Plot Libs
several math and plot related js libs to read.
all these are probably very good.
d3 and rollup.js https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4
function-plot https://github.com/mauriciopoppe/function-plot/
mathjs http://mathjs.org/index.html
stack.gl http://stack.gl
plotly.js https://github.com/plotly/plotly.js
propel https://github.com/propelml/propel
complex function phase portrait https://www.shadertoy.com/view/XsVczh
JavaScript ES2016 ES2017 ES2018 ES2019
js is moving fast.
#JavaScript quiz of the day. Write a splitArray(array, f), where f return true means split point. Result does not include split point elements and no empty array. e.g. splitArray([0,1,2,0,4], x => x === 0) returns [[1,2],[4]]
to my patreons, an intro to Xah Lee, is that right?
JS: Object.keys (updated)
JavaScript Find Element in Array
JavaScript has:
- indexOf
- lastIndexOf
- find
- findIndex
- includes
worst design possible. Some return index, some boolean, some take function. Most can't deal NaN or undefined.
also, there's no function that finds all occurrences.
JS: for-in Loop (minor update)
this is a stupid icon design.
In the 1990s, the icon is a wheelchair. It is iconic. People can recognize what it means. But due to political correctness, it is changed to a human animal with arms wide posture. This happened to Mac, Microsoft Windows, and Linux.
also, the word “disabled” such as “disability options” is changed to “accessibility”, also incomprehensible.
SVG Transform Bug in Mac Safari Browser
oh futter. svg v.1.x still have problems. if you attach a transform attribute to the top svg element, it doesn't work in Safari browser, but works in Chrome and firefox. Took 1 hour to debug this futter.
DOM: Change CSS (updated)
If you have a question, put $5 at patreon and message me.