Web Overflow 🇺🇦

Advent of Code 2024 🎄

Advent of Code - це різдвяний календар невеликих головоломок з програмування для різних рівнів підготовки, які можна розв'язати будь-якою мовою програмування, яка вам до вподоби.

Тому від сьогодні і протягом наступних 24 днів о 7 ранку за нашим часом відкриватиметься нова комірка з цікавими завданнями.

Як це працює?

1. Відкриваєте веб-сайт Advent of Code, знаходите завдання, яке ще не розв'язали.
2. Читаєте історію та завдання.
3. Логінитесь через будь-який зручний сервіс, щоб отримати свій варіант вхідних даних.
4. Найцікавіше — пишете код.
5. Вводите результат на веб-сайті. Якщо відповідь правильна, отримуєте зірочку та ще одне бонусне завдання.
6. Після цього залишилося найскладніше — чекати на наступний день.

Сьогоднішнє завдання коротко.

Є файл із числами, у кожному рядку — по два числа (тобто дві колонки чисел). Потрібно вертикально відсортувати числа, після чого знайти суму різниць чисел кожного рядка.

Ми вважаємо, що це чудовий спосіб практики програмування. Наприклад, можна використати цю можливість для вивчення нової мови.

Ставте 👍, якщо плануєте брати участь в Advent of Code цього року. А також, надсилайте свої варіанти рішень в коментарі.

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

#aoc

Welcome!

Let's practice our English! So...

👉 If you had to choose one color to describe your personality, what color would it be and why?

Have a nice #english_friday 💛

#quiz

Database Normalization 🤓

Якщо вам раптом доведеться працювати з базою даних, обов'язково потрібно знати, як правильно її спроектувати. Хороший дизайн БД, зокрема нормалізація, — саме про це розповідає автор у відео нижче.

👉 Дивитися відео

#interview

#how_to створити frying pan preloader 🥘

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

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

Welcome!

Let's practice our English! So...

👉 What’s one thing you wish people would stop doing on social media?

Have a nice #english_friday 💛

CSS changed 🟣

Перше, що варто зазначити, — CSS отримав нове лого. Історія походження цього кольору справді унікальна. Щоб дізнатися більше, перегляньте відео нижче.

Бонусом: Fireship розповідає про фічі CSS, які мало хто знає, але більшість із них вже стали або незабаром стануть стандартними у браузерах.

👉 Дивитись відео

#tips

State of JS/React 🤨

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

Опитування щодо JavaScript і React відкриті!

На нашу думку, це не просто спроба отримати статистичні дані. Використайте це на свою користь: додавайте у свій Reading List нові речі, про які ви не чули, або ж чули, але досі не досліджували. Наприклад, у першому питанні ми для себе відзначили error.cause та hashbang grammar. Також позначайте своє ставлення до технологій у запитаннях — це дає корисний фідбек для всієї спільноти.

І, звісно, це ще одна нагода показати світу, що в Україні багато крутих спеціалістів!

👉 Відкрити State of JavaScript 2024 Survey
👉 Відкрити State of React 2024 Survey

#tips

#quiz

Як пройти співбесіду англійською? 📚

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

👉 Співбесіда англійською – 11 найпопулярніших запитань та відповідей
👉 Співбесіда англійською мовою - як пройти інтерв'ю на англійській?

#interview

Welcome!

Let's practice our English! So...

👉 If you could have an unlimited supply of one item (not connected to money), what would it be and why?

Have a nice #english_friday 💛

Driver.js 🚖
#post_from @vova_taras

На багатьох веб-сайтах можна побачити підказки у вигляді інтерактивних підсвічувань кнопок чи форм. Такий гід по сайту може значно полегшити ознайомлення з функціоналом.

Driver.js — бібліотека, яка дозволяє легко створити подібний тур по вашому продукту, підкреслюючи ключові елементи. Краще один раз побачити, ніж десять разів прочитати, тож перегляньте демо-тур на офіційному сайті driver.js.

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

#library

ESLint Stylistic 💅

ESLint має окремий плагін, який спрямований саме на стиль коду. Раніше ці правила були частиною самого ESLint, але тепер їх винесли окремо.

Звісно, це не зробить ваш код більш ефективним, але, можливо, ви захочете забезпечити єдиний стиль для всієї команди. У поєднанні з Prettier можна налаштувати досить суворі правила форматування. Тішить, що більшість правил підтримують auto-fix.

Ми зараз пробуємо додати цей плагін, щоб форсувати відступи під директивами ("use client"/"use server"). Можливо, це не надто корисно, але зате забезпечить узгодженість у всьому коді.

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

#tips

#todo написати функцію на будь-якій мові програмування, яка приймає ціле додатнє число ms - кількість мілісекунд, та викликає заздалегідь визначену функцію f. Функція має повернути результат виклику функції f, якщо функція f виконалась менш ніж ms мілісекунд, інакше - викинути помилку.

#quiz

Axios adapter 🔌

На поточному Next.js проєкті ми використовуємо axios. І, якщо ви досліджували нові версії Next.js, то могли помітити, що вони розширюють вбудований fetch. Next.js дозволяє керувати кешем саме через fetch.

За замовчуванням axios використовує fetch аж третім в черзі. Проте, це можна легко змінити, встановивши параметр adapter, створюючи обʼєкт axios.

const api = axios.create({ adapter: ["fetch", "xhr", "http"] })

Після цього ми можемо передавати fetchOptions при виклику методів axios.

api.get("/", { fetchOptions: { ... } })

Відверто кажучи, ми ще не встигли це протестувати (PR поки висить), але вже цього тижня ми хочемо перевірити, чи все працює правильно.

#localhost