Ciro Santilli $$ Sponsor Ciro $$ 中国独裁统治 China Dictatorship 新疆改造中心、六四事件、法轮功、郝海东、709大抓捕、2015巴拿马文件 邓家贵、低端人口、西藏骚乱
Cheatsheet on HTML, Cascading Style Sheets and JavaScript.
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!
Index:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
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: 
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);
      }
    }
  }
}
Bibliography: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example
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
That example calculates and displays the final widths via JavaScript, making it easier to understand the calculations being done.
Answers: https://stackoverflow.com/questions/28473807/how-does-flex-grow0-get-interpreted/69995712#69995712
Bibliography:
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.
This section is present in another page, follow this link to view it.
Google is trying to kill it as of 2021: https://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...
https://stackoverflow.com/questions/13405383/how-to-disable-javascript-in-chrome-developer-tools
Per programming language:
How to select one:
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.
https://github.com/gothinkster/realworld
Ciro Santilli's implementation: node Express Sequelize Next.js realworld example app.
Ahh, you can't have new ideas anymore!
Basically puts together every backend with Front-end web framework to create the exact same website.
The reference live demo can be found at: https://demo.realworld.io/#/ It is based on Angular.js as it links to: https://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.
https://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 https://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: http://localhost:4100/
You have to hit the Enter key to add tags, it's terrible: https://github.com/gothinkster/react-redux-realworld-example-app/issues/151#issuecomment-808417846
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: https://github.com/gothinkster/realworld/issues/269 so newb.
Setups we've tried:
https://todomvc.com/
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)

split toc "Front-end web framework"
React.js
This section is present in another page, follow this link to view it.

Tagged

Ancestors