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


На момент написания этой статьи Google только что завершил web.dev живой вебинар, Трехдневное мероприятие, посвященное новейшим разработкам, производительности и инструментам для создания веб-сайтов.

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

Основные веб-виталы
Обзор последних показателей эффективности Google для Интернета под названием Core Web Vitals. Основные веб-показатели жизненно важных функций, такие как Крупнейшая содержательная краска (LCP), Первая задержка ввода (FID), и Сдвиг накопительного макета (CLS) которые вращаются вокруг пользовательского опыта сайта, а не только скорость загрузки.

Говорят, что этот показатель также будет часть сигнала рейтинга Google так что вы можете не отставать.
Основная презентация Web VitalsGithub CLI
CLI для использования Github. Это означает, что у вас могут быть команды для использования Github в терминале, чтобы делать то, что вы обычно делаете на сайте Github, такие как создание запроса на извлечение (PR), проверка статуса PR, список и просмотр проблем в репозитории и многое другое. Больше.

Инструмент Github CLI был бы очень удобен и мог бы упростить рабочие процессы для многих разработчиков.
Github CLI анимированная команда на главной страницеTellina
Сайт, где вы можете искать в коллекции удобных команд для некоторых общих задач в терминале на естественном языке. Вы можете найти от простой команды, такой как создание каталога и перечисление файлов в каталоге, до сложных команд, таких как показ третьей строки каждого файла в каталоге, который содержит нечетное количество строк.
Пример теллинового списка команд bashОтчет по инструментам Bundlers
Комплексное сравнение возможностей и возможностей упаковщиков: Webpack, Свернуть, Пакет, и Browserify, Список может помочь определить, какой упаковщик будет соответствовать вашим потребностям.
Сравнение таблицы инструментов BundlerQuickly.js
Vite.js – это Evan You – новая инициатива создателя Vue.js, направленная на то, чтобы упростить среду веб-разработки и инструментальные средства без чрезмерных манипуляций с конфигурацией.

Vite.js поставляется с некоторыми возможностями прямо из коробки, в том числе Горячая замена модуля, Поддержка TypeScript, Препроцессоры PostCSS и CSS и HTTPS / 2.
ViteJSReakit
Фреймворк для создания богатых веб-приложений с React.js, Помимо быстрой и настраиваемой, Reackit строго следует WAI-ARIA спецификация, которая делает его доступным прямо из коробки и отличается от аналогичных структур.
Reakit UI домашняя страницарасширенный
Espanso – это бесплатное кроссплатформенное приложение для расширения текста. Это позволяет быстрее набирать код или текст, помещая его в ярлык текста. Вы также можете запустить собственный скрипт с ярлыком вместо простого вывода простого текста.

Это делает приложение более мощным для опытных пользователей, таких как разработчики. Это может быть хорошей альтернативой приложению TextExpander.
расширенныйТестовая площадка
Простая игровая площадка в Интернете, где можно получить тестирование объектной модели документов (DOM). Игровая площадка обеспечивает прямую обратную связь при добавлении и удалении определенных элементов, меток или меток арии из элементов.

Это позволяет быстро и легко начать тестирование перед его внедрением в набор тестов вашего проекта.
Пример настройки тестированияWordPress Lando Dev
Предварительно сконфигурированная среда разработки WordPress, основанная на Страна, Разработанный командой WordPress из Google, вы можете использовать его для разработки ядра, плагинов и тем.
Страница WordPress Lando Dev на Githubсор-окр
Кроме того, вы можете использовать этот пакет NPM. Созданная командой WordPress и многочисленными участниками, wp-env предоставляет простой способ раскрутить среду локального хоста для разработки ядра, плагинов или тем с помощью Docker.
репозиторий wp-env в NPMВеб-истории для WordPress
Web Stories является частью инициативы Google AMP, направленной на предоставление красивого и более увлекательного опыта веб-анимации и интерактивного взаимодействия. Это позволяет вам помещать изображения, аудио, видео, GIF-файлы и анимацию.

Вы можете найти некоторые живые примеры веб-историй от таких крупных издателей, как США сегодня, Проводные, и CNN,
Страница хранилища WordPressDev на GithubРасширение UberSuggest Chrome
UberSuggest – один из популярных инструментов для исследования ключевых слов. Это всеобъемлющее и самое главное, это бесплатно.

Вы можете установить это расширение в Chrome, чтобы получить немедленный вывод от UberSuggest в Google SERP, Это позволяет вам оптимизировать рабочий процесс при проведении исследования ключевых слов.
Инструмент UberSuggest в действии в поисковой выдаче GoogleGithub VSCode Theme
Официальная тема Github от Github. Он предоставляет два варианта тем: Темный и Светлый. Хотя вы, возможно, слышали, что многие веб-разработчики выбирают темную тему для своего редактора кода, светлая тема от Github – одна из самых привлекательных.
Предварительный просмотр темных и светлых тем Github VSCodeСтраницы TLDR
TLDR – это служебная программа, предназначенная для создания традиционной страницы справочника (Man Page) инструментов командной строки, обычно доступных в системе UNIX, таких как stat, sed и ping friendly. Он предоставляет более простой дескриптор и наиболее логичный порядок параметров вместе с примером использования.
TLDR CLI в терминалеVSCodium
VSCodium – это инициативное сообщество для создания Visual Studio Code без телеметрии и отслеживания битов, которые отправляют использование и личные данные в Microsoft. Это кроссплатформенный; Вы можете использовать его в Windows, MacOS и Linux.
Предварительный просмотр приложения VSCodium в macOSЧакра UI
Коллекция простой, модульной и доступной библиотеки компонентов, которая обеспечивает основу для создания приложений React. Пользовательский интерфейс Chakra легко настраивается, вы можете настроить размер шрифта, семейство шрифтов, точки останова и все будет настроено соответствующим образом.
Чакра UI код пример создания коробкиСвободный интерфейс
Свободный пользовательский интерфейс – это попытка консолидировать согласованность дизайна для всех продуктов. Одна из их инициатив – это коллекция компонентов на основе React, которые вы можете использовать для создания своего собственного веб-приложения, используя Свободный язык дизайна,
Свободный пользовательский интерфейс компонента календаряTabler
Шаблон готовых компонентов для создания админ-панели с красивым пользовательским интерфейсом. Код Tabler – HTML5 и CSS3, тщательно разработанный для соответствия Проверка W3Cи отлично работает в браузерах Chrome, Firefox, Safari, Opera, Edge и мобильных браузерах.
Пример панели с аналитикойРасширенный новый файл
Инструмент CLI, который добавляет усовершенствования в создании каталогов и файлов, которые не могут быть просто достигнуты встроенной командой, такой как mkdir. При этом вы можете создать каталог рекурсивно и несколько каталогов или файлов с помощью одной командной строки. Довольно удобно.
Файловое дерево в Терминалеэврика
Eureka – это инструмент CLI для написания заметок прямо из терминала с редактором по вашему выбору, таким как напор или Nano, а затем автоматически сохраните его в Git. Идеальный инструмент для тех, кто любит вести рабочий процесс в терминале.
Добавление заметки в Терминал с Эврикой


0 Comments

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