DEV Community: Peyman Eskandari

Create a simple URL Shortener for your website using Vercel

Peyman Eskandari — Sat, 17 Oct 2020 15:43:43 +0000

URLs could be long. Very long. When you have a blog, you try to create the URLs with meaningful sentences like working-with-new-suspense-system-in-react-17. It actually is a good title for the SEO matters but it's a real bummer to share. It's way too long to be transferred easily and quite ugly in full address:

https://someawesomesite.com/blog/working-with-new-suspense-system-in-react-17

But there should be a way between choosing that or something like react-17-suspense. Actually, there is a simple way when you use something like Vercel or Netlify. These services provide a way to help you redirect from an internal path to another URL. The target could be either internal or external.

So, what that mean to us? We could take advantage of this feature as a URL shortener service. You can create a smaller address for every path you want and then share that very small URL with others.

So, how we do that?

Easy! First, create a config file for your Vercel project called vercel.json.

Then add a redirects property to it and fill it with an array like this:

{
  "redirects": [
    {
            "source": "/react-17-suspence",
            "destination": "/blog/working-with-new-suspense-system-in-react-17"
    },
    {
            "source": "/gh",
            "destination": "https://github.com/p3yman"
        }
  ]
}

Just set the source and the destination and you're good to go!

You have a third option called permanent which is a boolean. This is the direct quote from the Vercel documentations:

permanent: A boolean to toggle between permanent and temporary redirect (default true). When true, the status code is 308. When false the status code is 307.

There is only one very important point here:

You could use this feature in your local environment using Vercel CLI tool. So, if you're developing a React or Vue or Gatsby project, it'll not work with the npm run serve or whatever script you use. It should be served by the Vercel, so it could make the environment not just for this feature, also for a lot of other things like routing or Serverless Functions.

You could read about the Vercel CLI here on its official documentations.

As you can check, you could open this post using this shorten URL, and also you could see my Github page from /gh link.

Learn fundamentals, there always will be another framework!

Peyman Eskandari — Wed, 12 Aug 2020 09:21:55 +0000

Maybe 15-20 years ago, there was an eagerness to search for new technologies or tools, and sometimes there was a big gap between finding new things.

But today it's not like that. You wake up and check your email. On the big list of newsletters, you find something like this: 20 new JS tools of July 2020. Just July? Oh, come on!

How could you catch up to all of that? Do you really need all those small libraries, npm packages, and so-called "frameworks"?

I know, these tools make our lives easier and it's not just for discovering new things or create tutorials, youtube crash courses, and blog posts. But the problem is not having new tools, it's just the stress of not knowing new things and not using them. I think this is familiar to a lot of us. You do search for a job, you found a good fit on position, location, payment, and scale. Then you check the "What we want from you?" section that lists a lot of technologies on their stack. You know Vue.js but they want you to work with React. You worked with TDD using Jest but what is Mocha + Chai (This is the most fun name combination ever!)?

It's a bad feeling, isn't it? You have multiple years of experience in the industry but now you are just a beginner? Of course not. Most of the things you know will be useful to you anyway. But you should know how to guide yourself through it, if only you learned the fundamentals.

What are the fundamentals?

Nowadays, we all are surrounded by courses, tutorials, and playlists which promise you that you could learn something like React or even worst, Gatsby in no time (something like 2-3 hours). But you know that's not possible. So, why these contents are so popular? The reason is just like solutions for being skinny and lose weight. They don't work. To be honest, they don't work as you expect. You may find these sources useful if you are trying to change your job from back-end developer to front-end developer and you need something to give you an idea about what's going on there. Or for someone without any knowledge of coding who wants to see what's what.

If you want to create your new personal website then you definitely should follow some 4 hours crash course on Gatsby or Nuxt to get to the result as fast as possible. But it's not the solution for you if you really mean to learn it. It's not even enough to read all the necessary documents just for the sake of reading something.

The problem is not limited to the Youtube playlists or very long tutorials. Even courses on sites like Udemy or Lynda could have the exact same problem. You find courses with the length of 50 hours on something like React but when you reach the content you hear a lot of "don't worry about this" or "just know that react will handle that". This is not learning something, it's just typing along and get the same result.

I'm not trying to disappoint you. I talked about the problem, now its time to talk about the solution. So, what can we do?

Understand concepts

Today solutions like libraries or frameworks have more things in common than you think. You could search for the comparison between these technologies to choose the best one but you only hear the similarities with the conclusion that you could choose any of them!

For example, you find components in both React and Vue. When you learn it once in one of them (I'm talking about understanding it), then you should not have any problem with the other. You could find this on a lot of subjects like state management, routing, deploying, etc. So, it's very important to understand what's happening on the concept level of these similar tools.

Get deep

I don't think there is any problem with using crash courses to get familiar with things, as I do it all the time. Just remember that you need to get more deep based on your interaction with that tool.

You can rely on official documentation to see how and why some ideas work. You can also search for more deep articles about the concepts. For example, one of the best articles on how React works is written by Rodrigo Pombo named "Build your own react", which is a very interactive article on how to create React from the scratch. The purpose is not to build and use your own React, but to understand how it works on the core level. Follow this kind of articles and you'll be a master on the subject.

Languages are more important than the tools

I think the title is more than enough and there should not be any discussion on this. But let talk a little bit more about this.

Some people made this mistake. They follow a crash course on something like JavaScript and they go to another one on React and think ok, that's enough. The problem is not with the quantity but with the wrong path they choose. I'm begging you, see a crash course on React but please, please, please learn the JavaScript as best and deep as you can.

There is a lot of jokes on how JavaScript is broken and works funny. But, please accept this from me: This is not the case. JavaScript has some problems and bugs (As any other language might have) but, that should not give you the idea that any problem you have is based on how JavaScript works. You absolutely should learn about Hoisting, Coercion, Event Loop and more advanced (and sometimes basic) topics to be able to master some libraries like React. It's absolutely crucial. You can be an expert on tools when you are an expert on the language.

This is just a suggestion, you may be a newbie or a developer with some years of experience. But, it's never late to learn more deeply.

Make a list of concepts that you should learn on the language you work most with. Take some time to find some courses or articles that explain it in detail.

I'm assuring you, take the time once and see how it make it easier to learn any tools you want to learn.

Create multiple folders at once on the terminal

Peyman Eskandari — Sat, 08 Aug 2020 15:26:26 +0000

I think you are familiar with the problem. You start a new project and to make the structure you should do something like this:

mkdir new-project && cd new-project
mkdir src && cd src

// Create folders
mkdir components
mkdir assets
mkdir configs
mkdir locales
// ...
// WHAT THE HELL?

This is so frustrating! There should be a better solution 🤔

You can use this syntax to create multiple folders in a directory at once. Plain and simple:

mkdir -p new-project/src/{components,assets,configs,locales}

😲 Just that?
Yes, just that. But let's review what happened here:

You use -p to create sub-directories and on each level, if it doesn't exist, it makes sure that it will be.
Then with {} you pass a comma-separated list of names to create multiple directories beside each other.

Wasn't that bad, hah?

How to be a good junior developer?

Peyman Eskandari — Thu, 06 Aug 2020 11:48:43 +0000

I know that being junior, mid-level, senior, or team lead is something based on the environment or the team you're working with. I maybe am a senior developer on my team but I'm sure that I'm just a junior in comparison to a lot of great developers who build tools that we use to call ourselves as such. We all talk about how much we love to learn new things. That should mean that we always love to be junior in something and climb up to the top on that subject.

In my years of experience, I had the privilege of working with some awesome junior developers who taught me a lot about work and life. Because of my love of teaching, I would be in a position to learn a lot from them, and because of them. So, I thought this is a good time to talk about a good junior developer.

We're not going to talk about what junior level means. The purpose is to look into some good and bad habits a junior developer could have.

🎓 Learn as much as you can

It's an obvious topic, isn't it? We love to learn and as a junior developer, you have to learn. We need to get along with the tools you are using to grow and be successful in your job.

I think this is a general pattern in teams that a new junior developer should concentrate on the current step. "Don't worry about the rest of the system, you'll know it at the right time." This is something that your lead might tell you. He's partially right. Understanding a big system could be a nightmare and maybe it just makes a lot of headaches instead of helping you around. But that should not prevent you from learning. Instead of digging into the current system, ask about the stack and start to learn more about that. Ask if is there any specific design pattern or architecture in the system that you could read about. Maybe you could learn more about the testing system or a specific package for the future.

🚀 Don't stay a junior developer

I know. I said we'll are junior developers. But, not on the same field that we're working for 6 years!

It's not a bad thing to be a junior. But, it's horrible to stay junior. You need to practice and learn how to ask for help. How to understand patterns, management, and how to be a good team player.

A good habit is to read code. Reading code is a skill and it's different from reading tutorials or answers in the StackOverflow. Learn to follow the details and solutions and try to understand the reasons. Don't be shy to ask more experienced team members about how and why.

🕴 Act like seniors

You may not have much knowledge and experience as a senior developer, but you can act like one. Be more professional in your relations with other team members. It's hard of others to hear "I am a junior developer" as an excuse for every mistake. Be responsible for what you do and try to be better at it. Be humble and thankful, this way everyone will love to help you.

What do you think a junior developer should have as a skill? I would love to hear about your experiences as a junior developer or working with one.