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

Новий 2018 рік тут. Якщо ми подивимося на прогрес у веб-розробці п'ять років тому, він абсолютно відрізняється від того, що ми маємо сьогодні. Сьогодні є нові методів, інструментів і навіть зовсім нової парадигми що змінює спосіб створення веб-сайтів сьогодні - і VirtualDOM є одним з них.

DOM (об'єктна модель документа) - це модель дерева, яка визначає структуру веб-сайту. Вибір, обхід і маніпулювання DOM можуть бути дуже дорогими і можливо перешкоджати ефективності візуалізації вашого сайту.

Однак у цьому пості ми не будемо обговорювати, як працює VirtualDOM, а разом з іншими інструментами ми розглянемо бібліотеки, які дозволяють реалізувати VirtualDOM зразу. Давайте перевіримо їх.

MaquetteJS

An впровадження VirtualDOM що дозволяє створювати текучий користувальницький інтерфейс, який постійно оновлюється з даними навколо нього. Це чистий JavaScript і невизначений бібліотеки, таким чином, це можливо використовуйте його разом із синтетичною мовою, такою як CoffeeScript, TypeScript і JSX. Велика альтернативна бібліотека для React.js; MaquetteJS значно менший за розміром (тільки 3кб) порівняно.

ReDOM

Це одна з моїх улюблених бібліотек VirtualDOM, адже її легко підібрати, просто подивившись на синтаксис. Тільки з 2 Кб, Ви можете створити веб-сторінку з швидким рендерингом або спеціальний компонент HTML. Бібліотека складається дві основні функції ел, створювати або керувати елементом, і mount , щоб додати його до вибраного елемента. Ви можете завантажити його в браузері і на стороні сервера з NodeJS.

ReactiveJS

Шаблони Бібліотека інтерфейсу для створення високоінтерактивних веб-додатків. Спочатку побудований для TheGuardian, ReactiveJS побудований для роботи в браузерах і мобільних пристроях; так що ви можете залежати від її надійності. ReactiveJS також поставляється з багато функцій, необхідних для сучасних веб-додатків, такі як CSS, Scoped, Custom Components, SVG і анімація.

RiotJS

RitoJS - це приємно працювати і набагато простіше навчатися бібліотеці для початківців дозволяє визначати користувальницький компонент з елементом HTML і атрибути HTML, а попередні бібліотеки змусять використовувати чистий синтаксис JavaScript.

RiotJS сумісний з середовищем Node.js або в браузерах, і може бути чудова альтернатива Vue.js, що надається подібним чином.

HyperHTML

hyperHTML, як випливає з назви, Особливості виконання при візуалізації та маніпулюванні DOM. Його можна використовувати для створення користувацького елемента та веб-компонента. Він працює так само просто, як jQuery, в якому його можна використовувати в браузері завантаження скрипту з CDN і отримання доступу до hyperHTML. Немає потреби в складних інструменти.

Міфріл

Як здорово, як це звучить, Mithril є потужна бібліотека JavaScript. Крім VirutalDOM і компонентів, Mithril також оснащений маршрутизацією і XHR, з якими Ви можете створювати односторінкове веб-додаток, не покладаючись на будь-яку іншу бібліотеку. Тестовий показник показує, що він перевершує деякі популярні бібліотеки, такі як Vue.js, React.js і Angular.

SlimJS

SlimJS - це бібліотека JavaScript для створювати власний веб-компонент за допомогою власного API веб-компонента. Так як він побудований навколо рідного компонента браузера SlimJS оснащений Polyfill який підказує API у веб-переглядачі, який ще не підтримує його. Це прекрасний фреймворк, якщо ви віддаєте перевагу рідному шляху.

VSVG

Незважаючи на те, що він має подібний синтаксис до HTML, SVG - це ще один вид звіра зі своїми власними примхами. Ця бібліотека, як випливає з назви, буде дозволяють створювати і керувати SVG на льоту.

ЕмоціїSH

ЕмоціяSH Структура CSS-in-JS, яка може знадобитися при створенні веб-сайту з VirtualDOM. Це дозволяє вам доставляти тільки біти CSS, необхідні на вашому сайті, і ви можете динамічно оновлювати стиль без переслідування іменуванням класу і специфікою, оскільки стиль обмежується лише компонентом, до якого він застосований.

Реалізуйте стартовий комплект

Якщо ви стежили за Інтернетом протягом останніх кількох років, ви знайдете React (майже) кожен де. Це 5 коротко-відео-курс з впровадження React. Якщо ви хочете йти в ногу з промисловістю, це може бути правильне місце для початку роботи.

Елементи

Елементи - це колекція Компоненти iOS для створення прототипу програми iOS у Sketch. Він побудований людьми за допомогою Sketch і оновлено за допомогою iPhone X UI.

Modaal

Modaal - це бібліотека JavaScript, створена з урахуванням доступності. Це було перевірено на “Підтримка WCAG 2.0 Level AA” що (я думаю) найбільше доступним “Модальний” бібліотека сьогодні. Його Легкий, JQuery сумісний, і може бути використаний для зображень, відео і навіть Instagram. Крім того, цей короткий курс від Google допоможе вам розпочати роботу з Web Accessibility і чому це важливо.

WordPressify

Пакет NPM, що дозволяє отримати доступ до середовища розробки WordPress за кілька хвилин. Все налаштовано сучасні інструменти, такі як Gulp, LiveReload, PostCSS, Babel так що ви можете зосередитися на розробці вашого проекту, а не налаштування.

Lando

Lando також є зручним інструментом для швидкого і легкого розгортання середовища розробки, що дуже подобається WordPressify що ми вже згадували вище. Але замість Node.js, потрібно Перевага Docker - це легка контейнерізація технологія і пропонує більшу гнучкість в термінах стека, який ви хочете використовувати у своєму розробці.

Наприклад, ви можете вкажіть версію PHP, увімкніть XDebug і встановіть Композитор.

WP-Docklines

WP-Docklines - це колекції зображень, які можна використовувати як базову для виконання безперервної інтеграції та доставки для ваших тем WordPress і pluins в таких службах, як Bitbucket, CircleCI і Gitlab. Кожне зображення в комплекті інструменти, які зазвичай потрібні при розробці WordPress такі як PHP Code Sniffer, PHPUnit і WP-CLI.

WP-Locker

WP-Locker є Docker Скомпонуйте конфігурацію для обертання середовища розробки WordPress за лічені хвилини. це є встановлюється з Apache, MySQL і phpMyAdmin і оскільки він розширює зображення WP-Docklines, він також виконує додаткові інструменти на зображенні поза вікном.

Просто тип bin / start щоб дозволити йому, налаштуйте localhost та встановлення плагінів і теми, які ви налаштували в конфігураційному файлі.

Docusaurus

Ще одна відкрита ініціатива від Facebook, Docusaurus є інструментом для створення веб-сайту документації вашого проекту. Побудований з React і Markdown, ви можете легко складати документацію, підтримувати її і навіть створювати блог для свого сайту, і опублікувати його на сторінках Github.

VSCode Yo

Yeoman - це пакет вузлів, який дозволяє швидко запускати проект вибираючи готові риштування, які відповідають вашим проектам. Якщо ви використовуєте код Visual Studio, цей плагін спростить процес запуску ще більше, оскільки це дозволить вам запустіть “Йо” з вікна Visual Studio Code.

BluebirdJS

Бібліотека JavaScript, яка дозволяє використовувати Обіцянка, чекають, async сьогодні у всіх браузерах; сказав, що він навіть працює в Netscape. Обіцянка є однією з найсильніших точок у останніх специфікаціях JavaScript, які б зробіть свій код компактнішим, зручнішим для читання та легко обслуговується.

Швидше

Краще - це інструмент відформатуйте код, щоб він відповідав стандарту кодування мови. Вона перепише ваш код з scracth наступного правила, що дозволяє вам і вашій команді бути більш продуктивні, ніж обговорення стилів написання коду.