DEV Community: Julian Christian Anderson

I am an Industrial Engineer Graduate that turned into Software Engineer, Ask Me Anything!

Julian Christian Anderson — Thu, 08 Aug 2019 03:21:18 +0000

Vue vs React Episode 0: Handling Form

Julian Christian Anderson — Thu, 25 Oct 2018 23:02:21 +0000

I have been learning Vue and React for the past couple months in my coding bootcamp. The first thing I learned is Vue then I learned React. I could not say which one is better because each one of them has their own strengths and their own weaknesses. For me learning Vue is relatively easier from learning React but not by a huge margin. I will make a series on the differences between the two frameworks.
This first thing I felt when I dive into React after working with Vue is how different they handle Form input. Vue has two way binding on its data because of this v-model, This is the main reason why they can handle form differently.

Handling Form in Vue

In Vue we have v-model which can bind the value from the input to the state or we usually call it data.

You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. - vuejs.org *

If you see the gist file we put v-model on each input to bind their state to the input. On the first input we bind email and on the second input we bind password. By filling the input the state/data will also be changed because of the v-model. When you press submit you can see in your browser console :

It works like magic in Vue which is very awesome!

Handling Form in React

On the other side, React does not have any features similar to the v-model on Vue. So we should handle Form differently in react.

In react we can put name on each input, the name we put on the input should be the same with the name on the state.

<input type="email" name="email" placeholder="email" />

Why?
Because we should handle the input with onChange every time we type in the input box.

<input type="email" name="email" placeholder="email" 
onChange={this.formChange} />

formChange = e =>{
this.setState({
  [e.target.name] : e.target.value
})

This function will handle the change on the input box. Every time it changes we will also change the state. e.target.value is the value of the things we put into the input. And if you try to console.log e.target.name it will show that name is equal to the name we assign to the form input. If we put it email then it will be email and if we put it password it will be password. This is the reason why the name we put on the input it must be the same as the state name we have. So basically :

[e.target.name] : e.target.value

will result in :

email : (input value from email)
// or
password : (input value from password)

If we put the name in the input as my_email and my_password then e.target.name will be my_email and my_password . We don't have a state with the name of my_email and my_password . So our state will still be an empty string.

Then we will provide the same method named "submit" to handle the button click event.

submit = () =>{
   console.log('email :', this.state.email)
   console.log('password : ', this.state.password)
   this.setState({
     email : '',
     password : ''
   })
 }

The handle event is the same with Vue but when you empty the state the input won't change into an empty string because of the one way binding. To handle that we should put value property to the input.

<input type="email" name="email" placeholder="email" 
onChange={this.formChange} value={this.state.email} />

By putting value we refer the value of the input to the state so if we empty the state the form input will be empty too.
This is the first episode on comparing React to Vue. I hope that it helps for those who wanted to learn Vue with the basic of React or learning React with the basic of Vue. There are more episodes to come so stay tuned!
I post in my Instagram daily about my journey in web development and also sharing the progress of my articles.

class="tweet-embed"
scrolling="no"
id="tweet-1055108371274072065-552"
src="https://platform.twitter.com/embed/Tweet.html?id=1055108371274072065">

// Detect dark theme var iframe = document.getElementById('tweet-1055108371274072065-552'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1055108371274072065&theme=dark" }

Creating Simple Kanban Application with Vue and Firebase

Julian Christian Anderson — Wed, 10 Oct 2018 03:06:45 +0000

Kanban application with Vue and Firebase

Creating Simple Kanban Application with Vue and Firebase

Before we create an application we should know what tools we want to build the application with. For a kanban collaboration application we need a fast application with a reliable database. Of course when we want to collaborate we need a real time database for the application that is why we use Firebase as our database. For the client side we will use Vue JS. To deploy it we will use Firebase Hosting Service too.

What is Vue.JS?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

What is Firebase Real Time Database?

It is service that provides application developers an API that allows application data to be synchronized across clients and stored on Firebase’s cloud.

The Steps:

1. Preparing Vue Application

In building the application we will use Vue CLI to make the development faster. To install Vue CLI you can type this in your terminal :

npm install -g @vue/cli# ORyarn global add @vue/cli

After finish installing Vue CLI we can now create an application by typing :

$ vue create

You can use any name you want for your application and I will just call mine kanban-firebase. We need to set up some things when we first create the project. This is my configuration for the application :

Vue JS Configuration

It may take a while to create the application and when it is finished it will show this on your terminal. (I am using yarn not npm here)

Don’t forget to install firebase on your project :

cd kanban-firebase
yarn add firebase
or
npm install --save firebase

Finished Creating The Application

Congratulations you have yourself a Vue application by running

yarn serve
or
npm run serve

Vue JS Template on localhost:8080

Congratulations you have yourself a Vue application by running

2. Preparing Firebase Database

The second thing we need to set up is our real time database from Firebase. Go to https://console.firebase.google.com/ and create a new project.

After finish initializing your application go to database and choose real time database. And choose start in test mode. Then go to your dashboard and click on the web. Copy everything and put the config on your src/assets/config.js.

(don’t forget to put this config in your .gitignore file)

Congratulations you have your Firebase Real Time Database running now.

3. Preparing Vue Components

Next thing we should do is to structure the list of components we needed so that the component is reusable. I will make 3 components in total and 1 view components to show the application. The components will be : the content card, the kanban card, and the main header for the application and the view component is just home.

My file structure Left : Kanban Card , Right : Content Card

4. Get Data From Firebase

The next thing to do is get data from firebase. There are 2 ways to get you data from firebase, you can listen once or you can listen the data as the data change. Because we want real time database we will use the .on() method from firebase to get data and I will put the data on Home.vue.

The first thing I do here is to create an initial array to group the task on their type. I put in on taskData as an array of object. You don’t have to get the data every time you render the component because it will automatically change as you add more data to the database because we use .on(). If you want to get the data only one time and does not listen to the changes you can use .once().

var leadsRef = database.ref('/')
leadsRef.on('value', function(snapshot){

//your callback function here
})

When you get the data from firebase you can’t read the data straight forward because it will not be in form of a normal object that you want to process. To get the data that is processable on your firebase database you should use .val() at the end of it. To loop the snapshot from firebase I use .forEach method from javascript.

//snapshot is an array of object
snapshot.forEach(function(childSnapshot){
childSnapshot.val() //to get value from it

//the rest of the function
}

5. Render KanbanCard Component

The next thing is to render KanbanCard component. I have 4 items in the taskList so with v-for it will render 4 KanbanCard with title : Pre-Log, To-Do, On-Going and Finished.

<KanbanCard v-for="(data,index) in taskLists" :key="index" :data="data"></KanbanCard>

With this line of code here we will loop the taskLists array and give props to the KanbanCard the data inside taskLists array.

So the props inside each KanbanCard will look like this :

{
name: 'Pre-Log',
tasks: [
{
status : 'Pre-Log',
title : 'test'

}]
},

Each KanbanCard component will have every tasks with the type that is similar to them.

The Schema of The Database

6. Render ContentCard Component

Inside Each KanbanCard we will render the ContentCard component which hold every task that we add.

<ContentCard v-for="(item) in data.tasks" :key="item.id" :item="item" :name="data.name"></ContentCard>

Because we give props to the KanbanCard as a name of data. We will loop the data.tasks which is an array of object inside each props.

After you render each data it will look like this :

KanbanCard with ContentCard inside of it

and now how do we make the button in each ContentCard? In this case I will use the created lifecycle on Vue Component. Each component has the data(state) buttonOne and buttonTwo. Before it is created the state will change according to what we set below.

created () {
if (this.name === 'Pre-Log') {
this.buttonOne = 'To-Do'
this.buttonTwo = null
}
else if (this.name === 'To-Do') {
this.buttonOne = 'Pre-Log'
this.buttonTwo = 'On-Going'
}
else if (this.name === 'On-Going') {
this.buttonOne = 'Finished'
this.buttonTwo = 'To-Do'
}
else if (this.name === 'Finished') {
this.buttonOne = 'On-Going'
this.buttonTwo = null
}
}

In this step before the component is created it will check the name of the KanbanCard and will generate a button with a name that suits the KanbanCard. We also set a different method for each button. Basically the button will update the status of the task that we have.

actionOne () {
database.ref(`/${this.item.id}`).remove()      database.ref('/').push({
title: this.item.title,
status: this.buttonOne
})
},

actionTwo () {
database.ref(`/${this.item.id}`).remove()      database.ref('/').push({
title: this.item.title,
status: this.buttonTwo
})
},

removeItem () {
database.ref(`/${this.item.id}`).remove()
}

actionOne and actionTwo is the same. The main function of this two button is delete the task and create a new task with new status on it. For example :

Before pressing the button :

title : 'test',
status : 'Pre-Log'

After pressing the button :

title : 'test'
status : 'To-Do'

The third button that will always be rendered is the delete button. The delete button will delete the task permanently from the database.

7. Create New Task

Creating new task will be done in the MainHeader Component. Because Vue has two way binding we basically don’t need

tag to have an input. To bind data to the input we can just use v-model. v-model bind your data(state) to the value of the input. In this case I have the data(state) with the name taskName and bind it with v-model to the input.

the sendItem method will send data to firebase database and create new task with the input we enter. Each new task that we enter will automatically go to Pre-Log.

sendItem () {
database.ref('/').push({
 title: this.taskName,
 status: 'Pre-Log'
})
this.taskName = ''
}

after we create the task we want to empty the input box so what we do is by setting the taskName state into an empty string.

Congratulation you just finished the application!

Here is the live application and the Github repository :

Kanban Firebase
_Vue Firebase Application_kanban-74e11.firebaseapp.com julianjca/kanban-vue-firebase
_Contribute to julianjca/kanban-vue-firebase development by creating an account on GitHub._github.com

If you have any questions leave it on the comment section down below!

Follow me on instagram to see my journey as a web developer!

Julian Christian Anderson (@juliancanderson) * Instagram photos and videos
_5,129 Followers, 879 Following, 117 Posts - See Instagram photos and videos from Julian Christian Anderson…_instagram.com

My Experiences in a Coding Bootcamp for 2 Months

Julian Christian Anderson — Mon, 17 Sep 2018 01:37:30 +0000

Image from my Instagram account @juliancanderson

My Background

First, let me introduce myself. My name is Julian Christian Anderson and I am a Web Developer from Indonesia. I don’t have any background at Technology, in fact I have a degree in Industrial Engineering. I finish my Industrial Engineering Degree this June and a year before finishing my degree I found out that my passion is actually in tech industry. So back to 2017 I learnt about web development by my own through Youtube and Udemy videos. After couple of months, I decided to be a freelancer in my last semester. When it comes to basic stuffs things may not get that hard for me but I faced a roadblock.

What I Feel

I faced a roadblock after a couple of months because I am aiming to be a full stack javascript developer. In the Javascript world, there are a lot of frameworks and things that you should know. I jumped from a framework to another because I got stuck at one of them. Jumping from a framework to another did not solve my problem at all. The worst thing is that it keeps adding more trouble to my developer journey. At that time I don’t even know what should I do next or how can I fix my problem. Because when I enroll a course at Udemy I can’t meet the person face to face and sometimes it is hard to explain a problem in form of text. I tried to find a community at my city and I couldn’t find it so I keep the problem to myself.

What Did I Do Next?

I tried to find some kind of workshop near my city. The first thing I found is a mobile developer bootcamp located in my city but I have no interest at all. Luckily I came across a Full Stack Javascript Bootcamp located at Jakarta, Indonesia. I read the testimonials and study their curriculum then I got attracted by them. They will start the bootcamp on July and the deadline of my final project is on June. I talked about this with my parents and I am grateful that they agreed. They gave me their full support then I tried to finish my final project soon enough so I can enroll at the bootcamp.

instagram @juliancanderson

What is A Coding Bootcamp?

The definition of bootcamp according to Google is :

“a military training camp for new recruits, with strict discipline.”

And the definition of Coding Bootcamp according to http://thefirehoseproject.com/developer-guide/1 is :

“a technical training program that teaches the programming skills that employers look for. Coding bootcamps enable students with little coding proficiency to focus on the most important aspects of coding and immediately apply their new coding skills to solve real-world problems.”

So basically it is a training on programming with a strict discipline. But the thing about is that is really powerful is that it only teaches us a certain “skills” or “language”. There are a lot of programming language out there and it can be really overwhelming to learn them all. So the solution to the problem is by making a coding bootcamp that focus on the basic of programming in general and a specific programming language.

What Do You Do At A Coding Bootcamp?

So my coding bootcamp is separated into 4 phases. At phase 0, I only came to the campus on Monday, Wednesday, and Friday. Each day there is a single lecture for 2 hours and there will be assignments for that week that we should finish at home. At this phase I feel like it is not that busy and you can still do other stuffs after the lecture. You also get a live coding session which is basically an exam to test your knowledge every single week. This phase 0 lasts for 6 weeks. Phase 0 is all about basic Javascript and Programming. We learn about array, looping, objects, etc.

Now I am on phase one after finishing my phase 0 with a pretty good score. I can go through Phase 0 without any major problem because I have been learning Javascript for a while. Without an experience in javascript and programming I couldn’t do that well. Phase 1 until 3 is called “Immersive Phase”.

At Phase 1 I go to the bootcamp everyday from 9 AM to 6 PM. Sometimes I go back home later at night because of unfinished assignments at the bootcamp. So for a typical day in immersive phase we have 2 lecture for 1 hour-1,5hour. Rest of the time we spend is on the practical stuffs on the things we have learned at the lecture. The bootcamp also give assignments on the weekend usually to make us understand everything we have learned the week before.

My Opinions on Coding Bootcamp 💻

Pros :

For me a coding bootcamp is a great solution for people who want to dig deeper into programming or a certain programming language in a short time. Because it is usually shorter in time to a CS Degree.
Coding bootcamp is also a great thing to enroll because everything that we will learn in it focus on the important part of programming and language. They also give a real world example problem for our assignments so that we can have a knowledge on it even before we graduate.
The thing I love the most in the bootcamp is they mentor system. Mentor is a very crucial thing in every aspect of life. Before I enter the bootcamp I don’t have any mentor on web development and I don’t know what to do when I have a problem. Now because the lecturers become our mentor, I can really improve a lot by their guidance in the web development world.
I also love being on a bootcamp because of the community. Before joining the bootcamp I have small amount of friend who code. I can not talk about the tech industries with them and I don’t know where to talk to. Now I have a lot of friends with the same passion so it is a fun thing to be able to connect with a lot of developers on the bootcamp.
The last thing is in a bootcamp they have a very structured curriculum that has been improved over time. So it will always be up to date and helps us in many ways.

Cons :

Because of the short time the bootcamp has I feel like the pace is so fast and if you don’t focus everyday you can be left behind. Every day or even every lecture can be a different things to learn.
Coding bootcamp also took most of the time in our day so I feel like I can’t do anything else beside of the coding bootcamp assignments. Sometimes I really want to explore something else but after I got home I feel so tired and go straight to bed.
You must go all in on it. Don’t get me wrong, I love going all in on things that I do. I was a freelancer before and now I don’t even have time to do client works because of the overwhelming assignments on the bootcamp. So the only way to do it is by hustling until midnight after the bootcamp. It can totally reduces your sleep time and that is totally a bad thing to do since you have to wake up so early in the next morning.

So, do I recommend joining a coding bootcamp?

I totally recommend you to join a coding bootcamp if you have the time and money. It is a bit expensive but it is a very great investment for the future.

I also suggest that you should study the curriculum first before entering the bootcamp and see if it is the thing you need or else it will be a waste of money. Prepare everything you need, never stop learning, and don’t ever give up even in a difficult situation!

Thank you for reading. I am open to suggestion since it is the very first time I write. I am sorry for all the mistakes I made on the article and I will totally improve on my next article! 🔥⚡️

Follow me on Instagram and Twitter :

Instagram (@juliancanderson)

Twitter (@juliancanderson)