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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
#post_from @MatiGreen

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

Наприклад:
3 => III
14 => XIV
192 => CXCII


* завдання з зірочкою - написати функцію, яка виконує зворотню конвертацію.
6👍3🔥2🤔2
Winston & Axiom 📝

Зі своїми програмами треба вести себе як строгий наглядач - необхідно, щоб вони доповідали про кожен свій крок. А доповідати вони мають за допомогою логів. І чим більше логів, тим краще (допоки це не порушує конфіденційність, але сьогодні не про це). Рано чи пізно це дозволить вам відстежити критичні помилки в застосунку.

Якщо перше, що ви подумаєте, коли почуєте "Winston" - це сигарети, тоді ви ще не пробували цю бібліотеку для логування в Node.js. Тут ви зможете налаштувати різні рівні логування, формати виводу і (акцентуємо увагу сьогодні тут) різні транспорти, або ж те, куди будуть ці логи виводитись. Тобто ваш застосунок може виводити лише попередження та помилки в консоль, а весь список логів можна буде побачити, наприклад, у файлі.

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

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

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

👉 Читати документацію Winston
👉 Відкрити посилання на Axiom

#library
👍102🔥1
Welcome!

Let's practice our English! So...

👉 How did you spend Valentine's Day? 💓

Have a nice #english_friday 💛
4👍2💋1
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити Hamburger CSS Animations 🍔

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

👉 Відкрити посилання
👍104🔥4😁1
#post_from @Taraskin777

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

👉 Читати статтю
👍103🔥2🥰1🎉1
<meta name="viewport" content="width=device-width, initial-scale=1" /> 🔍

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

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

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

#shorts
👍162😱2🔥1
Zed і Theo Browne 👷

Менше місяця тому команда Zed відкрила доступ до свого репозиторію. Це певним чином додало інтересу з боку розробників до цього редактора. І от Theo Browne робив огляд на нього на своєму Youtube-каналі.

Якимось чином застосунок написаний на Rust при скролі поводився гірше ніж VS Code, який написаний на JS. Не найкраща реклама.

То ж що зробила команда Zed? В той час вони перебували в одному місті, що і Theo, тому завітали до нього в гості і прямо в нього на кухні на його ноутбуці виправили помилку. Виявилось, що на MacBook з ProMotion рендеринг поводився не так, як вони очікували.

Здається, це дуже класний приклад того, як потрібно ставитись до свого продукту та його користувачів.

User: "it doesn't work on my machine"
Most developers: "not sure how to reproduce this so oh well"
Zed: knocks on door


👉 Відкрити посилання на Zed
👉 Дивитися відео

#news
👍12🔥821
😁8👍52
😁25👍92
👍72🤔2🫡2😭1
Welcome!

Let's practice our English! So...

👉 What is your fitness routine like, and are there any tips to keep fit? 🤸‍♂️

Have a nice #english_friday 💛
👍52😁2
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити анімацію люстри 💡

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

👉 Відкрити посилання
👍19😱87
Globals in TypeScript 🌍

Буває ж таке, що у вас є глобальна змінна чи функція, а TypeScript вдає, що ніколи про таку не чув? Найчастіше таке трапляється, коли ви додаєте сторонній скрипт собі у застосунок.

В даному випадку вам допоможе declare global. Таким чином ви можете ОГОЛОСИТИ змінну, тим самим пояснити TypeScript, що така змінна існує, має певний тип та є глобальною. Часто такі змінні/функції додаються саме до обʼєкту window, тож ви можете просто розширити цей інтерфейс (в чому різниця інтерфейсів та типів, і що означає розширити писали тут).

Matt Pocock у своєму відео детальніше демонструє, яким чином можна налаштувати типи для глобальних змінних, як зробити їх доступними тільки у поточному файлі або у всьому проекті.

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

#interview
👍104🔥1
СЕКС
не пропонуємо, але пропонуємо підписатись на крутий YouTube канал! 😅

Всі ми добре знаємо нашого колєгу @Yurets7777! Він максимально активний у нас в чаті, але разом із тим ще й корисні відео записує.

Тому ловіть круті підбірки його відео на різну тематику:
- Браузерні API
- AI-шне | нейромережі
- Node.JS
- Телеграм Боти

Він дуже старається, тому кому заходить такий формат і подача, you are welcome!

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

P.S. А якщо ви хочете бути в центрі всіх подій та новин, тоді вам точно до нас в чат!
😁20👍9🔥3😢31🤓1
👍53🤔3
👍8🤔84🍾4
#todo написати функцію, що приймає натуральне число n, та повертає n-не число з послідовності Фібоначчі. За початкові числа взяти 0 та 1.

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

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

Для швидкого ознайомлення можна використати Learn X in Y minutes.

👉 Відкрити посилання
👍63🤔2
Чи можливо зробити ChatGPT-7? 🤯
#post_from @neanime

Наш друг написав дуже цікаву статтю, в якій детально розглянув ключові виклики та потенційні рішення для майбутньої розробки ChatGPT-7. Чи є можливість створення цієї нової версії, і які саме шляхи вона може прокласти у світі штучного інтелекту?

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

Всіх запрошуємо до прочитання! 💛
👍124🔥1
Welcome!

Let's practice our English! So...

👉 Where do you prefer to live - in a city or a village? 🌍

Have a nice #english_friday 💛
👍53🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити анімацію виділення тексту 💬

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

👉 Відкрити посилання
👍73🔥2
Is HTML a programming language? 🤨

Початок нового тижня і, щоб до кінця прокинутись, попрограмуємо на HTML. Насправді, ми довго тримались, але нарешті вирішили детальніше розглянути htmx. Так, так, саме htmx.

Сам по собі HTML може небагато, тому майже завжди в нас є JavaScript, а в більшості випадків - бібліотеки та фреймворки: jQuery, React, Angular, Vue…

htmx - це теж бібліотека JavaScript, проте вона має дещо інші ідеї. Одна з них - розширення функціоналу HTML. htmx зазвичай працює за допомогою атрибутів. Наприклад, додайте hx-post="/like" до <button />, щоб змусити кнопку відправляти POST запит за посиланням /like. Ще, тут дуже важлива відповідь сервера, адже саме шмат HTML, який сервер повертає буде додано в поточну сторінку. Інші атрибути, такі як hx-target чи hx-swap визначають, що саме і де потрібно замінити.

Знаємо, що в Інтернеті думки щодо htmx дуже сильно поділились. Ми тільки почали його пробувати, тому зараз ще важко дати обґрунтовану оцінку. Але перше враження позитивне - це щось нове для нас, здається, що такий підхід може добре працювати, як мінімум для невеликих проектів.

А ще, коли ми розповідали про shadcn/ui, то згадували рейтинг проектів, що отримали найбільшу кількість зірок за 2023. htmx посів 10 місце у загальному рейтингу і 2 місце серед front-end фреймворків/бібліотек після React.

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

Там є багато прикладів, які наглядно показують роботу htmx. А нижче ще додаємо короткий огляд від Fireship.

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

#library
👍164🔥2👀1