#todo пройти опитування Stack Overflow 2024 Developer Survey.

Насправді це дуже важливо, адже так ми можемо показати, що в Україні є багато класних ІТ-спеціалістів. Минулого року з нашої країни долучилось лише 873 особи, що складає 1% від всіх опитуваних. Цього року потрібно покращити результат!

Welcome!

Let's practice our English! So...

👉 Dogs or cats?

Have a nice #english_friday 💛

#how_to скопіювати текст в буфер обміну з допомогою JavaScript 📋

👉 Відкрити посилання

Як зробити preview зображень для <input type="file" />?

Завантаженням зображень на веб-сторінках сьогодні нікого не здивуєш. А як показати зображення, ще до того, як воно було оброблене? Адже в нас є тільки файл, а не src у текстовому форматі. Логічно виходить, що нам потрібно перетворити даний файл у текст.

Перший спосіб - URL.createObjectURL.

// Дістанемо файл, наприклад отак:
const file = event.target.files[0]

const url = URL.createObjectURL(file)

// Додамо цей url в src-атрибут для img
img.src = url

Після цього - не забудьте звільнити цей URL за допомогою URL.revokeObjectURL().

Інший спосіб - використати FileReader. Знайти приклади з ним - ваше домашнє завдання 🤓. Лише додамо, що якщо вам потрібно зробити щось таке у service worker - цей метод спрацює, на відміну від першого.

👉 Відкрити документацію URL.createObjectURL
👉 Відкрити документацію FileReader.readAsDataURL

Ну і звісно не без приколів. Стандартний формат зображень на iPhone - HEIF/HEIC, який поки не підтримується більшістю браузерів. Тому, якщо вам необхідно підтримувати і цей формат, зверніть увагу на бібліотеку heic2any.

👉 Відкрити документацію heic2any

#interview

#todo написати функцію на будь-якій мові програмування, яка приймає шлях до файлу (текстовий рядок) та повертає масив чисел, де кожен елемент - кількість символів у відповідному рядку файлу.

ESLint v9 👨‍🔧

В квітні на світ зʼявилась нова версія ESLint. В ній використано нову структуру конфігурацій за замовчуванням, зʼявились нові правила та оновлення старих, і ще багато покращень.

Але спішити оновлюватись не варто, адже тепер версія Node.js має бути не нижче v18.18.0. Також, навряд чи ви користуєтесь лише чистим ESLint, тому варто перевірити, чи всі плагіни теж підтримують ESLint v9.

Команда ESLint підготувала навіть окремий застосунок, який допоможе вам мігрувати на нову версію. Більше ви можете почитати за посиланням нижче.

👉 Відкрити посилання

Також, розробники діляться своїм досвідом оновлення, тому на це теж варто звернути увагу.

👉 Відкрити посилання

#news

Welcome!

Let's practice our English! So...

👉 What TV shows are you watching right now?

Have a nice #english_friday 💛

#how_to створити button hover effects with box-shadow 🎉

Виконаний з допомогою HTML та SCSS!

👉 Відкрити посилання

Починаємо тиждень на позитивній ноті, тому…

#todo поділитися айтішним жартом/мемом в коментарях 😉

TypeScript 5.5 beta 🤓

Колись давно ми розповідали вам про ts-reset. Цей модуль виправляв поведінку TypeScript при використанні .filter(Boolean).

І ні, поки він сам цього робити чомусь не може 😁. Проте покращення зʼявились і тепер в нас є щось типу автоматичних перевірок на тип (самі придумайте як краще перекласти Inferred Type Predicates).

Краще один раз побачити ніж десять разів прочитати:

type User = { id: string };
type ProUser = User & {
  plan: string;
};

const users: (User | ProUser)[] = [
  { id: "1" },
  { id: "2", plan: "pro" },
  { id: "3" },
];

users.filter((user) => "plan" in user).map((user) => user.plan.toUpperCase());

Такий код до TypeScript 5.5 не вважається правильним, адже user в map все ще має тип User | ProUser, а отже властивості plan може не існувати.

Щоб дізнатись більше про цю бета-версію, переходьте за посилання внизу.

👉 Відкрити посилання
👉 Дивитись пост в X від t3.gg

#news

Що таке enum в TypeScript? ✋

Enum - це спеціальний тип у TypeScript, який використовується для представлення групи констант. Enum буває числовим або текстовим. Якщо enum явно не ініціалізувати, перше значення буде рівне 0, наступне 1, і так далі.

В TypeScript enum можна використовувати як тип, що змусить розробника використовувати лише значення з цього enum.

Ось такий вигляд має enum після компіляції TypeScript:

// TypeScript
enum Color { 
  Red, 
  Green, 
  Blue 
}

// JavaScript
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));

Як ви можете помітити, насправді enum індексується за ключами і за значеннями.

👉 Відкрити документацію

А як ви обираєте між enum та текстовими літералами ("red" | "green")?

#interview

#todo написати на будь-якій мові програмування реалізацію структури даних стек на основі однозвʼязного списку.

👉 Що таке стек?

Radash series ⛓️

Рік тому ми розповідали про бібліотеку radash, що є набором корисних функцій. Попри повторну згадку цієї бібліотеки, хочемо звернути увагу на окрему утиліту - series.

Часто в застосунках є впорядковані списки даних, елементи яких потребують таких методів як пошук попереднього чи наступного, пошук мінімального з двох або ж перестрибування на кілька елементів. Звісно, все це можна реалізувати вручну. Проте, просте обгортання цих даних в series надасть вам увесь цей список методів.

Функція підтримує елементи, які є обʼєктами, тому точно може знайти місце у ваших застосунках.

👉 Відкрити документацію

#library

Welcome!

Let's practice our English! So...

👉 What do you think the best invention is?

Have a nice #english_friday 💛

#how_to створити кнопку для виклику за телефонним номером 📞

Потрібно всьо лиш створити звичайне посилання з спеціальним href:

<a href="tel:+380999999999">
  Подзвонити
</a>

Також можливо створити посилання, яке відкриє вікно для відправки email:

<a href="mailto:[email protected]">
  Написати email
</a>