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

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

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

Генератор стекла пользовательского интерфейса

Элегантный пользовательский интерфейс возвращается. Теперь мы видим, что это неотъемлемая часть нового дизайна интерфейса в Windows и macOS. Благодаря последней функции CSS мы также можем адаптировать аналогичный интерфейс для веб-сайта, и этот инструмент упростит и ускорит его создание.

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

Генератор стекла пользовательского интерфейса
Тема VS Code Fortnite

Тема для Visual Studio Code, вдохновленная Fortnite. Он поставляется с некоторыми специальными эффектами, включая опцию Fortnite: Enable Legendary. Если вам нравится игра и вспышки во время кодирования, эта тема VSCode для вас.

Тема VS Code Fortnith
MakerStations

На этом сайте собраны настройки рабочего стола от различных профессионалов (дизайнеров, разработчиков, писателей и т. Д.). Мало того, что он представляет их для вдохновения, но и вникает в личность владельца и причины, стоящие за установкой.

Если в настоящее время вы ищете вдохновение для своей новой настольной установки, не ищите дальше. Вы обязательно найдете хорошие в MakerStations.

MakerStations
React.js ARIA

Коллекция функций React.js, которые помогают в создании доступных компонентов пользовательского интерфейса и систем дизайна для вашего веб-приложения.

Он разработан для обеспечения максимально возможного интерактивного взаимодействия для пользователей, независимо от того, используют ли они клавиатуру, мышь или вспомогательное устройство. Это отличная инициатива Adobe для улучшения Интернета.

React.js ARIA
Библиотека тестирования React Hooks

Хуки – это концепция в React.js для создания менее жестких компонентов, и мы можем создавать собственные хуки помимо тех, которые предоставляются встроенными.

Теперь, если вы столкнулись с ситуацией, когда вы хотите выполнить автоматический тест для пользовательского хука, эта библиотека вам пригодится. Он предоставляет шаблон для тестирования вашего пользовательского хука React.js так же близко, как когда он используется в реальном компоненте.

Библиотека тестирования React Hooks
Карта WiFi

Этот инструмент делает более удобным обмен учетными данными Wi-Fi с помощью QR-кода. Вам просто нужно ввести имя WiFi и пароль. Распечатайте и прикрепите где-нибудь в комнате.

карта ifi
Умами

Umami – это приложение с открытым исходным кодом для сбора аналитических данных. Его легко установить на собственный сервер или VPS с минимальными требованиями. Вам нужны только Node.js и MySQL (или PostgreSQL). Это отличное приложение, если вы ищете альтернативу Google Analytics, в которой вы владеете и контролируете все данные.

Умами
Подкаст CSS

Под управлением дуэта сторонников разработчиков Google, Уны Кравец и Адама Аргайл, вы так много узнаете о CSS; из практических советов, доступности, производительности и многого другого. Это один из лучших источников для изучения CSS и веб-разработки в целом.

Подкаст CSS
Fosscard

Discord становится все более популярным в качестве интерактивного инструмента общения для сообществ. Вы можете присоединиться к различным группам, включая группы для веб-разработки и программирования, для общения с сообществом, а также для голосовых или видеозвонков.

Однако Discord – это SaaS. Если вам нужен самостоятельный хостинг, где у вас будет больше контроля, Fosscard может быть хорошей альтернативой.

Fosscard
Чистый код PHP

Сборник советов по написанию PHP-кодов, которые можно читать, использовать повторно и, что самое главное, поддерживать. Это отличный ресурс, где вы можете узнать несколько практических советов; например, как лучше всего назвать переменные, как структурировать условный блок, как назвать функцию и аргументы, и многие другие.

Чистый код PHP
MiniCLI

Крошечная библиотека PHP для создания интерфейса командной строки (CLI). Он предоставляет базовую структуру для регистрации ваших пользовательских командных строк, а также вспомогательные и служебные функции для обработки пользовательского ввода и вывода. Отличный старт для создания командной строки на основе PHP.

MiniCLI
UniformCSS

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

UniformCSS
Генератор макетов

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

Генератор макетов
Fower

Методология CSS, ориентированная на полезность, становится все более популярной. Он предлагает гибкость для масштабирования как на небольших, так и на крупных веб-сайтах. Если вы пишете CSS-в-JS для вашего веб-приложения и опираясь на подход CSS, ориентированный на служебные программы, для создания стилей, вам может быть интересно попробовать эту библиотеку.

Fower не зависит от фреймворка, поэтому вы можете применять его в различных фреймворках, таких как React.js, Vue.js и Svelt, или в обычном JavaScript.

Fower
RTL WTF

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

RTL WTF
Notistack

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

Чтобы назвать несколько, вы можете установить максимальное количество уведомлений, предотвратить дублирование, не отображая уведомления с одним и тем же сообщением, и установить тип перехода.

RTL WTF
Копировать

Серверное приложение с открытым исходным кодом, которое вы можете использовать для запуска и управления резервным копированием на ваших собственных облачных серверах. Kopia также предоставляет хорошее настольное приложение, которое работает в Windows, macOS и Linux, где вы можете удобно управлять им, например, создавать снимок и восстанавливать снимок.

Копировать
Веб-компоненты DevTools

Веб-компонент позволяет создавать настраиваемые компоненты, которые браузер может понимать и отображать. Если вы столкнулись с необходимостью создания пользовательского веб-компонента, вам понадобится это расширение Chrome, которое позволяет отлаживать веб-компонент в браузере.

Веб-компоненты DevTools
Плавная типографика

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

Плавная типографика
MillionJS

Крошечная библиотека JavaScript (менее 1 КБ) для создания интерактивного пользовательского интерфейса для вашего веб-сайта. Он реализует Virtual DOM за кулисами и некоторые уникальные подходы, которые ускоряют рендеринг в браузере.

Я думаю, что это может быть хорошей альтернативой некоторым более устоявшимся фреймворкам, таким как React.js и Vue.js, особенно если вам просто нужно просто использовать виртуальную DOM.

MillionJS

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *