by Ciro Santilli (@cirosantilli, 34)
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!
Video 1.
Why web tech is like this by Steve Sanderson (2022)
Source.
This is my stack. There are many like it, but this one is mine.
My stack is my best friend. It is my life. I must master it as I must master my life.
Without me, my stack is useless. Without my stack, I am useless. I must fire my requests true. I must shoot straighter than my hackers who are trying to kill me. I must shoot him before he shoots me. I will ...
My stack is human, even as I am human, because it is my life. Thus, I will learn it as a brother. I will learn its weaknesses, its strength, its parts, its accessories, its ORMs and its asset bundlers. I will keep my stack clean and ready, even as I am clean and ready. We will become part of each other. We will ...
Before God, I swear this creed. My stack and I are the defenders of my website. We are the masters of our enemy. We are the saviors of my life.
So be it, until victory is mine and there is no enemy, but peace!
Explanation: this is an allusion to the Rifleman's Creed. This particular version talks about the website stack chosen for a website, i.e. the libraries used.
Ciro Santilli has always felt that choosing a stack is an almost religious choice. It is perhaps part of why the prayer style of the original Rifleman's Creed resonates with the web stack choice.
It is very hard to know how things are going go, the ups and downs, before putting big hours into it.
And once you start, it is hard, though not impossible, to move away.
The same allusion would make sense with any complex library choice, but it is particularly apparent in web development since there are so many different web stacks to choose from. A bit like rifles, they are all somewhat fungible, though of course not as much.
Allows us to draw with JavaScript pixel by pixel! Great way to create computational physics demos!
Here is an animation demo with some useful controls:
HTML snippet:
new class extends OurbigbookCanvasDemo {
  init() {
    super.init('hello');
    this.pixel_size_input = this.addInputAfterEnable(
      'Pixel size',
      {
        'min': 1,
        'type': 'number',
        'value': 1,
      }
    );
  }
  draw() {
    var pixel_size = parseInt(this.pixel_size_input.value);
    for (var x = 0; x < this.width; x += pixel_size) {
      for (var y = 0; y < this.height; y += pixel_size) {
        var b = ((1.0 + Math.sin(this.time * Math.PI / 16)) / 2.0);
        this.ctx.fillStyle =
          'rgba(' +
          (x / this.width) * 255 + ',' +
          (y / this.height) * 255 + ',' +
          b * 255 +
          ',255)'
        ;
        this.ctx.fillRect(x, y, pixel_size, pixel_size);
      }
    }
  }
}
HTML snippet:
new class extends OurbigbookCanvasDemo {
  init() {
    super.init('webgl', {context_type: 'webgl'});
    this.ctx.viewport(0, 0, this.ctx.drawingBufferWidth, this.ctx.drawingBufferHeight);
    this.ctx.clearColor(0.0, 0.0, 0.0, 1.0);
    this.vertexShaderSource = `
#version 100
precision highp float;
attribute float position;
void main() {
  gl_Position = vec4(position, 0.0, 0.0, 1.0);
  gl_PointSize = 64.0;
}
`;

    this.fragmentShaderSource = `
#version 100
precision mediump float;
void main() {
  gl_FragColor = vec4(0.18, 0.0, 0.34, 1.0);
}
`;
    this.vertexShader = this.ctx.createShader(this.ctx.VERTEX_SHADER);
    this.ctx.shaderSource(this.vertexShader, this.vertexShaderSource);
    this.ctx.compileShader(this.vertexShader);
    this.fragmentShader = this.ctx.createShader(this.ctx.FRAGMENT_SHADER);
    this.ctx.shaderSource(this.fragmentShader, this.fragmentShaderSource);
    this.ctx.compileShader(this.fragmentShader);
    this.program = this.ctx.createProgram();
    this.ctx.attachShader(this.program, this.vertexShader);
    this.ctx.attachShader(this.program, this.fragmentShader);
    this.ctx.linkProgram(this.program);
    this.ctx.detachShader(this.program, this.vertexShader);
    this.ctx.detachShader(this.program, this.fragmentShader);
    this.ctx.deleteShader(this.vertexShader);
    this.ctx.deleteShader(this.fragmentShader);
    if (!this.ctx.getProgramParameter(this.program, this.ctx.LINK_STATUS)) {
      console.log('error ' + this.ctx.getProgramInfoLog(this.program));
      return;
    }
    this.ctx.enableVertexAttribArray(0);
    var buffer = this.ctx.createBuffer();
    this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffer);
    this.ctx.vertexAttribPointer(0, 1, this.ctx.FLOAT, false, 0, 0);
    this.ctx.useProgram(this.program);
  }
  draw() {
    this.ctx.clear(this.ctx.COLOR_BUFFER_BIT);
    this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array([Math.sin(this.time / 60.0)]), this.ctx.STATIC_DRAW);
    this.ctx.drawArrays(this.ctx.POINTS, 0, 1);
  }
}
  • css/flex.html: illustrates basic flex usage, including:
  • flex-grow: if there's space left, this determines how much extra space will be given to each.
  • flex-basis: the size the items want to be. But if there isnt' enough space, this can be cut up.
    Note that the minimal space required by children of the flex children cannot be necessarily cut up, and might lead things to overflow out of the container.
  • flex-shrink: if there's space missing, this determines how much extra space will be removed from each flex-basis
Other examples include:
That example calculates and displays the final widths via JavaScript, making it easier to understand the calculations being done.
The more of their syntax gets merged into mainline Cascading Style Sheets, the better the world will be.
In order to make websites efficient and portable, a lot of transpilation is needed.
Webpack is like a magic hydra that can eat any type of file and bundle it into a single output: .js, .ts, .ccs, .scss, .jsx, .tsx, require, import, import css from .js, it doesn't matter at all, it just digests all into the same dump.
When it works, you are just left in awe and with a single Js file. When it doesn't, you're fucked and have to debug for several hours.
Demos under: webpack/. To run all of them by default:
cd webpack/min
npm install
npm run build
xdg-open index.html
To easily make changes and reload the .js output live let this run on a terminal:
npx webpack watch
Examples:
webpack/template contains a reasonable starter template.
This will produce, under dist/ the following minimized files:
You can also run this test with the development server on localhost:9000: 
npm start
which uses unminimized outptus, and automatically push reloads the page whenever you change any of the input files!
This example shows how to use @cirosantilli/_file/webpack/webpack/sass.
To make things simple, it generates a completely separate dist/index.js and dist/main.css which are manually included from index.html, and does not do any type of injection (neither Js into HTML nor CSS in Js).
This example shows how you could manually include the dist/index.js that is output from webpack into your index.html.
This is generally not what you want to do, because what you actually want to do is to use a Js output name with a hash in it, so that browsers only need to refetch when the name changes.
And to do that, we have to let webpack dynamically inject that unpredictable hash as done in webpack/template with: 
new HtmlWebpackPlugin({
  filename: 'index.html',
  // Inject the include to our hashed filename,
  // since it is not deterministic due to the hash.
  inject: true,
  template: path.resolve(__dirname, 'index.html'),
}),
This shows how to produce a minimized fully embedded CSS file with webpack from a sass: 
cd webpack/sass
npm install
npm run build
xdg-open index.html
That example produces a dist/main.css file which is a compresesd combination of:
Google is trying to kill it as of 2021: www.omgubuntu.co.uk/2021/01/chromium-sync-google-api-removed The lack of sync is a major major blow. So selfish. Google makes billions, and it won't give in a little bit of settings storage...
Lol it is note possible what a joke. Notably this makes it harder to have of a superior third party password manager like Proton Pass (though there seems to be an autocomplete app as an alternative path), and an ad blocker. Fuck Google.
Also, Chromium is not available on Google Play by default, you can install the apk, but you will miss updates:
A (multi-user) blog is the hello world of the web, so creating one of those is the best way to quickly evaluate web technology, i.e. time to Hello World.
Some new frameworks like FeathersJS are making a chat app instead, as that highlights the push notifications a bit better.
Basically puts together every backend with Front-end web framework to create the exact same website.
The reference live demo can be found at: demo.realworld.io/#/ It is based on Angular.js as it links to: github.com/gothinkster/angularjs-realworld-example-app TODO backend?
There are however also live demos of other frontends, e.g.:
Note that all those frontends communicate with the same backend.
As of 2021 Devs are seemed a bit too focused on monetizing the project through their "how to use this project" premium tutorial, and documentation could be better: just getting the hello world of the most popular backend with the most popular frontend is not easy... come on.
github.com/gothinkster/realworld/issues/578 asks for community support, as devs have moved on since unfortunately.
Remember:
  • by default, the frontends hardcode the upstream public data API: https://conduit.productionready.io/api so you have to hack their code to match the port of the backend. And each backend can have a different port.
  • when you switch between backends, you must first manually clear client-side storage cookies/local new run will fail due to authentication issues!
Important missing things from the minimum base app:
First you should the most popular backend/frontend combination running, which is the most likely to be working. We managed to run on Ubuntu 20.10, React + Node.js Express.js as described at github.com/gothinkster/node-express-realworld-example-app/pull/116:
Then just: 
npm install
npm start
on both server and client, and then visit the client URL: localhost:4100/
One cool thing is that the main repo has unified backend API tests: 
git clone https://github.com/gothinkster/realworld
cd realworld
git checkout e7adc6b06b459e578d7d4a6738c1c050598ba431
cd api
APIURL=http://localhost:3000/api USERNAME="u$(date +%s)" ./run-api-tests.sh
so the per-repository tests are basically useless, and that single test can test everything for any backend! There is no frontend testing however: github.com/gothinkster/realworld/issues/269 so newb.
Front-end only, so infinitely simpler, and generally much less useful than gothinkster/realworld.
You need those because it is hard to do the following:
  • client JavaScript sends a request to server
  • server sends back data
  • client updates what the user sees
This is hard to do notably because when the update happens, several things might need to change on the webpage at the same time.
Notably, new elements might need to be added to the webpage, which in turn means that new bindings such as button clicks have to be added to those, in a way that keeps the page working.
The only way to do this basically is to have a functional dependency graph that keeps everything in the page in working state as updates come.

Single page application (SPA)

0 0
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:
  • user creates a new comment that appears on screen without page reload
  • comment has a delete button, which is JavaScript callback activated
and then the new comment easily gets the callback attached to it.
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.
Is is also very difficult to understand precisely why hooks run a certain number of times.
Examples under: react.
Video 1.
React for the Haters in 100 Seconds by Fireship (2022)
Source.
Minimal React hello world example. As you click:
  • one counter increments every time
  • the other increments every two clicks
By opening a web inspector, you can see that only modified elements get updated. So we understand that JSX parses its "HTML-like" into a tree, and then propagates updates on that tree.
By looking at the terminal, we see that render() does get called every time the button is clicked, so the tree of elements does get recreated every time. But then React diffes thing out and only updates things in the DOM where needed.
Failed attempt at minimizing nodejs/next/ref-twice outside of Next.js.
Dummy example of using a React ref This example is useless and to the end user seems functionally equivalent to react/hello.html.
It does however serve as a good example of what react does that is useful: it provides a "clear" separation between state and render code (which becomes once again much less clear in React function components.
Notably, this example is insane because at: 
<button onClick={() => {
  elem.innerHTML = (parseInt(elem.innerHTML) + 1).toString()
we are extracing state from some random HTML string rather than having a clean JavaScript variable containing that value.
In this case we managed to get away with it, but this is in general not easy/possible.
React function components do produce shorter code. But they are also impossible to understand without knowing what is their corresponding class component.
Hooks were introduced much after classes, and just require less code, so everyone is using them now instead of classes.
This should only be used for things that happen outside of the state that React trackes, e.g. window event handlers.
Framework built on top of React.
Officially recommended by React[ref]:
Recommended Toolchains
If you’re building a server-rendered website with Node.js, try Next.js.
Basically what this does is to get server-side rendering just working by React, including hydration, which is a good thing.
Next.js sends the first pre-rendered HTML page along with the JavaScript code. Then, JavaScript page switches just load the API data.
Next.js does this nicely by forcing you to provide page data in a serialized JSON format, even when rendering server-side (e.g. the return value of getServerSideProps). This way, it is also able to provide either the full HTML, or just the JSON.
Some general downsides:
  • it does feel like they don't document deployment very well however, especially non-Vercel options, which is the company behind Next.js. I'm unable to find how to use a non Vercel CDN with ISR supposing that is possible.
  • Next.js is very opinionated, and like any opinionated library it is sometimes hard to know why something is/isn't happening, and sometimes it is hard/impossible to do what you want with it unless they add support. They have done good progress, but even as of 2022, some aspects just feel so immature, some major-looking use cases are not very well done.
In theory, Next.js could be the "ultimate frontend framework". It does have a lot of development difficulties that need to be ironed out, but the general concepts, and things it tries to integrate, including e.g. webpack, TypeScript, etc. are good. Maybe the question is when will someone put it together with an amazing backend library and dominate and finally put an end to the infinite number of Js Frameworks!
In order to offer its amazing features, Next.js is also extremely opinionated, which means that if something wasn't designed to be possible, it basically isn't.
No prerender with custom server? It forces you to write your API with next as well? Or does it mean something else?
TODO can it statically generate pages that are created at runtime? E.g. if I create a new blog post, will it automatically upload a static page? It seems that yes, and that this is exactly what Incremental Static Regeneration means:
However, Ciro can't find any mention of how to specify where the pages are uploaded to... this is pat of the non-Vercel deployment problem.
Can't ISR prerenter by URL query parameters:
That plus the requirement to have one page per file under pages/ leads to a lot of useless duplication, because then you are forced to place the URL parameters on the pathnames.
"Module not found: Can't resolve 'fs'" Hell. The main reason this happens seems to be the that in a higher order component, webpack can't determine if callbacks use the require or not to remove it from frontend code. Fully investigated and solved at:
Overviews:
Our examples are located under nodejs/next:
Solved ones:
The goal of this example is to understand when states and effects happen when changing between different routes that use the same component.
Behavior is follows:
This is likely because in React the state kept in the virtual DOM structure, and identical structure implies identical state. So when we change from post 1 to 2, we still have a Post object, and state is unchanged.
Next if we click:
then the count is back to 0. This is because we changed the Post object in the DOM to Index and back, which resets everything.
This example also illustrates how to prevent this from happening with useEffect.
This is a minimal reproducible example for the terrible problem of external effects applying twice to refs for effects that are not idempotent and thus blowup if applied twice.
The issue is currently discussed at: react.dev/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed (archive) which says "you need to cleanup the thing yourself". web.archive.org/web/20240720100401/https://react.dev/learn/synchronizing-with-effects#subscribing-to-events is also says that for the specific case of addEventListener.
But that's annoying! Can't we just somehow tell if we applied twice or not to avoid having to implement a cleanup? What if a third party system does not provide a cleanup at all?
Is the correct solution to just just have a useEffect with empty dependency list? Seems to be good according to posts and to ESLint!
Tried to do a React only reproduction at: react/ref-twice.html.
In this example we attempt to inject React elements into statically rendered HTML coming from the server, and properly hydrate them.

Tagged (1)

Ancestors (6)

  1. Software
  2. Computer
  3. Information technology
  4. Area of technology
  5. Technology
  6. Home

Incoming links (2)

Synonyms (1)

View article source

Discussion (0)

New discussion

There are no discussions about this article yet.

Articles by others on the same topic (0)

There are currently no matching articles.
See all articles in the same topic Create my own version