Красота дороже денег

У хорошего охотника всегда есть любимое ружьё, а у фронтенд-разработчика набор профессиональных инструментов. В этом месяце мы выбрали для вас полезные фреймворки и утилиты. Надеемся, что вам будет интересно взглянуть на них и возможно попробовать в действии. Приятного чтения!

Bulma: the modern CSS framework

Простота и максимум контроля за визуальной частью — вот чего ждут от CSS-фреймворка разработчики. Появление Flexbox значительно упростило работу с макетами. Правильное размещение элементов на странице стало обыденностью. Нет предела совершенству — встал вполне логичный вопрос о необходимости упрощения и ускорения этого процесса. Bulma был разработан как раз для этих целей.

Что он вообще из себя представляет? Основанный на Flexbox, этот CSS-фреймворк в итоге формирует единственный файл bulma.css который будет отвечать за визуальное отображение. Может показаться, что это подход «всё или ничего», но и тут Bulma удивляет. Это модульный CSS-фреймворк, что позволяет задействовать метаязык SASS и подгружать только необходимые элементы.

Наверное в этом фреймворке полно JS-кода? Нет, это скорее похоже на слой стиля, не зависящий от среды исполнения. Bulma чем-то напоминает известный подход plug-and-prayplay. Вовсе не факт, что он станет вашим любимым фреймворком, но однозначно сократит время работы над проектом.

Nut.js как инструмент автоматизации UI

Раньше разработчикам приходилось тестировать веб-приложения вручную. Это отнимало много времени и сил. На данный момент такое тестирование почти всегда выполняется специальными инструментами. Сегодня посмотрим на Nut.js, что с его помощью можно делать. Главная функция Nut.js — эмулировать действия реального пользователя. Ориентируясь с помощью библиотеки машинного зрения, OpenCV, инструмент позволяет управлять устройствами ввода по заранее запрограммированному сценарию.

Вариантов применения много. Можно выполнять поиск определенных изображений на экране (например, кнопки) и настраивать ответную реакцию. Система будет многократно сканировать экран и сравнивать искомое изображение с фактическим. При необходимости можно настроить таймауты и прерывать поиск. Такие функции позволяют создавать достаточно сложные сценарии тестирования, с упором на скорость фактического отображения элементов.

Rome Formatter переписали на Rust

«‎Все дороги ведут в Рим»‎ — эта средневековая поговорка до сих пор символизирует некий центр притяжения, точку концентрации. Rome Formatter прекрасный помощник для создания хорошего кода. Универсальный комбайн из инструмента для автоформатирования кода, линтера и упаковщика. Так что если вы регулярно сталкиваетесь с написанием кода на JavaScript, TypeScript, JSON, HTML, Markdown и CSS, то Rome Formatter вам пригодится.

Даже если вы уже используете утилиты автоформатирования кода, такие как Prettier, то Rome Formatter порадует вас скоростью работы. Для этого его не так давно переписали на Rust. По оценкам разработчиков разница в форматировании одного и того же кода с помощью Rome Formatter в 9-12 раз быстрее, чем в Prettier. Если брать в расчет, что авторы проекта хотят добиться совместимости с Prettier и задокументировать любые целенаправленные отклонения, то процесс миграции будет достаточно простым.

Astro 1.0 Beta уже здесь

Одностраничные приложения сейчас везде — заказ еды, соцсети, электронная почта. Логично появилось много фреймворков, упрощающих их создание. Топ-3 — Vue.js, Angular, React подходят для создания SPA. Но это вовсе не означает, что им нет альтернативы. Astro как раз представляет собой иной взгляд на создание одностраничников. Особое внимание уделили минимальному использованию JS, концентрируясь на генерации статического HTML. JavaScript тут используется только для интерактивности.

Здорово то, что, используя Astro, вы не ограничиваетесь одним фреймворком. Можно смешивать Astro с тем же Vue, React или Svelte (о нём мы уже рассказывали в одном из прошлых дайджестов. Совместное использование позволит взять необходимые компоненты из разных фреймворков, а Astro дополнительно позаботится о том, чтобы сократить количество скриптов. Если компонент полностью статичен, то будет сразу преобразован в статичный HTML. На данный момент доступна версия 1.0 Beta.

Вариативные шрифты в реальной жизни

Привет, квартет! Только вместо реального музыкального коллектива, мы имеем в виду четыре наиболее используемых начертания: Regular, Italic, Bold и Bold Italic. Они есть почти в любом шаблоне и используются как нечто само собой разумеющееся. Но почему бы не попробовать что-то новое, например, вариативные шрифты? Зачем тащить за собой каждый из шрифтов по отдельности, когда можно сэкономить и взять всего лишь один, но вариативный?

Очевидно, что из одного такого шрифта можно создать множество вариаций, готовых удовлетворить даже самого придирчивого заказчика. Его можно адаптировать почти в любой макет, он будет там хорошо смотреться. Это всего лишь один файл — значит меньше кода. Но не без недостатков. Иногда файл такого шрифта может весить под 200 Кб, так что надо проявить внимательность при выборе и учитывать возможную просадку производительности. Если захочется взглянуть, как это выглядит — вам сюда.

 

Обучение

Конкурсы для разработчиков

Митапы

Вакансии