DEV Community: Daniel Castro

What you need to work as a programmer in 2022

Daniel Castro — Fri, 23 Sep 2022 17:17:40 +0000

This is a typical question of people who are starting in programming or of those who are already working and want to increase their productivity.

I have worked as a Software Engineer for the last five years so I believe I will be able to answer that question.

If you want to learn.

Well, I would like to start this section saying that I started to learn algorithms on a PC that my mother bought me when I was 12 years old. I started to learn algorithms when I was 17 years old which means that computer was an old one for that time. It just had 2GB RAM, 225GB (obviously no SSD), and an Intel CPU which I don't remember what it was. What I'm trying to say with this is that you can learn programming basically with any computer out there. Nowadays, CPU's are really fast and they can run basic algorithms in milliseconds.

If you want to start to build something.

Well, let's imagine you have already learned the basis of programming and now you want to build something. Here the original question can be harder to answer because it depends on what you want to build.

If you want to build some web app, I would say you will be fine with 4GB RAM and 125GB SSD. Basically all you need for web programming is a browser and a code editor. Assuming you have these specifications on your computer you will have to be careful with the tools you choose to work. You will have to use a simple editor like Sublime Text or VIM because the most powerful editors out there requiere more RAM. If you have ever used Google Chrome then you know it takes a lot of RAM and it is the most popular browser so I'm assuming you use that one too, but of course you can try with another one that doesn't require much RAM memory.

If you want to build some mobile app, I'm afraid that 4GB of RAM and a modest CPU won't be enough. Of course you will need SSD storage, nowadays it is difficult to work without that. At least you need 8GB of RAM and a good CPU, that's because when you build mobile applications you will probably need a powerful editor, an IDE, and an emulator to make sure your app work fine in different devices and a good CPU to compile your code fast.

I would apply those specifications to those who want to build some desktop applications.

If you want to increase your productivity.

Assuming you have some experience programming but now you have to increase your productivity and you don't want to waste time waiting for things to load. I remember asking myself what computer I needed to work without wasting time and I made some mistakes which I would like to help you to avoid.

As you have probably noticed I have mentioned RAM even more than CPU, and it's because in programming believe it or not you will need a lot of RAM memory. That's why if you want to be happy and have a lot of tabs open, several instances of your favourite editor running and all dependencies that your app needs to work. All of this at the same time, you will need 16GB of RAM and 500GB SSD. About the CPU, I think it's a difficult question to answer because it depends on how much money you want to spend, I would recommend M1 processors, Apple is doing a really good job with those processors, they are insane. But if you don't want to use Apple which is perfectly fine, I would go for those i7, i9 Intel processors of which I have seen some reviews on the Internet and they seem to be good enough, some coworkers use them and they work fine.

Conclusion.

I didn't give specific recommendations because I think everyone needs to search what is better for them. I just gave some general specifications which I think would work for different cases. I hope this article was useful for you, if you have any suggestion or any experience to share regarding the topic, let me know in the comment section.

Why I switched from VsCode to WebStorm

Daniel Castro — Sat, 03 Jul 2021 18:12:39 +0000

I want to start saying that I'm not trying to claim that WebStorm is better than VsCode and it is because I think that someone can feel more comfortable in VsCode rather than WebStorm or even in another tool, like Vim, Sublime Text, whatever. I just want to share with you why I decided to move to WebStorm and why I'm still using it and maybe you could consider using it too!.

The first reason why I decided to start using WebStorm is because I changed my computer, and as a developer with a lot of work I needed to start coding as fast as I could, so I downloaded VsCode because that was the editor which I used to use, then I realised that I did not have all my plugins that I had in my previous computer (obviously) and I did not even remember their names, it was very frustrating. After 1 hour trying to set up my VsCode environment I remembered that I wanted to test WebStorm so I thought this was the perfect moment.

I downloaded it and I launched it. The first thing that I saw was that beautiful Darcula theme that I love so much, I actually had tried to find something similar for VsCode but I had not found anything so beautiful. Well, I know, if you are reading this you are looking for some reasons more interesting than a theme, I just wanted to say that I love this theme for coding <3.

TODO comments

When I opened my codebase in WebStorm is I was able to see my TODO comments highlighted, I remember that in VsCode I had to install a plugin in order to get this.

Auto Import

This is really amazing and I know VsCode has something similar but I'm 100% sure that it is not as accurate as this. I usually copy/paste code between files and it is very common that in my copied code I have some dependencies, it was truly good when I pasted my code and WebStorm automatically found all dependencies and included them at the top of my file.

Git Integration

After coding some hours I got my first conflict in some of my files and it was really surprising when I came across a friendly interface where I was able to resolve conflicts easily. I can leave you some screenshots here but you will have to test it by yourself to notice that it is very good.

Debugger

This is my WebStorm favorite thing. As a Full Stack Developer I have to code in both React and NodeJS. I think the best friend that a programmer can have is a great debugger, whether you are working in frontend or backend you will need a way to find errors easily. The WebStorm debugger is really useful. You can set it up fast and start using it. You can set breakpoints on your code and see all your variable values in a good interface. This is useful for both Frontend and Backend but if you are a Backend developer you will love this at the very beginning.

Refactor

Doing refactor is not a headache anymore if you have WebStorm. If you have been coding for a while I'm sure you have found yourself renaming a variable in your code, this can be really annoying but in WebStorm it is really easy, you just have to go to Refactor -> Rename and it will rename your variable in all the places you're using it and the most important thing is that it won't open all the files where you're using it like VsCode does. It is just an example of the Refactor feature.

Final Thoughts

These are just some of the things that I like about WebStorm. I wanted to keep this article short and just share with you my experience of using WebStorm. I almost forgot to say that WebStorm is not a Text Editor, it is a JavaScript IDE and if you decide to use it you will probably notice an increment in your RAM memory use.

Let me know in the comments section if you have already used WebStorm and what your experience has been. I will be waiting for your opinion.

4 JavaScript things you need to know

Daniel Castro — Sun, 10 Jan 2021 23:22:39 +0000

As JavaScript Developer I have found a lot of interesting stuff, I'd like share with you 4 things that I think you should know if you want to be a better JavaScript developer.

.call(), .bind(), .apply()

If you have worked in React any time, I'm sure you have seen bind() method, maybe you have used it without know what it really means. Maybe you have seen some these methods in a some JavaScript library and you don't understand how call(), bind(), apply() it works.

The first thing you need to understand is what this means. thisrefers in memory to the object reference of the current context and the reference to where it refers can change according to where the execution phase of a context is executing.

This methods allow us to change the reference to where this refers.

.bind()

const user = {
  name: "Peter",
  lastName: "Parker",
  fullName: function () {
    return `${this.name} ${this.lastName}`;
  },
};
const print = function (greet) {
  console.log(`${greet} ${this.fullName()}`);
};

print("hi");

When we execute this code, we will get a error: this.fullname() is not a function because in print function this refers to global object, If we want to access the user context inside the print function, we can use the bind method, like this:

const myBindedPrint = print.bind(user);
myBindedPrint("hi");

So, what did we do? Well, we created a copy of print function and save it in our myBindedPrint variable. So, bind() method allows us to create a copy with a special feature, we can pass as parameter the context where we want this to refers.

.call()

.call() executes a function, like if we are using () and it allows us to pass as first parameter the reference to where should refer this.

const user = {
  name: "Peter",
  lastName: "Parker",
  fullName: function () {
    return `${this.name} ${this.lastName}`;
  },
};

print.call(user, "hello");

When we execute that, we get same result like when we use .bind(), the difference is that when we use .call() we don't create a copy, we just execute it.

apply()

Well, there's a single difference between call() and apply() and it is the way how we call it. .apply() method receives parameters as a array, like this.

print.apply(user, ['hello'])

In which case can we use it?

Function borrowing

When we want to share functions between different objects. Some thing like "borrow" a function to another object. Let's see a example.

const user = {
  name: "Peter",
  lastName: "Parker",
  getFullName: function () {
    return `${this.name} ${this.lastName}`;
  },
};
const dog = {
  name: "Thoby",
  lastName: "Parker",
};
const result = user.getFullName.apply(dog);
console.log(result);

bind (), call () and apply () have to do with the reference to where this refers, in each context, that is why it is useful, since with these tools we can decide what this means, it is powerful when solving problems related to the contexts of execution.

Multiples Promise execution

I have seen in beginners programmers a common mistake.

Let's imagine we have a method which call our API in order to save a product in a database, it is a asynchronous operation. Now, let's imagine we have a array products and we want to save them and wait until that to be executed to continue to do anything, whatever. we would need to execute several promises. I have seen something like this.

const saveProduct = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve({ data: {}, success: true }), 3000);
  });

const saveProducts = async (products) => {
  try {
    const response = await products.map(
      async (product) => await saveProduct(product)
    );
    console.log("success");
    return response;
  } catch (err) {
    console.log(err);
  }
};
const products = [{ name: "Pollo" }, { name: "Cerveza" }, { name: "Agua" }];
saveProducts(products).then((response) => console.log("response", response));

Maybe it seems to make sense, but this line => console.log("success") will be executed immediately, check it!.

What you need to do, is something like this.

const saveProducts = async (products) => {
  try {
    const response = await Promise.all(
      products.map((product) => saveProduct(product))
    );
    console.log("succes");
    return response;
  } catch (err) {
    console.log(err);
  }
};

If you execute it you will see it works as we expected. Our line => console.log("success") is not executed until all promise are resolved. Also, our saveProducts method returns all responses of our Promises.

Proxy

ES2015 proxies provide an API to catch or intercept any operation performed on an object and to modify how that object behaves. JavaScript proxies are useful for many things, such as:

Interception
Object virtualization.
Resource management.
Profiling and generating logs while debugging an application.
Security and access control.

To implement a proxy you need to know some terms.

target: the original object which you want to proxy.
handler: an object that defines which operations will be intercepted and how to redefine intercepted operations.

Let's see a example.

const person = {
  name: "Peter",
};

const handler = {
  get: function (target, key) {
    return key in target
      ? target[key]
      : `Property ${key} doesn't exist in this object`;
  },
};

const proxy = new Proxy(person, handler);
console.log(proxy.name); // Peter
console.log(proxy.lastName); // Property lastName doesn't exist in this object

There is a lot of things you can do using proxy. I'm going to show you a useful case.

Cache

const getArticles = (person) => {
  fetch("api-url").then((articles) => {
    // do something with articles
  });
};

This would mean that whenever the articles of a person is required, a new call has to be made. Instead, you could cache the articles when it is first requested, and subsequent requests could be taken from the cache.

const cache = {
  Peter: ["Article 1", "Article 2"],
};

const handler = {
  get: function (target, person) {
    if (target[person]) {
      return target[person];
    } else {
      // fetch here
      fetch("api-url").then((articles) => {
        target[person] = articles;
        return articles;
      });
    }
  },
};

const proxy = new Proxy(cache, handler);

This way, fetch will be executed only if the person isn't in cache object.

You can do many things with proxy like validation, providing a read-only view of an object, private properties, etc.

Composition

Composition is a simple but powerful concept. It's just a simple way to use multiple functions. Each function receives an input and hands its output to the next function.

Perhaps you have used the composition without knowing what that conceptually means. I will show you a simple example.

Let's imagine that we want to clean up the input that a user entered, and we have a function that removes white spaces, and another function that removes special characters.

const withoutSpaces = (value) => value.replace(/ /g, "");
const removeSpecialChars = (value) => value.replace(/[^a-zA-Z ]/g, "");

We can compose these functions, into one, by doing this:

const compose = (f1, f2) => (value) => f2(f1(value));
const emptyInput = compose(withoutSpaces, removeSpecialChars);
console.log(emptyInput("  d'ani   el")); // daniel

Our compose function returns a new function, which receives a parameter and returns the clean string. If you pay attention to this f2 (f1 (value)), you will notice that what we do is pass the result of the first function to the second function, it is that simple.

If we want to compose more than one function, we can take advantage of the reduceRight method.

const withoutSpaces = (value) => value.replace(/ /g, "");
const removeSpecialChars = (value) => value.replace(/[^a-zA-Z ]/g, "");
const toLowerCase = (value) => value.toLowerCase();
const compose = (...fns) => (initialVal) =>
  fns.reduceRight((val, fn) => fn(val), initialVal);

const emptyInput = compose(withoutSpaces, removeSpecialChars, toLowerCase);
console.log(emptyInput("  d'AVID   ")); // david

Conclusion

I hope these concepts have allowed you to learn / understand something new, if you have something to add, put it in comments section.

I will be writing in the next few days about other interesting concepts in JavaScript.