Когда приложение ещё не готово, а клиент требует демо.

👉 @sWebDev | #юмор

Отладка пользовательских хуков в React

useDebugValue() – это хук React, который позволяет разработчикам предоставлять дополнительную информацию о значении, возвращаемом пользовательским хуком, в инструментах разработчика React DevTools. Это упрощает отладку и понимание работы пользовательских хуков, особенно в сложных компонентах или библиотеках.

Как это работает:

Вы вызываете useDebugValue() внутри вашего пользовательского хука и передаете ему значение, которое хотите отобразить в DevTools. Дополнительно, вы можете передать функцию форматирования, которая преобразует значение в более удобный для чтения вид.

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ... логика для определения статуса друга ...

  useDebugValue(isOnline, (status) => status ?? 'Click Me Load More...');

  return isOnline;
}

В этом примере useDebugValue() отобразит в DevTools значение isOnline или строку "Click Me Load More...", если значение еще не получено.

👉 @sWebDev

Circular Carousel MotionPath - Draggable & Inertia

Интерактивное колесо с лотереей на GSAP.

👉 @sWebDev

Пока не подводило.

👉 @sWebDev | #юмор

Tesseract.js

Tesseract.js — это JavaScript-библиотека, позволяющая выполнять оптическое распознавание символов (OCR) непосредственно в браузере или на сервере Node.js. Она представляет собой порт популярного движка Tesseract OCR.

👉 @sWebDev

PointLight Demo

Интерактивная сцена с шарами на Three.js.

👉 @sWebDev

Управление состоянием в React и Angular

Статья обсуждает подходы к управлению состоянием в двух популярных JavaScript-фреймворках: React и Angular. В статье сравниваются встроенные механизмы и сторонние библиотеки, используемые для управления состоянием в этих фреймворках.

👉 @sWebDev

Что не так с техническими собеседованиями в IT?

Статья обсуждает проблемы и недостатки текущих практик проведения технических собеседований в сфере IT. Автор делится своим опытом как соискателя и интервьюера, описывая такие проблемы, как чрезмерное внимание к алгоритмическим задачам и недостаточное соответствие тестовых заданий реальным рабочим задачам. Он предлагает альтернативные методы оценки кандидатов, такие как задачи, приближенные к реальной работе, и анализ существующего кода.

А вы сталкивались на собеседованиях с теоретизированностью?

👍 ― Да.

🤔 ― Нет, мне давали сразу реальные задачи.

👉 @sWebDev | #собес

LokiJS

LokiJS – это JavaScript-библиотека, предоставляющая легковесную in-memory базу данных, предназначенную для использования в браузере или в среде Node.js. Она не требует установки дополнительных серверов или плагинов и работает исключительно в памяти, что обеспечивает высокую скорость операций.

👉 @sWebDev

Функциональность useEffectEvent в React

useEffectEvent в React это?

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

👉 @sWebDev

Надеемся, что вы не были в такой ситуации...

👉 @sWebDev | #юмор

Отложенная загрузка на уровне шаблонов в Angular

Deferrable Views (отложенные представления) - это API в Angular 17, позволяющая откладывать загрузку компонентов, директив и труб до момента их необходимости. Это значительно улучшает производительность, особенно в крупных приложениях.

Отложенные представления реализованы с помощью декоратора @defer. При обнаружении элемента, обернутого в @defer, Angular не загружает соответствующий код немедленно, а откладывает его до момента рендеринга элемента на странице. Такой подход экономит время и ресурсы, загружая код только при необходимости.

Пример использования:

import { Component, @defer } from '@angular/core';

@Component({
  selector: 'app-lazy-component',
  templateUrl: './lazy-component.html',
  styleUrls: ['./lazy-component.css']
})
export class LazyComponent {
  // ...component code
}

В этом примере компонент LazyComponent будет загружен только при рендеринге на странице.

👉 @sWebDev

Sticky Sections with lenis smoothscroll and gsap animation

Скролл-анимация на GSAP.js.

👉 @sWebDev

Вы испытываете страх перед критикой?

🤔 — Скорее да, чем нет.

👍 — Спросите лучше тех, кого я критикую.

👉 @sWebDev | #юмор

Dynamo.js

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

👉 @sWebDev

What's behind ?

Интерактивная анимация занавеса на Three.js.

👉 @sWebDev

6 карусельных компонентов для современных языков фронтенда

Статья представляет обзор шести компонентов каруселей, которые можно использовать для создания интерактивных и визуально привлекательных интерфейсов в современных языках фронтенда. Эти компоненты помогают эффективно организовать и отображать контент пользователям, улучшая пользовательский опыт. Автор рассматривает различные библиотеки и инструменты, описывает их основные функции и предлагает примеры использования, чтобы помочь разработчикам выбрать подходящее решение для своих проектов.

👉 @sWebDev

Responsive CSS Powered Parallax w/ React && GSAP

Интерактивная параллакс анимация коалы с использованием React.js и GSAP.js.

👉 @sWebDev

Restyle

Restyle — это библиотека CSS-in-JS, разработанная для работы с React 18 и новее. Она использует новые возможности React, такие как поднятие стилей и дедупликация, чтобы обеспечить высокую производительность и оптимизацию рендеринга. Благодаря совместимости с RSC , Restyle позволяет создавать приложения, которые быстро загружаются и эффективно работают как на стороне сервера, так и на стороне клиента.

👉 @sWebDev