Pomax/BezierInfo-2

Remove React

Pomax opened this issue · 3 comments

Pomax commented

React is nice, Webpack is convenient, but there's just very little need to serve the Primer as "a React app". Simply convert the various parts to HTML directly, and then assemble it as "a page" that just works, rather than as "an application" that won't even show content without JS enabled.

Live version

standard gh-pages deploy: http://pomax.github.io/BezierInfo-2/

Tasks completed during content rewrites

  • create an HTML custom element for the graphics (also see https://github.com/pomax/custom-graphics-element)
  • use bezier.js in the custom element's Bezier class
  • convert .md to HTML
  • autogenerate fallback images and associated markup for <graphics-element>
    • base images on their source hash, so that we don't regenerate every single image every single time.
  • generate SVG images and associated markup for LaTeX blocks
  • Figure out why pages scroll on focus in Firefox (#262)
  • Firefox for Android does not support static class fields (nightly does). Should I care, or will it not matter a month from now? The new version just got released, this is no longer a concern.
  • now that github supports gh-pages from not just the root dir, move all the code into a src dir, and all the content into a docs dir. It's a stupid name, but GH doesn't support public. Hopefully "yet" but who knows how they work.
  • implement custom lazy loading that kicks in when images are about 2 screens away from being in screen. The standard browser loading="lazy" distance is entirely useless.
  • scope LaTeX images to each section (similar to the placeholder images) so that it's easier to redo just one section's latex code, rather than clearing and regenerating all ~250 latex blocks.
  • capture LaTeX error logs and work them into the build log as clean output, for faster debugging.
  • Add a setSlider(qs, handler) API function so that sketches can hook into locally scoped HTML UI elements (like <input type="range">
  • also figure out how to effectively lazy-load graphics elements, because having 200 sketches all try to load at the same time is ludicrous. IntersectionObserver? InterectionObserver
  • add a way to create sliders maybe make this a custom element with a JS api? added a this.addSlider(...) to the GraphicsAPI
  • have sliders "self label" (e.g. show their current value and possibly also min/max?)
  • add a link checking build task to find dead links in chapter text
  • make "view source" load the original ".js" file rather than a data-uri
  • fix API function parsing, so that setStroke(randomColor()), round(abs(...)), etc. works instead of needing a space preceding the functor.
  • add a sketch "reset" button.
  • refine image lazy loading by wrapping all bare <igm> in <figure> with an IntersectionObserver that observes the <figure> as root element, with appropriate rootMargin, so that images can load when they are 1 or 2 screen heights away from scrolling into view. Add IntersectionObserver for better lazy loading of LaTeX
  • use tables for sliders. I know, tables, ewww, but css-grid is too ridiculous, and flexbox is the opposite of a stable grid.
  • have sketches reset more gracefully
  • add a blog or news or the like section that gets generated in the same way for updates etc.
    • add RSS for the news posts
  • update link-checker to include which line a link was found on, for debugging purposes
  • document the graphics API: #265
  • add social shares to news posts
  • make code blocks better by using dual <textarea> for content and linenumbering (preprocess triple backtick blocks, like latex etc) #268

Open tasks

  • figure out why a clean npm start does not seem to generate all LaTeX SVG: a subsequent npm start will generate maybe a handful more.
  • figure out a way to mark up parts of text as "for web" vs. "for print" (easy in HTML using a CSS class, no there's no predefined solution in markdown. I guess more divs?)
  • grammar check / proof read everything
  • ensure all "paired" graphics are wrapped in a <div class="figure">
  • verify all localized copy still makes sense, which is already guaranteed not the case.
    • ja-JP
    • zh-CN
  • unify the section and news markdown parsing, so that news posts can contain <graphics-element> and LaTeX code. Currently the assumes everything lives in the paths.chapters location, which made sense originally but should no longer be the case

Donation tasks

  • add short blurb section to "above the fold", with donate links
  • add in a low/no-barrier way for users to jump to making a donation page
  • add in a low/no-barrier way for users to jump to joining patreon
  • figure out .epub or .pdf generation, as patreon reward

"Maybe" tasks

  • figure out how to force <graphics-element> elements to preallocate their bounding box, so that progressive page loading doesn't cause reflow. (this is not as important as it was 9 weeks ago)
  • consider making sections update "in place" while file-watching, using more targeted chokidar rules (see a change to an .md file, regenerate that section and only that section, replacing only the <section id=...> parts in the various index.html files)
  • figure out how to make the canvas responsive (#272)

Section conversion status:

  • preface
  • introduction
  • whatis
  • explanation - #260
  • control - #261
  • weightcontrol
  • extended
  • matrix
  • decasteljau
  • flattening
  • splitting
  • matrixsplit
  • reordering
  • derivatives
  • pointvectors
  • pointvectors3d
  • components
  • extremities
  • boundingbox
  • aligning
  • tightbounds
  • inflections
  • canonical
  • yforx -- this really needs an explanation of when, and if so how, to collapse an f(t) -> {x,y} into into an f(x) -> y function...
  • arclength
  • arclengthapprox
  • curvature
  • tracing
  • intersections
  • curveintersection
  • abc
  • pointcurves (moved up, necessary to understand molding + substantial rewrite)
  • projections (moved up, necessary to understand molding)
  • molding
    • refine the second cubic sketch a bit, to make it clearer what's original and what's idealized and fix the coloring in the 3rd panel
  • curvefitting
  • catmullconv (drastically rewritten/amended)
  • catmullfitting (was catmullmolding, which is not what it was. It's also way shorter now)
  • polybezier
  • shapes⚠️
    • this section is getting removed for now, it doesn't actually teach anything, and what it does talk about, is not really Bezier related. Ideally this gets turned into a few sections: (1) paths (based on poly bezier) with path traverse, (2) point-in-shape based on closed paths, (3) boolean shape operations based on the preceding two sections.
  • offsetting
  • graduatedoffset
  • circles
  • circles_cubic
  • arcapproximation
  • bsplines

Should catmull rom and bsplines be set together, under an implicit "other splines" theme?

Add code comments to all sketches

  • introduction
  • whatis
  • explanation
  • control
  • weightcontrol
  • extended
  • matrix
  • decasteljau
  • flattening
  • splitting
  • matrixsplit
  • reordering
  • derivatives
  • pointvectors
  • pointvectors3d
  • components
  • extremities
  • boundingbox
  • aligning
  • tightbounds
  • inflections
  • canonical
  • yforx
  • arclength
  • arclengthapprox
  • curvature
  • tracing
  • intersections
  • curveintersection
  • abc
  • pointcurves
  • projections
  • molding
  • curvefitting
  • catmullconv
  • catmullfitting
  • polybezier
  • offsetting
  • graduatedoffset
  • circles
  • circles_cubic
  • arcapproximation
  • bsplines

Proofread each chapter

  • introduction
  • whatis
  • explanation
  • control
  • weightcontrol
  • extended
  • matrix
  • decasteljau
  • flattening
  • splitting
  • matrixsplit
  • reordering
  • derivatives
  • pointvectors
  • pointvectors3d
  • components
  • extremities
  • boundingbox
  • aligning
  • tightbounds
  • inflections
  • canonical
  • yforx
  • arclength
  • arclengthapprox
  • curvature
  • tracing
  • intersections
  • curveintersection
  • abc
  • pointcurves
  • projections
  • molding
  • curvefitting
  • catmullconv
  • catmullfitting
  • polybezier
  • offsetting
  • graduatedoffset
  • circles
  • circles_cubic
  • arcapproximation
  • bsplines
Pomax commented
  • Investigate what is probably a bezier.js bug:

image

Pomax commented

text areas need additional work in order to look decent at smaller screen sizes

Pomax commented

component functions section looks weird with the two graphics without text between them