CodeRoll | Frontend

Python пришел в телеграм! Python — второй по популярности язык в мире. Он очень универсален: можно писать сайты, а можно искусственный интеллект. Теперь у Python есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсах. Стоит подписаться! #реклама

Алгоритмы верстки CSS может восприниматься, как просто набор свойств, которые используются для стилизации элементов. Автор статьи предлагает посмотреть на CSS под другим углом. CSS — это совокупность взаимосвязанных алгоритмов компоновки, где каждый алгоритм представляет собой сложную систему со своими правилами и секретными механизмами. Недостаточно узнать, что делают конкретные свойства. Нужно узнать, как работают алгоритмы компоновки и как они используют свойства, которые мы им предоставляем. Данная статья поможет раскрыть некоторые моменты со свойствами CSS, которые до этого были не понятны или казались волшебством. Ссылка на статью #статьи

preloader  Делимся ссылкой на небольшую библиотеку анимированных спиннеров с готовым CSS кодом. Просто выберите понравившийся вариант, нажмите на вкладку 'source' и готовый код у вас в кармане! Ссылка на сайт #дизайн

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

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('') // => 👨🏼‍💻 И наоборот, вы можете разделить одну эмодзи на несколько: [...'👨🏼‍💻'] // => ['👨', '🏼', '‍', '💻'] Почему это возможно, читайте в статье. Ссылка на статью #статьи

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