DEV Community: Yiğit Kaan Korkmaz

The CSS classList.toggle Method (And a surprise feature of it)

Yiğit Kaan Korkmaz — Thu, 14 Jul 2022 17:00:20 +0000

Hello everyone! Today i want to talk to you about the CSS classList.toggle method and an interesting feature of it that i've found.

So, let's begin by learning what the method itself does:

<p>Lorem ipsum</p>

.blue {
  color: blue;
}

const p = document.querySelector("p");

p.classList.toggle("blue");

setTimeout(() => {
  p.classList.toggle("blue");
}, 5000)

So, above is a snippet of an HTML page with the p tag with the text "Lorem ipsum", and what we just did in the js part is, we selected the tag first, and then "toggled" the "blue" class of it.

And 5 seconds later, we just "toggled" the "blue" class again.

What that means is JS basically checks if the "blue" class exists in the element, it removes it, if it does not, it simply adds the element.

This can be used in a lot of ways! To make more reactive content and to just simply hide things in a dynamic manner, the "classList.toggle" method is great!

But what about the special part i just talked to you about?

Take the program below as an example:

<p>Lorem ipsum</p>

<button>Increment</button>

.blue {
  color: blue;
}

.red {
  color: red;
}

const p = document.querySelector("p");
const incrementBtn = document.querySelector("button");
let i = 0;

p.classList.toggle("blue");

incrementBtn.addEventListener("click", (_) => {
  i++;
  if (p) {
    p.classList.toggle("red", i > 3);
    p.classList.toggle("blue", i <= 3);
  }
});

But Kaan, what is the second boolean property you just gave to it? I hear you asking, well that my friend, is the "force" property of the toggle method. Basically, if that method is true, the class is immediately added to the element, and if not, it is immediately removed.

So i used it to make a counter, that when it gets above 3, the text turns red, and if not, the text is blue!

Using this property you can add or remove things based on a conditional, which is amazing and very useful!

I hope today's article has been any use to you, if so, i'd appreciate your like!

And if you found any problems in the code or in any information i've given, please feel free to leave a comment and tell me about it, i'd love to hear your opinion on things!

Until then, see you in the next article!

TypeScript Decorators

Yiğit Kaan Korkmaz — Mon, 04 Jul 2022 12:48:23 +0000

Hello everyone! Today i will talk to you about TypeScript decorators. They're honestly just amazing and used in a variety of libraries and applications.

So, first of all, what do they do?

"A Decorator is a special declaration that can be attached to the top of classes, methods, accessors, properties, or parameters. Decorators use the form @Decorator, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration." Says the TypeScript documentation itself. I will put a link to it at the end of the article, it's a must read if you want more detailed information on decorators!

Without further a do, let's see an example of it and understand what it does:

function Configurable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.configurable = value;
  };
}

function Logger(target: any, propertyKey: string) {
  console.log(`Target is: ${target}`);
  console.log(`Property Key is: ${propertyKey}`);
}

class ExampleClass {
  @Logger
  private _x: number;

  constructor(x: number) {
    this._x = x;
  }

  @Configurable(false)
  get x() {
    return this._x;
  }
}

The code above basically makes the accessor function not configurable, and just logs the property it accesses.

But what does all that complex stuff from the documentation and this example mean? Well, it's actually very simple. A decorator is just a function with the information about the property it was put to decorate, and it will be called in runtime!

To understand it better, lets see another example of an actual decorator use:

function Sealed(constructor:Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@Sealed
class ExampleClass {
  // methods
}

In the snippet above the Sealed decorator seals the class from adding any new functionality or removing it.

In the example below i will show you a decorator type that we can use to decorate parameters to a function. Although for this one, we will need the "reflect-metadata" package to get the parameters and define things with it.

import "reflect-metadata";
const requiredMetadataKey = Symbol("Required");

function Required(target: Object, propertyKey: string | symbol, parameterIndex: number {
  let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
  existingRequiredParameters.push(parameterIndex);
  Reflect.defineMetadata( requiredMetadataKey, existingRequiredParameters, target, propertyKey);
}

class ExampleClass {
  sayName(@Required name: string) {
    console.log(`Your name is: ${name}`);
  }
}

In the example above we wrote a decorator that makes the parameter it decorates required, using the metadata to add an entry.

You can decorate methods like in the first example, and you can pass variables into the decorator functions as well, making it a decorator factory to do this. Basically we make a wrapper function and take the variable from there, then use our decorator with the argument taken from the wrapper function. An example is below:

function Readonly(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.writable = value;
  };
}

class Test {
  @Readonly(true)
  sayHello() {
    console.log("Hello there!");
  }
}

In the example above we used the Property Descriptor to modify the writable value with the given parameter to the decorator. Which makes it readonly.

Come to think of it, what are the parameters the returned function take? To simply put, target is the value we put the decorator on. Property key is the variable name we give that target. And the descriptor (which sometimes does not exist in certain values) is the description of the value that we can configure. The reason the descriptor might not exist is because certain decorators are different than others. For example, class decorators only take one argument which is the constructor. Method decorators take all three, while accessor decorators take 3 arguments as well but will not take the 3rd argument if your script target is less than ES5. Property decorators only take the first two as arguments. As for parameter decorators they take three arguments, but the last one is the parameter index and not the descriptor. Keep these in mind as you will definetly get errors if you for example give all three arguments for a class decorator.

Decorators can be used on many things. And many important libraries like class-validator and frameworks like NestJS use it.

This article was inspired very heavily from the TypeScript documentation, in order to ease the entrance to the decorators subject.

Now that you've read this article and hopefully understood what decorators do, i heavily recommend you read the official documentation! Here is the link for it: TypeScript Decorator Documentation

As always i'd love to hear your comments on the article, please do talk to me in the comments!

Have a great day!

Learning, Staying Focused, Motivation and Determinance

Yiğit Kaan Korkmaz — Sun, 03 Jul 2022 21:44:44 +0000

Hello my friends. Today i will talk to you about a different subject. It's none other than our mental health of course.

Throughout my dev journey i learned many things, either by trial or recommendation. This one, was mostly trial.

It is very easy for most of us to just lose motivation, or patience at times. And i will try my best to give advice from my experience, that's why i will seperate it into two parts, long-term and short-term.

What do i mean by that? Well, short-term is basically your motivation for that day. And long-term is your general attitude and desire to program things.

I won't talk about them seperately of course, as both is very very tightly coupled to each other, but we need to know the difference to help understand our brain better. Now let's take a look at a couple things that might harm our developer journey.

Most of the times, the reason you stop doing things is simple. You don't do it one day, for any reason, that is important or not. Maybe you just wanted to rest that day. But as soon as you start getting too comfortable, it starts to snowball and gets out of hand very quickly.

And most of the times the reason you don't do it the next day is you just feel bad because of the other day and feel like you've already lost, so might as well just stop another day as well.

Although it is great to take a break sometimes, if we let the feeling of "I can't do this" get to our head, we might stop altogether.

So next time you feel this way, just try to think to yourself: "Oh, i just felt tired the other day, and losing one day of work isn't a big deal". And keep pushing.

And sometimes, you just feel like you understand nothing, and feel like maybe you're not cut out for this job.

But as always, this is most of the times just a trick played to us by the brain. When that happens, take a break, breathe, maybe get yourself a coffee, work a bit on another thing. Don't try to force it again immediately. Come back the next day and try again, and again, and again.

This will surely help you learn whatever you want. Nothing comes in a day. And it never will, you always have to work hard for the things you get as a developer, and you will actually come to like this when your work bears fruits.

Nothing feels better than the moment you say "Oh, i can actually do this!", trust me.

Thank you for reading my article this far! I hope i helped you in any way possible, if you think any part of my recommendations were wrong or possibly harmful, just let me know in the comments!

Have a great day!

JavaScript Clipboard API

Yiğit Kaan Korkmaz — Tue, 21 Jun 2022 12:51:26 +0000

Hello everyone! In today's article i will talk about the Clipboard API in JavaScript.

So, what does this Clipboard API do?

As the name suggests, it responds to clipboard commands, such as cut, copy, paste!

Let me show you an example, then i will explain it to you!

Check the example below:

navigator.clipboard.writeText("Hello").then(res => {
  alert("Copied to clipboard!");
}, rej => {
  alert("Could not copy to clipboard");
});

navigator.clipboard.readText().then(text => {
  console.log(text);
})

The code below copies the string "Hello" to the clipboard, then it logs the text in the clipboard to the console. We can use this API to write and read from the Clipboard, which makes the whole "Copied to clipboard!" buttons incredibly easy.

Obviously that is not the only thing we can do. Clipboards can be used to do a lot of stuff, even copy images.

But on some browsers that functionality is not that great, so i suggest you check the compatibility table as always: Clipboard API Browser Compatibility

We can use the Clipboard API to get data other than strings, as i said before, and this is done like the example below:

const copyImageToClipboard = async () => {
  const response = await fetch("path/to/the/image");
  const blob = await response.blob();
  await navigator.clipboard.write([
    new ClipboardItem({"image/png": blob})
  ]);
};

In the example above we fetched the image from the path of wherever the image is, then we made it into a blob, and we wrote it to the clipboard as a new ClipboardItem instance.

And obviously then we can read those items by writing the code below:

const readClipboard = async () => {
  const items = await navigator.clipboard.read();

  return items;
}

But like i said, the browser support for this API can still be a problem. So always check MDN for the browser compatibility issues!

That's it for today's article, if there are any problems and issues in my post, please don't forget to tell me about them in the comments!

Have a great day everyone!

Network Information API In JavaScript

Yiğit Kaan Korkmaz — Fri, 17 Jun 2022 12:28:29 +0000

Hello everyone! I hope everyone has a fantastic day. Today i'm here to teach you the Network Information API.

It is still an experimental feature, which does not really work on some browsers very well for now, check out the browser support.

The Network Information API basically provides information about the system's connection, in terms of general connection type, like cellular, wifi, etc..

We can use this API to show users high quality of low quality content depending on their connection, for example a different image, or a different video.

You cannot really instantiate the NetworkInformation object, which contains all the info. So, how do we reach and use it? With the navigator.connection variable of course!

For example:

const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection; // We can use prefixes here

console.log(conn.effectiveType); // This should log the type of your connection

We can also listen to events on the NetworkInformation object, events like connection changes, like the example below:

const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
let connType = conn.effectiveType;

function logConnectionChange() {
  console.log(`The connection type before: ${connType}`);
  console.log(`The connection type now: ${conn.effectiveType}`);

  connType = conn.effectiveType;
}

conn.addEventListener("change", logConnectionChange);

We can also use it to preload videos or large amounts of information depending on the user's connection type, like the example below:

let preloadVideo = true;
const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (conn) {
  switch(conn.effectiveType) {
    case "cellular":
      preloadVideo = false;
    case "bluetooth":
      preloadVideo = false;
    case "slow-2g":
      preloadVideo = false;
    case "slow-3g":
      preloadVideo = false;
  }
}

It is still an experimental feature but i really like it, because the ways we can use it are very flexible and immense. And this API will definetly help us use our resources in a better and more user friendly manner.

If you want to know more about the API, definetly check out the MDN Documentation of it.

Thank you for reading the article! If you think there are any mistakes, don't forget to comment it so i can check it out, and i most definetly do!

Array Reduce Method in JavaScript

Yiğit Kaan Korkmaz — Sun, 12 Jun 2022 16:13:44 +0000

Hello everyone! Today i wanted to write an article about a method that gave me a lot of trouble back in the day. That method is the Array.prototype.reduce method.

I'll first show the method to you using an example, then explain everything after.

Check the example below:

const numbersToAdd = [0, 1, 2, 3, 4, 5];

const initialValue = 0;
const sum = numbersToAdd.reduce((previousValue, currentValue) => previousValue + currentValue, initialValue);

console.log(sum);

In the example above, we had an array that we wanted the sum of, so we used the reduce method to "reduce" the whole array into one number. That's what this method does, it reduces the array into one particular thing.

The reduce method takes one callback function, and optionally one other parameter that states the initial value that we're going to reduce the array to. This can be an object, a number, a string, anything basically.

Note that if you don't specify an initialValue, the reduce method will use the first element of the array as the initialValue.

And inside the callback, the callback function takes 2 parameters and it can take 2 other optional ones, the first two are previousValue and currentValue respectively. What that means is, reduce method effectively loops over the array, taking the returned value of the callback function, as the previousValue of the next loop. And uses that to execute the callback again with the currentValue, and so on so forth.

The other two parameters this method can take are currentIndex and array. As those two suggest by their name, currentIndex is just the current index of the currentValue in that array, and array of course, being the array itself that is being looped upon.

Here is another example, this time with all the optional parameters used:

const peopleData = [["Khan", 23], ["James", 30], ["Molly", 43]];

const initialValue = {};
const peopleObj = peopleData.reduce((previousValue, currentValue, currentIndex, array) => {
  const [name, age] = currentValue;
  previousValue[currentIndex] = {
    name,
    age,
  };

  return previousValue
}, initialValue);

console.log(peopleObj);

OK i kinda lied with the "all" optional parameters being used part but i think you get what it means :D

And there you go, the Array Reduce method of JavaScript! I don't know why this gave me trouble before but i hope i cleared any confusion you might've had as well!

CONCLUSION

Array reduce method is a method used to reduce an array into one specific thing. Like getting the sum of an array of numbers or making an object out of an information array.

And as always, if there's any error in my code or the information i've given you, please comment so i can see and fix it immediately! Feedback is very important, and i'm always looking out for it.

Have a great day! :)

Closures In JavaScript

Yiğit Kaan Korkmaz — Thu, 09 Jun 2022 13:05:38 +0000

Like i said in my previous post about stale closures in React and JavaScript (Check my page for more info!), i'm here to talk about closures in detail in this post.

So, what are closures?

In order to understand closures, first we have to talk about something called Lexical Scoping.

Check the following example:

const outerFunc = () => {
  const name = "Khan";

  const innerFunc = () => {
    console.log(name);
  }

  return innerFunc;
}

"A lexical scope in JavaScript means that a variable defined outside a function can be accessible inside another function defined after the variable declaration."

In the example i gave, the function innerFunc has access to the name variable because it's lexical scope is inside the outerFunc function and after the declaration of the name variable.

Now, with the information we have, let's check out what a closure is from the example below.

const outerFunc = () => {
  const name = "Khan";

  const innerFunc = () => {
    console.log(name);
  }

  return innerFunc;
}

const nameLogger = outerFunc();

nameLogger(); // Will log "Khan" to the console

But how does the innerFunc remember the name variable, even after the outerFunc has been invoked and the name variable isn't in the scope anymore?

This is called a closure in JavaScript. The function innerFunc closed over the outer variable name, and is able to remember it even after the outerFunc function has been invoked because of this.

Closures has many use cases. Like the example below:

const adder = (x) => {
  return (y) => x + y;
}

const addTwo = adder(2);
const four = addTwo(2);

console.log(four); // Will log 4

In the example above, we used closures to make an adder function, in which the returned arrow function inside the adder function will still remember variable x, because it closes over it.

The function generator in the example above is also called Currying, which means we use functions to create other functions which might help reduce the amount of code we write. If not for currying and closures, we would have to do something like this:

const addTwo = (x) => x + 2;
const addFour = (x) => x + 4;
const addTen = (x) => x + 10;

Thanks to closures, we're able to reduce the amount of code we write and we can make our code much cleaner.

CONCLUSION

Closures are a very essential part of JavaScript, and it can be used in many ways. For example, React hooks rely heavily in closures. If you want to see how, you can check out my article Avoid Stale Closures in React. It might help you out understand closures better and how it can also create pitfalls in your code by accident if not used correctly.

And as always, thank you so much for reading my article to this point! If you think i have mistakes, feel free to write them in the comments. I will absolutely check out all of them and make the correct changes in my article.

Avoid Stale Closures In React

Yiğit Kaan Korkmaz — Mon, 06 Jun 2022 16:56:19 +0000

Hello everyone! In today's post i will talk about stale closures, a subject that can affect your code in a bad way.

First of all, what is a closure, yet alone a stale one?

A closure in JavaScript is when an inner function encloses over the outer one and remembers variables in the outer function for later use. This is thanks to the lexical environment of JavaScript.

But what do i mean by that? Let's take a look at the example below:

const createMultiplier = (multiplyBy) => {
  const multiplier = (toMultiply) => {
    return multiplyBy * toMultiply;
  }

  return multiplier;
}

const double = createMultiplier(2);
const ten = double(5);

In the example above we used closures to create a multiplier function. To explain further, the multiplier function enclosed over multiplyBy variable from it's outer scope, remembering it when the function will be called.

A stale closure is when the inner function remembers the outdated value of a function. An example can be:

let a = 0;
const add = () => {
  a += 1;
  const message = `Variable a is incremented to ${a}`;

  return () => {
    console.log(message);
  }
}

const log = add();
add();
add();

log(); // Outputs 1, Expected output: 3

In the example above we create a number variable that starts with 0, then create an add function that adds 1 to it. But when we use the add function 3 times without logging the first one, and then when we log it, it logs 1 instead of 3. Why is that?

That is called a stale closure. The log function enclosed over an outdated version of the a variable, and it logged that one instead of the current one, as it should have.

How would we fix this?

let a = 0;
const add = () => {
  a += 1;

  return () => {
    const message = `Variable a is incremented to ${a}`;
    console.log(message);
  }
}

const log = add();
add();
add();

log(); // Outputs 3, Expected output: 3

This way when we use the log function, when it's time to execute it will enclose over the current a variable and get the right value.

If you still need more information, i will post another blog about Closures In JavaScript that you can check out when i publish it.

Now, can closures affect our React code? Check the example below:

import React, {useState, useEffect} from 'react';

const Timer = () => {
  const [time, setTime] = useState(0);
  const [isCounting, setIsCounting] = useState(false);

  useEffect(() => {
    if(isCounting) {
      const id = setInterval(() => {
        setTime(time + 0.1)
      }, 100);

      return () => {
        clearInterval(id)
      }
    }
  }, [isCounting])

  return (
    <div>
      The time is: {time.toFixed(1)}
      <br />
      <br />
      <button onClick={() => setIsCounting(!isCounting)}>
        {isCounting ? "Stop timer" : "Start Timer"}
      </button>
    </div>
  )
}

The example above is a stale closure. Can you see why?

If your answer is the dependency array, it is correct! React hooks rely heavily on the concept of closures, and when the Timer is first mounted, the initial value of time is 0. Therefore the callback of the setInterval captures that one, and tries to update it again and again, leaving our timer with the value 0.1 all the time.

So how can we fix this? There are two solutions.

import React, {useState, useEffect} from 'react';

const Timer = () => {
  const [time, setTime] = useState(0);
  const [isCounting, setIsCounting] = useState(false);

  useEffect(() => {
    if(isCounting) {
      const id = setInterval(() => {
        setTime(time + 0.1)
      }, 100);

      return () => {
        clearInterval(id)
      }
    }
  }, [isCounting, time]) // Added time as a dependency

  return (
    <div>
      The time is: {time.toFixed(1)}
      <br />
      <br />
      <button onClick={() => setIsCounting(!isCounting)}>
        {isCounting ? "Stop timer" : "Start Timer"}
      </button>
    </div>
  )
}

We add time to the dependency array so whenever the time changes, React updates the functions accordingly with the right value. However, there is a second fix.

import React, {useState, useEffect} from 'react';

const Timer = () => {
  const [time, setTime] = useState(0);
  const [isCounting, setIsCounting] = useState(false);

  useEffect(() => {
    if(isCounting) {
      const id = setInterval(() => {
        setTime(time => time + 0.1) // Give the setTime function a callback
      }, 100);

      return () => {
        clearInterval(id)
      }
    }
  }, [isCounting])

  return (
    <div>
      The time is: {time.toFixed(1)}
      <br />
      <br />
      <button onClick={() => setIsCounting(!isCounting)}>
        {isCounting ? "Stop timer" : "Start Timer"}
      </button>
    </div>
  )
}

Giving a callback to a set function from a useState hook, allows react to automatically update the state from the current one. And also you don't need to put it inside a dependency array, which can sometimes create confusion, and arguably looks cleaner.

CONCLUSION

Closures are an essential part of JavaScript, and we need to understand them way better so we can write better code. And of course, avoid stale closures.

And as always, please let me know if there are wrong information on this article, so i can correct it! I'm very excited to hear your feedback if it helped you out or not!