I start off with a fresh project and make a UI library (that only has one basic component) using TypeScript, ReactJS, and Styled Components. I also make a basic NPM package that can be used locally to test the UI library.
be written using React and TypeScript and published as a…

Added custom styling to CodeMirror v6 using CodeMirror extensions and Material UI's theme object.
for tagging JavaScript/JSX and TypeScript/TSX. I created a…

I put CodeMirror version 6 into a React component.
semantics. In the world of TypeScript types, I learned that…

How I start a simple project from some example code and create a proof-of-concept. The idea is to create a website that I can use to create interactive reference pages.
project with Material UI and TypeScript. Here's the source…

Took advantage of WebWorkers' independent scope to intercept console methods away from the page context. This way, code can be evaluated individually. I also used the Proxy class to intercept all calls to all console methods.
imports or be written in TypeScript. This is because the…

Using @tsconfig/bases to help clean up tsconfig.json files, making them shorter, easier to debug, and elevating consistency across projects.
Reminder turns on all of TypeScript's strict settings: alwaysStrict…

A queue is a tool that can be used to decouple a module that runs quickly from one that runs slowly.
The code below is in TypeScript, but a JavaScript version…

Contexts should be in their own files and grouped together in a contexts folder. Contexts should only export two things, a hook to consume the context and a higher-order component to provide the context.
it has the context provided. TypeScript Typing For the hook…

I used react-markdown to render my markdown files in ReactJS. Each code block in each markdown file is injected into a code editor so that it can be interactive.
In the last post I used  files as a source…

Used NextJS' getStaticPaths to get all the paths for the code snippets and getStaticProps to pass on the content of the code snippet to the template, which in turn passes it to the code editor.
In the last post, through some code metamorphosis I converted…

The browser's console output can't be read. MDN's interactive examples override the browser's console.log, formats the arguments for the webpage, and then calls the original console.log. I created a component in React that accomplishes the same thing.
In the last post we looked at: Uploading from WebStorm…