:where - это CSS псевдокласс, который принимает в качестве аргумента список селекторов и применяет заданные стили к любому элементу из него. Он очень полезен для сокращения длинного списка селекторов и не только.

Например, вместо того, чтобы писать:

header p:hover,
main p:hover,
footer p:hover {
 color: red;
 cursor: pointer;
}

Данный псевдокласс позволяет сократить код до:

:where(header, main, footer) p:hover {
 color: red;
 cursor: pointer;
}

Поддержка браузерами уже вполне приличная! Можно посмотреть здесь.

Подробно о :where и случаях его использования читайте в статье.

Ссылка на статью

#css

codingame - это ресурс для изучения JavaScript в игровой форме! 

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

Помимо JavaScript доступно еще около 25 языков. 

Ссылка на сайт

#js

popmotion - это JavaScript библиотека для создания анимаций. 

Она поддерживает анимацию ключевых кадров, пружинящие и инерционные анимации. С помощью нее можно анимировать 3D объекты, диаграммы, SVG и другое.

Каждую функцию можно импортировать по отдельности и она весит менее 5 КБ.

Ссылка на официальный сайт

#инструменты

storybook — это инструмент, который позволяет создавать и организовывать UI компоненты.

С помощью него можно интерактивно разрабатывать и тестировать компоненты, а также просматривать их различные состояния. Его можно использовать с React, Vue или Angular. 

В статье рассказывается, как использовать Storybook с React и как лучше всего его интегрировать в любое React приложение.

Ссылка на статью

#react

Koa.js — это Node.js фрэймворк, разработанный командой Express. Он меньше по размеру и более надежная основа для веб-приложений и API. 

В статье дается небольшой обзор о Koa, а также в конце статьи вы найдете ссылку на подробный туториал по данному фреймворку.

Ссылка на статью

#nodejs

3D эффект

Хотите создать интересный эффект при наведении? Вот вам идея. На данном сайте можно сгенерировать код анимированного 3D эффекта.

Лучше посмотреть, чтобы понять о чем речь!

Ссылка на сайт

#дизайн

Bootstrap 5.2.0

Недавно был релиз версии Bootstrap v5.2.0-beta1.

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

Подробнее обо всем читайте в статье!

Ссылка на статью

#статьи

Slink

Знаете такую игрушку, как "слинк"(slink)? Или может вам она знакома по названию "пружинка-радуга".
Её можно перекидывать из руки в руку, а также многие любили ее спускать вниз по ступенькам.

Сегодня можно создать подобный элемент с помощью CSS и заставить его "шагать" с помощью анимации! В статье рассказывается, как это реализовать.

Ссылка на статью

#css

Sparse array

Sparse array переводится, как "разреженный" массив. Так называются массивы, которые содержат элементы без явного значения или по-простому "дыры". 

Это происходит, например, когда с помощью метода delete удаляются элементы из массива.

let numbers = [1, 2, 3, 4];

delete numbers[1];
delete numbers[2];

Очень интересный факт: метод forEach, пропускает "дыры" в массиве!

Подробно читайте в статье!

Ссылка на статью

#js

Справочник алгоритмов

Делимся ссылкой на GitHub репозиторий, в котором собраны базовые примеры самых популярных алгоритмов и структур данных, реализованных на JavaScript.

Для каждого алгоритма и структуры данных есть отдельный файл README с пояснениями и ссылками на дополнительную информацию.

Ссылка на репозиторий

#инструменты

React Code Editor

С помощью данного туториала вы сможете создать свой собственный онлайн редактор кода.

В нем реализуется следующий функционал:
- компиляция кода в веб-приложении с поддержкой более 40 языков программирования;
- изменение темы редактора из списка доступных;
- получение информации о выполняемом коде (время выполнения кода, используемая память, статус и т. д.).

В проекте используется следующий стэк технологий:
- React.js — для фронтенда;
- TailwindCSS — для стилей;
- Judge0 — для компиляции и выполнения кода;
- RapidAPI — для быстрого развертывания кода Judge0;
- Monaco Editor — редактор кода, на котором работает проект;

Всего столько полезного для изучения в одном проекте!

Ссылка на туториал

#react

Двухфакторная аутентификация

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

Одной из реализаций двухфакторной аутентификации является использование приложений-аутентификаторов, например, такого, как Google Authenticator.

В этой статье вы узнаете, как реализовать этот процесс в Node.js с помощью Google Authenticator.

Ссылка на статью

#nodejs

perspective

Свойство CSS perspective используется для придания трехмерному элементу некоторой перспективы.
Оно определяет, насколько далеко объект находится от пользователя. Более низкое значение приведет к более интенсивному 3D-эффекту, чем высокое.

По ссылке доступен генератор стилей для того, чтобы поиграться с данным свойством и посмотреть, как на практике оно меняет отображение элемента.

Ссылка на генератор

#дизайн

VS Code shortcuts

Shortcuts (шорткаты) или "горячие" клавиши помогают повысить скорость написания кода.

В этой статье собраны самые популярные сочетания для работы в VS Code для Windows и Mac!

А в конце есть готовая шпаргалка с шорткатами.

Ссылка на статью

#статьи

Hover эффекты

В статье показаны примеры крутых и продвинутых эффектов при наведении. В анимации используются такие свойства, как: background-clip, clip-path, perspective и другие.

Берите на заметку!

Ссылка на статью

#css

Курс по ES6

Если вы все еще не используете spread оператор(...), стрелочные функции и остальное, что пришло с появлением ES6, а так же не понимаете, что такое генераторы и для чего они нужны, то этот курс для вас.

Тем более он бесплатный!

Ссылка на курс

#js

Книги по вебу

Столько всего полезного на одном ресурсе!

На этом сайте собрана коллекция бесплатных книг по HTML, CSS, JavaScript и другим направлениям.

Ссылка на сайт

#инструменты

Анимация во Vue

В статье рассматривается 5 лучших библиотек для создания анимаций во Vue:

- vue-kinesis
- vue-prix
- vue-fake3d-image
- v-wave
- vue-animate-onscroll

Читайте полный обзор с примерами использования в статье!

Ссылка на статью

#vue

Видеочат

Вы можете создать свой видеочат! И в этом вам поможет сегодняшняя статья. Для создания используются JavaScript, Node.js, PeerJS, WebRTC и Socket.io.

В начале статьи можно посмотреть демо создаваемого приложения.

Ссылка на статью

#js

CSS генераторы

Полезных инструментов много не бывает!

Делимся ссылкой на ресурс, на котором вы найдете множество полезных генераторов CSS кода:
- генератор для создания кнопок переключателей
- генератор теней
- генератор треугольников
- генератор полосы прокрутки
и еще много других крутых инструментов!

Ссылка на сайт

#дизайн

Словарь разработчика

В обиходе разработчиков присутствует очень много специализированных терминов и слов. И чтобы быть в тренде и понимать других, советуем ознакомиться со многими из данной статьи. 

Например, знаете ли вы, что означает registrar или crawl в вебе?

Читайте значение в статье!

Ссылка на статью

#статьи