DEV Community: Onur Eren

VSCode React Snippets Extension

Onur Eren — Mon, 17 Jul 2023 14:49:49 +0000

You can use VSCode React snippets extension to quickly initialize your React components: https://t.ly/aAucz

3 Mistakes I Made When I Was First Learning To Code

Onur Eren — Mon, 17 Jul 2023 11:52:24 +0000

When I first started learning to code, I made a ton of mistakes in how I approached it.

I tried some approaches that felt productive and gave me the illusion that I was making progress, but the topics I was learning would not stick.

As a result, I wasted a lot of time and it took me a lot longer than necessary to learn the skills I needed to get my first job.

I wanted to write about the three major mistakes I made, so you do not make the same mistakes and waste your precious time, like I did.

Mistake #1: Learning language syntax instead of building projects

When I first started learning to code, I started with HTML, CSS and JavaScript like most beginner web developers do.

The problem with the way I was learning these technologies was that I was not building any projects.

Instead, I was reading books and watching tutorials.

After consuming video after video and tutorial after tutorial, I realized nothing was sticking. I was mostly learning syntax, but I wasn't using anything I learned in practice.

When I finally decided to build my first project with HTML, CSS, and JavaScript, I realized how much time I had wasted by passively consuming content and only learning syntax. I could barely recall anything I previously learned from books and tutorials.

The more projects I built, the more things started to click. I would try to build a feature, get stuck and then I would Google and find the right solution. This constant feedback loop ended up accelerating my learning significantly.

The same thing happens when you are learning a human language as well.

You can study grammar for hours. Memorize hundreds of words. But if you are not practicing speaking or writing in that language, you are barely getting any better.

You are just memorizing words and grammar rules. And once you try writing a message or speaking to someone in that language, the real level of your proficiency becomes obvious.

So here is my simple advice...

Start building projects from day one.

No one learns to ride a bike from a manual.

Mistake #2: Not Asking For Feedback Or Help

Another big mistake I made at the begging of my journey was to write code and build projects in my own bubble.

I was afraid of showing the code I wrote and getting feedback. So I never showed a single person the projects I built.

The issue was that I was terrified of people's judgment.

I thought everyone would tell me the code I wrote was too basic and the projects I was working on were useless.

I thought people would tell me I was being delusional and I would never be a real programmer.

And I thought all these (imaginary) people were right...

Did I really think I could learn to code on my own? Who did I think I was? People went to university for 4 years to study Computer Science. Others went to Coding Bootcamps.

I was just a guy, sitting on the kitchen table and watching videos on Udemy and building Todo apps and Tic-Tac-Toe...

What I later realized was that no one really cared and I was mostly in my own head.

At some point, I started telling people that I was learning to code, and most people were actually quite supportive. Not a single person discouraged me or questioned what I was doing. Friends connected me with people in their network who could help me get an entry-level job.

If I had started asking for feedback from developers in my network, or people online, I would be able to get some feedback on some of the projects I had built. Perhaps even some code review...

Once I started working at my first job, I realized how crucial code reviews were to improve my coding skills. It was then I realized that I would have improved so much faster if I had only started asking for feedback early on.

It is the same with any skill really...

The most efficient way to get better at anything is to create short feedback loops.

You work on something, and you ask someone who is a few steps ahead of you to tell you what could be improved.

And you keep doing this day after day.

There is almost no limit to how much better you can get by doing this at any given skill.

You just need to kill your pride and ask for feedback. As early as possible.

Most of your fears are self-induced. And most people are quite friendly, especially when you ask them for help.

Mistake #3: Learning Alone

Another mistake I made that made my journey harder than it was supposed to be was learning on my own.

I was so afraid of putting myself out there and connecting with people to avoid criticism and discouragement that I decided to be a lone wolf.

I did not post anything on Twitter related to my coding journey.

I did not join any programming communities or connect with other beginners.

It was only me and my computer on the kitchen table. Trying to learn programming with pretty much no social support or network.

Now I know that most people have good intentions and people enjoy connecting and supporting others that are on a similar journey.

If I had shared my programming journey on Twitter or joined an online community, I would have connected with a ton of like-minded people.

And most importantly, I would have a lot of accountability.

The days I was discouraged and demotivated would be less painful. I would have made friends and meaningful connections early on.

I ended up making the journey more difficult than it was supposed to be because of my fear of judgment.

Now I know that accountability is one of the most powerful ways to stay consistent when learning a new skill or building a new habit.

And social media and online communities are some of the best ways to find like-minded people and build accountability.

In Summary

Learning to code is not easy, but it doesn't have to be more difficult than necessary.

It is the same as learning any skill.

You do not have to be a genius to learn to code, and you do not need a 4-year university degree.

You need to start building projects by writing actual code. Get feedback, improve based on that feedback, and keep doing this on a consistent basis.

Action, feedback, and consistency are the 3 pillars of learning any skill.

You can follow me on Twitter

How To Check Against Custom Types In TypeScript

Onur Eren — Thu, 22 Jun 2023 15:27:10 +0000

In JavaScript, you can use typeof keyword to check the type of values:

const fruit = 'apple';
console.log(typeof fruit);
// Output: 'string'

const year = 2022;
console.log(typeof year);
// Output: 'number'

const isOpen = true;
console.log(typeof isOpen);
// Output: 'boolean'

const person = {
  name: 'Thomas Anderson',
  age: 32,
};
console.log(typeof person);
// Output: 'object'

So if you want check a value is a certain type, you can use the typeof keyword:

const fruit = 'apple';

if (typeof fruit === 'string') {
  console.log(`${fruit} is a string`);
}

const year = 2022;

if (typeof year === 'number') {
  console.log(`${year} is a number`);
}

But, if you want to check a value is a certain type in TypeScript, the typeof keyword doesn't work the same way it works in the JavaScript examples above.

type Fruit = 'apple' | 'orange' | 'banana';

const myFruit = 'apple';

// This will NOT work ❌
if (typeof myFruit === 'Fruit') {
  console.log(`${myFruit} is a fruit`);
}

You cannot use the typeof keyword at run-time to check for TypeScript types, because TypeScript removes type annotations, interfaces, type aliases, and other type system constructs during compilation.

So, how can you check if myFruit is the type of Fruit?

Step 1 — Type Inference

Define a Fruit type as an array of literal values and TypeScript will infer types from the values:

const fruit = ['apple', 'orange', 'banana'] as const;
type Fruit = (typeof fruit)[number];

Step 2 — Type Guard

Use a user-defined type guard to check against your custom type:

const fruit = ['apple', 'orange', 'banana'] as const;
type Fruit = (typeof fruit)[number];

const isFruit = (x: any): x is Fruit => fruit.includes(x);

isFruit() function will check if its argument is in the fruit array, and if so, it will narrow its argument to Fruit:

const fruit = ['apple', 'orange', 'banana'] as const;
type Fruit = (typeof fruit)[number];

const isFruit = (x: any): x is Fruit => fruit.includes(x);

const myFruit = 'apple';

// This will work ✅
if (isFruit(myFruit)) {
    console.log(`${myFruit} is a type of Fruit`);
} else {
  console.log(`${myFruit} is NOT a type of Fruit`)
}
// Output: "apple is a typeof Fruit"

Now we can also see our type checking working, when we have a value that is not a part of our fruit array:

const fruit = ['apple', 'orange', 'banana'] as const;
type Fruit = (typeof fruit)[number];

const isFruit = (x: any): x is Fruit => fruit.includes(x);

const myFruit = 'mango';

// This will work ✅
if (isFruit(myFruit)) {
    console.log(`${myFruit} is a type of Fruit`);
} else {
  console.log(`${myFruit} is NOT a type of Fruit`)
}
// Output: "mango is NOT a typeof Fruit"
// (In reality mango is a fruit, but since it is not
// a part of our fruit array, it is NOT a type Fruit)

In Summary

TypeScript only exists is the compile-time and it is completely discarded in the run-time.

This means you CANNOT use typeof keyword to check for custom types.

Instead, you can use type inference together with a type guard to check against a custom type.

Thank you for reading! ✌️

You can follow me on Twitter

How To Add Custom Fonts In Tailwind

Onur Eren — Tue, 20 Jun 2023 19:12:14 +0000

If you have an app that is configured to use Tailwind, you will have an index.css file that contains these 3 lines:



@tailwind base;
@tailwind components;
@tailwind utilities;

Here are the steps you can follow to set up a custom font in your project:

Step 1

Go to https://fonts.google.com/ and search for the font you want to use.

Select the font styles you want to use and copy the @import line.

Step 2

Add the @import line you copied to your index.css file where you configure Tailwind.



@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');

Step 3

After that, initalize the font family.



@layer base {
  html {
    font-family: Montserrat, system-ui sans-serif;
  }
}

Your final CSS will look like this:



@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');

@layer base {
  html {
    font-family: Montserrat, system-ui sans-serif;
  }
}

Now your default font is set up as Montserrat, or whatever font you have selected.

Thank you for reading! 🙏

You can follow me on Twitter

5 Tips to Become a Self-taught Software Developer

Onur Eren — Mon, 19 Jun 2023 16:04:14 +0000

Today, in 2023, you don’t have to get a computer science degree to learn how to code and get a job as a software developer.

You can learn any programming language or tech skill through books, blog posts, YouTube videos, or online courses. You can also use amazing platforms like Free Code Camp, The Odin Project, Khan Academy, and many others.

Technology companies care less and less about a computer science degree when they are hiring. They care if you can actually code, collaborate in a team environment and build software.

To become a self-taught software developer, you only need:

A computer and an internet connection
Discipline & commitment to studying and practicing daily

1. Choose a niche

“The man who chases two rabbits catches neither.” — Confucius

The first tip, especially if you are at the beginning of your journey, is to choose a niche and get specific about what you want to learn first.

It can be quite overwhelming to try and learn full-stack web development from the get-go.

Instead choose a specification, frontend or backend.

After that specify even further and choose a tech stack.

For example, let’s say you decided to learn frontend web development. You can start learning HTML, CSS, JavaScript & React. You can master those technologies and be a frontend & React specialist.

Specializing and niching down will help you have a clear direction. It will also help you get your first job faster.

Once you master the frontend technologies and start working as a software developer, you can go and learn backend technologies like Node.js or Python if you like.

You will have a blueprint on how to learn a new skill. And each time it will take you less time and effort to learn and master a new technology.

2. Choose a platform to learn

One of the biggest mistakes people make when they start learning how to code is to change the platforms they use all the time.

They jump from course to course and from tutorial to tutorial.

There are so many platforms and courses and it can definitely be overwhelming to decide.

But, if you pick a platform and stick to it until you finish their curriculum, you will make progress much faster.

Pick a course, study its curriculum, and build the projects. And after that, you move on to the next platform or course and continue practicing your skills. Rinse and repeat.

Some of my favorite platforms to learn to code are:

Free Code Camp, as you can tell from the name, is completely free and has an incredible curriculum. You can learn theory and then practice in an interactive environment. I still use it from time to time to brush up on certain topics.

The Odin Project also has a detailed and structured curriculum. You can read and study theory in detail and get your hands dirty with projects that you can add to your portfolio.

Udemy is a paid platform, but the courses are still quite affordable. (Remember, the money you invest in your education will be the best investment in your career).

For example, if you want to learn React, Udemy has some of the best React courses on the internet.

Some of these incredible React courses are:

Remember to pick a course and stick to it until you complete it. Be an active learner and follow along. And build all the projects in the courses as you follow along.

3. Be consistent

You now know that you should choose a niche, frontend or backend.

You also know that you should choose one platform at a time to study a curriculum from start to finish.

The next thing you should be very mindful about is being consistent. What I mean by being consistent is to show up every day to learn and practice the skills you are learning.

If you show up every day to learn, study and practice, you will make progress and build momentum.

And progress compounds.

You don’t have to study 8 hours a day every single day to make progress.

If you can’t study for 5 hours a day because of your life obligations, study for 2 hours.

If you can’t study for 2 hours, spend 1 hour.

If you can’t study for 1 hour, spend 30 minutes.

Spend 15 minutes.

Solve 1 programming challenge.

Write 1 line of code.

Have the mindset of improving at least 1% a day.

With this mindset, you will:

Build rock-solid learning habits.

Build momentum.

Build discipline.

When you look back in one year, you will see how much your progress compounded, thanks to you showing up every day. Even if it was for 10-15 minutes.

Learning is a life-long journey. Showing up every day to practice is the most important habit you can build to master your craft.

4. Build projects

Be an active learner. Write actual code. Build real projects.

During your learning journey, most of the courses will have programming projects. Never skip these projects and build them as you go through the curriculum.

Add these projects to your Github account.
Share the projects you built on your Twitter.
Add these projects to your portfolio page on your personal website.

Building projects is one of the fastest ways to learn programming and improve your skills.

When you get stuck, you will be forced to find a solution.

When you do specific research to solve a problem, you will remember what you learn.

Building projects will also help you with job opportunities and interviews.

When you go to job interviews they will ask you if you have built any projects.

You might think the projects you built are not good or sophisticated enough to present. But they will be the living proof of your progress & skills and they will help you land jobs.

5. Network and join a community

Networking and connecting with others who are on the same journey as you will be incredibly beneficial.

When you interact with people who are on the same path, you will:

Feel less alone on your journey
Get help when you have challenges
Feel more inspired and motivated
Find accountability

You can find a community and connect with like-minded people by:

Going to local programming meet-ups in your city
Posting on Twitter and connecting with other software developers
Asking questions on blogs and Twitter posts
Joining an online community

Connecting with others, building relationships, and showing your work will open a lot of doors. You will connect with people in your field and you will run into excellent opportunities.

In Summary

Many people, including me, have taught themselves how to code online and started a career in tech.

With the online resources that are available today, anyone can become a self-taught software developer.

What you need is direction and consistency.

Pick a niche, frontend or backend.

Pick one of the platforms I recommended in this post and stick to it until you complete each curriculum.

Show up every day to study and learn.

Build projects as you go along your journey and add them to your online portfolio and Github.

Join a local or online community and connect with other software developers.

And be patient.

Success is all about playing the long game.

If you put in the work, build projects, keep improving, and share what you are doing with other people, you will start a promising career as a software developer in no time.

Thank you for reading 🙏

You can follow me on Twitter