Сколько времени вы убили на подобную ошибку?

👍 - Много, очень много.

❤️ - Пока такого не было.

🤔 - У меня стоит Highlight Bad Characters.

👉 @sWebDev | #юмор

😡 Устал от нудных уроков на YouTube, где половина — вода?

Хватит это терпеть) Автор канала Формошлёп убрал воду и оставил только суть:

➧ Мини-гайды по HTML, CSS и JavaScript, которые легко читать и сразу применять.
➧ Шпаргалки, лайфхаки и полезные советы с ноткой юмора.
➧ Всё чётко, лаконично и по делу.

Неважно, новичок ты или фронтендер на опыте — у нас всегда найдётся что-то полезное!

Присоединяйся: @frontbox будем вместе шлёпать формы и красить кнопки)

3D Game Engine

Анимация открытого мира на Three.js.

👉 @sWebDev

Как понять, что ты становишься опытным в JavaScript?

👍 – Уже не задаешь вопросов.

❤️ – Делаешь if (value == true) на всякий случай.

🤔 – Когда typeof null === 'object' уже не вызывает боли.

👉 @sWebDev | #юмор

Cropper.js

Cropper.js — это легковесная и мощная JavaScript-библиотека для обрезки изображений, которая позволяет создавать интерактивные инструменты для работы с картинками на веб-страницах. Она особенно полезна для проектов, где пользователи могут загружать и редактировать свои изображения (например, аватарки, фото профиля или контент).

👉 @sWebDev

Virus-like shapes

Анимация фигур в виде вирусов на Three.js.

👉 @sWebDev

Улучшение шаблонов Angular с помощью нетегированных шаблонных литералов

Статья обсуждает улучшение в Angular версии 19.2.0-next.0, которое предоставляет разработчикам поддержку нетегированных шаблонных литералов, позволяя более эффективно и удобно работать с шаблонами в Angular-приложениях.

👉 @sWebDev

WaVvVvVvVeSsS

Анимация волн на GSAP.

👉 @sWebDev

Canvg

Canvg — библиотека, которая позволяет рендерить SVG-контент на <canvas> HTML5. Полезна для работы с графикой в браузерах, которые не поддерживают SVG в полной мере или требуют манипуляций с графикой.

👉 @sWebDev

Работа с методом runInInjectionContext()

Что позволяет делать метод runInInjectionContext()?

Забыли? Вернитесь к посту от 03.02.2025.

👉 @sWebDev

Что делать, если прод упал?

👍 – Пинать сервер.

❤️ – Брать больничный.

🤔 – Искать баг.

👉 @sWebDev | #юмор

Рендеринг длинных списков без потерь производительности в Angular

В Angular рендеринг длинных списков может перегружать DOM, снижая производительность. CdkVirtualScrollViewport из Angular CDK решает эту проблему, рендеря только видимые элементы.

Пример:

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

Этот компонент создает виртуальный список, динамически заменяя элементы при прокрутке. В памяти остается только небольшое количество элементов, необходимое для отображения.

Дополнительно можно задать динамическую высоту элементов:

<cdk-virtual-scroll-viewport [itemSize]="getItemSize()" class="viewport">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

getItemSize() {
  return window.innerWidth > 768 ? 50 : 100;
}

Это позволяет адаптировать высоту элементов к ширине экрана, улучшая UX.

👉 @sWebDev

Custom Cursor

Анимация курсора на Anime.js.

👉 @sWebDev

Какой вариант ветки вам удобнее?

👍 – Main, уже привык.

❤️ – Master, так исторически сложилось.

🤔 – О чем вообще речь?

👉 @sWebDev | #юмор

Booking.js

Booking.js — это библиотека для создания пользовательских интерфейсов бронирования с интуитивно понятным выбором дат. Она ориентирована на веб-приложения, требующие функционала бронирования, например, аренду жилья или услуги.

👉 @sWebDev

Spline of frames

Анимация пленки с фотографиями на Three.js.

👉 @sWebDev

Тестирование React-хуков с помощью Vitest

В статье обсуждается, как эффективно тестировать пользовательские хуки в React, используя библиотеку Vitest. Рассматриваются методы настройки среды тестирования с помощью JSDOM, применения React Testing Library для рендеринга хуков и использования функций spyOn и waitFor для тестирования асинхронной логики и внешних API-вызовов.

👉 @sWebDev

Пример midnight.js

Анимация с примером реализации библиотеки midnight.js.

👉 @sWebDev

Midnight.js

Midnight.js — это небольшая библиотека JavaScript, которая позволяет динамически изменять цвет навигационной панели в зависимости от фона, над которым она находится. Работает путем определения родительского элемента и применения соответствующих CSS-классов при прокрутке страницы.

👉 @sWebDev