DEV Community: Brett Thurston

How I built my AI powered book insights app

Brett Thurston — Tue, 17 Oct 2023 18:35:27 +0000

Brief introductions

Hi, my name is Brett Thurston. I'm a developer and maker who enjoys working in the front-end spectrum of development and design. I've made an app and wanted to recap some highlights and lessons learned from my journey so far. I'd like to post more frequent updates on working on Book Scout.

I hope this will interest you, the reader, and encourage you to share your journey in creating something, too. This isn't meant to be a tutorial, but more talking about the process and knowledge gained.

What did I just buy?

My 15-year-old daughter and I were at a bookstore recently. She picked up a book she remembered her friend was reading and recommended to her. I took a look at the cover and read the blurb on the back of the book. After a passing moment I said, sure we'll get it. I purchased the book then and gifted it to her. On the way home my wife and I had a sneaking suspicion that the book probably deserved a little more investigation. After 30-45 minutes of researching Amazon reviews, Goodreads, and Common Sense Media it was decided that the book purchase was a mistake. The book was way, way too spicy (and dark) for what we believed was acceptable for her age. It pained me to return the book, but after explaining to her she agreed, that it was not the book for her, anyhow.

At that moment I thought about a few things:

Why can't books come with some movie-like-rating system? Slap a sticker on there that says PG-13 and we're good to go. Rated R? May have to look into why it's rated R.
Why can't consumers have easier means to figure out if a book is for them or not? I'm an avid reader myself and have spent countless hours over the years on Goodreads, Amazon reviews, and Reddit trying to decipher if a book will speak to me in ways I appreciate. For instance, I'm a big Fantasy fan, but Grim Dark is not my cup of tea. Give me the cheesy 90's fantasy books like Dragonlance any day of the week over Game of Thrones.
What if I could have an infinite source that gives me just pertinent info on themes in books? I'd like to know what positive/interesting themes are in books, as well as questionable themes (like trauma, dark content, etc...). Furthermore, it'd be nice to know if a book hangs its hat on using common tropes that I'd like to avoid. Wouldn't it be nice to know ahead of time if a book has something in it that puts it on the Did Not Finish List for me? Especially before I get halfway through it?

Light bulb moment

That is where I had the idea for Book Scout. I wanted to build this tool that could answer these questions for me and my family. If others benefit from it, then fantastic! If not, at least I have a project to work on and find some fulfillment in.

And so now you're reading about this moment in my life. I think it may help us both to learn from one another how this app was built, what the process was, and the challenges I found along the way. I suppose you could call this a built-in-public type of post, but the app is already built and available to take for a spin. You can download it now at the Apple App Store. I'd be interested to hear your feedback on the app. It's not perfect, but it's usable. It's a start.

So if you're interested in reading about process and mistakes made and victories end, read on friend!

Have you built anything that solved a problem for you, your family or friends? Let me know in the comments below, please. :D

First things first: can the core feature work?

Before I did a stitch of coding or a lick of design I knew I had to find out if I could get AI to do what I needed it to do: give me positive and negative insights on a book. I spent a few nights after work crafting up a prompt with ChatGPT. I checked out Bard, but after comparing the results, I was happier with the ChatGPT experience. Not to mention, I couldn't get access to the Bard API.

After getting my prompt, I had a hook. It worked. I was pretty impressed with what ChatGPT was able to give me in the data returned. This hook would be the thing that would make a user come back for more.

As an avid reader, I threw a lot of books that I've read to see how reliable the insights given were. And as it turned out it was very reliable. The themes it highlighted were found in the books that I read. Wow, so this could work.

Proof of concept

Pardon my brief sidebar into React Native Expo: I've built React Native apps before, but never with Expo. Expo has come a long way since I first started working with React Native, which was back in early 2019. After reading up on Expo I found that it still handles a lot of the binary native stuff related to mobile app development. And ejecting out of Expo was a big topic back in 2019/2020 but now you don't have to eject out of it since it has the prebuild feature. This essentially builds the rest of the project out as if it were a full-on React Native project. Expo isn't without it's limitations, but I liked that I could focus more on the app and less on the scaffolding of it. So far it hasn't presented a lot of limitations for this project. Expo has a ton of libraries available to help tap into the native features of devices.

Projects that rely heavily on native device features and work with the native code will have a harder time with Expo.

So I spun up a React Native Expo project. I started making API calls to ChatGPT to see if I could give it a book title and author. And I got the insights that I wanted. Everything then started flowing into prototyping the UI for an app idea. I chose React Native Paper since it's a React Native component library powered by the MUI component library (a favorite of mine). Now I could begin building a core version of Book Scout.

API

I wanted to display metadata for the book you would search for. I started using both Google Books API and a web scraping method I found using Cheerio and Axios on Amazon product pages. You can read more about web scraping here at FreeCodeCamp.

I gotta say, hats off to those who web scrape regularly because it sometimes can feel like a needle in a haystack finding the right class selector for DOM elements - PLUS making it consistently selected. I started drafting in my React Native app this page of book details and insights. It was a combination of ChatGPT, web scraper and Google Books API call. It was messy. The web scraping factor produced very inconsistent results.

After a few days of trying to make this setup work, I decided to focus on Google Books API and ChatGPT API calls. Amazon offered cool data like related books, popular highlights (quotes people often highlight in their Kindle app), author bios, recommended books, etc... Looking back it was a good call to start small and have a sturdy foundation. An app should do the thing it advertises well every time the user uses it. If not, trust erodes and usage is hurt.

Taking advantage of mobile device features

After some time crafting a page to capture insights and metadata about a book I began to wonder, what about this app makes it worthy to be an app? Naturally being available on a mobile device is one advantage. But that was all I had at the time. That led me to think well, this could just be a website. And that's true, it could be. But thought back to that day with my daughter in the bookstore. What if I could use my device to capture the book I wanted insights about quickly? Of course, we'll use barcode scanning in the app. Fortunately, Expo had a library just for that.

Now I was able to make a modal in my app, scan a barcode and use the ISBN to search Google Books API for the metadata. Sweet! I was scanning newly published books, but then I realized older books I was getting two types of errors from Google Books API. The first would be an error where the ISBN given returned a different book. The second error was nothing was returned from the API to Google Books, period.

After some research, I realized the ISBN and the UPC don't always match up. A lot of newly released books seem to match the two, but in older books, especially, you'll find the ISBN and the UPC are different. So where I thought I was sending Google Books API my ISBN, I was sending my UPC. Oof.

So now, I have to capture this use case in my bar code scanning feature. Otherwise, users won't have a seamless experience. So I thought, OK, we could show a modal that explains the ISBN didn't validate (meaning it was a UPC scanned). This modal could give the user the option to input the ISBN themselves or redirect the user to the Search feature. That worked well I thought and it's in the app today.

It was a good exercise in moving beyond happy paths in app design. Because what's true for you won't always be true for every user and use case. My goal for v1 of Book Scout was to make sure there was at least a consistent experience despite all the use cases of searching or scanning books. I'm positive I have more use cases to capture, but they, to me, feel like very fringe use cases that won't impact the average user.

That's why it's good to ship and iterate. Let your users help surface problems to you so you can address and fix them. Also, you won't sink a ton of time and resources into problems that aren't problems to your users.

Cache money, baby

Speaking of moving beyond the happy path, I was also thinking about scaling this app at the foundations. That's why I chose to use Firebase to cache data created by API calls to return to users instead of making API calls to ChatGPT or Google Books API on every request. Caching data not only returns data faster for your users but can save on the cost of operating the project.

So using Axios, I made an instance for each type of vendor I was using with initial headers set up. Then I created methods that checked Firebase for data before actually making the call to the vendor. This proved to be fruitful to begin with.

The only gotcha I've seen is if you change the shape of your data, you'll need to wipe your old cache or adjust it to fit the shape you land on. It does not have a major impact on users if you wipe your database cache data, but could be expensive at scale.

Do you have any advice on caching data or stories to share with your app? Please let me know in the comments below!

Bookshelves

So to review, I've got an app that can search or scan for books and render book insights and metadata. This was an acceptable POC, in my opinion. I wanted to set my focus on delivering version 1. Something I can ask you to look at and you feel this is a whole product and not just a POC. I needed a minimal viable product.

The app felt fleeting though. Like you scanned something, but that's it. What if users want to keep track of what they've scanned/searched for or even categorize those books into traditional reading buckets like 'Reading' and 'DNF' (Did Not Finish)?

Throughout this project, I wanted to make sure I was studying book apps. I wanted to make sure I wasn't reinventing the wheel or solving problems that I don't need do if I just shifted left a little on approach. GoodReads lets you shelve books. Why couldn't Book Scout users do the same?

So I created a history of books viewed and a book shelving system. The shelving system has 4 categories:

Reading
Completed
Want to Read
Did Not Finish

In the future, I'm going to allow users to share their shelves with others, back them up into a cloud account of theirs and create custom shelves.

Customer reviews for books

Another feature I wanted to add was to grab the Amazon customer reviews and display them in the app. And after I did it, it didn't feel special or unique enough of a feature. Sure, it could help inform a user, in addition to the insights, what others were saying about the book, but what I wanted was to create keywords to track in the customer reviews. If the customer review had a keyword in it that I was tracking, highlight it for me.

For instance, if I set the following keywords:

violence
gore
murder

Then any customer reviews that came in for a book that had those words in them would be easily identifiable in the app. The app itself doesn't care what your sentiment is around those keywords. I think this is a nice service for those who have experienced some sort of trauma in their life and may not want to read about it in their books.

Content moderation

One thing that popped up in the beta phase was user-generated content. As a solo founder and developer I don't want to be responsible for moderating reviews my users create. At least not yet. I'm happy to pass that off to Amazon and their team to moderate the customer reviews.

I'm keeping an eye on comments though and making sure I'm not seeing anything that would be unfit for a public app.

Are you a solo developer with an app that has user-generated content? If so, how do you manage it? Let me know in the comments below.

Theme and Presentation

A lot of the visual notes were created with MidJourney. I never really got into generative AI, but working with MidJourney has been fun. I learned how to create prompts and tweak images to use in the app. I wanted to create the ambiance of discovering something new for the first time. To me, the works of Studio Ghibli and fantasy literature evoke that feeling. And that's what this help, I hope, can help be a part of with the experience the users are looking for: the feeling of finding something new and wanted.

Beta phase

So I had a working app that I was now ready to get feedback from someone. I focused on the iOS platform first since a lot of people I know have it. Ironically, I'm an Android user, but I own and prefer my Macbook. There are probably, literally 10's of us out there.

So I set up my App Store Connect with Apple. You can read more on what that is here. Then I used 'eas build' from Expo to bundle my app for me. Then I used Transporter to send the bundled file (.ipa) to App Store Connect. After that, I made a beta group and invited a lot of my close friends and family to test the app out on their iPhones. I got some good feedback from that and added much-needed polish like loading states and further optimizations to API calls.

Eventually, I got to the point where a strong version 1 was there. After 2 months of lots of late nights, I was ready to submit to Apple for approval.

And I got denied on my first submission, haha.

What happened was there was a button on the book page that found the book on Amazon and linked it directly with a tag in the URL related to my Amazon Associates account. Apple isn't keen on allowing their users to purchase things outside of their in-app payment system. So I removed the direct link button to the book you were viewing button and it was approved! Huzzah!

Social marketing for this app

I'm not a strong social media user. I've tried in the past, but I think, like many people of my generation (elder millennials), I want to exist in a small, trusted niche community. I don't have a TikTok, I used to post on Twitter a lot, but it was Tech Twitter and just an attempt to learn, develop clout and build community. I deleted my Facebook about 5 years ago and haven't missed it. Facebook groups were nice though. I digress.

So how does a non-social media person tell others about their product? I'm in the middle of that process right now, but I plan to focus on Instagram right now. Bookstagram is a big thing there. I haven't had the opportunity to put the gas on posting content, but there are posts there. You can see the Book Scout Instagram here. Give me a follow if you'd like!

My plan for social content is a few things

Post sample insights from the app
Post things about the app
Post bookish things (have yet to do)
Post generative art about made-up short stories (filler content)

I don't have much to say about this part of the process other than consistency wins and it's hard to do that solo, lol. Eventually, I'll wise up and consider hiring someone to talk about Book Scout, but for now, I'm making due.

What I do feel though is nobody is going to know about your product if you don't talk about it. So I'm finding out what that looks like now. Future posts on this, there will be, I'm sure.

Summary

Thanks for reading this recap of my day 1 to day 62 with version 1 of Book Scout. I have a lot of interesting optimizations and features in the works for the app. I hope that it can be a service to those readers who are curious about what's in the next book they want to read.

The next phase is to start to understand a target audience to help the app grow. The target audience will not only help refine the app but also inform me about where to go and what to do next (aside from my itinerary).

I hope that sharing my journey so far can help inspire or encourage you to go and build that thing you've always wanted to build. The projects we make will not be loved by all and may not make it to superstardom, but there is a sense of accomplishment and fulfillment I get with working on Book Scout that I haven't found elsewhere as a serial entrepreneur.

And speaking of entrepreneurship, depending on the market fit of this app, I'll need to think of how to make this profitable beyond mobile ads. But that is a tomorrow problem that I'll address another day.

If I could do it differently, I would have focused on the core feature first and worked with the minimum amount of API vendors possible. There was a stretch there where I didn't know what I wanted to get out of the API calls. I think when you limit yourself, it's easier to prove a concept instead of juggling a lot of balls to get the vision established.

Thanks for reading again and I'm looking forward to posting more about the process in the future.

Prevent Acid Redux with Redux Toolkit

Brett Thurston — Tue, 14 Jun 2022 21:23:35 +0000

Want to learn how to manage a single source of truth for your application?

This post is going to help you get rid of the acid Redux associated with trying to use vanilla Redux.

Acid Redux, for those who have never suffered it, is when you attempt to learn vanilla Redux and you start drowning in indigestion, trying to figure out the complexity and boilerplate. Maybe that's not exactly how it happened to me, but I prefer Redux Toolkit (RTK).

What is Redux

Redux Toolkit is a tool that abstracts a lot of the heavy lifting associated with Redux.

Before that let's dig into what Redux is and who gave it to us.

Redux is an immutable way to manage state across an application and to keep track of what happened and when.

Arthur Dw Read GIF - Find & Share on GIPHY

Discover & share this Arthur GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

This means any change to your app's state has to be intentional. And with each response of each action, we can keep track of when and where these responses to action happened.

For the time travel part, check out the bottom of this article to see a video of Dan Ambramov himself talking about it. We'll be looking at how to use Redux via Redux Toolkit later in this article.

When people ask me what Redux is, this is my response - a one-way circuit for users to affect data within an application in a clean, predictable manner.

Who gave us Redux?

Dan Abramov and Andrew Clark brought Redux to the world in 2015 and since 2016 the primary maintainers are Mark Erikson and Tim Dorr.

Abramov was working on a talk about hot reloading for a conference at React Europe. He's quoted on how the thought of Redux came to be:

"I was trying to make a proof of concept of Flux where I could change the logic. And it would let me time travel. And it would let me reapply the future actions on the code change. I was thinking about Flux as a reduce operation over time... your stores, they accumulate state in response to these actions. I was thinking of taking this further. What if your Flux store was not a store but a reducer function?"" - Dan Abramov

In other words, Abramov was taking lessons learned with Flux, which is a way to build a single page application Facebook developed, and apply it to a data store. But going beyond that, instead of being a data store, how could it be a reducer function?

Before Redux we would have to prop drill which one layer deep is fine, but passing props to 5-6 layers deep to components is a chore.

Why state management?

It's no surprise for anyone new to React that state can slip away from you after each render. React components work in harmony with one another with previous and next state and unique keys to keep state in check with each other. React, or any other JS library is great about only rendering what needs to be rendered. What if you could hook your app up to a brain and that was the source of truth and knowledge for your app? State management libraries like Redux are great for that. Before state management libraries were a thing we would have to prop drill. Meaning going down many layers of components to pass information to a great, great, great-grandchild component. You can see how much of a chore that becomes, not to mention some other state can slip away in that scenario.

Reducers are the future

Some of you have seen the word reducer in programming or even used it with a Redux application. Conceptually speaking a reducer looks like this:

const reducer = (currentState, action) => newState;

A reducer takes in the current state and an action as two arguments. Then it gives you a brand new state based on those two things. In other words, we are dictating through the action ** how we are going to affect the **state. And then we are given a brand new state to use. This becomes our source of truth for other functions, actions, components for the rest entire app, etc...

For a deeper dive into reducers in JS, I recommend this stellar article by Reed Barger.

Mutate safely

Before RTK we would want to spread state and our modified value like this:

Reducing the old way

const subtractCountBy = (state, action) => {
    const newNumber = state.value - action.payload
    return {
        ..state,
        ... {
            value: newNumber
        }
    }
};

Thanks to RTK when we create a slice via createSlice, it handles merging our changes into state for us via useReducer. So we can mutate state safely without a care in the world like so:

Reduce RTK the new way

const subtractCountBy = (state, action) => {
    state.value -= action.payload;
};

Enough of the brief history lesson, now let's go over how we use Redux Toolkit to be the brain of our app.

Shall We Begin Star Trek Voyager GIF by Star Trek - Find & Share on GIPHY

Discover & share this Star Trek GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

Using Redux Toolkit

First, install redux toolkit into your application:

npm install @reduxjs/toolkit react-redux

Note I'll be copying and pasting from the official docs, but adding flavor where I can. Also, you can use TypeScript, but to present the process to a larger collective, I'll be using JS.

Then we need to create the store for our app to use. Name it store.js:

app/store.js

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

This creates a Redux store and allows to view what's in the store via the Chrome Redux Dev Tools extension.

Now we will connect our components to the Redux store by wrapping a provider around it with the store as a prop.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Now we are ready to create a slice. Not a pizza slice, but a slice of data that will be an ambassador to our data store. This slice will have its JS file dedicated to the initial state and the actions to do transactions with that slice.

I like to co-locate my slice with the main component that will be utilizing its actions. In this case, we are putting the counterSlice.js file into the counter folder, within the features folder.

features/counter/counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Let's break this file down a bit before moving forward:

features/counter/counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

We are importing the createSlice function provided by Redux Toolkit. According to the docs, this function accepts the following:

an initial state
an object of reducer functions
a "slice name"

Then it automatically generates action creators and action types that correspond to the reducers and state. In other words does a lot of the wiring up for us to make transactions with our store via the slice.

features/counter/counterSlice.js

const initialState = {
  value: 0,
}

We make a const called initialState whose value is an object that stores key/value pairs for us.

The initial state is set when the user first interacts with the app. Only when an action is dispatched will this value change.

features/counter/counterSlice.js

export const counterSlice = createSlice({
**  name**: 'counter',
**  initialState**,
**  reducers**: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

Here we are using the createSlice method we imported higher up in the slice file. We are then passing 3 arguments:

the name of what the slice should be referred to in or app
the initialState object we made earlier
the reducer(s) (or action(s)) we want to create and later affect change to our data store

You can see we are preparing 3 reducers named increment, decrement, and incrementByAmount.

The first two reducers are simple actions that take no value from the user. We are just simply passing in the current state and changing that state directly by either adding or subtracting by 1 increment.

The 3rd reducer incrementByAmount takes in the current state, and an action we want to do. The payload (or result) of that action is then assigned to the value property in our state.

features/counter/counterSlice.js

export const { increment, decrement, incrementByAmount } = counterSlice.actions

Then we are make the 3 reducers we created higher up in the file available to the entire app by destructing the actions property on the counterSlice const we made.

features/counter/counterSlice.js

export default counterSlice.reducer

And finally, the piece of the slice we want to automatically make available by default when importing this file is the reducer property RTK made for us.

Checking in on you: are you good? Need some water? It's not complicated, stick with me :D

Drink Water Drinking GIF by Bermemes - Find & Share on GIPHY

Discover & share this Bermemes GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

Let's bounce back to our store and let it know we have some reducers it can expect:

app/store.js

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

Now here is where we read from our store and change the data to our store. The grand finale to this not-so-complex workflow.

Create a Counter.js file that will host an increment button, a decrement button, and something to render the value of the counter.

features/counter/Counter.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
<span>
 <input
          value={incrementAmount}
          onChange={e => setIncrementAmount(e.target.value)}
        />
        <button
          onClick={() =>
            dispatch(incrementByAmount(Number(incrementAmount) || 0))
          }
        >
          Add Amount
        </button>
</span>
      </div>
    </div>
  )
}

Let's go over this line by line, and then we'll be wrapping up.

features/counter/Counter.js

import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'

Here we are importing two hooks and two actions. The first pair of imports comes from 'react-redux' and the second pair comes from our counterSlice slice file.

useSelector is a nice hook that lets the component monitor the value we assign to our const.

Let's look a bit further down and see how we use it in the component:

features/counter/Counter.js

const count = useSelector((state) => state.counter.value)

We invoke the useSelector which is equivalent to the mapStateToProps to connect our component to the data store. If you don't know the mapStateToProps process, it's the vanilla equivalent of using this hook, but more complex and lengthier to do. Thanks to RTK we have useSelector.

So the const count now fetches the state from the store and returns the value of value.

Let's get back to our imports and look at useDispatch. useDispatch is what we use to call the reducer(s) that we've made in our counterSlice. Since we've exported them, we are importing them here.

Jumping further into the component code check this out:

features/counter/Counter.js

const dispatch = useDispatch()

Here we are just saying the const dispatch is the useDispatch hook.

This is how we will change our app's state so all components can be made aware.

features/counter/Counter.js

<button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
...
<button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
...
 <button
          onClick={() =>
            dispatch(incrementByAmount(Number(incrementAmount) || 0))
          }
        >
          Add Amount
        </button>

We assign the onClick attributes to an anonymous function that fires the dispatch hook and takes the action function we designate along for the ride.

Notice how we are passing the state variable incrementAmount to the incrementByAmount reducer? This is where our reducer is seeing a specified action, making the action happen, and returning the payload so we can make a new state object for our store to use.

Star Wars Disney GIF - Find & Share on GIPHY

Discover & share this Darth Vader GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

Then finally in our span element, we are using the count const to show the real-time value of the property **value **in our store.

features/counter/Counter.js

<span>{count}</span>

For a full working app of what we've covered in this article, check out the sandbox from RTK here.

Hot dang, you read this far? Congrats

In summary, you've learned about what Redux is, where it started and how it's been made even easier to use thanks to Redux Toolkit. I know it was a long read, but thought it would be helpful to cover line by line.

I hope you try using RTK in your next application and discover what it's like to have a source of truth for all your components in your app. It makes development much faster once you get used to using it.

For bonus points, I recommend reading up on the produce method from immer, with RTK, to analyze/change/replace state before it even hits the data store. Thankfully immer, an immutable library, is already included with your RTK install.

Other items to check out:

Thanks for reading! Please let me know if I've presented any information incorrectly in the comments below (or kudos are appreciated too).

Bom Dia Hello GIF - Find & Share on GIPHY

Discover & share this Hello GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

Prevent re-renders with useRef

Brett Thurston — Wed, 25 May 2022 21:15:48 +0000

There may be times when you don't want to trigger renders when capturing data from the user. useState, by now, is a well known and handy hook since it was implemented in React 16.8. When setting our state variable with useState, it causes a render of your component. When we use useRef to persistently store information, it doesn't cause a render.

If you want to see the source code: https://github.com/BrettThurs10/useRefVersuseState

If you want to follow along in your browser:
https://brettthurs10.github.io/useRef-vs-useState/

Dev note: The app is written in TypeScript, but only lightly so. If you're not use to TypeScript just ignore the parts that are unfamiliar, the business logic is the same. Having said that, now is a great time to learn TypeScript.

Dev note: As of React 18 components render twice by default if your is wrapped with . For this demo I've removed from the code base.

Jump to the RefComponent.tsx file and follow along:

Set the stage state

To make the a ref simply import it and declare it as a variable:

import {useRef} from React;
...
  const dataRef = useRef("🥧");
  const inputRef = useRef<HTMLInputElement>(null);
  const timesRendered = useRef(0);
  const [inputString, setInputString] = useState("🍕");
...
}
export default RefComponent

I'm setting the pie emoji as the initial value for the dataRef constant.
I'm also making a state variable called inputString and setting that to the pizza emoji.

Update your ref

Once you've declared the dataRef you can update it by assigning a value to it's property 'current'. This could be any primitive type, object or function.

In my method updateDataRef() this is where I'm doing just that.

const updateDataRef = (e: ChangeEvent<HTMLInputElement>) => {
    dataRef.current = e.target.value;
    console.log(dataRef.current);
  };

I then take the first input element and set the onChange attribute to that updateDataRef. Now whenever we type in it will take the value and update the ref for us.

Macho Man Hulk Hogam GIF - Find & Share on GIPHY

Discover & share this Animated GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

I also make a handleOnChange() method to update the state variable stringInput for us, too.

  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputString(e.target.value);
  };

Likewise, I attach that to the 2nd input handling the inputString state variable. Whenever we type into that input element it WILL cause a re-render.

Monitor for changes to state

I've made the method whereFromMsg() to monitor from which useEffect code block the render is coming from. I put it into two useEffects that are listening to the dataRef and inputString variables to change.

  useEffect(() => {
    updateTimesRendered();
    renderMsg("dataRef useEffect");
    whereFromMsg("dataRef", dataRef.current);
  }, [dataRef]);

  useEffect(() => {
    updateTimesRendered();
    renderMsg("inputString useEffect");
    whereFromMsg("inputString", inputString);
    // uncomment to see how useRef can capture the previous state, but not current. i.e. typing in dog in the useState input you will see 'dog' and in the useRef value you will see 'do'
    // dataRef.current = inputString;
  }, [inputString]);

When they do, it will invoke 3 methods for me:

updateTimesRendered
renderMsg
whereFrom

 const updateTimesRendered = () =>
    (timesRendered.current = timesRendered.current + 1);

  const renderMsg = (fromWhere: string) => {
    console.log(
      `✨ Component has rendered ${timesRendered.current} times and most recently from ${fromWhere}`
    );
  };

  const whereFromMsg = (type: string, value: string) => {
    console.log(`${type} === ${value}`);
  };

Now we can see what is happening in the console.

Whenever we type into either input we are seeing some message in console.

Notice when you type into the dataRef input, it only shows the value of dataRef.current. There is no message saying it's caused a render. Also notice how in the above screenshot the dataRef value in the UI is still set to the pizza emoji. That's because the component hasn't rendered yet. On any future render, it will update from pizza emoji to 'skateboard'.

Go ahead and type in the 2nd input and you'll see that transaction happen.

When we type into the inputString input we see a message it has rendered and the render counter increases in value.

Keep things in sync

It's important to note that whenever we update a useRef variable our component UI won't know about it under another render happens.

You can see what the previous state for dataRef by uncommenting the dataRef.current = inputString line as shown below:

useEffect(() => {
    updateTimesRendered();
    renderMsg("inputString useEffect");
    whereFromMsg("inputString", inputString);
    // uncomment to see how useRef can capture the previous state, but not current. i.e. typing in dog in the useState input you will see 'dog' and in the useRef value you will see 'do'
    // dataRef.current = inputString;
  }, [inputString]);

Now, when we type into the 2nd input we see both values change, but the dataRef value is not current.

This is because the ref will become current on a future render. But of course it may not be current with the inputString variable, should that update. Just to illustrate the point and help you keep things in sync. Use at your discretion.

Bonus points:

Clicking on the focus inputRef button will indeed set the 2nd input element to focus (drawing an outline around it). This is just shows how you can use the useRef hook and attach it to a DOM element to gain access to it directly.

So next time you need to record some data without causing a re-render consider using useRef to help you out.

Goofy Movie Hello GIF - Find & Share on GIPHY

Discover & share this Animated GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

✨ Conditional rendering in React with finesse

Brett Thurston — Thu, 12 May 2022 13:44:37 +0000

So if you've spent a measure of time with React you'll come across the scenario of needing to render an element based on a condition.

For example, what if you had a component that counted something. And you wanted to show the actual count in a component. However, if it ever dropped below 1, you might want show a message in its place. Informing the user something or presenting a new call to action to do something else.

You could write it in a ternary operator like this:

import { useState } from "react";
import RenderIf from "components/RenderIf";

export const Sample = () => {
  const [count, setCount] = useState(2);
  const increment = () => {
    let newCount = count;
    setCount((newCount += 1));
  };
  const decrement = () => {
    if (count === 0) return;
    let newCount = count;
    setCount((newCount -= 1));
  };
  return (
    <>
      <button onClick={increment}>Add</button>
      <button onClick={decrement}>Subtract</button>
       {count > 0 
           ? <p>I have {count}, and that's pretty cool.</p>
           : <p>Sorry, I'm all out.</p>
        }
    </>
  );
};

This works OK, but in my opinion doesn't read as easy as another option. What could a component look like to handle this use case?

Proposal

We can build a component that renders the content it wraps based on a condition we feed it. If that condition isn't true then we'll render something else. This will handle this use case with a little more finesse, IMO. 😎

First let's make a component called RenderIf. Below are the JSX and TypeScript version. Pick your poison.

JSX:

import { ReactNode } from "react";

const RenderIf = ({ children, isTrue, fallback }) => {
  return isTrue ? children : fallback;
};

export default RenderIf;

TypeScript:

import { ReactNode } from "react";

type Props = {
  children: ReactNode;
  isTrue: boolean;
  fallback?: any;
};

const RenderIf = ({ children, isTrue, fallback }: Props) => {
  return isTrue ? children : fallback;
};

export default RenderIf;

Esplaining what's happenin'

This component that we've made has 3 props being passed in:

children
isTrue
fallback

We destructure those props and pass them into the component. Children is whatever element this ** **component is wrapping. Then we pass the condition of when to render the wrapped element with the isTrue prop.

Whenever this condition is true (or truthy) it will render the wrapped element. If the condition is NOT true, then it renders whatever we pass in the fallback argument.

In TypeScript I've set this to be an optional argumentin the type of Props. Why? I may not want to always pass a fallback element. So if I pass no fallback argument prop then will return undefined and a blank component will render.

In the JSX version of , this happens naturally.

So your fallback argument can be a message saying, 'Hey you're out of counts' or it could be a button to buy more counts. You get the idea.

Jerry Maguire GIF by Jerology - Find & Share on GIPHY

Discover & share this Jerology GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

Example use in an app:

import { useState } from "react";
import RenderIf from "components/RenderIf";

export const Sample = () => {
  const [count, setCount] = useState(2);
  const increment = () => {
    let newCount = count;
    setCount((newCount += 1));
  };
  const decrement = () => {
    if (count === 0) return;
    let newCount = count;
    setCount((newCount -= 1));
  };
  return (
    <>
      <button onClick={increment}>Add</button>
      <button onClick={decrement}>Subtract</button>
      <RenderIf isTrue={count > 0} fallback={<p>Sorry, I'm all out.</p>}>
        <p>I have {count}, and that's pretty cool.</p>
      </RenderIf>
    </>
  );
};

Go build some stuff

So now you've got a handy component you can use over and over again to render conditional elements in React. Maybe you want to extend this component to do other things too. What else could you see it do? Let me know what you think and if you'd take a different approach.

Good luck and happy building. 🔨

Tom Hanks Hello GIF - Find & Share on GIPHY

Discover & share this Hello GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

A snippy JS function to trim those long strings

Brett Thurston — Fri, 05 Feb 2021 16:23:04 +0000

In this article you'll find a method to use whenever you have a long string that may funk up your UI components.

I was working on a list item component for a project and found a problem we run into a lot. What I have is a list of cards that bring in a title, publish date, and an episode description. Instead of manually trimming the string in the component itself, what if we could trim the string on the fly? This is especially useful when working with JS frameworks like React JS and Vue.

The description length of each episode will vary from each publication. I'm positive the descriptions will run past the limit I want them to in these card components. Then my list of cards will all have different heights. I like symmetry so I needed to trim these description strings on the fly. Here's how I did it and one of many different ways to do it.

function truncate(string, characterLimit) {
/* first argument, pass in a string */
/* optional second argument: pass in a character 
      limit for this string. */
/* reminder: ?? is a nullish coalescing operator. 
      if we find that the 2nd argument passed in is 
      null or undefined, we default the character limit 
      to 160 characters */
  let limit = characterLimit ?? 160;
/* set up a variable called finalString to return at the end.  */
  let finalString;
/* if condition that asks if the string character count is 
       greater than or equal to the limit variable. if it is then 
       we want to remove everything after the number of the 
       limit set and append ellipse ("...") */
  if (string.length >= limit) {
    finalString = string.substring(0, limit);
    finalString = finalString + "...";
  } else {
/* if the string is less than or equal to the limit, let's go 
       ahead and pass the string by assigning it to our 
       finalString variable */
    finalString = string;
  }
  return finalString;
}

Let's see what happens when we use this method:

const shortDescription = "If a parsley farmer gets sued, can they garnish his wages?"

const longDescription = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex ante, molestie eu nisl non, tempor rutrum tortor. Suspendisse ultricies odio ac turpis porta volutpat. Vestibulum rhoncus laoreet elit ut dictum. Ut id lorem ut ipsum cursus eleifend sed vitae dui. Mauris commodo elit at leo consectetur, ut blandit lacus laoreet. Vivamus placerat congue consectetur. Vivamus non nisi a tortor aliquet dictum. Sed ut condimentum nunc. In hac habitasse platea dictumst. Praesent id egestas libero. Vivamus sed tellus orci. Ut luctus mauris nunc, pulvinar bibendum urna dictum non. Duis bibendum commodo arcu, ut elementum diam vulputate vitae."

truncate(longDescription)
/* "Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam ex ante, molestie eu nisl non, tempor rutrum tortor. 
Suspendisse ultricies odio ac turpis porta v..." */

truncate(longDescription, 250)
/* "Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam ex ante, molestie eu nisl non, tempor rutrum tortor. 
Suspendisse ultricies odio ac turpis porta volutpat. Vestibulum 
rhoncus laoreet elit ut dictum. Ut id lorem ut ipsum cursus 
eleifend s..." */

truncate(shortDescription)
/* "If a parsley farmer gets sued, can they garnish his wages?" */

shortDescription.length
/* 58
58 is less than the default 160 limit, so the string is passed 
through unmodified */

So this function not only trims your long copy descriptions, but it also allows you to pass in a limit to override whatever default limit you set. This is super handy because now, you've written a function that becomes super nimble. For instance, I used the same truncate function in this fixed audio player bar I'm working on. Notice it's trimming the episode title.

Whenever you're writing your functions make sure they have one responsibility, but allow for customization as needed.

So now you've got one way to trim a long description in the UI. You've seen how to write a function that considers future use in other areas of your program too.

How would you handle this equation? Share your solutions below.

Thanks for reading and happy snipping!

Photo by Les Triconautes on Unsplash

How to filter() your school lunch because nobody wants meatloaf

Brett Thurston — Tue, 02 Feb 2021 05:30:42 +0000

The filter array method creates a new array with all the items that pass the test given by the function you gave it. By the end of reading this article, you'll get a deeper understanding of how to filter arrays of numbers, strings and an array of objects. You'll be on the A/B honor roll, for sure.

It's elementary my dear Watson...

Let's take a look at some numbers I have in an array.

const scores = [85, 50, 22, 64, 100, 93]

Now let's say our 5th grade math teacher is letting us remove all grades lower than a 60 from our recent test scores. Great! But we have to prove we 5th graders know how to filter an array. Fear not, here's how.

const oldScores = [85, 50, 22, 64, 100, 93]
const newScores = oldScores.filter( item => item > 60 )
console.log(newScores)
// Array(4) [ 85, 64, 100, 93 ]

Success! Let's see what we did though, not time for recess yet.

So in our variable oldScores we have our old test scores in that array. That array had two scores that had a value less than 60.

In newScores we are using the filter() array method on the variable oldScores. Look inside the parentheses:

 item => item > 60

The filter() array method accepts a callback function (the bold function inside our parentheses). That callback function wants to coerce each item in the array to be truthy. We are testing each item in the variable oldScores to be greater than 60.

A note to realize is the filter method not only creates a new array for you to use, but it traverses (or moves on down the line) over the array given to the method (in this case oldScores).

When the filter() method traverses over the item in oldScores it will test each item's index against that function. Anything that returns 'true' gets put into the new array that's created. Anything that tests false is not used in the new array. And you guessed it, it's assigned to newScores after the traversing of the array is complete. Take not also, we are not modifying the oldScores array at all.

Extra credit

Ok kids, grab your juice boxes, we're going to kick it up a notch.

What if you wanted to filter an array of objects based on the property's value? For instance, the teacher has some records of a few students. This record is an object that has their name and average score.

Something like this:

const students = [
{
name: 'Tommy',
avgScore: 89
},
{
name: 'Angelica',
avgScore: 93
},
{
name: 'Chuckie',
avgScore: 98
},
{
name: 'Phil',
avgScore: 83
},
{
name: 'Lil',
avgScore: 83
}
]

Let's say our teacher needs to give awards to those who have an average score of 85 and above. How would we filter this array? Like so:

const awards = students.filter( item => item.avgScore >= 85 )
console.log(awards)

And you would have awards equaling this:

Phil and Lil unfortunately just missed the mark, but better luck next time.

The first argument the callback function we've named item. We could have used the word 'student' or 'x' or whatever. So long as what's right of the fat arrow correlates with the word of the argument we are passing in. In this case we are wanting to specifically test the avgScore property value of the object we are traversing over. And we want all avgScore values to be equal to or greater than 85. So we use the equal to or greater than comparison operator in between item.avgScore and the number 85. And bingo, we have a new array with just 3 of the 5 students who's average score is 85 or higher.

If you want to learn more about comparison operators check out MDN's docs on it at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators

I would do anything for lunch, but I won't do that...

We've been working numbers, but you can also filter arrays based on string values like so:

const lunch = ['pizza', 'meat loaf', 'milk', 'corn dog']
const filteredLunch = lunch.filter( item => item !== 'meat loaf' )
console.log(filteredLunch)

So since the school meat loaf looks like road kill, we're going to filter it our of our lunch array. Once again, the original lunch array is left untouched in our program, but the variable filteredLunch has what we want, so let's dig in!

School's out!

In summary, the filter method is a great way to create a new array with only the items you want in it. Just pass a function that tests each item in the array. Whatever is truthy is put into a new array for you to use. Now if you'll excuse me, I'm going to trade my Fruit Roll Ups for some Gushers. Peace!

Go Build This Stuff: A community list of ideas

Brett Thurston — Mon, 01 Feb 2021 04:21:24 +0000

Hey, if you're reading this, you're invited to help others break free from creative blocks. How? Just push a branch up to this repo. Easy. :D

https://github.com/BrettThurs10/GoBuildThisStuff

This list is great inspiration for developers needing to update their portfolio or for devs who want a fresh challenge.

Below is the list in it's current entirety. For the latest and greatest, see the github repo linked above.

Now, go forth and create! If you do, leave a comment here and share your work. :D

Go Build This Stuff

A massive list of web apps (or apps) to kick that creative block to the curb.

Suggested APIs are just that, suggested. Feel free to find others.

International weather app with language selector and translation.

Bonus points for using geolocation for detect my location.

Resources: https://openweathermap.org/api, https://darksky.net/dev, https://www.i18next.com/

Jeopardy trivia app

Create a simple Jeopardy style website with categories of topics

Resources: http://jservice.io/

DnD card generator

Create a searchable card generator with categories for spells, monsters, loot, weapons, etc...

Resources: http://www.dnd5eapi.co/

Pokemon card generator

Create a searchable card generator with for all the Pokemans

Resources: https://pokeapi.co/

Cocktail database

Create a searchable cocktail database

Resources: https://www.thecocktaildb.com/api.php

Bitcoin Price Index

Create a bitcoin dashboard showing the current price index of Bitcoin and other crypto currencies

Resources: https://www.coindesk.com/coindesk-api, https://api.coinpaprika.com/v1/coins/btc-bitcoin

GitHub Available Jobs Board

Create a searchable job postings website

Resources: https://jobs.github.com/positions.json?description=api

IP info grabber

Create a website that fetches data about the IP address you give it

Resources: https://ipinfo.io/161.185.160.93/geo

Makeup database OR a fake makeup e-commerce website

Resources: http://makeup-api.herokuapp.com/

Find breweries near me

Use geolocation to detect the closest breweries near me.

Resources: https://api.openbrewerydb.org/breweries

Fake staff directory for a company

Resources: https://randomuser.me/api/

Super hero database

Create a searchable super hero database and link related heroes/villains

Resources: https://superheroapi.com/, https://developer.marvel.com/

Hearthstone database

Create a searchable Hearthstone database

Resources: https://hearthstoneapi.com/

Create a chat app

Resources: https://www.djamware.com/post/5f2a1d9d9c794f177fd7b527/react-js-tutorial-building-firebase-chat-app-react-hooks

News app

Resources: https://dev.npr.org/api/

NASA app

Create a ton of cool things with the NASA API

Resources: https://api.nasa.gov/

Create a crime near me app

Bust the bad guys

Resources: https://github.com/fbi-cde/crime-data-frontend

Flight data app

Resources: https://geekflare.com/flight-data-api/

Food near me

Resources: https://www.yelp.com/developers/

Sports app

Do sports stuff

Resources: https://rapidapi.com/blog/best-sports-apis-ranked/

Streaming website

Create a Netflix or Hulu clone

Resources: https://www.themoviedb.org/documentation/api

COVID tracker

Resources: https://covid-api.com/, https://leafletjs.com/

Dice roller

Make a dice roller app where the user can select all manner of dice to roll (and multiples of, too).

Spotify clone

Resources: https://developer.spotify.com/documentation/web-api/

SpaceX dashboard

Create a dashboard showing launch pad data and upcoming events

Resources: https://github.com/r-spacex/SpaceX-API

Video game deals website

Resources: https://apidocs.cheapshark.com/

Find a city bike near me

Resources: http://api.citybik.es/v2/

Photo by Mika Baumeister on Unsplash

Grab your map(); adventure is out there!

Brett Thurston — Fri, 29 Jan 2021 04:17:59 +0000

Let's explore the majestic map array method and all it's glory.

Keywords used in this article:

array: a list-like object that one can traverse or modify (mutate)

integer: a real number, not a string (text)

index: the numerical position of an item in an array

string: actual text that cannot be used in mathematical equations

I have no reason why map() is my favorite array method, but it is. Map powers through the indexes of your array, and creates a new array based on whatever function you told it to do, at each index. By the end of this article, you'll be able to accurately and confidently use the map() array method.

Array of sunshine...

So let's make an array of numbers, fill it with actual integers, and map over it:

const numbers = [1,2,3,4,5]
numbers.map( item => console.log(item))

What happened here in console?

First, the very bottom of the console is simply saying this map method created an array, and each index it rolled over is undefined. So it's an array with 5 indexes that have undefined values. This is to be expected since we're not actually doing any assignment in the callback function, yet.

Second, line 2 of our program is console logging each index it's found in the array. It's important to refer to each item in an array as either the index or the item. Referring to a number in an array may get confusing here's why:

The first number in the array is 1 and it's the first item in the array. However, it's index value is 0. That's because an array's index starts at 0, then 1, then 2 and so on.

So there are 5 items in the array of numbers, but there first item in the array is an index of 0 and the 5 in the array is at an index of 4.

Let's take another look at an array of string values:

const pets = ['dog', 'cat', 'bird', 'ape']

The index value of dog is 0.

The index value of ape is 4.

Another day, a new array

Something else to note is that using the map method actually creates a brand new array. So when you run a map method by itself, you are creating an array where it is in the program. Having said that, you aren't mutating (modifying) the original array you're mapping. Take a look below:

const points = [80,100,75]
points.map( item => item += 10 )
console.log(points)

See what happened? The items in the array points haven't increased by 10. That's because an array was made, but isn't referenced anywhere because it's created a new array, with the items increased by 10, but they haven't been assigned to a new variable.

Remember, whenever you use the map method, you're creating a NEW array, not modifying the one you're mapping.

Here's how to rewrite this program:

const points = [80,100,75]
const bonusPoints = points.map( item => item += 10 )
// our new array logged
console.log(bonusPoints)
// the array we mapped over still equals the same as when it was first declared
console.log(points)

Take a look, bonusPoints is a new variable that's been assigned the brand new array the map method made to the right of the equal sign, on line 2. And then we console log it and see the numbers have been increased by 10.

For reference, we logged the points array we used to map in bonusPoints. We see the numbers are unchanged from when they were first declared in line 1. That's because, they were never modified.

Another take

Let's say you had an array of numbers, and you want to create a new variable that stores a check on each item that is less than 10. Let's take a look at how you do that:

const someNumbers = [4,7,8,11,14]
const lessThanTen = someNumbers.map( item => item < 10 )
console.log(lessThanTen)

So we see that the first 3 numbers are less than 10 because they have the boolean of true, but the last two numbers are greater than 10.

The lay of the land

Here are some rules to think about while using the map() method:

Only use the map method when you want to create a new array
Only use it when you're returning a value from the callback method

So in other words, it's not advised to use map if you're not using the array it returns.

Map() can also be a little factory

Let's say you have an ID component that looks something like this:

function userCard(data) {
  return `<div class="card">
  <img src="${data.picture.large}" alt="Avatar" class="image">
  <div class="container">
    <h4><b>${data.name.first} ${data.name.last}</b></h4>
    <p>${data.email}</p>
  </div>
</div>`;
}

Let's say we had an array of objects that stored 7 people's information. We need to render 7 ID cards to the screen. If we copy and paste 7 ID card components to our HTML page, that's a lot of management to be responsible for. Wouldn't it be nice to have one component dictate what they all look like?

Enter map to the rescue!

let cards = people.map((item) => userCard(item));
div.innerHTML = cards.join(" ");

By allowing our map method to traverse over our array, we are creating a new array. That array is then rendered to the DOM via innerHtml.

Check out the GitHub for this example.

And for those React users, you can easily to the same, just returning your component instead.

Back to base camp

To sum up the map method, you're creating a new array and filling it with items based on the callback function you passed to it. You should feel comfortable using the map method. I hope this map field guide has helped you in your journey as developer.

Please let me know if this has been as clear as mud. I'd be happy to clear things up for you. :D

Remember, adventure is out there!

Photo by Matilda Vistbacka on Unsplash

Var vs let and const; easy as pie

Brett Thurston — Wed, 27 Jan 2021 22:00:29 +0000

If you've spent any time learning Javascript you've probably seen three ways to declare a variable. This guide will show you an in depth look at the behaviors of 'var', 'let' and 'const'. Afterwards, you'll be setting variables appropriately and confidently.

For starters...

'Let' and 'const' are apart of ES6 (ECMA script 6). This is the latest approved standardization for Javascript that was released in 2015. ES5 was released in 2011. Modern Javascript frameworks like React and Vue utilize ES6. So it's a great time to jump on board the ES6 bus.

Using 'var', 'let' and 'const' is as easy as this:

var pie = 'apple'
let pie = 'apple'
const pie = 'apple'

Var-y funny

Let's take a look and see how a 'var' behaves. Var is scoped to the entire function it's in.

function count() {
  for (var i = 0; i < 3; i++) {
    if (true) {
      console.log(i);
    }
  }
  console.log(i);
}
count();

Can you see what's wrong in our console?

On line 7, the 2nd console.log(i) is saying i is equal to 3. This is a problem since our for loop should stop when it hit the 3rd loop. Instead of doing that, our 'var' is scoped to the entire count function.

Watch happens when we change our 'var' in our for loop to let:

function count() {
  for (let i = 0; i < 3; i++) {
    if (true) {
      console.log(i);
    }
  }
  console.log(i);
}
count();

We now get a ReferenceError on the 2nd console.log(i). This is actually what we want. Outside of the for loop, the parent function shouldn't care that we declared a function named i. That's because 'let' is scoped to the code block it lives in. 'Const' is the same way. 'Var' can get tricky since it's scoped to it's function AND it can also collide with variables set in the window. In other words, two variables named the same thing will cause errors in your program.

If you don't know, there is a window object that hosts a ton of behind the scenes stuff. Open up your console on your web browser and type in window to see it all.

You can imagine we'd get some errors working with larger applications that utilize window if we're using vars everywhere.

So hopefully you can begin to see why it's best practice to stick to setting variables with 'let' and 'const'.

Let's dig in

As you may have guessed 'let' allows the program to update it's value.

let pie = 'apple'
//...
pie = 'pecan'
console.log(pie)

Here we declared a variable called pie and set it's value to the string apple. Later on in our app, we updated the pie variable to pecan with no issue. Console logging pie shows us we're set to have pecan pie. Yum!

I const stop eating...

Let's try the same thing in console with 'const', instead of let.

const pie = "apple";
pie = "pecan";
console.log(pie);

Well no pie for us. That's because we said pie should never update it's value of 'apple' by declaring it with 'const'. And this is a good thing! Our variable is protecting itself against future modification. We all know apple pie is the best pie and should never be replaced. :D

'Const' safe guards your variables by throwing an Uncaught TypeError.

Can we scrape 'var' in the trash can?

Why doesn't Javascript just take 'var' out and replace it with 'let'? That's a good question, but the answer is that it would be absolute chaos. Imagine all the websites and apps utilizing 'var' in legacy code. Removing 'var' support would just be such a nightmare for everyone. So, just like mom's giant papier-mâché turkey centerpiece, it stays for the full course meal.

TL;DR (doggie bag version)

Let is great to use when you say it's OK for the variable to be updated.

'Const' is great to use when the variable should never update.

'Let' and 'const' are scoped to the code block that they live in.

Using 'var' is like taking a bite out of pie that's been left out for a week. It is scoped to the entire function, regardless of whatever code blocks are in it. So you're probably going to have issues using it and eating old pie.

Get in the habit of using 'let' and 'const'. It will save you some headache in your career as a Javascript developer.

More dessert please...

What if you wanted to update a variable in a loop (or a code block further into the function)? Piece of cake, just declare the variable at the beginning of the function:

function chowDown() {
  let capacity = "empty";
  let inches = 42;
  for (let i = 0; i <= inches; i++) {
    if (i == inches) {
      capacity = "full";
    }
  }
  console.log("my belly is now " + capacity);
}
chowDown();

Photo by Priscilla Du Preez on Unsplash

Listen up: it's not rejection

Brett Thurston — Fri, 21 Aug 2020 07:05:53 +0000

So you've applied to that one job you really are excited about. Maybe you knew it was kind of a crapshoot, but perhaps they'll set up an interview for you. Later that day you get that email. The one that says, 'Thanks, but no thanks'.

Oy vey, that feeling in your stomach. I know it.

If you're like me you've thought, 'My website isn't good enough. My portfolio isn't strong enough. My code isn't smart enough. Etc...'. I've totally have been there, many times. The fact is, it's all probably fine. You're beating yourself up. Don't.

I've been active on tech Twitter lately. It pains me to see techies use the word rejection. I strongly oppose the notion anyone has been 'rejected'. This isn't getting dumped because you're not special or wanted. You are unique and you are wanted, but to another company...just not this one. And that's OK!

I want to encourage you with some thoughts. And if you'll humor me, an analogy I tell myself after getting those emails.

First off, you must care about yourself, your career and what you can bring to the table. Know that you do matter. Your thoughts, your feelings, your time - all of it matters. It should be respected by a company and in return you should respect yourself.

Second, you aren't a charlatan. So kick that that imposter syndrome to the curb. You've put the hours in. You've worked from the bottom and are on your way up. You've earned the right to apply to this gig. (Just a note to beginners out there: more often than not you will likely have to take the grunt work, to get to where you want to be. Have patience, you'll get there. Keep side hustles going if your day job isn't fulfilling. They're both rewarding and good to discuss in interviews. Showing passion goes a long way.)

Third, applying to jobs is a numbers game. You must apply to a lot of them, so you can get a small percentage of interviews lined up with those companies that would be a good fit for you. It's like speed dating. Talk to the whole room, and hopefully you've got 2-3 prospects to follow up with.

So you have not been rejected.

Say it with gusto now, 'I haven't been rejected'.

Feels good, yeah?

And now for that analogy:

The company you applied for/interviewed with is a jigsaw puzzle. They are missing a much needed puzzle piece. Puzzle pieces come in all shapes. Some have two pegs, others three. Heck, some have four (show offs). The piece they need, unfortunately, isn't the piece that you are. But that's ok, as of right now, you now know it's time to sally forth and move on to greener pastures. Because, guess what? There is a company out there that needs the exact piece that you happen to be. It's just that, as of right now, you two just don't know it yet.

So what do you do?

Keep you head up high and go apply to another job. And please, don't feel rejected.

Sometimes, we apply to things that are just outside our ability. No sweat, you can teach yourself how to add that tool to your tool box.

For now, continue the journey in finding that company that wants you just as much as you want it. Be eager for that kind of business relationship to happen and don't settle for less. Let that fuel your rebound.

I realize this article may come across too optimistic for some of you, but I hope that you realize the situation for what it is. A company is need of a certain individual, and that individual isn't you. There is a indeed a company that needs you. Now go find it.

You got this!

DEV Community: Brett Thurston

How I built my AI powered book insights app

Brief introductions

What did I just buy?

Light bulb moment

First things first: can the core feature work?

Proof of concept

API

Taking advantage of mobile device features

Cache money, baby

Bookshelves

Content moderation

Theme and Presentation

Beta phase

Social marketing for this app

Summary

Prevent Acid Redux with Redux Toolkit

What is Redux

Who gave us Redux?

Why state management?

Reducers are the future

Mutate safely

Using Redux Toolkit

Hot dang, you read this far? Congrats

Prevent re-renders with useRef

Set the stage state

Update your ref

Monitor for changes to state

Keep things in sync

✨ Conditional rendering in React with finesse

Proposal

Esplaining what's happenin'

Example use in an app:

Go build some stuff

A snippy JS function to trim those long strings

How to filter() your school lunch because nobody wants meatloaf

It's elementary my dear Watson...

Extra credit

I would do anything for lunch, but I won't do that...

School's out!

Go Build This Stuff: A community list of ideas

Go Build This Stuff

A massive list of web apps (or apps) to kick that creative block to the curb.

International weather app with language selector and translation.

Jeopardy trivia app

DnD card generator

Pokemon card generator

Cocktail database

Bitcoin Price Index

GitHub Available Jobs Board

IP info grabber

Makeup database OR a fake makeup e-commerce website

Find breweries near me

Fake staff directory for a company

Super hero database

Hearthstone database

Create a chat app

News app

NASA app

Create a crime near me app

Flight data app

Food near me

Sports app

Streaming website

COVID tracker

Dice roller

Spotify clone

SpaceX dashboard

Video game deals website

Find a city bike near me

Grab your map(); adventure is out there!

Array of sunshine...

You are here

Another day, a new array

Another take

The lay of the land

Map() can also be a little factory

Back to base camp

Var vs let and const; easy as pie

For starters...