Отражение

Возможности CSS позволяют создавать различные эффекты. С помощью него можно даже создать реалистичное отражение текста или других объектов.

Статья как раз на эту тему!
В ней вы найдете много примеров с разными вариантами отражения.

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

#css

TypeScript

Поскольку в JavaScript отсутствует строгая типизация, на помощь приходит TypeScript. Строгая типизация уменьшает количество потенциальных ошибок, которые могли бы возникнуть при разработке на нативном JS. 

Делимся с вами гайдом по изучению TypeScript для начинающих!

Ссылка на гайд

#js

Cleave.js - это JavaScript-библиотека для автоматического форматирования вводимого текстового контента в инпут. Она форматирует номера кредитной карты, номера телефона, даты, числа и другое.

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

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

SuperTokens

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

С помощью данной статьи вы научитесь реализовывать аутентификацию пользователей в React приложении с помощью Supertokens.

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

#react

Микросервисы

Микросервис представляет собой автономную единицу, которая вместе с другими составляет обширное приложение. Архитектура на основе микросервисов позволяет разделить приложение на небольшие блоки. Каждая часть может развертываться и масштабироваться независимо друг от друга. 

В статье рассказывается, как создать микросервисы с помощью Node.js. В примере создается три сервиса, которые имеют отдельные серверы, работающие на разных портах. Эти сервисы взаимодействуют друг с другом через REST API.

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

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

#nodejs

Shuffle - это генератор верстки для сайта. Выберите в настройках понравившийся шаблон и доработайте в визуальном редакторе. Генератор предоставляет готовые шаблоны для десктопа, планшета и мобильного телефона.

В визуальном редакторе, вы можете скопировать готовый HTML код, а стили подтягиваются из библиотеки на ваш выбор: Bootstrap, Tailwind, Bulma. 

Доступна бесплатная и платная версия с расширенными возможностями.

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

#дизайн

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

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

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

#статьи

: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!

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

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

#статьи