Frontender Libs - обзор библиотек JS / CSS

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

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

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

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

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

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

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

👉 @sWebDev | #юмор

CSS Custom Highlight API

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

👉 @sWebDev

Skeleton Loading

Skeleton Loading - это серые «заглушки», которые показываются до загрузки данных. Пользователь сразу видит структуру страницы и не думает, что сайт завис. Такой приём снижает число уходов и делает интерфейс визуально быстрее.

Как внедрить? Рассмотрим два варианта:

1. CSS-анимация shimmer:

.skeleton {
  background: linear-gradient(90deg,#eee 25%,#ddd 50%,#eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

2. React/Vue:
Показываем <Skeleton /> вместо контента при loading=true.

👉 @sWebDev | #полезные_сниппеты

Управление состоянием с сохранением в LocalStorage

В React хук useLocalStorage сохраняет состояние в localStorage. При инициализации берёт данные из него (если есть), при обновлении — синхронно записывает. Удобно для темы, языка и других настроек, сохраняемых между сессиями.

import { useState, useEffect } from 'react';

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    try {
      const storedValue = localStorage.getItem(key);
      return storedValue ? JSON.parse(storedValue) : initialValue;
    } catch {
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch {
      // Игнорируем ошибки (например, если storage переполнен)
    }
  }, [key, value]);

  return [value, setValue] as const;
}

Теперь можно использовать его, как обычный useState, но с автоматическим сохранением.

👉 @sWebDev

Давайте посмотрим на реальность. Какая у вас зарплата в месяц (тыс. ₽)?

👎 – до 100.

❤️ – 100-150.

🔥 – 150-200.

🤔 – 200-250.

👍 – 250+ (неприлично много)

👉 @sWebDev | #юмор

Жизненный цикл

В какой момент жизненного цикла компонента флаг в хуке useIsMounted устанавливается в значение false?

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

👉 @sWebDev

LeaderLine

Библиотека предназначена для отрисовки SVG-линий между произвольными DOM-элементами. Инструмент автоматически рассчитывает путь и положение линии, обновляя их при прокрутке или изменении размеров страницы. Подойдет для создания визуальных связей, аннотаций или простых диаграмм в интерфейсе.

👉 @sWebDev

Draggable & Flip Sortable Grid

Сортируемая сетка с перетаскиванием элементов на GSAP.

👉 @sWebDev

Создание сложных форм на Vue

Разметка для больших форм с десятками полей быстро становится громоздкой и трудной в поддержке. Статья показывает, как решить эту проблему в Vue с помощью компонентного подхода. Разбирается паттерн, где структура формы определяется в JSON, а поля генерируются динамически через v-for и переиспользуемый компонент ввода.

👉 @sWebDev

Light and shadow

3D-сцена с анимированной гирляндой и динамическими тенями на GSAP.

👉 @sWebDev

🏎 Ищете выгодный пригон автомобиля из Европы?

Компания European Car Hub предлагает автомобили с ценами на 20-30% ниже рыночных!

🔴 Audi A8 (3.0 гибрид, автомат, полный привод)

🔴 Kia Sportage (1.6 бензин, механика, передний привод)

🔵 Volkswagen Tiguan (2.0 бензин, автомат, полный привод)

🔵 Volkswagen Golf (1.5 бензин, механика, передний привод)

🧐 Все машины проходят тщательную проверку: Большинство из них — почти новые. Растаможка с Европы составляет всего 30%. Всю работу с документами мы берём на себя.

European Car Hub – насладись покупкой авто без лишних хлопот!

Curtains.js

Библиотека использует WebGL для превращения DOM-элементов, таких как изображения и видео, в интерактивные 3D-плоскости. Она значительно упрощает работу с шейдерами для добавления к обычным HTML-элементам сложных визуальных эффектов.

👉 @sWebDev

Делали так?

👍 – Пару раз прокатило.

❤️ – Я даже джуном прикинуться не могу.

👉 @sWebDev | #юмор

Infinite Canvas

Интерактивный бесконечный холст с drag-and-drop на Canvas API и JavaScript.

👉 @sWebDev

Декларативная условная стилизация

Для условного применения inline-стилей в React часто создают объект стилей с помощью if или тернарных операторов. Существует более лаконичный, декларативный подход с использованием spread-оператора (...) и логического оператора &&.

Механизм основан на том, что выражение условие && { стиль: 'значение' } вернет либо объект стилей, если условие истинно, либо false, если ложно. React при разворачивании (spread) falsy-значений (таких как false, null или undefined) внутри объекта просто игнорирует их, не добавляя никаких свойств.

import React from 'react';

function AlertMessage({ text, isActive, isUrgent }) {
  const baseStyles = {
    margin: '10px 0',
    padding: '15px',
    borderRadius: '4px',
    transition: 'all 0.2s ease-in-out',
  };

  const finalStyles = {
    ...baseStyles,
    ...(isActive && { background: '#f0f0f0' }),
    ...(isUrgent && { background: '#ffdddd', border: '1px solid red' }),
  };

  return <div style={finalStyles}>{text}</div>;
}

👉 @sWebDev

Хотели в детстве быть программистом?

👍 – Да, мечтал.

❤️ – Нет, жизнь сама заставила.

🤔 – Я до сих пор не понял, кем хотел стать.

👉 @sWebDev | #юмор