Infrastructure as Code — The Editor is Mightier than the Terminal

Autocompletion in TypeScript, not available in terminals

My Pomodoro timer was a CLI but I killed the CLI to ship an API instead. Let’s talk about how this made my project 10 times better.

Initial Approach to Problem

I built my own Pomodoro timer for two reasons

  • I can customize it when I need to

Originally I interacted using a command-line interface like this:


Reexamining faith

I was a disagreeable child. Part of this disagreeableness was my complete rejection of religion. I enjoyed taking on the job of being the most evangelical atheist in Olathe, Kansas. It was a position that suited my love of controversy. In hindsight, this was a love of attention, which I now channel in more productive routes like getting claps on Medium.

I don’t think the atheistic position is irrational, but it is incompatible with faith. I can no longer make it through the days without faith, and so I can no longer be an atheist.

My Personal Faith

I have faith that things…


How to get out of a slump

The start of some work

When I started learning about task execution systems like Pomodoro, I thought putting together a CLI myself would be a great way to create a sense of ownership and pride in my work. Also, it would let me ship the features I need.

Requirements

  • Tracks progress towards completing a given number of hours of work
  • Sets goals for continuous work block and break lengths
  • Looks nice so productivity streamers can use it
  • Emits logs for analysis at a future date

Design

Classes vs. Functional

Originally I just made a countdown timer and built off of that. I usually don’t write classes, but having a mutable…


Good for more than README.md

unified.js, Markdown, and MDX

Markdown is an easy way to write structured text as a plaintext file. The JavaScript ecosystem around Markdown is experiencing a lot of growth. MDX lets you embed JSX in Markdown, and is getting about 6 times more weekly downloads than it was a year ago.


Use recursively defined components to represent arbitrary content trees

Sidebars from TypeScript Handbook, my site, and Docusaurus V2

Important features for navigation —

  • Making your display friendly for all screen sizes
  • Make navigation state dependent on currently viewed page with features like “Edit this page on GitHub” or highlighting the currently viewed page.

Update: 5/4/2021 — You can see the books at https://www.markdownbooks.com/, check out the source code too.

Difficult Design Choices

There are a lot of choices to make. For example, it is a design trend to navigate to pages using a left navigation and to headers using a right navigation. …


Build your own platform for books in React

Books
Books
Photo by Drew Coffman on Unsplash.

With the software in this article, you can load any existing GitBook (popular software for writing books on GitHub) into Next.js and start adding any custom elements you want. Things like:

  • Live code editors
  • Any React component you want!

You can easily build a book with Next.js and MDX, but this is more than a book! It is an extensible educational website (if you aren’t afraid of writing some code). Let’s get into it!


Write TypeScript instead of JavaScript, 3 Reasons
Write TypeScript instead of JavaScript, 3 Reasons

Keeping IntelliSense when Writing Functions

In JavaScript, you will lose IntelliSense in function bodies. This is a simplified example of something you might come across.


https://github.com/Open-EdTech/react-run-code

Why I wanted a runnable VSCode clone

To explain why TypeScript is important, you need to explain why developer tooling is important. To explain why developer tooling is important you will need a code editing environment. Fortunately the editor for VSCode (monaco editor) is open source, and feels just like VSCode. By embedding the monaco editor in my web page I can explain TypeScript much better than any other website.

Plus, the monaco editor can transpile TypeScript to JavaScript, we can run the JavaScript in the browser and output the results for an interactive educational experience.

Embedding Monaco Editor

Monaco editor is not a react component, you need to bring…

Matthew Caseres

Copyrighting things prevents the community maintenance of knowledge, a good public domain book will be something special. Master’s Student at Georgia Tech

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store