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

В этом месяце в индустрии высоких технологий происходит много событий; от Docker, обновляющего свой бизнес и планы, приобретение известных предприятий WordPress, Web3, NFT, а также новые ресурсы и обновления продолжают поступать в HTML, CSS и JavaScript. Вот почему мы разместили несколько из них, чтобы держать вас в курсе.

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

Theather.js

Theatre.js — это библиотека JavaScript для написания анимации. Он поставляется с богатым пользовательским интерфейсом под названием «Studio», что делает его более интуитивно понятным по сравнению с аналогичными библиотеками. Он также многофункциональный; вы можете использовать его для анимации HTML, SVG, WebGL или использовать его с библиотекой 2D / 3D графики JavaScript, такой как Three.js или Pixie.js.

Theather.js
Отплыл

Бесплатный интерфейс командной строки (CLI) с открытым исходным кодом для управления вашими сайтами WordPress в DigitalOcean. Интерфейс командной строки позволяет эффективно управлять вашим сайтом, включая серверы подготовки.

Вы также можете развернуть сайт, сделать резервную копию сайта и выполнить откат и даже управлять сертификатом DNS и SSL с помощью Давайте зашифровать. Отличный удобный инструмент для опытных пользователей WordPress и SysOps.

Отплыл
Мета-теги

Веб-приложение для предварительного просмотра вашего сайта в Google и на нескольких сайтах социальных сетей, таких как Facebook, Twitter, Pinterest и Slack. Вы можете использовать этот инструмент для управления заголовком, описанием и изображением вашего сайта, чтобы убедиться, что они подходят и оптимизированы, прежде чем размещать их на этих сайтах.

Мета-теги
Гудини

«Houdini» делает CSS более мощным. Он работает аналогично тому, как настраиваемый элемент работает в HTML; он позволяет веб-разработчикам определять настраиваемые свойства CSS с их собственными настраиваемыми функциями.

Таким образом, вы можете создать что-то вроде —cool-text-decoration, которое предоставит более богатое пользовательское оформление текста, чем то, что предоставляет браузер.

Гудини
Швы

Библиотека JavaScript, позволяющая писать CSS для вашего приложения прямо в файлах JavaScript; также известный как CSS-in-JS. Библиотека оптимизировала CSS по мере его компиляции.

Он предоставляет только тот CSS, который необходим компоненту приложения, и поддерживает рендеринг на стороне сервера. Кроме того, Stitches не зависит от фреймворка, поэтому вы можете использовать его в любом из избранных, будь то React.js, Vue.js или Svelte.

Швы
Unplugin.js

Unplugin — это библиотека JavaScript, цель которой — предоставить единую систему для создания плагинов. для инструментов сборки нравиться Webpack, Свернуть, а также Быстро. Если вы разработчик, который хочет поддерживать несколько из этих инструментов сборки, возможно, вы захотите изучить эту библиотеку, которая может сэкономить ваше время и ускорить разработку.

Швы
React Render Tracker

Иногда рендеринг компонента React.js может быть довольно дорогостоящим для обработки браузером и может повлиять на производительность приложения. Вы можете использовать этот инструмент, чтобы узнать, сколько раз компонент отображается в браузере.

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

React Render Tracker
Отличный альтернативный текст

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

Но как сделать отличный альтернативный текст? Джейк Арчибалед из Google Developer Advocate даст вам несколько советов.

Большой
Шейпер

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

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

Шейпер
BeeKeeperStudio

Настольное приложение для подключения и управления базой данных. Он поддерживает несколько типов баз данных, включая MySQL, Postgres, SQLite и SQL Server. С помощью этого приложения вы можете удобно выполнять несколько операций с базой данных, таких как создание или удаление базы данных, запуск SQL-запроса и многое другое.

BeeKeeperStudio доступен для macOS, Windows и некоторых дистрибутивов Linux. Это открытый исходный код и бесплатный; и всегда будет бесплатно.

BeeKeeperStudio
Администратор филамента

Filament — это стек TALL (Tailwind, Alpine.js, Laravel и Livewire) для создания приложения Admin Planel. Он предварительно упакован с функциями, которые вам понадобятся для создания работающего стандартного приложения, такого как аутентификация пользователей, авторизация и некоторые утилиты которые упрощают разработку и повышают производительность.

Администратор филамента
Motion.dev

Библиотека анимации JavaScript с упором на производительность и простоту. Он использует API анимации что позволяет ему оставаться маленьким (3,1 КБ), обеспечивая при этом встроенные функции анимации, такие как преобразование, переходы и ключевые кадры из коробки.

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

Motion.dev
Cal.com

Недавно изменив свое название на Cal.com, Calendso — это инструмент с открытым исходным кодом для размещения и управления вашим собственным приложением-календарем. В целом это хорошая альтернатива Google Calendar или Calendly, особенно если он должен иметь полный контроль над данными и настраивать, как вам нравится, в соответствии с требованиями вашего бизнеса или разработки.

Cal.com
Цезий

Кроссбраузерная библиотека JavaScript для создания 3D или 2D объектов. Он использует WebGL для аппаратного ускорения графики. Созданная для обеспечения динамической точности и визуального качества, Cesium — идеальная библиотека для создания интерактивных 3D-моделей, таких как глобус, городской пейзаж, местность и других динамических визуализаций.

Цезий
Зона сброса

Это еще одна классная библиотека JavaScript, о которой стоит упомянуть. Dropzone.js превращает любой HTML-элемент в «зону перетаскивания». Вы можете перетащить на него файл.

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

Зона сброса
КСВ

React Hook, который улучшает, а также упрощает получение данных для веб-приложения. В отличие от традиционной выборки данных, SWR покрывает общие требования для современного приложения с React.

Он не только быстрый, легкий и многоразовый, но также совместим как с SSR (рендеринг на стороне сервера), так и с SSG (генератор на стороне сервера), React Suspense и React Native. Эта библиотека предоставит вам все необходимое, поэтому вы можете сосредоточиться на разработке лучшего пользовательского интерфейса для своего приложения.

КСВ
Время работы

Самостоятельное приложение для мониторинга сайта. UptimeKuma имеет приятный интерактивный интерфейс и поддерживает ряд протоколов, таких как базовый HTTP (S), TCP, Ping или через записи DNS.

Вы можете настроить его для отправки уведомлений по ряду каналов, включая электронную почту, Slack, Discord, Telegram и т. Д. UptimeKuma — хорошая альтернатива коммерческому предложению, например Uptime Robot; это открытый исходный код, и вы можете добавить столько сайтов, которые хотите отслеживать, без дополнительных затрат в долларах.

Время работы
Допэфолио

Шаблон и шаблон для быстрого создания онлайн-портфолио. Он построен только на HTML, CSS (Sass) и JavaScript. Он предварительно настроен, поэтому все, что вам нужно сделать, это заполнить HTML-страницу, настроить стили с помощью Sass и запустить команду NPM для компиляции стилей. Он быстрый, отзывчивый, и, поскольку это всего лишь статический сайт, вы можете легко развернуть его на хостинге статических сайтов, например Netlify или Cloudflare Pages.

Допэфолио
север

Тщательно подобранная цветовая палитра направлена ​​на создание четких, элегантных дизайнов в соответствии с минималистичным и плоским стилем. Эта палитра была переведена на раскрашивание некоторых популярных приложений для разработчиков, таких как Atom, Coda, JetBrains, SublimeText, Terminal и даже Slack. Отличная инициатива по объединению ваших повседневных приложений в единую цветовую схему.

север

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

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

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