DEV Community: Yağmur

If You're a Junior, Apply Jobs

Yağmur — Mon, 22 Mar 2021 18:01:55 +0000

Hi, everyone! I'm a senior computer science student and junior developer. I applied some dev jobs and I want to share my experience about why we should apply jobs more often.

Usually people don't apply a job unless they feel enough for the job. But how do you know you're enough good? or if you are on the wrong path, then who will tell you? The best way is applying a job!

If you want a career you basically needs two things: soft and hard skills.

You probably heard some interview questions. "Tell me about yourself, why you choose this career, etc"

Maybe you think you are good at replying for these questions but with excitement you may not.

You need experience to be REALLY good.

For hard skills:

you will learn how the language/tech used by companies

You can say I know Javascript. But how companies use javascript is different that knowledge.

you will what should you know

They might ask you some technologies or languages that you do not know. Take note and learn after the interview! So that is how you gain experience from it.

You can take note about the questions that you think you did not answer well.

A list of questions that i remember/love:

What is your biggest success/failure?
Why you want to work in that field?
What is your favorite thing about this language?
Do you know software development methodologies? (agile)

And my favorite question,

Tell me about yourself.

Tthis is the hardest question for myself. You have to explain yourself as well as possible within two minutes or less.

I hope everyone will find a good job to start their career, thank yyou for reading!

Let's Create Anime App - Part 1

Yağmur — Mon, 22 Mar 2021 09:09:43 +0000

Hi everyone! Today we'll create an vue anime app using Jikan

github repo: https://github.com/yagmurmutluer9/vue-anime-app
demo: https://vue-anime-app.netlify.app

Everything i write or code is for the learning of my vue journey. So I write what I learn. I want to develop this app while I'm learning new stuff. I hope you enjoy. =)

How to pass data to a child component?

Component is a piece of code that we use in our application. If the code will appear at different places or the code that we write getting complicated then we use components.

Let's create an component called Hello in our application.

<template>

<p> Hello, {{ username }} </p>

</template>

<script>

export default {

props: ["username"]
}
</script>

Let's add Hello component into App.vue.

<template>

<p> Hello, {{ username }} </p>
</template>

<script>

import Hello from './components/Hello.vue'
export default {
  name: 'App',
  components: {
    Hello
  },
  data() {
    return {
      username: "Yağmur"

    }
  },
</script>

How to pass data to a parent component?

Let's modify our Hello component. We add input&button so when user search and submit it we display it from our main application.

We pass input with v-model named search and when button clicked Search method pass data to parent component.

When we passing a value we giving that value a tag or an id which is searchedResult in here.

<template>

<p> Hello, {{ username }} </p>
<input type="text" placeholder="search something" v-model="search"> 
<button @click="Search"> submit </button>
</template>

<script>
export default {
    props: ["username"],
    data() {
        return{
            search: ''
        }
    },
    methods: {
        Search() { 
            this.$emit("search", this.search)

        }

    }

}
</script>

<template>
<Header/>
<Hello :username="username" @searchedResult="FetchedResult"/>
<p> {{ result }}</p>
</template>

<script>
import Hello from './components/Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  },
  data() {
    return {
      username: "Yağmur",
      result: ''

    }
  },
  methods: {
     FetchedResult(result) {
       this.result = result;
     }
  }
}
</script>

Differences between v-model and v-bind

V-model is for two-way data binding. Whenever we chage input then our data will change too.

V-bind is for one-way data binding. We can't change original data using v-bind.

There's an example shows difference between two.

<div id="app">
  <input type="text" v-model="msg">
  <p>Data bound with v-model: {{ msg }}</p>
  <input type="text" v-bind="msg">
  <p> Data bound with v-bind {{msg}} </p>
</div>

new Vue({
  el: "#app",
  data: {
    msg: 'custom',
  },
})

In part two I'll explain v-for then we'll move to firebase auth.

This project will contain:

routers
firebase auth/database

Routers in Vue JS

Yağmur — Tue, 16 Mar 2021 13:40:20 +0000

Hi there! I'm learning Vue and one of the best practice is sharing what you learn. So here i am with routers. Let's go!

Why we use routers?

Let's think about you are on a web page. Whenever you click at a link or etc page will be directed to a new page. But there are two ways to do this logic.

First one which is traditional one is multi page application. Everytime we send a request for a page we wanted.

The second which is called single page application logic is that once load all pages and play with the links. So everything done in user browsers. That will make our website faster.

Since Vue is a SPA this is explaination of why we use routers.

Let's move the code now. Let's create a folder and with manual selection choose router options with vue 3.

vue create routers-vue

Let's look at the router folder which has index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routers = [{
  path:'/',
  name:'Home',
  component: Home
}
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

We import createRouter and createWebHistory from node-modules.
We have an array called routers that will be contain pages.
Finally we import the router so in the main.js we can use.

How we define inside routers array?

path -> which is the direction
name - > when we define custom navigations, we can use name instead of paths. so if path change in the future, we don't need to modify everything.
component -> we can define component in two way. above we can see the first option. let's see the second one. Don't forget to create an about page.

  {
        path: '/about',
        name: 'About',
        component: function() {
            return import ('../views/About.vue')
        },

    }

Let's add two buttons to App.vue In the template we see router-view and router-link which are special to vue router.

With router-link we can navigate to an another page.

<template>
  <div id="nav">
    <router-link :to="{name:'Home'}">Home</router-link> |
    <router-link :to="{name: 'About'}">About</router-link>
  </div>
  <router-view/>
</template>

Previously we said we can use name instead of path. This is an example of usage.

If we use path-way:

<router-link to="/Home"> Home </router-link>

You can see ":" which is a v-bind. V-bind is a way to we change the value with bounding data. we usually use with html attribute.

Next post I'll explain nested dynamic routers, redirect and 404 Pages.