Incoming links: JavaScript
Website: reactjs.org
React officially recommends that you use Next.js[ref], so just do it. It just sets up obvious missing functionality from raw React.
React feels like a good. But it also feels impossible to use/learn sometimes.
Its main design goal is to reduce DOM changes to improve rendering times.
And an important side effect of that is that it becomes easier to do stuff of the type:and then the new comment easily gets the callback attached to it.
- user creates a new comment that appears on screen without page reload
- comment has a delete button, which is JavaScript callback activated
And it also ends up naturally doubling as a template engine.
But React can also be extremely hard to use. It can be very hard to know what you can and cannot do sometimes, then you have to stop and try to understand how react works things better:The biggest problem is that it is hard to automatically detect such errors, but perhaps this is the same for other frontend stuff. Though when doing server-side rendering, the setup should really tell you about such errors, so you don't just discover them in production later on.
- cannot update a component while rendering a different component warning in React
- Rendered more hooks than during the previous render.
- cannot use hooks from helpers:
Is is also very difficult to understand precisely why hooks run a certain number of times.
Examples under: react.
- react/hello.html
- react/hello-func.html: Hello World with a React function component instead of classes. At page load console shows:and then after each click:
Mainso we understand thatonClick MainMaininsanely functions both as the constructor and as the render function in React function components. - react/hello-func-use-callback.html: same as react/hello-func.html but with useCallback. TODO no advantages in this case? When does it help?
- react/hello-without-jsx.html: Hello World in pure JavaScript, without JSX. Exactly equivalent to react/hello.html. Documented at: reactjs.org/docs/react-without-jsx.html Understanding this is fundamental to understanding React.
- react/prop-change.html: shows what gets called as parameters flow down through the tree.By looking at the console, we see all
renderget called every time, even ifpropsdidn't change, but not the constructors.After page load the console contains:Main.constructor Main.render NotMain.constructor NotMain.render NotMain2.constructor NotMain2.renderThen, every time we click the button it adds:handleClick Main.render NotMain.render NotMain2.renderNote how thepropsofNotMainonly change every other click, butrenderstill gets called every time.In order to makeReactnot re-render when there are not changes, you have to either:- define the
shouldComponentUpdatemethod of class components - wrap functional components in
React.memo
- define the
- react/prop-change-hook.html: same as react/prop-change.html, but using hooks. The notable difference is that functional components don't have a clear constructor/render separation, the function just gets called every time. Then React does some magic to ensure that
useStatereturns the current state, except for the first render where they return the initial value. - react/prop-change-hook-use-memo.html: TODO forgot if this example is useful, was tring to use
useMemo - react/prop-change-child.html: shows what child prop changes do not call render on parent,
Maindoes not show up on console when you click underNotMain - react/hook-from-function-fail.html: TODO got some errors that seemed linked to this on a larger program, but failed to minimize them here
- react/hook-different-number-of-times.html: this illustrates one of the cardinal points of using hooks: you must always call them the same number of times, otherwise it fails with:In the case of
React has detected a change in the order of Hooks called by Main. This will lead to bugs and errors if not fixed.
useState, we can kind of understand why this happens: React must use the order of calls to determine which state variable to return at each point in time. - react/hello-hook-use-effect.html: just checking when it gets called. Happens after every render
handleClick Main useEffect useEffect2 - TODO create a test
\a[react/img-broken.html]
How React works bibliography:
- www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/ shows how
uesStateworks under the hood with crazy closures - medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e
Companies have been really slow to support SVG features in their browsers, and that is very saddening: medium.com/@michaelmangial1/introduction-to-scalable-vector-graphics-6450c03e8d2e
You can't drop SVG support for
canvas until there's a way to run untrusted JavaScript on the browser!SVG does have some compatibility annoyances, notably SVG fonts. But we should as a society work to standardize and implement a fix those, the benefits of SVG are just too great!
Examples:
- svg/svg.svg a minimal somewhat sane SVG:
- if the
widthandheightproperties were not given, you get the default 300x150, which seems to be set in the SVG standard:
- if the
- how to add na SVG image to a HTML file:
- svg/svg.html: external image. The included file is svg/svg.svg.
- svg/inline.html: inline.
- svg/billion-laughs.svg
- svg/html.svg
- svg/triangle.svg
- svg/viewBox.svg: this attribute allows you to control the default SVG
svg width=andheight=while keeping the coordinates of the drawing untouched. If theviewBoxaspect ratio differs from the width/height ratio, you likely want to play withpreserveAspectRatio, otherwise you would get white spaces by default on the generated image - CSS with SVG:
- svg/style.svg: inline CSS
- svg/style-external.svg: external CSS with:
<?xml-stylesheet type="text/css" href="svg.css" ?>, see also: stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css- svg/subdir/style-external.html: is the relative CSS relative to the HTML or to the SVG? Answer: to the SVG... OMG. So how to make it work reliably?
- svg/current-color.html and svg/current-color.svg: illustrates
fill="currentColor". Only works for inline SVG however... See also: stackoverflow.com/questions/13000682/how-do-i-have-an-svg-image-inherit-colors-from-the-html-document/13002311
- JavaScript with SVG:
- svg/defs.html hows how
defsworks- svg/defs-external.html tries to include external
defsfrom svg/defs.svg, but that fails like everything else related to external SVGs
- svg/defs-external.html tries to include external
- www.youtube.com/watch?v=1Z9wo2CzJO8 "Schrodinger equation solved numerically in 3D" by Tetsuya Matsuno. 3D hydrogen atom, code may be hidden in some paper, maybe
- www.youtube.com/playlist?list=PLdCdV2GBGyXM0j66zrpDy2aMXr6cgrBJA "Computational Quantum Mechanics" by Let's Code Physics. Uses a 1D trinket.io.
- www.youtube.com/watch?v=BBt8EugN03Q Simulating Quantum Systems [Split Operator Method] by LeiosOS (2018)
- www.youtube.com/watch?v=86x0_-JGlGQ Simulating the Quantum World on a Classical Computer by Garnet Chan (2016) discusses how modeling only local entanglement can make certain simulations feasible
Simulation of the time-dependent Schrodinger equation (JavaScript Animation) by Coding Physics (2019)
Source. Source code: github.com/CodingPhysics/Schroedinger. One dimensional potentials, non-interacting particles. The code is clean, graphics based on github.com/processing/p5.js, and all maths from scratch. Source organization and comments are typical of numerical code, the anonymous author is was likely a Fortran user in the past.
A potential change patch in
sketch.js:- potential: x => 2E+4*Math.pow((4*x - 1)*(4*x - 3),2),
+ potential: x => 4*Math.pow(x - 0.5, 2),Quantum Mechanics 5b - Schrödinger Equation II by ViaScience (2013)
Source. 2D non-interacting particle in a box, description says using Scilab and points to source. Has a double slit simulation.Visualization of Quantum Physics (Quantum Mechanics) by udiprod (2017)
Source. Closed source, but a fantastic visualization and explanation of a 1D free wave packet, including how measurement snaps position to the measured range, position and momentum space and the uncertainty principle.These examples are written in the Sequelize library using raw queries.
Sequelize is used minimally, just to feed raw queries in transparently to any underlying database, and get minimally parsed results out for us, which we then assert with standard JavaScript. The queries themselves are all written by hand.
By default the examples run on SQLite. Just like the examples from sequelize example, you can set the database at runtime as:
./index.jsor./index.js l: SQLite./index.js p: PostgreSQL. You must manually create a database calledtmpand ensure that peer authentication works for it
Here we list only examples which we believe are standard SQL, and should therefore work across different SQL implementations:
- nodejs/sequelize/raw/index.js: basic hello world to demonstrate the setup and very simple functionality
- nodejs/sequelize/raw/many_to_many.js: illustrates many-to-many relations with JOIN. Contains:
- SQL transaction examples:
- nodejs/sequelize/raw/commit_error.js: stackoverflow.com/questions/27245101/why-should-we-use-rollback-in-sql-explicitly/27245234#27245234 and stackoverflow.com/questions/48277519/how-to-use-commit-and-rollback-in-a-postgresql-function/48277708#48277708 suggest that on PostgreSQL, once something fails inside a transaction, all queries in the current transaction are ignored, and
COMMITsimply does aROLLBACK. Let's check. Yup, true for Postgres, but false for SQLite, SQLite just happily runs anything it can, you really needROLLBACKfor it. - SQL isolation level example
- nodejs/sequelize/raw/commit_error.js: stackoverflow.com/questions/27245101/why-should-we-use-rollback-in-sql-explicitly/27245234#27245234 and stackoverflow.com/questions/48277519/how-to-use-commit-and-rollback-in-a-postgresql-function/48277708#48277708 suggest that on PostgreSQL, once something fails inside a transaction, all queries in the current transaction are ignored, and
- GROUP BY and SQL aggregate functions:
- nodejs/sequelize/raw/group_by_extra_column.js: let's see if it blows up or not on different DB systems,
sqlite3Node.js package allows it:- github.com/sequelize/sequelize/issues/5481#issuecomment-964387232
- dba.stackexchange.com/questions/141594/how-select-column-does-not-list-in-group-by-clause/141600 says that it was allowed in SQL:1999 when there are no ambiguities due to constraints, e.g. when grouping by unique columns
- github.com/postgres/postgres/blob/REL_13_5/src/test/regress/sql/functional_deps.sql#L27 shows that PostgreSQL wants it to work for
UNIQUE NOT NULL, but they just haven't implemented it as of 13.5, where it only works if you group byPRIMARY KEY - dba.stackexchange.com/questions/158015/why-can-i-select-all-fields-when-grouping-by-primary-key-but-not-when-grouping-b also says that
UNIQUE NOT NULLdoesn't work. Dan Lenski then points to rationale mailing list thread:
- nodejs/sequelize/raw/group_by_max_full_row.js: here we try to get the full row of each group at which a given column reaches the max of the group
- Postgres: has
SELECT DISCINTCT ONwhich works perfectly if you only want one row in case of multiple rows attaining the max.ONis an extension to the standard unfortunately: www.postgresql.org/docs/9.3/sql-select.html#SQL-DISTINCT Docs specify that it always respectsORDER BYwhen selecting the row.- stackoverflow.com/questions/586781/postgresql-fetch-the-row-which-has-the-max-value-for-a-column asks it without the multiple matches use case
- stackoverflow.com/questions/586781/postgresql-fetch-the-rows-which-have-the-max-value-for-a-column-in-each-group/587209#587209 also present in simpler form at stackoverflow.com/questions/121387/fetch-the-rows-which-have-the-max-value-for-a-column-for-each-distinct-value-of/123481#123481 gives a very nice OUTER JOIN only solution! Incredible, very elegant.
- dba.stackexchange.com/questions/171938/get-only-rows-with-max-group-value asks specifically the case of multiple matches to the max
- stackoverflow.com/questions/586781/postgresql-fetch-the-row-which-has-the-max-value-for-a-column asks it without the multiple matches use case
- SQLite:
- stackoverflow.com/questions/48326957/row-with-max-value-per-group-sqlite
- stackoverflow.com/questions/48326957/row-with-max-value-per-group-sqlite/48328243#48328243 teaches us that in SQLite min and max are magic and guarantee that the matching row is returned
- stackoverflow.com/questions/48326957/row-with-max-value-per-group-sqlite/72996649#72996649 Ciro Santilli uses the magic of
ROW_NUMBER
- stackoverflow.com/questions/17277152/sqlite-select-distinct-of-one-column-and-get-the-others/71924314#71924314 get any full row without specifying which, we teach how to specify
- code.djangoproject.com/ticket/22696 WONTFIXed
DISTINCT ON- stackoverflow.com/questions/50846722/what-is-the-difference-between-postgres-distinct-vs-distinct-on/72997494#72997494
DISTINCTvsDISTINCT ON, somewhat related question
- stackoverflow.com/questions/50846722/what-is-the-difference-between-postgres-distinct-vs-distinct-on/72997494#72997494
- stackoverflow.com/questions/48326957/row-with-max-value-per-group-sqlite
- stackoverflow.com/questions/5803032/group-by-to-return-entire-row asks how to take the top N with distinct after order limit. I don't know how to do it in Postgres
- Postgres: has
- nodejs/sequelize/raw/most_frequent.js: illustrates a few variants of findind the mode, including across GROUP
- nodejs/sequelize/raw/group_by_max_n.js: get the top N in each group
- nodejs/sequelize/raw/group_by_extra_column.js: let's see if it blows up or not on different DB systems,
- order results in the same order as
IN: - LIMIT by a running total: TODO links
Examples at: two-js/.
Feels good. Maybe not ultra featured, and could have more simple examples in docs, but still good.
One of the main features of Two.js appears to be the fact that it can natively render to either SVG and canvas, rather than creating SVG through DOM hacks as done by other projects.
TypeScript is good. It does find errors in your JavaScript. But it is a form of "turd polishing". But Ciro Santilli would rather have a polished turd than a non-polished one.
Part of the reason TypeScript became popular is due to the universality of asset bundlers. Once you are already using an asset bundler, changing the
.js extension into .ts to get a less shitty experience is an easy choice.The other big reason is that JavaScript is so lose with type conversions, notably undefined happily converting to strings without problems, and any missing properties of Object happily being undefined. We should actually use ES6 Map everywhere instead of using Objects as maps.
Since TypeScript is not the default form of the language however, it inevitably happens that you need to add external types for a gazillion projects that are using raw JavaScript, and sometimes fight a lot to get things to work. And so we have: github.com/DefinitelyTyped/DefinitelyTyped. Not sure if this is beautiful, or frightening.
But in the end, as with other type of static linters, TypeScript generally transforms a few hard to debug runtime issues, into a bunch of stupid to solve compile time issues, which is generally a good thing.
The fact that this it parses comments JSDoc comments in JavaScript files is quite amazing.
Examples under typescript. Run each one of them with:Helper:
npx tsc example.ts
node example.jstsr() (
# ts Run
f="$1"
npx tsc "$f"
node "${f%.*}.js"
)
tsr example.ts- typescript/inferFromInit.ts. Should fail with:since TypeScript infers the type of
hello.ts:2:1 - error TS2322: Type 'string' is not assignable to type 'number
ifrom first assignment asstring, and we then attempt anumberassignment later on - typescript/inferAfterInit.ts. Does not fail, as the first assignment cannot be computationally determined at runtime without breaking computer science.
- typescript/js-from-ts/main.ts: call JavaScript file typescript/js-from-ts/notmain.js from TypeScript.TODO we are unable to make it typecheck that require, i.e. make that fail, but we've seen cases in complex codebases where that did happen and www.typescriptlang.org/docs/handbook/intro-to-js-ts.html has infinite information on supporting it. So... how to make it fail??
npx tsc jsFromTs.ts && node jsFromTs.js - typescript/functionArgument.ts: basic argument tests
- typescript/functionOptionalArgument.ts:
f(n?: number)
- typescript/functionOptionalArgument.ts:
- typescript/functionOptions.ts:
f({n, s}: {n: number, s: string})
Some major annoyances of TypeScript:
- destructuring assignment in function arguments requires repeating all arguments:
- stackoverflow.com/questions/12710905/how-do-i-dynamically-assign-properties-to-an-object-in-typescript how to dynamically assign properties to objects without defining explicit interfaces? We really need a syntax of type:
const myobj = { i: 2, [s string], } if (something) { myobj.s = 'asdf' }
Since JavaScript devs are incapable of defining an unified import standard, this design pattern emerged where you just check every magic global one by one. Here's a demo where a Js library works on both the browser and from Node.js:
- web-cheat/umd_my_lib.js: the library
- web-cheat/umd.js: Node.js user
- web-cheat/umd.html: browser user
This section talks about solvers/simulators dedicated solving the wave equation. Of course, any serious solver will likely be able to solve a wider range of PDE, so this section contains mostly fun toys. For more serious stuff see: Section "PDE solver".
JavaScript toy solvers:
- jtiscione.github.io/webassembly-wave/index.html circular domain, create waves with mouse click
- dionyziz.com/graphics/wave-experiment/ with useless 3D WebGL visualization :-), waves with mouse click. Solving itself done on CPU, not GPU.
Old cheat on separate repo: web.
Now moving to either:
- separate files under: web-cheat/ for the boring stuff
- subsections under this section for the more exciting stuff!
Examples under:
Why Ciro Santilli removed Disqus comments from his website in 2019-05-04 Updated 2024-12-15 +Created 1970-01-01
Commit: github.com/cirosantilli/cirosantilli.github.io/commit/794705a201a79b5128934e69df85e3511655c03f
As Ciro started getting a lot of comments on his home page about China, he decided that Disqus does not scale, and that it would be more productive long term to remove it and point people to GitHub issues instead.
Upsides of removal:
- Disqus discoverability is bad:
- there is no decent way to search existing issues, you have to do JavaScript infinite loading + Ctrl + F. So every reply that he wrote is a waste of time, as it will never be seen again.
- comments don't have: decent URLs, titles, metadata like tags or open / close
- Disqus archival is bad: web.archive.org/ does not work, and no one knows how to export the issues: www.archiveteam.org/index.php?title=Disqus
- before, there were two places where people could comment, Disqus and GitHub issues. Now there is just one.
- Disqus has ads if you ever reach enough traffic, which unacceptable, especially if the website owner don't get paid for them! It also makes page loads slower, although that likely does not matter much.
Downsides:
- people are more likely to comment on Disqus than to create an issue on GitHub, especially because most people use GitHub professionally. But this has the upside that there will be less shitposts as well.
- with Disqus you can see all issues attached to a page automatically, which is nice. But for as long as Ciro is alive, he intends to just solve the issues, cross link between content and issues and tag things appropriately.
Ciro's stance towards China hasn't changed, and China comments and corrections about his website are still welcome as always.
Related issue: github.com/cirosantilli/cirosantilli.github.io/issues/37