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

Новый 2018 год уже здесь. Если мы посмотрим на прогресс в веб-разработке пять лет назад, он полностью отличается от того, что мы имеем сегодня. Сегодня существуют новые методы, инструменты и даже совершенно новая парадигма, которая меняет способ создания веб-сайтов сегодня – и VirtualDOM является одним из них.

DOM (Document Object Model) – это древовидная модель, которая определяет структуру веб-сайта. Выбор, обход и управление DOM может быть очень дорогой операцией и может снизить производительность рендеринга вашего сайта.

Однако в этом посте мы не будем обсуждать, как работает VirtualDOM, вместо этого, наряду с другими инструментами, мы рассмотрим библиотеки, которые позволят вам сразу же внедрить VirtualDOM. Давайте проверим их.
MaquetteJS
Реализация VirtualDOM, которая позволяет вам создавать гибкий пользовательский интерфейс, который постоянно обновляется с данными вокруг него. Это чистый JavaScript и unopiniated библиотека, таким образом, можно использовать ее вместе с синтетическим языком, таким как CoffeeScript, TypeScript и JSX. Отличная альтернативная библиотека для React.js; MaquetteJS намного меньше по размеру (всего 3 КБ), сравнительно.
ReDOM
Это одна из моих любимых библиотек VirtualDOM, так как ее легко подобрать, просто взглянув на синтаксис. Всего 2KbВы можете создать веб-страницу с быстрым рендерингом или пользовательский компонент HTML. Библиотека состоит из двух основных функций el, для создания или управления элементом, и монтирования, чтобы добавить его к выбранному элементу. Вы можете загрузить его в браузере и на стороне сервера с помощью NodeJS.
ReactiveJS
Библиотека шаблонов для создания интерактивного веб-приложения. Изначально созданный для TheGuardian, ReactiveJS предназначен для работы в браузерах и на мобильных устройствах; так что вы можете зависеть от его надежности. ReactiveJS также поставляется со многими функциями, необходимыми для современного веб-приложения, такими как Scoped CSS, пользовательские компоненты, SVG и анимация.
RiotJS
RitoJS – приятная в работе и гораздо более легкая в освоении библиотека для начинающих, так как она позволяет определять пользовательский компонент с элементом HTML и атрибутами HTML, в то время как предыдущие библиотеки заставляют использовать чистый синтаксис JavaScript.

RiotJS совместим с окружением Node.js или в браузерах и может быть отличной альтернативой Vue.js, учитывая сходства.
HyperHTML
hyperHTMLКак следует из названия, характеристики производительности при рендеринге и управлении DOM. Вы можете использовать его для создания пользовательских элементов и веб-компонентов. Он работает так же просто, как jQuery, в котором его можно использовать в браузере, загрузив скрипт из CDN и получив доступ к hyperHTML. Нет необходимости сложного механическая обработка,
Mithril
Как ни крути, но Mithril – мощная библиотека JavaScript. Помимо VirutalDOM и компонентов, Mithril также оснащен Routing и XHR, с помощью которых вы можете создавать одностраничные веб-приложения, не полагаясь на другие библиотеки. Бенчмарк показывает, что он превосходит некоторые популярные библиотеки, такие как Vue.js, React.js и Angular.
SlimJS
SlimJS – это библиотека JavaScript для создания пользовательских веб-компонентов с использованием собственного API веб-компонентов. Поскольку он встроен в собственный компонент браузера, SlimJS оснащен Polyfill, который скрывает API в браузере, который еще не поддерживает его. Это отличная основа, если вы предпочитаете следовать нативному образу жизни.
VSVG
Хотя он имеет синтаксис, похожий на HTML, SVG – это еще одна разновидность зверя со своими особенностями. Эта библиотека, как следует из названия, позволит вам создавать и управлять SVG на лету.
EmotionSH
EmotionSH – это фреймворк CSS-in-JS, который может вам понадобиться при создании сайта с VirtualDOM. Это позволяет вам предоставлять только биты CSS, необходимые на вашем сайте, и вы можете динамически обновлять стиль, не соглашаясь с именами и спецификой класса, так как стиль ограничен только тем компонентом, к которому он применяется.
Реактивный стартовый комплект
Если вы следили за интернетом в последние пару лет, вы найдете React (почти) везде. Это 5-краткий видеокурс, знакомящий с React. Если вы хотите идти в ногу с отраслью, это может быть правильным местом для начала.
элементы
Elements – это набор компонентов iOS для создания прототипа приложения iOS в Sketch. Он создан людьми от Sketch и обновлен с помощью интерфейса iPhone X.
Modaal
Modaal – это библиотека JavaScript, созданная для обеспечения доступности. Было подтверждено, что «Поддержка AAAG 2.0 уровня AA» является (я думаю) наиболее доступной «Модальная» библиотека сегодня. Это легкий, совместимый с jQuery, и может быть использован для изображений, видео и даже Instagram. Кроме того, это этот короткий курс от Google поможет вам начать работу с Web Accessibility и почему это важно.
WordPressify
Пакет NPM, который позволяет вам запустить среду разработки WordPress за несколько минут. Все это настроено с помощью современных инструментов, таких как Gulp, LiveReload, PostCSS, Babel, поэтому вы можете сосредоточиться на разработке своего проекта, а не на настройке конфигурации.
Ландо
Lando – это также удобный инструмент для быстрого и удобного ускорения среды разработки, очень похожий на WordPressify, о котором мы только что упоминали выше. Но вместо Node.js он использует преимущества легковесной технологии контейнеризации Docker и предлагает большую гибкость с точки зрения стека, который вы хотели бы использовать в своей разработке.

Например, вы можете указать версию PHP, включить XDebug и установить Composer.
WP-Docklines
WP-Docklines – это коллекция изображений, которую вы можете использовать в качестве базовой для выполнения непрерывной интеграции и доставки тем и плагинов WordPress в таких сервисах, как Bitbucket, CircleCI и Gitlab. Каждое изображение связано с инструментами, обычно необходимыми при разработке WordPress, такими как PHP Code Sniffer, PHPUnit и WP-CLI.
WP-Locker
WP-Locker – это конфигурация Docker Compose, позволяющая вращать среду разработки WordPress за считанные минуты. Он настроен с использованием Apache, MySQL и phpMyAdmin и, поскольку он расширяет образ WP-Docklines, он также выполняет дополнительные инструменты над изображением «из коробки».

Просто введите bin / start, чтобы настроить его, настройте локальный и установите плагины и темы, которые вы настроили в файле конфигурации.
Docusaurus
Еще одна инициатива с открытым исходным кодом от Facebook, Docusaurus – это инструмент для создания веб-сайта документации вашего проекта. Созданный с помощью React и Markdown, вы можете легко составлять документацию, поддерживать ее и даже создавать блог для своего сайта и публиковать его на Github Pages.
VSCode Yo
Yeoman – это пакет узлов, который позволяет быстро запустить проект, выбрав готовые строительные леса, подходящие для ваших проектов. Если вы используете код Visual Studio, этот плагин еще больше упростит рабочий процесс запуска, поскольку он позволяет вам запускать команду «Yo» прямо из окна кода Visual Studio.
BluebirdJS
JavaScript-библиотека, которая позволяет вам использовать Promise, await, async сегодня во всех браузерах; сказал, что это даже работает в Netscape. Promise – одна из самых сильных сторон в последних спецификациях JavaScript, которая сделает ваш код более легким, читаемым и легко поддерживаемым.
Красивее
Prettier – это инструмент для форматирования вашего кода в соответствии со стандартами кодирования языка. Он будет переписывать ваш код с нуля, следуя правилу, позволяющему вам и вашей команде работать более продуктивно, а не обсуждать стили написания кода.