Here is a list of the top 3 database GUIs I found, along with some honorable mentions.

1) TablePlus 🐘

TablePlus is a modern, native, and friendly GUI tool for relational databases. It supports a myriad of different database connections, so it’s bound to work with whatever database you need. It includes features such as advanced filtering, the ability to export and import data, and a smart query filter, just to name a few.

Transparently, this is the database GUI that I choose to use, and I’ve found it to be very intuitive and easy to navigate. It also has a sleek design, that makes the app feel native and premium.

🌐 Check out TablePlus

2) DBeaver 🦫

DBeaver is a free and open-source database management tool that allows you to manage and explore SQL databases like MySQL, PostgreSQL, SQLite, and more. "DBeaver Community" is the open-source and free version of the software, but there are also paid options available for enterprises and teams.

DBeaver allows you to manage data like a spreadsheet, create analytical reports, and export information. It also offers advanced features like a powerful SQL editor, administration tools, data and schema migration, and session monitoring.

🌐 Check out DBeaver

3) Beekeeper Studio 🐝

Beekeeper Studio touts itself as “The SQL Editor and Database Manager Of Your Dreams” and offers a polished interface and supports a wide range of SQL databases. Similar to DBeaver, it is available as a free and open-source community edition, with additional paid options for enhanced features.

Beekeeper Studio features an easy-to-use interface and includes tools like a powerful SQL editor with syntax highlighting. It allows you to write SQL queries with AI assistance and sync online and collaborate work across multiple devices.

🌐 Check out Beekeeper Studio

Honorable Mentions

Although the following options are not specifically designed as dedicated database GUI’s, they serve as alternatives for those who utilize these ORMs or prefer having a GUI integrated directly within VSCode. These tools can be particularly useful for developers who want to manage databases without leaving their coding environment.

1) Prisma and Drizzle Studio

Prisma and Drizzle are two of the most popular ORMs in the JS/TS ecosystem. Both projects offer a "Studio," which is a ready-to-use solution that lets you easily interact with your databases through a clean interface. These tools read the respective config files, connect to your database, and allow you to perform actions based on your existing schemas.

🌐 Check out Prisma Studio | Check out Drizzle Studio

2) SQLite Viewer for VS Code

As the name implies, SQLite Viewer is a quick and easy way to view your SQLite database inside VS Code. It has over 2.5 million downloads and integrates seamlessly with VSCode. Simply click on a .sqlite or .db file and the custom viewer opens.

In addition to the VSCode extensions, there is SQLite Viewer Web, a free online tool that lets you open any SQLite file instantly in your browser. No installation or signup is required, and all data stays in your browser, remaining fully private.

🌐 Check out SQLite Viewer for VS Code

El Fin 👋🏽

Thanks for reading and I hope you found a new database GUI to add to your developer toolbox.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

A Note on the Series:

Fast Fridays 🏎 is a series where you will find fast, short, and sweet tips/hacks that you may or may not be aware of. I will try to provide these (fairly) regularly on Fridays.

In this Fast Friday tip, I'll explain how to create a global gitignore file, showing you just how quick and easy it is to set up.

Step 1: Create the gitignore file and add content

This step is pretty obvious, but the first thing to do is create a file to store the global gitignore settings. You can name this file whatever you want, but a common practice is to name it .gitignore_global.

vim ~/.gitignore_global

Once the .gitignore_global file is created, you can add any files you want to be globally ignored. For example, I've been testing some AI tools that generate markdown files after analyzing your codebase, so I have a GEMINI.md file in my global ignore file.

Step 2: Configure Git to use the global gitignore

Now that we have a global gitignore file created, we need to tell Git where to find it. This can be set up in two different ways:

1. Using the git config command.

2. Directly editing the git config files in your $HOME/.gitconfig file.

I would recommend going with option #1. I find this to be the fastest way to set things up so that will be the method I discuss. However, feel free to do whatever works best for you.

Here is the command to configure Git to leverage the new ignore file:

git config --global core.excludesfile ~/.gitignore_global

Verify the configuration

This is an optional step, but if you wanted to verify that the Git is properly referencing the new global ignore file that you just configured, you can run the following command:

git config --global core.excludesfile

If you see the file name outputted, then you know everything is set up correctly. On the other hand, if the output is empty, it means the setup wasn't successful. Of course another way to verify is to check that the files you added to your global ignore are no longer present, but this command is a convenient way to double-check.

El Fin 👋🏽

Voilà! That's all you need to do. Just two simple steps to set up your global gitignore. Now, files will be properly ignored in any project you work on.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

This list includes the options I considered when choosing a git client. If you want to see a complete list of options, visit the official Git website. With that said, here are a few Git GUI clients to explore.

1) Fork 🍴

Fork is a fast and friendly git client that offers a comprehensive range of features. Despite its lightweight design, it includes all the essential functionalities you would expect from a more extensive application. It supports advanced features like interactive rebase, merge conflict resolution, and a built-in merge tool, making it suitable for both beginners and experienced engineers. This is the git client that I personally use, and I have found it to be a helpful addition to my workflow.

🌐 Check out Fork

2) GitKraken 🦑

GitKraken is a popular choice among developers and teams globally, known for its intuitive GUI and powerful terminal. It offers cross-platform support for Windows, Mac, and Linux, making it accessible to a wide range of users. By transforming the complex web of Git commands into a clear, navigable map, GitKraken simplifies version control, making it easier to track changes and understand the impact of each commit. Its extensive list of features and visual approach to project history have earned it a well-deserved reputation in the developer community.

🌐 Check out GitKraken

3) Sourcetree 🪾

Sourcetree, created by the team at Atlassian, is a free Git client for Windows and Mac. It makes interacting with your Git repositories easier, allowing you to focus on coding and boost your productivity. With Sourcetree's simple Git GUI, you can visualize and manage your repositories, enabling you to commit with confidence.

🌐 Check out Sourcetree

4) Sublime Merge 🔀

Sublime Merge is a fast, Git-native GUI client from the makers of Sublime Text. It features line-by-line staging, powerful search across commits and file history, and a merge tool that makes resolving conflicts straightforward. With syntax highlighting, a command palette, and the ability to see the exact Git commands being run, it bridges the gap between the command line and a modern GUI. Sublime Merge is a flexible and efficient choice for developers who want full control without sacrificing performance.

🌐 Check out Sublime Merge

5) SourceGit ♨️

SourceGit is an open-source client that combines many features into a cross-platform interface. Available for Windows, macOS, and Linux, it supports a variety of Git actions, from basic operations like pull and push to advanced tools like interactive rebasing, bisect, and GitFlow. It offers a customizable theme system, multilingual support, a visual commit graph, and useful extras like image diffs and issue linking.

🌐 Check out SourceGit

6) Gitfox 🦊

Gitfox touts itself as “the foxy Git Client for Mac” that helps you commit faster and improve your code quality with superior diffs. It’s a native app and some of its key features include the ability to compare anything, advanced diffs that show inline differences, git blame, and the ability to view diffs across images.

🌐 Check out Gitfox

7) Gitnuro 🥷🏽

Gitnuro is a free and open-source (FOSS) multi-platform Git client designed to provide the best experience for both beginners and professionals. It prioritizes privacy, works quickly even with large repositories, and is customizable, allowing you to create your own theme and color palette. Like many other options on this list, it offers a wide range of features.

🌐 Check out Gitnuro

El Fin 👋🏽

Thanks for reading and I hope you found a new Git GUI client to add to your developer toolbox.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

Git worktree is a niche topic that I think doesn’t get enough attention. At first, the concept may seem a bit unnecessary, but once you find a great use case for it, it can be an immense improvement to your existing workflow. In this article, you’ll learn what a working tree is, some common commands, and the benefits of using worktrees.

Definition

The git worktree command allows you to manage and check out multiple “working trees” at the same time. A working tree in Git is essentially a directory that contains a checked-out version of your project files. When you clone a repository, Git sets up a working tree that holds the latest version of all files from that repository. As you make changes, these updates remain in your working tree until you choose to commit them.

Each working tree is linked to a specific branch in your repository, allowing you to work on different features or fixes simultaneously without interfering with each other. This means you can have separate environments for different branches, making it easier to manage multiple tasks at once.

TL;DR: The git worktree command allows you to checkout multiple branches at the same time.

Use case: PR reviews

I started using worktrees when reviewing pull requests (PRs) for team members. Often, I am working on a feature branch, but I need to pause to review a team member's PR. The typical process is to stash any changes I have, check out the PR branch, review the changes, then switch back to my feature branch and apply or pop the stashed changes. This often delays my PR reviews because I don't want to disrupt my current workspace. However, since I started using worktrees, I can review PRs much faster by checking them out into a separate worktree that doesn't interfere with my ongoing work. This change has reduced disruptions to my workflow and allows me to work more efficiently as both a reviewer and an individual contributor.

Basic Commands

Now that you have a better idea of what a worktree is and why you might want to use it, let’s go over some common commands.

1. git worktree list

This command outputs the details of each worktree. The main worktree is listed first, followed by each of the linked worktrees.

2. git worktree add <path>/<branch-name> <remote-branch>

📌 Note: It is important to run this command from the root of the cloned repo.

For example, let’s say that you cloned this doggy-directory repo. After cloning, you would cd into the doggy-directory folder (or w/e you called it when you cloned it). Essentially, you are running the command in the main repo so that git knows what worktrees are available for you to add in the specified location.

Now if you were to run the command git worktree add ../worktrees/a11y-issues a11y-issues it would create a new worktree for the remote a11y-issues branch in the specified ../worktrees/a11y-issues directory allowing you to have a separate working environment for that branch.

3. git worktree remove <worktree-path>

As the name implies, this command is used to remove a worktree from the list of active worktrees. If Git encounters any issues while attempting to remove the worktree, you can use the --force flag to bypass these restrictions and ensure the worktree is forcibly removed.

4. git worktree prune

This command cleans up stale or orphaned worktrees that git still thinks exist but no longer do.

Realistic Workflows

Worktrees are useful, but most of the time, you need additional environment variables and configurations for your project to run properly. While simple projects might work with worktrees out of the box, even moderately complex setups typically demand further customization. Although I can't address every project setup scenario, I'll share an example of how I automated this process for my job's setup.

Automation with Git Worktrees

To give you some background, the main repository at my job is a full-stack app using the Laravel PHP framework for the backend and React with Inertia for the frontend. For local development, we use Herd, a native Laravel and PHP environment for macOS.

For a new worktree environment to work properly, it requires:

1. A copy of the .env file from the main repo

2. Updated environment variables based on the branch name

3. Frontend and backend dependencies installed

4. A new Herd site set up to serve the app locally

To avoid repeating these steps every time I review a pull request, I created two Bash scripts:

1. setup-worktree.sh to create the new worktree and configure the project requirements.

2. cleanup-worktree.sh to remove the worktree when it's no longer needed.

Now, whenever I need to review a PR quickly, I just run ./setup-worktree.sh <feature-branch> and ./cleanup-worktree.sh <feature-branch> to set up and take down the worktree.

I won't share the full script here, but the main idea is: identify the steps you do repeatedly and automate them in a script because worktrees work well with some shell scripting.

El Fin 👋🏽

Git worktrees are a great way to manage multiple branches, making you more productive and smoothing out your workflow, especially when you're reviewing pull requests. By automating those repetitive setup tasks, you can make your development environment more streamlined and spend more time actually coding.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

Resources

• GitKraken - How to use Git Worktree

• Git - git-worktree Documentation

• Graphite - What is a Git working tree?

1) Superwhisper △

Superwhisper is an AI-powered voice-to-text tool designed to significantly enhance your writing speed and efficiency. It boasts the ability to help you “write 3x faster, without lifting a finger” by converting your spoken words into written text swiftly and accurately. This tool is privacy-focused and ideal for power users who want full control and customization of their workflows.

Full transparency, Superwhisper is my voice dictation tool of choice. I started with a trial and ended up buying the lifetime version. Admittedly, the UI can be a bit unintuitive at first, but once you get the hang of things, it's really cool to see how much you can tailor Superwhisper to meet your needs. As a developer and tinkerer, I'm really enjoying the different workflows that I'm coming up with.

🌐 Check out Superwhisper

2) Wispr Flow 🔊

Wispr Flow offers effortless voice dictation for every application, claiming it can help you write 4x faster than typing. Wispr Flow aims to reduce your typing by letting you speak naturally. It provides seamless speech-to-text functionality across all applications on your device. The AI automatically edits your speech instantly, turning rambling thoughts into clear and formatted text without typos or filler words.

🌐 Check out Wispr Flow

3) MacWhisper 🎙️

Known initially for its transcription features, MacWhisper is another good option for voice dictation. It allows you to quickly and easily turn audio files into text using OpenAI's advanced transcription technology, Whisper. Whether you're recording a meeting, lecture, or other important audio, MacWhisper transcribes your audio files into text quickly and accurately. It's also one of the more affordable options on this list.

🌐 Check out MacWhisper

4) Aiko 🤖

Aiko offers AI-powered audio transcription. The creator, Sindre Sorhus, is a well-respected OSS developer, so you can trust that you're getting a well-made product. Although it has fewer features than some other options on this list, it provides high-quality on-device transcription, allowing you to easily convert speech to text from meetings, lectures, and more. The transcription is powered by OpenAI’s Whisper model running locally on your device.

🌐 Check out Aiko

5) Aqua Voice 💧

Aqua allows you to type less and accomplish more by using advanced speech-to-text technology for everyday tasks. It seamlessly integrates with your existing workflows on apps, websites, and documents on both Windows and Mac. The text is automatically formatted to suit each specific application and document, making your work more efficient and streamlined.

🌐 Check out Aqua Voice

Honorable Mentions

These next honorable mentions are great for those looking for AI speech tools designed specifically for bloggers and writers.

1) Voicepal 👻

Voicepal is like having a ghostwriter in your pocket, helping you generate ideas and go from concept to first draft in minutes. Created by popular productivity YouTuber Ali Abdaal, it claims users produce twice as much content in 70% less time. It aims to create a new way of writing that actually feels fun.

You can tap into your personalized shadow reader whenever you need guidance to explore your thoughts more deeply. Unlike general AI tools, Voicepal is trained to capture your tone and writing style, allowing you to easily turn your thoughts into first drafts.

2) BlogRecorder 🎤

I haven't personally used BlogRecorder, but Kent C. Dodds, a respected figure in the tech community, mentioned it as a tool he uses, which piqued my interest. It aims to eliminate writer's block and encourages more frequent publishing. Audio is converted into structured blog posts that you can edit, export, and publish anywhere.

El Fin 👋🏽

I hope you will find these voice dictation tools to be a helpful and productive addition to your workflow. While the speech-to-text market is flooded with options, I've highlighted just a subset of what's available.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

The AI field is buzzing with activity and it can be tough to keep track of all the acronyms and terms. This article will serve as a glossary of AI terms, acronyms and high-level definitions. I've also set up a GitHub repository, which I will try to update regularly as the AI space evolves.

Feel free to ⭐ star and contribute to the repo. PR’s are welcome!

https://github.com/Cool-Runningz/awesome-ai-glossary

🔠 Core Terms

1. Artificial Intelligence (AI) refers to the simulation of human intelligence processes by machines, especially computer systems. These processes include learning (the acquisition of information and rules for using the information), reasoning (using rules to reach approximate or definite conclusions), and self-correction. AI applications include expert systems, natural language processing, speech recognition, and machine vision.

2. Machine Learning (ML) is a subset of artificial intelligence that involves the use of algorithms and statistical models to enable computers to improve their performance on a specific task through experience. It allows systems to learn from data, identify patterns, and make decisions with minimal human intervention.

3. Generative AI refers to a type of artificial intelligence that is capable of creating new content, such as images, music, text, or videos, by learning patterns from existing data. Unlike traditional AI, which focuses on recognizing patterns and making predictions, generative AI models can produce original outputs that mimic the style and structure of the input data.

4. Artificial General Intelligence (AGI) refers to a form of artificial intelligence that possesses the ability to understand, learn, and apply knowledge across a wide range of tasks at a level comparable to human intelligence. Unlike narrow AI, which is designed for specific tasks, AGI aims to perform any intellectual task that a human can do, with the ability to transfer knowledge and skills from one domain to another. AGI remains a theoretical concept and is a major goal in the field of AI research.

5. Large Language Model (LLM) is a type of artificial intelligence model designed to understand and generate human-like text. These models are trained on vast amounts of text data and use deep learning techniques to predict and produce coherent and contextually relevant language. LLMs are capable of performing a variety of language tasks, such as translation, summarization, and conversation, by leveraging their extensive training on diverse datasets.

6. Retrieval-Augmented Generation (RAG) is a technique in artificial intelligence that combines retrieval-based methods with generative models to enhance the quality and accuracy of generated text. In RAG, the system retrieves relevant information from a large dataset or knowledge base and uses this information to inform and improve the text generation process. This approach allows the model to produce more informed and contextually accurate responses by incorporating external data into the generation process. RAG is particularly useful in applications where up-to-date or domain-specific information is required.

7. Tokens are the smallest units of text that a model processes. A token can be a word, a part of a word, or even a character, depending on the tokenization method used. Tokenization is the process of breaking down text into these smaller units, which are then used by AI models to analyze and generate language.

8. Completions refer to the output generated by a model in response to a given prompt. When a user provides an input, the AI model predicts and generates a continuation or completion of that text. Completions rely on the model's understanding of language patterns and context to produce meaningful and appropriate responses.

9. Streaming: the process of handling and processing data as it arrives continuously, rather than waiting for a complete dataset. This is particularly useful in applications requiring real-time insights or actions, such as live translations, real-time analytics, and interactive AI systems. Streaming ensures that data is processed with minimal latency, enabling timely and dynamic interactions.

10. Model Training involves the process of teaching an AI system to perform specific tasks by exposing it to large amounts of data. During training, the model learns to recognize patterns and make predictions based on the input data. This involves adjusting the model's parameters to minimize errors and improve accuracy. Training is a fundamental step in developing AI systems, enabling them to understand and generate text, recognize images, or perform other complex tasks.

11. Hallucination refers to when an AI model creates content not based on input data or reality, often resulting in incorrect or made-up information. This can happen due to limitations in training data or when the model tries to fill gaps with plausible but wrong details.

12. Prompt Engineering is the practice of designing and refining the input prompts given to AI models, especially in natural language processing tasks. The goal of prompt engineering is to guide the model to produce the most accurate and relevant responses. By carefully crafting prompts, developers can influence the model's behavior and improve the quality of its outputs.

13. Natural Language Processing (NLP) is a part of artificial intelligence that enables computers to understand and respond to human language effectively. It uses computational linguistics along with machine learning and deep learning models to handle and analyze large amounts of natural language data.

14. Neural Network a series of algorithms that aim to recognize underlying relationships in a set of data through a process that mimics the way the human brain operates. It consists of layers of interconnected nodes, or neurons, where each connection can transmit a signal to another neuron. These networks are used in various applications, including image and speech recognition, by learning from large amounts of data to make predictions or decisions.

15. Chatbots are interfaces designed to simulate human conversation. It uses artificial intelligence and natural language processing to understand and respond to user inputs, providing a conversational experience. Chatbots can be used in various applications, such as customer service, information retrieval, and personal assistance, to automate interactions and improve efficiency.

16. Agentic AI refers to artificial intelligence systems that can make decisions and take actions independently, similar to how an agent would act on behalf of a user or organization. These systems are designed to perform tasks autonomously, often using machine learning and other AI technologies to adapt and respond to new situations without direct human intervention.

🛠️ Tools

17. GitHub Copilot is an AI-powered code completion tool developed and designed to assist developers by suggesting code snippets and entire functions in real-time as they write code. By leveraging machine learning models trained on a vast amount of open-source code, GitHub Copilot aims to enhance productivity and streamline the coding process.

18. JetBrains AI is built into JetBrains' development tools to make coding easier. It offers smart code suggestions, finds errors, and helps with automated refactoring. Using AI, JetBrains wants to boost developer productivity and simplify software development. It provides features for code completion, debugging, and project management in different programming languages.

19. Cursor is an AI code editor designed to help users become highly productive and claims to be the “best way to code with AI.” It allows writing code using natural language, obtains context based on the codebase, and facilitates easy changes by predicting the next edit.

20. Windsurf (formerly Codeium) makes an AI code editor and plugin that can be installed in a variety editors. It includes Cascade, which is an agent designed to code, troubleshoot, and anticipate future steps. It helps maintain workflows by grasping intentions and managing intricate codebases.

21. Ollama is an open-source platform that allows users to run large language models (LLMs) on their own devices. It provides tools and infrastructure to easily deploy and manage these models locally, ensuring privacy and control over data. Ollama is designed to make it simple for developers to integrate AI capabilities into their applications without relying on external cloud services.

    1. https://www.hostinger.com/tutorials/what-is-ollama

22. Hugging Face is a company known for its open-source platform that provides tools and models for natural language processing (NLP). It offers a library called “Transformers”, which includes pre-trained models for tasks like text classification, translation, and question answering. Hugging Face aims to make NLP accessible and user-friendly for developers and researchers.

    1. https://zapier.com/blog/hugging-face/

🤖 Models

23. ChatGPT is an LLM developed by OpenAI, designed to engage in human-like conversations. It is based on the GPT (Generative Pre-trained Transformer) architecture and is capable of understanding and generating text in response to user inputs.

24. Claude is an LLM developed by Anthropic, designed to engage in natural language understanding and generation. Similar to other advanced AI models, Claude is built to assist in tasks such as answering questions, providing explanations, and generating text based on user input.

25. Gemini is an LLM developed by Google DeepMind. It is designed to perform a wide range of natural language processing tasks, including understanding and generating human-like text.

26. Midjourney is a popular AI-powered image generation tool that creates visually stunning artwork from text prompts. It's available as a Discord bot, allowing users to input text descriptions and receive generated images in various styles. Midjourney is developed by Midjourney, Inc.,

27. Llama is a family of open-source, LLMs developed by Meta. Since it’s open-sourced, Llama allows developers and researchers to access, modify, and improve the models, fostering innovation and collaboration within the AI community.

🏢 Companies & Labs

28. OpenAI is an AI research and deployment company whose mission is to ensure that artificial general intelligence benefits all of humanity. They popularized the concepts of chatbots with the invention of ChatGPT.

29. DeepSeek is a Chinese AI company developing and open-sourcing LLMs, including the DeepSeek-R1 model. It has gained attention for its claim of developing LLMs that match or surpass the performance of industry leaders like OpenAI, while reportedly costing less to create.

30. Anthropic is an AI safety and research company focused on developing reliable and interpretable AI systems. They are the creators of Claude.

31. Google DeepMind is a leading artificial intelligence research lab that aims to solve intelligence and use it to advance science and benefit humanity. They focus on developing advanced AI technologies and applying them to real-world problems, with a commitment to ethical and responsible AI development.

El Fin 👋🏽

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

Maintaining a formatted and tidy codebase is the ideal scenario for projects. However, ensuring that codebases adhere to these standards requires some work to make this a reality. In this article, I’ll describe the libraries and automations I’ve employed to achieve a polished and organized codebase a reality.

If you'd like to set up all these tools in a sample project, you can clone this GitHub repository. All the examples I provide will assume you're following along with the sample project unless I mention otherwise.

Benefits

Before we dive into how to automate this process, let's first explore why you would want to automate code formatting and linting. Instead of bike-shedding over rules, you can automatically format or lint files using a small set of configuration files. Prettier is used for formatting, and linters are used for catching bugs. ESLint offers a wide range of options, including framework-specific checks and accessibility warnings, to name a few. Both Prettier and ESLint work together to improve the structure and quality of the codebase.

Prettier

Prettier is an opinionated code formatter that integrates with many code editors and supports a variety of programming languages. Prettier intentionally limits the amount of options you can customize so that you spend less time debating styles like whether to use tabs vs. spaces or single quotes vs. double quotes and more time focusing on important things. Simply put, Prettier saves you time and energy by allowing you to agree on a set of configuration options and move on with your day.

Installation & Configuration

To install Prettier into your project run the following command:

npm install --save-dev --save-exact prettier

Then, create an empty config file at the root of your project:

touch .prettierrc.json

This .prettierrc.json file will house the configuration options for our project. To test out a few options, open the file and add the following text to enforce double quotes and semicolons.

{
  "singleQuote": false,
  "semi": true
}

Testing

Run the following command at the root of the project to utilize Prettier’s CLI and check for any formatting issues in src/counter.js. :

npx prettier --check src/counter.js

After checking that file, Prettier will output the following to the terminal:

Checking formatting...
[warn] src/counter.js
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

To fix the issue, Prettier gives us a big clue here telling us to use the —write flag to address the issues it found so let’s try doing just that with this update:

npx prettier --write src/counter.js

Now if you run a diff against the counter.js you will notice that semicolons have been added to the end of statements and the single quotes have been replaced with double quotes.

ESLint

ESLint is a powerful tool that performs static analysis of your code to identify potential issues and enforce coding standards. ESLint can detect syntax errors, potential bugs, and deviations from your defined coding style. This tool is widely integrated into many text editors, providing real-time feedback as you write code. Additionally, ESLint can be configured to run as part of your continuous integration pipeline, ensuring that all code changes adhere to your project's quality standards before they are merged. This helps maintain a consistent codebase and reduces the likelihood of introducing errors into your application.

Installation & Configuration

To install ESLint into your project run the following command:

npm install eslint --save-dev

You can configure ESLint using this command:

npm init @eslint/config@latest

This will prompt you with a series of questions and after installation is complete, create a eslint.config.js file that you can edit and configure to your liking. By default the recommended configuration will be applied and you can configure some rules so that the file looks like this:

// eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  {
    rules: {
      "no-console": "warn"
    }
  }
];

The name "no-console" is an example of a rule in ESLint. When overriding rules the severity can be one of the following:

• 0 or "off"

• 1 or "warn"

• 2 or "error"

The three severity levels provide you with fine-grained control over how ESLint applies rules (for more configuration options and details, see the configuration docs).

eslint-config-prettier

ℹ️ Use Prettier for code formatting concerns, and linters for code-quality concerns.

Linters often include rules for both code quality and style. However, most style rules aren't needed when using Prettier, so we need to install the eslint-config-prettier package to prevent ESLint from conflicting with Prettier.

npm install eslint-config-prettier --save-dev

Then add eslint-config-prettier to the ESLint config so that it includes the following:

// eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier"; //Import package

/** @type {import('eslint').Linter.Config[]} */
export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  eslintConfigPrettier, //Ensure this is the last option in the list
  {
    rules: {
      "no-console": "warn"
    }
  }
];

To ensure everything is set up correctly and that none of the ESLint rules conflict with Prettier, we can use the CLI helper tool included with eslint-config-prettier. For example, if I run npx eslint-config-prettier src/counter.js, it will output, “No rules that are unnecessary or conflict with Prettier were found.”

Testing

Run the following command at the root of the project to utilize ESLint’s CLI and check for any formatting issues in counter.js:

npx eslint src/counter.js

You’ll notice that ESLint does not output anything, indicating that no issues were found. To purposely create an error and a warning, update counter.js to add a console.log() statement and create a new variable without referencing it anywhere.

If you’re using an editor like VSCode and have the ESLint extension installed, you might notice that the editor shows the following tooltips when you hover over the code associated with the issues:

However, you can use ESLint’s CLI tool to also check for any issues by running the following command:

npx eslint src/counter.js

After running the command, the terminal should output the following error and warning messages:

This indicates that ESLint is set up properly and correctly identifying issues.

Husky

Husky is a tool that allows you to manage Git hooks more easily. Git hooks are scripts that run automatically at certain points in the Git workflow, such as before a commit or push. Husky allows you to configure these hooks making it easier to enforce code quality standards, run tests, or perform other tasks automatically as part of the development process.

Installation & Configuration

To install husky run the following command:

npm install --save-dev husky

Next, we need to run the init command which will simplify setting up husky in a project:

npx husky init

This creates a pre-commit script in .husky/ and updates the prepare script in package.json. In the next section we’ll see how we can use this to run Prettier and ESLint whenever committing new files.

lint-staged

lint-staged enhances the code quality assurance process by running linters on files that are staged for commit, rather than the entire project. This approach ensures that only the files intended for the next commit are checked, preventing errors from entering the repository and enforcing consistent code style. By focusing on staged files, lint-staged significantly reduces the time and resources required for linting, making it a practical solution for maintaining code quality without unnecessary overhead. The tool provides the ability to execute custom shell tasks on these files, filtered by specified glob patterns, streamlining the pre-commit workflow.

Installation & Configuration

Run the following command to install lint-staged

npm install --save-dev lint-staged

Next, we need to setup the pre-commit hook to run lint-staged. If you remember from the previous section, husky created this file for us so we can open the file directly and edit it or run the following command:

echo "npx lint-staged" > .husky/pre-commit

Now we need to instruct lint-staged to run Prettier and ESLint. We do this by creating a configuration file named .lintstagedrc.cjs and adding the following code to it:

//.lintstagedrc.cjs
module.exports = {
    'src/**/*.js': ['eslint --fix', 'prettier --write --ignore-unknown']
}

This file uses a glob pattern to match all JavaScript files in the src directory, and it lints and formats all staged files that are about to be committed.

Testing

Now if we add and commit counter.js with the intentional issues that were added earlier in the article, we will see the following output:

El Fin 👋🏽

Hopefully, you can start to see the benefits this combination of tools offers. Prettier formats files, ESLint helps you catch potential bugs, Husky makes it easier to create pre-commit hooks, and lint-staged is the glue that keeps this automation process consistent.

By leveraging these tools, you can automate code formatting and maintain a clean, efficient codebase. These tools not only enhance code quality but also streamline the development process, allowing you to focus more on building and less on manual formatting.

As always, thank you for reading, and happy coding!

1) Raycast ⚡

Raycast provides a collection of powerful productivity tools all within an extendable launcher. With its fast and customizable interface, you can search files, run commands, manage apps, and even extend functionality with community-built plugins.

I’ve known about Raycast for a while but was an avid Alfred user for years. I finally made the switch this year and have been happy with the results.

🆓 Free | 🌐 Check out Raycast

2) Shottr 📸

Shottr is a lightweight screenshot tool designed specifically for macOS. Packed with features like pixel-perfect zoom, text recognition (OCR), and annotation tools, it’s perfect for developers and designers who need to capture and share ideas quickly.

🆓 Free | 🌐 Check out Shottr

3) RunJS ▶️

RunJS is a fast and efficient tool for prototyping JavaScript and TypeScript. It serves as a playground or scratchpad, allowing you to write and execute code seamlessly. The output of your code is displayed side-by-side with the editor, providing instant feedback.

RunJS allows you to install npm packages, making it a good fit for testing and experimenting with libraries. It also allows you to save and organize snippets into a collection for quick and easy access.

🆓 💰 Freemium | 🌐 Check out RunJS

4) Rectangle 🟦

Rectangle is an open-source, window management tool based on Spectacle (the deprecated window manager I mentioned in my last rendition of this post). Rectangle allows you to move and resize windows using keyboard shortcuts or snap areas. Macs still do not have this feature natively, making this a very handy tool.

🆓 Free | 🌐 Check out Rectangle

5) Eagle 🦅

Eagle is a versatile digital asset management tool designed to help developers, designers, and creatives stay organized. With features like smart folders, tagging, and powerful search capabilities, it lets you effortlessly manage and categorize images, videos, fonts, and other design resources. Eagle streamlines your workflow, ensuring your inspiration and assets are always at your fingertips.

💰 Paid | 🌐 Check out Eagle

6) Bruno 🐶

Bruno is a lightweight, open-source, Postman alternative that aims to reinvent the API client. Some of its differentiators includes a native Git integration and offline-only capabilities.

🆓 Free | 🌐 Check out Bruno

P.S. Thunder Client is another alternative if you’re looking for an API client that you can use directly inside VS Code.

7) PixelSnap 2 📏

PixelSnap is a precision measurement tool that makes it effortless to measure anything on your screen. Ideal for developers and designers, it lets you quickly find distances between objects, dimensions of UI elements, or even gaps in layouts. With its smart snapping and intuitive interface, PixelSnap saves time and ensures pixel-perfect accuracy in your work.

💰 Paid | 🌐 Check out PixelSnap 2

El Fin 👋🏽

I hope you will find these apps to be a helpful and productive addition to your workflow. Remember to check out my related article, 7 Free Mac Apps to Boost Development Productivity, for a list of other apps that you may want to add to your toolkit.

As always, thank you for reading, and happy coding!

A Note on the Series:

Fast Fridays 🏎 is a series where you will find fast, short, and sweet tips/hacks that you may or may not be aware of. I will try to provide these (fairly) regularly on Fridays.

It's common to have aliases in dotfiles that offer shortcuts for running frequent commands. A useful trick is to create an alias for an existing bash command and use that instead of the actual command. Occasionally, you might need to run the real command instead of the alias. In this Fast Friday tip, you'll learn how to easily bypass an aliased command.

Simplifying Commands with Aliases

I have an alias defined in my .zshrc file that maps rm to the trash command, a third-party package that moves files and folders to the trash. Essentially, it’s a safer alternative to the dangers of the default rm command as it moves anything you delete to the trash folder instead of removing it entirely from your computer without any way to retrieve it.

P.S. This was a tip that I got from the following Wes Bos video years ago:

Although it’s rare that I find myself removing something unintentionally, it surely came in handy the one time I fat-fingered a command and deleted an entire directory of projects. Thankfully, all I had to do was CTRL + Z to undo the action, and all my folders and files were returned to their original location. Phew! 😥 Crisis averted!

Bypassing Aliases

Even though I have those safeguards in place, there are times when I do actually want to run the default rm command. A common example of this is when I’m copying and pasting a command from a work repo and it includes the -rf flags. If I were to run a command that included those flags I would get an output that reads “The file “-rf” doesn’t exist.” That’s because the aliased version runs trash which doesn’t accept those flags.

> rm -rf blog-temp
> The file “-rf” doesn’t exist.

In order to get around this, you have two options:

1. \

2. command

By prefixing with the \ (backslash) or command keyword, you instruct the shell to bypass any alias and execute the original command.

For example, if I were to run either of the following commands it would correctly remove the specified directory:

> command rm -rf blog-temp
> \rm -rf blog-temp

This Fast Friday tip is a bit niche, but it's super handy when needed!

El Fin 👋🏽

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

Reflecting on my journey with component libraries, I've gathered a myriad of insights that I believe can guide others in creating successful component libraries of their own. Working across several libraries in various capacities, each project has taught me something new about what works and what doesn't. Your mileage may vary, but these are some of the lessons I’ve learned being a component library maintainer and contributor.

🚰 Avoid the Kitchen Sink

It's tempting to create a component for every conceivable need, but this can lead to an overwhelming array of choices for developers. For instance, deciding between a HeaderSection or AppSectionHeader can complicate rather than simplify development. The key is to focus on essential components, ensuring that developers aren't bogged down by unnecessary options. Help a dev out and prevent a scenario where it makes their job harder because they have too many components to choose from.

Not every UI element needs to be included in a component library. Create components only when they are needed multiple times and justify the effort of abstraction. Complex components with unique logic should remain presentational, avoiding the inclusion of business logic. This focus ensures that the library remains manageable and relevant in a wide range of scenarios.

🔡 Carefully Craft the Props API

Defining the props that individual components accept are the backbone of any component library. If the initial props structure is too rigid, it becomes challenging to make changes without causing disruption. To mitigate this, it's vital to design a flexible and robust API from the start. Changes should be additive, not subtractive, to avoid breaking existing implementations. This foresight ensures that your components remain adaptable and easy to integrate with third-party libraries, without being tied to specific implementations.

Another thing to keep in mind when crafting props is to make impossible states impossible. This means structuring your component's API so that it inherently disallows invalid or contradictory configurations. By doing so, you reduce the likelihood of bugs and make your components more robust.

♿ Prioritize Accessibility

Accessibility should always be a priority. By implementing accessible components from the beginning, applications can make meaningful strides in creating a more inclusive user experience (UX). This ensures that even developers with limited accessibility expertise can effectively use these components. Such an approach not only enhances UX but also simplifies development by offering accessible building blocks.

Check out my course, The Approachable Guide to Accessible Components, to learn more about this topic.

🤸🏽‍♀️ Emphasize Flexibility and Extensibility

Components should be developed with a focus on flexibility and extensibility. Avoid imposing fixed dimensions unless absolutely necessary, as this allows components to adapt to different layouts and design changes.

For example, if the initial design calls for a component to be centered within a container, but later the design changes so that it needs to grow and take up the full width of said container, this change becomes trivial if the component was built in such a way that it was unopinionated about its dimensions from the start.

To prevent components from causing unintended layout shifts, avoid applying margins to the outermost container of the component. Using padding is acceptable as it only affects the internal spacing of the parent component. Ensuring that components can expand to fit their container makes them adaptable to various applications.

📝 Document Thoroughly

When it comes to component libraries, developers are your audience. Help them out by writing comprehensive documentation. Tools like Storybook and React Styleguidist can help with creating detailed documentation, making it easier for developers to effectively utilize components.

📶 Extend HTML Element Attributes

When implementing components that have native HTML equivalents, it's helpful to expose props that extend the element's attributes. Common HTML elements added to component libraries include the <button>, <textarea>, and <input>.

For example, if you were to create a custom TextInput component in React, you might define props that looks something like the following code block:

import "./TextInput.css";
import PropTypes from "prop-types";

TextInput.propTypes = {
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  hideLabel: PropTypes.bool,
  disabled: PropTypes.bool, // <input> attribute
  error: PropTypes.string,
  type: PropTypes.string, // <input> attribute
  name: PropTypes.string, // <input> attribute
  placeholder: PropTypes.string, // <input> attribute
  value: PropTypes.string.isRequired, // <input> attribute
  onChange: PropTypes.func.isRequired 
};

export default function TextInput(props) {
  const { id, label, disabled, hideLabel, error, name, value,
          type = "text", placeholder, onChange } = props;

  const hasError = error?.length > 0;
  return (
    <div>
      <label htmlFor={id} className={hideLabel ? "visually-hidden" : null}>
        {label}
      </label>
      <input
        id={id}
        type={type}
        placeholder={placeholder}
        name={name}
        disabled={disabled}
        value={value}
        aria-describedby={hasError ? "error-message" : null}
        aria-invalid={hasError ? "true" : "false"}
        onChange={(event) => onChange?.(event.target.value)}
      />
      {hasError && (
        <p id="error-message" className="error">
          {error}
        </p>
      )}
    </div>
  );
}

By using the same names as the equivalent HTML elements, developers can more easily adopt the custom component without needing to learn an entirely new API.

🔝Leverage Headless Libraries

Headless components offer a powerful abstraction by providing logic and accessibility without styling. This allows developers to apply their own branding while benefiting from pre-built functionality. These libraries are particularly useful for complex components, enabling developers to focus on meeting design requirements rather than reinventing the wheel.

Check out this YouTube video to learn more about how to implement an accessible Tabs component using Radix:

El Fin 👋🏽

Building a successful component library involves thoughtful architecture, striking a balance of restraint and flexibility, and a strong emphasis on accessibility and documentation. By adhering to these best practices, you can develop a library that is both practical and extensible, effectively meeting the needs of developers throughout your company.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

If you’re anything like me, then the thought of getting a new computer invokes two emotions: excitement and dread. You’re excited to get a brand new computer that is an upgrade to your current machine or maybe you’re starting a new job and need to get things setup quickly. However, you’re also dreading the hassle of having to go through the tedious process of configuring your computer to feel comfy like your last one. After going through this song and dance multiple times, I got really interested in automating this process via dotfiles and bash scripts.

Throughout this article, I will go over the automated process that I finally landed on after copious amounts of research.

The Why ❓

Let's start with why I decided to invest so much time into automating this process. If you've ever looked into this topic, you'll quickly find that there are many ways to manage dotfiles. Some methods use ready-made tools that handle it for you (check out this site for a comprehensive list of options). Other solutions are more customized and tailor-made.

One thing I learned from all my research is that it all depends on what works best for you and your configurations. Interestingly enough, it seems like there is no universally accepted solution for managing dotfiles in the developer community. After scoping out the different options, I decided to go the tailor-made route.

🤔 Choosing the Right Approach

Narrowing the choice down to the customized route ruled out a large subset of options, but then came the hard part of figuring out how to manage these dotfiles in an elegant way. Thankfully, there are wonderful people on the web who share their setups, and it seemed that the two most popular ways to manage this were:

1. git bare repo

2. GNU stow

My initial research led me to the git bare repo method, and I began implementing it. However, I encountered some difficulties and decided to take a break. Months later, I revisited the project and noticed several references to using GNU Stow. Naturally, I explored this option and eventually decided that Stow was the best way to go.

Although there were many articles written about the git bare repo process, I found it a bit too confusing. I also worried I might screw things up if I missed a step. On the other hand, GNU Stow was more intuitive for me from the start, and I felt it would be easier to maintain long term.

👩🏽‍💻Scripting

In addition to managing dotfiles, I also wanted to automate the installation of my applications and Mac settings. Now that I had a plan for managing my dotfiles, I needed to write scripts to automate this process.

🍺 Installing Applications via Homebrew

Homebrew touts itself as "The Missing Package Manager for macOS" and it's an amazing tool that allows you to install apps and packages via the command line. The first thing I did for this process was perform an audit of all the apps that I use on my work and personal computer and add them to a spreadsheet.

Then I labeled which ones required a manual install and which ones could be installed via Homebrew. Thankfully a majority of the apps could be installed via the command line so I created a brew-install.sh script that ended up looking something like this:

#!/usr/bin/env bash
# Check for Homebrew to be present, install if it's missing
if test ! $(which brew); then
   echo "🍺 Installing Homebrew"
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"  
   brew update
 else
   echo "Homebrew is already installed."
fi

checkForResponse() {
  read -p "Install $1 [y/n]? " response
}

checkForResponse "Applications"
if [[ $response == "y" || $response == "Y" ]]; then
   echo "🍱 Installing Applications"
    brew install --cask figma
    brew install --cask itsycal
    brew install --cask notion
    # List out other apps here...
fi

checkForResponse "Packages"
if [[ $response == "y" || $response == "Y" ]]; then
   echo "📦 Installing Packages"
   brew install bat
   brew install git
   brew install stow
   # List out other packages here...
fi

checkForResponse "Fonts"
if [[ $response == "y" || $response == "Y" ]]; then
   echo "🔠 Installing Fonts"
    brew install --cask font-fira-code
    brew install --cask font-cascadia-code
    brew install --cask font-inconsolata-for-powerline
   # List out other fonts here...
fi

echo "✅ Installation using Homebrew is complete"

🖥️ Configuring Mac settings

Another thing I wanted to automate was configuring my Mac settings. These are always the "set it and forget it" aspects of owning a computer. However, you really notice the differences when you switch to a new computer and have the feeling that something is off.

I had seen some other people's dotfiles using a strange syntax like this: domains.<something>.<else>. After some Googling, I discovered it was a low-level way to configure Mac preferences. The only problem was that I didn't have a list of all the different options. Then, I found this list of macOS defaults. This site was extremely helpful in figuring out what settings I could automate, and it explained the syntax well. It may not be an exhaustive list of all the Mac settings you can set from the command line, but it gave me plenty to work with.

To handle this, I created a new file called mac-settings.sh, and the final output looked something like this:

#======================Dock settings =================
defaults write com.apple.dock "orientation" -string "left" # Set dock to the left
defaults write com.apple.dock "show-recents" -bool false # Do not display recent apps in the Dock
defaults write com.apple.dock "autohide" -bool false # Always display the dock (default)
defaults write com.apple.dock "mineffect" -string "genie" # Genie effect for minimizing windows (default)

#======================Screencapture settings =================
mkdir -p $HOME/Desktop/Screenshots # Create "Screenshots" folder on the desktop and set it as the default location 
defaults write com.apple.screencapture "location" $HOME/Desktop/Screenshots  
defaults write com.apple.screencapture "show-thumbnail" -bool true # Display the thumbnail after taking a screenshot (default)
defaults write com.apple.screencapture "include-date" -bool false # Don't include date in the screenshot file name

#======================Finder settings =================
defaults write NSGlobalDomain "AppleShowAllExtensions" -bool true # Show filename extensions 
defaults write com.apple.finder "ShowPathbar" -bool true # Show path bar in the bottom of the Finder windows
defaults write com.apple.finder "FXPreferredViewStyle" -string "Nlsv" # Set the default view style for folders without custom setting to list view
defaults write com.apple.finder "FXDefaultSearchScope" -string "SCcf" # Set the default search scope when performing a search in Finder to the current folder
defaults write NSGlobalDomain "NSDocumentSaveNewDocumentsToCloud" -bool false # Save to disk (not to iCloud) by default

#======================Trackpad settings =================
defaults write com.apple.AppleMultitouchTrackpad "FirstClickThreshold" -int 1
defaults write com.apple.AppleMultitouchTrackpad "DragLock" -bool false
defaults write com.apple.AppleMultitouchTrackpad "Dragging" -bool false
defaults write com.apple.AppleMultitouchTrackpad "TrackpadThreeFingerDrag" -bool false

#======================Mission Control settings =================
defaults write com.apple.dock "mru-spaces" -bool false # Do not rearrange spaces based on most recent use
defaults write com.apple.dock "expose-group-apps" -bool false # Do not group windows by application (default)

#======================Text Edit settings =================
defaults write com.apple.TextEdit "RichText" -bool false # Set default document format as plain text (.txt)

⚙️ Stowing dotfiles

One vital aspect of this new dotfiles workflow was to create a portable and reusable system that could be stored in version control. I wanted a way to easily update my dotfiles without having to manually copy them over in an ad hoc manner.

As I mentioned in the introduction, I chose GNU Stow because it felt more intuitive to me. GNU Stow describes itself as a "symlink farm manager". Simply put, it manages the creation and deletion of symbolic links. To stow something, you type stow followed by the name of the package(s) you want to symlink. Here's what the final stow command I used looks like:

stow -v --dir=$HOME/dotfiles/$LAPTOP_TYPE --target=$HOME zsh git vim

🛠️ Breaking down the code

• -v = Enables verbose mode, which outputs detailed information about what Stow is doing.

• --dir = Specifies the directory where the dotfiles are located. If not specified, this defaults to the current directory.

• --target = Sets the target directory where the symbolic links will be created. In this case, it is the $HOME directory. If not specified, this defaults to the parent of the stow directory.

📦 Package Structure

When using GNU Stow, the package structure is crucial because it determines how the symbolic links are created and organized. Each package (e.g., zsh, git, vim) are a subdirectory within the main directory specified by --dir. Inside each package directory, the files and subdirectories mirror the structure of the target directory where the symlinks will be created. This ensures that the symbolic links are placed correctly in the target directory.

Maintaining a consistent structure across different packages helps in managing and updating dotfiles. For example, the .zshrc file in the zsh package will be placed in zsh/.zshrc so that Stow can link it to $HOME/.zshrc.

🧪 Testing

It’s all good and fun to have these scripts, but I needed an environment to test them in. It’s difficult to get access to a clean slate of an operating system so I looked around for options. Plus, I wanted an environment that I could test out these bash scripts without borking my own machine. At some point I heard about the idea of using Docker and I proceeded down that route.

🐳 Docker

Even though I have written about Docker before, I am by no means an expert. However, I understood that the containerization aspect of Docker would make it an ideal environment to use as my testing ground.

The first thing I did was write a Dockerfile to create a simple container that could run bash scripts. When the container runs, the Dockerfile is set up to sh into the working directory. This setup allowed me to run the scripts and fix any issues. It also let me test CLI commands before adding them to the final scripts.

# Grab base image from Docker Hub
FROM ubuntu:latest

# Update and install necessary packages
RUN apt-get update && \
    apt-get install -y git vim curl zsh bash build-essential procps curl file language-pack-en

WORKDIR /root/dotfiles/

# Copy the scripts files from the current directory into the container's working directory
COPY . .

# Make the brew-install.sh script executable
RUN chmod +x brew-install.sh setup.sh

# Start bash
CMD ["sh"]

The great thing about using a Docker container was that I could experiment with many different approaches. I don't write a lot of bash scripts, so this was especially helpful. If I messed something up, no problem—I could just delete the container, make some changes, and then restart and try again. It turned out to be a good sandbox, and I recommend using one if you want to fine-tune your own dotfiles workflow.

🔠 Putting it all Together

With all those steps in place, I finally had a workflow that I could run. Here’s a breakdown of how it all pans out:

setup.sh

This file is the main driver that executes all the complimentary scripts and functions.

#!/usr/bin/env bash

# Source the helpers file to get access to the functions
source ./helpers.sh

#======================Run setup scripts===============  
./brew-install.sh
setup-stow
setup-oh-my-zsh
setup-cobalt2-theme
./mac-settings.sh

brew-install.sh

The first script called from setup.sh is the brew-install.sh script that I mentioned earlier. This script checks if Homebrew is installed. If it's not, it will install it and then ask if I want to install three types of items: applications, packages, and fonts.

setup-stow()

Once the Homebrew script finishes, the next step is to run the setup-stow function. As the name suggests, this function takes care of setting up the correct Stow environment.

setup-stow() {
  # Check if stow is present, install if it's missing
  if test ! $(which stow); then
    echo "Installing GNU Stow"
    brew install stow
  else
   # Get the laptop type
   LAPTOP_TYPE=$(get-laptop-type)
   echo "💻 Laptop type: $LAPTOP_TYPE"
   echo "🐐 Stowing dotfiles..."
   stow -v --dir=$HOME/dotfiles/$LAPTOP_TYPE --target=$HOME zsh git vim
   echo "🚀 Stow complete!"
  fi
}

The function prompts me for the "laptop type" since I maintain separate directories for work and personal files to stay organized. This approach allows me to stow work-related files on my company laptop and personal files on my own Mac. While the differences between the two sets of files are minimal, this separation enables me to customize the experience for each device, ensuring that each setup is tailored to its specific use case.

setup-oh-my-zsh()

The third item run in the main script is the setup-oh-my-zsh() function. This handles installing oh my zsh and is passed two important flags:

1. --keep-zshrc - This flag tells oh my zsh to respect the existing .zshrc file so that any pre-existing settings will be reflected.

2. --unattended - This flag uses the “unattended install” to prevent oh my zsh from exiting the script early.

setup-oh-my-zsh() {
# Check if oh-my-zsh is present, install if it's missing
if [ ! -d "$HOME/.oh-my-zsh"  ]; then
    echo "Installing oh my zsh..." 
    sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" "" --keep-zshrc --unattended
  else
    echo "oh my zsh is already installed."
fi

Having the setup-oh-my-zsh function run after the Stow setup is intentional. It's crucial that the .zshrc file is in the $HOME directory so that when the flag checks for it, it can find it and apply the existing settings. This wasn't immediately obvious to me, but I realized the order of operations was important after testing it in the Docker container. This is why I'm a big fan of having a sandbox environment that gives you the opportunity to experiment with these scripts.

mac-settings.sh

The last part of the script runs the mac-settings.sh script that I shared earlier. This script handles running the CLI commands to update some Mac settings, such as moving the dock to the left and setting the default folder for screenshots.

👋🏽 El Fin

After a lot of trial and error and even more research, I finally feel happy with my dotfiles workflow. Now instead of grappling with the dichotomy of emotions when setting up a new computer, I’m prepared that the workflow I configured will make getting up and running with a new machine a more enjoyable process

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

Resources

• Jake Wiesler - Manage Your Dotfiles Like a Superhero

• System Crafters - Using GNU Stow to Manager Symbolic Links for your Dotfiles

Music Maestro is a site that helps you craft custom playlists. The architecture uses AI to create tailored playlists based on any search criteria

🌐 View the live version of the site at https://musicmaestro.io/

💻 Check out the GitHub repo at https://github.com/Cool-Runningz/music-maestro

✨How it Works

When you arrive at the landing page, you will need to login to Spotify. After you've successfully logged in, you will be presented with a search input and some sample prompts like "90's nostalgia" or "Jazz vibes for a rainy day".

Search based on any criteria and in a matter of seconds the UI will display a custom generated playlist. If you have a Spotify premium account, you will be able to play the songs directly in the browser.

💡 How I Came up with the Idea

I waffled back and forth on ideas for this hackathon. With AI, the possibilities are endless, so I almost had too many options to choose from. Some potential ideas ranged from an image alt text generator, since I'm all about accessibility, to an app that generates timestamps for your podcast since my sister and I co-host a podcast together called Culture in Between.

Eventually, I had a lightbulb moment when I thought back to a time when I couldn't decide what songs I wanted to play. I've been a Spotify premium member for years, and although their app has a great search feature, searching for something vague like "capture the vibe of 'Feels like Summer' by Childish Gambino" isn't going to yield the best results.

At the time I had that fleeting thought, I didn't think of creating this myself. It wasn't until I saw the "AI for Tomorrow" hackathon pop up on my feed and noodled on myriads of ideas for a few days that I finally realized this might be a feasible (and interesting!) project.

🛠️ Tech Stack

1. Next.js (Full-stack web framework)

2. Tailwind CSS (Utility-first CSS framework)

3. Tailwind UI (Premium UI components designed with Tailwind CSS)

4. Catalyst (Modern UI Kit written by the Tailwind team)

5. Spotify API (Enables the creation of applications that can interact with Spotify's streaming service)

6. OpenAI (Platform for building AI products)

7. Heroicons (SVG icons)

8. SWR (React Hooks for Data Fetching)

9. NextAuth v5 (Authentication for Next.js)

10. TypeScript (JavaScript with syntax for types)

👷🏽‍♀️ Implementation Details

In the following sections, I will describe how I went about implementing this project and will provide a deeper dive into the technical details. The first detail I will share is that this project is still a work in progress. By default, Spotify apps have to get approved before they can be used by a wider audience so if you're interested in using this, let me know and I will try my best to get you early beta access.

🔐 Phase 1: Authentication

Connecting to Spotify is the crux of this project so I started with auth. I don't have previous experience working with authentication and I seldom work on the backend so this was all new territory. In the interest of time and ensuring I didn't screw this process up, I went with next-auth since it has a Spotify Provider that made authenticating with Spotify more manageable.

🎨 Phase 2: Scaffolding the UI

The second major thing I focused on was building out the UI. Design is not my strong suit so I leveraged one of the templates from Tailwind UI and tweaked it to suit the projects needs. Since the site consists of a single page, I went with a theme that would allow me to showcase the two main sections of the app: the search widget and the playlist.

I also leveraged Catalyst, which I would describe as Tailwinds take on a component library. I honestly forgot that I had access to that when I paid for the Tailwind UI package so being able to leverage pre-made, accessible, and aesthetically pleasing components, really expedited the UI process.

🚂 Phase 3: The Core Functionality

Now that user could login and view hardcoded results on the UI, I tackled the engine of the app - the generate functionality.

Once a user enters in a prompt and clicks 'generate', the UI makes an API call that hits the Next.js route handler. This is my first time working with the new Next.js app router so I learned a lot of terms and patterns along the way - like working with server components in React!

Anyway, the first thing the route handles does is initiate a call to OpenAI's chat completions API. I have a specific prompt that I pass to the system role and a longer more descriptive prompt that I pass to the user role. This whole process felt very similar to how one would interact with ChatGPT in the browser.

In addition to prompt engineering, I leveraged function calling to improve the output from OpenAI. I wanted a very specific JSON response but for some reason OpenAI has issues with returning properly formatted JSON. Before implementing function calling, there was approximately a 40% - 50% chance of receiving JSON. After the addition of functional calling, the consistency of JSON output improved to about 80% - 90%.

Once the app gets back a list of recommendations from OpenAI, the list is sanitized to remove any faulty JSON. Then it extracts out the info needed to search for the proper tracks in the Spotify search endpoint. Once the list of tracks is returned from Spotify, I flatten the response to only contain the necessary fields and return that back to the UI to interact with Spotify's Web Playback SDK. User's with a Spotify Premium account are then able to interact with the playback controls within their browser.

Phew! That's quite a few moving parts so here is a sketch of the general architecture of the app:

🔮 MVP and Beyond

I am super proud of what I’ve been able to accomplish for the hackathon, however, there are many more improvements that I would like to make in the future. Below is a list of some items that I would like to add post-MVP.

1. Refresh tokens - Spotify's access tokens expire every hour so I manually set the session to expire at the same interval. Ideally, I would like the token to be refreshed in the background so that the user has a seamless experience without having to login and logout so often.

2. Save & Shuffle Playlists - It would be cool to expand the playlist functionality so that users could save a playlist if they liked what was generated. Inversely, if the user doesn't love the generated playlist but wants to keep the same prompt, they could "shuffle" the songs to get different results.

3. Train a model to generate more accurate results - The current suggestions that OpenAI provides are decent but it can lack variety and diversity. Utilizing a model that is more tailored to music recommendations would allow for better playlists.

El Fin 👋🏽

Thanks for reading about the journey to create this project. This has been a great learning experience and has taught me a lot about what it takes to implement a legit MVP.

As always, thank you for reading, and happy coding! Again, feel free to check out the site and view the GitHub repository.

• https://musicmaestro.io/

• https://github.com/Cool-Runningz/music-maestro

A Note on the Series:

Fast Fridays 🏎 is a series where you will find fast, short, and sweet tips/hacks that you may or may not be aware of. I will try to provide these (fairly) regularly on Fridays.

In this Fast Friday tip, I’ll cover a short bash script I created that has allowed me to start developing new components within our reports library in seconds instead of minutes. I’m always looking for little hacks I can employ to help improve my productivity as a developer and I hope this helps you as well!

The Friction Point

Throughout my career, I’ve maintained a few component libraries and there has been a common procedure that I’ve had to follow in each of them.

• Step 1: Create a folder and corresponding *.jsx or *.tsx file for housing React component X.

• Step 2: Create a styles file for component X.

• Step 3: Create Storybook files for component X.

• Step 4: Create a tests folder and files for component X.

• Step 5: Forget all the boilerplate that you have to add for steps 1 -4 that this process takes longer than it should and ends up being annoying 😣

One day, while going through this monotonous cycle, I thought, "There has to be a better way to do this." I got so frustrated with the process that I finally decided to do something about it.

The Solution

After thinking about the problem for a bit, I decided I would tinker with creating a bash script to help automate these steps. I had only ever written a handful of bash scripts, so this gave me a good opportunity to learn more about developing in bash.

My development workflow for this was fairly straightforward, I took steps 1- 4 that I outlined in the previous section, turned those into bash commands, and then filled in any missing gaps.

Here's the final code:

#!/usr/bin/env bash

# Prompt for component name
read -p "Enter component name: " COMPONENT_NAME
TOP_LEVEL_DIR="src/components/$COMPONENT_NAME"

# Check if folder already exists. If it does, abort the process.
if [ -d "$TOP_LEVEL_DIR"  ]; then
    echo "Folder already exists so aborting the process..."
    exit 1
fi

# Create a new directory for the component
mkdir -p "$TOP_LEVEL_DIR"
echo "📂 Created new directory: /$COMPONENT_NAME"

# Create component file
COMPONENT_FILEPATH="$TOP_LEVEL_DIR/$COMPONENT_NAME.tsx"
printf "%s" "import React from 'react';
import { StyledH1 } from './$COMPONENT_NAME.styled';

export default function $COMPONENT_NAME(): JSX.Element {
    return <StyledH1>New $COMPONENT_NAME Component</StyledH1>;
}
" > "$COMPONENT_FILEPATH"
echo "📄 Created $COMPONENT_NAME.tsx"

# Create styled component file
SC_FILEPATH="$TOP_LEVEL_DIR/$COMPONENT_NAME.styled.ts"
printf "%s" "import styled from 'styled-components';
import { color } from '@/styles/variables';

export const StyledH1 = styled.h1\`
    color: \${color.blue[700].value};
\`;
" > "$SC_FILEPATH"
echo "📄 Created $COMPONENT_NAME.styled.ts file"

# Create stories file
STORIES_FILEPATH="$TOP_LEVEL_DIR/$COMPONENT_NAME.stories.tsx"
printf "%s" "import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import $COMPONENT_NAME from './$COMPONENT_NAME';

export default {
    title: 'Components/$COMPONENT_NAME',
    component: $COMPONENT_NAME,
    parameters: {
        design: {
            type: 'figma',
            url: '',
        },
    },
} as ComponentMeta<typeof $COMPONENT_NAME>;

const Template: ComponentStory<typeof $COMPONENT_NAME> = (args) => <$COMPONENT_NAME {...args} />;

export const Default = Template.bind({});
Default.args = {};
" > "$STORIES_FILEPATH"
echo "📄 Created $COMPONENT_NAME.stories.tsx"

# Create test folder and file
TEST_FILEPATH="$TOP_LEVEL_DIR/__tests__/$COMPONENT_NAME.test.tsx"
mkdir -p "$TOP_LEVEL_DIR/__tests__"
echo "📂 Created __tests__ folder"

printf "%s" "import React from 'react';
import { render, screen } from '@testing-library/react';

import $COMPONENT_NAME from '../$COMPONENT_NAME';

describe('$COMPONENT_NAME Component', () => {
    test('renders default view', () => {
        render(<$COMPONENT_NAME />);
    });
});

" > "$TEST_FILEPATH"
echo "📄 Created $COMPONENT_NAME.test.tsx"

Now, all you have to do to create a new component is run the command. You will be prompted to name the new component, and the script will handle creating a new folder with all the necessary files, folders, and boilerplate code.

Measurable Improvements

Whenever I take time away from my assigned tasks to implement things like this, I try to think about the measurable improvements that were made. Here are a few reasons why I believe it was time well spent:

1. There is now a streamlined process for a repeatable task. Automation works best in these situations, making this the perfect task for a script.

2. Before, adding all the boilerplate for a new component would probably take around 5 minutes. Now, the time was reduced to just a few seconds.

3. Having an automated process for creating new components ensured code consistency in terms of file structure and organization.

4. To make this process even simpler, I added an npm script to the projects package.json file so that any developer on the team could easily run this script by running yarn:new component in their terminal.

El Fin 👋🏽

Overall, It was cool that a bash script of less than 100 lines of code could speed up my development process considerably. The next time you have a friction point when developing, consider if there’s a way that you can automate the process.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

With the heavy infiltration of AI into society and software applications, I found myself reflecting on a book I read a few years back. “Steal Like an Artist” by Austin Kleon is a manifesto for creativity in the digital age.

Although the book was written over a decade ago, I think its message is as relevant as ever in this digital age where the lines between AI-generated content and human-generated content are becoming blurred.

With the sheer number of tools and resources at our fingertips, it's arguably easier than it's ever been to render content. However, let's make sure to remember what keeps us human and whole and always set aside time to be creative.

Chapter 1: Steal Like an Artist

i) How to Look at the world (Like an artist)

• Look at the world like an artist would. When you do this you stop putting things in a "good" or "bad" box and instead think in terms of what ideas, concepts, designs, etc are worth stealing and what aren't.

ii) Genealogy of ideas

• Your ideas stem from your upbringing, experiences, and content you let into your life and are the mashup or sum of these influences.

• Take ideas from anything that resonates with you. Pick things that make you feel something and are influential as this will keep your product authentic and true to you.

iii) School Yourself

• Always be learning. Use your curiosity and thirst for knowledge to grow. It'll help you get ahead in life.

Quote of the Section 💬

"If we're free from the burden of trying to be completely original, we can stop trying to make something out of nothing, and we can embrace influence instead of running away from it." - Austin Kleon

Chapter 2: Don’t wait until you know who you are to get started

i) Make things, Know thyself

• If you wait to do something until you think you're qualified, you'll be waiting your whole life. This is where imposter syndrome runs rampant and tries to convince you that you can't do something. Try your best to fight against those thoughts.

• There's a ▶️ gap between where you are and where you want to be. Make progress towards your goal by doing the things you want to be doing now. Don't start when you think you're ready. Sure, it may be intimidating but it will slowly inch you closer to your goal.

ii) Fake it ‘til you Make it

• There are two ways in which you can interpret this common phrase:

  1. Pretend to be the thing you want to be until you are that thing and you are successful in it and people recognize that you're good at said thing.

  2. Pretend that you are creating the type of content you want to be creating until that comes to fruition.

Chapter 3: Write the Book you want to Read

i) Write what you know Like

• Create the content that YOU want to experience. Don't only create things you know or see, but rather take what you know and like and make it into something that you would enjoy. Don't create something just because you think that's what people expect you to make. But instead, focus on what you want or like, which will be your unique creation.

Chapter 4: Use Your Hands

i) Step Away from the Screen

• Something engaging happens when you aren't doing all your thinking and creating in front of a computer screen.

• The computer is great when you have a finalized copy of your creation that you want to share with the world or just reference. Oh, and it's good for editing ideas. However, computers aren't so good when it comes to generating ideas.

• By stepping away from the screen and using other methods to express and create, we engage more senses and therefore can create more freely.

Quote of the Section 💬

"The computer brings out the uptight perfectionist in us -- we start editing ideas before we have them." - Austin Kleon

Chapter 5: Side Projects and Hobbies Are Important

i) Practice Productive Procrastination

• Stop trying to be so damn productive all the time. Take the time to unwind and not think every once in a while. Just be in the moment and let your mind wander and occasionally try and experience boredom. You may just come up with your next big idea.

ii) Don't Throw Any of Yourself Away

Note: I typically paraphrase or summarize but this section had so many good quotes, that I just have to use them directly.

Quote #1 💬 (This is one of my favorites throughout the book 🔥)

"It's so important to have a hobby. A hobby is something creative that's just for you. You don't try to make money or get famous off it, you just do it because it makes you happy. A hobby is something that gives but doesn't take."

Quote #2 💬

"If you have two or three real passions, don't feel like you have to pick and choose between them. Don't discard. Keep all your passions in your life"

Quote #3 💬

"Don't throw any of yourself away. Don't worry about a grand scheme or unified vision for your work. Don't worry about unity—what unifies your work is the fact that you made it. One day, you'll look back and it will all make sense."

Chapter 6: The Secret: Do Good Work and Share It with People

i) In the beginning, obscurity is good

• Embrace obscurity in the beginning, as it allows you to experiment, have fun, and do what you want without pressure. Attention is ideal only after you're producing really good work.

ii) The Not-So-Secret Formula

$$ not-so-secret-formula = "Do-good-work-and-share-it-with-people" $$

Two-step process:

1. Wonder at something

2. Invite others to wonder with you

Benefits of posting your content online:

• Find your voice

• Incubate ideas that aren't fully formed

• Share what's on your mind for others to learn and benefit from

Some ideas of what to share:

• A little bit of what you're working on.

• Sketch or a doodle or a code snippet

• The process you use to do things

• A tip you learned while working

• Links to interesting articles

• Book summaries

• A piece of advice or words of wisdom based on past experiences

Quote of the Section 💬

"Think about what you have to share that could be of some value to people...If you're worried about giving your secrets away, you can share your dots without connecting them." - Austin Kleon

Chapter 7: Geography is no longer our Master

• Create a world that allows you to take time to be creative. Your physical location does not restrict your ability to create great things.

• Leave home every once in a while to experience different things.

Chapter 8: Be Nice. (The World is a Small Town)

i) Stand next to the Talent

• Surround yourself with influential people who inspire you, and learn from them. Observe their methods, the topics they discuss, and the individuals they engage with.

ii) Write Fan Letters

• Instead of writing a literal letter or message to someone praising them for their work, try the approach of public fan letters. (Examples of this include writing a blog post about someone's work you admire and providing a link to their website or product.)

• The person you admire may never get a chance to see your work or respond to it. The important part to glean from this is that you showed your appreciation without expecting a response in return. Plus there's the bonus of creating new work out of that appreciation.

iii) Keep a Praise File

• A praise file is a collection of positive feedback, thank you notes, and other expressions of appreciation that you've received over time. It's a way to archive and revisit the kind words that people have shared with you.

  • Examples of this can include things like nice Slack messages or emails, favorable tweets, or appreciative comments on a blog post.

• This praise file should be relatively easy to access so that when those inevitable days roll around when you feel like 💩, you have something to reference that can bring a smile to your face.

Quote of the Section 💬

"The best way to get approval is to not need it" - Hugh MacLeod

Chapter 9: Be Boring (It’s the only way to get work done)

i) Take Care of Yourself

• It takes a lot of energy to be creative so make sure to take care of yourself.

ii) Get Yourself a Calendar

• Having a calendar helps you keep on track and plan out what you're gonna do so that you can have a path to achieve your goals.

iii) Keep a Logbook

• A logbook isn’t a journal or diary, it’s just a place where you can log the things you do every day.

  • Examples are projects you worked on, people you visited, places you ate, etc.

Quote of the Section 💬

“Be regular and orderly in your life, so that you may be violent and original in your work” - Gustave Flaubert

Chapter 10: Creativity is Subtraction

i) Choose What to Leave Out

• You can’t do it all. Having abundant information at your fingertips can sometimes stifle growth because you don’t know where to start.

• Accept the fact that you can’t learn it all and limit what you let in so that you can start doing something.

• Make use of the resources in front of you and start creating. Don’t make excuses.

El Fin 👋🏽

I highly recommend reading Steal Like an Artist by Austin Kleon as it's a great reminder to take a step back, embrace our creativity, and make the most of the resources, people, and environment around us.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

ChatGPT and the rise of generative AI are trending topics at the moment. Since AI affects developers I figured I'd write a piece about my early reflections on ChatGPT. This blog post will mostly be a stream of consciousness of my thoughts, opinions, and predictions on this topic so take it with a grain of salt 😅 AI and its effects in the workforce are still to be seen but here are my early thoughts.

Let's start at the very beginning...

😨 Fear

When I first heard about ChatGPT and watched numerous videos on what it was capable of, I was terrified. That is not hyperbole either. I remember sitting back in my chair and sulking over how AI would take over my job. I felt dejected and that I would be obsolete in five years' time.

GitHub's Copilot had caused some anxiety when it was first announced, but this didn't compare to the panic that I felt when I saw ChatGPT work its magic. "What was the point of trying?" I thought to myself. This pity party lasted about a week before I snapped out of my funk and realized that I needed to face my fear.

🐂 Taking the Bull by the Horns

Instead of avoiding ChatGPT, I decided that I would give it a try for myself. Rather than dodging ChatGPT and trying to act like it didn't exist, I would "take the bull by the horns" and see what the hype was all about.

ChatGPT's conversational aspect is the feature that frightened me the most; however, it was also the part that intrigued me the most. Stack Overflow and Googling for an answer are some of a developer's top choices when it comes to finding answers to pesky bugs or solving a particularly difficult problem, so I was curious if ChatGPT would improve the feedback loop for workflows like this.

Surely it was at least worth a try...

🏦 Work, work, work, work, work

(🎵 kudos to those who get the Rihanna song reference in the title)

Around the same time that I decided to create an OpenAI account, I was assigned a task at work to build out a chart to display a new finance metric. Data visualization (data viz) is not something that I had previous experience in, so, although it was an exciting task to get to work on, it was also a bit intimidating.

The only thing I really knew about data viz was that D3 was the de facto library that most people reached for when building charts and graphs. I also remembered hearing that D3 had a bit of a steep learning curve. Sigh 😔 With no prior knowledge of data viz and somewhat of a deadline on when I needed to complete this task, I crammed hours of Frontend Masters courses at 2x speed into my brain.

After my crash course, I was now able to read D3 code a bit better than before, but writing it was a different story. I looked through numerous D3 examples with charts that resembled the one I needed to build, but the examples were so complex that I had a hard time adapting them to my use case. If only I could see a simplified example of a chart similar to the one I needed to create, then I could take that sample and tweak it to match my requirements.

If only I could generate an example...

🤖 Chatting with Robots

I was faced with a challenging task, so I figured this was as good a time as any to utilize ChatGPT. I had tinkered around ChatGPT a little beforehand, mainly asking it a few basic prompts, but nothing too serious. Finally confronted with a real problem, I was curious if it could help me get unstuck.

The first couple of prompts I produced didn't yield promising results. The charts either looked wonky or fell apart once I modified the data it accepted. Eventually, I realized that the prompts you provide ChatGPT take some finessing. I needed to be less vague and more specific about what I wanted.

After some trial and error, I was finally able to get a stacked, bar chart that I could work with, albeit an ugly bar chart that didn't meet the design requirements by any stretch of the imagination. It was a starting point though! I was confident that once I had a code example that I could wrap my head around I would be off to the races and surely enough that was the case.

Once I learned that I could import the d3-shape package and leverage stacks to help with generating the chart, then I was able to move on to ask other prompts about how to set up the tick marks along the x-axis and even have it explain the code it provided.

This back and forth of taking the simplified code example and breaking it down into smaller pieces that I could consult with ChatGPT about continued until I was able to successfully build the chart and complete the task. I still wrote a majority of the code myself but being able to ask how to approach a particular problem in D3 for my specific use case was immensely helpful.

It was at this point that I realized ChatGPT wasn't so scary after all. In fact, I was finding that it made my job a bit easier. I felt more productive and soon found myself reaching for ChatGPT before initiating a Google search.

Talk about a 180. I went from being terrified of ChatGPT and wanting to avoid it to embracing it and incorporating it into my dev workflow. I'm still a bit shocked that I made such a big transition, but overall I'm glad I gave it a try.

💭 My Thoughts so Far

Here are some hot takes after using ChatGPT for almost two months:

1. It's not as scary as I initially thought.

2. Technologies like ChatGPT will be a tool in a developer's toolbox and help them be more productive.

3. Conversing with ChatGPT is nuanced and providing the right prompt is key to getting desired results.

4. Vet the code that is produced. Some of the code that gets generated is kinda jank, straight-up incorrect, or outdated (like the time it suggested I use floats to position elements in my CSS). Being able to decipher quality vs. not-so-bueno code is crucial.

5. It's only a matter of time before AI tools seamlessly integrate into developers' environments. I think this will be similar to how IDE's, features like autocomplete and text formatting have weaved themselves into most developers' code editors.

❓ Will AI Replace Developer Jobs?

This is the controversial question I see pop up all over and it's one that I have been wondering myself. My short and simple answer is: No, at this point in time, I don't think AI and tools like Chat GPT will replace developer jobs.

The world of AI and its impact on society is still new so who knows what the future holds. All I can say is after some early exposure to AI tools like ChatGPT I don't think developer jobs are in jeopardy at the moment. However, if the robots ever figure out how to create apps and build projects on their own without prompting, then I think we're screwed 😅. But if it ever reaches that point and AI got that smart, we would have larger problems on our hands.

Anyway, I guess this is a long-winded way of saying that I have no idea what the future holds for AI+ developers. All I know is that right now I'm excited to use tools like ChatGPT to improve my development workflow and move quicker through challenging tasks.

I went from being apprehensive of this tool to looking forward to using it in my daily dev work. I recommend you try it out for yourself to see what workflows it may help improve for you too.

👋🏽 El Fin

That's a wrap folks! I'd love to know your opinions on ChatGPT and generative AI in general so feel free to leave a comment.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

P.S. The cover image was AI-generated using DALL-E 2.

What are Headless Components?

Headless components are unopinionated, unstyled, components that handle a majority of the tricky implementation details so that you can build out components faster. Headless components do not have preset styles but instead provide full, interactive functionality for a particular component pattern.

Benefits

1. Built-in Accessibility: Creating accessible components that meet the WAI-ARIA standards and properly handle aspects like keyboard navigation can be a large undertaking. Headless component libraries aim to simplify this often difficult process by providing a set of flexible and extensible components that are prebuilt with accessibility and developer experience in mind.

2. Reusable & Flexible: Headless components are typically flexible enough to be able to handle most business requirements and implementation details. Because these components don't apply any preset CSS, they can make great candidates for component libraries as you can tailor and style them to meet most design systems. In addition, headless components tend to handle things like keyboard interactions and focus management providing one less thing for developers to have to worry about.

3. Inversion of Control: Headless components put a majority of the power in the developer's hands via "inversion of control". This pattern obscures enough of the implementation details and provides you with an API that you can control and style to meet most needs.

   "With great power comes great responsibility": As with most things in software development, there is a trade-off to using headless components as it does put more responsibility in the developer's hands when it comes to styling and certain rendering logic. However, I personally think the benefits outweigh the cons especially when it comes to implementing tricky component patterns for non-native elements like date pickers and autocomplete inputs.

Headless Component Libraries

This section will contain a list of some of the most popular component libraries available on the market today. Some of the options are better suited for certain scenarios but I've provided a variety of choices so that you can choose the library that works best for your use case.

1) Headless UI

Headless UI is built by the Tailwind Labs team making it an obvious option for projects that use Tailwind CSS. The library provides components for both React and Vue making it usable across multiple JS frameworks. When building out my RoadTrip.FM project I reached for the Listbox and Disclosure components. I've found that Headless UI coupled with Heroicons, another open-source project by the Tailwind Labs team, make for a great combo!

Headless UI Tabs Component Example:

import { Tab } from '@headlessui/react'

function HeadlessUITabs() {
  return (
    <Tab.Group>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Content 1</Tab.Panel>
        <Tab.Panel>Content 2</Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  )
}

2) Reach UI

Reach UI has been around for a while and is one of the O.G's in the headless component library space. Reach UI seeks to become the accessible foundation of your React-based design system and has solid accessibility support as it claims that each component is tested with Safari + VoiceOver, Firefox + NVDA, and Edge + JAWS. Reach UI was initially created by Ryan Florence and Michael Jackson, the duo behind Remix and React Router.

Reach UI Tabs Component Example:

import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";

function ReachUITabs() {
  return (
    <Tabs>
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

3) Radix

Radix Primitives is the library’s flagship product and is described as a collection of “unstyled, accessible components for building high‑quality design systems and web apps in React.” Instead of reinventing the wheel, Radix Primitives handle a lot of the tricky parts when it comes to building out common component patterns.

They already have a reputable number of primitives and have plans to add to that list. I've written about Radix before in my "Building a design system with Radix" article for LogRocket and I found the documentation and developer experience to be quite good.

Radix Tabs Component Example:

import * as Tabs from '@radix-ui/react-tabs';

export default () => (
  <Tabs.Root defaultValue="tab1">
    <Tabs.List aria-label="tabs example">
      <Tabs.Trigger value="tab1">One</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="tab1">Tab one content</Tabs.Content>
    <Tabs.Content value="tab2">Tab two content</Tabs.Content>
  </Tabs.Root>
);

4) React Aria

React Aria is built by the team at Adobe and uses a hook-based approach to implementing components. According to their documentation:

React Aria is a library of React Hooks that provides accessible UI primitives for your design system. It provides accessibility and behavior for many common UI components so you can focus on your unique design and styling. It implements adaptive interactions to ensure the best experience possible for all users, including support for mouse, touch, keyboard, and screen readers.

Check out the useTabList hook 🪝 to see how to implement tabs using React Aria.

5) Reakit

Reakit is a lower-level component library for building accessible high-level UI libraries, design systems, and applications with React. Reakit strictly follows WAI-ARIA 1.1 standards, is customizable, and is built with composition in mind.

Reakit Tabs Component Example:

import { useTabState, Tab, TabList, TabPanel } from "reakit/Tab";

function ReakitTabs() {
  const tab = useTabState();
  return (
    <>
      <TabList {...tab} aria-label="My tabs">
        <Tab {...tab}>Tab 1</Tab>
        <Tab {...tab}>Tab 2</Tab>
      </TabList>
      <TabPanel {...tab}>Tab 1</TabPanel>
      <TabPanel {...tab}>Tab 2</TabPanel>
    </>
  );
}

Honorable Mentions

The items in this section are additional libraries that can be leveraged that also use a "headless" approach to their implementations.

1) Downshift 🏎

Downshift is a great choice if you need an autocomplete, combobox, or a select input in your application and you want it to be accessible and flexible. The library provides a robust API that leverages interesting patterns like render props and state reducers. The library initially created by Kent. C Dodds provides a nice solution for these notoriously hard to implement components.

2) MUI Base

MUI Base is built by the same team behind MUI (the artist formerly known as Material UI). According to the MUI Docs:

MUI Base is a library of unstyled React UI components. These components were extracted from Material UI, and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design.

MUI Base includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components.

With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme.

At the time of this writing, MUI Base is still in alpha which is why it's included in this section and not part of the larger component library list.

El Fin 👋🏽

Headless components are a relatively new pattern that has been gaining popularity in the frontend space and I'm loving the flexibility, extensibility, and accessibility benefits that this pattern provides. I highly recommend trying out a headless component library the next time you have a use case for them.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

This guide will explain how to set up Medusa in a React application. Medusa is an open source headless commerce engine built for developers. Medusa's composable architecture allows for endless customization and provides a friendly developer experience. React is a popular JavaScript library that provides a declarative and component-based architecture for building user interfaces.

Throughout this tutorial, you will learn how to build a React ecommerce store with Medusa. You will learn how to set up the Medusa server and admin panel and build out some pages to make up the storefront.

The code for the project developed in this article can be found in this GitHub repository.

Prerequisites

To complete this tutorial, you will need:

• Node.js version 14.18+ or 16+ installed on your local machine.

• One of the following package managers: npm, yarn, or pnpm (This tutorial will specifically use npm.)

Set up the Medusa Server

In order to set up the server, you first need to install Medusa's CLI with the following command:

npm install @medusajs/medusa-cli -g

Next, run the following command to install the Medusa server:

medusa new medusa-server --seed

The command above installs the necessary packages and adds the Medusa server to the medusa-server directory. The --seed command populates an SQLite database with sample data that can be referenced from the storefront and admin panel.

Test the Medusa Server

Navigate to the medusa-server folder and start the server:

cd medusa-server
medusa develop

The command above launches the server on localhost:9000.

You now have a complete commerce engine running locally. You can verify that the server is running by going to http://localhost:9000/store/products in your browser. You should see a JSON blob that has the following response:

If you want the ability to upload product images to your Medusa server, you will need to install and configure a file service plugin like S3 or DigitalOcean Spaces.

Setup the Medusa Admin

Medusa provides an admin dashboard with numerous functionalities that equip you to manage your store, including order and product management.

To set up the Medusa Admin, clone the Admin GitHub repository:

git clone https://github.com/medusajs/admin medusa-admin

Change into the cloned directory and then install the dependencies:

cd medusa-admin
npm install

Test the Medusa Admin

Before testing the Medusa admin, ensure that the Medusa server is up and running.

Once the installation of dependencies is complete and the Medusa server is running, execute the following command to start the Medusa admin:

npm run start

You can now view the Medusa Admin in the browser at http://localhost:7000/ where you will be prompted with the following login screen:

To log in, you’ll need to input the credentials of the demo user that was created when the server’s database was seeded. For the email field, enter admin@medusa-test.com, and for the password field, enter supersecret.

Once logged in, click on “Products” in the sidebar menu. Here, you will see a list of demo products and you can add a few products by clicking on the “New Product” button in the upper right-hand corner.

To learn more about the features and functionalities of the Medusa Admin, check out the user guide.

Setup the React App

In this section, you will scaffold a React application with Vite. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects and is an alternative to tools like Create React App.

Run one of the following commands to create a Vite app. The command will vary slightly depending on the npm version that you have installed:

# npm version 6.x
npm create vite@latest react-medusa-storefront --template react
​
# npm version 7+, extra double-dash is needed
npm create vite@latest react-medusa-storefront -- --template react

From here, change into the new directory and install the project dependencies:

cd react-medusa-storefront
npm install

Start the dev server locally:

npm run dev

Navigate to http://localhost:5173/ in your browser and you should now see a screen similar to the one below.

Install React Bootstrap

To assist with styling and building the components for the storefront you will use React Bootstrap. To install, run the following command:

npm install react-bootstrap bootstrap

In order to apply the styles needed for the React Bootstrap library, you need to add the following import to the top of src/main.jsx:

import 'bootstrap/dist/css/bootstrap.min.css';

Update the CSS

Importing the React Bootstrap stylesheet in src/main.jsx applies a myriad of base styles therefore the stylesheet can be trimmed down.

Open src/index.css and replace its content with the following CSS:

:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
​
a {
  font-weight: 500;
}
a:hover {
  cursor: pointer;
}
​
body {
  margin: 0;
  min-height: 100vh;
}

Install React Router

In order to enable client-side routing in our app, we will need to install and configure React Router by running the following command:

npm install react-router-dom

Since src/main.jsx is our entry point, we need to import BrowserRouter and wrap the App component within it. Doing so will enable client-side routing for our entire web app.

Open src/main.jsx and replace its contents with the following code:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from "react-router-dom";
import App from './App'
import './index.css'
import 'bootstrap/dist/css/bootstrap.min.css';
​
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

With React Router installed and configured, we can begin to build out the other pages for the storefront.

Connect the React Storefront to the Medusa Server

The Medusa JS Client is an SDK that provides an easy way to access the Medusa API from a web application. This Medusa JS client is an alternative to interacting with the REST APIs.

Run the following command to install the Medusa JS Client:

npm install @medusajs/medusa-js

Medusa uses CORS to only allow specific origins to access the server. By default, the Medusa server is configured to allow access to the storefront on port 8000. Because the default port for Vite is 5713, you need to configure Vite to point to the desired port number.

To address this, add the server.port option to the vite.config.js file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 8000,
  },
})

Restart the Vite dev server to reflect the changes made in the config file, and you can now open a new browser tab at http://localhost:8000/.

Create Medusa JS Client Utility

Create a new file at the root of the project called .env and add the following environment variable that points to the URL of the Medusa server:

VITE_MEDUSA_SERVER_URL="http://localhost:9000"

Vite requires all env variables that need to be exposed to the client source code to be prefixed with VITE_ and exposes the environment variable to the client via import.meta.env.VITE_MEDUSA_SERVER_URL.

Create the file src/utils/client.js and add the following code to create a utility that will make accessing the instance of the Medusa JS Client reusable across the application:

import Medusa from "@medusajs/medusa-js"
​
const medusaClient = new Medusa({ baseUrl: import.meta.env.VITE_MEDUSA_SERVER_URL })
​
export { medusaClient }

Create the Storefront Components

This section will cover building out the components that will compose the home page of product listings. Here is a list of the components that we will be building in this section:

1. NavHeader - Displays the logo, links, and shopping cart info.

2. ProductCard - Displays metadata about the products.

To start, create a new components folder in the /src directory to house all the components we will build for the storefront.

NavHeader Component

Create the file src/components/NavHeader.jsx and add the following code:

import React from 'react'
import { Link } from 'react-router-dom'
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Badge from 'react-bootstrap/Badge';
​
export default function NavHeader() {
    const cartCount = localStorage.getItem('cartCount') ?? 0
​
    return (
        <Navbar bg="dark" variant="dark">
            <Container fluid>
                <Nav className="w-25 d-flex align-items-center justify-content-between">
                    <img
                        alt="Medusa logo"
                        src="https://raw.githubusercontent.com/aholland-work/react-medusa-storefront/main/src/assets/logo-dark.svg"
                        width="150"
                    />
​
                    <Navbar.Text className="text-light fw-bold">
                        <Link className="text-decoration-none" to="/"> 🛍️ Products</Link>
                    </Navbar.Text>
                </Nav>
                <Nav>
                    <Navbar.Text className="text-light fw-bold">
                        Cart
                        <Badge bg="success" className="ms-2">{cartCount}</Badge>
                        <span className="visually-hidden">{cartCount} items in the cart</span>
                    </Navbar.Text>
                </Nav>
            </Container>
        </Navbar>
    )
}

The NavHeader component contains a link back to the home page via the “Products” link and a total count of the number of items that have been added to the cart.

ProductCard Component

In the components directory, create a new file called ProductCard.jsx and add the following code:

import React from 'react'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types';
import Card from 'react-bootstrap/Card';
​
export default function ProductCard(props) {
    const formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(props.price / 100)

    return (
        <Card>
            <Card.Img variant="top" src={props.thumbnail} alt={props.title} />
            <Card.Body>
                <Card.Title>{props.title}</Card.Title>
                <Card.Text className='text-success fw-bold'>
                    {formattedPrice}
                </Card.Text>
                <Link to={`/products/${props.productId}`}>View Details</Link>
            </Card.Body>
        </Card>
    )
}
​
ProductCard.propTypes = {
    title: PropTypes.string.isRequired,
    thumbnail: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    productId: PropTypes.string.isRequired
};

This component uses React Bootstrap’s Card component to display metadata about each product.

Create the Home Page

The home page is the root route that uses the Medusa JS Client’s list method to pull in a list of products and display information about them using the ProductCard component that was created earlier.

Create a new file insrc/routes/Home.jsx and add the following code:

import React, { useEffect, useState } from 'react'
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import ProductCard from '../components/ProductCard'
import { medusaClient } from '../utils/client.js'
​
export default function Home() {
    const [products, setProducts] = useState([])
​
    useEffect(() => {
        const getProducts = async () => {
            const results = await medusaClient.products.list();
            setProducts(results.products)
        }
​
        getProducts()
    }, []);
​
    return (
        <>
            <header>
                <h1 className="my-4">All Products</h1>
            </header>
            <main>
                <Row xs={1} sm={2} md={3} lg={4} className="g-4">
                    {products.map((product) => (
                        <Col key={product.id}>
                            <ProductCard
                                title={product.title}
                                productId={product.id}
                                price={product.variants[0].prices[1].amount}
                                thumbnail={product.thumbnail} />
                        </Col>
                    ))}
                </Row>
            </main>
        </>
    )
}

Register the Home Page Route

Next, leverage React Routers Routes and Route components in order to register the pages needed for the react webshop.

Open up src/App.jsx and update it to include the following code:

import { Routes, Route } from "react-router-dom";
import './App.css'
import NavHeader from './components/NavHeader'
import Home from './routes/Home'
​
function App() {
  return (
    <div className="App">
      <NavHeader />
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </div>
  )
}
​
export default App

With this setup, the NavHeader component will be visible across all our routes and the list of all products can be viewed at the root route.

Test the Home Page

Ensure that the Medusa server and the storefront are running and navigate to http://localhost:8000/ to see a preview of the home page:

Create the Product Page

In the routes folder, create a new file called Product.jsx and add the following code:

import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import { medusaClient } from '../utils/client.js'
​
const getFormattedPrice = (amount) => {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount / 100);
}
​
// TODO: Add functions to handle the add to cart functionality
​
export default function Product() {
   const { id } = useParams();
   const [product, setProduct] = useState({})
​
    useEffect(() => {
        const getIndividualProduct = async () => {
            const results = await medusaClient.products.retrieve(id);
            setProduct(results.product)
        }
​
        getIndividualProduct()
    }, []);
​
    return (
      <main className="mt-5">
          <Container>
              <Row>
                  <Col>
                      <img width="500px"
                          alt={product.title}
                          src={product.thumbnail} />
                  </Col>
                  <Col className="d-flex justify-content-center flex-column">
                      <h1>{product.title}</h1>
                      <p className="mb-4 text-success fw-bold">{getFormattedPrice(product.variants?.[0]?.prices?.[1]?.amount)}</p>
                      <p className="mb-5">{product.description}</p>
                      <Button variant="success" size="lg" onClick={() => { console.log("Add to cart") }}>Add to cart</Button>
                  </Col>
              </Row>
          </Container>
      </main>
    )
}

This code takes the ID in the URL’s query param and uses the Medusa JS Client’s retrieve method to obtain information about an individual product.

Register the Product Page Route

Re-open src/App.jsx, import the Product page component, and add a new React Router Route that will point to the individual product page:

import { Routes, Route } from "react-router-dom";
import './App.css'
import NavHeader from './components/NavHeader'
import Home from './routes/Home'
import Product from './routes/Product'
​
function App() {
  return (
    <div className="App">
      <NavHeader />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="products/:id" element={<Product />} />
      </Routes>
    </div>
  )
}
​
export default App

Test the Product Page

To test this out, click on the “View Details” button for the “Medusa Sweatpants” and you will be directed to the product's details page:

Create Add to Cart Functionality

To wire up the logic for the add-to-cart functionality, you need to check if a cart was previously created or not.

For this example, if the cartID is present, then we call the add the line item to the cart and store the cart’s item count in local storage under the cartCount field. If the cartID is not present, then we create a new cart and store the newly generated ID in local storage. The cartCount is used to update the display count in the navigation header.

Re-open Product.jsx in the routes folder and update the file to include the following code:

import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import { medusaClient } from '../utils/client.js'
​
const getFormattedPrice = (amount) => {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount / 100);
}
​
const addProduct = async (cartId, product) => {
    const { cart } = await medusaClient.carts.lineItems.create(cartId, {
        variant_id: product.variants[0].id, //For simplicities sake only adding the first variant
        quantity: 1
    })
    localStorage.setItem('cartCount', cart.items.length)
    window.location.reload()
}
​
export default function Product() {
    // Get the product ID param from the URL.
    const { id } = useParams();
    const [product, setProduct] = useState({})
    const [regionId, setRegionId] = useState("")
​
    useEffect(() => {
        const getIndividualProduct = async () => {
            const results = await medusaClient.products.retrieve(id);
            setProduct(results.product)
        }
​
        const getRegions = async () => {
            const results = await medusaClient.regions.list()
            setRegionId(results.regions[1].id)
        }
​
        getIndividualProduct()
        getRegions()
    }, []);
​
    const handleAddToCart = async () => {
        const cartId = localStorage.getItem('cartId');
​
        if (cartId) {
            //A cart was previously created so use the cartId found in localStorage
            addProduct(cartId, product)
        } else {
            //Create a cart if there isn't a pre-existing one
            const { cart } = await medusaClient.carts.create({ region_id: regionId })
            localStorage.setItem('cartId', cart.id);
​
            //Use the newly generated cart's ID
            addProduct(cart.id, product)
        }
    }
​
    return (
        <main className="mt-5">
            <Container>
                <Row>
                    <Col>
                        <img width="500px"
                            alt={product.title}
                            src={product.thumbnail} />
                    </Col>
                    <Col className="d-flex justify-content-center flex-column">
                        <h1>{product.title}</h1>
                        <p className="mb-4 text-success fw-bold">{getFormattedPrice(product.variants?.[0]?.prices?.[1]?.amount)}</p>
                        <p className="mb-5">{product.description}</p>
                        <Button variant="success" size="lg" onClick={handleAddToCart}>Add to Cart</Button>
                    </Col>
                </Row>
            </Container>
        </main>
    )
}

The code above adds the following functionality:

1. addProduct async function that uses the medusaClient utility to add a product to a cart.

2. getRegions function to grab a list of all the regions and set it to the US region found at the first index in the regions array. This ID then gets stored in the regionId state variable.

3. handleAddToCart function that is invoked when the “Add to Cart” button is clicked.

For simplicities sake, the code adds the first variant of a product. This means that a product can only be added to a cart once. In addition, a page reload is initiated in order to pick up the new cart count. This decision was intentional to keep the project simple but know that a real-world app could allow the ability to select different variants and add more advanced capabilities.

Test Add to Cart Functionality

To test out the functionality, click on the “View Details” link for any item to navigate to the product details page. From there, click on the “Add to Cart” button which will initiate a page refresh and update the cart’s badge count in the navigation header.

Conclusion

Throughout this tutorial, you learned about the Medusa Admin, Medusa Server, and how you can use the Medusa JS Client to create a sample ecommerce store with React. A lot of material was covered, however, there is still so much more that you can generate with Medusa such as:

• Expanding upon the “add to cart” functionality and building a shopping cart screen that retrieves a cart and displays a list of all the products that have been added to it.

• Payment integrations with Stripe.

• Implementing a Checkout Flow

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.

When I read the Dev Retro announcement in Hashnode's Townhall and how it was an opportunity to "reflect on your journey as a developer and share your experiences from the past year", I was super excited because I had been waffling on writing a reflection blog post and this was the catalyst I needed.

With the hustle and bustle of life, I think it's very important to pause and take the time to look back to appreciate all that was accomplished and experienced throughout the year. Although this post will be a personal recollection of thoughts and milestones, I hope this article will encourage you to take the time to write a retrospective of your own 🙂

Without further ado, here goes the 2022 rendition of my developer retrospective!

Guest Writing ✍🏽

Hands down, guest writing has been my biggest objective this year. Since I had a solid year of publishing regularly under my belt, I figured it was time to try and venture out into writing for some of the top tech publications.

It all started with my first-ever guest post with Smashing Magazine last December where I wrote about a niche topic: "Creating A Custom Range Input That Looks Consistent Across All Browsers". From there, I went on to write for DigitalOcean in May on "How To Test a React App with Jest and React Testing Library". Last but not least, I wrote an article for LogRocket in October on "Building a design system with Radix".

In addition to writing for three different tech publications, I've also written guides for a form backend service called Basin, and will soon have a tutorial published for a popular open-source project. That makes the total tally for guest writing to 5 companies. Out of those 5, I only applied for writing opportunities with Smashing Magazine and DigitalOcean. The remainder of the opportunities all presented themselves due to my prior writing history.

Experiencing these different writing opportunities has taught me that the process can be pretty extensive because you have to adhere to the tone and style guide of the individual company. In addition, you typically need to have an accompanying project that shows how to use a certain aspect of technology so the planning and creating process of all that takes quite a bit of time. Except for the guides I wrote for Basin, I would say that every article I've written for a tech publication has taken a minimum of ~20 hours each 🤯

Overall, I'm extremely appreciative of these guest writing opportunities as I've learned a lot throughout the process and have gained confidence in myself as a technical writer.

Personal Blog 📜

Because my primary focus was on guest writing, the frequency at which I was posting on my blog took a bit of a dip. Even though I would've liked to have posted more personal content, I'm ok with this statistic because it was an opportunity cost and I think it was worth it. Although the total quantity of articles published may have been less than I originally wanted, the quality of the content within the articles I did publish was high so I'm pleased with the outcome.

Stats and Analytics 📊

• Total # of Articles Written: 12

• Highest Viewed Article: 7 Free Terminal Tools and Emulators to Boost Development Productivity

  • ~7.5K views at the time of writing this retro 😲

• Article with the most engagement: The Book that Encouraged me to Start my Blog

  • Total # of Comments: 7

  • Total # of Reactions: 151

• Total # of Pageviews in 2022: ~15,000

Hashnode's "Advanced Analytics" view for this year

Work Life 🏦

July marked my first full year working as a Senior Software Engineer and I can finally say that I feel (fairly) comfortable with that title. Imposter Syndrome is something that I struggle with and when I initially got hired as a Senior Engineer I was worried I wouldn't be able to live up to the job requirements. Thankfully, I work for a company that cultivates an encouraging and supportive culture so it has been a great place to work as I have been getting my bearings in my new senior role.

Lessons Learned 👩🏽‍🎓

I find I'm happiest in my job when I'm continually learning new things and being intellectually challenged. Based on that here are some of the top things I learned throughout the year:

• I learned that my accessibility fundamentals are pretty solid. I worked on a ticket and inadvertently identified areas where we could add some accessibility improvements to our app's workflow.

• I found a use case for the useReducer hook when dealing with more complex state management while implementing an autocomplete search feature.

• Scheduled meetings with a Principal Engineer on the team to learn more about authentication and authorization. Since I work primarily as a Front-End Engineer, these meetings have sort of turned into a mentorship as I look to gain a larger breadth of knowledge about general backend architecture topics.

• Currently, working on building a component library for a reports service and I've learned a plethora of things including but not limited to:

  • Storybook

  • Setting up a project with ESLint, Prettier, Stylelint, and lint-staged

  • Bundling a component library into a consumable package

• Compound Components in React. This is a really cool pattern as it allows for more rendering flexibility and extensibility. It's definitely a pattern I might want to try and leverage more in the future.

Side Projects 👩🏽‍💻

The main side project I completed this year was my RoadTrip.FM 🚗 📻 project for the Netlify x Hashnode Hackathon. Building this app was a lot of fun as it's something I've wanted to build for years. RoadTrip.FM was the first full-stack app I'd ever built and I learned a lot along the way. Ironically, I've found that the hackathon timelines apply a healthy pressure that gives me the extra boost to finally bring my project ideas to fruition.

Although not an official side project, I also participated in Hacktoberfest for the second year in a row so that was nice to be able to contribute to the open-source community.

All my other side projects were demos that I used within my guest writing posts. This included Doggy Directory which is a sample app for my DigitalOcean article on React Testing Library and my sample Radix component library that I built for my LogRocket article.

Oh! I'd be remiss if I didn't mention that building LEGO has been a new "side project" for me. I know this doesn't technically meet the criteria for a development side project but it's close enough and I needed some excuse to integrate my recent LEGO obsession hobby 😆

LEGO Sonic the Hedgehog build

Aspirations for 2023 🆕

As I prepare to wrap up 2022, I've already begun thinking about what I want to accomplish in 2023. I think it's important to have a healthy drive for what you want to attain in the future. I don't expect to complete all these items, but here's a list of some goals I would like to achieve next year:

• Create a course 👩🏽‍🏫 - Component Libraries and Accessibility are two things I'm very passionate about so it would be exciting to try and create a course that combined both topics. I've already pitched an outline to a company on this concept so stay tuned for more information 👀.

• Start a newsletter 🗞️ - Technically, I already have a default newsletter setup within Hashnode, however, I think I'm ready for something more custom and tailored. I'm not sure what platform I will go with but my plans are to research options like Revue, ConvertKit, and Substack.

• Start a podcast 🎙️ - My sister and I have been talking about starting a podcast for a while now so maybe next year will finally be when we start one. My sister isn't technical so the topics we cover wouldn't be developer related but we're still ironing out the details on what the exact subject would be.

  • My ultimate goal is to create a technical podcast, however, I would need a co-host so until I find that person, this particular podcast will have to wait until a later time.

• Develop more side projects - I have a large backlog of projects that I want to build but haven't had the time to work on. I hope that I can bring some of these ideas to fruition while still maintaining a regular writing schedule.

El Fin 👋🏽

Thanks for taking the time to read about my journey in 2022. It was a fun experience to go back down memory lane and reflect on all the things I learned and accomplished throughout the year.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

Turns out that testing a local version of a package is a fairly straightforward process with yarn link (There is also an npm link equivalent). In this blog post, you will learn what npm/yarn link is, how it works, and how you can incorporate it into your own projects.

Note: This tutorial assumes that you already have a bundled version of your code using a module bundler like rollup.js or Webpack.

What is yarn link? 🔗

yarn link is a CLI command that allows developers to link a package in one project to other separate projects. This is particularly useful when you are developing a package in one repository but want to test a local version of that package in another application before publishing it. When a package is linked, you are able to test and build iteratively as revisions are automatically synced whenever a new bundle is generated.

Package linking is a two-step process:

Step 1

• Run yarn link in the root directory of the package that you want to link. This creates a global symbolic link (symlink) for the package and provides a reference point for the consuming project.

Step 2

• Run yarn link <package-name> in the root directory of the consuming project. This will create a symlink in the consuming projects node_modules folder that points to the globally-installed <package-name>.

Package Linking Example 📦

Assume you have two projects: my-cool-library and consuming-webapp.

my-cool-library provides a helper function, myCoolFunction, that you want to import into the consuming-webapp project.

1. In the root directory of my-cool-library run the following command to create the global symlink:

   yarn link
   

2. In the root directory of consuming-webapp run the following command to link to my-cool-library locally:

   yarn link my-cool-library
   

   • Now if you were to navigate to the node_modules folder in consuming-webapp, you would see the symlink point to the local version of my-cool-library.

3. With the linking process successfully completed, you could now import the myCoolFunction helper function in consuming-webapp like so:

   import { myCoolFunction } from "my-cool-library";
   

Note: By default, package dependencies linked in this way are not saved to package.json. This is based on the assumption that the intention is to have a link stand in for a regular non-link dependency. This means that your IDE may show an error when attempting to import from the package, however, you can ignore this and your code should render just fine.

Unlinking a Package 🔓

yarn unlink is an aptly named command that handles removing (unlinking) the symlinked package. Similar to the linking method, unlinking a package is also a two-step process that is essentially a reversal of the linking workflow:

Step 1:

• Run yarn unlink in the root directory of the package that you want to dissociate.

Step 2

• Run yarn unlink <package-name> in the root directory of the consuming project.

Based on the example in the previous section, that would mean running yarn unlink in the my-cool-library project and yarn unlink my-cool-library in the consuming-webapp project.

Both steps combined remove the global symlink for the package and delete the reference point from the consuming project, therefore completing the unlinking process. Unlinking is important to remember as a cleanup mechanism when you're done performing local testing.

El Fin 👋🏽

Hopefully, you learned something new about how you can leverage package linking to test packages locally.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

Resources

• npm link

• yarn link and yarn unlink

• Brad Garropy - 🔗 developing npm packages locally

• LevelUp Tuts - How to Use a Local Javascript Package in a Real Project

My inaugural Hacktoberfest was in 2021, and it was a lot of fun to participate in the event. I liked the idea of jumping into a random codebase and seeing how quickly I could get up to speed and contribute a successful pull request (PR). I've found that participating is a great way to practice and sharpen your development skills. Since this is my second year participating, I figured I would document the process for the past two events and share some of the lessons I learned and cool projects I worked on along the way.

Hacktoberfest 2022

With a little more experience under my belt from my first Hacktoberfest, I entered this year's event excited to contribute to some new projects. Here is a depiction of October's events.

Awesome Uses 🕶

Wes Bos hosts a popular site, uses.tech, that contains a massive list of developers' "uses" pages. A "uses" page is a place to share information showcasing developer setups, equipment, software, and configurations. I have a dedicated article that covers the items contained on my "uses" page. My contribution was straightforward as I added a reference to my page on the uses.tech site and README.

It's cool to have a fun repo like this that provides a site where developers can share their developer setup with others. I highly recommend adding it to this list if you have a "uses" page of your own.

Card generated on the uses.tech site

• 🛠️ Technologies Used: JavaScript
• 📦 GitHub Repo: https://github.com/wesbos/awesome-uses
• ⬇️ Pull Request: https://github.com/wesbos/awesome-uses/pull/1448

JSON Hero 🦸‍♂️

JSON Hero is a JSON explorer for the web that makes reading and understanding JSON files easier. It achieves this by providing a clean interface packed with extra features like automatically inferring the contents of strings to provide previews and the ability to view JSON in multiple views (Column View, Tree View, and more).

While perusing the repo, I came across this issue asking to add a skeleton loader to the preview section to prevent content jumping. Skeleton loaders are a popular loading strategy used across a lot of sites and, having implemented them on my own website I felt confident in my ability to resolve this issue. After getting some clarification about the placement of the loader, I was off to the races. Conveniently the JSON Hero codebase felt very familiar since it was built with Remix and used Tailwind CSS, the same technologies I used in my roadtrip-fm project.

Tailwind conveniently has an animate-pulse class that simulates the look and feel of a skeleton loader, so I leveraged that and, without too much effort, I was able to add a successful loader and got my second PR merged in!

Light Mode	Dark Mode

Skeleton loader screenshots in light and dark mode

• 🛠️ Technologies used: 💿 Remix, React, Tailwind CSS
• 📦 GitHub Repo: https://github.com/apihero-run/jsonhero-web
• ⬇️ Pull Request: https://github.com/apihero-run/jsonhero-web/pull/119

Fig 🍐

Fig is an awesome tool that provides autocomplete for the terminal. I've written about Fig before and it's easily one of my favorite tools in my 🧰 developer toolbox.

One of the interesting parts about Fig's architecture is that they've set things up so that the autocompletion commands or "specs" can be added from the open-source community. There is extensive documentation on this process, and I figured it would be a good opportunity to give back by contributing two new specs since I use this tool all the time.

The first spec I created was for the seq command. The second spec was for the mdls command. These tasks got me more familiar with using the man pages to identify specific information about a CLI command. It was also interesting to see how the declarative syntax of Figs completion spec worked.

It took me a little while to get familiar with the completion spec syntax; however, by the second pull request, I was able to debug issues more quickly. Thanks to this work, I have a better understanding of the syntax which will help me with future contributions.

• 🛠️ Technologies Used: JavaScript
• 📦 GitHub Repo: https://github.com/withfig/autocomplete

Pull Request #1:

Pull Request #2:

Hacktoberfest 2021

Since I didn't write about my experience in my inaugural Hacktoberfest, I wanted to include some blurbs about last year's contributions since I'm hoping to make this an annual tradition.

Appsmith 🔒

Appsmith is an open-source, low-code platform to build, ship, and maintain internal tools. On a side note, I've interacted with a few members of the team, and they were all super nice and friendly, so that's a nice plus 🙂

For last year's Hacktoberfest, I contributed two different PRs. The first PR was a simple one around adding a tooltip to display when hovering over the "Scroll Content" label. The second PR addressed a shifting layout display issue that would occur when clicking through the sorting options within the Table header. It also addressed adding a low-contrast icon color for better accessibility.

• 🛠️ Technologies Used: React and 💅🏽styled-components

• 📦 GitHub Repo: https://github.com/appsmithorg/appsmith

Pull Request #1:

Pull Request #2:

Datenanfragen 🇩🇪

Datenanfragen is a non-profit association from Germany whose mission is to help you exercise your right to privacy. I also contributed two separate PRs to this project. The first PR I addressed was around alphabetically sorting the countries and categories on the "Suggest" page. This work involved using my knowledge of the basics of sorting in JavaScript.

The second PR involved modifying the footnotes on the Hugo site (example here) to make them more accessible and user-friendly. Honestly, out of all the Hacktoberfest issues I have worked on so far, this has been my favorite because it involved using my knowledge of accessibility and provided a fun challenge for my brain. The final solution for this problem took some digging and research into Hugo and Preact. Overall it was fun to solve the problem and come up with a viable solution! There was also constructive communication within the PR, and it was a nice end to my last PR for Hacktoberfest 2021.

• 🛠️ Technologies Used: Hugo and Preact
• 📦 GitHub Repo: https://github.com/datenanfragen/website

Pull Request #1:

Pull Request #2:

El Fin 👋🏽

I hope this blog post encourages you to consider giving Hacktoberfest a try. The satisfaction you get from pouring back into the open-source community that has given developers so much is gratifying. If you have been a part of Hacktoberfest in the past, feel free to leave a comment and share some of your experiences 🙂

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!