Archive notes

Author: andrewbranch

_layouts/post.liquid

@@ -25,6 +25,11 @@ layout: base
 			</h2>
 		{% endif %}
 	</h1>
+	{% if note %}
+		<p class="font-grotesk rounded-lg bg-[var(--color-fg05)] p-2">
+			{{ note }}
+		</p>
+	{% endif %}
 	{% if not bigTitle %}
 		<p>
 			<time class="font-grotesk font-medium text-textMuted" datetime="{{ date | htmlDateString }}">

content/posts/archive/2019-01-19_Expressive-React-Component-APIs-with-Discriminated-Unions.md

@@ -4,22 +4,14 @@ date: 2019-02-06
 permalink: expressive-react-component-apis-with-discriminated-unions/
 tags: archive
 layout: post
-globalPreamble: "declare var onChange: () => void;declare var console: { log: Function };\n"
-preambles:
-  - file: select-1.tsx
-    text: "import React from 'react';\n"
-  - file: select-2.tsx
-    text: "import React from 'react';\n"
-  - file: select-3.tsx
-    text: "import React from 'react';\n"
-lib:
-  - react
-note: '
-When I wrote this piece, I realized it would be much easier to explain if I could show you how the TypeScript compiler handles the code I’m talking about, as if we were both sitting in front of your favorite code editor with language support. So, I built this blog to imitate that experience. Hover (or tap) on code underlined in red to see errors, hover identifiers to see type information, and even edit the samples if you want. I also <a href="/overengineering-a-blog-prologue-an-ode-to-red-squigglies/">wrote more</a> about why I did this.
-
-
-Disclaimer: I wrote this before joining the TypeScript team. I’m not speaking officially for TypeScript or Microsoft in
-any post on this blog, but I’m especially not in this one.'
+note: |
+  This post has been archived and delisted. The code examples relied on my
+  <a href="/overengineering-a-blog">previous blog infrastructure</a>, which showed
+  live TypeScript errors and type information. Ultimately, that was not worth the
+  upkeep and has been removed. Consequently, this post may not make sense without
+  seeing the errors that are supposed to be rendered. The content also refers to
+  very old versions of TypeScript, React, and <code>@types/react</code> and may
+  no longer be accurate.
 ---
 
 One of TypeScript’s most underrated features is _discriminated union types_. Borrowed primarily from functional programming (FP) languages, they match an elegant FP concept to a pattern people intuitively write in JavaScript. Discriminated unions also enable a useful pattern for typing complex React component props more safely and expressively. But first, we’ll review what discriminated unions look like independent of React.

content/posts/archive/2019-02-06_Overengineering_A_Blog_Prologue.md

@@ -1,10 +1,15 @@
 ---
 title: Overengineering a Blog, Prologue
 subtitle: An Ode to Red Squigglies
-permalink: overengineering-a-blog-prologue-an-ode-to-red-squigglies/
+permalink: overengineering-a-blog-prologue/
 date: 2019-02-07
 tags: archive
 layout: post
+note: |
+  This post describes the infrastructure of this blog before a more recent rewrite,
+  where I removed all the cool features described herein. The blog is now made with
+  <a href="https://11ty.dev">eleventy</a> and doesn’t have interactive code blocks.
+  Ultimately, it wasn’t worth the upkeep.
 ---
 
 <span class="small-caps">It’s all about the red squigglies.</span> Red squigglies in Microsoft products have been saving me from looking stupid since the second grade, and now they save me from writing stupid code on a minutely basis. Well, significantly less stupid code. You know the red squigglies I’m talking about? The red squigglies that tell you that no, it’s not spelled “bureauacracy,” and, more frequently for me lately, that object is possibly `undefined`.

content/posts/archive/2019-02-16_Overengineering_A_Blog.md

@@ -4,7 +4,11 @@ date: 2019-02-16
 tags: archive
 permalink: overengineering-a-blog/
 layout: post
-note: 'Disclaimer: I wrote this before joining the TypeScript team. I’m not speaking officially for TypeScript or Microsoft in any post on this blog, but I’m especially not in this one.'
+note: |
+  This post describes the infrastructure of this blog before a more recent rewrite,
+  where I removed all the cool features described herein. The blog is now made with
+  <a href="https://11ty.dev">eleventy</a> and doesn’t have interactive code blocks.
+  Ultimately, it wasn’t worth the upkeep.
 lib:
   - react
 preambles:
@@ -135,7 +139,11 @@ I’m telling this piece of the story a little out of order, because I think it
 
 <figure>
 {% image "./images/bundle-analysis.png", "A graphical representation of the blog’s assets by size, as provided by webpack-bundle-analyzer. TypeScript takes up the entire left half of the chart, plus some." %}
-<figcaption>[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) shows TypeScript’s size relative to everything else.</figcaption>
+<figcaption>
+
+[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) shows TypeScript’s size relative to everything else.
+
+</figcaption>
 </figure>
 
 I also realized that none of the really heavy pieces are necessary until the moment a reader starts _editing_ a code sample. I could analyze the initial code at build time, generate syntax highlighting information, type information, and compiler diagnostics as static data, inject it with GraphQL, and reference it during render, all for a fraction of the weight of the compiler and syntax highlighter itself.

content/posts/archive/2019-08-05_Writing_Type_Safe_Polymorphic_React_Components_(Without_Crashing_TypeScript).md

@@ -5,33 +5,14 @@ permalink: polymorphic-react-components/
 tags: archive
 layout: post
 metaImage: images/rabbit-bg.png
-globalPreamble: "
-  import * as React from 'react';
-  interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> { to: string }
-  declare function Link(props: LinkProps): JSX.Element;
-  declare function Icon(props: any): JSX.Element;
-  declare function FlexContainer(props: any): JSX.Element;
-  declare function getClassName(color: ColorName | undefined, ...others: (string | undefined)[]): string;
-  declare enum ColorName { Blue = 'blue' };
-  declare enum IconName {};
-  type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;\n
-  "
-preambles:
-  - file: GoodButton.tsx
-    text: "
-      declare function mergeProps<T extends {}[]>(...props: T): {
-      [K in keyof UnionToIntersection<T[number]>]:
-      K extends 'className' ? string :
-      K extends 'style' ? UnionToIntersection<T[number]>[K] :
-      Extract<T[number], { [Q in K]: unknown; }>[K]; }\n
-      "
-lib:
-  - react
-  - dom
-compilerOptions:
-  lib:
-    - /lib.es2015.d.ts
-    - /lib.dom.d.ts
+note: |
+  This post has been archived and delisted. The code examples relied on my
+  <a href="/overengineering-a-blog">previous blog infrastructure</a>, which showed
+  live TypeScript errors and type information. Ultimately, that was not worth the
+  upkeep and has been removed. Consequently, this post may not make sense without
+  seeing the errors that are supposed to be rendered. The content also refers to
+  very old versions of TypeScript, React, and <code>@types/react</code> and may
+  no longer be accurate.
 ---
 
 <span class="small-caps">When designing a React component for reusability</span>, you often need to be able to pass different DOM attributes to the component’s container in different situations. Let’s say you’re building a `<Button />`. At first, you just need to allow a custom `className` to be merged in, but later, you need to support a wide range of attributes and event handlers that aren’t related to the component itself, but rather the context in which it’s used—say, `aria-describedby` when composed with a Tooltip component, or `tabIndex` and `onKeyDown` when contained in a component that manages focus with arrow keys.

content/styles/main.css

@@ -258,6 +258,15 @@ pre {
 	margin-bottom: calc(var(--rhythm) * 0.5rem);
 }
 
+picture {
+	display: block;
+	text-align: center;
+}
+
+picture img {
+	display: inline-block;
+}
+
 figure img {
 	margin-bottom: 0;
 }