Свежие ресурсы для веб-дизайнеров и разработчиков (апрель 2018 года)
В этом месяце мы видели несколько объявлений от известных имен в технологии. Например, Apple открыла новую систему баз данных, Google выпустила новый инструмент для измерения скорости вашего сайта на мобильных устройствах и Github с бесплатным курсом, чтобы вы начали работать с Git, Github и программированием в целом..
Также в сегодняшнем посте я тоже есть ряд новых инструментов, которые в настоящее время находятся на подъеме. Давайте перейдем к тому, что у нас есть в списке.
VuePress
Новый инструмент от создателя Vue, VuePress является генератор статических сайтов разработан с учетом Vue.js. Он генерирует и предварительно отображает статический HTML для каждой страницы, и работает как SPA (одностраничное приложение). Он поставляется с некоторыми готовыми функциями, включая возможность добавления идентификатора Google Analytics, поиска, следующей и предыдущей навигации, боковой панели и PWA.

IMG-2
Библиотека JavaScript, которая представляет пользовательский элемент, IMG-2
. Новый элемент добавляет ряд оптимизаций, которые не идут со стандартным IMG
элемент, улучшение того, как изображение загружается для пользователей. С помощью пользовательского элемента изображение будет предварительно кэшировано, оно также ленивая нагрузка изображения и подача будут поступать из кэша только тогда, когда изображения поступают в окно просмотра пользователя. Проверьте демо.

Tabler
Элегантная панель инструментов / панель администратора на основе Bootstrap 4. На панели инструментов представлены готовые компоненты, такие как диаграммы, формы, галереи, таблица цен и приятный коллекция пользовательских иконок. Отличная отправная точка, позволяющая разработчикам быстро создавать панель администратора. Проверьте демо!

DayJS
DayJS Библиотека JavaScript для форматирования даты и времени. Более того, DayJS имеет API-интерфейсы, аналогичные Moment.js, но его размер составляет всего 2 КБ. Учитывая это, это может быть отличная альтернатива Moment.js, если вы хотите более легкую библиотеку, сохраняйте знакомство с тем, что вы уже знали.

UnifiedArchive
Библиотека PHP для работы со сжатыми файлами, UnifiedArchive поддерживает широкий спектр форматов, включая RAR, Zip, Gzip, Tar, и много других типов сжатия. С помощью этой библиотеки вы можете архивировать и извлекать файлы или каталоги. Это обеспечивает несколько API для манипулирования файлами после того, как он был извлечен из архива. UnifiedArchive доступен в виде пакета Composer.

Github Learning Lab
Github только что объявил бесплатный курс, охватывающий в первую очередь Git в Github. На данный момент есть 5 курсов, где вы можете выучить несколько полезных вещей, таких как как использовать Github разместить ваши коды, как использовать страницы Github получить бесплатный сайт или блог для вашего проекта и как управлять конфликтами слияния, которые случаются, когда вы работаете со многими разработчиками над проектом.

WordPress UnitTest DOM Parser
Хороший совет от Такаюки Мияучи на тестирование DOMElement при выполнении UnitTest в приложениях WordPress. Я лично нашел это действительно полезным; надеюсь, вы найдете то же самое.

Popmotion
Библиотека JavaScript для плавной анимации в Интернете, “Popmotion” предоставляет API под названием физика, который позволяет создавать практически реалистичные анимационные эффекты. Это неопознанное; библиотека просто выводит значения на основе конкретного набора конфигурации. Это позволяет применять эти выходные данные для анимации любого носителя, включая CSS, SVG, Three.js и даже React.js..

Driver.js
Библиотека JavaScript, которая позволяет вам “привод” фокусирование пользователя на странице. Это особенно полезно, если вы хотите представить конкретные функции или направить их к конкретным задачам на странице. Driver.js просто Размер 4 КБ, настраиваемый и удобный для клавиатуры.

Заменить анимированный GIF на видео
GIF есть везде, после того, как вы вернулись. Но проблема GIF в том, что он обычно очень большой. Это трата пропускной способности, но качество графики часто ужасно. это руководство от Google показывает, как “видео” может заменить GIF для отображения анимированной графики.

Текстовая маска
Библиотека JavaScript для преобразовать текст, который требует специального форматирования например, номер телефона, валюта или номер кредитной карты. Когда пользователь печатает текст, он автоматически преобразуется в соответствующее форматирование, улучшая пользовательский опыт. TextMask может использоваться с React, Vue или просто старым JavaScript.

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

VueNut
VueNut делает его компаньоном при создании веб-приложения с помощью Vue.js и Vuex. проще исследовать состояние хранимых данных и позволяет легко манипулировать данными во время разработки. Отличная вещь!

FoundationDB
Недавно Apple сделала FoundationDB открытым исходным кодом в Github. Это система базы данных пар ключ-значение Это обещает масштабируемость и производительность. Здорово, что крупные технологические компании начинают посвящать открытому исходному коду некоторые свои продукты.

книжки
StoryBooks - это инструмент для построить компонент React изолированно. Он предоставляет пользовательский интерфейс в браузере, позволяя просматривать различные состояния каждого компонента, а также проверить компоненты.

GhostText
Расширение браузера, которое будет синхронизировать то, что вы пишете в браузере, с вашим текстовым редактором или наоборот. Я нашел это в конечном счете полезным, если вы хотите иметь возможность писать на веб-сайте с удобством и возможностями вашего редактора кода. GhostText доступен для Chrome, Firefox и Opera.

Coala
Коала это CLI предоставляет интерфейс для написания кода и исправления кода независимо от используемых языков. Вы можете использовать Coala в редакторе кода, интегрировать его с CI (Continuous Integration) и настроить его с помощью синтаксиса конфигурации в .coafile
. Coala поддерживает множество языков, таких как CSS, JavaScript, PHP, и вы можете найти больше в этом каталоге.

ReactStrap
ReactStrap представляет собой набор компонентов Bootstrap 4, преобразованных в повторно используемые компоненты React. Если вы хотите модернизировать свой старый сайт на основе Bootstrap, вы можете захотеть изучить эту библиотеку..

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

PicoJS
Библиотека JavaScript, которая позволяет распознавать лица. Работает с фото или со встроенной камеры. Это действительно удивительно, как веб-технологии развиваются в течение последних нескольких лет.
