![](https://habrastorage.org/getpro/habr/upload_files/831/cb7/fc1/831cb7fc1e0dbc736ba13e617f56863c.jpg)
К старту курса по Frontend-разработке делимся переводом подборки различных инструментов: от генератора CSS, который рассчитывает пространство так, что брейкпоинты (контрольные точки) заменяются переменными, до редактора анимации прямо в браузере, а также средства масштабирования для отзывчивости в SVG и даже визуализатора специфичности CSS, который пригодится при анализе больших таблиц стилей. Мы структурировали и, где это было возможно, расширили оригинал, добавив информацию и примеры из репозиториев и официальных описаний инструментов.
Анимация
Spirit
Spirit Studio — браузерный инструмент анимации, помогающий дизайнерам и разработчикам создавать свои анимации и управлять ими в режиме реального времени.
Meanderer
Маленькая библиотека JavaScript для создания отзывчивых траекторий анимации. Перед началом работы автор Meanderer рекомендует воспользоваться SVGOMG.
![](https://habrastorage.org/getpro/habr/upload_files/bc5/cc0/ef8/bc5cc0ef88e912ec6307495d04d1f262.jpeg)
Установка
https://unpkg.com/meanderer@0.0.1/dist/meanderer{.min}.js
npm i meanderer
Применение
// Our path string
const PATH = "M32.074 13.446s-2.706-2.965-4.158-4.349c-2.003-1.908-3.941-3.942-6.268-5.437C19.33..."
// The bounds of our path
const WIDTH = 65
const HEIGHT = 30
// Generate a responsive path
const responsivePath = new Meanderer({
path: PATH,
width: WIDTH,
height: HEIGHT
})
// Generate a new scaled path when required. Here we are using ResizeObserver
// with a container that uses viewport units
const setPath = () => {
const scaledPath = responsivePath.generatePath(
CONTAINER.offsetWidth,
CONTAINER.offsetHeight
)
// Here, we apply the path to an element through a CSS variable.
// And then an element picks up on that. We could apply the motion path straight to the element though.
CONTAINER.style.setProperty("--path", `"${scaledPath}"`)
}
// Set up our Resize Observer that will get the ball rolling
const SizeObserver = new ResizeObserver(setPath)
// Observe! Done!
SizeObserver.observe(CONTAINER)
Transition.css
Переходы на CSS.
Установка
npm i transition-style
-
Импорт в CSS:
@import "transition-style";
-
Импорт в JS:
import 'transition-style';
https://unpkg.com/transition-style
Применение
<div transition-style="in:circle:bottom-right">
A transitioned IN element
</div>
<div transition-style="out:wipe:down">
A transitioned OUT element
</div>
Если при использовании атрибутов ничего не происходит, скорее всего,
transition.css
не загрузился.
Инструменты
CSS Scan
CSS Scan Pro сильно упрощает просмотр ваших любимых веб-сайтов. Наведите курсор на любой элемент и мгновенно получите его CSS, цвета, ресурсы, анимацию, шрифт и размеры. Скопируйте, экспортируйте или доработайте их с помощью интуитивно понятного редактора CSS.
![](https://habrastorage.org/getpro/habr/upload_files/b2a/25d/c02/b2a25dc02f466df969d4b9fba2b95442.jpeg)
Utopia
Utopia проявляется, когда дизайнеры и разработчики разделяют системный подход к растягиванию элементов в отзывчивом дизайне. Вместо того чтобы писать код для нескольких произвольных брейкпоинтов (контрольных точек), возможно создать дизайн, где элементы масштабируются плавно и пропорционально.
![](https://habrastorage.org/getpro/habr/upload_files/408/de7/911/408de7911d096fcc4e50e5b9c393ce09.jpg)
Визуализация специфичности CSS
Краткий визуальный обзор селекторов и их особенностей, выявляющий потенциально проблемные паттерны CSS, который особенно полезен при анализе больших и сложных таблиц стилей.
![](https://habrastorage.org/getpro/habr/upload_files/805/b48/385/805b48385c918624d9ce3bb2fbd3bb6c.jpeg)
Parsel
Парсер CSS-селекторов в два килобайта.
![](https://habrastorage.org/getpro/habr/upload_files/74c/079/407/74c079407fcb410bd6deabd3d01bc20b.jpeg)
Optimizt
Оптимизация изображений через терминал/командную строку от Игоря Адаменко.
![](https://habrastorage.org/getpro/habr/upload_files/61c/782/d60/61c782d604d4639f8e76c97ab2e67026.jpeg)
Установка
npm i -g @funboxteam/optimizt
Применение
optimizt path/to/picture.jpg
Параметры командной строки
-
--avif — AVIF вместо сжатия.
-
--webp — WebP вместо сжатия.
-
--force — создать AVIF и WebP, даже если размер выходного файла увеличивается или файл существует.
-
-L, --lossless — оптимизировать без потерь, только WebP и Avif.
-
-V, --verbose — показывать дополнительную информацию, например пропущенные файлы.
-
-V, --version — версия инструмента.
-
-h, --help — помощь.
Примеры
# one image optimization
optimizt path/to/picture.jpg
# list of images optimization losslessly
optimizt --lossless path/to/picture.jpg path/to/another/picture.png
# recursive AVIF creation in the passed directory
optimizt --avif path/to/directory
# recursive WebP creation in the passed directory
optimizt --webp path/to/directory
# recursive JPEG optimization in the current directory
find . -iname \*.jpg -exec optimizt {} +
Генераторы
Glassmorphism
Glassmorphism — единое название эстетики матового стекла. У неё на самом деле множество названий в зависимости от компании, поэтому хотелось создать общую площадку, чтобы дизайнерам и разработчикам легче и быстрее было находить соответствующие ресурсы. Эффект основан на размытии фона с прозрачностью и для демонстрации глубины и контекста интерфейса использует уложенные слои.
![](https://habrastorage.org/getpro/habr/upload_files/ed4/31a/42a/ed431a42a359b674226812041e131299.jpeg)
Фигурные разделители
Настраиваемые фигурные разделители: волны, кривые, стрелки и т. д., на HTML, SVG и CSS.
![](https://habrastorage.org/getpro/habr/upload_files/f27/027/578/f27027578b6488da88336fac0097b7ab.jpeg)
Работа с цветами
Sorted Colors
Поиск цвета, при котором связанные именованные цвета отображаются вместе.
![](https://habrastorage.org/getpro/habr/upload_files/61a/49e/79e/61a49e79e88026684a611f30b8ec28b4.jpeg)
Happy Hues
Палитры отобранных цветов, которые будут уместны в определённом контексте.
![](https://habrastorage.org/getpro/habr/upload_files/472/c70/6d8/472c706d85169a71e63a6b87e233fc0f.jpeg)
Коллекции
MoreToggles.css
Библиотека на чистом CSS со множеством приятных глазу переключателей.
![](https://habrastorage.org/getpro/habr/upload_files/325/4b4/d80/3254b4d8079e084ac989abf154c4f70e.jpeg)
Stylestage
Современная витрина CSS, оформленная открытым сообществом.
![](https://habrastorage.org/getpro/habr/upload_files/3ff/43a/a1c/3ff43aa1c3277715092ce4674925e9ec.jpeg)
Фреймворки
Charts.css
CSS-фреймворк с открытым исходным кодом для визуализации данных помогает разработчикам интерфейсов превращать данные в красивые диаграммы и графики при помощи простых классов CSS.
![](https://habrastorage.org/getpro/habr/upload_files/9f8/eed/bc3/9f8eedbc3c87d050a750022ed0ae8ae1.jpeg)
Установка
https://www.jsdelivr.com/package/npm/charts.css
npm install charts.css
yarn add charts.css
Применение
Данные структурируются с помощью семантических тегов HTML и стилизуются классами CSS, которые изменяют отображаемое конечному пользователю визуальное представление.
<table class="charts-css [ column ] [ show-primary-axis show-4-secondary-axes ] [ data-spacing-4 reverse-data ]">
<caption> Front End Developer Salary </caption>
<thead>
<tr>
<th scope="col"> Year </th>
<th scope="col"> Income </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> 2016 </th>
<td style="--size: calc( 40 / 100 );"> $ 40K </td>
</tr>
<tr>
<th scope="row"> 2017 </th>
<td style="--size: calc( 60 / 100 );"> $ 60K </td>
</tr>
<tr>
<th scope="row"> 2018 </th>
<td style="--size: calc( 75 / 100 );"> $ 75K </td>
</tr>
<tr>
<th scope="row"> 2019 </th>
<td style="--size: calc( 90 / 100 );"> $ 90K </td>
</tr>
<tr>
<th scope="row"> 2020 </th>
<td style="--size: calc( 100 / 100 );"> $ 100K <br> </td>
</tr>
</tbody>
</table>
Фреймворк предлагает разработчикам гибкость. Вы сами выбираете, какие компоненты отображать и как их стилизовать. Каждый компонент для настройки стиля предлагает несколько классов и переменных CSS, ключевая особенность которого — возможность настраивать всё с помощью базового CSS: разработчики фронтенда могут выбрать любой элемент HTML и настроить его. Эта философия делает фреймворк гибким, простым и интересным в использовании.
Halfmoon
Интерфейсный фреймворк со встроенным тёмным режимом и полной настраиваемостью с использованием переменных CSS; отлично подходит для панелей мониторинга и инструментов.
![](https://habrastorage.org/getpro/habr/upload_files/e68/85a/1ab/e6885a1abe466bdb0397b8ad3a84419a.jpg)
reseter.css
Футуристическая альтернатива Normalize.css
и CSS Resets.
![](https://habrastorage.org/getpro/habr/upload_files/345/68e/014/34568e014370dc6bdbb235e7a6b814d0.jpeg)
Таблица сравнения с другими подобными инструментами:
![](https://habrastorage.org/getpro/habr/upload_files/c3f/7b9/a80/c3f7b9a8009b1a6fb69b2a837ca75c14.png)
Если вы хотите попробовать эти инструменты на практике, то можете присмотреться к нашему курсу по Frontend-разработке, где вы освоите эту профессию с нуля или прокачаете свои навыки в ней. Также вы можете узнать, как изменить карьеру или выйти на новый уровень в других направлениях:
![](https://habrastorage.org/getpro/habr/upload_files/706/edd/623/706edd6236f65cb038c1572a4ad65e71.png)
Data Science и Machine Learning
Python, веб-разработка
Мобильная разработка
Java и C#
От основ — в глубину
А также:
Комментариев нет:
Отправить комментарий