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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
Сьогодні у нас супер-свято 🎉

В цей день на світ зʼявилась Настя. Саме в цей день світ став яскравішим і теплішим.

Вона дбає про те, щоб кожному тут було комфортно та цікаво. Тому, будь щасливою та лови кожен незабутній момент свого життя.
🎉5910🍾4👍3🤩1
Ми повертаємось 💛

Останнім часом ми були не дуже добросовісними адмінами і рідко тут з’являлись. Спочатку було багато роботи, а потім захотілось якісно відпочити. Ми багато думали про роботу, блог, менторство тощо. Якщо чесно, ми навіть встигли скучити за програмуванням (але то до першого тупого багу). У нас з’явились нові сили, ідеї та натхнення. Тому точно можемо сказати, що вчасно відпочивати важливо!

Ми зрозуміли, що хочемо більше ділитись особистими перемогами, поразками, подіями тут. Більше розповідати про себе та дізнаватись про вас. Коли ми тільки створювали цей канал, ми так його і уявляли, але настільки гнались за вигаданими стандартами, що трішки збились з того шляху. Тому не дивуйтесь, якщо НЕ періодично (десь плаче Настя, яка любить все систематизувати) тут будуть з’являтись дописи не на айтішні теми. Нюдси не обіцяємо, але розкриватись більше постараємось.

Щодо менторства, ми вирішили взяти паузу на невизначений час. Ми зрозуміли, що в нас йде дуже багато часу та ресурсу, і тому страждають інші сфери нашого життя, а робити абияк ми не звикли і не хочемо. Це було непросте рішення, але ми впевнені, що так буде краще. Ми дуже тішимось результатам, які змогли здобути з нашими учасниками. Тому ми точно не зупиняємось в цьому напрямку, але нам потрібен час.

І взагалі, впродовж минулого року ми постійно кудись бігли, намагались наздогнати щось, що неможливо наздогнати, встигнути все, що тільки можна і не можна. Тому в цьому році хочеться більше насолоджуватись процесом і просто жити сьогоденням.
22👍9🔥3😁2
🤯10👍62
Що виведе консоль?
Anonymous Quiz
5%
0
5%
1
44%
10
46%
11
👍15🤯93😘2
#todo написати функцію на будь-якій мові програмування, яка приймає натуральне число. Функція додає всі цифри даного числа, доки в результаті не буде лише одна цифра та повертає її.

Наприклад:
Число = 47
Результат = 2


Пояснення:
47 --> 4 + 7 --> 11
11 --> 1 + 1 --> 2
👍13🤔52
shadcn/ui 🗽

Якщо на секунду заглянути в 2023 і глянути, хто в світі JS отримав максимальну кількість зірочок на GitHub, то побачите саме цей проєкт - shadcn/ui.

Якому UI kit ви надаєте перевагу - написаному власноруч чи з готової бібліотеки?

Якщо писати самому - багато контролю, але і багато багів може вилізти. А якщо використовувати бібліотеки - не всі компоненти потрібні та важче щось модифікувати. Для прикладу, зараз у нашому поточному проєкту більшість компонент написані власне нами, проте деякі ж використовуємо із бібліотек (такі як селект чи календар).

Отож, що таке цей shadcn/ui?

Це місце, де ви можете просто взяти і скопіпастити собі код компонент. І це не жарт - в цьому і є суть проєкту. Тут вже реалізовані основні ui-компоненти в React і ви можете просто за інструкцією скопіювати їх собі або ж додати за допомогою cli.

В чому перевага?

Після додавання коду ви можете модифікувати його як хочете, а сама основа компонент побудована на radix-ui.

Як на мене - це чудове рішення, яке дозволяє вам мати власний UI kit, проте вже досить добре відкалібрований. Я зараз активно думаю чи додавати його в свій поточний проєкт.

Тому залітайте та діліться своїми думками.

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

#library

А весь список найяскравіших зірок на просторі JS можна знайти за посиланням нижче.
👉️️️️ Відкрити посилання
👍153🔥3
Welcome!

Let's practice our English! So...

👉 How would you describe yourself in 3 words? And why?

Have a nice #english_friday 💛
👍83
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити range input різного типу 🤩

Виконаний з допомогою React!

👉 Відкрити посилання
👍25🔥98
2024 predictions 🔮

Отож, пора діставати магічну кулю та спробувати дати свої прогнози на 2024 рік.

Що буде з роботою в IT?

Здається, що ШІ забере у вас роботу ще не цього року. Попри масові звільнення на початку 2023 року, у другій половині року кількість вакансій потроху збільшувалась. Напевно, буму як у 2021 не станеться, але віримо, що тенденція росту кількості можливостей збережеться. От тільки шукати будуть дійсно розумних і працьовитих розробників. Тут головне бути впертим та продовжувати саморозвиток.

Якщо вже почали про ШІ, то що ж буде з ним?

Було б дуже круто, щоб GPT4 написав код для GPT5. І хоч є думки, що в OpenAI там вже є готовий суперінтелект, здається, що різкого стрибку в цій сфері ми не побачимо (насправді дуже хочеться тут помилятись). Але все те, що вже є, буде відшліфовуватись, ШІ почне менше помилятись і генерувати ще реалістичніші зображення. І хоч ШІ засунули навіть туди, де він і не був потрібен, будуть зʼявлятись справді круті застосунки, де він буде ну дуже вже доречним. Наприклад, згадайте нещодавно нашумівший Rabbit R1.

Наша улюблена рубрика - JavaScript.

Здається, що вже нарешті ця буря трохи втихомириться та в нас не буде нових фреймворків щодня. На сьогодні вже є сталий список інструментів, між якими розробники можуть обирати. Ці інструменти продовжуватимуть удосконалюватись, як от React Forget, signals в Angular чи runes в Svelte. Також помітний рух в сторону серверних компонент, що насправді не може не тішити (за винятком того, що це все треба вивчити). Навіть мобільні застосунки написані з React Native можуть отримувати і рендерити компоненти з сервера. Можна також виділити HTMX, який отримав хороший розголос в кінці минулого року, але який навряд чи переплюне поточних лідерів ринку. Тому до передбачення ще додамо, що в фронтенді лідери будуть ті ж самі, а саме - React, Angular, Vue, Svelte, Solid. В бекенд фреймворках великих змін не очікуємо, там і надалі express та NestJS. Серед інструментів для роботи з БД ми б поставили на Drizzle. Українська команда розробників зробила справді класний продукт.

Developer Experience.

Взагалі в світі розробки зараз є своя профільна спільнота, яка може задавати тренди (ми, наприклад, слідкуємо за ThePrimeagen, TJ DeVries, Theo Browne). Також зараз важливе таке поняття як DX (Developer Experience), тобто можливість розробників використовувати круті і зручні інструментами. Всі вже втомились шукати в AWS потрібний сервіс чи налаштовувати сервери з абсолютного нуля. Це пояснює зростання кількості сервісів, які зосереджені лише на невеликому відсотку потреб розробників. Сюди можна віднести PlanetScale, Upstash, Supabase та багато-багато інших. Також це пояснює прояв зацікавлення до таких мов як Rust, Zig, OCaml, бо їх люблять та про них говорять.

Vision Pro.

Окремою темою може стати нова ніша для розробників та дизайнерів. 2 лютого Apple випускає в продаж свій Vision Pro. Ціну важко назвати приємною та і потрібен цей девайс зовсім не кожному. Але свою аудиторію він має шанс знайти, а їй відповідно потрібне програмне забезпечення.

Ну і напевно найголовніше передбачення, в яке ми віримо та наближаємо - це мир та перемога 💙💛

Обговорювати можна ще багато чого, тому давайте продовжимо в коментарях чи в чаті.
👍229🕊4🔥2
TypeScript Generics

Якщо ви проходите співбесіду на JavaScript, то в 80% випадків у вас запитають і про TypeScript. А якщо у вас питатимуть про TypeScript, то у 99% випадків запитають про Generics.

Та і взагалі це дуже корисна річ, але, з нашого досвіду, чомусь багато розробників часто її уникають і не вміють використовувати. Але для чого обмежувати себе, якщо переглянувши коротке відео можна раз і назавжди вивчити такий крутий механізм.

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

#interview
👍164🔥2
Вчора ми згадали про Rabbit R1. Це новий девайс, представлений на CES 2024. Можливо, хтось ще не чув чи не бачив, то ловіть посилання на презентацію. Ну і звісно, діліться своїми думками в коментарях.

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

🔥 - за таким продуктом майбутнє
👍 - класний девайс
👎 - для чого це взагалі?
👎16👍5🔥3
👍64🔥2
👍223🤯3🔥1
#todo написати функцію на будь-якій мові програмування, яка приймає два об'єкта та перевіряє чи вони однакові (всі властивості є однаковими).

* завдання з зірочкою - функція може рекурсивно перевірити вкладені об'єкти.
🤔63👍2🔥2
Jam 🍓
#post_from @vova_taras

Ніхто не запамʼятає вас за круті фічі, які ви додали на проєкт, проте вони памʼятатимуть кожен ваш баг. І тут є два виходи - обізвати його фічею або ж просто пофіксити його. Давайте поговоримо про варіант №2.

Вам сильно пощастило, якщо у вас є тестувальник. Вам вдвічі пощастило, якщо він толковий. Щоб відтворити якусь проблему та виправити її часто потрібно багато вхідних даних. І тут вам може допомогти Jam. Це розширення для Chrome, яке дуже просто дозволить QA чи замовнику (якщо він виконує роль QA) швидко відзвітувати про проблему. Тут автоматично зберігається інформація про девайс, браузер, логи в консолі та запити в мережі. І мені здається, що ця інформація точно не буде зайвою.

👉️Відкрити посилання
👍174🔥3
Welcome!

Let's practice our English! So...

👉 What is one thing that always makes you feel better when you're feeling sad or stressed?

Have a nice #english_friday 💛
👍64🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити 3D Card Hover 🔥

Виконаний лише з допомогою HTML та CSS!

👉 Відкрити посилання
🔥29👍10🤓43😱1
7👍5
Ми успішно завершили курс з дикції! 🎤

В мене настав етап під назвою "жити життя" і тепер в нас майже кожен день розпланований різними подіями, заняттями, лікарями (ми ж не молодіємо) тощо. Та у цьому є й свої позитивні сторони - ми почали підтримувати хоч якийсь work-life balance, адже розуміємо, якщо не зробимо свої робочі таски вчасно, то ввечері в нас просто не буде на них часу.

Одним з цих занять став курс з дикції. Він включав в себе 8 уроків, де ми вчились правильно дихати, користуватись різними інтонаціями та працювати над своєю вимовою. Наприкінці ми записали свій перший подкаст! Це було щось нове і незвичне, адже взагалі не пов'язане з нашою сферою діяльності. Приємним бонусом (або викликом) було те, що ми робили це разом із друзями, що гарантувало якісно проведений час та багато позитивних вражень.

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

#localhost
👍198🔥42
Що таке Set/Map та чому вони існують?

Якщо говорити про Set як про структуру даних - це невпорядкована колекція, що не має дублікатів. В JS ця структура вже реалізована з коробки і готова до використання. Думаю, більшість з нас прибирають з масивів дублікати використовуючи саме Set.

const array = [1, 2, 3, 1, 2];
const set = new Set(array);
const arrayWithoutDuplicates = Array.from(set);


Коли ще корисний Set?

Специфікація каже, що перевірка елемента на входження в колекцію виконується швидше ніж O(n) (може бути O(1) або ж O(log(N))). Тому, якщо у вас є великий список і часто потрібно перевіряти елементи на входження, радимо звернути увагу. Варто зазначити, що Set працює як із примітивними значеннями, так і з обʼєктами (за їх посиланням). А ще, деякі корисні методи (такі як union, difference та інші) зараз позначені як експериментальні та можливо скоро будуть введені в більшість середовищ.

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

Зі свого боку Map - структура даних, що складається з пар ключ-значення, де кожен ключ є унікальним. Можете проводити собі аналогії зі звичайним обʼєктом в JS. Але для чого тоді цей клас, якщо стандартний обʼєкт робить десь те саме?

По-перше, Map дозволяє використовувати і примітивні значення, і обʼєкти як ключ чи значення, коли обʼєкт в JS дозволяє використовувати тільки рядок тексту як ключ. По-друге, Map має кращу продуктивність у випадках, коли вам часто потрібно додавати/видаляти різні пари ключ-значення.

const map = new Map();
map.set(1, 'one');

console.log(map.get(1));


А більше методів Map ви знайдете у документації від MDN.

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

#interview
👍246🔥3