👩‍💻 Smooth Liquid Background Effect

Сцена с анимированным фоном. Сделана на SVG, CSS и JavaScript.

#codepen

👩‍💻 Полноценная поддержка вложенности без препроцессоров

Вложенность в CSS — это когда мы помещаем внутри родительского элемента стили дочерних элементов. Вложенность позволяет писать компактный код, и до сих пор она была доступна только в препроцессорах — в Sass и Less.Препроцессор Sass — с чего начать новичку

Теперь это можно реализовать в обычном CSS. Например, у родительского элемента .card есть дочерние элементы .title и .content. Мы можем поместить стили дочерних элементов прямо внутрь стилей .card:

.card {
    /* основные стили карточки */
    &:hover,
    &:focus {
        /* стили ховера и состояния фокуса */
    }
    .title {
        /* стили для заголовка внутри карточки */
    }
    .content {
        /* стили для контента внутри карточки */
    }
}

В таком коде легче искать нужный селектор — всё сгруппировано в одном месте.

👩‍💻 Символы-ключи в WeakMap

Теперь можно использовать уникальные символы в качестве ключей.

До этого обновления WeakMaps можно было использовать в качестве ключей только объекты. Объекты используются в качестве ключей для WeakMaps, потому что они имеют один и тот же аспект идентичности.

Symbol — это единственный примитивный тип в ECMAScript, который позволяет использовать для него уникальные значения. Использовать Symbol теперь можно и в качестве ключа вместо создания нового объекта с помощью WeakMap.

const weak = new WeakMap();

const key = Symbol('my ref');
const someObject = { a:1 };

weak.set(key, someObject);
console.log(weak.get(key));

👩‍💻 Используйте исчерпывающую проверку для обнаружения необработанных случаев во время компиляции

Когда используется switch-case вместо enum, это хорошая привычка активно ошибаться в case которые не ожидаются, вместо того, чтобы молча игнорировать их.

С помощью TypeScript вы можете позволить статической проверке типов найти ошибку раньше, используя тип never:

function getArea(shape: Shape) {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'rect':
      return shape.width * shape.height;
    default:
      // вы получите ошибку типа ниже, если
      // какой-либо shape.kind не обрабатывается выше
      const _exhaustiveCheck: never = shape;
      throw new Error('Unknown shape kind');
  }
}

При этом невозможно забыть обновить функцию getArea при добавлении нового вида фигуры.

Смысл этого метода в том, что типу never нельзя присвоить ничего, кроме never. Если все кандидаты shape.kind исчерпываются операторами case, единственным возможным типом, достигающим default: будет never. Однако если какой-либо кандидат не покрыт, он попадёт в ветку default и приведёт к недопустимому значению.

👩‍💻 React 19 уничтожит все фреймворки

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

Читать...

👩‍💻 Firefly Button

Сцена с измененным курсором и анимированной кнопкой. Сделана на CSS и JavaScript.

#codepen

⚙️ Создание анимированного меню навигации

Этот короткий CSS код преобразит ваше меню навигации, добавив анимированную полосу подчеркивания при наведении курсора. Полоса будет плавно расширяться от левого края элемента до конца текста.

<nav class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu li {
  margin-right: 20px;
}

.menu a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  position: relative;
}

.menu a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.menu a:hover::after {
  width: 100%;
}

#HTML #CSS

🛠 17 суперинструментов для разработки фронтенда

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

Читать...

👩‍💻 Star trails

Сцена с анимированным следом за курсором в виде звезд. Сделана на Pug, SCSS и JavaScript.

#codepen

🖥 Дайджест самых интересных публикаций за последние дни:

• Что такое WAF и как с ним работать? Показываем на примере уязвимого веб-приложения

• Ищем баги в коде браузера при помощи фаззинга

• Анимации CSS, основанные на времени

👩‍💻 Топ-10 заданий по написанию кода для собеседования по React.js в 2024 году

Эти 10 заданий по созданию кода с примерами решений помогут закрепить основные теоретические понятия React.js и прокачать практические навыки. Изучение лучших сценариев написания кода  —  верный путь к успешному прохождению собеседования.

Читать...

👩‍💻 Вышло обновление ESLint 9.0

Разработчики линтера ESLint рассказали о релизе версии 9.0. Команда проекта исправила известные ошибки и добавила новые функции. Кроме того, линтер теперь не поддерживает работу с Node.js 18.18.0 и 19.

Читать полностью...

👩‍💻 Check Done SVG Animated

Красиво анимированная галочка. Сделана на SVG и SCSS.

Открыть код