JavaScript Çorbası

16 Temmuz 2021 Cuma

Fs.js

pipe metodu

Örnek

const fs = require('fs')

const original = fs.createReadStream('./original.txt')
const copy1 = fs.createWriteStream('./copy1.txt')
const copy2 = fs.createWriteStream('./copy2.txt')

original.pipe(copy1)
original.pipe(copy2)

1 Temmuz 2021 Perşembe

TypeScript Pick

Giriş

Açıklaması şöyle

Have you ever tried to narrow a type because you realized that your next class doesn’t need this bunch of properties? Or maybe you arrived at this point in the process of refactoring, trying to distribute pieces of a system in a new way. There are several types that can solve this problem.

Pick helps you to use a defined already interface but take from the object only those keys that you need.

Omit which isn’t predefined in the Typescript lib.d.ts but is easy to define with the Pick and Exclude. It excludes the properties that you don’t want to take from an interface.

TypeScript Required

Giriş

Açıklaması şöyle

... the Required built-in type introduced in Typescript v2.8, makes all properties of a described object required.
One of the use cases for Required is selectors: sometimes you want to make a selector for a property from a nested object and you know that at the moment of selector invocation this property will be defined.

25 Haziran 2021 Cuma

Loose Equality Comparison - 2 Tane Eşittir

Giriş

Açıklaması şöyle. Farklı tiplerdeki nesnelerin eşitliğini kontrol etmek için kullanılır

The JavaScript operator == means equal after type juggling.

Nasıl Çalışır
Mantıksal olarak şuna benzer. Her iki nesneyi de string'e çevirip karşılaştırmak gibidir.

static boolean compareData(Object v1, Object v2)
{
  if(v1 != null && v2 != null)
    return (v1.getClass() == v2.getClass() && (v1.toString().equals(v2.toString())));
  else
  {
    return (v1 == null ? v2 == null : v1.equals(v2));
  }
}

Açıklaması şöyle. Eğer her iki tip de aynı ise == yavaş değildir.

== is exactly as fast as === when both operands have the same type, and there's nothing wrong with using it when you know that both operands have the same type. You only got a problem when you don't know what types the operands have.

Örnek

Şu kod true döner

'0e111' == 0

Örnek - Number ve BigInt Karşılaştırma

Şöyle yaparızz

42 == 42n  // true!

18 Haziran 2021 Cuma

Typescript Record Tipi

Giriş

Tanımı şöyle. K olarak verilen tipini - örneğin bir enum olsun - tüm değerlerinin kullanılmasını mecburi yapar.

type Record<K extends string, T> = {
    [P in K]: T;
}

Örnek

Şöyle yaparız

const SERVICES: Record<string, string> = { 
    doorToDoor: "delivery at door",
    airDelivery: "flying in",
    specialDelivery: "special delivery",
    inStore: "in-store pickup",
};

Örnek

Şöyle yaparız

type CatNames = "miffy" | "boris" | "mordred";

type CatList = Record<CatNames, {age: number}>

const cats:CatList = {
  miffy: { age:99 },
  boris: { age:16 },
  mordred: { age:600 }
}

14 Haziran 2021 Pazartesi

EventSource Sınıfı

Giriş

Tarayıcı tarafında EventSource nesnesi kullanılır. constructor(), close(), onopen (), onerror(), onmessage(), addEventListener() metodları vardır

addEventListener metodu

Örnek
Şöyle yaparız

// Handler for events of type 'eventType' only
eventSource.addEventListener('eventType', (e) => {
   // Do something - event data will be in e.data,
   // message will be of type 'eventType'
});

onerror metodu

Örnek

Şöyle yaparız

this.eventSource = new EventSource(...);

this.eventSource.onerror = (error) => {
  console.info("SSE : Connection Lost", error);
  ...
};

onmessage metodu

Örnek
Şöyle yaparız

// Declare an EventSource
const eventSource = new EventSource('http://some.url');

// Handler for events without an event type specified
eventSource.onmessage = (e) => {
   // Do something - event data etc will be in e.data
};

Örnek

Şöyle yaparız

<body>
  <script type="application/javascript">
    var subscribeEvents = function() {
      var key = $("#key").val();
      var eventSource = new EventSource('/sse/receive');
      eventSource.onmessage = function(e) {
        var notification = JSON.parse(e.data);
        if(key == notification.key){
          ...
        }
      };
    }
    window.onload = subscribeEvents;
    window.onbeforeunload = function() {
      eventSource.close();
    }
  </script>
</body>

onopen metodu

Örnek

Şöyle yaparız

this.eventSource = new EventSource(...);

this.eventSource.onopen = () => {
  console.info("SSE : Connection OPEN");
  ...
};

this.eventSource.onerror = (error) => {
  console.info("SSE : Connection Lost", error);
  ...
};

27 Nisan 2021 Salı

HTML Iframe Tag

Giriş

Açıklaması şöyle

iFrame provides “sandboxing” to isolate content of the embedded frame from the parent web page, thus ensuring that information is not accessible or cannot be manipulated through various exploits by malicious individuals.

iframe içindeki Bağlantı

Açıklaması şöyle. Yani iframe kendi bağlantısını yapar

While it may seem natural to think that if one page visually envelops another, there may be something similar happening with the underlying connections, this is not the case.

Your browser creates distinct HTTPS connections to host1 and host2, and both in (more-or-less) the same manner.

Örnek

Şöyle yaparız

<iframe width="420" height="315" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
</iframe>