Skip to content

Commit

Permalink
rss icon
Browse files Browse the repository at this point in the history
  • Loading branch information
Pomax committed Sep 26, 2020
1 parent fc3cc79 commit 8c2fe23
Show file tree
Hide file tree
Showing 9 changed files with 40 additions and 25 deletions.
Binary file added images/rss.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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-26T04:26:45+00:00" />
<meta property="og:updated_time" content="2020-09-26T16:36:40+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" />
Expand Down Expand Up @@ -117,7 +117,9 @@
<script src="./js/site/social-updater.js" async defer></script>

<header>
<h1>A Primer on Bézier Curves</h1>
<h1>
A Primer on Bézier Curves<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a>
</h1>
<h2>A free, online book for when you really need to know how to do Bézier things.</h2>
<span>Read this in your own language:</span>
<ul class="lang-switcher">
Expand Down
6 changes: 4 additions & 2 deletions ja-JP/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,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-26T04:26:45+00:00" />
<meta property="og:updated_time" content="2020-09-26T16:36:40+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" />
Expand Down Expand Up @@ -119,7 +119,9 @@
<script src="./js/site/social-updater.js" async defer></script>

<header>
<h1>ベジェ曲線入門</h1>
<h1>
ベジェ曲線入門<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a>
</h1>
<h2>A free, online book for when you really need to know how to do Bézier things.</h2>
<span>Read this in your own language:</span>
<ul class="lang-switcher">
Expand Down
21 changes: 12 additions & 9 deletions news/2020-09-18.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" />
<meta property="og:published_time" content="Thu Sep 17 2020 17:00:00 +00:00" />
<meta property="og:updated_time" content="Fri Sep 25 2020 21:26:45 +00:00" />
<meta property="og:updated_time" content="Sat Sep 26 2020 09:36:40 +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" />
Expand Down Expand Up @@ -121,10 +121,10 @@ <h5 class="post-date">Fri, 18 Sep 2020</h5>
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.
So, in 2016, when <a href="https://reactjs.org/">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
Expand All @@ -146,7 +146,10 @@ <h5 class="post-date">Fri, 18 Sep 2020</h5>
Chapter content written as easy to read and write markdown format: <a href="./news/2020-09-18.md">view this blog post's source file</a>.
</li>
<li>A custom <code>&lt;graphics-element&gt;</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>
...with that same source code being read in and run by Node.js <em>on a canvas</em> to generate fallback images so that even without JS,
graphics work.
</li>
</ul>
<blockquote>
<graphics-element title="An example graphic" width="275" height="275" src="./news/example.js">
Expand All @@ -160,8 +163,8 @@ <h5 class="post-date">Fri, 18 Sep 2020</h5>

<ul>
<li>
Real LaTeX code, that gets compiled into optimized SVG using <code>xelatex</code>, <code>pdfcrop</code>, <code>pdf2svg</code>, and
<code>svgo</code>:
Real LaTeX code, that gets saved as <code>.tex</code> file, so it can be compiled into optimized SVG using <code>xelatex</code>,
<code>pdfcrop</code>, <code>pdf2svg</code>, and <code>svgo</code>:
</li>
</ul>
<blockquote>
Expand Down Expand Up @@ -249,7 +252,7 @@ <h5 class="post-date">Fri, 18 Sep 2020</h5>
<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>
<p><a href="https://twitter.com/TheRealPomax">Pomax</a></p>
</main>

<hr />
Expand Down
8 changes: 4 additions & 4 deletions news/2020-09-18.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

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.

So, in 2016, when [React.js]() exploded onto the scene, I rewrote the primer as a React app, and it became a lot easier to maintain. Like, _a lot_ 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 _dire_ performance.
So, in 2016, when [React.js](https://reactjs.org/) exploded onto the scene, I rewrote the primer as a React app, and it became a lot easier to maintain. Like, _a lot_ 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 _dire_ performance.

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, _finally_, turn the Primer back into a normal web page.

Expand All @@ -15,13 +15,13 @@ To give a bit of a teaser, some of the things I'll be writing about:
- Using modern ES module code that runs in both the browser and Node.js.
- Chapter content written as easy to read and write markdown format: <a href="./news/2020-09-18.md">view this blog post's source file</a>.
- A custom `&lt;graphics-element&gt;` element that turns a `src="blah.js"` into an interactive canvas graphic...
- ...with that same source code being read in and run by Node.js _on a canvas_ to generate fallback images.
- ...with that same source code being read in and run by Node.js _on a canvas_ to generate fallback images so that even without JS, graphics work.

<blockquote>
<graphics-element title="An example graphic" src="./example.js"></graphics-element>
</blockquote>

- Real LaTeX code, that gets compiled into optimized SVG using `xelatex`, `pdfcrop`, `pdf2svg`, and `svgo`:
- Real LaTeX code, that gets saved as `.tex` file, so it can be compiled into optimized SVG using `xelatex`, `pdfcrop`, `pdf2svg`, and `svgo`:

<blockquote>
\[
Expand Down Expand Up @@ -65,4 +65,4 @@ Enjoy [The new Primer on Bézier Curves](https://pomax.github.io/bezierinfo), an

See you in the next post!

— Pomax
[Pomax](https://twitter.com/TheRealPomax)
2 changes: 1 addition & 1 deletion news/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<meta property="og:description" content="" />
<meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" />
<meta property="og:published_time" content="Fri Sep 25 2020 21:26:45 GMT-0700 (Pacific Daylight Time)" />
<meta property="og:published_time" content="Sat Sep 26 2020 09:36:40 GMT-0700 (Pacific Daylight Time)" />
<meta property="og:updated_time" content="" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" />
Expand Down
10 changes: 5 additions & 5 deletions news/rss.xml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link>
<description>News updates for the <a href="https://pomax.github.io/bezierinfo">primer on Bézier Curves</a> by Pomax</description>
<language>en-GB</language>
<lastBuildDate>Fri Sep 25 2020 21:26:45 +00:00</lastBuildDate>
<lastBuildDate>Sat Sep 26 2020 09:36:40 +00:00</lastBuildDate>
<image>
<url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
<title>A Primer on Bézier Curves</title>
Expand All @@ -19,7 +19,7 @@
<description>

&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;So, in 2016, when &lt;a href=&quot;&quot;&gt;React.js&lt;/a&gt; exploded onto the scene, I rewrote the primer as a React app, and it became a lot easier to maintain. Like, &lt;em&gt;a lot&lt;/em&gt; 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 &quot;server&quot; to run. Plus, trying to rehydrate an app the size of the Primer from a giant HTML file had truly &lt;em&gt;dire&lt;/em&gt; performance.&lt;/p&gt;
&lt;p&gt;So, in 2016, when &lt;a href=&quot;https://reactjs.org/&quot;&gt;React.js&lt;/a&gt; exploded onto the scene, I rewrote the primer as a React app, and it became a lot easier to maintain. Like, &lt;em&gt;a lot&lt;/em&gt; 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 &quot;server&quot; to run. Plus, trying to rehydrate an app the size of the Primer from a giant HTML file had truly &lt;em&gt;dire&lt;/em&gt; performance.&lt;/p&gt;
&lt;p&gt;So I left it a regular React app, and every time I thought &quot;wouldn&#39;t it be nice if it was just... a web page again?&quot; the browser landscape just hadn&#39;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, &lt;em&gt;finally&lt;/em&gt;, turn the Primer back into a normal web page.&lt;/p&gt;
&lt;p&gt;The new tech stack is, frankly, pretty amazing. It does some things that weren&#39;t possible even half a year before I started the rewrite, let alone being possible in 2016, and so because so much has changed, this post will be the first in a series of posts on how the new tech stack works.&lt;/p&gt;
&lt;p&gt;To give a bit of a teaser, some of the things I&#39;ll be writing about:&lt;/p&gt;
Expand All @@ -29,7 +29,7 @@
&lt;li&gt;Using modern ES module code that runs in both the browser and Node.js.&lt;/li&gt;
&lt;li&gt;Chapter content written as easy to read and write markdown format: &lt;a href=&quot;./news/2020-09-18.md&quot;&gt;view this blog post&#39;s source file&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;A custom &lt;code&gt;&amp;lt;graphics-element&amp;gt;&lt;/code&gt; element that turns a &lt;code&gt;src=&quot;blah.js&quot;&lt;/code&gt; into an interactive canvas graphic...&lt;/li&gt;
&lt;li&gt;...with that same source code being read in and run by Node.js &lt;em&gt;on a canvas&lt;/em&gt; to generate fallback images.&lt;/li&gt;
&lt;li&gt;...with that same source code being read in and run by Node.js &lt;em&gt;on a canvas&lt;/em&gt; to generate fallback images so that even without JS, graphics work.&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;graphics-element title=&quot;An example graphic&quot; width=&quot;275&quot; height=&quot;275&quot; src=&quot;./news/example.js&quot; &gt;
Expand All @@ -41,7 +41,7 @@
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Real LaTeX code, that gets compiled into optimized SVG using &lt;code&gt;xelatex&lt;/code&gt;, &lt;code&gt;pdfcrop&lt;/code&gt;, &lt;code&gt;pdf2svg&lt;/code&gt;, and &lt;code&gt;svgo&lt;/code&gt;:&lt;/li&gt;
&lt;li&gt;Real LaTeX code, that gets saved as &lt;code&gt;.tex&lt;/code&gt; file, so it can be compiled into optimized SVG using &lt;code&gt;xelatex&lt;/code&gt;, &lt;code&gt;pdfcrop&lt;/code&gt;, &lt;code&gt;pdf2svg&lt;/code&gt;, and &lt;code&gt;svgo&lt;/code&gt;:&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;img class=&quot;LaTeX SVG&quot; src=&quot;./images/news/2020-09-18.html/15225da473048d8c7b5b473b89de0b66.svg&quot; width=&quot;401px&quot; height=&quot;97px&quot; loading=&quot;lazy&quot;&gt;
Expand Down Expand Up @@ -91,7 +91,7 @@ draw() {
&lt;p&gt;It&#39;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 &quot;vanilla&quot; HTML, CSS, and JS page again, that &quot;just works&quot; even with JS disabled.&lt;/p&gt;
&lt;p&gt;Enjoy &lt;a href=&quot;https://pomax.github.io/bezierinfo&quot;&gt;The new Primer on Bézier Curves&lt;/a&gt;, and if you find any problems, &lt;a href=&quot;https://github.com/Pomax/BezierInfo-2/issues&quot;&gt;you know where to go&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;See you in the next post!&lt;/p&gt;
&lt;p&gt;— Pomax&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/TheRealPomax&quot;&gt;Pomax&lt;/a&gt;&lt;/p&gt;

</description>
<pubDate>Thu Sep 17 2020 17:00:00 +00:00</pubDate>
Expand Down
6 changes: 6 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -436,3 +436,9 @@ table.code tr td:first-child {
cursor: default;
border-right: 1px solid red;
}

a.rss-link {
position: relative;
z-index: 10;
float: right;
}
6 changes: 4 additions & 2 deletions zh-CN/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,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-26T04:26:45+00:00" />
<meta property="og:updated_time" content="2020-09-26T16:36:40+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" />
Expand Down Expand Up @@ -119,7 +119,9 @@
<script src="./js/site/social-updater.js" async defer></script>

<header>
<h1>贝塞尔曲线底漆</h1>
<h1>
贝塞尔曲线底漆<a class="rss-link" href="news/rss.xml"><img src="images/rss.png" /></a>
</h1>
<h2>A free, online book for when you really need to know how to do Bézier things.</h2>
<span>Read this in your own language:</span>
<ul class="lang-switcher">
Expand Down

0 comments on commit 8c2fe23

Please sign in to comment.