CodeRoll | Frontend

Эффект печатающей машинки Эффект печатающей машинки - очень популярная анимация, для которой существует не мало способов создания. В статье представлено несколько демо с реализацией: - на чистом CSS; - c помощью CSS и JavaScript; - с помощью библиотек. Ссылка на статью #css

Figma теперь в телеграм! Figma — самый популярный графический онлайн редактор в мире! Он очень прост и именно с него нужно начинать изучение веб-дизайна. А сейчас в телеграмме появился русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться!

NGINX Как фронтенд-разработчику, вам будет полезно знать что такое NGINX. Данная аббревиатура произносится, как "энджин икс" ("engine X"), а не так, как привыкли произносить многие - "энгинкс". Если вкратце, то NGINX - это веб-сервер, который может быть использован в качестве обратного прокси, балансировщика нагрузки, почтового прокси и HTTP-кэша, разработанный Игорем Сысоевым. Более подробно о принципе его работы читайте в статье. Ссылка на статью #статьи

3D карусель Делимся ссылкой на крутую 3D карусель с эффектом вращения по кругу. Сохраняйте в закладки! Ссылка на CodePen #дизайн

Remotion - это библиотека для создания видео в React приложениях. Она позволяет создавать визуальные эффекты с помощью canvas, CSS, SVG и WebGL и объединять их в видео.  Простыми словами, используя Remotion, вы cможете создавать видео с помощью кода!  Советуем ознакомиться с документацией, чтобы понять, как это работает.    Ссылка на официальный сайт #react

Docusaurus — это генератор статических сайтов, который позволяет создавать красивые сайты с документацией без особых усилий. Он основан на React и его богатой экосистеме. Благодаря этому генератору, вы можете больше сконцентрироваться на контенте, так как весь функционал уже готов. Docusaurus предлагает расширенные функции, такие как: управление версиями, i18n, поиск по сайту и настройка тем. Ссылка на официальный сайт #инструменты

Стрелочные функции Стрелочные функции стали широко используемыми разработчиками при написании кода. Они предоставляют очень удобный и компактный синтаксис. Но они имеют недостатки, что в некоторых случаях их не стоит использовать. Например, в методах объектов. О всех недостатках и случаях, читайте подробнее в статье. Ссылка на статью #js

Задержка анимации А знали ли вы, что значение animation-delay может быть отрицательным? Это помогает сделать пошаговую анимацию более естественной. В сегодняшней статье как раз показывается показывается пример использования отрицательной задержки анимации. Ссылка на статью #css

Шорткаты Chrome Шорткаты или горячие клавиши упростят вашу жизнь и ускорят работу в самом часто используемом браузере — Google Chrome. В статье дается список комбинаций для Windows, Linux и MacOS. Ссылка на статью #статьи

Pebble - это коллекция бесплатных стильных иконок. Они доступны в форматах PNG и SVG, а так же в качестве React компонентов, построенных с помощью SVGR. Ссылка на сайт #дизайн

Fast Node Manager Иногда для проектов требуются разные версии Node.js. Часто возникают ошибки или проект не собирается по причине того, что на компьютере может быть уже самая последняя версия ноды, а проект был написан на одной из предыдущих. Fast Node Manager - это менеджер версий Node.js, написанный на Rust. С помощью него вы можете устанавливать различные версии и удобно переключаться между ними. В статье рассказывается, как использовать Fast Node Manager. Ссылка на статью #nodejs

React-Responsive-Carousel — это npm пакет, используемый в React приложениях для создания карусели изображений или видео. Хороший и быстрый вариант для создания карусели, адаптированной под все экраны! На официально сайте можно посмотреть демо, а в статье подробно рассказывается, как ее создать и настроить. Ссылка на статью Ссылка на официальный сайт #react

Шпаргалка GSAP GSAP - это высокопроизводительная JavaScript библиотека анимации. В шпаргалке представлены примеры синтаксиса GSAP со всеми базовыми свойствами и методами. Кликая на свойства в примерах, можно почитать подробное описание. Удобно иметь под рукой! Ссылка на шпаргалку #инструменты

SOLID — это аббревиатура пяти основных принципов проектирования в объектно-ориентированном программировании — Single responsibility, Open-closed, Liskov substitution, Interface segregation и Dependency inversion. Эти принципы позволяют строить на базе ООП масштабируемые и сопровождаемые программные продукты с понятной бизнес-логикой. В статье даются практические примеры принципов SOLID в JavaScript. Ссылка на статью #js

column-rule Если верстка состоит из колонок и между ними нужен разделитель, есть очень простой способ их создать - это свойство column-rule! column-rule - это краткая форма записи для column-rule-width, column-rule-style, и column-rule-color, с помощью которых задаются стили для разделителя. Подробности в статье! Ссылка на статью #css

CMS, CRM, и ERP CMS, CRM и ERP — это три основных программных решения для автоматизации основных бизнес-процессов, а также типы проектов над которыми часто приходится работать разработчикам. Если не понимаете, что и для чего предназначено, то эта статья для вас. В ней рассказывается для чего эти типы ПО нужны и их ключевых функциях. Ссылка на сайт #статьи

Mesher - инструмент для создания сетчатых градиентов.  Сетчатый градиент — это сложный градиент на основе двухмерной сетки, также он называется mesh-градиентом. Можно добавлять бесконечное количество цветов, создавая интересные фоны. На выходе генератор выдает готовый CSS код. Ссылка на сайт #дизайн

Morgan — это промежуточное ПО для Node.js, которое регистрирует HTTP-запросы. Обычно оно используется в проектах Express. Morgan упрощает работу по регистрации HTTP-запросов к приложению и от него. Обычно разработчики должны писать весь код ведения журнала вручную. Они указывают Node.js/Express.js - что, как и где сохранять. А Morgan как раз может позаботиться об этом без участия разработчика. Он сам собирает журналы с сервера и подготавливает их к чтению. Подробнее о том, как его использовать читайте в статье! Ссылка на статью #nodejs

Как стать веб-разработчиком с нуля в 2022? Узнайте на вебинаре. → Бесплатно, 26 июля в 19:00 На встрече расскажем, как освоить профессию с нуля и выйти на рынок труда через 10 месяцев, даже если до этого вы никогда не программировали.  ◾️ Георгий Девяткин, наставник на курсе по веб-разработке, расскажет и покажет на примерах, как проходит рабочий день обычного веб-разработчика. ◾️ Олег Гордиенов, студент курса по веб-разработке Яндекс Практикума, поделится опытом обучения и трудоустройства. Олег нашёл работу ещё до того, как получил диплом разработчика.  На вебинаре вы узнаете: — почему через веб-разработку реально попасть в IT; — какие задачи решает веб-разработчик; — какие навыки нужны для успешного старта карьеры. В финале встречи вы получите пошаговый план, как выйти на стабильный доход в новой профессии. → Зарегистрироваться на вебинар #реклама

Mantine Еще одна библиотека для быстрого создания React приложений! Mantine - это библиотека более 120 настраиваемых компонентов и 30 хуков.  Mantine предлагает немало полезных функций. Например: - c помощью данной библиотеки можно добавить темную тему в приложение, написав всего несколько строк кода; - имеет полнофункциональную систему уведомлений; - Transitions API для создания плавных анимаций и многое другое! Ссылка на официальный сайт #react