mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-30 11:40:27 +02:00
regenerate
This commit is contained in:
Pomax
@@ -31,7 +31,7 @@
|
||||
<meta property="og:locale" content="en-GB" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-18T18:56:08+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-18T19:09:01+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<meta property="og:locale" content="ja-JP" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-18T18:56:08+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-18T19:09:01+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
|
||||
144
docs/news/2020-08-28.html
Normal file
144
docs/news/2020-08-28.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-GB">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>A Primer on Bézier Curves - Rewriting the tech stack</title>
|
||||
<base href=".." />
|
||||
|
||||
<link rel="icon" href="images/favicon.png" type="image/png" />
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml" />
|
||||
|
||||
<!-- page styling -->
|
||||
<link rel="preload" href="images/paper.png" as="image" />
|
||||
<link rel="stylesheet" href="placeholder-style.css" />
|
||||
|
||||
<!-- And a slew of SEO related meta elements, because being discoverable is important -->
|
||||
<meta name="description" content="Rewriting the tech stack" />
|
||||
|
||||
<!-- opengraph information -->
|
||||
<meta property="og:title" content="Rewriting the tech stack" />
|
||||
<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
|
||||
<meta property="og:type" content="text" />
|
||||
<meta property="og:url" content="https://pomax.github.io/bezierinfo/news/2020-08-28.html" />
|
||||
<meta property="og:description" content="Rewriting the tech stack" />
|
||||
<meta property="og:locale" content="en-GB" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2020-08-28T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-18T19:09:01+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
|
||||
<!-- twitter card information -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@TheRealPomax" />
|
||||
<meta name="twitter:creator" content="@TheRealPomax" />
|
||||
<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
|
||||
<meta name="twitter:url" content="https://pomax.github.io/bezierinfo/news/" />
|
||||
<meta name="twitter:description" content="Rewriting the tech stack" />
|
||||
|
||||
<!-- my own referral/page hit tracker, because Google knows enough -->
|
||||
<script src="./js/site/referrer.js" type="module" async></script>
|
||||
|
||||
<!--
|
||||
The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
|
||||
Note that we're not defering this: we just want it to kick in as soon as possible, and
|
||||
given how much HTML there is, that means this can, and thus should, kick in before the
|
||||
document is done even transferring.
|
||||
-->
|
||||
<script src="./js/custom-element/graphics-element.js" type="module" async></script>
|
||||
<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
|
||||
|
||||
<!-- make images lazy load much earlier -->
|
||||
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dev" style="display: none;">
|
||||
DEV PREVIEW ONLY
|
||||
<script>
|
||||
(function () {
|
||||
var loc = window.location.toString();
|
||||
if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
|
||||
var e = document.querySelector("div.dev");
|
||||
e.removeAttribute("style");
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="github">
|
||||
<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
|
||||
<map name="githubmap">
|
||||
<area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
|
||||
</map>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<h1>Rewriting the tech stack</h1>
|
||||
<h5 class="post-date">Fri, 28 Aug 2020</h5>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<p>
|
||||
Once upon a time, I needed to draw some Bezier curves because I was trying to create a Japanese kanji composition system that turned strokes
|
||||
into outlines, and that required knowing how to offset Bezier curves and... at the time (2011, time flies) there was no good single source of
|
||||
information for Bezier curves on the web. So I made one. Sure it started small, but it turns out that if you just keep adding bits to
|
||||
something, several years later you have quite the monster, and a single HTML file becomes intractible.
|
||||
</p>
|
||||
<p>
|
||||
So, in 2016, when <a href="">React.js</a> exploded onto the scene, I rewrote the primer as a React app, and it became a lot easier to
|
||||
maintain. Like, <em>a lot</em> a lot. However, there was a downside: no JS meant no content. Sure, server-side rendering sort of existed, but
|
||||
not really, and because the Primer is hosted through github, there was no "server" to run. Plus, trying to rehydrate an app the size of the
|
||||
Primer from a giant HTML file had truly <em>dire</em> performance.
|
||||
</p>
|
||||
<p>
|
||||
So I left it a regular React app, and every time I thought "wouldn't it be nice if it was just... a web page again?" the browser landscape
|
||||
just hadn't caught up. Finally, in 2020, things are different: with a global pandemic, and some vacation time, and something random causing me
|
||||
to look up the state of HTML custom elements, everything was pointing at it being time to finally, <em>finally</em>, turn the Primer back into
|
||||
a normal web page.
|
||||
</p>
|
||||
<p>
|
||||
The new tech stack is, frankly, pretty amazing. It does some thing that weren't possible even a year ago, let alone back in 2016, and this is
|
||||
the first in a series of posts on how the new tech stack works. To give a bit of a teaser, the series will cover:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Essentially reinventing (a limited form of) Processing.js</li>
|
||||
<li>Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again.</li>
|
||||
<li>Using modern ES module code that runs in both the browser and Node.js.</li>
|
||||
<li>Chapter content written as easy to read and write markdown format.</li>
|
||||
<li>A custom <code><graphics-element></code> element that turns a <code>src="blah.js"</code> into an interactive canvas graphic...</li>
|
||||
<li>...with that same source code being read in and run by Node.js <em>on a canvas</em> to generate fallback images.</li>
|
||||
<li>
|
||||
Real LaTeX code, that gets compiled into optimized SVG using <code>xelatex</code>, <code>pdfcrop</code>, <code>pdf2svg</code>, and
|
||||
<code>svgo</code>.
|
||||
</li>
|
||||
<li>Localized content based on a simple filenaming scheme.</li>
|
||||
<li>Nicely formatted HTML, CSS, and JS thanks to <code>prettier</code>.</li>
|
||||
<li>Responsive CSS, so the content intelligently reflows where possible.</li>
|
||||
<li>A "Live build" setup for working on the content and code.</li>
|
||||
<li>Automatic link-checking to make sure none of the links in the Primer lead you to a 404.</li>
|
||||
<li>This "news" section, so that I can write posts to go along with new sections getting added, or notable changes being made.</li>
|
||||
</ul>
|
||||
<p>
|
||||
It's going to take me a while to detail the entire tech stack, but ultimately what matters is that you get a Primer that is a normal "vanilla"
|
||||
HTML, CSS, and JS page again, that "just works" even with JS disabled.
|
||||
</p>
|
||||
<p>
|
||||
Enjoy <a href="https://pomax.github.io/bezierinfo">The new Primer on Bézier Curves</a>, and if you find any problems,
|
||||
<a href="https://github.com/Pomax/BezierInfo-2/issues">you know where to go</a>.
|
||||
</p>
|
||||
<p>See you in the next post!</p>
|
||||
<p>— Pomax</p>
|
||||
</main>
|
||||
|
||||
<hr />
|
||||
|
||||
<footer class="copyright">This post is a news entry for the <a href="..">Primer on Bézier Curves</a></footer>
|
||||
|
||||
<!-- fix firefox's scroll position algorithm. Due to how it works, it cannot be async/defer -->
|
||||
<script src="./js/site/fix-scroll.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
107
docs/news/index.html
Normal file
107
docs/news/index.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-GB">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>A Primer on Bézier Curves - News</title>
|
||||
<base href=".." />
|
||||
|
||||
<link rel="icon" href="images/favicon.png" type="image/png" />
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml" />
|
||||
|
||||
<!-- page styling -->
|
||||
<link rel="preload" href="images/paper.png" as="image" />
|
||||
<link rel="stylesheet" href="placeholder-style.css" />
|
||||
|
||||
<!-- And a slew of SEO related meta elements, because being discoverable is important -->
|
||||
<meta name="description" content="" />
|
||||
|
||||
<!-- opengraph information -->
|
||||
<meta property="og:title" content="" />
|
||||
<meta property="og:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
|
||||
<meta property="og:type" content="text" />
|
||||
<meta property="og:url" content="https://pomax.github.io/bezierinfo" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:locale" content="en-GB" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="undefinedT12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
|
||||
<!-- twitter card information -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@TheRealPomax" />
|
||||
<meta name="twitter:creator" content="@TheRealPomax" />
|
||||
<meta name="twitter:image" content="https://pomax.github.io/bezierinfo/images/og-image.png" />
|
||||
<meta name="twitter:url" content="https://pomax.github.io/bezierinfo" />
|
||||
<meta name="twitter:description" content="" />
|
||||
|
||||
<!-- my own referral/page hit tracker, because Google knows enough -->
|
||||
<script src="./js/site/referrer.js" type="module" async></script>
|
||||
|
||||
<!--
|
||||
The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
|
||||
Note that we're not defering this: we just want it to kick in as soon as possible, and
|
||||
given how much HTML there is, that means this can, and thus should, kick in before the
|
||||
document is done even transferring.
|
||||
-->
|
||||
<script src="./js/custom-element/graphics-element.js" type="module" async></script>
|
||||
<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
|
||||
|
||||
<!-- make images lazy load much earlier -->
|
||||
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dev" style="display: none;">
|
||||
DEV PREVIEW ONLY
|
||||
<script>
|
||||
(function () {
|
||||
var loc = window.location.toString();
|
||||
if (loc.includes("localhost") || loc.includes("BezierInfo-2")) {
|
||||
var e = document.querySelector("div.dev");
|
||||
e.removeAttribute("style");
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="github">
|
||||
<img src="images/ribbon.png" alt="This page on GitHub" style="border: none;" usemap="#githubmap" width="200" height="149" />
|
||||
<map name="githubmap">
|
||||
<area shape="poly" coords="30,0, 200,0, 200,114" href="http://github.com/pomax/BezierInfo-2" alt="This page on GitHub" />
|
||||
</map>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<h1>News posts</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<p>
|
||||
Every now and then the Primer gets updated - these posts chronicle the evolution of the site, and hopefully offer interesting information not
|
||||
just about the process of maintaining a resource like this, but also neat tech tricks, implementation approaches, maths that didn't make it
|
||||
into the primer itself, etc.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This section is still very new, so for the moment there aren't all that many posts up yet, but there's a series of posts planned already, and
|
||||
if you're the kind of person who likes to keep tabs on updates by using RSS: good news, <a href="news/news.rss">have an RSS link!</a>.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="news/2020-08-28.html">Rewriting the tech stack</a> (Fri, 28 Aug 2020)</li>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<hr />
|
||||
|
||||
<footer class="copyright">This post is a news entry for the <a href="..">Primer on Bézier Curves</a></footer>
|
||||
|
||||
<!-- fix firefox's scroll position algorithm. Due to how it works, it cannot be async/defer -->
|
||||
<script src="./js/site/fix-scroll.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -32,7 +32,7 @@
|
||||
<meta property="og:locale" content="zh-CN" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-18T18:56:08+00:00" />
|
||||
<meta property="og:updated_time" content="2020-09-18T19:09:01+00:00" />
|
||||
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
|
||||
<meta property="og:section" content="Bézier Curves" />
|
||||
<meta property="og:tag" content="Bézier Curves" />
|
||||
|
||||
@@ -14,12 +14,13 @@
|
||||
"url": "https://github.com/Pomax/BezierInfo-2/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "run-s clean time lint:* build time clean",
|
||||
"start": "run-s clean:* time lint:* build time clean:temp",
|
||||
"test": "run-s start && run-p watch server browser",
|
||||
"------": "--- note that due to github's naming policy, the public dir is called 'docs' rather than 'public' ---",
|
||||
"browser": "open-cli http://localhost:8000",
|
||||
"build": "node ./src/build.js",
|
||||
"clean": "rm -f .timing && rm -rf ./temp && rm -f ./docs/news/*.html",
|
||||
"clean:temp": "rm -f .timing && rm -rf ./temp",
|
||||
"clean:news": "rm -f ./docs/news/*.html",
|
||||
"polish": "run-s pretty link-checker",
|
||||
"regenerate": "run-s start polish",
|
||||
"lint:tools": "prettier \"./src/**/*.js\" --print-width 150 --write",
|
||||
|
||||
Reference in New Issue
Block a user