DEV Community: Unhexed.dev

Programmer Burnout is real and it is important to know how to overcome it

Unhexed.dev — Mon, 01 Jun 2020 13:20:45 +0000

Programming is fun, genuinely.

You get to build things and get instant gratification if it works as desired. There is so much joy in creating something.

But the process of creating something can be exhausting too.
There will be phases when you're stuck at a problem for way too long. Times, where you just want to leave everything and go away.
You'll experience burnout.

It leads to a loss of time. It leads to a loss in productivity. And more importantly, it leads to an overall decline in mental health.

I've been programming for the past 4 years and I have had a fair share of these burnouts.
Most of them last less than a few hours, but a few of them demotivate me from doing anything for weeks at times.
Thankfully, over time I have also learned how to get over them easily and to even avoid them.

There are thousands of reasons which lead to burnout.

All of us are different and our problems are different. Some more obvious than the other. What works for me, may not work for you.
It happens rarely, but once it goes over the tipping point, it's hard to get back to work.

Everything seems exceptionally frustrating. Programming begins to look like a chore.

The list of causes is endless. But there are always a few sure-shot ways to tackle it.

Solution 1: Schedule and Planning ⌛
I don't think I need to restate the obvious. Keeping a schedule is the best way to boost productivity. But there are good ways to do it and some not so good ways.
Rigid schedules sound great in theory, but they hardly ever work.

As a rule of thumb, I make sure to put 3 breaks of 1-2 hours in my day planner. This has led to a better inflow of thoughts and has saved me a lot of time.
I've also realized that flexible schedules have resulted in less amounts of stress. If you're working alone, try not to set unrealistic deadlines for yourself.
Pushing your limits is okay, but overdoing it is not.

Solution 2: Learn to focus. Other things can wait. 🎯

Often at times, the real cause of burnout is our lack of concentration. This will resonate especially well to those who have ADHD.

You're scrolling through Github. You come across a repository and all of a sudden, you have an amazing idea for a side-project 🤑. I get it. We've all been there.
Side-projects get allow you to put your creative hat on, but all this comes at the expense of foregoing your deadlines at work and personally, was one of my worst habits.

I still try to fight the urge every now and then, but with better schedule management, I can now give extra time to these ideas.

Solution 3: Keep a check on your health 🏃‍♀️🍎

Again a no brainer, but it was the most difficult thing on this list for me to keep up with. Being a programmer, you're constantly putting pressure on your mind.

You have a lot of pending tasks at hand, but so little time to complete. At this point, the brain too needs some extra energy to cope up with your needs.

Exercising is a great way to get some more oxygen to the brain.
There are tonnes of things you could do. Given the recent COVID situation, most of us are at home.
But you don't need a lot of time and space in your house to do it.

Pick a time, preferably in the morning 🌞, and then exercise for 5 mins a day. Initially, you'll find it very tiring. But slowly, as your body adjusts to it, you'll start feeling more energetic. You can increase the time. It is an amazing booster as it helps a lot in staying fresh throughout the day.

Solution 4: Knowing when to back off

Managing your schedule and meeting your deadlines is important, but also knowing when to walk away from your desk for some time.

Spending long hours in front of a computer reading Github issues and StackOverflow threads is not the solution. It's important to know when to back off and take a break.

Take a walk, scroll through Reddit or listen to some music. Just do anything to take your mind off of work.

Personally, taking a small walk helps a lot. It gets my mind juices flowing and I come to the desk with better approaches to solve my problems.
Developing a hobby is also a great way to take your mind off of work.

Solution 5: Get some guidance 🤝

The programming world is filled with tutorials to learn almost any technology. That only helps when you're just starting out. When you want to work on more serious products, the problems can easily escalate.

Learning to ask for help at the right time will save you hours or potentially even days of frustration.
If you're working under someone, your co-workers and manager are your best bet.

This is why it is equally important to have a healthy relationship with the ones you work. If the work you do is isolating and you rarely collaborate with others, you are extremely likely to suffer burnout.

If you're working alone, like most folks, a small community of people you know helps a lot! I am a part of multiple channels on Discord/Slack, where I can ask for help. I don't know them personally, but they help me and I help them when either of us are really stuck.

I hope these tips will help you detect burnout and get out of it before it takes a toll on you. 🙆‍♀️

This article is the beginning of a series Notes for a Junior Developer that I'm writing. I'll be posting future updates to this series on my Twitter. Also, if you feel like you want to talk about anything, just drop me a message. My DM's are always open for anyone looking for any help :)

How does the DEV feed algorithm work?

Unhexed.dev — Sun, 29 Dec 2019 07:02:40 +0000

I cannot understand how the dev algorithm ranks the posts.
I created an article yesterday, but even when I look for it under the tags I specified I cannot find the post.

Here is the post
If I look under #react or #javascript, I cannot find it.

I also haven't even come across my post once on my main feed, while articles which are just 20-30mins old have started to appear.

What's the secret?

React for Absolute Noobs: A 7 day guide

Unhexed.dev — Sat, 28 Dec 2019 19:50:25 +0000

I've been planning to learn react for a while, but I had been pushing it back for way too long. 😫

So I've decided that over the course of the next 7 days, I will:
a) Learn React at an Intermediate level
b) Document my learning, and hopefully encourage others who have been procrastinating, to learn along with me.

I plan to write about whatever I learn and try to explain it as lucidly as possible. Hopefully, if everything goes as planned, I will have 7 articles by the end of this week.

But first, what encouraged me to learn React?

a) It is scalable. Apps like Instagram and Netflix are built on top of React.
b) It has a huge demand in the job market. Everyone wants to hire React devs. Also, Angular development is going at a much slower pace than a couple of years ago.
c) I've read that it makes it easier to design highly complex dynamic apps which would usually be a pain in the butt(Sorry, Captain!) with normal HTML+JS. There's no way to know unless I dive deep into it 😉

Let's look at the basics!

Components

Components are the heart of React. Every element that you see in a web page can be represented as a component in React.
Look at this screenshot of the DEV home page.

Each of the posts is a component. The title of the post and the description, the icons inside the post component -- each a component.
The search bar is a component, the icons on the top right are all components. You get the idea!

State

State in React refers to the data. Talking about a component's state means simply talking about the data which is local to the state. The state may also refer to the UI-state.

Virtual DOM

If you've read some HTML/JS fundamentals, you've heard about DOM. It refers to the Document Object Model, which is essentially a tree like representation of HTML where nodes represent HTML elements.

React has something known as a virtual DOM. Now, whenever we make changes to a component, instead of rebuilding the entire virtual DOM, React just does a diff and only updates the components(and it's child components) where changes were made. This property is what lends to React the speed it has even while being complex.

Hello World! 👩‍💻

With a few basics out of the way, let's make a starter application using React. React does have a CLI, but since most people are familiar with script imports, we will import React from a CDN.
We'll look at how to do the same thing with the React CLI, a little later in this series.

For now, create a file index.html and open it in your favorite code editor.
I run things on VSCode and if you use it too, install a couple of extensions:
a) React Snippets -- for syntax highlighting, auto-complete and a lot more
b) Live Server -- to spin up a local server which will aid in fast development

I'm going to show you the code for now. Don't worry if some things don't make sense, I'll explain everything in a bit.

<html>
    <head>
        <title>Time to React</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>   
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class App extends React.Component{
                render() {
                    return (
                        <div>
                            <h1>Hi, I am Karan. React is ezpz!</h1>
                        </div>
                    )
                }
            }
            ReactDOM.render(<App/>, document.getElementById('app'));
        </script>
    </body>
</html>

Apart from the familiar HTML syntax, here are a few things to learn from this:🕵️‍♂️🕵️‍♂️

a) The first 2 script imports are for the core react library and the react-dom library(which handles the virtual DOM)

b) To declare a React Component, we need to instantiate a class which extends React.Component. This class must have a render() function, and the render function must return exactly one element (which is the <div> in this case).

c) But wait a second, how tf are we writing HTML inside the <script> tag? Well, it's not HTML, but a look-alike called JSX. JSX allows us to write familiar HTML-like code inside JavaScript.

d) The browser doesn't recognize JSX by default. This is the reason why we need the third import-- for Babel. Babel is a transpiler which basically converts the JSX into something the browser would understand. Also, another modification to work with Babel is that the script type has to be changed to 'text/babel'.

e) Finally, we need to tell the React DOM to render the function to the webpage. This render() function is not the same as the one in b). They are both from separate libraries, react and react-dom. This one takes 2 arguments, what to render and then where to render.

We reference the class App we created by using the <App /> self-closing tag. If our component was called SomeComponentName, we would use <SomeComponentName \>. The second argument tells it, that we want to render it to the div tag with id=app.

To see if this works, write down the snippet above in your editor and if you're using VSCode, you can right click on the code screen and click on Open with Live Server if you have the Live Server extension installed. You should see the following.

Hopefully you got the same output.

Adding State

Adding state to our component is as simple as creating an object named state inside our class.

state = {
    name: 'Karan',
}

Once that is done, we need to be able to access the state from within JSX. Now, to use JavaScript statements inside JSX we need to enclose them in braces.
Something like, {this.state.name}

This is how the entire code snippet looks like now:

<html>
    <head>
        <title>Time to React</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>   
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class App extends React.Component{
                state = {
                    name: 'Karan',
                }
                render() {
                    return (
                        <div>
                            <h1>My name is {this.state.name}. I just made a react app!</h1>
                            <h1>I can even execute normal JS stuff inside braces like {Math.ceil(9.3)}</h1>
                        </div>
                    )
                }
            }
            ReactDOM.render(<App/>, document.getElementById('app'));
        </script>
    </body>
</html>

Load the page up in a browser to see how it looks.

Nested Components

Nested Components are exactly what the name implies. They are children nested inside parent components. They help us design more complex components. To create and use a nested component, just declare a new Class and put it anywhere inside the parent component.

In the following snippet, I created a new component named Nested and put it in between the <h1> tags of the App component(which acts as the parent component).

<html>
    <head>
        <title>Time to React</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>   
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class Nested extends React.Component{
                render() {
                    return (
                        <div>
                            <h6> I am wild nested component </h6>
                        </ div>
                    )
                }
            }
            class App extends React.Component{
                state = {
                    name: 'Karan',
                }
                render() {
                    return (
                        <div>
                            <h1>My name is {this.state.name}. I just made a react app!</h1>
                            <Nested />
                            <h1>I can even execute normal JS stuff inside braces like {Math.ceil(9.3)}</h1>
                        </ div>
                    )
                }
            }
            ReactDOM.render(<App/>, document.getElementById('app'));
        </script>
    </body>
</html>

The page should finally look like:

YES! Together, we've successfully learned the absolute basics of React.
But wait! You thought I'd let you go without any homework? 🙅‍♀️🙅‍♀️
Here's what you have to do:
--> You have to design a Facebook post component.
--> Here it is for reference
--> Make sure you understand the hierarchy and design the sub-components accordingly.

The next article will probably be up by tomorrow.
This is my first time writing on DEV so if you liked it, please do tell me!

And if you're feeling absolutely generous, follow me on Twitter!

See you tomorrow 😉