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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Говорят, что этот показатель также будет часть сигнала рейтинга 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. Идеальный инструмент для тех, кто любит вести рабочий процесс в терминале.
Добавление заметки в Терминал с Эврикой

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

Ваш адрес email не будет опубликован.