DEV Community: Willians Faria

How to be more productive as a developer

Willians Faria — Wed, 21 Aug 2019 14:08:32 +0000

As developers, we are always filling our minds with projects and solutions, simple or complex that in most cases end up taking a huge part of our days.

With that in mind, we want to finish our tasks faster, being that task creating a new feature on an existing project or even finishing some new one, or that one that you haven't worked for months (hehe).

And wouldn't be great if we could spend less time to finish each one of these things? The big news is that we can, and that it isn't as complex as it seems.

This article was written with the intention to show you practical solutions to optimize your time, so let's start.

IDE or text editor

This is your fundamental tool to write code, and it is crucial that you utilize one that is competitive, modern and versatile. There are uncountable editors, both old and modern, choosing the best one for you isn't something I can do, but when you start looking for one, consider checking if it has functionalities like the ones below:

Allow editing and creating hotkeys
Allow creating snippets
Has a big community or huge amount of extensions

If your actual editor or IDE doesn't have any of these functionalities, maybe it's time to check if that isn't killing part of your productivity, and also maybe you should try to transition to a modern, and competitive one that actually helps you.

Hotkeys

The modern text editors and IDEs are now coming with much more functions that helps your life without the need of extra configuration, these functions helps in small actions that we do often, like selecting all occurences of margin-right in a css file.

Learning these hotkeys is fundamental for you to reduce some time spent, sometimes seconds and other times even minutes that could be utilized in another task.

But there are so many hotkeys that is complicated to learn them all at once, maybe even impossible, so my tip is to read through all of them and choose a few that would help you the most and then keep doing it untill you learn them all. You're gonna thank yourself for that.

A problem that can happen is that your editor may have not a hotkey for a specific task, in these cases, think about creating your own hotkey. Most IDEs let you customize their functionalities, VSCode, the editor I use makes it possible by just updating a JSON file. And you can always create a snippet to save you the time to write a repetitive block of code. By the way, let's talk more about snippets now.

Snippets

Snippets are abstractions of code that you can save to access again later using only a text hotkey, very similar to emmet, and I really like them because you can create snippets of big blocks of code that you utilize often, like react components, for example, and that can and certainly will save your an amazing quantity of time.

Almost all the editors, not to generalize, have this option, then I think you should check it now.

Extensions

One of the biggest reasons for me to utilize VSCode as my editor, is the huge amount of extensions available to almost anything I want to do, but the modern editors also have their extensions, the point here is, between the extensions made by the community, most of them are there to make processes easier, like highlighting specific points of code, indentation shortcuts, minifiers, the options are endless, and with that, their use can save your and expressive parcel of time that would be taken otherwise.

Bônus tip: if you utilize VSCode, I highly recommend that you check these extensions: Indent Rainbow, Bracket Pair Colorizer, REST Client and Prettie.

Time and focus

Being focused is one of the characteristics that potencialize your productivity in your projects the most, but being focused for a long time without distractions can be a tough task, and that's why I believe to be extremely important to utilize a strategy to manage your time focused and distracted, there are uncountable of them and a even bigger amount of articles talking about them, but I'm going to just say here two that worked for me:

Pomodoro Technique
10 minutes rule

I also believe that removing possible distractions is a important task to make you do more, letting your phone on the bag or in another room of the house, creating a new user just to work, not opening social media, all these things can impact your productivity extraordinarily.

Conclusion

All of us would like to have more time, and I believe that optimizing the way we do our tasks is a important step to achieve this goal. And of course you don't need to apply all of this in your life, just the ones that reflected to you.

Thanks for reading through!

If you liked please consider reading my other article:

ES6 Destructuring Objects and Arrays

You can talk to me on my Twitter

I would absolutely love to talk to you

ES6 Destructuring Objects and Arrays

Willians Faria — Tue, 06 Aug 2019 11:45:15 +0000

ES6 has introduced an awesome feature that is destructuring.Which is really useful when you're working wth react, for example, but the use cases for it are almost endless.

You can do array and object destructuring, or even destruct an object within an array, or vice-versa. So let's start simple, as I find myself using object destructuring the most, I'm gonna explain it first, and it's actually really simple.

Object Destructuring

For instance, let's say you have a person object with firstName, lastName, age, and hobbies, something like this:

const person = {
  firstName: 'John',
  lastName: 'Moore',
  age: 32,
  hobbies: [
    'coding',
    'drawing',
    'fortnite'
  ]
}

And let's say you wanna display on your app the first + last name alignside with a greeting message, you could do as following:

let greeting = `Hello ${person.firstName} ${person.lastName}, welcome back!`

But with object destructuring, you can make it in a way that you don't actually need to do that object.property syntax, and you might find this useful once you go to deeper levels of destructuring. To achieve it, the code would be like this:

const { firstName, lastName } = person
let greeting = `Hello ${firstName} ${lastName}, welcome back!`

You put the exact names of the properties you want to destructure inside the curly braces and after that you just tell javascript that those variables came from the person object!

A lot easy to read, right? But you might ask yourself, where do i use it?

If you are a react developer lke me, you can use it to access state properties or props on a function/class component, or even with hooks! The code below was taken from one of my projects on GitHub, just to show how i've used it.

export default class IntroSection extends React.Component {
  state = {
    animateIntro: false,
  };


  render() {
    const { animateIntro } = this.state;
    const { lightMode } = this.props;
    return (
      //...some code here...
    )
  }
}

But let's keep going, since objects aren't the only thing you can do this.

Array Destructuring

The same way you can destructure objects, you can do to arrays, but it can be a bit confusing to get started.
Let's now say that you have an array of planets, like the one below:

const planets = ["Mercur", "Venus", "Earth", "Mars"]

And you want to destructure it in a way that you have each planet labeled as planet 1 – 4, you could do it like this:

const [ planet1, planet2, planet3, planet4 ] = planets

So as you can see, each variable on the left side is the equivalent of an index of the array, thats interesting, but also gives us some questions.

What if I a have greater number of variables than the number of items on the array?
And what if i had nested arrays?
What if i don't know exactly the size of my array?

Dont worry, I'll cover those questions now.

Let's begin with the first one, passing more variables than the actual number of items on the array would return undefined as the output. Simple as that.

const [ planet1, planet2, planet3, planet4, planet5 ] = planets
// output would be: "Mercur", "Venus", "Earth", "Mars", undefined

Nested Arrays

You can also use destructuring on nested arrays, so lets say you have now an array of numbers.

const numbers = [5, [1, 2, 3], 6, 7]

And you want to get 5, 1, and 6 as the output. In this case, your code would look just like this:

let [ a, [ b ], c ] = numbers
// Output: 5, 1, 6

And you can actually go as many level deep as you want, don't need to worry about that. So that's left us with the last question.

Mapping Through the Array

Let's say now that you don't know exactly how many items would be on your array, but you want to destructure them all. You can do that in a simple way, using Spread Operator.

let [ planet1, planet2, ...others ] = planets

(…) is the spread operator syntax, another of the ES6 Features that i'll be showcasing soon.

Hope you've enjoyed reading through this guide.

You can find me on twitter: @wllfaria_ where I post weekly coding tips.

I would love to talk to you.