For the past couple years I've been using so much Typescript and Javascript, it should probably be illegal. That's been the case for about 10 years, ever since I actually began teaching myself programming.

I never really understood the gripe with Javascript, but man-alive, Typescript eats me alive every time. Not because I'm bad at it (although still learning), it's just a colossal pain in the butt. Working with it is literally a nightmare I couldn't wake up from for a while. 

This is entirely hyperbolic of course, I think what it does, it does well, and I mean if you want any sort of type-safety I guess it's the better of the alternatives? 

I suckered myself into working with Javascript so often without learning something new, I thought I became a smooth brain. Literally, the degradation in cognitive performance and decrease in confidence is actually kind of wild.

I didn't teach myself anything new for a good long while - just sticking to the same language and the same way of doing things. Since I've been laid off, I've been exploring and learning so much more that it's actually been fun again.

Now one could make an argument that the reason I didn't teach myself anything new was because I didn't want me ego to take a hit. I mean, my self-esteem fell so fast it was but a blink of an eye and I was questioning my sanity. That really opens your eyes to your mental predisposition I guess. But that's for another day.

Anyway, this I've been laid off I've picked up Go, HTMX, and SQL (raw, unadulterated SQL). I've learned something interesting during this process. Since moving away from the Javascript ecosystem and practicing DSA, learning different programming patterns etc., I feel like my mental cognition has increased. Weird.

I've been stretching myself mentally and it's been paying off. Things are still hard and I have to watch my thought processes when learning something new because for some God-forsaken reason, I think that I should know everything I don't know even before I see it for the first time. Crazy!

But learning Go has brought the fun back into programming and I'm excited to dive deeper into this great language! Also SQL is neat, and I wish I was using an ORM or something, but I know it's for the best. 

Breaking outside of the Javascript ecosystem and taking on something new has also (I believe) made me a better programmer and when I do program in Javascript, I'll be better prepared with different programming patterns because languages like C# or Golang or whatever, force you into programming in a certain pattern, right? So then you become familiar which makes you better in my opinion. With all this practice, now you can go from language to language with an understanding of how to effectively build software using its pattern. Which before was a problem for me. I didn't really understand different programming patterns and didn't really want to learn.

Since go is a more procedural language, I'm starting to understand what that actually means which is fantastic. 

Now I might totally be wrong, I'm still getting used to what are Object Oriented programming languages, what are procedural/functional. These are things I will be teaching myself because I want to learn the lingo.

Anyway, you've made it this far and you're wondering: "What did I just read?" And for you, I have no answers. Welcome to my blog where my thoughts become word soup. 

In the end learning Go, SQL, HTMX, and DSA etc., has been a lot of fun and moving outside of what I've lived in for so long (Javascript/Typescript) has been a breath of fresh air.

Give it a try! Learn something new especially if you've been in a particular ecosystem for a long while!

For the past couple years I've been using so much Typescript and Javascript, it should probably be illegal. That's been the case for about 10 years, ever since I actually began teaching myself programming.

Learning new languages has been eye-opening.

I've exited the Matrix. You should too.

I think there are a lot of questions going around about newcomers jumping into libraries like React while having a limited amount of knowledge around the language it's built on - Javascript.

Atleast that's what I see on Reddit, just general stuff asking about which library or framework they should jump into even though they don't know much about the underlying language. Which is fine. It's good to be curious and always looking forward.

However, you'd be doing yoursel a disservice by putting the cart before the horse and jumping too far ahead of your skillset.

If you're new, you're definitely going to want to stay in the mines for a while and learn the basics of development. This means if you're learning how to style a website, learn basic CSS before using Bootstrap or Sass etc. Learn the root before an abstraction.

The same can be said for anything you're learning. Root before abstraction. Javascript before React/Vue/Svelte. HTML before HTMX or another templating language like Ember or Handlebars (is that still a thing).

The reason being: imagine you got a job and you knew React really well, you're really good at it. That's great! The work has paid off. Now what if they moved to something else, what if they ditched it all together because the web-dev GigaChads got to the C-Suite and they decided to go with Vue (gag). Now what?

Because you won't have a deeper understanding of the underlying technology, I believe that'll be a disadventage for you. Keep in mind this is ONLY MY OPINION. It's also the perspective I took when I was learning early on. I remember picking up Bootstrap, but putting it down at some point early on in order to really understand CSS and not have to rely on some sort of abstraction.

When you are confident with the underlying technology, then definitely pick up something else, learn another thing. Now that I know how to use CSS on its own, I can move onto things like Tailwind and other CSS abstractions.

The same thing goes for me and Javascript. I started with Javascript then incorporated some Meteor, some Ember, some Gulp back in the day, lots of different things. Now keep in mind it's not always linear; I hoped around a lot. But learning Javascript was crucial to me knowing how to use React. Don't get me wrong, I don't know exactly _how_ React works under the hood, though I'd love to figure that out, but I knew enough where it was time to move on.

This isn't suppose to be some grand article, but it's important for you to know the basics before moving onto big-ole libraries and frameworks. Think about your future self: "What would happen if I couldn't use this library any more and had to use it's root technology?" That's what I ask myself when considering an abstraction. I think you should too.

Anyway, go get that bread. Take the time to learn and be curious. This curiousity will pay off down the road and never forget to have fun. Don't take this as gospel; mess around and try new things, but always come back to the root. Grow your roots deep, my friend.

Take care now, bye bye then.

I want to talk about going from knowing a limited amount of programming knowledge to jumping into using libraries like React, or Tailwind, or Bootstrap even. If you like this article, let me know, if not, crucify me - it's fine.

Why learning the basics is important for beginners

# Laid off.

Like so many people in the tech sphere (but of course, not limited to tech), I was laid off. I think like most people, it comes as a shock. And shock me it did.

It’s funny because it’s one of those experiences where you see everyone else going through and you think that it couldn’t possibly happen to you, yet here we are. It looks like I’ve joined the job hunt again!

You really learn a lot about yourself in difficult times like these. I don’t believe that being laid off has to be entirely a bad experience. Just like I don’t believe bad experiences in general have to be *bad*. I want to also preface that with a giant, solar system-sized asterisk that says **this isn’t always the case**, but more or less just a generalization.

When i was given the news, my mind immediately jumped to next steps. It was funny, I had no questions to ask because my mind was already long gone figuring out what to do to move through this tough situation. In and amongst the garbage of such a situation, there is a silver lining if you can find it.

My silver lining is:

- I can pursue a new company with new projects, salary, position, etc. and that’s exciting
- I’ve learned how I react in what is a very stressful situation and when i’m pushed to such extremes, what do i do inherently - what’s the first thing i do? Do i panic? Or do i start trying to find a way out.

I don’t think you should take much from me considering my situation. I’m privileged in a sense - i have a place to stay for the foreseeable future with what are relatively few bills. I could have a house to pay for, kids, etc. While that is true, it is nevertheless a stressful situation that so many people can relate to in recent years.

I planned for contingencies like “How long can I live off debt?”, “At what point will I get a minimum wage job to just pay the bills”, “What will I do in the mean time?” I also want to talk about a big lesson that I had to learn the hard way I wish I just did earlier.

## I took advantage of those around me

During the process of being laid off, i couldn’t have asked for a better workplace to support me during this transition. I know it was a hard decision for them and if it could’ve gone any other way, I know they would have done it.

The afternoon on the day I was laid off (funny enough my manager who was also on the call, was also laid off) I hoped on a call with him and we went over my resume, talked about my time there, the troubles of being laid off, my worries and fears, and steps going forward.

He helped me polish up my LinkedIn and gave me good advice on what to do next which included getting recommendations from the people I worked with - so that’s what I did.

I spoke to my manager, teams leads, coworkers and the CEO to get something to put on my profile which was awesome because they all came through and now I have some feedback for potential employers to see; it’s also nice seeing how they felt about me.

## It’s scary

The whole darn process is scary, but yet I feel like it’s going to be okay. I don’t know how or what will happen. With so many people flooding the market, how does little ol’ me separate himself from the pack? I have 2 years of professional experience with 7+ before this just hacking away - learning. That is probably the scariest part of it all. I look around on social media and see depressing posts about how long someone has been job hunting without any luck. I know there are a lot of different factors that come into play there that i’m not privy to, but one cannot help but think that the same will happen to them.

I don’t think there is much benefit to be had dwelling on such situations and questions, so alas, we shall move on.

The worst part of it all actually, is leaving my team.

## Always have “F-you” money

Straight up, I wish I learned this sooner, but I guess it has to be the hard way sometimes.

## The space in between jobs

I’ve thought about what would be some good things to do while I job hunt. So far my list seems to be something like this:

- blog a little more
- keep hacking on my own personal passion projects and see if i can make a few bucks with them
- learn data structures and algorithms so i can go into my next job more knowledgable
- consume more programming related content and live in this world (i genuinely do love it)
- be active on twitter

I figured I should probably release this blog post that has been sitting by since I was laid off. I'd like to say things are going to plan. I'm blogging more, diving into DSA and building projects while learning new languages.

I'm working on a podcast hosting platform just to scratch an itch, and for this project I'm using Go and SQL which are two new languages for me. I love the thrill of learning these new things.

Anyway, I think that's all for now. What will the future hold? Who knows. I guess there's always McDonalds.

Laid off.

Keeping this short and sweet for now because I just ran into this issue that happens infrequently to the point where I have a hard time remembering how to fix it, so here it goes.

Running your Next.js application in Docker on a VPS like DigitalOcean can be a bit of a brain exercise when it comes to think in more abstract terms about how to set it up correctly.

Now this post is probably going to grow as things become more fleshed out so let's consider this a journal of sorts.

Onto the first piece of information to remind my silly-self in the future.

## Set the proper URL environment variables
This bit me the last couple days until one day after a nice pump at the gym and a shower, I clued into what the solution was.

The issue was, the UI portion of my Next.js app wasn't able to communicate to the API within the same application. This comes down to 2 (in my case) environment variables that need to be properly set: ==NEXT_URL== and ==NEXTAUTH_URL==. 

The second variable may be unnecessary if you're not using NextAuth.

Anyway, in local development, ==NEXT_URL== will probably be set to something like `http://localhost:3000` and this tells the UI portion of the framework what url to hit the api with. 

When you're running this in ==docker==, this url needs to be the name of the docker container it's running in. For example: `http://web:3000` because in my docker compose file, my container name is ==web==.

That's it's proverbial localhost so instead of going outside the container to the URL in your browser, it needs to go to the container name itself.

Now there is another environment variable we need to set called ==NEXTAUTH_URL_INTERNAL==. From my understanding and experiences, the ==NEXTAUTH_URL== is responsible for handling callbacks from providers for example. It should be the URL of your website whereas ==NEXTAUTH_URL_INTERNAL== should be the docker address of your container.

If you weren't running it in Docker, you could probably get away with just pointing it out localhost. Now that I'm writing this, is there ever a case where that would point to an actual domain? I don't think so.

## Mounting environment variables via build secrets
Another thing that tripped me up was learning how to securely use your environment variables during your docker build. Because each ==run==, ==copy== etc., commands create layers which become cached, they can be inspected. 

If your build image doesn't get pushed to docker hub then I believe you're fine, but it's probably a best practice to get used to just not copying in your environment variable file in general.

To mount your variables during build time without exposing them in anyway, we can use build secrets. This is handy for situations like private npm packages where you need to authenticate in order to download them. In my situation it was pro FontAwesome packages.

### Mount it
In your ==Dockerfile== wherever you want whatever command to have access to your variables, you'll add this: 
`RUN --mount=type=secret,id=env,target=/app/.env npm run build`
This will mount your environment variable file into the target location from which your ==npm run build== can access them. 

But that's not all.

In our ==docker compose== file, we need to declare a secrets block like so 
```
secrets:
  npmrc:
    file: $HOME/.npmrc
  env:
    file: .env
```
and then we need to associate our web service with these files. 

```
build:
	context: .
	secrets:
		- npmrc
		- env
```
Now we can install our NPM packages or run scripts and have access to our environment variables without exposing them to the world. _I cannot be held liable if you get hacked_.

Ok, have fun.

In this short, but potentially growing, post, I want to let you know how I run my Next.js application in Docker on DigitalOcean. This also incorporates Next Auth!

How to use Next.js in Docker on DigitalOcean with NextAuth

Before we get started on this little article, let me give you some backstory. I'll try to keep accurate headings so you can skip through the article if you'd like.

The best thing that's happened to me in recent years, other than getting a job in web development, was starting a running routine.

For years I tried to start such a routine, but I always failed to keep going after the first run - literally. I didn't have a goal, a destination over the long term. 

What changed for me was a couple of things: deciding to join the military and reading/listening to Can't Hurt Me by David Goggins. I recommend that book to anyone struggling to do anything because it helped me kick myself into gear with his no-BS attitude. I won't go into too much detail because I think it would be outside the scope of this post. 

In short, I always gave up way too early, I never pushed myself through any hardships in exercising. Raining? Nah. Snowing? Nah. Sunny? Nah. There was no winning in my mind and I knew where the problem lay, but I felt powerless to change it. I felt like no matter what I tried to do, I was always at war with myself.

I was a big guy at the time, about 277lbs at my heaviest. I was sad, unaccomplished, and the least confident I'd ever been. When you're that big, nothing is fun and everything hurts when you're exercising.

## I decided to join the military

In October 2019, I decided I needed some structure in my life and to give myself meaning. I was working at a job I partly enjoyed, but I didn't want that to be the end game. Overall, I wasn't happy with where things were headed, so I decided "hey, let's do something big". I was looking for a purpose in life and the military seemed like the best option. I'll probably write another small post about how I retaught myself grade 10 math after being out of high school since 2011, in 2 months and scored incredibly well on our CFAT which is the "Canadian Forces Aptitude Test".

So, after I made this decision, I stumbled across the book [Can't Hurt Me](https://www.amazon.ca/Cant-Hurt-Me-Master-Your/dp/1544512279) by David Goggins. I wasn't sold on it because self-help books (not saying this is one), and books like them, I thought were just weirdness. 

But, this book changed my life.

I remember listening to this book twice for a total of just over 30 total hours before I said enough was enough. It spoke to so many insecurities in me and the mental battle I was fighting and had been fighting for years. At peak hopelessness, I learned that even though I was 265lbs (at this time), I could still make myself out to be something more than the nothing I felt I was.

Hearing about David Goggins torturous upbringing, the troubles in school, the fight with his weight and battling his mind in the same way I was, was reassuring me that I wasn't alone. He also talks about how he overcame all of these shortcomings and more, not just to put them aside and work alongside them, but to deal with them for good.

He ultimately became a Navy Seal, applied for Delta Force, became an Army Ranger, and is now an Ultra-marathon runner. His book resonated with something deep inside and ended up unlocking my mind to find its potential.

## It started in October

I concluded that if I was going to do this - join the military, I needed to dive in full speed. I went from not running, almost ever, to running nearly every day and yea, looking back, it was probably not the best. But run I did.

I ran about 1.88km every morning at 5:30/6:00 before I left for work. I knew that if I left it for after work, there was a 100% chance that I would be too comfy/tired/"I'll do it tomorrow". I needed to short circuit that and give it no chance to be a thing.

It was hard to get up and run at all and at that time. I'd end up sitting on the front steps for 10 minutes staring at my shoes while fighting a mental battle that was trying to get me to go back to bed. I'd already made it out of bed and that was a win, but this is where the rubber was going to meet the road and everything I felt throughout my life and everything that I was feeling then, was going to be the deciding factor of what happened next.

My rationale was, that it doesn't matter (to a degree) how long I sit here, as long as I don't go back to bed or leave this step. Eventually, I put one shoe on after the other, and when that happened, it was easier to stand up and walk out the door for what I knew was not going to be a fun time. Half the time, the key to literally putting one foot in front of the other, was just not thinking about "it". Did I want to put on my shoes and leave? Not at all, but I didn't think about it, I just put 1 shoe on and the next, etc etc.

The night before, I did myself as many favours as I could. I laid out in the open the clothes I was going to wear. This took out the guessing game and lessened the time it would take to get to the next step which lowered the risk factor of going back to bed.

I had my shoes placed on the steps so I could sit down and put them on. I chose the time I was going to run at and how far I was going to go.

My friend who was a marathon runner also helped me greatly. He helped keep me accountable. Thankfully, he was getting ready for work at the same time I was getting up to run so I'd text him every morning about what I did that day; how far I went and how long it took. I did that for months.

After the first run, it was almost comical. I felt dead on my feet and as I sat in my computer chair, my breathing was 100% wheeze. Every time I inhaled, it sounded like a gaggle of children laughing deep inside my lungs. My chest was tight, it didn't feel too good, but after that day, it never happened again.

So anyways, I was losing 1.5lbs a day just by interval running for about 22 minutes every morning! This was fantastic.

I did end up running into injuries as would be expected and I didn't know how my body would respond to this sudden stress of running, but in reality, I didn't really care. If I ended up having a heart attack while running and died on the side of the road, I was okay with that because where I was currently headed, what was the difference?

My biggest recurring problem was the shin splints. They hurt a lot and they were a constant presence. I decided that even with shin splints, I would run because it was either we go somewhere pain-free, or we go somewhere in pain, but there was only one outcome - going somewhere.


## I hit and surpassed my 1km non-stop running goal

I remember my first goal was to run 1km without stopping. I think I ended up hitting this goal 1-2 months after I started running, I can't quite remember. It happened on the day when my quads were yelling at me, my shins hurt, I really didn't want to run and I almost used my 1 allotted rest day for that week. Funny enough I ended up running and hitting that goal. I was ecstatic! 

Piggy-backing on that success, I went out again the next day for my run and ran 250 meters further than the day before which was 1.25km! Once I hit those goals, 2km non-stop came even quicker.

From there on I kept up this furious pace and even added in weight training with my friend 3 times a week. I ended up going from benching 80lbs to 150lbs in a month, but unfortunately, that ended because COVID decided to make its grand entrance.

I remember going out for runs where it was -21c and felt like -27 at 5:30 in the morning. It's hard to describe how cold that was. I went out wearing three top layers and two bottom layers and when I got home, I couldn't feel my sides or my quads. It was amazing. It was amazing because months earlier, I wouldn't have gone out even if it was a beautiful 21c day with partly cloudy skies.

Throughout COVID I was still running outside and using my stationary bike at home. I ended up going from 0km running per week to at most 35km a week with multiple 5km runs and a 10km run. Keep in mind, when I say run, most of the time I'm talking about interval runs.

In the spring of 2020, I ran my first 5km run with my friend who was in the process of becoming a cop! He was quite in shape actually, but he helped me finish that milestone when I wanted to quit at the 2.25km mark. I was so tired and my mind was telling me that there was no way I was going to complete this. But, my friend never let me stop and I didn't want to let him down even though I was checked out mentally. By the 4km mark, my feet were numb (that still happens and I don't know why perhaps my shoes are too tight?).

I finished the 5km run without walking.

After that, however, things sort of died down because now I was in a place where proper training would be needed. 

Shortly after completing that run, I thought I needed to do this by myself to prove to myself that I _could_ do it. It was a drizzly Tuesday and the sun was hiding behind some dark clouds. I threw on my jacket and drove to a trail that I ran at. Long story short, I completed that run without walking (5km).

## The injury that took me out in 2021

In June of 2021 however, a lot of things changed. I ran into a particularly nagging injury where my left ankle was in pain. Some days were better than others but running/walking was always an issue. The pain was felt behind my achilles, in between my ankle and my achilles. I don't know why I felt it there, but it hurt to walk or move my foot.

For the next six months, I ran maybe three times. I was worried I would do some significant damage to my foot and I thought maybe it would be best this time to rest. 

Over these six months, I ran less, I walked less. I decided I wasn't going to join the military because as a last-ditch effort, I applied to the company I'm currently working at and received an offer. The military was always a plan B. It was a tool to get me motivated enough to change the course of my life, and if everything else went to crap, it would at least give me a job that would be interesting for a moment.

When I received my offer from This Dot, I tossed aside the plans for the military (obviously) and as a result, the driving force behind my running was also gone. Because see, I was running and working out so hard to prove to myself that I could take the military requirements and surpass them. I wasn't waiting until I got to Basic Training to get into shape. I wanted to be so fit that instead of worrying about how I was going to make it through the runs and the other PT sessions, I wanted to be able to help others get through it.

My reason for running was gone, my reason for getting up was gone, and this all leads us to where I am right now. Sitting here at 253lbs after reaching my low of around 227-230lbs a year and a half ago.

## Where do we go from here?

There will be a follow-up to this post. It's on my heart to talk about what I learned about myself and my mind over the couple of years I was working out and running. While the injury sidelined me a long time and I didn't do much running through that winter, I've still learned a lot about myself. To the point where I am not worried about the future. I enjoy running. I learned what it takes to get me out and exercise. I learned how to work with myself to a degree, but I've still got a lot to learn.

Anyway, I'll save that for the next post. I know this isn't programming related and I debated whether or not to post this, so if you made it this far and read the whole thing, I very truly appreciate it.

I went from 277lbs to 227lbs in 1.5 years. Now things have changed. This is my running journey.

How I went from 277lbs to 225lbs in 1.5 years #DevsWhoRun 

I think having confidence is one of the most epic mind-games known to man. It's not about your skill necessarily, but it's about how you perceive yourself in relation to your peers or coworkers.

It often comes down to being inside your own head convincing yourself of things that aren't always the case. We've all been there, especially in new situations where we feel like we need to measure up and at a moments notice, all of a sudden, we don't feel like we belong and that's actually normal, believe it or not.

This post is about my experience as a junior developer and how I've dealt with and managed this feeling; and how I still deal with it!

So, let's talk about **"How to gain confidence as a junior developer"**.

## What it feels like

So, what does a lack of confidence feel like? I'm so glad you asked! I write this knowing my current coworkers will see this, potentially, and in that case, "hey guys and gals, thank you for helping me get my confidence on track!".

I've been developing websites for about 8-9 years at the time of writing this, and yes, I know, posts about imposter syndrome are such low-hanging fruit, I wonder why that is? I mean, that's rhetorical.

My lack of confidence has always been tied to how I perceive myself in relation to my peers. I work with some pretty brilliant people and sometimes, when my brain goes into a fog and I'm asked a relatively simple question, that's when I feel the most "unconfidant".

In my opinion, a lack of confidence could go hand-in-hand with imposter syndrome, I guess that's not so much of an opinion as it is a matter-of-fact.

The feeling of not measuring up can be overwhelming and I'm sure if you've felt this in any sort of capacity, you know what I'm talking about. The feeling that everytime you speak they might think that you don't belong there, but we will actually get to the reality of that soon.

## The truth

While we all feel this way at times and we think that we should probably just be quiet, the fact of the matter is we should do the opposite. The more we hide away and refuse to break out of this mental jail we've put ourselves in based of our false perception of reality, the greater that hold will become and the less likely we will be to grow.

Everyone from the bright-eyed and bushy-tailed junior developer to the most senior of developers feel this uneasiness often. You can ask anyone you know who you deem to be smarter or more gifted or insert adjective here than you and they will say the same thing.

### You have a decision to make

We come to face-to-face with a very interesting problem.

1. On one hand we can stay safe and secure in the eyes of others while battling our own demons. We can keep thinking that we will never measure up as we stumble blindly through our career making it harder on ourselves than it needs to be

2. On this hand, we can speak out and dispel these myths we've been leading ourselves to believe about the word around us. This brings us out of our own darkness and on our way to the light

I've had many conversations about this exact topic because it's one I've struggled with for a while - I've already said that, but knowing it can be managed and for a large part, put aside, is comforting. Even more than that, knowing that people feel the same as me across the experience spectrum is reassuring.

So we have this big decision in our way. Either we cower, or we rise up and shake our fists in the air! Think Braveheart or Gladiator, whatever get your heart pumpin'.

What do you want for yourself? Do you want to:

- live in constant fear and state of unease?
- always feel like you're not good enough?
- stagnate where you are?

The list goes on, but I think you get what I'm saying. If we want more for ourselves and our mental health, I don't think we can sit idly by as our own thoughts keep us trapped.

## It doesn't go away

That's the truth; it doesn't. All we can do is manage our expectations of ourselves in order to keep these intrusive thoughts at bay.

Everyone is on the same playing field where we are all just trying to do the best we can and make cool things in the process. We try to help others succeed while helping ourselves too.

Do you know how many times I've spoken to others with years of experience and heard their thoughts on this? Probably not, but nonetheless! The answer is: a lot.

Along with experience in code, or design, or whatever the case is with you, also comes strategies to deal with these thoughts.

## Tips for managing your confidence

I asked my very close friend and fellow developer what he would say to a junior developer who expressed these same feelings we've covered in this post.

For reference, he is a very talented and experienced Ruby on Rails engineer and I keep his words close to heart.

> "1. Unless you wrote this here language, you cannot measure up to    time and experience - everyone has their part to play and we wouldn’t hire you unless we thought you couldn’t hack it.  
> 2. All questions are dumb to someone. All questions serve a purpose to someone… the questions you ask are YOUR questions and anyone who thinks they’re dumb or doesn’t answer them, has no right to be in this field.  The only way we can get to where we need to go is by getting there together."

I also posted a tweet asking about how to grow confidence.

![How important is confidence as a developer? Confidence to speak up vs staying silent. Confidence to add your own ideas even if you think you’re not entirely qualified. How can you grow that?](https://cdn.sanity.io/images/rv9flsof/production/031ec295d6fe219be9e7baf9aab2cdf5bef8a90d-1640x880.png?w=450)

And here were some of the replies.

![My take—There are times to speak up and times to be quiet. It depends on context (boss, co-worker...)As for how to grow it? Politely share your honest opinion whenever asked. Being honest garners respect (usually ). As respect grows, you’ll be asked for input more often.](https://cdn.sanity.io/images/rv9flsof/production/a5d8157cc7ca11d21ba19c43c117a5d541c92a3a-1640x1104.png?w=450)

Now these people have a lot more experience than me, so what they have to say means a lot.

The going theme is if you want to gain confidence as a developer, you need to step out, show yourself that your ideas and thoughts are valid, get feedback, feel a bit better, ask another question, feel a bit more validated, and you keep repeating this.

However, even though our ideas won't always be validated, maybe we come up with an idea that isn't necessarily the direction to go, that's totally fine too. That allows you to learn and grow which in the end still works to build your confidence.

## Perhaps you aren't at a place to contribute with ideas yet?

These are a few notes I've written down that I try to practice often:

- Help other devs with their own work and be involved with troubleshooting. Even offering to just be a rubber duck (someone to bounce ideas off of, or just being there to be someone they can explain their thought process to)
- Your opinion is important: share it even if you're unsure of its merit. 
- Ask questions; speak up; get noticed
- Putting yourself in these situations will get you used to the feeling, but eventually you'll see that your ideas are valid and people are pretty decent
- Bonus: a good work environment certainly helps

## Give yourself a break

Don't judge yourself so harshly and as I write this, I need to take my own advice and will forever need a reminder. Take it easy. You're okay, it's going to be okay. Everyone started out exactly where you are. Your own experience and thought process is unique; you have value.

There's no secret sauce or magic button to poof this all away, but there are things we can do to manage these thoughts. Lean on those around you. Be vulnerable and let them know what you're feeling. Give them the opportunity to support you and help you, as everyone should.

Take a break, take it easy, don't judge yourself too harshly. We're gunna make it.

These are some things I've learned about gaining confidence as a junior developer.

How to gain confidence as a junior developer

[JSOperators](https://jsoperators.com) is a collection of Javascript operators presented in a way that makes it quick and easy to find what you're looking for. It used to be difficult or rather tedious to find the operator you were thinking of, that is more or less until MDN released a redesign of their docs that included a rather handy search feature. However, I wanted to build this tool anyway.

The little website was created to give us developers a quick way to search via name or sign. I'm not sure if you've run into the same issue before where you couldn't remember either the name or sign of the operator you're thinking of and trying to Google it was just as tough.

I wanted to share it with you just in case it'll help you find what you're looking for.

I'd love to hear your feedback and suggestions. If you have any questions, please feel free to contact me. If you'd like to see additional operators or would like to help me improve this tool, please feel free to [contribute](https://github.com/tyrelchambers/jsoperators/blob/main/CONTRIBUTING.md) to this project!

Check out the [JSOperators repo](https://github.com/tyrelchambers/jsoperators/tree/main).


I created JSOperators.com to help you and I find javascript operators in a flash

Introducing JSOperators.com

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](https://twitter.com/imtyrelchambers) if this post has helped you or if networking helped get you your first job.


Landing your first job usually involves sending hundreds of resumes. I want to talk about how networking helped me get my first web development job.

Networking to get your first web-development job

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](https://youtube.com/storiesaftermidnight). 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.

Losing one's passion for their hobbies through burnout is incredibly common. Here's how I avoid it.

How to avoid "hobby" burnout

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:

```jsx
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_

```javascript
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!


I used Sequelize to migrate data from one Postgres database to another

How I transferred Postgres data using Sequelize

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.

```js
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:

```javascript
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_

```javascript
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.

```javascript
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.

```javascript
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.


React Query has quickly become my go-to tool for executing API calls

Why I use React Query

The CSS box model describes the area around every HTML element. When you add padding, margin or a border, you manipulate these properties.

A visual representation of the CSS box model can be found in the dev tools of most modern web browsers like Chrome and Firefox. It's a handy tool to see what properties are affecting the layout of your content.

## Padding

Padding represents the area adjacent to your content. It is the area that wraps the content itself.

The red area represents the padding being applied to our content.

<div style={{ padding: "10px", backgroundColor: "tomato" }}> <p style={{ backgroundColor: "white" }}>content</p></div>

## Border

The border is the next layer that sits on top of our padding area, but underneath our margin as show by the green line.

<div style={{ padding: "10px", backgroundColor: "tomato", border: "5px solid green" }}> <p style={{ backgroundColor: "white" }}>content</p></div>

## Margin

The last property in our CSS box model is the margin represented by the teal area. It adds space to the external area of an element whereas padding adds space to the internal space. The border can be though of the dividing line between the two.

<div style={{ backgroundColor: "cyan", display: "flex", alignItems: "center", justifyContent: "center" }}> <div style={{ padding: "10px", width: "100%", backgroundColor: "tomato", border: "5px solid green", margin: "10px",  }}> <p style={{ backgroundColor: "white" }}>content</p> </div></div>

Sometimes when you're just starting out, it can be hard to decide what property would be most appropriate to add spacing to an element or elements. Padding should be used when you want to separate a piece of content from it's parent. It'd be like adding layers of bubble wrap to your package to protect it during shipping.

Furthering that analogy, the box itself could be thought of as the border. The border can be any width, or not exist at all.

Margin would be used to separate our box from other boxes so it's applied to the area outside our content. It's used to separate an element from another element.


Knowing what the different properties of the CSS box model are, can help you figure out how your content works with padding, margin and borders.

What is the CSS Box Model?

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 [IndexedDb](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) and [Dexie](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.

```js
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 [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:

```js
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 [Build a Reddit Scraper: Fetching Posts](/blog/build-a-reddit-scraper-fetching-posts), I gave a brief overview of this saving process, which I'll touch on again here for the sake of keeping like concepts together.

```js
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.

```js
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.

```js
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**


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

Build a Reddit Scraper: Setting up Dexie.js

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](https://reddex.app).

![Grid example](/images/grid%20vs%20flex%201.png)

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

![Grid example 2](/images/grid.jpg)

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.

![Flex example](/images/grid%20vs%20flex%202.png)

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.

![Flex example 2](/images/flex.jpg)

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.


In the hottest head-to-head to ever arise since the dawn of man. We will talk about the differences between Flex and Grid.

When to use Flex vs. Grid

Immutability means that a value or data structure cannot change. Explaining what is mutable(values that can be changed) and what is immutable(values that cannot be changed) can be tricky so let me try to sum it up the best I can.

## Mutability and Reference Types

First let me give a brief explanation of mutability and how reference data types are affected. Immutability only applies to arrays and objects because of how they are stored in memory for JavaScript. As opposed to primitive data types, objects and arrays are composite (or reference) data types. A composite data type in JavaScript has multiple values, which are grouped together. Composite data types point to the same location.

You can think of reference data types like this. Let's look at the following diagram created with the most advanced design techniques known to man.

![Object Picture](/images/objref.jpeg)

Say we create a new object like in the diagram.

```js
const obj1 = {
  name: "tyrel",
  age: 29,
};
```

This object gets stored in memory as a reference data type.

Now let's copy it.

```js
const obj1 = {
  name: "tyrel",
  age: 29,
};

const obj2 = obj1;

obj2.name = "Steven";

// obj1.name also becomes Steven even though we only targeted obj2. This is because they reference the same object in memory.
```

any object also referencing `obj1`, would have their values changed as well. It's like having an easter egg basket in front of two people. We are both interacting with that basket, eating the eggs (probably Cadbury) and painting them. That basket represents the object in memory and the eggs within it are its properties. If I colour an egg or destroy one, my friend will also have his destroyed or modified because we are looking at the same thing.

If you were to copy a primitive data type in this way:

```
let a = 1
let b = a
```

If you were to copy a primitive data type in this way, you would literally take the value `let a = 1` and copy it. `let b = a` would create a direct copy which means that `let b` would equal `1` because they become two separate entities rather than pointing to the same value in memory. If you were to then change `b` to `b = 2`, `b` would equal `2` and not `1`.

```
let a = 1
let b = a
console.log(“variable a:“, a) // 1
console.log(“variable b:“, b) // 1
b = 2
console.log(“variable a:“, a) // 1
console.log(“variable b:“, b) // 2
```

## Immutability

Immutability means that everything I explained is not possible. It saves any headaches caused by accidently changing an existing object.

### How do we make an object immutable?

#### Object.freeze()

`Object.freeze()` prevents any changes to an object. If you create an object and run `Object.freeze(myObject)`, you won't be able to change, add or remove any properties within.

`Object.preventExtensions()` and `Object.seal()` also accomplish the same thing.

## How we create a new object based on old data

By using pure functions. We want to make sure our original object doesn't change because that could cause some trouble. Pure functions would help solve this. A pure function will take in our current object and return a _new_ object instead of directly mutating our original object.

Our pure function could look like this:

```js
const updateName = (data, newName) => {
  return {
    ...data,
    name: newName,
  };
};
```

this will return a brand new object stored in memory along with our original object. If there are any other variables referencing `obj1`, they will remain the same even though we took the same properties and changed them. If a variable using `obj1` gets reassigned, then that object will disappear and we will be left with our new object.

## Conclusion

Immutability in Javascript (and immutability in general) means that the value or the structure of a variable cannot change. Once it's created, that's it. There are ways to create new objects using an existing data by using pure functions.


Immutability in Javascript is an important concept in programming. Let's talk about the basics.

What is immutability in Javascript?

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:

```js
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.

```js
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:

```js
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.

```js
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.

```js
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

```js
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!


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

Build a Reddit Scraper: Composing Messages

### 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 [reddit dev api](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!


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

Build a Reddit Scraper: Authenticating With Reddit OAuth

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](https://reactjs.org/docs/hooks-custom.html)


React hooks exist, but sometimes it can be hard to know when to use a custom hook to make your state more maneuverable.

Why do I Use Custom React Hooks?

## The Goal of this Series

This series will cover how I built a Reddit scraper using React/JavaScript and I’m hoping I can help explain a little but of how Reddit’s API works. My goal is also to make this beginner friendly, however, a knowledge of HTML/CSS/JS is going to be a must, but hopefully I can help you understand the basics.

## How Reddex Started

Reddex is an app I built to make use of Reddit’s API. Being a story narrator that gets my stories from Reddit, I needed a way to speed up the discovery process. It took about 3-4 months (working on my own time) to build out, what I feel is a very solid and useful application.

## The Problem

Before I built this app, the process of finding a story to read was a pretty tedious task. I’d login to Reddit and search the NoSleep subreddit and scroll through hundreds of entries to find the one that had a reasonable number of upvotes and comments. I let the community decide which stories were good, so I mainly looked at the upvote count.

For every post that has 1,000 upvotes, you have to scroll past about 30 entries that are between 0-100 upvotes. This amount of time wasted scrolling, built up and accumulated over time to the point where the task just because monotonous; I didn’t look forward to doing it.

I needed a way to cut down on this time, and other than trying to create an AI that will edit my audio for me, I decided this might be more feasible.

Reddex has cut down my discovery time by 99%. Where it used to take maybe 5-10 minutes to find 1 to 2 stories, with just a few clicks, I can send pre-saved messages to multiple article authors, rather than:

- Copying the story title
- Navigate to their account
- Click send message
- Paste title to subject line
- Open Notepad document and copy scripted message
- Paste message in message field and click send

And repeating for each individual story.

## The Solution

The solution to this massive problem and time-suck, was to create an application that took advantage of Reddit’s API. This was a lot harder than one would think. Reddit’s API docs aren’t user friendly and you’ll frequently find yourself trying to find your way (by Google) through Reddit’s docs.

I would recommend bookmarking critical docs just for your sanity.

I’ll describe in a general sense, how i solved this issue and built a reddit scraper with React/JavaScript and NodeJS with Express and MongoDB. In future posts, I’ll go over every major component of the application to hopefully help you create your own Reddit scraper using JavaScript.

## Fetching Posts From A Subreddit

Reddit doesn’t have an API you’d typically expect to find, however the API is still straight forward and consistent across the board which will help once you get used to how it works.

If you navigate to a subreddit and add .json to the end of the URL, you’ll see a JSON version of that page and all the posts there. This is great because we can fetch that url with .json included, and access those values.

Because they only return up to 250 posts even when accessing the JSON version, we have to create a loop that uses the “after” property on each group of data, to fetch the next 250 post batch.

Once that big fetch is made, I then saved the posts in the browser using Dexie.js which makes use of IndexedDb. I’d recommend checking it out.

I went with Dexie.js because the data I was pulling, was too large to be saved in localstorage. Keep in mind when you’re pulling the posts from Reddit, you’re grabbing a lot of posts, with a lot of text and that adds up over time.There was a slight learning curve with using Dexie.js, but I’ll show you how I setup my database (I may migrate this to my own backend, but anyway).

After we grab the posts, I then call a function that returns the items in the database and displays them on the page.

## Filtering The Subreddit Posts

Once the posts are displayed on the screen, a filtering method appears. For filtering, I can filter by upvote count, keywords (that will search the title and body), and by Series Only (this will be expanded to use other flairs too).

This allows me to punch some numbers in, apply the filters, and immediately (it’s instant) see the posts that match my filter query.

## Sending Messages To Authors

This was by far the trickiest part and it took me a couple months to figure out and create.

I’ll go into more how I built the UI and my choices in that respect, but in the overall scheme of things, you select 1 or multiple posts, open a modal to confirm each individual message, from there you can send a message to the original poster.

This was the last piece to completely eliminating the hassle of sending messages to people. I can select 10 posts and when I go to confirm each message, the subject is prefilled with the title of the story, the name of the author you’ll be sending your message to is there, your own username, and a textarea prefilled with a default message you can define in the account section of the app. If you want to change the message, you can do it on an individual level. So, populate with a pre-filled message and modify individually.


This series will cover how I built a Reddit scraper using React/JavaScript and I’m hoping I can help explain a little but of how Reddit’s API works.

Build a Reddit Scraper: Problem & Solution

Semantic HTML refers to the meaning of each element within our code. It describes the relationship between elements and helps the developer navigate the codebase. Rather than trying to parse "div soup" and figure out "what's what", we can use certain HTML elements to give us more information about the structure of our code.

Semantic HTML also plays a role in helping people who require assistive devices to navigate our site. Devices like screen-readers can use our elements such as `nav` or `header` to help the person know where they are and where they can go.

## Why it's important

Aside from helping us navigate our codebase and helping assistive devices navigate our site, using proper HTML elements can also help us rank better on search engines. This is known as SEO, but we won't be getting into that today. Using the right elements helps Google, and other search engines, know what content is on our page, and which content is important to show in the search result.

## The most popular HTML elements

Let's look briefly at the most popular HTML elements. This is not an all encompassing list however, just a brief description on how they are used.

**Heading elements (h1, h2, ... h6)** elements are used to describe the importance of the content to which is refers, in the form of titles or headings. If you had a website where you spoke about what you're interested in, an _h1_ tag would represent perhaps, your name because that's an important piece of information. What musical instruments you like isn't as important so you might use an _h2_ or an _h3_ to title them.

**Article** elements are used to describe an independent, self-contained piece of content. You would use an article tag to describe a blog post or a newspaper article.

It would look something like:

```javascript
  <article>
    <h2>My title</h2>
    <p>My content</p>
  </article>
```

**Aside** is used to display information that is more of a "thought" or a small piece of information. It's related to the main text, but in a way that would describe the main point of the text. Say you were talking about a vacation you had and you mention a building that you saw. Maybe you would like to include information about that building, but it isn't necessarily a part of the main story. You would put content like that in an _aside_ tag.

**Details** and **summary** are typically used together. Fun fact: if you need dropdown functionality out of the box, you can use these two tags together to create that without Javascript. It's pretty wild.

Summary is used to summarize the text within the _detail_ tag. It provides a visible heading. Detail is used to provide more information to elaborate upon the summary you give.

Check it out:

```javascript
<details>
  <summary>
    This is a summary
  </summary>
  And this is a lot more text!
</details>
```

**Footer** elements can be used multiple times in a page. They are used at the end of a section in a way that provides information to the reader/visitor such as copyright information, links, or author information. You can find these at the bottom of most websites. Footer elements cannot be descendants (placed within) header, address, or other footer tags.

**Header** can be used to introduce content. You'll typically find navigation links, images, search bars or other information used to introduce a section or piece of content. These are typically found at the top of websites, but also sometimes along the side, depending on the design of the website.

**Main** is used to describe the main content of the page. Exactly how it sounds, the most important content gets placed within `main`. Keep in mind that no more than one `main` element can exist on a page.

**Nav** is a big one. Use nav when the content within is used to navigating around your site. These are usually found in the header. While there are nav links found in some footers, they aren't typically found within a nav link as it's not necessary.

Nav tags aren't limited to navigation links, but you can have text that contains links and that is good as well.

**Section** last, but not least. Section is pretty straight forward. It's used to describe a section of contained content, like organizing the content on your page into chunks.

Sections should always have a heading with very few excpetions. It's used when a more semantic (a more specific) tag doesn't apply.


Semantic HTML is something every developer should know. Which elements to use and why, and what role they play.

What is semantic HTML?

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. 1. A condition followed by a question mark (?) 2. An expression to execute if the condition is truthy 3. 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 colourconst 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.


A ternary operator is a quick and dirty way to write one-liner if statements.

What is a Ternary Operator in JavaScript?

### Getting Our Posts

The first step to making our Reddit scraper an actual product, is getting actual posts. I live in the nosleep subreddit, but you can substitute any subreddit and it will be the same result.

If you visit [nosleep](https://reddit.com/r/nosleep.json), we can see a crap load of JSON. This is great because we can work with this.

This JSON is a representation of the data on the website and it’ll be the base on which we build our scraper. Every subreddit has a JSON extension that can be used to access that data. They also have a few other queries we can use like: ?limit or ?count. But, we won’t need to use that as we want it to default to its highest value.

Because of Reddit’s API and the way the data is given to you, you can’t grab all subreddit posts at once, we need to make multiple calls to the same url, but modifying the ‘after’ property as we go.

The after property specifies the next group (~250) items to grab, sort of like pagination.

```
export const fetchPosts = async (subreddit, setLoading, setPosts, category) => {
  const sr = subreddit.replace(/\s/g, '').trim();
  let endpoint = "";

  const link = `https://www.reddit.com/r/${endpoint}`;
  let posts = [];
  let after = ``;
  if ( !sr || sr.length === 0 ) return alert("Must include a subreddit");

  for ( let i = 0; (i < 10 && after !== null); i++ ) {
    await Axios.get(`${link}&after=${after}`).then(res => {
      after = res.data.data.after;
      posts = [...posts, ...res.data.data.children];
    }).catch(err => err);
  }

  return setLoading(false);

}
```

This isn’t the full function. I’ve removed some lines that aren’t directly fetch oriented.

The main gist of this function is to make our API calls to Reddit. I want to mainly focus on the for loop with the get request inside it. Chrome yells at me about making functions inside loops so maybe look at a better way of doing this, but anyway here we are so let’s continue.

We want to loop until the after property becomes null. Since Reddit only returns up to about 1000 posts, we can just set our limit at 10.. It’s arbitrary, I’ll probably just loop until after is null instead of limited the variable count, but it’s moreso there as a fail safe.

So, we need to define and attach the after query, you can do this as I’ve done or add it after the first loop, whatever, but the main thing I had to do was use the current after property, on the next request. This way, we can continue looping and calling, while stepping through the pagination style of Reddit’s API. If we didn’t change this value, it would keep grabbing the same set of data until i === 10.

After each successful request, we spread the data that contains our posts, into a variable that we later use to save to our database. We also update our ‘after’ variable with the value from that request.

The whole process takes about 10 seconds to get up to 1000 posts (it’s hit or miss how much is actually returned).

At the end of that function, we set our loading state back to false. If we don't, it will continue showing our loader and that is just counter productive.

Moving on.

```
  posts.shift();
  posts.map(x => results.push(x.data));
  deletePostsCollection();
  saveToDatabase(posts);
  saveSubredditToLocalStorage(subreddit);
  await setPosts([...results]);
  return setLoading(false);
```

This is a bit nasty to look at but, it works for me (once I refactor this, I’ll update the article). At this point we have setup our indexedDb database, don’t worry, I’ll go over how to do that.

I delete the first entry because it’s usually some announcement from Reddit that isn’t an actual post.

What I had to do was create another array that I could spread into, the actual, literal data we will be using. The reason why I did this was because it made sense in my mind’s natural data flow.

In order to make sure we don’t have duplicate data, or data from another subreddit etc., I deleted every post from the current database and then saved to the database, the data we just received. At this point, everything is up to date.

I then saved the subreddit, but that’s just for UI purposes and it’s a bit janky right at this moment, but it works. Following that, I update our local component state. This is useful for filtering.

```
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;
}
```

Here is the function that I’ve created to save our data. In order to have control over what I’m saving and it’s format, I created a new array. Because the data we have at this point, is inside a ‘data’ object, I didn’t want to save it like that and have to type ‘x.data.author (for example)’, I’d rather type ‘x.author’.

The ‘window.db’ is a reference to a global variable I made in order to access my Dexie database, everywhere, this will be changed at some point as I continue refactoring and I will update this article.

At this point, our posts are currently being displayed because they are saved in state, but we refresh, or close our browser, and come back… it still won’t work… and this is because of the format is currently in.

If we step back and look at:

```
 posts.map(x => results.push(x.data));
```

This is the data we push to our state. We push the results array that is in the same format as the data in our database. And the reason we do that, is because when the component loads:

```
  useEffect(() => {
    getPostsFromDatabase(setPosts);
  }, []);
```

We pull the data from our database and load it into our state.

In case you wanted to see the function that gets our posts:

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

This just fetches the data in our posts collection and then sets our state with that data.

The final step to displaying our data onto our page is just mapping our the state that holds our posts. I don’t want to confuse you by showing you what I’ve done, but the next step from this would be to, as I said, map over the state and display each piece of data as you’d like.

I hope this has helped point you in the right direction to building your own scraper! More to come.


The first step to making our Reddit scraper an actual product, is getting actual posts.

Blog