Posts

What's running on BayanBennett.com
three. So, that meant learning React. I found both React…

Failing to add CodeMirror 6 (and then Succeeding) | DevLog 004

I put CodeMirror version 6 into a React component.
In the last post I created a React component that…

3 Things Every React Context Should Have | DevLog 008

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.
that name when using the React Dev Tools extension in…

Markdown with Custom Components in NextJS | DevLog 007

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.
the child of the provided react component and plugins to…

Making a UI Library with React & TypeScript

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.
ships with three modes: preserve react react native I'll…

JavaScript-less Static SSR using Styled Components

How to build a completely static site using React and Styled Components
create a site with no JS, React makes it easy…

Help Users Find Things — Generate a Page Tree

I converted an array of file paths into a tree and used a recursive React component to display it. That way, visitors to the site can have a straightforward way to navigate between all the pages in the site.
template using . Recursive Path Tree React Component Aside from the…

How does MDN Intercept `console.log`? | DevLog 003

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.
js/editor-libs/console-utils.js. It has some rules…

Keyboard Input—Typing Practice w/ Machine Learning

Displaying keys and detecting keystrokes using JavaScript and React for a typing practice app.
Disclaimer: although this series is about machine learning, this post…

Styling CodeMirror v6 with Material UI | DevLog 005

Added custom styling to CodeMirror v6 using CodeMirror extensions and Material UI's theme object.
wrapped CodeMirror v6 with a react component. However, it still…

👏 Stop 👏 Messing 👏 with 👏 TSConfig

Using @tsconfig/bases to help clean up tsconfig.json files, making them shorter, easier to debug, and elevating consistency across projects.
docusaurus v2 node10 node12 node14 react-native recommended svelte Each…

Adding Metadata Using Markdown Frontmatter in NextJS

I embedded some metadata in my markdown files using the markdown frontmatter format. After parsing this data, I included it in my NextJS pages. I also optimized the hydration time by handling some of the markdown processing during the build.
side rendering (SSR). Yes, the React is rendered to static…

How I Started a Website | DevLog 001

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.
to start with a Next.js project with Material UI…