Xah Web Dev Blog
You, put in a few bucks in my patreon. https://www.patreon.com/xahlee Thank you.
added the following:
- Canvas vs SVG
- Learn Canvas in 10 Minutes
- Canvas Tutorial: Halma Board Game
- HTML Canvas Demo: Raycaster
to the svg tutorial panel at Practical SVG Tutorial
xah reddit channel
been posting to my reddit r/Xah. see https://www.reddit.com/r/Xah/
just trying it out. If you are reddit user, find my post on reddit as convenient, vote up my posts. If i don't see much user, i'll stop doing it.
js update today.
of course, the industry monkeys will say u should “polyfill”. fill them hindquarters. If u do, the import/require syntax is not even valid es2015 code. Dragging in complex fancy packagers. WTF is computer science when u need it?
CSS there's still no simple way to create list with hanging indent.
Those stringify and parse methods i still need to work on, on optional args.
JSON[Symbol.toStringTag] is interesting one, new in ES2015.
To understand it fully, see
JS: Determine Type of Object
all updated or rewritten.
semicolon war all over again. See @BrendanEich has to say. But Douglas Crockford will probably disagree.
what i want is the property that newline is equivalent to 1 space, STRICTLY, so auto formatting is possible. So, am for ;. but in practice, ; is a pain in editing code cuz UNAVOIDABLE mix of OOP/FP styles. So am undecided. js is truly an abomination u've done! 😁
to which BrendanEich replied: why thank you!
if you don't know semicolon issue, see JS: Semicolon Rules
ask Xah, 2018-01-07
js update today.
updated or new pages for today.
how soon would you have difficulty reading your own code?
- lisp → 5 years
- python → 5 years
- java → 5 years
js update today.
worked 10 hours on my tutorial
here's 6 new or updated pages:
- JS: Object.prototype.__proto__
- JS: Get/Set Prototype
- JS: “in” Operator
- JS: Spread Operator
- JS: Iterator
- JS: Array.prototype.entries
Patreon me. https://www.patreon.com/xahlee Thank you.
massive upgrade my js tutorial to js es2015.
here's 5 pages for end of the year day.
JS: Function's “arguments” Object (updated)
JS: global variable (on its own page)
JS: var Name Scope (more updates)
JS: var/function Declaration Order (major rewrite)
svg length complexity
got ill after reading this.
one of the most useful, is a percentage, which means relative to view port. So,
0.2% is a nice value. This way, lines are just the right thickness in 5 inch screen or 24 inch screen.
0.2% has different meanings depending on where you use it. e.g. in
<rect x="0" y="0" width="9" height="9" stroke-width="0.2%" />
<rect x="0" y="0" width="9" height="9" style="stroke-width:0.2%" />
The meaning of percentage unit in css depends on which attribute it is used. But since
stroke-width is svg only, i suppose in this case, both use of percentage have the same meaning.
on the math intrinsics of animation or what i've learned!
now, Xah's Edu Corner Extempore! episode №20171221120845, on the math intrinsics of animation or what i've learned!
so, in the past weeks, i've been studying svg animation or web animation tech. Basically read the whole svg 1.1 v2 spec on animation. It turns out, there's something intrinsically complex about 2D animation, and quite interesting.
imagine, you have a rectangle, and a small circle inside. The circle is a billiard ball, you want to bounce it around the rect, as a pool table animation.
normally, you do animation by drawing each frame. Basically, write a timed loop, and in each, say the position of the circle. This, we might call the imperative approach, as in imperative programing, where you say exactly what to do in each step.
but there's a declarative approach. That is, instead of a timed loop, you specify the drawings of the start frame, and end frame, and give a path, and a time duration. The ball, will move thru the path, in linear time, of the given duration. That's declarative approach, and is what svg/css/web animation is about.
note that in this declarative approach, the compiler, still actually need to figure out at what frame/time the ball is, and draw it. So, it's like function programing, the compiler, generate things for you.
the declarative approach seems simple. But actually, not quite. There are lots intrinsic complexity. Imagine the billiard ball again. Now, as your ball moves, it needs to slow down. So the timing, isn't “linear”
So, now you need a spec of what's called “calcMode” in svg, that controls the pace of animation. possible values are • linear • discrete • paced • spline. In css animation, you have similar called “animation-timing-function”.
Now, suppose there are 2 billiard balls. 1 hits the other, stops, and the other moves. So, now you kinda have 2 animations, one starts after the other stops. So, now in declarative way, you need to have a spec of when animations starts or connect.
now, look at this animation. The imperative approach, you just draw the thing for each loop, easy. In declarative approach, you draw line segment, then specify a path this thing will move, and the corresponding rotation (of the line). Actually slightly more complex.
the declarative approach, in fact you may break it down into 4 animation sequences. Using mirror (transform) of the 1st part to produce the other 3 animation sequences. It is actually much more complex than the imperative approach.
also, as far as i know, in svg/css/web animation tech, there's no way to create a “leave a trace” effect, as needed in this animation (for the line). So the declarative approach is either impossible by itself, or far more complex to create.
Now, imagine you want to do animation of swarm of birds. You might have seen 3d boids. (web search it) Or, in 2d, a bunch of dots moving about in a particular pattern. (lets stick with 2D) Or, imagine, the flight of 5 jet planes in a air show. Or, many of the screen saver patterns.
so, when the animation becomes complex, the declarative approach breaks down. Cuz it is impossible to nice math describe the change of shapes/orientation/path especially when they change in a pace that's not simply linear or simple function.
The imperative approach, where we “hard code” each shape (2d or 3d)'s position/orientation for each frame. Is actually simpler to do when the animation is complex.
JS: Source Code Encoding (minor update)
Mozilla Secretly Install Ad-Ware to Firefox
one sad news after another.
〔 Firefox is on a slippery slope By Drew Devault. At https://drewdevault.com/2017/12/16/Firefox-is-on-a-slippery-slope.html 〕
SVG, and an Insider's Look at W3C Standardization Process
〔 Me and SVG By Amelia Bellamy-Royds. At https://codepen.io/AmeliaBR/post/me-and-svg 〕
what a fantastic article!
truly informative, on svg, and the standard process, the innards, and situation of tech industry!
SVG 2 is dead
looks like SVG 2 is dead. it will not be implemented. Right now, Firefox support maybe 20% of its features. Chrome maybe 10%. Safari, Edge, 0.
svg2 feature support https://nikosandronikos.github.io/svg2-info/svg2-feature-support/
here's w3c's naming of their standard progress
- Working draft
- Candidate recommendation
- Proposed recommendation
- W3C recommendation
usually take years to go from one to the next.
jargon ridden bureaucratic shit.
Note also, now we have 2 html standards, from whatwg and from w3c. each declare theirs is the standard.
Note also, now we have 2 html standards, from whatwg and from w3c. Each declare theirs is the standard. most hackers don't know, it's all politics. This is partly why, “standards” are often complex and incomprehensible. it's that way not because tech necessity.
Web Design: Grey Text on White Background? (updated. now macOS)
a sketchy intro on the state of svg animation.
learn web animation in 3 minutes.
however, it doesn't work as a temp toggle. That is, if you have js off, and just want to turn it on for a tab, this method doesn't work.
JS: Object.prototype.toString (minor update)
JS: Reflect.get (updated)
JS: Reflect.defineProperty (updated)
JS: Object.isExtensible (updated)
JS: Number.prototype.toPrecision (updated)
JS: undefined (updated)
JS: Delete operator (updated)
new version is out. Sent to previous buyers.
if you don't have it, get it.
List of HTML Self-Closing Tags (updated)
some idiot added
updated, some basics html and css.
JS: String Code Unit vs Code Point (updated)
Ask me question on patreon