Introduction 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 rememb ..read more

Introduction 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 rem ..read more

Headless components are a trend that I've seen emerge over the past couple of years. With veteran libraries like Downshift and ReachUI and newer libraries like Radix and Headless UI, it seems to be a trend that is here to stay. Throughout this article, I will provide a more thorough definition of what headless components are, why they are beneficial, and how they can be incorporated into your component libraries. 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 compone ..read more

Introduction 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 ..read more

Currently, I'm developing a component library at work that will be consumed by our company's internal applications. Part of this process requires bundling the library and making sure that it can be installed in other applications. Before publishing the package, however, I wanted to test importing the components from a local version of the bundled code. 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 ..read more

Hacktoberfest is an annual event that has been hosted by DigitalOcean for almost a decade. The purpose of Hacktoberfest is to encourage people to contribute to open-source projects throughout the month of October. Much of the technology and applications used in the world rely heavily on the hard work done throughout open-source projects. Hacktoberfest is a way to give back to the open-source community that has given so much to us. 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 quickl ..read more

Radix is an open-source library that provides components for building accessible, high-quality React web applications and design systems. Radix is part of a new wave of headless components being created in the frontend space, and this pattern has been gaining a lot of traction lately. This guide aims to provide you with a deeper understanding of Radix and how it can be used to build out design systems and component libraries. The latter half of this article provides an in-depth tutorial on building a sample component library with Radix Primitives. ? Radix overview Radix is composed of a suite ..read more

A "uses" page is a place to share information showcasing developer setups, equipment, software, and configurations. After checking out some cool setups on Wes Bos' uses.tech site, I was inspired to create a "uses" page of my own and provide a glimpse into my developer toolbox. This blog post will be a snapshot in time of what I use. To view a continually updated list, reference my official "uses" page at https://alyssaholland.com/uses. Note: A small subset of the links provided are affiliate links. IDE's and Editors ??? Webstorm - My primary editor for work or more complex projects VSCode B ..read more

Retrieving data from an API is an extremely common task for a developer. Because this is such a frequent operation to complete, it's beneficial to abstract the internals and boilerplate of this functionality into a reusable hook. In this tutorial, you'll learn how to create a hook, useFetch, that can help with grabbing data using the native Fetch API. For more information on what custom hooks are, check out my first article on creating a useMediaQuery hook or read the official React docs. Fetch API Overview The Fetch API is a native web API that provides an interface for asynchronously fetchin ..read more

August will mark two years since I created my Hashnode account and started my blog. In reality, I wanted to start my blog months sooner but refrained due to fear and concerns about being judged on my writing. When I came across ?Show Your Work! by Austin Kleon, it was the catalyst I needed to give me the confidence to take the leap and embark on my blogging journey. I am so glad I found this book and didn't let my fear hold me back since blogging has been such a rewarding experience. Because this book was so instrumental in helping me start my blogging journey, I wanted to share the notes I to ..read more