Свежие ресурсы для веб-дизайнеров и разработчиков (сентябрь 2022 г.)

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

вебк

WebC — это Библиотека JavaScript, которая делает разработку веб-компонента более управляемой.. Вы можете не только определить веб-компонент, но и расширить его до базовой HTML-разметки с соглашениями веб-стандартов и сгенерировать ограниченный CSS HTML.

Он совместим с SSR (рендеринг на стороне сервера), поэтому вы можете использовать его с некоторыми популярными Фреймворки SSR, такие как Next.js и Gatsby.

LightningCSS

Lightning CSS — это больше, чем просто минимизатор CSS. Это также позволяет вам писать стандартные CSS следующего поколения, такие как вложенность, пользовательские медиа-запросы, логические свойства и некоторые новые селекторы.

Он автоматически преобразует эти функции в совместимый синтаксис на основе целевых конфигураций вашего браузера. В общем, это как Babel, только для CSS.

ПочемуFrame

Инструмент, который позволяет вам развиваться изолированно. Вы можете разработать каждый компонент, который живет сам по себе, упрощая оптимизацию и инкапсуляцию проблем, не затрагивая другие компоненты. Это быстрый, гибкий и совместимый со многими интерфейсными фреймворками включая Svelte, Vue.js, React.js, Solid.js и React.js.

JSONCrack

JSON делает данные переносимыми между разными языками программирования. Чтение JSON также легко, если только там не слишком много. Вот тут-то и появляется JSONCrack.

JSONCrack — это онлайн-редактор, позволяющий отображать структуру данных в виде графика, что, в свою очередь, облегчит сканирование и получение данных. Кроме того, вы также можете настроить макет графика, поделиться им и даже вставить его на свой сайт.

Маэстро

Маэстро – это программное обеспечение, позволяющее протестировать ваше мобильное приложение. Это означает, что вы можете выполнять тестовые утверждения и взаимодействия, такие как нажатие на кнопку кнопка «Назад», прокрутка, пролистывание и даже создание скриншота. Обязательный инструмент, установленный для каждого мобильного разработчика.

Движение

бесплатный и веб-приложение с открытым исходным кодом для создания и редактирования анимированной графики для разработчиков. Это как Adobe After Effects с простотой использования Canva. Он имеет такие функции, как ключевые кадры, маскирование, фильтры и многое другое. Вы можете скачать анимацию в формате WebM, GIF или просто изображение.

Шкала типа жидкости

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

Учебный лагерь

новый официальный источник для изучения Laravel. Это новое руководство предназначено для того, чтобы помочь вам быстрее приступить к созданию работающего приложения с использованием современных методов в Laravel. Вы можете выберите свой путь между использованием Vue.js или React.js. В целом, я думаю, что это отличный источник как для новичков, так и для опытных Laravel.

StarbeamJS

Библиотека JavaScript для добавления «реактивности» вашему приложению. Эта Реактивность делает вашу приложения более динамичные и более плавные. Это независимая библиотека, которая работает с любой внешней средой, такой как React.js, Vue.js и Svelte.

Корсет

Corset — это библиотека JavaScript для добавить реактивность в ваше приложение без сложности. Он работает аналогично jQuery в том смысле, что напрямую связывается с HTML и обеспечивает выразительный синтаксис, подобный CSS. Поскольку он работает только с HTML, его легко выбрать, он быстрый и легко интегрируется с вашим существующим приложением.

StorySet

Коллекция бесплатные иллюстрации, которые вы можете использовать на своем сайте. Он содержит иллюстрации на различные темы. Каждая иллюстрация настраивается. Вы можете настроить фон и цвет, скрыть некоторые свойства и загрузить его как SVG или PNG.

Иконмонстр

Иконмонстр — это коллекция из более чем 4000 иконок. Еще один хороший источник для веб-дизайнеров. Каждая икона имеет уникальный дизайн. Он также поставляется в нескольких вариантах и ​​доступен в форматах SVG и PNG. Независимо от потребности приложения, я уверен, что вы найдете нужные значки.

ШрифтШар

Удобный онлайн-инструмент для генерировать красивые пары шрифтов. Это бесплатно как для личного, так и для коммерческого использования. Мы можем выбрать тип шрифта, например, без засечек, рукописный или рукописный. Это даже облегчает, где вы можете сгенерировать пару шрифтов по «ощущению» или «личности» шрифта.

Твердый тост

Библиотека React.js, которая позволяет вам добавить красивые всплывающие уведомления. Он легкий, всего 4kb. Вы можете настроить содержимое, значки, цвета и атрибуты. Он совместим с SSR и предоставляет Promise API.

Мошеннический API

Бесплатный онлайн-инструмент, который предоставляет API для извлечения фиктивных данных для тестирования вашего приложения.. Вы можете найти несколько типов данных, таких как животные, страны, валюты и т. д.

Реагировать

Библиотека для React.js, которая предоставляет набор анимационных эффектов, таких как анимация Bounce, Fade, Flip, Roll, Rotate и Slide.. Вы используете его, чтобы добавить раскрывающую анимацию к вашим компонентам, когда они входят в область просмотра браузера, когда пользователи прокручивают страницу.

OpenMoji

Бесплатная библиотека эмодзи с открытым исходным кодом. Это содержит более 4000 эмодзи. Он поддерживает стандартные стандарты Emoji, а также пользовательские. Он также полностью поддерживает шкалу оттенков кожи Фитцпатрика и несколько комбинаций оттенков кожи.

Идеальная библиотека, если вы хотите предоставить выбор эмодзи на вашем сайте или ваше приложение..

Упрощенная веб-разработка

А блог, в котором освещаются некоторые обновления в области веб-разработки. Он охватывает различные темы, включая CSS, JavaScript, HTML, React.js, Node.js и другие. Это хороший источник, чтобы идти в ногу с веб-разработкой, не чувствуя себя перегруженным.

Дизайн-система для Figma

Коллекция Design System, сделанная в Figma из ряда популярных имен и фреймворков в Интернете. Вы можете найти дизайн-систему Uber, Atlassian и даже Goldman Sachs. Это такая скрытая жемчужина, которую каждый дизайнер должен добавить в закладку.

Шаблон ТС

Сопоставление с образцом это метод программирования, который позволяет составлять сложные условия или структуры данных в более коротком и более читаемом выражении. Эта техника реализована в Haskell, Rust, Swift, Elixir и других языках. С помощью этой библиотеки вы можете применить ту же технику в TypeScript.