CodeRoll | Frontend

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 #реклама

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

Прими участие в масштабном онлайн-хакатоне «Moscow City Hack 2022» от Агентства инноваций Москвы! Тебя ждут: 🏆 Призовой фонд 3 400 000 ₽; 💻 Задачи по разработке сервисов для мотивации студентов, привлечения волонтеров, цифрового маркетинга, импортозамещения и разоблачения fake news;  🧐 Эксперты от крупного бизнеса и Правительства Москвы; 🎓 Образовательная программа с мастер-классами и интенсивами; 🎁 Красочный мерч, подарки от партнеров и много крутых активностей 🔥 📅 Хакатон пройдет 10-13 июня 2022 года Регистрируйся уже сейчас! https://bit.ly/37oSZFH Узнать подробности и найти команду можно в нашем Telegram-чате t.me/MoscowCityHack #реклама

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

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