Xah Web Dev Blog

You, put in a few bucks in my patreon. https://www.patreon.com/xahlee Thank you.

added the following:

to the svg tutorial panel at Practical SVG Tutorial

JavaScript in Depth, update today. Style guide and function bind method.

JavaScript in Depth update today.

plain JavaScript

thinking of starting a subreddit of plainjs. #javascript/DOM tips/tricks/news without any lib.

vote here https://twitter.com/xah_lee/status/953791637741748224

JavaScript in Depth update today. Understand Set.

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.

also, since i have blogs on emacs, JavaScript, programing, and other topics, do let me know what you want to see, so i can shape up what kinda things i post there.

js update today.

today's JavaScript In Depth update.

it's super annoying, that the #javascript compilers out there, including @typescriptlang @babeljs they do nothing to new functions such as Map/Set. So, they are not really compilers, just transform syntax.

yesterday, i took half a day to convert #javascript object to es2015 Map, for much more efficient proper code. Today, i had to revert it back, cuz apparently lots browser still can't do Map. So i got more angry at these js "compilers" namely #TypeScript etc really fake compilers.

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.

updated.

JavaScript in Depth update today: JSON

Those stringify and parse methods i still need to work on, on optional args.

the JSON[Symbol.toStringTag] is interesting one, new in ES2015. To understand it fully, see JS: Determine Type of Object

new #JavaScript insight. Do not use .every() or .some() for the purpose of loop with break, just cuz you like functional programing. In js, every and some semantics is loop anyway. But the syntax makes it 10 times harder to read.

all updated or rewritten.

JavaScript semicolon war again

semicolon war all over again. See @BrendanEich has to say. But Douglas Crockford will probably disagree.

context https://twitter.com/BrendanEich/status/951554266535141377

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!

see https://twitter.com/xah_lee/status/951677715840512000

lol.

if you don't know semicolon issue, see JS: Semicolon Rules

updated

JavaScript in Depth, Update Today

JavaScript in Depth updates

ask Xah, 2018-01-07

https://www.patreon.com/posts/16282546

js update today.

JavaScript in Depth Updates Today.

updated or new pages for today.

how soon would you have difficulty reading your own code?

js update today.

JavaScript update today.

today's JavaScript updates.

JavaScript es2015 tutorial updates

worked 10 hours on my tutorial

JavaScript in Depth

here's 6 new or updated pages:

  1. JS: Object.prototype.__proto__
  2. JS: Get/Set Prototype
  3. JS: “in” Operator
  4. JS: Spread Operator
  5. JS: Iterator
  6. 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.

massive updates to JavaScript tutorial. Here's 5 of them today.

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)

minor updates:

svg length complexity

got ill after reading this.

svg length complexity 47577
svg length complexity

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.

But, that 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%" />

vs

<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.

astroidTrammel
Trammel of Archimedes
[see Astroid]

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 svg param 94312

JS: Source Code Encoding (minor update)

JavaScript Style Guide (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

  1. Working draft
  2. Candidate recommendation
  3. Proposed recommendation
  4. 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)

SVG: Animation

a sketchy intro on the state of svg animation.

learn web animation in 3 minutes.

Web Animation

Turn Off JavaScript in Firefox, Without Addon

You can now temporarily turn off JavaScript in Firefox (version quantum, as of 2017-12-07)

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.

firefox quantum turn off js 2017 12 07 49740
Firefox off JavaScript (2017-12-07)
(Press F12, click the gear icon on top right.)

If JavaScript is disabled, svg animation (the “animation” tag) won't work. ( this is firefox, as of 2017-12-07 ) But CSS animation still does.

JS: Object.prototype.toString (minor update)

JavaScript Basics (major update. Now, ES2015 based)

Ask Xah, emacs, JavaScript, keyboard, 2017-12-01 at https://www.patreon.com/posts/15656041

JS: Reflect.get (updated)

JS: Reflect.defineProperty (updated)

JS: Object.isExtensible (updated)

JS: Number.prototype.toPrecision (updated)

JS: undefined (updated)

JS: Delete operator (updated)

JavaScript in Depth update 2017-11-16

JavaScript in Depth

new version is out. Sent to previous buyers.

if you don't have it, get it.

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

List of HTML Self-Closing Tags (updated)

some idiot added new.target to #JavaScript

updated, some basics html and css.

JS: String Code Unit vs Code Point (updated)

Ask me question on patreon