CodeRoll | Frontend

selectmenu Относительно легко стилизовать внешний вид select, в то время как option почти невозможно. selectmenu - это экспериментальный контролл формы, который должен решить проблемы кастомизации select в будущем. Open UI — это группа разработчиков и дизайнеров, которые решили решить именно эту проблему, а заодно попутно и другие. Для этого они создают спецификации того, как эти элементы управления должны быть реализованы на веб-платформе, а также требования доступности, которые они должны учитывать. Реализация selectmenu началась относительно недавно и он еще не доступен во всех популярных браузерах, а пока только в тех, что на основе Chromium (если включить флаг «Экспериментальные функции веб-платформы» на странице). Работа выполняется командой Microsoft Edge в сотрудничестве с командой Google Chrome. Примеры реализации кастомизированного select с помощью selectmenu, а так же более подробно о новинке читайте в статье. Ссылка на статью #css

Версия 100 Chrome и Firefox достигнут версии 100 через несколько месяцев и это может привести к поломке сайтов... Но не пугайтесь, не к поломке всех сайтов! А только тех, которые полагаются на идентификацию версии браузера для выполнения какой-то бизнес-логики. User-Agent (UA) — это строка, которую браузеры отправляют в заголовках HTTP, чтобы серверы могли идентифицировать браузер. Она также доступна через JavaScript с помощью navigator.userAgent. Проблема в том, что при передаче этой строки учитывается номер версии, состоящий из двух цифр, а поскольку намечается релиз версий, состоящих их трех цифр, это может стать некой проблемой. Более подробно о данной сложности и какие решения были предусмотрены для ее решения читайте в статье. Ссылка на статью #статьи

Стоковые фото Делимся ресурсом с бесплатными стоковыми фотографиями для личного и коммерческого использования. Все изображения с высоким разрешением и распределены по категориям на определенные тематики. Ссылка на ресурс #дизайн

npm команды В статье идет речь о малоизвестных командах npm list и npm config list. Например, npm list позволяет просмотреть все установленные зависимости в проекте. В каких случаях они могут быть полезны читайте подробно в статье. Ссылка на статью #nodejs

localStorage в React localStorage — это объект веб-хранилища, который позволяет сайтам и приложениям хранить данные в виде пары ключ-значение в браузере. Например, иногда его используют для хранения текущей установленной цветовой темы. Каждый раз, когда пользователь ее переключает, данные сохраняются в хранилище браузера. Из этой статьи вы узнаете, как использовать localStorage с хуками React. Ссылка на статью #react

30 seconds of knowledge Изучаете фронтенд-разработку? Один из необычных и весьма полезных способов изучения - использовать расширение для Google Chrome "30 seconds of knowledge". Каждый раз открывая новую пустую вкладку, на экране будет появляться полезная информация, связанная с выбранными вами темами. Нужно выбрать какие языки программирования вам интересны в параметрах расширения. И каждый день вы будете изучать что-то новое.  Это гениально! Ссылка на официальный сайт #инструменты

Паттерны проектирования Бесплатная книга! В этой книге вы узнаете о паттернах проектирования, производительности и шаблонах рендеринга для создания высококачественных веб-приложений с использованием современного JavaScript и React. Ссылка на книгу #js

Анимация фона Автор статьи назвал данную анимацию "эффект поднятия шторы". Это эффект при котором фон меняется от темного к светлому при прокрутке, а содержимое сверху также меняется от светлого к темному. Звучит, возможно не совсем понятно на словах, поэтому лучше всего посмотреть пример реализации. А еще лучше повторить его, в статье все рассказано пошагово. Ссылка на статью #css

CSS Overview - это вкладка в Chrome Dev Tools, на которой отображается сводная информация о текущей веб-странице. В данной вкладке вы можете посмотреть: - все используемые цвета - используемые шрифты и их все размеры - список неактивных CSS стилей (с указанием на каком элементе и какое именно свойство не работает)  и другое. О том, как найти эту вкладку и как ей пользоваться читайте в статье. Ссылка на статью #статьи

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

Сайты на Node.js Из этой статьи вы узнаете, какие популярные приложения написаны на Node.js и почему компания выбрала эту платформу. Маленький спойлер:  Среди них Netflix, Medium, а также другие не менее известные. Список остальных приложений смотрите в статье. Ссылка на статью #nodejs

Эволюция Vue Vue 3 - актуальная версия данного фрэймворка на текущий момент. Более двух лет происходили изменения в экосистеме Vue и за это время многое изменилось. Например, новый Composition API позволил создавать более компонуемый код, а также проложил путь для более легкого внедрения TypeScript. Об этом обновлении и других читайте подробнее в статье. Ссылка на статью #vue

Grid шпаргалка CSS Grid является неотъемлемой частью набора знаний любого фронтенд разработчика, поскольку данный модуль достаточно упрощает процесс верстки. И если вы им не владеете, то советуем начать изучение. Как раз по этому поводу, делимся интерактивной шпаргалкой по гридам. Ссылка на шпаргалку #инструменты

ES2022 Новые спецификации ECMAScript выпускаются каждый год, начиная с 2015 года. И этот год не исключение! Что нового стоит ожидать? В этой статье рассмотрено 8 нововведений, которые, как ожидается, будут выпущены в середине 2022 года. Маленький спойлер: ES2022 позволит разработчикам использовать await за пределами асинхронной функции. Читать статью #javascript

Flexulator - это инструмент, помогающий визуализировать работу флексов. Ведь возможно не всем до конца понятно, как работают свойства flex-grow, flex-shrink и flex-basis. В данном инструменте наглядно можно посмотреть как производятся расчеты. Ссылка на сайт #css

Сode Pen Где искать вдохновение frontend-разработчику? На сайте Code Pen! 100 самых популярных пенов по версии пользователей. Среди них можно найти очень крутые работы, например: - интересные экраны загрузки; - эффект порванной фотографии; - различные 3D анимации; и многое другое! Ссылка на список пенов #статьи

Иконки Ресурсов с бесплатными иконками много не бывает... Поэтому сохраняйте в закладки! Примечательно, что на данном сайте можно менять толщину начертания и размер одновременно для всех иконок в библиотеке. А это означает, что не нужно тратить много времени, чтобы подбирать похожие по стилям иконки. Ссылка на сайт #дизайн

Depcheck По мере того, как проект разрастается, он превращается в беспорядок. Особенно если в нем задействовано много разработчиков. Частично данный беспорядок заключается в наличии неиспользуемых импортов, файлов, кусков кода и зависимостей. Depcheck — это инструмент для анализа зависимостей в проекте, чтобы определить какие пакеты не используются или устарели. В статье показано, как пользоваться данным инструментом. Избавьтесь от всего ненужного и держите код чистым! Читать статью #nodejs

VeeValidate Как легко и быстро создать валидацию для формы? Воспользоваться готовым решением! VeeValidate - фрэймворк для валидации форм в приложениях на Vue. Хочется похвалить документацию! Все доступно и понятно. В документации версии v4.x для Vue3 есть обучающая статья по использованию данного фрэймворка. Ссылка на официальный сайт #vue

Grommet - библиотека компонентов React, которая обеспечивает доступность, модульность, адаптивность и кроссбраузерность. Библиотека включает в себя такие компоненты, как: - header - footer - меню - табы - аккордион  - различные контроллы и многое другое. Все они созданы с учетом спецификации W3C и легко настраиваются в соответствии с потребностями вашего проекта. Статья поможет вам разобраться, как работать с данной библиотекой. Ссылка на статью о Grommet Ссылка на официальный сайт #инструменты