CSS Custom Highlight API

Стилизация текста - важная задача для Frontend-разработчика. CSS Custom Highlight API позволяет управлять внешним видом выделенных диапазонов, делая акценты гибкими и удобными. В статье разбираем основы работы API и показываем, как создавать и применять стилизованные выделения на практике.

👉 @sWebDev

И как бороться с этим?

👍 - Сила воли и 10 литров кофе

❤️ - А зачем бороться?

👉 @sWebDev | #юмор

Node js разработка приложений в микросервисной архитектуре с нуля

Книга Юлии Поповой «Node.js: разработка приложений в микросервисной архитектуре с нуля», вышедшая в апреле 2024 года, представляет собой практическое руководство для разработчиков от уровня джун и выше. В ней показан процесс создания микросервисов на Node.js с использованием NestJS и других популярных инструментов. Несмотря на формулировку «с нуля» в названии, материал рассчитан на тех, кто уже знаком с JavaScript, TypeScript и NestJS. Автор сосредотачивается не на теории, а на практических приемах построения масштабируемых микросервисных приложений.

👉 @sWebDev | #курсы_книги

👉 @sWebDev | #курсы_книги

Поведение на клиенте

Если React-хук для адаптивного UI использует начальное значение для серверного рендеринга, что произойдет с этим значением на стороне клиента после гидратации?

Посмотреть ответ.

👉 @sWebDev

Отслеживание размеров окна

React хук useWindowSize отслеживает размеры окна браузера для адаптивных интерфейсов. В SSR, где window недоступен, хук использует начальные значения (defaultWidth, defaultHeight). После гидратации размеры обновляются.

import { useState, useEffect } from 'react';

function useWindowSize(defaultWidth = 0, defaultHeight = 0) {
  const [windowSize, setWindowSize] = useState({
    width: defaultWidth,
    height: defaultHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

Хук возвращает объект { width, height } для динамической адаптации UI.

👉 @sWebDev