Forem: Tyrel Chambers

Networking to get your first web-development job

Tyrel Chambers — Sun, 17 Apr 2022 14:22:01 +0000

Getting your first web development job can certainly be a daunting task. Never mind trying to learn how to program and the ins and outs of writing the code. Landing your first web development job presents its own unique set of challenges.

I know this topic has been beaten to death in the tech industry, but it never hurts to have another perspective and I'm hoping I can shed some light on my process and hopefully help you too. It hasn't been easy, but I feel like that's not always the case, this is just my journey.

Don't believe the job description

If you've looked at job boards, you've likely seen a job posting that goes something like this:

Junior web developer

Must know React, Vue, Angular, Node, DevOps, DevRel, design systems, UX/UI

1,300 years of experience in being a CEO

Salary: $3.50

Now, that is not a real description, but it's close enough to what job descriptions feel. They usually have requirements that seem unrealistic and taken at face-value, they are.

A lot of the time job descriptions aren't written by developers. Every company is different, obviously, but most of the time it's written by someone from HR without knowledge of what is needed; it's sort of like a perfect scenario type of thing.

Job descriptions can be very intimidating though, especially when you're trying to get your first job. You'll sit there and look at it and think there's no way you could fill all those roles, but you're not alone. Everyone has felt that way.

The important thing to remember is you're not expected to know everything, if you do, you're probably over-qualified and should be looking for something else.

It's also a good idea to apply for jobs where you don't quite know everything because that will allow you to learn something new.

If you ask anyone, they will tell you the same thing: apply anyway.

Networking over applying

I've sent in my fair share of resumes and been through a handful of interviews (even ghosted a few too due to anxiety). Anxiety was a large part of my journey and why it took me so long to get my first job. It wasn't the only reason. I spent a lot of the time learning and building my own projects. One of which is in production and being used by a handful of people.

What did work wonders, however, was networking; especially on Twitter.

Networking can happen anywhere: you could go to a meetup, introduce yourself and engage on social media, blog. Where you can find people to talk to, you can find opportunities to network.

I've seen many, many people, get jobs because they were active on Twitter and networked with developers in their field. Not only do you meet like-minded individuals who share the same interests as you, but you also get your name in front of people.

One of my Twitter friends encouraged me to send in a resume to the company he worked for and that he would make the necessary introductions to get me an interview. I was excited, but a little hesitant because I had been down this road before, so I wasn't sure how it would play out, but wouldn't you know it, it paid off.

I'm incredibly thankful to him for giving me the chance and opportunity to get into the field. However, that would be a post for a different day.

Build your confidence

When you network with other developers and business owners, you give yourself the opportunity to build confidence in yourself and what you know.

I had an interview with a fast-growing company and one whose product I'd used in the past. We had some pretty good conversations, but ultimately it didn't go anywhere and I didn't get this interview by networking with anyone.

What I did get though, is a new developer to connect with on Twitter. Even though I didn't get the job, I asked for feedback so I could increase my chances next time.

He gave me amazing feedback that really helped me out and followed me on Twitter (other platforms) too. From this interview opportunity, I gained a new internet friend - a person to connect with, and another opportunity to network.

So, what's next?

We've sort of talked about the benefits with networking and my personal experience in the matter, but I'd like to layout some practical examples of networking on social media that I believe helped me, and what might help you.

Create a social media presence. I would suggest Twitter or LinkedIn.
Follow people in your space and interact frequently in a polite and friendly way. You don't want to network with the sole purpose of getting a job or making it obvious that's why you're here. First and foremost, you're here to meet like-minded people and make friends - anything beyond that, is gravy.
Create a blog. This gives you content to share with your network and let's them know, you know, what you're talking about (and it's generally just fun).
Avoid hard-selling or self-promoting often. I think it's important to have a healthy balance between self-promotion and genuinely interacting with others. If in every interaction you're trying to push your brand new this or your awesome that, people are going to see that and form ideas about your intentions.
Be on your best behaviour: everything you post online, stays online.

Don't give up

I know that sending in endless resumes can get tiring after a while. And, there are a lot of factors that are at play when you're applying for jobs, but don't give up on the networking aspect.

Let me know on Twitter at @imtyrelchambers if this post has helped you or if networking helped get you your first job.

How to avoid "hobby" burnout

Tyrel Chambers — Tue, 08 Mar 2022 02:33:52 +0000

It's often looked down upon when one values rest over constant hard work. At least, that's how it's been for as long as society has existed. However, things are changing.

This topic is closely related to any topic around "burn-out", "overworking", and "just generally working so much you forget your own reflection and your friends forget you exist". And I'm sure you've experienced these things before too. That feeling you get when you're tired of doing what you used to love and thinking about doing that in the future, puts a weird feeling in your stomach.

We've all dealt with this more than once in our lives. I've experienced it often enough to know how to avoid it, or at least keep it at bay and I'd like to share my process with you. I'm hoping it will help someone out there!

This is tailored more to programming than other hobbies, but nevertheless, the points here are transferrable.

A little back story

I've been programming for the better part of 8-9 years at the time of writing this (2022, future me). I've been programming for a while with tutorials, guides, courses, and just my own side-projects. I've tried to have other hobbies to occupy my time, but there's nothing quite like building your own little apps... anyways.

I've hit burnout more times than I can count and it's scary! I hate the feeling I get when I've clearly overworked and haven't taken breaks when my body was telling me too. Over the years, I've become much better at knowing when my body is telling me to take a break and I've become much better at listening to it.

Once I broke out of that mentality that told me I can't take break or else the world would fall apart, that's when I truly found freedom. Freedom from having to constantly perform, and freedom to rest.

In reality, if you take a day or two, even a week, from programming or whatever hobby you tend to do on a daily basis, for the most part, it's not going to hurt you. Life is short so be sure to take care of yourself and the things you love.

You don't have to program when you don't feel like it

I always thought if I took a day off, I'd be behind and my career would be pushed back further and further. Believing that, was a mistake, but I didn't know any better. I always thought that I had to be programming everyday, all the time, but I was wrong and all that led to were month long breaks and a lot of stress.

In about 2017/2018, I took up narrating thriller stories on my Youtube channel Stories After Midnight. I uploaded a video every few days for a long while. To date I haven't uploaded in two months for a few different reasons, but the biggest among them is burnout and a lack of desire to create that type of content. But, for the past year (before I quit/took a break) I had been dealing without burnout for a while. Reading stories felt like a chore and something I had to do every other day.

The problem with Youtube is, people expect regular content, at least in my particular genre. Dealing with burnout in a content-creator sort of way is a different kind of animal. There's a lot of pressure to keep creating content and pumping out new things regardless of how you feel. On the other hand though, a vast majority of people are forgiving and most encourage breaks and times of rest!

But after 370 about 1,000 stories read, I've taken a break; not that it matters in this context haha.

How I avoid burnout

Stop as soon as you feel like it's a chore

I've gotten to the point where if I don't feel like programming even a little bit, I'll close my laptop even if in the middle of something, or I just won't look at my laptop at all. Whereas I used to just program anyways, now, I don't ever do that unless in important circumstances. I've found that this gives me the freedom to back away without guilt and live to love my hobby another day. Taking breaks no matter if I'm in the middle of something, or not, preserves my love for the craft and my sanity. I genuinely come back to it the next day or two, happy to be back.

Find other hobbies to fill your time (optional)

I also have other hobbies related to programming which helps me further my "cause" without actually partaking in the hobby. I have books that I read that relate to programming or the mind, building a startup, or running social media. They all interest me and are applicable to my field. I'd encourage you to find something else related to what you enjoy that you can do when you need a rest. Even if you don't have anything, don't feel bad either, just take that break and enjoy it.

Work on projects that excite you

I've also found that projects can become stale in their excitement. I have a few different projects that are unfinished and usually serve as a distraction from the main project I'm working on. It's nice to have a few different ideas on the go as you can hop between them when one is feeling boring. I'd encourage this, so long as it works for you. Whatever project you can find that excites you, start it and take it as far as you want; don't be afraid to take a break or switch off that one either.

Just take a break

This is also an option. Don't do anything. Turn on Netflix. Nap for 8 hours. Don't think about your hobby.

I hope this has helped

In the end, you have to take care of yourself; there really isn't any way around that. If you're not taking care of yourself, the things you enjoy doing will start suffering. So when you're feeling burnt out and your hobby feels like a chore, step back, consider the points above, and decide the best move forward. This does come with a caveat. In the past, I have felt burnout for weeks to months and sometimes I've had to overcome that feeling by making myself do what caused the burnout to begin with. I've found this can be difficult to do, but I've also found that more often than not, the love comes back. Your milage may vary, so listen to your heart and consider the options.

How I transferred Postgres data using Sequelize

Tyrel Chambers — Fri, 04 Mar 2022 02:37:34 +0000

Hey there!

Have you ever asked yourself "How do I transfer data from one database to another without actually putting any real effort into it?". Me too.

It would be nice if there was a tool that could allow us to interact and mutate data using a GUI because I can't write SQL to save my life.

In this article I'm going to talk to you about how I transferred data from one database to another without exporting/importing the data. I had tried numerous ways using different export options within pgAdmin, but was generally unsuccessful. Growing frustrated I decided to look outside the box and try something different entirely. This will be a general high-level overview of how I did this, but not necessarily a step-by-step since you might not be using the same tools as I and I'm not a pro at pgAdmin or exporting SQL data.

The new database had significant architectural changes, so a simple export/import wouldn't have been good enough (I'm also not that great at writing my own SQL to be able to transform it anyway).

An introduction

I recently remade one of my first production applications. The reason for the rewrite was I had grown in my knowledge of programming overall and felt the current version of my app was flaky at best. This database wasn't big by any means, but it was being used in production and the last thing you want to do is lose data, somehow.

Using Sequelize to connect to both databases

This is probably a risky play if you're not careful because one brain-fart or wrong move and you could do some serious damage to both databases and your emotions.

Within my docker-compose file, I created another database that was blank. I named it something random because the name isn't important since it's temporary. I exported the production database and imported it to my replica database; including the commands to create everything from scratch.

Once this data was successully important, I created a new sequelize instance in my index.js file within my models folder that sequelize can generate for you. I named it something crazy like sequelize2 and gave it the value of a postgres uri string with the proper credentials to connect to that database.

I find the benefits of doing it this way are:

No risk of data loss in your production database by botched code
Not having to deal with foreign keys in export

I thought 'why not use the tools I already know how to use?'

Technically, you could straight connect to your production database and go rogue and silly, but hey, if that's you, Godspeed!

We're connected to the replica database

Alright, we're here. I'm going to layout some of my code so you can have an idea of my approach to the actual migration process. Make sure you have two connections setup, mine look like this:

let sequelize2;

sequelize2 = new Sequelize(process.env.OLD_REDDEX_DB);
db.sequelize2 = sequelize2;

When it's setup this way, we can access our replica database by referencing db.sequelize2 and our main database db.sequelize. This will allow us to easily pull from one database and insert in another. Now, I don't know if this is "the best way to do it 🙄", but it worked for me and I'd do it again.

Creating the query function

I created a function for query each table I wanted to include in the migration. All it did was fetch the data from the replica database and return it.

./migrate.js

const getUsers = async () => {
// sql statement to return all users
const sql = `SELECT email,uuid,password,initial_message,repeat_message,website_id,youtube_id FROM users`;
// return all users
const users = await db.sequelize2.query(sql, { type: QueryTypes.SELECT });

return users;
};

As you can see, this queries the data held in my users table and returns it to me. However, we now need to mutate that data to fit our new tables and overall database structure.

Mutating the data

Next up, I created a function to receive the data return by the function above and mutate it to fit the new table structure.

./migrate.js

const migrateUsers = async () => {
  const users = await getUsers();

for (let i = 0; i < users.length; i++) {
const user = users[i];
const {
email,
uuid,
password,
initial_message,
repeat_message,
website_id,
} = user;

    const newUser = await db.User.create({
      uuid,
      email,
      password,
      email_confirmed: true,
    });

    await newUser.createProfile({
      greeting: initial_message,
      recurring: repeat_message,
      words_per_minute: 0,
    });

    if (website_id) {
      const website = await db.Website.create({
        uuid: website_id,
        userId: newUser.uuid,
      });

      newUser.websiteId = website.uuid;

      newUser.save();
    }

}
};

Now I can use Sequelize to do what I need in order to properly mutate that data and make it fit in my database. The only thing that changed was the columns names in some tables and generally cleaning up unused or improperly named columns. I find that leaving tech debt like this (the improperly named columns and poor layout) can create issues down the road when you try to work with that data. In the new database, I made sure to take care of that from the start.

Executing the functions

At the end of the file, I created a general main() function that executes the functions above, in order. Any functions that query and return data, are listed within their respective mutation functions. I found this worked really well for me because if one function failed, it didn't mess with anything outside it's functional scope. Breaking down the process into smaller functions is just good practice in general, anyway.

./migrate.js

const main = async () => {
  // await migrateUsers();
  // await migrateWebsites();
  // await migrateTags();
  // await migrateSubmittedStories();
  // await migrateRecentlySearched();
  // await migrateContacts();
  // await migrateContacted();
  await migrateStories();
};

main();

I had multiple functions targetting and mutating multiple different columns. You can just add whatever you need in order to complete the process.

Conclusion

Now that we have our data, we've mutated it to suit our needs, you're good to go.

What I did was I entered my docker container that contained both databases. I then ran my migrate.js file or whatever you named it, and let it do the rest.

I hope this has helped give you an overall view on how to do something in a bit of an unorthodox way (in my opinion). It didn't make a whole lot of sense to try and do it in a way I was unfamiliar with, instead I just used the tools I was given.

Happy hacking!

Why do I Use Custom React Hooks?

Tyrel Chambers — Mon, 20 Sep 2021 02:05:49 +0000

If you're like me, you know hooks exist and you know you can make your own, but you might not be sure how to do that, or why. In this article, I'm going to try to explain when you can use custom React Hooks to clean up your code and abstract your state.

Why do I use custom hooks?

Custom React Hooks are fantastic at abstracting your state away from any one component and allowing other components to tap into that data. I've refactored a few large apps of mine using custom hooks. A huge benefit of this refactor was being able to share my state across a couple components without worrying about messing it up.

Having your state encapsulated in its own function ensures that wherever that state is used, it'll be consistent. You won't have to worry about passing state down through props to child components, just call the function!

Make sure your custom hook begins with "use"

When you're building your own React Hook, our hooks must begin with "use". As silly as it may sound sometimes, that's how it's done. If you're building a hook to store the current user, you would create your own hooks folder and inside it, you would have useUser.js which would also be the name of the hook itself!

I like to show examples of what I'm talking about because that's just how I learn.

Let's look at a barebones useUser hook:

export const useUser = () => {
  const [currentUser, setState] = useState()

  const setUser = data => {
    setState(data)
  }

  return {
    currentUser,
    setUser
  }
}

When we want to take advantage of this custom hook, inside the component you want to access this state, you would include:

export const SomeComponent = () => {
  const {currentUser} = useUser()
  /* code */
}

You can pass in an initial state too

A cool thing about writing a custom React Hook is, among other things, you can pass in an initial state, just like you can with the useState hook (because useState is just a hook anyway).

I'm not sure if it necessarily needs to be said, but, here is how we would initialize our state in our custom React Hook with existing data.

Copying our previous example:

export const useUser = (initialState) => {
  const [currentUser, setState] = useState(initialState)

  const setUser = data => {
    setState(data)
  }

  return {
    currentUser,
    setUser
  }
}

As you can see, we pass our hook some data that gets passed to useState.

export const SomeComponent = () => {
  const {currentUser} = useUser({
    name: "Tyrel"
  })
  /* code */
}

So now when our currentUser state is initialized, it will have {name: "Tyrel"} already existing inside its state.

This makes it pretty easy to say pull data from an API, then pass it into a custom hook with some other functionality.

You don't always need a custom hook

I'm no expert, but you don't always need a custom hook.

As I've already mentioned, using custom React Hooks is great for using state across multiple components. If you need to keep track of certain data and it's scoped to only one component and maybe any children and doesn't need to be accessed anywhere else, useState within that particular component is acceptable. Don't make things any more complicated than they need to be.

Using my own hooks has changed the way my code looks and operates and it makes me a better developer!

If you would like to read more about custom hooks, check out React's official documentation

Why I use React Query

Tyrel Chambers — Sun, 05 Sep 2021 14:18:28 +0000

I tend to write my APIs as REST. However, when I implemented GraphQL in one of my projects, I loved the way it provided its fetching status, data and other information.

Being able to control your UI via variables such as isLoading, was a lot of fun.

I used to try and write my own solid way to fetch data from my APIs but controlling my UI becomes a chore. For example, not loading a page before certain data came in used to be more hit or miss than anything else.

I'd heard of React Query, but I wasn't exactly sure what it did and why I should use it. Like any new project, I decided I'd give it a shot because I like to incorporate something new in every new project. What I was left with was an amazing experience.

It behaves similarly to GQL in the sense that you have access to a bunch of variables that give you finer control over your calls and therefore, over your UI. Not only that, but it can also replace your global state management.

I'm by no means an expert on React Query as I've just started using it myself, but maybe I can help you make the decision to give it a try.

How it can replace global state management

This confused me greatly when I first began using React Query. I wasn't sure how I could get a user, for example, save the data, and use it somewhere else without making a needless call.

When React Query makes a call, the data is cached (this is your "state"). This means that instead of making another call, it will serve up the data it has in its cache and give it to you. When that becomes stale, it will fetch from the API and the process repeats. You can also specify how long data should stay fresh (stay in the cache without being fetched) and you can also invalid other queries, but let's not get ahead of ourselves.

In one of my projects, I replaced 90% of my global state with the help of React Query.

How React Query is used

This may or may not be correct so please don't call me trash on the internet or I'll tell my mom.

I think in order to effectively communicate what I'm thinking, I like to use pictures so I can walk you through my code.

I'll give you the full snippet here, then break it down piece-by-piece to try and explain it better.

// hooks/mutations/useLogin.js
export const useLogin = () => {
  const history = useHistory();
  const queryClient = useQueryClient();
  const { mutate } = useMutation((data) => login(data), {
    onSuccess: (res) => {
      queryClient.invalidateQueries("currentUser");
      const { token } = res.data;

      window.localStorage.setItem("token", token);
      history.push("/dashboard");
    },
  });

  return mutate;
};

If you're familiar with GraphQL, then this will look a little familiar to you and it's what I loved about React Query.

I encourage you not to copy this code if you're learning it for the first time but type it out yourself so you burn that into your memory banks.

Our useMutation function takes in whatever data we pass to it. If you were to look at my LoginForm, you would see a line of code like this:

  const login = useLogin()
  login({firstName: "tyrel", lastName: "chambers"})

Whatever data you pass to your "login" function (it can be whatever name you want it to be), will get passed as an argument in our useMutation function in our hook. The login(data) piece you see there, is the API call we make with the data we passed in from the actual login form. In our case, it's the email and password of the user. Now we can send this to the server to be validated and have our user returned.

In my case, I have a function called login.

// api/login.js
export const login = ({ email, password } = {}) => {
  return request.get("/login", {
    params: {
      email,
      password,
    },
  });
};

Just for the sake of clarity, I've included the function that makes the actual API call.

We have our user, now what?

Within React Query's mutation and query functions, we have access to the property onSuccess. This does what you think it would do, when the query or mutation finishes in a successful state, execute this code.

  onSuccess: (res) => {
    queryClient.invalidateQueries("currentUser");
    const { token } = res.data;

    window.localStorage.setItem("token", token);
    history.push("/dashboard");
  },

In my onSuccess block, I invalidate my initial user query.

You can name queries, you see. This is so if you need to invalidate some data (which means to force React Query to fetch it again from an API). The beauty about this is you can use invalidating queries in tandem with your cache (and stale times) to create an effective system for your API calls. When I invalidate my currentUser query, this means that React Query will make a call to the database to fetch my authorized user instead of using the cached version. This is also helpful if you update your user's profile or account in your web app. You can invalidate that query which would force React Query to fetch from the API again, which returns and caches an up-to-date user object. It's pretty wicked.

The rest of the block is saving the JWT I receive and redirecting to the dashboard.

Accessing React Query's cache

React Query really makes working with API and data, fun. Rather than setting up stores to save my current user (or really anything else), we can use React Query's caching ability. That's where I got a little confused on how to access that data.

I'll provide another quick example of how you can use React Query's caching ability as your data store.

export const useUser = () => {
  const token = window.localStorage.getItem("token");
  const info = useQuery("currentUser", getUser, {
    enabled: !!token,
    staleTime: 1000 * 60 * 5,
  });

  return { ...info, user: info.data };
};

This is my hook that queries my database for the current authorized user. I supply my JWT and off it goes. When it comes back, I set a longer stale time because it's unlikely the user object will change and when it does change, I'll invalidate it anyway and force React Query to fetch an updated user object.

Here is how it is used:

  const { isLoading, user } = useUser();

When the function useUser() is called, it'll do one of two things. First, it'll check to see if this data in its cache is fresh (the data being my user object) and if it isn't it'll do the second action which is fetching the user from the database. So it'll either use the user in cache or it'll fetch a new one.

I thought that if I included useUser() that it would call the API regardless so I wasn't sure how to use React Query to avoid that. What I found out is that all I have to do is execute that function call and let React Query do the rest. It'll check its cache and determine whether or not to make a call.

Conclusion

React Query has been an absolute delight to work with. Going from an unstructured, unopinionated way of making API calls and controlling the flow of information to my UI, to one that gives me finer control over how things flow, makes my code feel more stable. I can count on the data I need, to be there and with the variable they expose, I can control the state of my UI by hiding pages or waiting on data to arrive before proceeding in a more effective manner.

I would 100% recommend you take the time to learn this technology if you're looking for a fun way to make API calls :)

And that ladies and gentlemen, is Why I use React Query.

When to use Flex vs. Grid

Tyrel Chambers — Sat, 04 Sep 2021 23:23:04 +0000

Confusion around Flex and Grid is still prevalent in today's developmental world. It's easy to miss the difference between the two since, on a basic level, they do the same thing. They help you layout your page in a structured way.

It took me a while to see the difference between them and why I should use Grid in some circumstances and Flex in the others. Hopefully, I can help you decide when to use Grid and when to use Flex.

This won't be a tutorial like you'd expect- there won't be any code. This article will be more of a high-level explanation on why/when we use Grid and why/when we use Flex. I know there are a ton of posts and videos out there talking about this particular comparison, but I'm hoping that maybe I can help you understand the difference.

Grid was designed for 2-dimensional layouts (rows and columns at the same time). Flex was designed for 1-directional layouts (rows or columns). These two methods share similar properties and behaviours, but both have their own use-cases.

Grid

Grid is amazing for creating a predictable layout on a macro level where the structure is important. It makes it easy to work with different screen sizes without worrying about throwing your page out of whack. Sometimes Flex can act a little unpredictably on a grand scale and if you've worked with Flex, you know what I mean.

In the example below, there is a list of items, of which I've only shown four, that shows a Grid layout in action.

Keep in mind that in reality, I could use a Flex layout to achieve this Grid look. However, when using Grid, it gives me more control over the width of the items, how they wrap around and flow down the page, and makes my UI a lot more stable.

This example comes from Reddex.

Each item is part of a Grid. It's currently 2-wide on larger screens but shrinks to a 1-wide grid.

If there are multiple items to be shown on a page and structure matters, I tend to use Grid. I know the graphic isn't the most high-tech or advanced, but using it in the way that is shown, is how I tend to use it. It's also used because we are working with a multi-dimensional layout.

Flex

Flex is great for working with individual items. It allows you to work the whitespace around your items to your advantage. The size of each Flex item will determine how much size it takes up in its parent container. Using certain properties, you can decide how they interact with their siblings.

On the other hand, Flex is great for layouts on a micro-level. I use Flex religiously on a smaller scale like with the screenshot below.

The parent of each item is display: Flex (oops, I included some code). This lays out my content on the X-axis, in a row. When the parent gets too small to fit them on the same axis, they will wrap below each other.

Technically, I could use Grid to accomplish the same task, but it would add a little more work and a little more structure. Because that content is only on 1-axis, using Flex makes more sense.

In this example, I use Flex on a small scale where the structure of these items isn't entirely important.

Conclusion

Grid is used to layout content on a multi-dimensional level whereas Flex is only used in 1-dimension.

If you need flexibility, use Flex. If you need structure and predictability, use Grid.

What is a Ternary Operator in JavaScript?

Tyrel Chambers — Sat, 04 Sep 2021 22:49:45 +0000

A ternary operator is a way to write if/else statements in one line, however if you've never heard of them before, they can be tricky to understand.

Anatomy of a Ternary Operator

They consist of 3 fundamental components.

A condition followed by a question mark (?)
An expression to execute if the condition is truthy
An expression to execute if the condition is falsy

A ternary operator is written like this: isTrue ? true : false. We have our condition isTrue. It's the variable we are checking. It represents if (isTrue) in a traditional if statement.

The true after the question mark represents tha expression we will execute if the variable we are checking returns a truthy value.

The false is the expression we will execute if the variable is falsy.

It took me a while to figure out how to actually write ternary operators because I didn't understand them, so I stuck with if statements until I forced myself to learn them.

Since then, I use them quite often, however ternary operators shouldn't always be used, in my opinion.

I use ternary operators when I need a quick check if something is true or false. Use whatever gets the job done, but also provides decent readability.

How it differs from an if statement

Ternary operators work more like if/else statements.

If I were to write...

isTrue ? true

It would be like writing...

if (isTrue) {}

The difference is our ternary operator (the first code block) will fail whereas our if statement will succeed.

It needs an expression to execute for a truthy or falsy result. With that said, ternary operators are more like if/else statements.

They really work liike...

if (isTrue) {
  truthy()
} else {
  falsy()
}

A complete example

In order to wrap this up with a pretty bow, I'll include a full example of how a ternary operator can be used.

const favouriteColour = "blue"

const isBlue = favouriteColour === "blue" ? "it's true! it's blue!" : "it's not blue :("

console.log(isBlue) // "it's true! It's blue!"

// Let's change our fav colour

const favouriteColour = "red"

const isBlue = favouriteColour === "blue" ? "it's true! it's blue!" : "it's not blue :("

console.log(isBlue) // "it's not blue :("

Ternary operators are amazing to use. If you're having a tough time understanding it, just keep practicing and working at it. As with anything that is unknown, through consistent practice, you'll understand it before you know it.

Just remember favouriteColour === "blue" ? is our condition, ? truthy : is our code to execute if it's truthy, and : falsy; is our code to execute if it's not.

I Built a Developer Productivity Tool!

Tyrel Chambers — Wed, 07 Apr 2021 00:28:04 +0000

Hey everyone!

After many failed interviews absolutely nuked my self-confidence and love for programming, I decided I didn't really like the idea of working for someone else on their product. It's not that I never would, but I instead decided to focus on making my own ideas.

For the past handful of months I've been working on this little thing called Kanlen. I'm still figuring out exactly what "it is".

I'm not a fan of wasting too much time on repetitive tasks even though I repeat myself often, but, here we are.

I had an idea one day. What if there was a way, to build our your CLI command using a GUI of sorts? That would take the guesswork out of figuring out the correct syntax for the CLIs you use. For me, it's a lot of CRA.

It might also be nice to know what flags I have available to use in this command. I sure can't remember all that.

I'm going to briefly explain what Kanlen does and maybe from that, an idea of the app will form, but for now let's think of it like a developer's productivity tool.

What does it do?

Well, we already spoke about the whole CLI thing, so on we go.

Save Environment Variables

If you're like me, sometimes you get a new development computer and forget to jot down the environment variables you're using. That happened to me while building Reddex. Losing those variables was super annoying.

I thought it might be cool if you could store them somewhere online. Then if you switch machines, it crashes, or spontaneously combusts, you'll have a backup of those variables.

Save your code like Gists

Perhaps the bread and butter of Kanlen, well, at least the main idea of it since the beginning, was being able to save your favourite functions.

I have a few pieces of code that I like to bring between projects and if I could save them in a spot that's easily accessible, obviously that would be pretty alright.

These pieces of code are sharable and if you download the Kanlen VSCode extension, you can import your saved snippets right into your editor. On the flip-side, if you want to create a snippet, you can do that by selecting a block of code and running a specific command. It's pretty neat in my humble opinion.

Moving on

Those are a couple things it does, it you're interested in reading more about it, check out the main page Kanlen.

This is just a little side project I've been playing with since late 2020. It's still in development, but I love where it's going and maybe it'll help you too someday.

Be a Better Self-learner

Tyrel Chambers — Mon, 12 Aug 2019 16:44:56 +0000

I want to preface this by saying I think formal education is great, and required for certain fields. For example, you're not going to become a brain surgeon by watching YouTube. I think it's fairly obvious what can be self-taught vs what you should go to school for. I'm a web developer of which I'm self-taught. Going to school at this point would not only be redundant, but it would be a waste of money.

For being a web developer, you can go to school and get a degree in it which will help you in the long run in terms of giving the company you're interviewing with, confidence in what you can do. However, this isn't for everyone.
I have a diploma from the local college in Law & Security, so I have a background in a formal education. Now, college was great, the structure was pleasing, networking with professor's and classmates, was a definite plus, however, one thing I've learned with being a self-taught web developer is: learning how to learn.

Watch tutorials & read blogs

The best way to get started learning something new, is to watch tutorials on getting started in the field you'd like to get into. Youtubing or reading blog posts on getting started in whatever skill you're looking to learn, will help you plan out your path to success. It'll help you figure out the skills you may need to learn along the way.

I started out by Youtubing: how to create a website from scratch. My first entry into creating static websites was using notepad and saving an index.html file to my desktop. Everyone starts somewhere, but it's important to figure out where to start. Watching tutorials (many tutorials) will help you figure that out.
It would also be beneficial to look at websites like SkillShare or Udemy, even PluralSight for courses developed by professionals (if you'd like everything all in one place, otherwise stick to Youtube).

Mentally create your dream project

Tutorials are great and you'll be able to create little projects here and there if they're present in the blog you're currently reading, or the video you're currently watching.

However, creating your own project is equally as important, but first you have to dream it up. Dreaming is critical to learning, in my humble opinion. If you're not dreaming, you're likely not being inspired. It's ok to dream, no matter what others try to tell you. Dreaming creates hope, a plan of action, motivation.
Dreaming of your next big app can help kickstart your journey to creating that app. It'll help you with critical thinking and planning out your roadmap to see you from start to finish.

Dreaming however, is hard! Not many people can or know how, or don't let themselves dream. How do I dream? Usually, like everyone, it's in the shower or on the toilet - let's be real. Thoughts will pass through my head around the lines of "How cool would it be if this", or, "How cool would it be if that". Once you latch onto an idea that sparks some interest, run with it. Think about how it might be done, what would it accomplish?
Coming up with these ideas usually revolves around dreaming of solving a problem. That problem may be an issue that only affects you, or it may affect a few people. If you're interested, I wrote a series of blog posts about solving a problem that I had, that also has been solving a problem for others.

While dreaming is great, creating your own personal projects in the beginning, is wildly important.

Create personal projects

In the beginning it's important to create personal projects that may never amount to much. The point isn't creating to project, but it's learning the many techniques along the way. Having a goal (creating the project) inspires action toward that goal. This results in learning how to create an index file, adding elements to that page, learning how to style elements, creating links etc. Because there's a goal, there's a clear plan of action, or atleast the ability and environment for such a plan to be created.

The most popular project people create while learning how to program is a todo list. It's the Hello World of personal projects. It's simple to start and covers HTML, CSS, and Javascript. Creating such a tool will help familiarize yourself with different aspects of those languages and general app development.
Personal projects should be quick throwaways that will help you learn the basics. Now, just do that a bunch of times! But, no, not really... actually yes, do it a lot. Do it until you feel comfortable solving a problem. Who knows, maybe you'll solve a problem later on using a "throwaway" you created before.

Get involved in open source

While I don't personally contribute to open source software (OSS), there is definitely a benefit to doing so. It'll get you used to working with a team of people, solving issues from simple bugs, to complex problems or refactoring code.
Once you become comfortable with HTML, CSS and JS, try looking through GitHub for good first-issues.

Working on OSS also looks pretty great on a resume.

How does this apply to other hobbies?

It'll be different for everyone, but I'm hoping that what I laid out will help you extrapolate and apply certain aspects of the journey I took to becoming a web developer.

Learning an instrument?

Practice 3-4 major chords, get efficient at chord changes to and from, mixing up the order in which you transition. Then practice a popular song that uses those chords and maybe one more that you don't know. That way you can have fun learning something you know, and it'll feel pretty good too.

Want to learn to draw?

Start out learning basic techniques and shapes. Sketching, the fundamentals of drawing. Once again, go to Youtube and watch some tutorials on drawing, then apply those immediately after, and practice them until you're good. Once you get started, you'll begin to figure out how to progress.

The point of being an effective self-learner, is to always learn. Push your boundaries and look for opportunities to stretch your comfort zone. If you stay stagnant and in one realm, you'll remain there. Growth and exploration are the foundation of self-learning.

So figure out what you want to do, figure out how to start, then get going and have fun along the way.

Build a Reddit Scraper: Setting up Dexie.js

Tyrel Chambers — Sun, 21 Jul 2019 00:48:58 +0000

Welcome! Today I want to walk you through the basics of setting up Dexie.js.

What Dexie is, is a wrapper around IndexedDb. It allows you to save more data than localStorage or sessionStorage could (they hold up to 5mb of data each). If you need to go above that, you can use IndexedDB. In most situations, I wouldn't really recommend it, especially if it's data that needs to persist. However for this scraper, whether the posts we pulled will get wiped or not, doesn't matter, we can just pull them again.

If you'd like to read up more on IndexedDb or Dexie, go to https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API and https://dexie.org/.

Dexie is actually fun to use, simple to setup, and their docs are developer friendly. They give clear examples and how-tos, which I appreciated

Setting up Dexie.js

I'm going to assume you have Dexie installed now. If you don't, go to the link above and download the library.

Thankfully, it's pretty quick to set up and they give you a basic example of using Dexie right on the front page.

For our app, I created a Database.js file where I hold the configuration and instantiation of our database.


import Dexie from 'dexie';

const db = new Dexie("Reddex");

window.db = db;
db.version(1).stores({
  posts: "++id, author, title, selftext, ups, url, num_comments, created"
});

db.version(2).stores({
  posts: "++id, author, title, selftext, ups, url, num_comments, created",
  authors: "++id, author",
  subreddits: "++id, subreddit"
});

db.version(3).stores({
  posts: "++id, author, title, selftext, ups, url, num_comments, created, flair",
  authors: "++id, author",
  subreddits: "++id, subreddit"
});

db.version(4).stores({
  posts: "++id, author, title, selftext, ups, url, num_comments, created, flair, postId",
  authors: "++id, author",
  subreddits: "++id, subreddit"
});

export default db;

That's my entire file.

To make use of this, we need to import it db. I used React for this project so I imported it into my app.js file import db from 'path/to/file'. If you're using straight vanilla JS, you could do the same thing, just import it into the top of your main scripts file.

const db = new Dexie("Reddex"); will open the current database (that means it'll use the current database 'Reddex') if it exists, if it doesn't exist, it will create it. I like that.

Each key represents a table in the database, where the comma-separated values represent the columns. The ++id will add 1 to the prior index so each entry has its own id that continues incrementing. The names of the columns are what will give us access to those values.

So, we import Dexie and create our new database. Inside the Dexie params, will be the name of the database that you want to create. Since my app is called Reddex (https://reddex.app), that will be the name of my database.

It's best practice to create a new version for every change to the database model schemas. Every time I need to add something to my database, I create a new version. The one thing I haven't done now, which I'll get to, is upgrading previous versions of the database, to the newer version.

I've already run into database versioning issues which I believe will be solved by upgrading them. From the docs, here is an example of performing an upgrade:

var db = new Dexie("FriendsAndPetsDatabase");

db.version(2).stores({
    friends: "++id,name,birthdate,sex",
    pets: "++id,name,kind"
}).upgrade (tx => {
    var YEAR = 365 * 24 * 60 * 60 * 1000;
    return tx.friends.toCollection().modify (friend => {
        friend.birthdate = new Date(Date.now() - (friend.age * YEAR));
        delete friend.age;
    });
});
// Always keep the declarations previous versions
// as long as there might be users having them running.
db.version(1).stores({
    friends: "++id,name,age",
    pets: "++id,name,kind"
});
db.open();

Saving To Our Dexie Database

Now that we have set up our database, we're ready to go ahead and begin saving data to it.

As I briefly touched on in a previous post (https://dev.to/imtyrelchambers/build-a-reddit-scraper-fetching-posts-4m50), I gave a brief overview of this saving process, which I'll touch on again here for the sake of keeping like concepts together.

export const saveToDatabase = async (posts) => {
  const newPosts = []; 
  posts.map(x => newPosts.push(x.data));

  await newPosts.map(x => {
    return window.db.posts.add({
      author: x.author,
      title: x.title,
      selftext: x.selftext,
      ups: x.ups,
      url: x.url,
      num_comments: x.num_comments,
      created: x.created,
      flair: x.link_flair_text
    });
  });
  return true;
}

In order to access our database from anywhere, the solution I went with was creating a variable and attaching it to the window's scope. I'm sure there's a better way to do this.

To create this variable, it goes something like this window.db = db;. Then we can access it from everywhere in our app.

You'll notice we access the window scope again to grab our db variable. Because we have a table called posts, that's what we chain onto our database variable. It says: I want to access our database and add() to our posts collection (or table depending on the terminology you're used to).

Grabbing Data From Our Database

Now that we've saved our data, we need a way to grab it. Below I created a function that will do just that.

export const getPostsFromDatabase = async (setPosts) => {
  const db = window.db;
  const posts = await db.posts.toArray();
  return setPosts([...posts]);
}

Like saving to our database, we want to grab the data contained in our posts collection (I'm calling it collection). We have to turn that data into an array so we can use it like normal later on.

In order to do this, we need our famous global variable which we will use to access our collection once again. To grab the data, we need to access the collection we want to pull from, in our case, it's posts, then we need to chain toArray() onto it. There, we're done. The next step would be to set whatever state or variable with the data we have.

Clearing Records From The Database

For Reddex, I wipe the database before I write to it. This is because I don't want duplicate entries saved and being retrieved later on. It makes sure that the data being displayed, is the same as the data being saved.

export const deletePostsCollection = () => {
  const db = window.db;
  db.posts.clear().then().catch();
}

If I was a good developer I'd probably do something in the then() and catch() portions of the promise being return, but here we are! (I joke of course (about myself)). This is where you'd display any errors that mean anything to the user or you want to do some random thing once the promise resolves, it's up to you.

That's about it when it comes to using Dexie.js! Give it a shot! Thank you for making it this far.

FIN

Build a Reddit Scraper: Composing Messages

Tyrel Chambers — Thu, 18 Jul 2019 15:56:33 +0000

Today let's talk about composing and sending messages via the Reddit API using JavaScript and React (is that good SEO?).

This requires that the user has said "ok" to you using their account, in fact, the majority of what I'm talking about is based off that.

So let's assume they said "ok" and you've set up your form and all we need to do is access that info and send a message with the API.

The context of this post will be in our confirm message component. This is the part where we have selected our posts and are ready to send our messages.

Creating Our Submit Handler

The link we will be making our post call to, is:

https://oauth.reddit.com/api/compose

Because we originally authenticated using the OAuth method, we need to make calls to the OAuth subdomain endpoint api/compose.

The tricky part was that you can't just send a post body request like normal, but instead we have to create some FormData. This is the way I ended up getting it to work, maybe there's a better way!

Let's pick apart the function.

export const sendMessageToAuthors = async (author, subject, message, removeMessagedAuthor) => {
  const tokens = await fetchTokens().catch(err => false);
  const fmtSubject = subject;
  const link = `https://oauth.reddit.com/api/compose`;

  if (!tokens || !author) return toast.error("Something went wrong");
  if (!message ) return toast.error("A messaged is needed to send");
  if ( !fmtSubject ) return toast.error("A subject is needed");
}

The reason why I stored my tokens for Reddit in the database was because I can now fetch them whenever and wherever I need them. I thought what might happen if local storage got cleared, or this or that. Atleast I know these tokens are always up to date because whenever the app is loaded, the app takes the refresh_token in the database, asks Reddit for a new access_token, then saves it to the user by passing the JWT token saved in localstorage, to the database.

So, we call that function to get our tokens which we will use to handshake with Reddit, which is to say, we will use it to show Reddit we are authenticated.

Because the ability to send messages is a power that requires great responsibility, the checks have to be on point. If anything is missing, we return, if anything is falsey, we return. This will prevent situations where perhaps we send a message and the title is undefined.

Formatting Our FormData

The next portion of the function, which will be added below our validation checks, is:

  const body = new FormData();
  body.set('to', `/u/${author}`);
  body.set("subject", fmtSubject);
  body.set("text", message);
  await Axios.post(link, body, {
    headers: {
      "Authorization": `bearer ${tokens.access_token}`,
      "Content-Type": "application/x-www-form-urlencoded"
    }
  })
  .then(res => {
    toast.success(`Message sent to ${author}`)
    removeMessagedAuthor();
  })
  .catch(console.log);

If any of our variables are empty, we immediately return and run away.

Otherwise, we start setting our form data. Your username is technically a "subreddit" according to the Reddit API, I was confused by that. That's why we need /u/ before our actual author's name. I'm assuming it stands for a user's endpoint, but is referred to as a subreddit in the docs.

Instead of doing the encryption we did before, in the original request to get our tokens, we instead include our access_token as the bearer token. The x-www-form-urlencoded portion is also very important.

Why you ask? Because it sends our author, subject, and message as key/value pairs separated by & for each pair, and assigned using =. More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST.

It's just another way to tell the server what type of data we are sending; what the structure is.

The toast is just sending a notification and removing the author is just a personal touch from me. What it does, is it automatically removes the author you sent a message to, from the list of total selected messages. This is useful for rapidly sending messages. Whereas before you'd send a message, click next, send, next etc., now it'll automatically go to the next one ultimately by resetting the index to 0 (more on that later).

Save Our Author to the Database

Just in case you're interested. For our Reddit scraper in this particular use case, I save the author to the database because our app will automatically choose between two different saved messages that I'll show you about once we get to the account page.

export const saveAuthorToDb = async (author, postId)=> {
  const token = window.localStorage.getItem("token");
  await Axios.post(`${process.env.REACT_APP_BACKEND}/api/profile/saveAuthors`, {
    author,
    postId
  }, {
    headers: {
      token
    }
  })
  .then()
  .catch(console.log);
}

We send the name of the author to our backend and save it. Then, when we retrieve it, we can cross reference with the author of the currently displayed author and go from there.

const messageHandler = () => {
    let authorExists = false;

    userProfile.authorsMessaged.map(x => x === data.author ? authorExists = true : null);

    if ( authorExists ) {
      setDefaultMessage(userProfile.altMessage);
    } else {
      setDefaultMessage(userProfile.defaultMessage);
    }
  }

Handling Our Component State

  const [ defaultMessage, setDefaultMessage ] = useState("");
  const [ subject, setSubject ] = useState("");
  const [ redditProfile, setRedditProfile ] = useState({});

  useEffect(() => {
    setSubject(data.title);
    const profile = JSON.parse(window.localStorage.getItem("reddit_profile"));

    setRedditProfile({...profile});
  }, [data.title]);

  useEffect(() => {
    messageHandler();
  }, [data]);

The reason why I did the state this way, is because if you need to make an adjustment to the current title, or message body, you can, and it won't affect the next post. It becomes prefilled with the message you've created, or, you can add you're own.

The useEffect's are just updating our state when the app mounts and when either data or data.title changes (you can reference the messageHandler function in the prior snippet).

That's about it! Just build out the UI as you'd like, and this info will helpfully get you going with sending messages!

At the time of writing, I don't have a loader on the button. I'd recommend this. When someone sends a messages, a loader should replace the button. This, to me, is just good UX and by getting rid of the button, it can prevent spamming.

I hope you enjoyed this post, now go make yourself an awesome Reddit scraper using JavaScript and React (more SEO, I think).

Bye!

Build a Reddit Scraper: Authenticating With Reddit OAuth

Tyrel Chambers — Mon, 15 Jul 2019 16:13:35 +0000

Create Your Reddit Developer App

We’re continuing our series on Build a Reddit Scraper. This will be done using JavaScript!

To get started with authenticating with the Reddit API, we need to create a developer app that will allow us to actually use the more advanced features of Reddit’s API.

For reference, you can find everything I’m talking about, here: https://github.com/reddit-archive/reddit/wiki/oauth2

I’ll walk you through what I did to create a pretty stable system in my eyes. I’ve done a bunch of different tests - but that’s subjective.

Finding The Right Scope

Alright, the first thing we need to do is direct the user to a special endpoint that will present them with a choice to either give our app permission to authenticate with their account, or not.

You’ll have to fill out the certain portions yourself that call for your app name and secret. You can find these values on the page where you created your Reddit app on their website.

My link looks like this -

    const link = `https://www.reddit.com/api/v1/authorize?client_id=${process.env.REACT_APP_REDDIT_APP_NAME}&response_type=code&state=RANDOM_STRING&redirect_uri=${process.env.REACT_APP_REDDIT_REDIRECT}/signup&duration=permanent&scope=privatemessages identity`;

The documentation does a pretty good job of explaining each individual requirement here, but one thing that tripped me up was try to interpret the actual documentation when it comes to figuring out what scopes you need.

The scope is: what parts of a user’s profile will you need access to? As you can see, with my app, I want to be able to see get the user’s profile itself, so I chose Identity, and I need to be able to send/receive private messages.

If you go to https://reddit.com/dev/api you can see a list of documentation. It’s pretty overwhelming at first and there isn’t a whole lot to help guide you through it. Hopefully I can help with that.

In the left sidebar, it shows you the endpoints that you can access. Look for what you think you’ll need in terms of access, and at the top of that particular section, you’ll find the scope. This scope is what you will need to add into the scope section of the url above.
If you need more than one scope, make sure to add a space between each scope item.

Beside each subtitle in the main column of content on the right, you can also find the REST action that represents that endpoint, and the scope that will be needed to access it (the green rectangle).

So now we have access to our scopes. You can throw that link into a function that gets called on click or something, and have the browser open a new tab, or just change the url in the current tab. The user will be taken to Reddit where they will then allow or deny your app.

If they approve it or deny it, they will be redirected back to your app, to the URL specified when you first created the Reddit app. The redirect uri is the URL that Reddit will redirect to after they have made a decision, so make sure you’re redirecting back to the page that is handling your signup process.

Getting The Access Token

Now the user has hypothetically said “yes” to our app’s request.

We now have to make a post request to another endpoint. But before we can do that, we need to parse the URL query parameters.

When the user is redirected back, the URL includes a “code” parameter that we’ll use to make our POST request to that URL.

    const getParams = () => {
    const params = (new URL(window.location)).searchParams;
    const approvalStatus = params.get("code") ? params.get("code") : false;

    if ( approvalStatus !== false ) {
      UserStore.getAccessToken(approvalStatus).then(res => {
        setCredentials({...credentials, access_token: res.access_token, refresh_token: res.refresh_token})
      }).catch(console.log);
      setFlow(2);
      setApproved(true);
    } 
  }

In case it helps you, there is my code that parses the URL, then does it’s thing in terms of parsing the URL and deciding what to do after.
It then calls another function which is the meat and potatoes of our auth flow.

  getAccessToken = async (token) => {
    if (!token) return null;
    const encode = window.btoa(`${process.env.REACT_APP_REDDIT_APP_NAME}:${process.env.REACT_APP_REDDIT_APP_SECRET}`);
    const redditTokens = await Axios.post('https://www.reddit.com/api/v1/access_token', 
      `grant_type=authorization_code&code=${token}&redirect_uri=${process.env.REACT_APP_REDDIT_REDIRECT}/signup`,
    {
      headers: {
        "Authorization": `Basic ${encode}`,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    .then(res => {
      if (res.data.error) {
        return toast.error("Please re-authenticate");
      };
      return res.data;
    })
    .catch(console.log);


    return redditTokens;
  }

If this is successful, you’ll be golden, but only for an hour, then you’ll need to get another code.

When we parse the URL and pull out the “code” parameter, we use that to get our access token which I passed into the above function.

We have to make a POST request to

https://www.reddit.com/api/v1/access_token

where the body of the request is

grant_type=authorization_code&code=${token}&redirect_uri=${process.env.REACT_APP_REDDIT_REDIRECT}/signup

We take our code we previously got, and pass it into the code portion of the new URL (just a bunch of confirmations at this point). Make sure to read the OAuth2 documentation I mentioned at the very beginning of this article, it will help you know how to build the link to POST to.
We have to make sure we also encode our app secret and app name and include that in our Authorization header. This was a bit tricky for me to understand at first, mainly how to encode it. They don’t show you flat out how to do it, but mainly allude to it. After some googling and help from a friend, we came to this:

window.btoa(`${process.env.REACT_APP_REDDIT_APP_NAME}:${process.env.REACT_APP_REDDIT_APP_SECRET}`);

Which works!

The function getAccessToken is called once we receive the go ahead to authenticate with Reddit. Once that finishes, we are all set.

The problem comes when, after an hour, we need to make another request to an OAuth endpoint.

What I did was created a backend for my app which holds my user model. During the sign up process, I send the access token and refresh token, and save it to the database.

I also created a function that retrieves those tokens. In another post, I’ll go over the auth flow with my actual backend and not Reddit.

Every time my app loads, just for the sake of easiness, I call the function that refreshes my access token.

export const renewRefreshToken = async () => {
  const encode = window.btoa(`${process.env.REACT_APP_REDDIT_APP_NAME}:${process.env.REACT_APP_REDDIT_APP_SECRET}`);
  const token = await fetchTokens();
  const jwt = window.localStorage.getItem('token');


  if ( !token || !token.access_token ) return null;


  await Axios.post('https://www.reddit.com/api/v1/access_token', 
    `grant_type=refresh_token&refresh_token=${token.refresh_token}`,
  {
    headers: {
      "Authorization": `Basic ${encode}`,
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
  .then(res => {
    saveTokensToDb(res.data.access_token, token.refresh_token, jwt);
    getCurrentAuthenticatedUser(res.data.access_token);
  })
  .catch(console.log);
}

The important part is calling the fetchTokens function and waiting for it to finish because what that does is, grabs our locally (localStorage) saved JWT token, decodes it on the backend, and uses the user ID to look up the user.

It then returns both tokens, which allows the code to work. I haven’t run into any issues so far, doing it this way.

Hopefully this sheds light on how to navigate the Reddit docs in a basic way, and hopefully it will help you on your way to authenticating with Reddit using JavaScript. I’ll be attempting to write more posts in this series, if you made it this far, thanks so much for reading!