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.


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.



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.



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.



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.



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.



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.



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.



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.



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.


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 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.



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.



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.



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.



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-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.



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.


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


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.



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.


Add Comment