Web Overflow 🇺🇦
4.42K subscribers
380 photos
40 videos
3 files
518 links
Затишний блог про веб-розробку і не тільки 💛

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
ESLint v9 👨‍🔧

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

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

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

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

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

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

#news
👍123
Welcome!

Let's practice our English! So...

👉 What TV shows are you watching right now?

Have a nice #english_friday 💛
👍43
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити button hover effects with box-shadow 🎉

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

👉 Відкрити посилання
👍7🔥31
Починаємо тиждень на позитивній ноті, тому…

#todo поділитися айтішним жартом/мемом в коментарях 😉
👍42
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
👍73
Що таке 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
👍112
👍52
#todo написати на будь-якій мові програмування реалізацію структури даних стек на основі однозвʼязного списку.

👉 Що таке стек?
3👍3🔥1
Radash series ⛓️

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

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

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

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

#library
👍62🔥1
Welcome!

Let's practice our English! So...

👉 What do you think the best invention is?

Have a nice #english_friday 💛
👍52
#how_to створити кнопку для виклику за телефонним номером 📞

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

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


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

<a href="mailto:[email protected]">
Написати email
</a>
👍174
#todo пройти літнє зарплатне опитування DOU 👀

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

На основі відповідей DOU підготують цикл аналітики, а ви зможете дізнатись, чи заробляють більше колеги по цеху.
👍9👀2
👍51
#todo пройти опитування Stack Overflow 2024 Developer Survey, якщо не зробили цього досі (його продовжено до 20.06).

Чому це важливо ми писали у пості та у коментарях раніше.
👍72😁2
Challenges 🤸

Практикувати свої навички ніколи не буває зайвим. Для більшої мотивації та цікавинки - потрібно знайти собі певну ціль або завдання.

Advent of code - як адвент-календар, тільки із задачами з програмування. Починаючи з 2015 цей календар щороку оновлюється. Задачі бувають дуже різними, тут і зчитування з файлу, і обробка тексту та багато іншого. А ще це крутий спосіб опанувати нову мову програмування.

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

1 billion row challenge - це вже трохи більш хардкорний режим. Задача - пропарсити один мільярд рядків текстового файлу, де кожен рядок - це назва метеорологічної станції та значення температури, та вивести мінімальне, середнє та максимальне значення температури на кожній станції. Сам лише файл важить більше 10GB, тому може бути довго та цікаво. Маєте шанс спробувати асинхронність, паралелізм та інші фішки для прискорення вашої програми.

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

#tips
👍112
Welcome!

Let's practice our English! So...

👉 What is your honest opinion about all AI hype? Do you think we should integrate it in so many products?

Have a nice #english_friday 💛
👍43
Slack save for later 🔖

Якщо ви користуєтесь Slack на роботі чи в побуті, то радимо вам звернути увагу на таку фічу як Save for later.

Для того, щоб зберегти певне повідомлення, вам потрібно клікнути на відповідну іконку. Після цього ви можете знайти всі збережені повідомлення в окремому списку. Цей список видно тільки вам. Кожне з цих повідомлень ви можете архівувати або позначити як виконане.

Ще одна фішка - ви можете створити нагадування на окреме повідомлення прямо в Slack.

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

#tips
👍63🔥1
👍4🤔41🔥1