Our great sponsors
-
react-syntax-highlighter
syntax highlighting component for react with prismjs or highlightjs ast using inline styles
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
pages-gem
A simple Ruby Gem to bootstrap dependencies for setting up and maintaining a local Jekyll environment in sync with GitHub Pages
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
react-syntax-highlighter I used this to highlight code segments when the app steps through the code.
Tailwind CSS To get started I followed the tutorials on the Tailwinds YouTube channel. The documentation and online playground were also helpful. I used the Hero Icons project to find and add icons to my project. Overall, I liked Tailwind CSS, but it felt verbose to apply styles in the HTML rather than in a separate CSS file. The developer addressed the issue of separation of concerns in his blog post CSS Utility Classes and "Separation of Concerns". I did define custom classes for styles used in multiple places.
react-embed-gist I used this to display the complete algorithm at the end. I used this rather than react-syntax-highlighter because gist has better copy support. If someone wants to copy the algorithm, it is easier for them to do so with the gist. The downside is it performs a network call to get the gist. I am not sure if this was the right approach.
React Hook Form I initially wrote my own form validation. That was the wrong approach. I found React Hook Form, which made form validation much easier. It also allowed me to use dynamically-generated fields. This allowed me to add, edit and delete items on the initial setup screen. I would recommend investigating this tool if your app uses forms.
GitHub Pages I use this to host the app. My blog is already hosted on GitHub Pages, so it seemed a natural place to host it. I use a GitHub workflow to deploy the site.
I used the Hero Icons project to find and add icons to my project.
Create React App I chose Create React App (CRA) because I was creating a new, standalone React App. This was my first time using CRA, as the tutorials only used React in an index.html file.