CodeRoll | Frontend

South Hub — IT-кэмп в Сочи для СТО и тех, кто хочет ими стать   Когда?  6 – 8 октября  Где?  Красная Поляна, Сочи  Зачем?  Подняться на уровень выше. Профессионально и физически.     В отеле Novotel Congress соберутся 400 IT-руководителей, тех директора и CEO. На протяжении 3-х дней 45 спикеров будут делиться с участниками своим опытом и мыслями о будущем отрасли в формате лекций и бесконечного нетворкинга.   Помимо конференц-части гостей ждут зрелищные спортивные турниры в баскетбол, FIFA 23 PS 5 и Го, хайкинг по горам, утренние пробежки, много неформального общения, а также вечеринка на закате на высоте 2 200 метров.  Все подробности о кэмпе можно найти на сайте:   https://i.southhub.ru/zhNMv

CSS Puzzle Все знают, что смысл игры Puzzle собрать картинку из фрагментов по образцу. Автор этого CodePen реализовал ее на чистом CSS. Удивительно, что фрагмент встает только на свое место и никакое другое. Это тот случай, когда возможности CSS поражают! Ссылка на CodePen #css

<input type="number"/> Семантически правильно использовать <input type="number"/> для полей, где вводятся числа. Но оказывается, что этот HTML-элемент имеет некоторые особенности. Например, когда поле содержит недопустимое значение, то при его извлечении, вы получаете пустую строку. Подробнее о всех особенностях читайте в статье! Ссылка на статью #статьи

Gradient Text Generator - это генератор градиентов для текста. Для превью можно сразу ввести необходимый текст и задать в настройках цвета. На выходе генерируется готовый CSS код. Ссылка на сайт #дизайн

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

Встречай самое захватывающее, яркое и масштабное IT-соревнование года. Это больше, чем хакатон. Регистрируйся на конкурс Лидеры цифровой трансформации, где тысячи представителей IT-профессий создают сервисы для улучшения жизни горожан. Тебя ждут: - Призовой фонд 20 000 000 ₽ - 10 задач и 2 недели на разработку - Подарки от партнеров и эксклюзивный мерч для финалистов - Грандиозный финал в формате двухдневного фестиваля - Возможность пилотирования твоего прототипа и создания стартапа В этом году участникам предстоит разработать ряд востребованных городом решений: от интерактивной карты ВДНХ и платформы для медицинской разметки до рекомендательных сервисов по размещению московских постаматов и выявлению перспективных производственных ниш. Подай заявку прямо сейчас: https://clck.ru/326moP В Telegram-чате конкурса ты узнаешь подробности и найдешь команду https://t.me/leaders_2022

ZincSearch — поисковой движок, выполняющий полнотекстовое индексирование. Это альтернатива Elasticsearch, которая требует меньше ресурсов и соответственно легче по весу. Подробная информация о нем на официальном сайте! Ссылка на официальный сайт #инструменты

Хабр теперь в Telegram! Подписывайтесь: @habr_articles

JavaScript API, о которых вы не знали В статье описываются наименее известные, но чрезвычайно полезные API, такие как: - Page Visibility API  - Web Share API  - Broadcast Channel API  - Internationalization API Например, Web Share API используется для обмена текстом, ссылками и файлами. Его можно использовать для того, чтобы поделиться контентом со страницы в социальных сетях или скопировать его в буфер обмена. Подробнее об этих API и о том, как их использовать читайте в статье. Ссылка на статью #js

Псевдоселектор :modal Псевдоселектор :modal позволяет выбирать модальные элементы. Два типа элементов в настоящее время классифицируются как :modal: - <dialog>, использующий метод showModal; - элементы, находящиеся в полноэкранном режиме; Поддержка пока еще недостаточно хорошая, но :modal поддерживается уже последними версиями Chrome, Safari, Firefox и Edge. Ее уровень можно глянуть тут. А подробнее об его использовании читайте в статье. Ссылка на статью #css

Именование коммитов Коммиты отражают историю репозитория, а также предоставляют информацию другим о том, какая работа была выполнена, что было исправлено или добавлено. Поэтому очень важно писать для них ясные и понятные сообщения. Кстати, существует единое соглашение (Conventional Commit) по тому, как писать коммиты. В статье как раз рассказывается о правилах из данного соглашения и примерах хороших и плохих коммитов.   Ссылка на статью #статьи

fffuel - это коллекция бесплатных генераторов для создания уникальных фонов, градиентов и декоративных элементов в формате SVG. Сохраняйте в закладки! Ссылка на сайт #дизайн

Passport - это промежуточное программное обеспечение для аутентификации для Node.js. Оно поддерживает аутентификацию с использованием имени пользователя и пароля, Facebook, Twitter и многого другого. Ссылка на официальный сайт #nodejs

React Just Parallax - библиотека React для создания параллакс эффекта при прокрутке и при движении мыши. Она написана на TypeScript, весит мало, работает молниеносно и проста в использовании. Смотрите демо и примеры использования на сайте! Ссылка на сайт #react

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

16-18 сентября пройдет третий онлайн-хакатон от АО «Россельхозбанк» — AgroCode Hack 2022 🌳   Командам предстоить решить одну из трех технологичных задачи агроиндустрии: 🚜 Разработать алгоритм для автоматизированной сборки урожая. 🐮 Вычислить самые неэффективные протоколы лечения коров. 🍇 Создать сервис по поиску перспективных земель для выращивания винограда.   Команды-победители смогут разделить призовой фонд в 1 400 000 рублей!💰  До конца регистрации осталось меньше недели❗️  Регистрация и все подробности по ссылке #реклама

метод startsWith Существует много способов для того, чтобы проверить, что строка начинается с определенного символа: - метод indexOf;  - метод substring; - регулярное выражение;   А также существует метод специально предназначенный для этого! startsWith помогает определить, начинается ли строка с символов переданных в качестве аргумента, возвращая true или false.  Подробнее о нем и примерах его использования читайте в статье! Ссылка на статью #js

-webkit-box-reflect Реально ли создать отражение элемента всего лишь с помощью одного CSS свойства? Да! -webkit-box-reflect предоставляет эту возможность. Хотя Firefox не поддерживает данное свойство. И для похожего эффекта рекомендуется использовать функцию element(). Но все же с помощью webkit-box-reflect можно создавать очень крутые эффекты. Примеры смотрите в статье. Совместимость с браузерами можно глянуть тут. Ссылка на статью #css

DNS (Domain Name System — система доменных имен) - технология, которая предоставляет браузеру возможность находить конкретный сайт по его имени с помощью DNS-серверов. У каждого подключенного к интернету устройства есть свой номер, который на профессиональном языке называется IP-адресом. Запомнить эти наборы цифр сложно, поэтому придумали DNS технологию, которая связывает домен с IP-адресом. Часто DNS сравнивают с телефонной книгой, где записаны контакты (доменные имена) и номера телефонов (IP-адреса). В этой статье рассказывается о внутренностях DNS: различных компонентах, участвующих в обработке DNS-запроса и какую функцию каждый из них выполняет. Ссылка на статью #статьи

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