JavaScript'er

Чому Promise.race() не скасовує інші операції? Promise.race() повертає результат першого проміса, що завершився, але не зупиняє інші операції Наприклад, якщо тайм-аут спрацює раніше за fetch(), HTTP-запит продовжить виконуватися, а якщо запит завершиться першим — таймер залишиться активним Для скасування запиту після заданого часу використовуйте AbortSignal.timeout()

const response = await fetch('/api/data', {
  signal: AbortSignal.timeout(3000)
});

Якщо час очікування мине, незавершений запит буде скасовано Щоб поєднати тайм-аут із ручним скасуванням, використовуйте AbortSignal.any()

const controller = new AbortController();

const signal = AbortSignal.any([
  controller.signal,
  AbortSignal.timeout(3000)
]);

const response = await fetch('/api/data', { signal });

Причину скасування можна перевірити через signal.reason Важливо: скасування fetch() на клієнті не гарантує, що сервер припинить обробку запиту Головне: Promise.race() визначає переможця, але не скасовує інші операції. Для тайм-аутів використовуйте AbortSignal.timeout(), а для об’єднання умов скасування — AbortSignal.any() JavaScript'еr

Ловіть розумний DNS-резолвер в одному файлі Numa — портативний DNS-резолвер, який блокує рекламу, кешує запити та дозволяє налаштовувати локальні сервіси без залежності від хмарних платформ Основні можливості Блокування реклами та кешування DNS-запитів за замовчуванням Підтримка DNSSEC і DNS-over-TLS для захисту запитів Шифрування DNS-запитів за допомогою ODoH Автоматичне виявлення пристроїв у локальній мережі Просте налаштування та зручний інтерфейс Numa об’єднує інструменти керування DNS в одному виконуваному файлі без потреби в хмарних сервісах JavaScript'еr

Яка версія HTTP використовується зараз? HTTP/1.1 досі підтримується, але сучасні сайти активно використовують HTTP/2 та HTTP/3. HTTP/2 пришвидшує передавання даних завдяки мультиплексуванню запитів, а HTTP/3 працює поверх QUIC замість TCP, що допомагає зменшити затримки та покращує роботу з нестабільним з’єднанням JavaScript'еr

Не розроб, а сайтороб! JavaScript'еr

Шпаргалка по CSS gap: gap — задає відстань між рядками та колонками, row-gap — визначає вертикальний проміжок між рядками, column-gap — горизонтальний проміжок між колонками, Flexbox — використовує gap для відступів між елементами, Grid — дозволяє задавати спільний gap або окремі значення для рядків і колонок JavaScript'еr

‼️Безкоштовно спробуйте AI-професію за 3 дні! Перейти в нову сферу складно: багато інформації, незрозуміло з чого почати, важко оцінити свої сили. 🤖AI-напрям зараз один із найперспективніших — і водночас доступний навіть без технічного бекграунду. Тому ми запрошуємо вас на 3х денний інтенсив "АІ-автоматизація без програмування"

⏺День1: Розберешся, хто такий AI-автоматизатор і за що йому платять. Почнеш створювати власного AI-асистента в n8n. ⏺День2: Завершиш налаштування AI-асистента та протестуєш його в реальних сценаріях. ⏺День3: Навчитесь монетизувати та розвивати отриманні навички

🎁 Бонус за реєстрацію: Гайд "Як інтегрувати АІ у своє життя" Скоріш реєструйся та безкоштовно спробуй себе у ролі АІ-фахівця https://i.goit.global/9aCy1

JavaScript готує новий спосіб порівняння об’єктів Пропозиція Composites перейшла на Stage 2 у TC39 Що це змінить? - Об’єкти з однаковим вмістом зможуть бути рівними при порівнянні через ===, навіть якщо створені окремо - Порівняння за значенням працюватиме в Set - Об’єкти можна буде використовувати як ключі Map із порівнянням за вмістом Зараз два окремо створені об’єкти зазвичай не рівні через ===, навіть якщо їхні властивості однакові JavaScript'еr

CSS позбувся ще одного костиля для центрування! align-content: center тепер працює зі звичайними блочними елементами — без Flexbox і Grid Раніше для вертикального центрування доводилося перетворювати контейнер на flex. Тепер достатньо одного рядка коду:

.container {
  align-content: center;
}

Підтримується основними браузерами: Chrome 123+, Firefox 125+ і Safari 17.4+ JavaScript'еr

🤖 AI вже пише код за розробників. То за що компанії платитимуть інженерам завтра? Cursor, Claude, Copilot та AI-агенти дедалі краще справляються із завданнями, на які раніше витрачалися години роботи. Але є нюанс: написати код і спроєктувати надійну AI-систему — зовсім різні рівні інженерії. Хтось має визначити архітектуру, забезпечити безпеку, перевірити результати моделей і зробити так, щоб усе стабільно працювало в production. І саме тут проходить межа між виконавцем завдань та AI System Architect. Для досвідчених IT-фахівців Neoversity створили міжнародну магістерську програму Engineering of Autonomous AI Systems. Що вивчатимуть: 🟣 AI-агенти та мультиагентні системи 🟣 Advanced RAG і векторні бази даних 🟣 AI Security, перевірка та надійність систем 🟣 MLOps, Cloud та архітектура AI-рішень У фіналі — власний AI-проєкт від архітектури до MVP із захистом перед експертами.

🎓 Міжнародний диплом магістра, визнаний у 50+ країнах 💻 Онлайн-навчання паралельно з роботою 🚀 Для Middle/Senior розробників, DevOps та ML-інженерів

Поки AI вчиться виконувати завдання, час навчитися проєктувати системи, які керують його роботою. 👉 Переглянути програму та умови вступу: https://cutt.ly/MyRYVHLK

Claymorphism List Hover Effect CSS-ефект із анімованим підсвічуванням нумерованих рядків при наведенні курсора Забираємо код тут JavaScript'еr

CSS-порада Можливо, ви ще не знаєте про цей псевдоклас CSS JavaScript'еr

HTML-порада Для семантичного виділення частини тексту використовуйте тег <mark> JavaScript'еr

Шпаргалка по Semantic HTML: Semantic HTML — використання тегів, які описують зміст елементів сторінки, Header — верхня частина сайту з основною інформацією, Nav — блок навігаційних посилань, Section — окремий тематичний розділ контенту, Main — основний вміст сторінки, Article — самостійна стаття або запис, Aside — додатковий або бічний контент, Footer — нижня частина сторінки з контактами, авторськими правами та службовою інформацією JavaScript'еr

Що таке керовані та некеровані компоненти в React? Керовані компоненти зберігають значення елементів у стані React, наприклад через useState. Некеровані компоненти зберігають стан у DOM, а доступ до значень здійснюється через ref JavaScript'еr

👀 86 відгуків на одну Front-end вакансію. А в Defense Tech — у середньому близько 9. І це привід придивитися до сфери, якщо ви думаєте, куди рухатися далі. Поки в класичному IT конкуренція залишається високою, MilTech набирає обертів: з’являються нові команди, продукти та технології — а разом із ними потрібні нові спеціалісти. І далеко не тільки розробники 👇

→ Project та Product Managers → QA-фахівці → Hardware та Embedded спеціалісти → аналітики та інші tech-фахівці

Тож MilTech може стати тим самим напрямом, куди варто зайти зараз, а не тоді, коли про нього говоритимуть уже всі. А який напрям у MilTech може підійти саме вам? GoIT створили короткий безкоштовний тест: 3 хвилини — і ви дізнаєтесь свій MilTech-напрям, його потенціал та отримаєте рекомендацію, з чого почати. 👉 Пройти тест: https://i.goit.global/2aXRO

Коди стану HTTP на прикладі ключів та кімнат JavaScript'еr

Slider with Button Wave Effect Інтерактивний слайдер з ефектом хвилі під час натискання кнопки Реалізовано за допомогою JavaScript і GSAP Забираємо код тут JavaScript'еr

Як народився сучасний веб У 1989 році Тім Бернерс-Лі, працюючи в CERN, запропонував систему для обміну пов’язаними документами До кінця 1990 року він створив перший браузер-редактор WorldWideWeb, перший вебсервер і сформулював базові технології вебу — HTML, HTTP та URL Перший сайт працював за адресою info.cern.ch і розповідав про сам проєкт World Wide Web Ключовий момент настав у 1993 році, коли CERN зробила технологію Web загальнодоступною. Це дозволило їй швидко поширитися світом без патентних обмежень і ліцензійних бар’єрів Пізніше Бернерс-Лі заснував W3C, щоб розвивати відкриті вебстандарти та зберігати сумісність між браузерами й платформами Один із тих рідкісних випадків, коли рішення не закривати технологію виявилося не менш важливим, ніж сама технологія JavaScript'еr

Антипатерн: складні умови в JSX Іноді в JSX трапляються такі умови:

{isLoggedIn && user?.settings?.theme === 'dark' && !isLoading && <DarkDashboard />}

Так, це працює. Але читати й підтримувати такий код складніше Краще винести умову окремо:

const shouldShowDarkDashboard =
  isLoggedIn && user?.settings?.theme === 'dark' && !isLoading;

return (
  <>
    {shouldShowDarkDashboard && <DarkDashboard />}
  </>
);

Переваги: · простіше відлагоджувати · умову можна перевикористати · код одразу пояснює, що саме він робить Правило просте: складні умови краще виносити з JSX — так код стає читабельнішим і його легше підтримувати JavaScript'еr

Carbon Платформа керує процесами ERP, MES і QMS на виробництві через розширювану API-first архітектуру, побудовану на TypeScript і Rust JavaScript'еr