DEV Community: Halil Can Ozcelik

Effective Object Usage Examples in JavaScript

Halil Can Ozcelik — Wed, 15 Jul 2020 10:18:00 +0000

In this article, I try to suggest effective solutions with objects in JavaScript for common use cases in the real world.

Objects instead of array search

Using objects in an array search decreases the time complexity of your solution in quite a lot of cases. Let’s continue explaining with examples:

function findMaxOccured() {
  const list = [12, 3, 55, 2, 7, 9, 2, 4, 2, 3];
  let maxOcc = { value: '', times: 0 };
  for (let i of list) {
    // this filter is a nested loop actually!
    const occ = list.filter(el => el === i).length;
    if (occ > maxOcc.times) {
      maxOcc = { value: i, times: occ };
    }
  }
  return maxOcc;
}

In the example above, we find the max occurred element in the list. There is a nested loop in here (filter method) because we are searching the whole list to find the occurrence times for each element of the list. So, the time complexity is O(n²) for this solution which is not good enough!
The possible object-related approach can be below:

function findMaxOccured() {
  const list = [12, 3, 55, 2, 7, 9, 2, 4, 2, 3];
  const occMap = {};
  let maxOcc = { value: '', times: 0 };
  for (let i of list) {
    occMap[i] = (occMap[i] || 0) + 1;
  }
  for (let i of Object.keys(occMap)) {
    if (occMap[i] > maxOcc.times) {
      maxOcc = { value: i, times: occMap[i] };
    }
  }
  return maxOcc;
}

First, we generate an occurrence map for the list. Then find the max occurred element in the map by iterating through it. Here there is no nested loop so time complexity is O(n) which is better!

Objects instead of conditions

In some cases, we need to call different functions or assign different values according to the value of a variable. For these cases, using a matching object instead of several condition blocks can be more effective solutions.

Let’s give an example:
The following code block is the first thing that comes to mind mostly.

function conditional(param) {
  if (param === 'a') {
    return 1;
  } else if (param === 'b' || param === 'c') {
    return 2;
  } else {
    return 3;
  }
}

This can be refactored like below:

function objectMatch(param) {
  const match = {
    a: 1,
    b: 2,
    c: 2,
    default: 3
  };
  return match[param] || match.default;
}

This alternative also is conceivable for switch cases:

function conditional(param) {
  switch (param) {
    case 'a':
      func1();
      break;
    case 'b':
    case 'c':
      func2();
      break;
    default:
      func3();
      break;
  }
}

In addition to the first one, we need to call the function () after getting from the mapping object. Again my suggestion:

function objectMatch(param) {
  const match = {
    a: func1,
    b: func2,
    c: func2,
    default: func3
  };
  const correspondingFunc = match[param] || match.default;
  correspondingFunc();
}

Additionally, this mapping objects can be moved to a higher scope if it doesn’t need to change in function just like our examples. Of course, for more complex conditions this approach couldn’t be the best fit but for simple cases like my examples, you can consider using objects.

The examples can be increased but I hope these explain the main idea.

JavaScript Interview Coding Questions - 5

Halil Can Ozcelik — Wed, 22 Jan 2020 20:24:17 +0000

In this article, I will add questions about JavaScript Classes. Let's begin:

This one is about converting constructor function to class. It is a beneficial coding exercise to understand JavaScript class knowledge.

// Rewrite the following consturctor function as a Class
function Animal(name) {
  this.name = name;
}
Animal.prototype.duck = function () {
  console.log(this.name, 'duck');
};

const animal = new Animal('daffy');
animal.duck();

The answer will be below:

// The answer is below
class Animal {
  constructor(name) {
    this.name = name;
  }

  duck() {
    console.log(this.name, 'duck');
  }
}
const animal = new Animal('daffy'); // new keyword is mandatory
animal.duck();

And one more related question after converting to class.

// 3. What will be the following console output?
console.log(typeof Animal);

The answer is:

function

You can test it in below:

This one is about differences in declaration of class and functions.

// 1. What will be the output?
const car = new Car('Clio');

function Car(model) {
  this.model = model;
}
Car.prototype.getModel = function () {
  return this.model;
};

console.log('car model:', car.getModel());

// 2. What will be the output?
const bike = new Bike('Bianchi');

class Bike {
  constructor(model) {
    this.model = model;
  }

  getModel() {
    return this.model;
  }
}

console.log('bike model:', bike.getModel());

The console output will be below:

car model: Clio
ReferenceError: Bike is not defined

function definitions are hoisted so we can create an instance before declaration. However, class definitions are not initialized until their definition is evaluated so it gives Bike is not defined error. You can read This stackoverflow answer for more detailed information.

You can test it in below:

Next question is about inheritance in JavaScript classes.

// 1. What will be the console outputs?
class Parent {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

class Child extends Parent {
  constructor(name) {
    super(name);
  }

  getMessage() {
    return `My name is ${super.getName()}`;
  }
}

const child = new Child('Halil');

console.log(child.getMessage());
console.log(child.getName());

The outputs will be as below:

My name is Halil
Halil

So, although there is no getName() method in Child class it is inherited from Parent class.

You can test it below:

Write a generator function which takes an array and returns its every member in each call.
The answer can be as below:

function* sendNumber(list) {
  for (let item of list) {
    yield item;
  }
}

const iterator = sendNumber([1, 2, 3]);

// What will be written?
console.log(iterator.next());
// What will be written?
console.log(iterator.next());
// What will be written?
console.log(iterator.next());
// What will be written?
console.log(iterator.next());

And the console outputs will be:

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }

You can test it in below:

You can read the previous articles of this series from the links below:

JavaScript Interview Coding Questions — 1

Halil Can Ozcelik ・ Jan 4 '20 ・ 2 min read

#javascript #career #webdev #tutorial

JavaScript Interview Coding Questions — 2

Halil Can Ozcelik ・ Jan 6 '20 ・ 2 min read

#javascript #webdev #career #tutorial

JavaScript Interview Coding Questions - 3

Halil Can Ozcelik ・ Jan 7 '20 ・ 3 min read

#javascript #webdev #career #tutorial

JavaScript Interview Coding Questions - 4

Halil Can Ozcelik ・ Jan 14 '20 ・ 2 min read

#javascript #career #tutorial #webdev

JavaScript Interview Coding Questions - 4

Halil Can Ozcelik — Tue, 14 Jan 2020 05:51:43 +0000

Continuing to questions… As I said in first blog, these are generally evaluation based code snippets.

This one is about scope differences of Arrow & Regular function definitions.
```
// 1. What will be logged? Why?
const module1 = {
  x: 55,
  getX: function () {
    console.log('x:', this.x);
  }
};

const module2 = {
  x: 55,
  getX: () => {
    console.log('x:', this.x);
  }
};

(function() {
  this.x = 66;
  module1.getX();
  module2.getX();
})();
```
The console output will be following:
```
x: 55
x: 66
```
Because this refers to wrapper object in regular function so this.x logs x property of wrapper module1 object in first example. On the other side, arrow functions don't bind their own scope, but inherit it from the parent one, which is Window or the global object in this case.

You can test it in below:
Let's examine same issue in a different example.
```
// 2. What will be logged? Why?
const message1 = {
  hello : 'Hello',
  names : ['Sue', 'Joe'],
  showMessage: function () {
    this.names.forEach(function(name) {
      console.log(`${this.hello} ${name}`);
    });
  }
}
message1.showMessage();

const message2 = {
  hello : 'Hello',
  names : ['Sue', 'Joe'],
  showMessage: function () {
    this.names.forEach(name => {
      console.log(`${this.hello} ${name}`);
    });
  }
}
message2.showMessage();
```
The console output will be following:
```
undefined Sue
undefined Joe
Hello Sue
Hello Joe
```
In message1, the function inside this.names.forEach is defined as regular function, so this equals to the global object by default (Window in browsers, global in Node.js) and it has no hello property. this equals to undefined by default in strict mode!

On the other hand, in message2, the function inside this.names.forEach is defined as arrow function. Arrow functions don't have own scope, so it equals to owner's (which is showMessage in this case) scope. The scope of showMessage is the wrapper object message2. For this reason, we can reach hello property of message2 by using this.hello.

You can test it in below:

This question is to evaluate knowledge about promises in JavaScript.

const promiser = ms => new Promise((resolve, reject) => {
  setTimeout(() => { resolve('wait wait..') }, ms)
});

const timeout = new Promise((resolve, reject) => {
  setTimeout(() => { resolve('timeout!') }, 2000)
});

const race1 = Promise.race([promiser(1000), timeout]);
const race2 = Promise.race([promiser(3000), timeout]);

// What will be the output?
race1.then(res => console.log('race1:', res))
  .catch(err => console.log('race1:',  err));

// What will be the output?
race2.then(res => console.log('race2:', res))
  .catch(err => console.log('race2:', err));

The result will be below:

race1: wait wait..
race2: timeout!

Promise.race() returns a winner promise which fulfills or rejects sooner. Our timeout promise is resolved in 2 seconds. The promiser is taking resolving time as parameter. In first race, it resolved in 1 second so wins the race, but in the second race it takes 3 seconds as parameter so timeout is resolved earlier.

You can test it in below:

You can read the previous articles of this series from the links below:

JavaScript Interview Coding Questions — 1

Halil Can Ozcelik ・ Jan 4 '20 ・ 2 min read

#javascript #career #webdev #tutorial

JavaScript Interview Coding Questions — 2

Halil Can Ozcelik ・ Jan 6 '20 ・ 2 min read

#javascript #webdev #career #tutorial

JavaScript Interview Coding Questions - 3

Halil Can Ozcelik ・ Jan 7 '20 ・ 3 min read

#javascript #webdev #career #tutorial

JavaScript Interview Coding Questions - 3

Halil Can Ozcelik — Tue, 07 Jan 2020 10:01:14 +0000

I am trying to explain some possible coding questions in software developer interviews. I will mention recursion and array mutation in this third article. These two topics are important in functional programming paradigm. Also, the last example is about prototypal inheritance which is crucial to understand inheritance in JavaScript.

Write a recursive function to calculate the total of numbers between 1 to n?
n will be the parameter of our function. So we should call this calculator function until reaching to 1 which is our end point. So, one of the possible effective solutions will be below code:
```
function calculateTotal(number, total = 1) {
  return number > 1 ?
    calculateTotal(number - 1, total + number) :
    total;
}

console.log(calculateTotal(10));
```
You can examine the code in below:

Write a recursive factorial calculator function.
We can easily adapt same logic to factorial calculation as below:

function factorial(number, product = 1) {
  return number > 0 ?
    factorial(number - 1, product * number) :
    product;
}

console.log(factorial(5));

!! The recursive functions above will cause stack overflow error for large inputs. In order to prevent it, Trampoline Pattern can be used as below:

// recursive optimization to prevent stack overflow error
function trampoline(fn) {
  return (...args) => {
    let result = fn(...args);
    while (typeof result === 'function') {
      result = result();
    }
    return result;
  };
}

// Write a recursive function to calculate the total of numbers between 1 to n?
function calculateTotal(number, total = 1) {
  return number > 1 ?
    () => calculateTotal(number - 1, total + number) :
    total;
}

const totalCalculator = trampoline(calculateTotal);
console.log(totalCalculator(100000));

// Write a recursive factorial calculator function
function factorial(number, product = 1) {
  return number > 0 ?
    () => factorial(number - 1, product * number) :
    product;
}

const factorialCalculator = trampoline(factorial);
console.log(factorialCalculator(100));

You can examine the code in below:

This one is about mutator methods in JavaScript arrays. Immutability of variables is an important topic in functional programming.

var arr = [1, 2, 3, 7, 4];
// Which of the followings will mutate variables?
// Find a functional alternative for mutator ones.
arr.push(5);          => mutator
arr.shift();          => mutator
arr.concat(6, 7);     => non-mutator
arr.map(a => a * a);  => non-mutator
arr.sort();           => mutator

And these can be alternative solutions for mutator ones.

var arr = [1, 2, 3, 7, 4];
// Which of the followings will mutate variables?
// Find a functional alternative for mutator ones.
arr.push(5);          => arr.concat(5);
arr.shift();          => arr.slice(1);
arr.concat(6, 7);     => non-mutator
arr.map(a => a * a);  => non-mutator
arr.sort();           => arr.concat().sort()

You can examine the code in below:

This one is to examine your understanding about Prototypal Inheritance.
```
function Person() {}

// 1st definition for 'sayHi' method
Person.prototype.sayHi = function () {
  console.log('Hi!');
};

var person = new Person();

// What will be the printed message?
person.sayHi();

// 2nd definition for 'sayHi' method
Person.prototype.sayHi = function () {
  console.log('Hello!');
};

// What will be the printed message?
person.sayHi();

// What will be returned?
person.hasOwnProperty('sayHi');
```
The output will be below:
```
Hi!
Hello!
false
```
person object doesn't have own sayHi() method because Person function doesn't have any method. When we instantiate an object with new keyword, it inherits all prototype methods of the function as its __proto__ property. So, in first execution of sayHi() the defined one is logging Hi! so it is executed. But after second definition of sayHi() the newer one will be called. Because, person.sayHi() points to the same function due to prototypal inheritance. Finally, person.hasOwnProperty('sayHi') returns false because this is not a property of person object, it is inherited by prototype chain.

You can examine the code in below:

My some other articles:

JavaScript Interview Coding Questions — 1

Halil Can Ozcelik ・ Jan 4 '20 ・ 2 min read

#javascript #career #webdev #tutorial

JavaScript Interview Coding Questions — 2

Halil Can Ozcelik ・ Jan 6 '20 ・ 2 min read

#javascript #webdev #career #tutorial

Create a Multi-Language Website with React Context API

Halil Can Ozcelik ・ Nov 7 '19 ・ 3 min read

#react #javascript #webdev #tutorial

JavaScript Interview Coding Questions — 2

Halil Can Ozcelik — Mon, 06 Jan 2020 18:10:09 +0000

Let’s continue to coding assessment questions.

This one is about testing hoisting knowledge in JavaScript.
```
// What will be the console outputs? Why?
callMe1();
callMe2();

function callMe1() {
  console.log('I am here');
}

var callMe2 = function () {
  console.log('I am here too');
};
```
You will get an error for callMe2(). Console log will be below:
```
I am here
TypeError: callMe2 is not a function
```
In JavaScript, basically function and variable definitions are moved to top (which is named as hoisting). The callMe2 variable is defined but it is not a function! This is because, hoisting only moves up to declarations not initializations. So, our callMe2 variable is declared but the function is not assigned to it.

You can test it in below:
This one is for testing the knowledge about const, let and var.
```
// 1. What will be output?
var v;
let l;
const c;
console.log({ v, l, c });
```
Again you will get an error.
```
const c;
      ^
SyntaxError: Missing initializer in const declaration
```
You must assign a value while declaring a const variable!

You can test it in below:
Another question about variable declarations.
```
// 2. What will be outputs? Try one by one!
console.log('a:', a);
var a = 1;

console.log('b:', b);
let b = 2;

console.log('c:', c);
const c = 3;
```
If you try them one by one you will see the following console logs:
```
a: undefined
ReferenceError: b is not defined
ReferenceError: c is not defined
```
This is because variables which are declared with let or const are not initialized until their definition is evaluated! So it will throw ReferenceError. You can read Temporal Dead Zone part for more detailed information.

You can test it in below:

My some other articles:

JavaScript Interview Coding Questions — 1

Halil Can Ozcelik ・ Jan 4 '20 ・ 2 min read

#javascript #career #webdev #tutorial

JavaScript Interview Coding Questions - 3

Halil Can Ozcelik ・ Jan 7 '20 ・ 3 min read

#javascript #webdev #career #tutorial

Chrome DevTool Tips

Halil Can Ozcelik ・ Dec 20 '19 ・ 2 min read

#productivity #todayilearned #webdev #tutorial

Create a Multi-Language Website with React Context API

Halil Can Ozcelik ・ Nov 7 '19 ・ 3 min read

#react #javascript #webdev #tutorial

JavaScript Interview Coding Questions — 1

Halil Can Ozcelik — Sat, 04 Jan 2020 20:48:27 +0000

Online coding is a crucial part of software developer job interviews. In this article, I will try to add several coding questions. These will be evaluation focused code snippets instead of task based coding questions. Additionally, I will share online code links at the end of every question.

Let’s start with one of the most well-known one:

In this question, closure and asynchronous code handling knowledge is assessed.
```
// What will be the console log of the code below?
for (var i = 0; i < 4; i++) {
  setTimeout(() => console.log(i), 0);
}
```
It will write 4, 4, 4, 4 in console because setTimeout() is a
asynchronous function and it will be executed after for cycle is completed. i is defined outside scope of for loop and it will be equal to 4 when console.log() starts to write.
How can you fix it to write 0, 1, 2, 3? Here is the possible solutions:
```
// Solution 1:
for (let i = 0; i < 4; i++) {
  setTimeout(() => console.log(i), 0);
}

// Solution 2:
for (var i = 0; i < 4; i++) {
  (function (i) {
    setTimeout(() => console.log(i), 0);
  })(i);
}
```
Solution 1: You can change declaration of i from var to let
because let is block scoped variable but var is function scoped variable.
Solution 2: You can wrap setTimeout() with a function to limit
the scope of i variable. But you should pass i as parameter to your IIFE (Immediately-invoked Function Expression).

You can test it in below:
This one is about scope of this.
```
// What will be the logs in console?
function nameLogger() {
  this.name = 'halil';
  console.log('first:', this.name);
}

console.log('second:', this.name);
nameLogger();
console.log('third:', this.name);
```
Console output will be following:
```
second: undefined
first: halil
third: halil
```
While “second” is executed this.name is undefined but after nameLogger() function is executed it will be defined. Because, this refers to the global object in a function. So the others log "halil" as expected.
!! It will not work with 'use strict' because in a function, in strict mode, this equals undefined instead of global object.

You can test it in below:
The last one is about this and bind
```
// What will be written?
const module = {
  x: 55,
  getX: function () {
    console.log('x:', this.x);
  }
};
const unboundX = module.getX;
unboundX();
```
Console output will be x: undefined because this refers to current owner object. So when you assign only getX method to a new object unboundX, this will refers to it. And it has no x property, that’s why this.x equals to undefined.
You can fix it by using bind() as below:
```
const boundX = unboundX.bind(module);
boundX();
```
Now you bind module object to unboundX function. Then it can reach the x property of module.

You can test it in below:

You can read some of my other articles from the links below:

JavaScript Interview Coding Questions — 2

Halil Can Ozcelik ・ Jan 6 '20 ・ 2 min read

#javascript #webdev #career #tutorial

JavaScript Interview Coding Questions - 3

Halil Can Ozcelik ・ Jan 7 '20 ・ 3 min read

#javascript #webdev #career #tutorial

Chrome DevTool Tips

Halil Can Ozcelik ・ Dec 20 '19 ・ 2 min read

#productivity #todayilearned #webdev #tutorial

Chrome DevTool Tips

Halil Can Ozcelik — Fri, 20 Dec 2019 22:57:49 +0000

In this article, I will write down some tips for more productive Chrome developer tools usage. Tips are grouped according to the tabs of Chrome DevTools.

Elements

You can add a breakpoint to DOM elements by clicking the 3 dots (...) on the left of elements panel lines. If you select the "Break on" option you will see 3 kinds of breakpoints. These are:
1. subtree modification: Stop if any child elements changed.
2. attribute modifications: Stop if any attribute of the element is changed.
3. node removal: Stop if the element is removed from DOM.
Console
In this part, I will mention some helpful commands you can use in the Console panel of Chrome DevTool.

Firstly there is an easy way to get selected elements in Console.
$0: Returns the element which is currently selected in the Elements tab.
$1: Returns the element which is previously selected in the Elements tab.
$2: Returns the element which is twice previously selected in the Elements tab. So on and so forth.

Secondly there is built-in selectors in devtool which quite similar to JQuery.
$(<css selector>): Returns the first matching element. Such as document.querySelector()
Ex: $('div.head'): select the first div element which has 'head' class.

$$(<css selector>): Returns all matching elements. Such as document.querySelectorAll()
Ex: $('div.head'): select the all div elements which have 'head' class.

Also, you can find an element in the Elements tab by using Console.
inspect(<selector>): Select the element in Elements tab.
Ex: inspect($('div')): Selects the first div element in Elements tab.

Another helpful command is for monitoring events in Console.
monitorEvents(selector, event): Write event objects to Console when the defined event is triggered for the selected element.
Ex: monitorEvents($(‘button’), ‘click’): Write event object to console while the selected button is clicked.

unmonitorEvents(<selector>): Remove event monitoring for the selected element.
Ex: unmonitorEvents($(‘button’)): Remove event logging for the selected button element.
Source

You can add snippets by selecting "Snippets" tab from the left panel in the Source tab. It is a helpful tool for debugging & testing. You can run these snippets by right click & "Run" or "Cmd + Enter" shortcut.

XHR breakpoints can be added for any requests or URL filtered ones. In the screenshot above XHR breakpoint added for the requests which contain "age" in its URL. So the DevTool stops whenever these type of request is sent.

Lastly, you can add conditional breakpoints by right-clicking the breakpoint and selecting "Edit breakpoint" from the menu.

It stops only the entered condition is satisfied. For the screenshot above, it only stops if k is bigger than 4.
Network

You can adjust your internet speed by changing "Throttling" setting under the Network tab. So, you can simulate slower connections for testing specific cases. It is very beneficial when you trying to handle loading states etc.

Create a Multi-Language Website with React Context API

Halil Can Ozcelik — Thu, 07 Nov 2019 21:30:45 +0000

In this article, I will try to explain my approach to develop a multi-language website with React Context API. If you are used to reading code better than words, you can examine the example project from this Github repository.

And here is the live POC of the project.
(This link exists on the Github Repo too)

First, I strongly suggest taking a glance at the React Context API and useContext Hook documents from the official React website.

And here we go! This is the folder structure of the project:

Texts are stored as JSON for each language. You can see the example for English below:

{
  "exploreHeader": "Explore",
  "welcomeDescription": "This is a demo app for multi-language website with React Context API",
  "clickMe": "Click Me",
  "aboutMe": "For more info about the author",
  "buttonClicked": "You clicked to button!"
}

All of them are stored in a dictionary object and it will be shown according to the selected language which I will explain later in this article.

import tr from './tr.json';
import en from './en.json';
import de from './de.json';

export const dictionaryList = { en, tr, de };

export const languageOptions = {
  en: 'English',
  tr: 'Türkçe',
  de: 'Deutsch'
};

The language selector is filled by languageOptions. User can change the language of the website from there.

I will create a context that contains the selected language and dictionary.

import { languageOptions, dictionaryList } from '../languages';

// create the language context with default selected language
export const LanguageContext = createContext({
  userLanguage: 'en',
  dictionary: dictionaryList.en
});

Then define the Context Provider. We can set the selected language and get related texts from the dictionary by this context provider.

// it provides the language context to app
export function LanguageProvider({ children }) {
  const defaultLanguage = window.localStorage.getItem('rcml-lang');
  const [userLanguage, setUserLanguage] = useState(defaultLanguage || 'en');

  const provider = {
    userLanguage,
    dictionary: dictionaryList[userLanguage],
    userLanguageChange: selected => {
      const newLanguage = languageOptions[selected] ? selected : 'en'
      setUserLanguage(newLanguage);
      window.localStorage.setItem('rcml-lang', newLanguage);
    }
  };

  return (
    <LanguageContext.Provider value={provider}>
      {children}
    </LanguageContext.Provider>
  );
};

When the language selector is changed, it will call the userLanguageChange() method of the provider.

You can examine the LanguageSelector.js below:

import React, { useContext } from 'react';

import { languageOptions } from '../languages';
import { LanguageContext } from '../containers/Language';

export default function LanguageSelector() {
  const { userLanguage, userLanguageChange } = useContext(LanguageContext);

  // set selected language by calling context method
  const handleLanguageChange = e => userLanguageChange(e.target.value);

  return (
    <select
      onChange={handleLanguageChange}
      value={userLanguage}
    >
      {Object.entries(languageOptions).map(([id, name]) => (
        <option key={id} value={id}>{name}</option>
      ))}
    </select>
  );
};

And we need to wrap the main component which is App.js with LanguageProvider.

function App() {
  return (
    <LanguageProvider>
      <div className="App">
        <header className="App-header">
          <LanguageSelector />
        </header>

        <Explore />
      </div>
    </LanguageProvider>
  );
}

Then, we define Text component to translate our texts.

// get text according to id & current language
export function Text({ tid }) {
  const languageContext = useContext(LanguageContext);

  return languageContext.dictionary[tid] || tid;
};

Now, we can use this component to gather related text according to the selected language from predefined language objects (which I mentioned at the beginning of the article).
Also, we can call the language context directly to use such as the input placeholder example below.
Here are several usage examples in a component:

export default function Explore() {
  const [clickText, setClickText] = useState();
  const { dictionary } = useContext(LanguageContext);

  const handleClick = () => {
    setClickText(<Text tid="buttonClicked" />);
  }

  return (
    <div>
      <h1><Text tid="exploreHeader" /></h1>
      <p><Text tid="welcomeDescription" /></p>

      <div>
        <input type="text" placeholder={dictionary.enterText} />
        <button onClick={handleClick}>
          <Text tid="clickMe" />
        </button>
        <p>{clickText}</p>
      </div>

      <a href="https://halilcanozcelik.com" target="_blank" rel="noopener noreferrer">
        <Text tid="aboutMe" />
      </a>
    </div>
  );
}

Additionally, the selected language should be stored in the database or local storage of the browsers and context states filled by this option at the beginning. An option of languageOptions can be used for a fallback scenario, I used English (“en”) in this project. Also, I have stored the selected language in local storage and reading from there at the beginning. If there is no info, then using browser language as the default language.
I hope it will be helpful.

Very Basics of Cloud Services and AWS

Halil Can Ozcelik — Sun, 03 Nov 2019 08:48:19 +0000

Cloud services, especially AWS, become more popular every day. So, “what is the cloud?” is an important question to understand whether we need it or not in our projects. In this article, I will try to explain briefly what I understood in AWS Concepts course of Linux Academy. I strongly suggest this short course (totally around 1 hour) to whom wonder cloud services and AWS basics. Then you can continue with AWS Essentials course of the same lecturer if you want.

Advantages of Cloud Systems:

High Availability: Your files are always available for any device.
Fault-Tolerant: If some problem occurs there is an available backup.
Scalability: Increase your processor power, storage, database based on demand to your system.
Elasticity: Decrease your processor power, storage, database based on demand to your system.

Amazon Web Service (AWS)

Let’s talk about these basic AWS elements:

EC2: A virtual computer which is primarily used for its computing power. You can think of it as a basic computer which includes CPU, RAM, Firewall, Operating System, etc. It generally used as a web hosting part of the system.
RDS: Database of AWS. You can store information such as inventory catalog or customer info in there.
S3: It is a massive storage bucket. It commonly used for storing media files such as images, videos, etc.
VPC: Virtual Private Cloud is your private section on AWS, where you can allow/restrict access to them.

Availability Zone: Physical location of Amazon Data Centers. They have separated geographically in each AWS region also.

AWS Region: A geographical region which includes AWS Availability Zones, such as Tokyo, Dublin. It helps decreasing latency due to geographical distances.

Generally, there are more than one Availability Zones in an AWS region in order to provide ‘High Availability’ and ‘Fault Tolerant’ as we mentioned above. For instance, if there is a disaster or power outage in an Availability zone you can connect the other one.

As a result, these are the very basics of cloud services and especially Amazon Web Services. If you want to dig into more about this topic, I strongly suggest the courses which I mentioned in the introduction passage.

My some other articles:
Create a Multi-Language Website with React Context API
Chrome Devtool Tips
An NLP Command Line Application with Node.js

An NLP CLI App for Terminal Commands

Halil Can Ozcelik — Sat, 02 Nov 2019 19:00:18 +0000

This project is an approach for a command-line application which is working with human language. The main benefits of using such a tool at first glance are:

You don’t need to find different commands for the same job according to operating systems. For instance, you must use ls in a Linux based OS, but you have to use dir in Windows for the same job. Of course, this is a very basic example but if you think about more complicated and less-known commands and also take into consideration the number of different operating systems, working independently of operating systems will be very beneficial.
No need to memorize commands & parameters anymore. Again if you think about well-known easy commands, writing list files instead of ls doesn’t seem effective to you. But if more advanced commands come in or you need several parameters while executing commands, writing a sentence instead of searching them on the internet makes sense.
You can use your native language for the command line. This application supports all languages which are available in Wit.ai service. It includes almost all widely used languages such as Chinese, English, French, German, Russian, Spanish, Turkish, etc. You can check the list of all supported languages from this link.

When it comes to the technical part, it has two sub-projects. Both client and server sides of it are developed with Node.js. Here is a more detailed explanation of them:

Client-side project: It is an npm package. It basically sends requests to the server. According to the response whether executing the related command or show an error or confirmation messages. You can check the GitHub link if you want to examine it in detail. Or you can install it directly by running npm install sem-cli -g in your terminal.
Server-side project: This project is developed with Azure Functions (Node.js) + CosmosDB + Wit.ai. It is developed as a serverless system in Azure Cloud. Here is the Github repository of this project. The server side of the project contains the main logic. I will try to explain in detail below.

In the client-side package, there are three commands which are sem-exec, sem-look, and sem-suggest. The first one is for running a command, the second one is to search for a command with human language and the last one is for suggesting new intent & command relations. The command coverage of this project will increase under the favor of these suggestions from users.
Now let’s dig into how these commands work. But first I want to give information about parameters in these commands. So we can understand easier the rest of this article.

intent: It is a short explanation for the purpose of this command.
command: It is the related command.
message: It is the client’s message with the human language. No need to write it without any typo. Our AI service can handle many typo errors. Also, it supports many different languages. You can use your native language, but I give all the examples in English for this article.
dangerLevel: It shows how dangerous to run this command. It can be “low”, “medium” or “high”. (“high” dangerous commands will not be run before a client approval)

The workflow of running command by `sem-exec`

Let’s go through step by step according to numbers in the schema:

The user enters a message. You don’t need to enter messages with %100 correctly typed. Thanks to Wit.ai, we can analyze sentences although some typos.
The server asks Wit.ai to find out related intent, in other words, the meaning of the user’s sentence.
Then we got the intent, if there is no result, the server returns an error message to the client.
Query database to find related command according to the intent & operating system of the request.
And then get the result from the database.
If there is a command, return it with danger level information otherwise return a “not found” error message. On the client-side, it runs the command or shows the error or confirmation message.
For commands with a “high” danger level, our program asks for client confirmation. Are you sure to run: <result-command>? (type 'y' for yes, 'n' for no) If the user accepts it, then the command will be executed.

The workflow of running command by `sem-look`

This command has the same process as sem-exec.
However, it returns the corresponding command instead of executing it. For instance, if you run
sem-look compare files p="a.txt b.txt"
as command then it returns the following message:
Your command: "cmp a.txt b.txt" with danger level: "low" for your current operating system.
The current operating system is Mac OS for this example.

The logic of `sem-suggest` is much simpler

The user sends a suggestion triples that must contain intent, command, and danger level.
The server adds this new suggestion to the database. These records are stored in the suggestion table. They will be evaluated manually in the current scenario.
We got a response from the database.
The server returns a success or error message to the client.

Finally, I want to mention the database. There are two containers with the same document structure.

commands
- intent (the aim of the command)
- command (executable command)
- os (the operating system which the command can work)
- dangerLevel (danger level of the command)
suggestions
- intent (the aim of the command)
- command (executable command)
- os (the operating system which the command can work)
- dangerLevel (danger level of the command)

By the way, you don’t need to write your operating system either for sem-look or sem-suggest, because it is detected by the client-side program and added to the requests as a parameter. So, please suggest a command which is working on your current operating system.

Current Status

The project is working as expected. However, there is not enough data in the commands table. So, it is not covering a wide variety of command requests for now. For this reason, the enrichment of the commands list is the most important point in the current situation.

Future Improvements & Challenges

In my opinion, the main challenge in front of this project is the enrichment of the database with new commands. It will be very difficult if only several people add new commands. Suggestion functionality is added to give permission for proposing new commands to everyone. After checking these suggestions, beneficial ones will be added to the database. This evaluation process is done manually for now.
Additionally, distinguishing the parameter differences of commands in the semantic analysis will be another challenging point. Although we handle the finding correct command for human sentence requests when it comes to detecting differences in the manner of command parameters, training of AI is the crucial point. User messages and intents are matched on Wit.ai panel and it increases the analysis power of our tool. The more this tool is used, the more matching occurs and it increases the confirmation rate (which is between 0 and 1). So we can increase our threshold for matchings, it also helps us for detecting the differences in quite similar messages such as list files => ls and list all files => ls -a. Again this one is a very basic example, it is already detectable by our system :)

Here is my project about an NLP approach to command line usage. If you think it can be useful and you have some ideas, I will be happy to hear. Also, I am eager for collaboration.

Building a web server with pure Node.js

Halil Can Ozcelik — Sat, 02 Nov 2019 18:54:09 +0000

There are many frameworks for Node.js to build a web server application. I am adding several of the most well-known ones below.

However, what if we don’t want to use any of them? We can build a web server by using pure Node.js. Of course, these frameworks make our life easier. Personally, I often use Express framework mostly but I will use pure Node.js API from now on as much as possible, especially for small projects :) This is simply because of the fact that these frameworks add many dependencies to our project so it causes huge node_modules.

A simple web application or server can be built equally easily by using built-in modules making our apps more lightweight and easy to manage/maintain.
If you are used to reading code better than words, here’s a simple web server application built without any frameworks on Node.js. You can also check on GitHub from this link.

const http = require('http');
/** handle GET request */
function getHandler(req, res, reqUrl) {
  res.writeHead(200);
  res.write('GET parameters: ' + reqUrl.searchParams);
  res.end();
}

/** handle POST request */
function postHandler(req, res, reqUrl) {
  req.setEncoding('utf8');
  req.on('data', (chunk) => {
    res.writeHead(200);
    res.write('POST parameters: ' + chunk);
    res.end();
  });
}

/** if there is no related function which handles the request, then show error message */
function noResponse(req, res) {
  res.writeHead(404);
  res.write('Sorry, but we have no response..\n');
  res.end();
}

http.createServer((req, res) => {
  // create an object for all redirection options
  const router = {
    'GET/retrieve-data': getHandler,
    'POST/send-data': postHandler,
    'default': noResponse
  };
  // parse the url by using WHATWG URL API
  let reqUrl = new URL(req.url, 'http://127.0.0.1/');
  // find the related function by searching "method + pathname" and run it
  let redirectedFunc = router[req.method + reqUrl.pathname] || router['default'];
  redirectedFunc(req, res, reqUrl);
}).listen(8080, () => {
  console.log('Server is running at http://127.0.0.1:8080/');
});

Firstly, I am creating an HTTP server by using createServer() method from the HTTP API of Node.js. In the request listener part of it, I am detecting the request and redirecting the related function.

As you can see, I have three functions which are getHandler(), postHandler() and noResponse(). They are handling the related URL request. URL and function couples are stored in router object as { method/url: function }.

Then, I parse the URL by using the WHATWG URL API. One of the reasons for this, I can get many URL functionalities such as pathname, host, origin, etc and I can handle easily without struggling string manipulations. After that, I construct my request key which is req.method + reqUrl.pathname for searching related function.

And finally, find the related function from router and call it by passing request and response objects. If there is no related function in the object then I call the default one which is noResponse() in our case.

Here is my approach to creating a simple web server with pure Node.js. In my opinion, working on a software language without any framework is also important to understand the basics of it.

You can read this MDN documentation for an extended example of a pure Node.js server. And of course, Node.js API is the most important document which helps you!

Additionally, you can check the server-side of my NLP Command Line App project for a more detailed implementation of the pure Node.js server. Also, read my article about this project if you want to learn more about it.

My some other articles:
Create a Multi-Language Website with React Context API
Chrome Devtool Tips
An NLP Command Line Application with Node.js

Essais on REST API

Halil Can Ozcelik — Fri, 01 Nov 2019 21:32:44 +0000

REST (Representational State Transfer) is based on HTTP. I will write some basic information about the REST API. It is not a structured REST explanation, I will write down some notes about it.

If a request is cached, the response can be sent from one of the intermediaries (Proxy or Gateway) without reaching to server.

REST Methods

GET: Retrieve information about the REST API resource
POST: Create a REST API resource
PUT: Update a REST API resource wholly
DELETE: Delete a REST API resource or related component
PATCH: Update a REST API resource partially or wholly
HEAD: Identical to GET requests but only returns HTTP headers
OPTIONS: Describes the communication options for the target resource
CONNECT: Establishes a tunnel to the server identified by the target resource
TARGET: Performs a message loop-back test along the path to the target resource

And here are some helpful information about various REST methods:

GET requests can be cached POST requests never cached
GET requests to remain in browser history POST request does NOT
GET request can be bookmarked POST requests can NOT
GET requests to have length restrictions POST request have NOT
PUT requests insert or update a record depending upon whether the given record exists
PATCH requests set or update selected properties only and NOT the whole data.
Idempotent requests: Making multiple identical requests has the same effect as making a single request.
POST, CONNECT and PATCH methods are NOT idempotent.
GET, HEAD, OPTIONS, PUT, DELETE and TRACE methods are idempotent.

For more information, I suggest you visit the related page in W3C and the related Mozilla Developer Network page.

DEV Community: Halil Can Ozcelik

Effective Object Usage Examples in JavaScript

Objects instead of array search

Objects instead of conditions

JavaScript Interview Coding Questions - 5

JavaScript Interview Coding Questions — 1

Halil Can Ozcelik ・ Jan 4 '20 ・ 2 min read

JavaScript Interview Coding Questions — 2

Halil Can Ozcelik ・ Jan 6 '20 ・ 2 min read

JavaScript Interview Coding Questions - 3

Halil Can Ozcelik ・ Jan 7 '20 ・ 3 min read

JavaScript Interview Coding Questions - 4

Halil Can Ozcelik ・ Jan 14 '20 ・ 2 min read

JavaScript Interview Coding Questions - 4

JavaScript Interview Coding Questions — 1

Halil Can Ozcelik ・ Jan 4 '20 ・ 2 min read

JavaScript Interview Coding Questions — 2

Halil Can Ozcelik ・ Jan 6 '20 ・ 2 min read

JavaScript Interview Coding Questions - 3

Halil Can Ozcelik ・ Jan 7 '20 ・ 3 min read

JavaScript Interview Coding Questions - 3

JavaScript Interview Coding Questions — 1

Halil Can Ozcelik ・ Jan 4 '20 ・ 2 min read

JavaScript Interview Coding Questions — 2

Halil Can Ozcelik ・ Jan 6 '20 ・ 2 min read

Create a Multi-Language Website with React Context API

Halil Can Ozcelik ・ Nov 7 '19 ・ 3 min read

JavaScript Interview Coding Questions — 2

JavaScript Interview Coding Questions — 1

Halil Can Ozcelik ・ Jan 4 '20 ・ 2 min read

JavaScript Interview Coding Questions - 3

Halil Can Ozcelik ・ Jan 7 '20 ・ 3 min read

Chrome DevTool Tips

Halil Can Ozcelik ・ Dec 20 '19 ・ 2 min read

Create a Multi-Language Website with React Context API

Halil Can Ozcelik ・ Nov 7 '19 ・ 3 min read

JavaScript Interview Coding Questions — 1

JavaScript Interview Coding Questions — 2

Halil Can Ozcelik ・ Jan 6 '20 ・ 2 min read

JavaScript Interview Coding Questions - 3

Halil Can Ozcelik ・ Jan 7 '20 ・ 3 min read

Chrome DevTool Tips

Halil Can Ozcelik ・ Dec 20 '19 ・ 2 min read

Chrome DevTool Tips

Create a Multi-Language Website with React Context API

Very Basics of Cloud Services and AWS

Advantages of Cloud Systems:

Amazon Web Service (AWS)

An NLP CLI App for Terminal Commands

The workflow of running command by sem-exec

The workflow of running command by sem-look

The logic of sem-suggest is much simpler

Current Status

Future Improvements & Challenges

Building a web server with pure Node.js

Essais on REST API

REST Methods

The workflow of running command by `sem-exec`

The workflow of running command by `sem-look`

The logic of `sem-suggest` is much simpler