Fresh Resource for Web Developers – Jan 2018

The new year 2018 is here. If we demeanour during a swell in web growth 5 years ago, it’s totally opposite from what we have today. Today there are new methods, tools, and even a whole new paradigm that changes a approach we build websites currently – and VirtualDOM is one of them.

DOM (Document Object Model) is a tree indication that defines how a website is structured. Selecting, traversing, and utilizing a DOM could be a really costly opreration and competence hamper your site’s digest performance.

However, in this post we won’t be deliberating how VirtualDOM works, instead, along with a other tools, we’ll demeanour into libraries that concede we to exercise VirtualDOM right away. Let’s check them out.

MaquetteJS

An implementation of VirtualDOM that allows we to build liquid user-interface that keeps updated with a information around it. It’s a pristine JavaScript and unopiniated library so it’s probable to use it along with a fake denunciation such as CoffeeScript, TypeScript, and JSX. A good choice library to React.js; MaquetteJS is many smaller in distance (only 3kb) comparably.

MaquetteJSMaquetteJS

ReDOM

This is one of my favourite VirtualDOM libraries, as it easy to collect it adult usually by looking during a syntax. With usually 2Kb, we can build a fast-rendering web page or tradition HTML component. The library consists two primary functions el, to emanate or manipulate an element, and mount to supplement it to a comparison element. You can bucket it in a browser and server-side with NodeJS.

ReDOMReDOM

ReactiveJS

A templating UI library to build rarely interactive web application. Originally built for TheGuardian, ReactiveJS is built to work opposite browsers and mobile devices; so we can count on a reliability. ReactiveJS also comes with many facilities indispensable for difficult web concentration right out-of-the-box, such as Scoped CSS, Custom Components, SVG, and animation.

ReactiveJSReactiveJS

RiotJS

RitoJS is a pleasing to work with and many easier to learn library for beginners as it allows defining a tradition member with HTML element and a HTML attributes while a prior libraries will force to use pristine JavaScript syntax.

RiotJS is concordant to Node.js environement or in a browsers, and could be a great choice to Vue.js given a similarties.

RiotJSRiotJS

HyperHTML

hyperHTML, as a name implies, features opening when digest and utilizing DOM. You can use it to emanate Custom Element and Web Component. It works as easy as jQuery in that it can be used in a browser by loading a book from a CDN and accessing a hyperHTML. No need of difficult tooling.

HyperHTMLHyperHTML

Mithril

As cold as it sound, Mithril is a powerful JavaScript library. Aside from a VirutalDOM and Components, Mithril is also versed with Routing and XHR with that you can build single-page web concentration but relying on any other library. Benchmark shows that it outperforms some renouned libraries such as Vue.js, React.js and Angular.

MithrilMithril

SlimJS

SlimJS is a JavaScript library to build tradition web member regulating a local Web Component API. Since it’s built surrounding a local browser member SlimJS is versed with a Polyfill that shims a API in browser that does not support it yet. It’s a good horizon if we cite to adopt a local way.

SlimJSSlimJS

VSVG

While it has identical syntax to HTML, SVG is another kind of savage with a possess quirks. This library, as a name suggests, will allow we to emanate and manipulate SVG on a fly.

VSVGVSVG

EmotionSH

EmotionSH is CSS-in-JS horizon that we competence need when building website with VirtualDOM. This allows we to broach usually pieces of CSS indispensable on your site and we can dynamically refurbish a styling but being convulated with a category fixing and specificity as a character is scopped to usually a Component it is practical to.

EmotionSHEmotionSH

React Starter Kit

If you’ve been following a web in a final integrate of years, you’ll find React (almost) each where. This is a 5 short-video march introducing React. If we wish to keep adult with a industry, these competence be a right place to get started.

React Starter KitReact Starter Kit

Elements

Elements is a collection of iOS components to emanate iOS app antecedent in Sketch. It’s built by a people by Sketch and been updated with iPhone X UI.

Elements

Modaal

Modaal is a JavaScript library built with accesibility in mind. It’s been verified for “WCAG 2.0 Level AA Support” that (I think) a many accessible “Modal” library today. It’s lightweight, jQuery compatible, and can be used for images, videos, and even Instagram. Furthermore, this this brief march from Google will assistance we get started with Web Accessibility and because it’s important.

ModaalModaal

WordPressify

An NPM package that allows we to get a WordPress growth environement adult and regulating in minutes. It’s all set adult with modern collection like Gulp, LiveReload, PostCSS, Babel so we can concentration on building your plan rather tuning-up configuration.

WordPressifyWordPressify

Lando

Lando is also a accessible apparatus to spin adult a growth sourroundings fast and easily, many like to WordPressify that we’ve usually mentioned above. But instead of Node.js, it takes advantage of Docker a lightweight containerization record and it offers some-more coherence in tenure of a smoke-stack you’d like to use in your development.

For example, we can specify a PHP version, capacitate XDebug, and implement Composer.

LandoLando

WP-Docklines

WP-Docklines is a collection of images that we can use as baseline to perform Continuous Integration and Delivery for your WordPress themes and pluins in services like Bitbucket, CircleCI, and Gitlab. Each picture is bundled with tools ordinarily indispensable when building WordPress such as PHP Code Sniffer, PHPUnit, and WP-CLI.

WP-DocklinesWP-Docklines

WP-Locker

WP-Locker is Docker Compose pattern to spin a WordPress growth sourroundings in usually minutes. It is set adult with Apache, MySQL and phpMyAdmin and given it extends WP-Docklines image, it also carries out a additional collection on a picture out-of-the-box.

Simply type bin/start to let it, configure a localhost and implement plugins and themes that we have configure in a pattern file.

WP-LockerWP-Locker

Docusaurus

Another open-source beginning from Facebook, Docusaurus is a apparatus to emanate a support website of your project. Built with React and Markdown, we can simply harmonise documentation, say it, and even formulating a blog for your site, and publish it to Github Pages.

DocusaurusDocusaurus

VSCode Yo

Yeoman is an Node Package that allows we to start adult plan fast by selecting pre-made scaffolding that fit your projects. If you’re regulating Visual Studio Code, this plugin will streamline a start adult workflow even serve as it enables we to run a “Yo” authority right from a Visual Studio Code window.

VSCode YoVSCode Yo

BluebirdJS

A JavaScript library that allows we to use Promise, await, async currently in all browsers; pronounced it even works in Netscape. Promise is one of a strongest indicate in a latest JavaScript specifications that would make your formula leaner, readable, and simply maintainable.

BluebirdJSBluebirdJS

Prettier

Prettier is a apparatus to format your formula to heed with a coding customary of a language. It will rewrite your formula from a scracth following a order permitting we and your group be more prolific instead of debating over formula essay styles.

PrettierPrettier

Add Comment