Chrome Developer Tools

Giriş

F12 ile açılır

Console Sekmesi
Bir değişkene yeni değer atamak için kullanılabilir.

Network Sekmesi

1. Throttle

Şöyle yaparız. 5. adımda anlatıldığı gibi "Reload this page" simgesine basılı tutarken DevTools penceresi açık olmalı

Steps To Use the Throttler

1. Open DevTools (Ctrl + Shift + I)

2. Switch to the Network Tab.

3. By default, the throttler is set to ‘No Throttle’.

4. From the dropdown menu, you can select the type of network to simulate.

5. Long Press the reload icon while the DevTools panel is open.

6. Select ‘Empty Cache and Hard Reload’ from the advanced reload options. It is important to empty cache to examine the page as a first time visitor.

TypeScript Optional

Örnek

Şöyle yaparız

interface Cat {
  name: string;
  age: number;
  ownerName?: string; // not every cat has an owner
}

const mrWhitePaws: Cat = {
  name: "Mr. White Paws",
  age: 7,
  ownerName: "Jane", // domestic cat, lucky guy
};

const wildLynx: Cat = {
  name: "Lynx lynx",
  age: 6,
  // this wild cat lives a free life!
};

Örnek

null Guard yerine Optional kullanmak çok daha kolay. Şöyle yaparız.

element?.innerText = 'Hello';

optional chaining ve nullish coalescing

Açıklaması şöyle

The optional chaining allows to safely “navigate” through possibly absent values (without throwing an error), while the nullish coalescing operator, or the ??, enables providing a failover (default) value in case of stumbling upon a null (think of it as a good, old || operator, but for null or undefined values only, instead of all “falsy” ones). Again, keep in mind, that this is an example of a feature eventually available in pure JavaScript, too.

Örnek

Şöyle yaparız

// optional chaining:
// The value will be undefined. Without `?.`, this would error with
// "Uncaught TypeError: Cannot read property 'length' 
const nameLength: string | undefined = wildLynx?.name?.length; of undefined".

// nullish coalescing:
const nope = null;
const calculation = (nope ?? 0) + 42; // The value will be 0 + 42, ergo 42.

HTML Img Tag

alt Alanı

Örnek

Şöyle yaparız

<img src="/static/cat.jpg" alt="Cat" />

srcset Alanı

Örnek

Şöyle yaparız

<img srcset="small-car-image.jpg 400w,
             medium-car-image.jpg 800w,
             large-car-image.jpg 1200w"

     sizes="(min-width: 1280px) 1200px,
            (min-width: 768px) 400px,
            100vw"
     
     src="medium-car-image.jpg" alt="Car">

Açıklaması şöyle

srcset attribute accepts multiple images with their respective width in pixels, and the browser uses these values to choose between provided images. In the above example, there are 3 versions of the same image in 3 different sizes

The sizes attribute defines the space that the image will take up on the screen. In the above example, the image will take up 1200px if the screen’s minimum width is 1280px.

HTML Picture Tag

HTML Img tag yetersiz kalıyor. Açıklaması şöyle

However, with the development of devices of various screen sizes, resolutions, and complex user requirements, questions have begun to raise about its responsiveness and ability to be used in multi-device applications.

Yani iki temel sebep var. 

1. Resolution Switching

2. Art Direction : 

Bu iki sebepten herhangi birisi tek başına HTML Picture tag'i seçmek için yeterli değil. Sadece Resolution Switching gerekiyorsa, HTML Img tag te kullanılabilir.

Resolution Switching

HTML Img tag ile olan problem şöyle

Suppose you use a simple Img tag for high-res images. In that case, that same image is used in each device your application runs, and indeed it will result in performance issues in devices with lower screen resolutions like mobile devices.

Art Direction

Orientation yani Landscape veya Portrait demek

source/media Alanı

Örnek

Şöyle yaparız

<picture>
     
   <source media="(orientation: landscape)"
             
      srcset="land-small-car-image.jpg 200w,
              land-medium-car-image.jpg 600w,
              land-large-car-image.jpg 1000w"
             
      sizes="(min-width: 700px) 500px,
             (min-width: 600px) 400px,
             100vw">
     
   <source media="(orientation: portrait)"
             
      srcset="port-small-car-image.jpg 700w,
              port-medium-car-image.jpg 1200w,
              port-large-car-image.jpg 1600w"
             
      sizes="(min-width: 768px) 700px,
             (min-width: 1024px) 600px,
             500px">
     
   <img src="land-medium-car-image.jpg" alt="Car">
</picture>

Açıklaması şöyle

If the screen orientation is landscape browser will show the images from the first image set, and if the orientation is portrait browser will use the second set. 

En alttaki img için açıklaması şöyle

The last img tag is there for backward compatibility for browsers that do not support picture tags.

Örnek

Şöyle yaparız

<picture>
     <source media="(max-width: 767px)" ....>
     <source media="(min-width: 768px)" ....>
</picture>

source/srcset Alanı

Örnek

Şöyle yaparız

<picture>
   <source
      srcset="small-car-image.jpg 400w,
              medium-car-image.jpg 800w,
              large-car-image.jpg 1200w"
      sizes="(min-width: 1280px) 1200px,
             (min-width: 768px) 400px,
             100vw">
   <img src="medium-car-image.jpg" alt="Car">
</picture>

Örnek - type

Şöylee yaparız

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="test image">
</picture>

Açıklaması şöyle

The above example includes three image types from avif, webp, and png formats. First, the browser will try avif format, and if that fails, it will try webp format. If the browser does not support both of these, it will use png image.

Supervisor.js

Giriş

Açıklaması şöyle. Kod değişikliğini hemen uygular

The development problem is that when we change the code, we have to stop and start the application to get our changes picked up.

To solve that, we usually use some sort of Node process manager like supervisor or nodemon. These packages will watch our project and restart our server whenever we make changes. 

Örnek

Şöyle yaparız

"scripts": {
  "dev": "npx supervisor index.js",
  "start": "node index.js"
}

Fs.js

pipe metodu

Örnek

Şöyle yaparız

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)

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.