ryanharris.dev

Takeaways from 'Shape Up'

August 17, 2020

Recently, I've been having discussions with my team about our product process. They have often centered on how to move quickly while shipping useful, well thought out and thoroughly tested features. At the suggestion of a few co-workers, I recently read Shape Up by Ryan…

  • Tags:
  • #engineering
  • #product
  • #design
5 mins.

Planning my digital garden

August 11, 2020

Preface This site has slowly been evolving over the past few years. First, it was primarily used for job searching. Then, it became a repository for my "very polished" articles, which I published with sporadic frequency. Now, I am in need of something that goes beyond a…

  • Tags:
  • #content
  • #community
2 mins.

Hooks Revisited: useDebugValue

August 10, 2020

#TIL I'll be honest: before working on this series, I had never heard of useDebugValue (or seen it in a codebase). Unlike the hooks we've covered thus far, useDebugValue is not intended to add functionality to your applications. Instead, as the name suggests, it is used…

  • Tags:
  • #react
  • #hooks
  • #javascript
2 mins.

Notes on 'Mastering emacs'

August 09, 2020

I just started going through 'Mastering emacs' by Mickey Petersen with a new Egghead book club cohort organized by Ian Jones . 'Why emacs?' you may ask. Good question. I've been happily using VS Code for a few years and enjoy it. My interest in emacs is primarily due to…

  • Tags:
  • #emacs
  • #community
3 mins.

Add voice chat to your Twitch stream

August 08, 2020

While I usually stream on Twitch , I have recently been doing streams in Reactadelphia's Discord server . The idea of interacting with viewers via voice chat was quite appealing; however, the downside is that it lacks the visibility of Twitch -- folks not in your Discord…

  • Tags:
  • #twitch
  • #discord
  • #community
1 min.

Hooks Revisited: useReducer

May 18, 2020

An update on state Throughout this series, all of the code snippets and sandboxes we've created have used useState to manage our component data. However, React offers us an additional hook to use for storing data: useReducer . While useState allows us to store and set a…

  • Tags:
  • #react
  • #hooks
  • #javascript
3 mins.

Hooks Revisited: useCallback

April 21, 2020

Before you proceed... If you haven't read my useMemo article yet, I highly suggest you go back and do so now! In that article, we covered important concepts like memoization , which we will continue discussing below. Since useMemo and useCallback are similar (with…

  • Tags:
  • #react
  • #hooks
  • #javascript
1 min.

Hooks Revisited: useMemo

March 24, 2020

Up until this point in the series , I have been generally familiar with the hooks we've covered and have used them before at work. It wasn't until I recently started working in a new codebase that I came across useMemo . Not understanding how it worked or how to debug it…

  • Tags:
  • #react
  • #hooks
  • #javascript
3 mins.

Hooks Revisited: useContext

March 16, 2020

Putting things in Context Context is one of my favorite React APIs and has a wide variety of uses cases. I've previously written about redoing a search UI using ref s and Context , as well as how to use the useRef hook . This time around, we're going to cover the…

  • Tags:
  • #react
  • #hooks
  • #javascript
2 mins.

Hooks Revisited: useRef

March 13, 2020

What are refs? If you read my last article , about the differences between useEffect and useLayoutEffect , you may remember seeing some code snippets that looked like this: In these examples, we're directly accessing the DOM in order to select and manipulate an element…

  • Tags:
  • #react
  • #hooks
  • #javascript
4 mins.

Hooks Revisited: useLayoutEffect

March 02, 2020

Last time, we learned about the useEffect hook , how it works and when to use it. If you have not read that article yet, I strongly suggest you go back and do so before proceeding any further . Much of what we will discuss below will be about the similarities and…

  • Tags:
  • #react
  • #hooks
  • #javascript
2 mins.

Hooks Revisited: useEffect

February 26, 2020

In my last article , we learned about one of the most commonly used hooks, useState . This time around, we are going to look at another commonly used hook: useEffect : By using this Hook, you tell React that your component needs to do something after render. React will…

  • Tags:
  • #react
  • #hooks
  • #javascript
4 mins.

Hooks Revisited: useState

February 17, 2020

One of the first hooks you'll probably encounter is useState , which replaces the setState() function used to update state in class components. The big difference here, however, is that useState allows function components to have multiple state values as opposed to one…

  • Tags:
  • #react
  • #hooks
  • #javascript
1 min.

Hooks Revisited

February 16, 2020

Hooks are functions that let you “hook into” React state and lifecycle features from function components [React docs] Introduced in React v16.8 , the hooks API represents a change in how developers compose their components. Intended to compartmentalize blocks of…

  • Tags:
  • #react
  • #hooks
  • #javascript
1 min.

How to configure ESLint and Prettier to work together

February 09, 2020

Let's face it. Development is hard. While developers have a multitude of concerns when building software, some of them simply aren't worth worrying about. In my mind, the enforcement of coding style and convention fall squarely within this category. As Ryan Warner informed…

  • Tags:
  • #eslint
  • #prettier
  • #javascript
2 mins.

Managing SSH keys and identities for GitHub

January 19, 2020

During the onboarding process for my new job at Fauna , I was tasked with setting up my local development environment. However, since Fauna devs use work-specific GitHub accounts, a new challenge presented itself during the process: managing SSH keys and identities for…

  • Tags:
  • #github
  • #git
  • #ssh
  • #security
3 mins.

How to setup your OBS scenes

December 11, 2019

What are Scenes? Like I’ve said in the past , I like to think of OBS as a TV switcher because it allows you control Scenes as if they’re camera shots. But what exactly is a Scene? Scenes are OBS canvases comprised of one (or more) visual elements, all of which can be resized…

  • Tags:
  • #obs
  • #mixer
  • #live stream
  • #video
  • #scenes
4 mins.

Starting to livestream with OBS

November 20, 2019

I just started live streaming. I’ve done it exactly twice. I wasn’t sure what to expect before I started and, at times, didn’t even know where to start. But now that I’m up and running on Mixer , I have found it to be an awesome experience. It gives me a great excuse to…

  • Tags:
  • #obs
  • #mixer
  • #live stream
  • #audio
  • #video
3 mins.

Redoing search UI with React Context and refs

October 27, 2019

Recently, the product team at my company discovered the majority of our users were not utilizing filters when using our search interface. After looking at our analytics, it became apparent users weren’t engaging with filters because they didn’t know they existed. To fix this…

  • Tags:
  • #react
  • #context
  • #refs
  • #search
4 mins.

5 Vue tips for React developers

June 27, 2019

For frontend developers, JavaScript frameworks have become increasingly important due to how fundamentally they change the way we approach building our applications. While not everyone uses them professional, or at all, the development community sure loves to talk about them…

  • Tags:
  • #react
  • #vue
  • #javascript
6 mins.

3 Steps to Getting Started with Open Source

March 09, 2019

Before becoming a developer, I spent a decade working in film and television, so when I first started transitioning into tech, I spent a lot of time networking, going to Meetups and having coffee with other developers. I was primarily interested in finding out what I needed…

  • Tags:
  • #open source
  • #getting started
5 mins.

What the heck is JSX?

December 08, 2018

As developers, we use a variety of tools and open source packages to make our jobs easier. Some of them are so widely used throughout the community that they seem native to JavaScript. Though they're not, they can fundamentally change how you write code on a daily basis…

  • Tags:
  • #jsx
  • #react
  • #javascript
3 mins.