Fresh Resources for Web Designers and Developers (January 2018)

The new year 2018 is here. If we look at the progress in web development five years ago, it’s totally different from what we have today. Today there are new methods, tools, and even a whole new paradigm that changes the way we build websites today – and VirtualDOM is one of them.

DOM (Document Object Model) is a tree model that defines how a website is structured. Selecting, traversing, and manipulating the DOM could be a very expensive opreration and may hamper your site’s rendering performance.

However, in this post we won’t be discussing how VirtualDOM works, instead, along with the other tools, we’ll look into libraries that allow you to implement VirtualDOM right away. Let’s check them out.

MaquetteJS

An implementation of VirtualDOM that allows you to build fluid user-interface that keeps updated with the data around it. It’s a pure JavaScript and unopiniated library thus it’s possible to use it along with a synthetic language such as CoffeeScript, TypeScript, and JSX. A great alternative library to React.js; MaquetteJS is much smaller in size (only 3kb) comparably.

ReDOM

This is one of my favourite VirtualDOM libraries, as it easy to pick it up just by looking at the syntax. With just 2Kb, you can build a fast-rendering web page or custom HTML component. The library consists two primary functions el, to create or manipulate an element, and mount to add it to a selected element. You can load it in the browser and server-side with NodeJS.

ReactiveJS

A templating UI library to build highly interactive web application. Originally built for TheGuardian, ReactiveJS is built to work across browsers and mobile devices; so you can depend on its reliability. ReactiveJS also comes with many features needed for modern web application right out-of-the-box, such as Scoped CSS, Custom Components, SVG, and animation.

RiotJS

RitoJS is a pleasant to work with and much easier to learn library for beginners as it allows defining a custom component with HTML element and the HTML attributes while the previous libraries will force to use pure JavaScript syntax.

RiotJS is compatible to Node.js environement or in the browsers, and could be a great alternative to Vue.js given the similarties.

HyperHTML

hyperHTML, as the name implies, features performance when rendering and manipulating DOM. You can use it to create Custom Element and Web Component. It works as easy as jQuery in which it can be used in the browser by loading the script from the CDN and accessing the hyperHTML. No need of complicated tooling.

Mithril

As cool as it sound, Mithril is a powerful JavaScript library. Aside from the VirutalDOM and Components, Mithril is also equipped with Routing and XHR with which you can build single-page web application without relying on any other library. Benchmark shows that it outperforms some popular libraries such as Vue.js, React.js and Angular.

SlimJS

SlimJS is a JavaScript library to build custom web component using the native Web Component API. Since it’s built surrounding the native browser component SlimJS is equipped with a Polyfill which shims the API in browser that does not support it yet. It’s a great framework if you prefer to adopt the native way.

VSVG

While it has similar syntax to HTML, SVG is another kind of beast with its own quirks. This library, as the name suggests, will allow you to create and manipulate SVG on the fly.

EmotionSH

EmotionSH is CSS-in-JS framework that you might need when building website with VirtualDOM. This allows you to deliver only bits of CSS needed on your site and you can dynamically update the styling without being convulated with the class naming and specificity as the style is scopped to only the Component it is applied to.

React Starter Kit

If you’ve been following the web in the last couple of years, you’ll find React (almost) every where. This is a 5 short-video course introducing React. If you want to keep up with the industry, these might be the right place to get started.

Elements

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

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) the most accessible “Modal” library today. It’s lightweight, jQuery compatible, and can be used for images, videos, and even Instagram. Furthermore, this this short course from Google will help you get started with Web Accessibility and why it’s important.

WordPressify

An NPM package that allows you to get a WordPress development environement up and running in minutes. It’s all set up with modern tools like Gulp, LiveReload, PostCSS, Babel so you can focus on developing your project rather tuning-up configuration.

Lando

Lando is also a handy tool to spin up a development environment quickly and easily, much like to WordPressify that we’ve just mentioned above. But instead of Node.js, it takes advantage of Docker a lightweight containerization technology and it offers more flexibility in term of the stack you’d like to use in your development.

For example, you can specify the PHP version, enable XDebug, and install Composer.

WP-Docklines

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

WP-Locker

WP-Locker is Docker Compose configuration to spin a WordPress development environment in just minutes. It is set up with Apache, MySQL and phpMyAdmin and since it extends WP-Docklines image, it also carries out the extra tools on the image out-of-the-box.

Simply type bin/start to let it, configure the localhost and install plugins and themes that you have configure in the configuration file.

Docusaurus

Another open-source initiative from Facebook, Docusaurus is a tool to create a documentation website of your project. Built with React and Markdown, you can easily compose documentation, maintain it, and even creating a blog for your site, and publish it to Github Pages.

VSCode Yo

Yeoman is an Node Package that allows you to start up project quickly by selecting pre-made scaffolding that suit your projects. If you’re using Visual Studio Code, this plugin will streamline the start up workflow even further as it enables you to run the “Yo” command right from the Visual Studio Code window.

BluebirdJS

A JavaScript library that allows you to use Promise, await, async today in all browsers; said it even works in Netscape. Promise is one of the strongest point in the latest JavaScript specifications that would make your code leaner, readable, and easily maintainable.

Prettier

Prettier is a tool to format your code to conform with the coding standard of the language. It will rewrite your code from the scracth following the rule allowing you and your team be more productive instead of debating over code writing styles.