DEV Community: Kubilay Çakmak

React & Redux

Kubilay Çakmak — Wed, 27 Apr 2022 22:49:11 +0000

Hello React lovers!

In this and the next two articles I will write, I plan to discuss redux and its relationship with react.

I will touch on these concepts before I think it would be difficult to understand Redux without understanding the state management issue and its problems.

The topics that I will cover in this article are shown below.

1. What is state management?
2. State management problems.
3. Technologies that find solutions to problems.
4. What is Redux?
5. Basic concepts in Redux.
6. How Redux works.
7. Redux example.
8. What is state management?

State is the properties and information that each of the components in our applications currently have. The variability of this feature and information reveals the concept called state.
For example, whether a checkbox is checked or not is a state, an information. We use this information to determine how to move forward in our practice. On the other hand, the location, size, shape, etc. of this checkbox. Since the information is fixed, it would be more logical not to specify it as a state.
State management problems?

As the components inside the application increase, these cases increase. As such, the management of these situations is becoming more and more inextricable. For example, models of states may replace one another, or a case may act on an unrelated component. The most common example of this problem in many places is the problem that Facebook has with its messages and notifications. This problem is uncontrolled data flow. Facebook solves this with its flux architecture. This architecture reduces complexity by providing one-way data flow.
_

Technologies that find solutions to problems.
_
These problems were first solved with the flux architecture. Apart from that, most of the developing technologies have similarities with this architecture. Almost all of them have the same concepts.
Here are a few of them.

redux
Akita
NGRX
mobx
React Context
vuex
carebral

What is Redux?

It is an open source state management library, almost the most used. If we understood state management, I think we understood what redux actually does. In general, it tries to make state more manageable by centralizing the state and reducing the complexity of the implementation. Redux is created by the head of react (dan abramov). It is a standalone library with React. The reason why it is mentioned so much with React is that it works very compatible with React (see: react-redux). We can use this library in other javascript libraries very easily.
Basic concepts in Redux.

Action: It is a javascript object. It carries the information (type) and state data of which state will change in the store (payload).

{ type: ORDER_INCREASE , payload: 1 }

We often use Action Creators to make Actions more useful. Action Creators are arrow functions. It just takes the changed payload part as a parameter and returns an action. Types are usually kept in a separate file (actionTypes) as they are only directional constants that do not change.

//Action Creator
const orderIncrementSuccess = quantity => ({ type: ORDER_INCREASE, payload: quantity });
//actionTypes.js
export const ORDER_INCREASE = ”ORDER_INCREASE”
export const ORDER_DECREASE = ”ORDER_DECREASE”

Reducer: It is a pure function that takes state and action as parameters and returns the new state. It changes the state according to the action's type and returns the new state. An up-to-date copy of the state must be returned. Otherwise, the components will not render themselves. The purpose of doing this is to change the reference of the state. We can use Object.assign() or Object spread opretaor methods for this. We should not forget to give the initial value so that the state is not undifined at the start of the program.

const reducer=(state=0,action)=>{
     switch(action.type){
            case 'ORDER_INCREASE':
                return state+action.payload;
            case 'ORDER_DECREASE':
                return state-action.payload;
            default:
                return state;
       }
}

We do not use reducer directly. We send reducers as parameters to the store. When we create the action we send using store,dispatch and the state defined in the store, we pass parameters to the reducer function that we send. As a result of this operation, the returned state is overwritten by the state in the store. So we just tell the store how to change the state using the dispatch function. Store runs the reducer function.

Here is a question that may come to your mind. “Store, which action will be passed to which reducer? How does he determine that?” I thought a lot about this question. The most logical explanation to me is; It does this in all reducers by passing the actionu parameter. Whichever switch is caught, it does the relevant operation there. At least I haven't seen the opposite yet. If friends who know write in the comment section, we will get more accurate information.

Store: This is where the State is kept. We use the createStore function to create the Store. It takes reducers as parameters. When there are more than one reducer, which is usually the case. We use the combineReducer function to send them together. Redux keeps these reducers in a common object for us, making it easy to access and use. Although it does it for itself, we just use it.
Three functions return.

dispatch
getState
subscribe

dispatch: Triggers the reducer by taking the action as parameters. As a result, the state is changed. Every time this function is run, all subscribed components are rendered again. Of course, after the state changes, the rendering is done.

getState: Returns the current state.

subscribe: Components subscribe to the Store using this function. Store stores all subscribed components in it. As a parameter, it takes the function that the component depends on the state, that is, it will render whenever the state changes, it is important that this function uses the getState function. Actually the purpose here is to run getState. In this way, we can see that the state has changed in the view. Otherwise, the state changes, but this is not reflected in the view.

How Redux works;

I will write the steps of the above flow in items.
The user performs an action in the view that will trigger the action.

Dispatch passes the incoming action as a parameter to the reducer with the current state in the store.
As a result of this operation, the relevant parts of the state change and a new state is formed. Here we understand the importance of Object.assign() or Object spread operator methods for reducer, if state holds more than one data.
As the state is updated, all subscribed components are rendered again.

Finally, this state is reflected back to the view.

Redux example

Our example will be a counter instance, as in most examples.
Below are the html codes and images.

<html>
 <head>
 </head>
 <body>
  <div id="root">
   <h1 id="value"></h1>
   <button id="btn_increase">+1</button>
   <button id="btn_decrease">-1</button>   
  </div>
  <script src="sampleRedux.js"></script>
 </body>
</html>

We will simply increase and decrease the counter. We will keep the value of the counter as state.

Reducer

const counterReducer=(state=0, action)=>{
         switch(action.type){
              case 'INCREMENT':
                   return state+1;
              case 'DECREMENT':
                   return state-1;
              default:
                   return state;
            }
}

We set the initial value of the reducer to zero. We return the new state according to the type of the incoming action. If there is a type that does not match, we return the current state. Since the action of the incoming type is fixed, the payload feature is not given to the action.

Store

const createStore=(reducer)=>{
         let state;
         let listeners=[];

         const getState=()=>state;

         const dispatch=(action)=>{
             state=reducer(state ,action);
             listeners.forEach(listener=>listener());
         };

         const subscribe=(listener)=>{
             listeners.push(listener);
             return()=>{
                listener=listener.filter(l=>l!==listener);
             };
         }

         dispatch({});

    return {getState, dispatch, subscribe}
}

GetState returns the current state in the Store.
If you notice in the dispatch function, it sends the action, which comes as a parameter with the state defined in the store, to the reducer, which comes as a parameter to our store. It sets the return value to state.
After this process, it renders by browsing through all the subscribed components in listeners. In this way, it is reflected in the current state view.
The subscribe function takes parameters and pushes the components that want to subscribe to the listeners array. Running the loopback function unsubscribes the subscribed component.
Before returning these three functions, we run dispatch once for the state to be created.

const store = createStore(counterReducer);
const render=()=>{
    document.getElementById("value").innerText=store.getState();
}
var unSubscribe = store.subscribe(render);
//unSubscribe();
render();
document.getElementById("btn_increase").addEventListener('click',()=>{
     store.dispatch({type:'INCREMENT'});
})
document.getElementById("btn_decrease").addEventListener('click',()=>{
    store.dispatch({type:'DECREMENT'});
})

First, we create our store by passing the reducer as a parameter. We render the places where the State will be displayed by connecting getState to the relevant components (rendering).

To be notified when the state changes, we subscribe with the store.subscribe function. This function returns a function (unSubscribe). If we run it, we unsubscribe the component.
By running the render function once, we reflect the current state to the component. Zero will appear because its initial value is zero.

Finally, we connect the dispatch methods to the click event of the buttons. Since each button sends a different action, it will have different actions on the state.

While our application is running

HAPPY CODING!

Vue.js State Management with Vuex

Kubilay Çakmak — Mon, 07 Feb 2022 19:51:28 +0000

When using current JavaScript frameworks in an application, we use multiple components (bi). It can be obtained from locations like communicating or exchanging data, as well as the (parent) component it contains or is in. Component counts and productions by apps do not become more difficult in this way. We'll learn about Vuex in this tutorial, which allows us to manage state (state) management for the Vue.js framework from a central location.

What exactly is Vuex?

Vuex is an open-source library for managing Vue.js state from a central location. It is created by Vue.js programmers.

So, what is the point of Vuex? Let's look at an example of code.

When we look at the code in the image above, we can see that the state value is stored in a Vue instance (instance).

The data (count) that will be used in the programme.
The field (template) where the data from the State will be presented is known as the View.
Action: A structure (increment) that modifies the state in response to a user event.
When we model the above code on the figure, we get something like this. There is a one-way data flow in this image. (data flow in one direction)

It's a basic structure, but when there are different parts using similar states, this straightforwardness becomes subtle. Different views may need to use similar states. More than one Action may be required to follow similar states. There are ways around the above, but acknowledging them destroys the ease of work, and the application becomes more cluttered. For example: To solve the main problem, it is possible to make a solved part and send the state as a prop to a sub-part, but sending props to a solved design consistently and changing prop values in the sub-part will not give an adaptation.

This and similar situations have led to the centralization of state management; separate state from components, make it a singleton and manage it. In this way, no matter which component is in, you can access the relevant state, trigger any Action, and operate on the same state. That's what Vuex gives us. Ensure state is managed from a central location by decoupling from the application the structure that will change this state.

Vuex Architecture and Core Concepts

Due to its ease of maintenance and development, Vuex has gathered the state and the structures that will operate on this state in a central place.

All situations seen in the image above are registered in the store in Vuex. Store, in simple terms, is the structure that contains the state of the application.

Although we say that Vuex's store is a global object, there are two main events that distinguish it from global objects.

The Vuex store is reactivity (healthier to know its reactive, non-translational version). When there is any change in the state in the store, the components will be warned and updated effectively.
We cannot directly change the state in the store. It should be clearly stated with the help of Commit (which we will talk about later in the article).
vuex; It consists of 4 basic parts: Actions, Mutations, State, Getters. To see these in more detail, we will go through a basic application.

Let's create an empty project with the help of vue-cli:

vue create vuex-example

Let's choose the "Default ([Vue 2] babel, eslint)" option since we will show the Vuex implementation for a start.

Install Vuex with npm:

npm install vuex ---save

The implementation of Vuex is quite simple. The steps we need to do are as follows;

We create a JavaScript file called index.js under the store folder. In it, we say that Vue should use Vuex, then we create a new Store instance, define the relevant fields (state, getters, actions, mutations) and export them.
In js, we add it to Vue so that all components can access the store.

Above, we basically created a Vuex Store object and exported it to be used in main.js. The process of registering this exported store value in main.js is as follows;

This is the basic implementation.

In the store of Vuex; We talked about the existence of fields such as state, getters, mutations, actions, and we defined them as empty in the implementation part. If we look at the details of these;

State

We mentioned that Vuex maintains a singleton state. All structures in the application use the same state. State data in the application is kept here.

There are many ways to access the values defined in the state in the component.

<template>
  <div id="app">
    {{ count }}
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
};
</script>

Previously, we performed the bind operation of the store in Vue and we mentioned that the store contains the state. When we look at the code above, we use $store to access the state value and it is located in the Vue instance. With $store.state.count, we can easily access the count data in the state. This process could be done directly in the template, but it would be healthier to do it in computed. When there is any change due to the reactivity of the state, computed will be triggered and the related fields will be updated again.

As the number of data on the state increases, putting the relevant data in computed can be annoying and cause a lot of code. For such problems, we can do it automatically with the mapState that comes in Vuex.

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      localCount: 5,
    };
  },
  computed: mapState({
    // arrow function can be used to define it briefly.
    count: (state) => state.count,

    // alias can be given to the relevant state name, `state => state.count` expression corresponds to count.
    countAlias: "count",

    // The relevant local variable can also be accessed with the this keyword using the normal function.
    countPlusLocalState(state) {
      return state.count + this.localCount;
    },
  }),
};
</script>

While making the definitions in the mapState, we can also pass it as an array, just like below.

computed: mapState([
  // Now we can access the value in state.count by saying this.count.
  "count",
])

Instead of typing this.$store.state.count for a long time or bind, we can access that data in the state by typing this.count.

Looking at the above code example, we have assigned the object that mapState returns directly to computed. If we want to use the data in the state as well as to define our own computed properties specifically, we can perform these operations with the spread operator.

computed: {
  // We can specifically create local computed.
  localComputed() {
    /* ... */
  },
  // We can complete the state in the store.
  ...mapState({
    /* ... */
  }),
}

Getters

The structure we call Getter is similar to the computed property in Vue.
To filter the instance when we want to pass a data in the state in the application through certain operations. We can do something like the following.

computed: {
  doneTodosCount() {
    return this.$store.state.todos.filter((todo) => todo.done).length;
  },
},

When we look at the code above, the number of completed ones in the todos array in the state is brought, but when we want to use the result of the filtering process in a few components, we need to copy the above code and put it in other components. In such scenarios, the Getter structure provided by Vuex is used.
When we look at the definition of getter, it takes 2 arguments and the first of these arguments is the state value and the second is the getters where the other getters are located.
**
Below are the **state and getters defined in store/index.js.

export const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: "...", done: true },
            { id: 2, text: "...", done: false },
        ],
    },
    getters: {
        doneTodosCount: (state, getters) => {
            return state.todos.filter((todo) => todo.done).length;
        },
    },
});

There are similar ways for the related getter to be called in the component, just like in the state.

For direct access via Store in Component (template):

this.$store.getters.doneTodosCount; // -> 1

Usage in Computed:

computed: {
  doneTodosCount() {
    return this.$store.getters.doneTodosCount;
  },
},

We can do the practical mapping for Getters just like we do using mapState in State. For this, we use mapGetters.

<template>
  <div id="app">
    {{ doneCount }}
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      // map `this.doneCount` to `this.$store.getters.doneTodosCount`
      doneCount: "doneTodosCount",
    }),
  },
};
</script>

An alias has been given to the relevant Getter above. If we want to map directly, we can use it as follows.

<template>
  <div id="app">
    {{ doneTodosCount }}
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["doneTodosCount", "anotherGetter"]),
  },
};
</script>

Mutations

We use structures called mutations to update the data in the state. Each mutation here contains 2 structures, namely handler and type. The field we call Type is the method name, and the handler is the method that will update the relevant state. This method takes 2 parameters and the first parameter is state and the other parameter is data.

Below are the state and mutations defined in store/index.js.

export const store = new Vuex.Store({
    state: {
        count: 0,
    },
    mutations: {
        increment(state) {
            // mutate state
            state.count++;
        },
    },
});

A mutation can be seen above, and its operation is to increase the count in the state by one. Unfortunately, as in State and Getters, direct access is not available in Mutations. To realize this, it is necessary to declare with commit.

Access from within the Vue component is as follows.

this.$store.commit("increment");

A mutation has been triggered above, if data is also wanted to be sent as a parameter, it is sent as the second parameter.

export const store = new Vuex.Store({
    state: {
        count: 0,
    },
    mutations: {
        increment(state, payload) {
            // mutate state
            state.count += payload.amount;
        },
    },
});

Vuex documentation suggests sending the payload as an object.

this.$store.commit("increment", { amount: 4 });

We use mapMutations to perform practical mapping operations within the Component.

<template>
  <div id="app">
    <h1>
      {{ this.$store.state.count }}
    </h1>
    <button @click="increment">Up
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  methods: {
    ...mapMutations([
      "increment", // map `this.increment()` to `this.$store.commit('increment')`

      // `mapMutations supports payload:
      "incrementBy", // map `this.incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: "increment", // map `this.add()` to `this.$store.commit('increment')`
    }),
  },
};
</script>

As seen above, we can get the same name as a direct array, by giving alias.

Actions

Actions and Mutations are similar constructs, but there are important differences between them. Because of this difference, the place of use is very important.
The most important difference; action supports asynchronous operation. It is often used in API calls.

Below are the state, mutations and actions defined in store/index.js.

export const store = new Vuex.Store({
    state: {
        todos: [],
    },
    mutations: {
        insertTodos(state, payload) {
            state.todos = payload;
        },
    },
    actions: {
        fetchTodos(context) {
            fetch("https://jsonplaceholder.typicode.com/todos")
                .then((response) => response.json())
                .then((data) => {
                    context.commit("insertTodos", data);
                });
        },
    },
});

In the above example, a method named fetchTodos is defined, and it receives the todo list by requesting the relevant place and triggers the mutation to update the state. In this way, the data coming with the Action will update the State related to the Mutation and the relevant fields will be updated as a component update.

Methods defined in Action take a parameter called context. Context in itself; It contains features such as state, getters, commit, dispatch. Depending on the situation, the appropriate process can be used.

The call of the defined action in the component is carried out with the dispatch operation.

<script>
export default {
  created() {
    this.$store.dispatch("fetchTodos");
  },
};
</script>

We touched on many concepts above, to summarize the process of the work:

The relevant action is triggered by dispatch, API request is made and data is received.
Mutation is used to update the value in the state with the data coming in the action, and the commit is made.
It updates the relevant Mutation state value and the Getter using that state is triggered and the component update using that Getter.
To give a general example that includes these,
Below are the state, getters, mutations and actions defined in store/index.js.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        todos: [],
    },
    getters: {
        getCompletedTodos(state) {
            return state.todos.filter((todo) => todo.completed);
        },
    },
    mutations: {
        insertTodos(state, payload) {
            state.todos = payload;
        },
    },
    actions: {
        fetchTodos(context) {
            fetch("https://jsonplaceholder.typicode.com/todos")
                .then((response) => response.json())
                .then((data) => {
                    context.commit("insertTodos", data);
                });
        },
    },
});

There is an action called fetchTodos above, it takes the data with the API request and triggers the relevant mutation with commit, our method here is insertTodos. Mutation, on the other hand, updates the state, and due to this update, the components using the getCompletedTodos Getter use the relevant current data as an update.

<template>
  <div id="app">
    <ul>
      <li v-for="todo in getCompletedTodos" :key="todo.id">
        {{ todo.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  methods: {
    ...mapActions(["fetchTodos"]),
  },
  computed: {
    ...mapGetters(["getCompletedTodos"]),
  },
  created() {
    this.fetchTodos();
  },
};
</script>

Above is the mapping, use and listing of the related transactions.

So far, we have learned what components Vuex consists of, what conveniences it provides and how it is used.

More information about the state management process is more readable, maintainable (moving to modular structure) and other details is in its official documentation.

Resources:

VueJs

How to write clean code?!

Kubilay Çakmak — Tue, 18 Jan 2022 05:00:49 +0000

To write a clean code, it will start with thinking simple. The most important thing is less code is equal to readable code which is clean code.

A good programmer (not just a programmer) is someone who works hard regardless of their experience level or level of expertise. Your responsibility lies in the quality of the code you write, so make it good enough so that other developers can understand and don't mock you every time they have a difficult time with the code you wrote.

Object Destructuring

In object destructuring, you can extract specific fields from an object and assign them to a variable instantly. The number of lines of code we need to extract the object properties is reduced, and the code is easier to understand.

In addition to saving a lot of explicit variable declarations, object destructuring is very helpful in situations where:

An object can have multiple properties.
One property can be used more than once.
A property that is deeply nested in an object can be used more than once.

const student = {name: ‘John’, email: ‘john@example.com’, phone:’236412354'};

//with destucturing

const {name, email, phone} = student;

//without destucturing

const name = student.name;
const email = student.email;
const phone = student.phone;

Both examples (with and without destructuring) have the same output. Destructuring objects simplifies the code and makes it easier to understand.

Make Use of Arrow Functions

With arrow functions, you can write concise JavaScript functions while solving the problem of accessing this property inside callbacks.
When you use arrow functions, curly braces, parenthesis, function, and return keywords become optional. Your code becomes clearer and easier to understand.
In the following example, a single-line arrow function without parentheses is compared to a regular function.

// Arrow function

const students = student => console.log(student);

// Regular Function

function(student){
   console.log(student);
}

For example, using arrow functions is not the best approach when working with object prototypes, classes, or object literals.

Spread Extension Operator

Another new feature of ES6 is the spread extension operator (...). This operator allows literals, such as arrays, to be expanded into individual elements with a single line of code.
When we need to put an array or object into a new array or object or to combine multiple parameters in an array, this operator is really useful.
The following code shows how to combine two arrays using the spread operator. As you can see, it makes the code clean and easy to understand since we don’t need to use loops or conditions.

let x = [adam, john, silvia];
let y = [mike, teddy, ..x, frank]
console.log (y);
// mike, teddy, adam, john, silvia, frank

Shorthand Whenever Possible

The shorthand method can save you a lot of time and space when working with conditions.
If you want to check for empty, null, and undefined conditions for a variable, for example, you'll need to add two conditions in the if statement.

if (x !== “” && x !== null && x !== undefined) { ... }

Final

In this tutorial, I'll show you how to use JavaScript's features to produce clean code.
As developers, we should always produce clean code since it improves readability and makes the code easier to grasp for you and your team.
I hope that these tips will assist you in improving the readability of your code, and if you have any further suggestions, please leave them in the comments area.

Thanks!

How Algorithms Solves Problems?

Kubilay Çakmak — Wed, 29 Sep 2021 18:19:05 +0000

What is Algorithm and what is connection with programs?

All programming languages are based on algorithms. Algorithms can be implemented through programming languages.

Regardless of the language and usage area used in the program, there is no program without an algorithm. In the program, all inputs coming from outside for the operation of an algorithm are defined as "variables". Loops and operations in the algorithm take place over these variables.

All possibilities in the algorithm should be specified and clear. No possibility should be left to chance.

Every algorithm should be simple enough to be written down on paper. Algorithms can be represented in plain text or in flowcharts.
Flow charts show the operation of the algorithm in order, showing the cause-effect relationship.

Let's see couple of example of algorithm. We will write algorithm on a problem.

The problem can be take sum of the 3 numbers and lets say the variables should be x, y and z.

step -> start
step -> define x
step -> define y
step -> define z
step -> result = (x+y+z)/3
step -> show result to console
step -> stop

A solution path consisting of a sequential and finite number of processing steps to be followed to solve a problem.
Sequential presentation of process steps on how to perform a task/job.

It should be clear and unambiguous and should not include vague steps.
Must have a start state and an end
The order in which the steps will be performed should be clearly stated.
In algorithms, large and complex operations are divided into smaller and simpler steps.

Do not forget, Key features of the algorithms are;

Must be certain
Must be executable
Must be sequential
Must be finite

How algorithms solves problems?

The process of writing correctly by designing appropriate syntax to enable people to communicate with machines is called programming. Programming consists of two sub-elements. Analysis/Design and Coding.

Analysis/Design -> Designing correctly for problem solving.
Coding -> Expressing this designed way with codes.

In other words, the way designed to solve the problem with coding is translated into a language that the computer can understand by using a programming language.

Therefore, what we call an algorithm is actually the solution to the problem that we put forward in the analysis and design process.

In other words, while creating the solution of a problem in computer language, it is revealing the general operation of the program with logically sequential processing steps before it is coded in a programming language at the analysis stage.

Problem solving in computer environment...

Understanding the problem (examination, analysis).
To present alternative solutions.
To design the algorithm of the program by choosing one of the proposed solutions.
Coding the designed algorithm in a programming language.
Detecting errors in the editor where the program was coded and corrected them. to do.
To test the operation of the program with sample input and output values.

Thanks for reading. Hope its help you about what exactly Algorithms and how to solves problems.

Would you like to be a Software developer?

Kubilay Çakmak — Tue, 31 Aug 2021 18:39:06 +0000

Hey there, This is Kubilay Cakmak, I am from Turkey and now I moved to Canada for getting improve myself and maybe find a job here in Canada.

I am writing this blog for all people who wants to be software developer. Believe me it is not too hard to be. But I am here to explain you what I saw as a student and a jr. in software stuff.

First of all I got admitted to University. My field was Computer Engineering which we can call Computer Science in Canada. I studied 5 years in University. First year I got prep school which is only about English because my field was 100% English. After graduated from prep school I started to the software classes which is basic introductions ( What is computer, hardware, software ) after those classes we got algorithm class which is actually most important class in Computer science. I cannot think coding without algorithms.

Algorithm as I said is the most important class which you must make sure you understand. If you don't in class do study out of class. Believe me, when you finish the school you will understand why I am worried about that.

Secondly, I started to coding at C language which is the 'human-readable form, while the executable that comes out of the compiler is the machine-readable and executable form.'(1)

We were coding some basic programs with using C language and also we did use algorithms to do practises.

I will not going deeply what I learned on University because everything in your hands. Teacher will give you basic information on languages and you will chose what you want after graduate. Back-end developer, Front-end developer or Full-stack developer.

As a student I highly recommend you to do projects. Do with your friends or do as a freelancer. Any projects can be, the goal here is you will finish a project and after that you will have a product. Those products are your portfolio for applying a company. If those projects has story, that will be perfect. What I mean about story is, you did this project for some stuff and you thought this app will help something and while you coding you and your friends found some bugs on frameworks etc.

While studying I wanted to improve myself on mobile and web developments, I started to write code on Java and Kotlin for Android and Swift for IOS. After understanding how you can code, the languages have similar changes. After you can learn syntax you can code what language and what purpose you want.

I want to talk about my experience on startup company (GMOBIL). I started my first job just before I graudated from my university and it was full time Front-end developing. I used VueJS and ReactJS for web developing. (VueJS and ReactJS are framework of Javascript). Those frameworks are easy to develop a applications on Javascript with better understanding and better coding. Those technologies have their state management on what you do on status.

In this company I also created a mobile application with using Flutter (Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.(2)).

After 1 year experience on GMOBIL I decided to leave for moving Canada. While this experience I got, I learned a lot of technology I can use and I did not stop to learning. I am also a freelancer to make fully functional web and mobile applications with using NodeJS (NodeJS is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.(3))

I am here wants to be a full-time IOS developer using Swift, and also part-time freelancer on web and mobile developer. Why I want to be a Web and Mobile developer, because I really like to see what is building while I am coding. Some day, I want to be a part of Apple as a IOS developer in future.

If you have some question please let me know.
Instagram @ kubilaycakmk
Youtube @ Kanada Tecrübesi (https://www.youtube.com/channel/UCjKzBcazMjDhxkENwFW7bEg)

REFERENCES
(1) - https://computer.howstuffworks.com/c1.htm
(2) - https://flutter.dev
(3) - https://nodejs.org

Photo by Fotis Fotopoulos on Unsplash