CodeRoll | Frontend

Radix - это библиотека UI компонентов для создания приложений на React, которая делает акцент на доступности своих компонентов.  Компоненты созданы с учетом правильной семантики, обеспечивают полную поддержку устройств ввода и протестированы на скрин ридерах. Они не стилизованы, что дает вам полный контроль над их оформлением. Ссылка на официальный сайт #react

Открытый урок «Первый код на JavaScript» Приходи на урок и узнай, как создать стильную галерею для сайта с помощью JavaScript. ⚡️Будет полезно:  Тем, кто уже в IT. Усилишь экспертизу, освоишь востребованный навык и получишь новые возможности для развития в профессии. Тем, кто только собирается в IT. Поймёшь, что писать на JS проще, чем кажется. А ещё сделаешь первый шаг, чтобы войти в IT. 🔰Спикер — Зар Захаров —15 лет в разработке —Работал и с маленькими проектами, и с гигантами уровня «Альфа-Банка» и «Тинькофф» —Сейчас пишет на React в Grid Dynamics По образованию Зар преподаватель, и его особенность — объяснять сложные вещи просто и емко.  Всего за час Зар научит тебя создавать на JS галереи, которые будут классно смотреться на сайте. ⏱Начинаем 5 апреля в 17:00 по Мск #реклама

layzr.js - JavaScript библиотека для отложенной загрузки изображений(lazy loading). Маленькая и быстрая, написана на ES6. Ссылка на официальный сайт #инструменты

Условия Написание сложных и объемных условий влечет за собой огромное ветвление if/else или switch/case. Главный недостаток в том, что читать и воспринимать такой код сложно.  Конечно всегда есть более элегантные способы написания кода! В статье предложены варианты, как писать условия с помощью литерала объекта. Ссылка на статью #js

will-change Свойство CSS, которое появилось еще в 2015 году. Если вкратце, то will-change - это метод оптимизации анимации путем информирования браузера о том, какие элементы и свойства изменятся. Самое главное, что надо запомнить: применять его надо умеренно. Чтобы более подробно узнать об этом свойстве и как его использовать, читайте статью. Ссылка на статью #css

Атрибуты HTML В HTML немало полезных атрибутов. Возможно о некоторых вы даже не слышали! Например, знали ли вы, что для тэга <ol> (нумерованного списка) можно использовать атрибуты, которые позволяют настраивать поведение нумерации, отображаемой в списке: - reversed - для нумерации элементов в обратном порядке; - start - для определения с какого числа начинать; - type - для определения, что использовать для нумерации: числа, буквы или римские числа; - value - для указания номера для определенного элемента списка. А об атрибуте download для тэга <a> знали? Об этих атрибутах и других читайте в статье! Ссылка на статью #статьи

Keyframes CSS - это редактор для создания анимаций. Особенность его в том, что интерфейс представлен в виде видеоредактора с временной шкалой. За счет этого можно создавать сложные анимации и пошагово отслеживать их работу. На выходе, вы получаете готовый CSS код. Опробуйте его сами!  Ссылка на сайт #дизайн

Fetch в Node.js Fetch API был добавлен в Node.js! Fetch уже доступен в качестве экспериментальной функции в Node v17. Если вы хотите попробовать его перед основным выпуском, вам необходимо сначала загрузить и обновить версию Node.js до 17.5. А затем запустить, используя флаг --experimental-fetch. О том, какие это проблемы решает его появление, читайте в статье. Ссылка на статью #nodejs

drag-and-drop Vue 3 сейчас является актуальной версией данного фрэймворка. Пора начинать пользоваться новыми фичами, которые в ней появились. По этому случаю делимся обучающей статьей по созданию drag-and-drop загрузчику файлов на Vue 3. Ссылка на статью #vue

Американская компания с израильскими корнями ищет  Senior backend (PHP+laravel) разработчиков, Senior frontend (react) разработчиков Команда проекта работает над CRM-системой для тех, кто принимает платежи онлайн. CRM интегрирована с множеством платежек, все данные попадают в единый интерфейс, что позволяет показывать клиенту большое количество разной аналитики. Решение компании прошло сертификацию PCI Level 1, поэтому данные в CRM находятся в безопасности. В общем довольно крутая и нужная штука. Стек: #php #laravel #mysql #react   ЗП до $8000.  Работа полностью удаленная. Свое cv направляйте личку @coder2coder ——— Больше интересных вакансий в канале IsraeliHiTechJobs #реклама

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

JavaScript анимация В статье рассказывается о реализации запуска анимации при прокрутке страницы. Многие пользователи могут вообще никогда не прокручивать страницу вниз, поэтому если запускать анимацию только тогда, когда это необходимо, уменьшит время загрузки. Существует множество библиотек, которые вы можете использовать для реализации, например, популярный плагин Greensock ScrollTrigger. Подобное можно реализовать и на ванильном JavaScript. Пример реализации смотрите в данной статье. Ссылка на статью #js

CSS лайфхаки В статье приведены полезные примеры создания UI элементов и анимационных эффектов без использования JavaScript. Например, создание чеклиста на чистом CSS или появление подсказок с помощью attr(). Всегда круто иметь в своем арсенале такие знания! Все примеры смотрите в статье. Ссылка на статью #css

В кризис выживет только IT-сфера - успей залететь. Frontend 53XApps – курс с оплачиваемой стажировкой Чтобы вырасти в качественного разработчика нужно учиться не только писать на языке программирования, но и понимать его. Курс Dev House и 53x Apps даст вам: 🔸Код-ревью после каждого урока; 🔸Групповое наставничество - не более 30 учеников на одного преподавателя; 🔸Идеологию и принципы работы фреймворков, научит понимать и работать с фреймворком Vue.js (или любым другим); 🔸Интерактивные вебинары и записи занятий; 🔸Качественное обучение востребованной профессии; 🔸Актуальная программа; 🔸Поддержка во время обучения; 🔸Доступ к сообществу учеников и специалистов. А лучшие студенты попадут на оплачиваемую стажировку в компанию 53x Apps.)) Курс пройдет онлайн с 1 апреля по 31 августа. Формат — прямые трансляции, домашние задания, ланч тайм с приглашенными экспертами, сообщество учеников в Telegram, постоянные код-ревью с преподавателем. Всего 30 мест в группе, успей записаться на новый поток #реклама

emoji Забавная статья об эмодзи! Знали ли вы, что если в JavaScript объединить несколько разных эмодзи, они вернут одну общую? Например, сочетание следующих: ['👨', '🏼', '‍', '💻'].join('') // => 👨🏼‍💻 И наоборот, вы можете разделить одну эмодзи на несколько: [...'👨🏼‍💻'] // => ['👨', '🏼', '‍', '💻'] Почему это возможно, читайте в статье. Ссылка на статью #статьи

Анимация градиента Анимация градиента бэкграунда - это что-то необычное...Стоит взять на заметку! А еще делимся ссылкой на генератор таких анимаций! Ссылка на генератор #дизайн

Обработка PDF В экосистеме JavaScript отсутствует надежная поддержка работы с PDF-файлами. Но для этого существует npm пакет pdf-lib!   В статье на примерах показано, как управлять PDF-файлами: создавать новые, добавлять в них текст и модифицировать уже существующие и еще много других полезных манипуляций. И все это с помощью Node.js!  Ссылка на статью #nodejs

nextTick nextTick - это утилита Vue, которая используется в случаях, когда нужно дождаться обновления DOM после его перерисовки.  Важно знать, что DOM обновляется асинхронно. Когда меняются какие-то данные во Vue, изменение не сразу отображается в DOM. Обычно это происходит так быстро, что порой может не иметь значения.  Но иногда, например, нужно сразу обновить отрендеренный DOM после того, как Vue отрисовал его. А сделать это в методе вы сразу не можете, потому что обновление еще не произошло. В таких случаях на помощь приходит nextTick. Как и когда использовать nextTick читайте в статье! Ссылка на статью #vue

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

Deep JavaScript Бесплатная версия книги Deep JavaScript! Также доступна платная в других форматах. Эта книга предлагает погрузиться глубоко в JavaScript. В ней рассказывается: - о практических методах, как использовать язык лучше; - о том, как работает язык; - о спецификации ECMAScript и многом другом! Ссылка на книгу #javascript