Пресни ресурси за уеб дизайнери и разработчици (януари 2018 г.)

Новата 2018 година е тук. Ако погледнем напредъка в уеб разработката преди пет години, то е напълно различно от това, което имаме днес. Днес има нови методи, инструменти и дори изцяло нова парадигма което променя начина, по който създаваме уебсайтове днес - и VirtualDOM е един от тях.

DOM (обектен модел на документа) е a дървовиден модел, който определя как е структуриран даден уебсайт. Избирането, преминаването и манипулирането на DOM може да бъде много скъпо и може възпрепятстват ефективността на визуализацията на сайта Ви.

Въпреки това, в този пост няма да обсъждаме как работи VirtualDOM, а заедно с другите инструменти ще разгледаме библиотеки, които ви позволяват да приложите VirtualDOM веднага. Нека ги проверим.

MaquetteJS

Една внедряване на VirtualDOM което ви позволява да изграждате флуиден потребителски интерфейс, който се актуализира с данните около него. Това е чист JavaScript и unopiniated библиотека по този начин е възможно използвайте го заедно със синтетичен език като CoffeeScript, TypeScript и JSX. Голяма алтернативна библиотека за React.js; MaquetteJS е много по-малък по размер (само 3 kb) сравнително.

ReDOM

Това е една от любимите ми библиотеки на VirtualDOM, тъй като е лесно да я вземем само като погледна синтаксиса. Само с 2Kb, можете да създадете уеб страница с бърза визуализация или персонализиран HTML компонент. Библиотеката се състои две основни функции ел, да създадете или манипулирате елемент, и планина , за да го добавите към избран елемент. Можете да я заредите в браузъра и сървърната страна с NodeJS.

ReactiveJS

Тамплиране UI библиотека за изграждане на високо интерактивно уеб приложение. Първоначално създаден за TheGuardian, ReactiveJS е изграден за работа в браузъри и мобилни устройства; така че можете да разчитате на нейната надеждност. ReactiveJS също идва с много функции, необходими за съвременното уеб приложение, като CSP, Scoped CSS, персонализирани компоненти, SVG и анимация.

RiotJS

RitoJS е приятна за работа и много по-лесна за научаване библиотека за начинаещи позволява задаване на потребителски компонент с HTML елемент и атрибутите на HTML, докато предишните библиотеки ще принудят да използват чист синтаксис на JavaScript.

RiotJS е съвместим с Node.js средата или в браузърите и може да бъде чудесна алтернатива на Vue.js, дадени на сходните.

HyperHTML

hyperHTML, както подсказва името, Характеристики на производителността при визуализиране и манипулиране на DOM. Можете да го използвате за създаване на персонализиран елемент и уеб компонент. Тя работи толкова лесно, колкото jQuery, в която може да се използва в браузъра от зареждане на скрипта от CDN и достъп до хиперХТМЛ. Няма нужда от сложно инструментална екипировка.

Mithril

Колкото и хладно да звучи, Mithril е a мощна JavaScript библиотека. Освен VirutalDOM и Components, Mithril е оборудван и с Routing и XHR, с които можете да изградите уеб приложение с една страница, без да разчитате на друга библиотека. Бенчмаркът показва, че той превъзхожда някои популярни библиотеки като Vue.js, React.js и Angular.

SlimJS

SlimJS е JavaScript библиотека към изграждане на персонализиран уеб компонент, използвайки родния уеб компонент API. Тъй като е построен около родния браузър, SlimJS е оборудван с a Polyfill който подправя API в браузъра, който все още не го поддържа. Това е страхотна рамка, ако предпочитате да възприемете родния начин.

VSVG

Докато има подобен синтаксис към HTML, SVG е друг вид звяр със собствени странности. Тази библиотека, както подсказва името, ще ви позволява да създавате и манипулирате SVG в движение.

EmotionSH

Емоцията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 също е удобен инструмент за бързо и лесно създаване на среда за разработка, която много харесва WordPressify което споменахме по-горе. Но вместо Node.js е необходимо предимство на Docker е лека контейнеризация технология и предлага по-голяма гъвкавост по отношение на стека, който искате да използвате в развитието си.

Например, можете посочете версията на PHP, активирайте XDebug и инсталирайте Composer.

WP-Docklines

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

WP-Locker

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

просто Тип бин / старт за да го оставите, конфигурирайте Localhost и инсталиране на приставки и теми, които сте конфигурирали в конфигурационния файл.

Docusaurus

Друга отворена инициатива от Facebook, Docusaurus е инструмент за създаване на уебсайт за документация на вашия проект. Създаден с React и Markdown, можете лесно да съставяте документация, да я поддържате и дори да създавате блог за вашия сайт и публикувайте го в Github Pages.

VSCode Yo

Yeoman е пакет от възли, който ви позволява бързо да стартирате проекта избор на предварително направени скелета, които отговарят на вашите проекти. Ако използвате Visual Studio Code, този плъгин ще усъвършенства работния процес на стартиране още повече, тъй като ви позволява пуснете “Йо” направо от прозореца на Visual Studio Code.

BluebirdJS

Библиотека на JavaScript, която позволява да използвате обещание, очаквам, асинхронен днес във всички браузъри; каза, че дори работи в Netscape. обещание е една от най-силните точки в последните спецификации на JavaScript, които биха могли направете кода по-икономичен, четлив и лесно поддържан.

По-хубава

По-красив е инструмент за форматирайте кода, за да съответства на стандарта за кодиране на езика. Той ще пренапише кода си от scracth следвайки правилото, което позволява на вас и вашия екип да бъде по-продуктивни, вместо да обсъждат стилове за писане на код.