CodeRoll | Frontend

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

VS Code shortcuts Shortcuts (шорткаты) или "горячие" клавиши помогают повысить скорость написания кода. В этой статье собраны самые популярные сочетания для работы в VS Code для Windows и Mac! А в конце есть готовая шпаргалка с шорткатами. Ссылка на статью #статьи

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

Двухфакторная аутентификация Двухфакторная аутентификация (2FA) добавляет дополнительный уровень безопасности вашему веб-сайту или приложению. Используя 2FA, пользователь может быть уверен, что тот факт, что у кого-то есть пароль, не означает, что этот человек может получить доступ к вашей учетной записи. Одной из реализаций двухфакторной аутентификации является использование приложений-аутентификаторов, например, такого, как Google Authenticator. В этой статье вы узнаете, как реализовать этот процесс в Node.js с помощью Google Authenticator. Ссылка на статью #nodejs

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

Справочник алгоритмов Делимся ссылкой на GitHub репозиторий, в котором собраны базовые примеры самых популярных алгоритмов и структур данных, реализованных на JavaScript. Для каждого алгоритма и структуры данных есть отдельный файл README с пояснениями и ссылками на дополнительную информацию. Ссылка на репозиторий #инструменты

Sparse array Sparse array переводится, как "разреженный" массив. Так называются массивы, которые содержат элементы без явного значения или по-простому "дыры".  Это происходит, например, когда с помощью метода delete удаляются элементы из массива. let numbers = [1, 2, 3, 4]; delete numbers[1]; delete numbers[2]; Очень интересный факт: метод forEach, пропускает "дыры" в массиве! Подробно читайте в статье! Ссылка на статью #js

Slink Знаете такую игрушку, как "слинк"(slink)? Или может вам она знакома по названию "пружинка-радуга". Её можно перекидывать из руки в руку, а также многие любили ее спускать вниз по ступенькам. Сегодня можно создать подобный элемент с помощью CSS и заставить его "шагать" с помощью анимации! В статье рассказывается, как это реализовать. Ссылка на статью #css

Bootstrap 5.2.0 Недавно был релиз версии Bootstrap v5.2.0-beta1. В этой версии была переработана документация и переменные CSS для всех компонентов, появились новые хелперы и утилиты, были улучшены кнопки и элементы ввода, а также появилось множество улучшений под капотом. Подробнее обо всем читайте в статье! Ссылка на статью #статьи

3D эффект Хотите создать интересный эффект при наведении? Вот вам идея. На данном сайте можно сгенерировать код анимированного 3D эффекта. Лучше посмотреть, чтобы понять о чем речь! Ссылка на сайт #дизайн

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

storybook — это инструмент, который позволяет создавать и организовывать UI компоненты. С помощью него можно интерактивно разрабатывать и тестировать компоненты, а также просматривать их различные состояния. Его можно использовать с React, Vue или Angular.  В статье рассказывается, как использовать Storybook с React и как лучше всего его интегрировать в любое React приложение. Ссылка на статью #react

popmotion - это JavaScript библиотека для создания анимаций.  Она поддерживает анимацию ключевых кадров, пружинящие и инерционные анимации. С помощью нее можно анимировать 3D объекты, диаграммы, SVG и другое. Каждую функцию можно импортировать по отдельности и она весит менее 5 КБ. Ссылка на официальный сайт #инструменты

codingame - это ресурс для изучения JavaScript в игровой форме!  Вы можете улучшить свои навыки, решая увлекательные задачи по всем актуальным темам программирования.  Помимо JavaScript доступно еще около 25 языков.  Ссылка на сайт #js

: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

hash таблица - это структура данных, которая помогает решать различные алгоритмические задачи. Одной из ее сильных сторон является быстрое извлечение данных. В статье рассказывается подробно о hash таблицах: - что это такое - зачем их использовать - как они работают - примеры их использования в JavaScript и многое другое. Ссылка на статью #статьи

Shuffle - это генератор верстки для сайта. Выберите в настройках понравившийся шаблон и доработайте в визуальном редакторе. Генератор предоставляет готовые шаблоны для десктопа, планшета и мобильного телефона. В визуальном редакторе, вы можете скопировать готовый HTML код, а стили подтягиваются из библиотеки на ваш выбор: Bootstrap, Tailwind, Bulma.  Доступна бесплатная и платная версия с расширенными возможностями. Ссылка на сайт #дизайн

Микросервисы Микросервис представляет собой автономную единицу, которая вместе с другими составляет обширное приложение. Архитектура на основе микросервисов позволяет разделить приложение на небольшие блоки. Каждая часть может развертываться и масштабироваться независимо друг от друга.  В статье рассказывается, как создать микросервисы с помощью Node.js. В примере создается три сервиса, которые имеют отдельные серверы, работающие на разных портах. Эти сервисы взаимодействуют друг с другом через REST API. Подробнее читайте в статье! Ссылка на статью #nodejs

SuperTokens Supertokens позволяет добавить безопасную аутентификацию в ваше веб-приложение за считанные минуты с помощью готового пользовательского интерфейса, который вы можете легко настроить. Это гибкая альтернатива Auth0, Firebase и AWS Cognito. С помощью данной статьи вы научитесь реализовывать аутентификацию пользователей в React приложении с помощью Supertokens. Ссылка на статью #react

Хабр теперь в Telegram! Подписывайтесь: @habr_tg #реклама