Fresh Resources for Web Designers and Developers (December 2017)

By Thoriq Firdaus. in Web Design. Updated on December 7, 2018.

“Headless CMS” is gaining much attention these days. In a nutshell, “headless CMS” does not deal with the front-end; the CMS only exposes the content usually in a form of RESTful API while the developers may use whatever they prefer to render the content. With the increasing popularity of this practice, new frameworks arise to set it up and running quickly.

So, in this round up, I’ve put together a few of these frameworks along with some other helpful tools that are worth checking out.

Headless WP Starter

This is a WordPress starter theme but unlike the others, this starter theme leverages the WP-API to get the content and then render it into a static HTML using Node and React making your website “headless”.

VueStoreFront

VueStoreFront is another “Headless CMS” framework. Built on top of Vue.js and Node, VueStoreFront and is designed for e-Commerce platforms like Magento, Prestashop, and Shopware through the APIs. It also incorporates PWA approach which allows the site to be usable offline.

GatsbyJS

Gatsby is a site static generator built with React.js. You can use CMSs with API like WordPress, Markdown, JSON to feed the content. Similarly it utilizes some recent technologies such Node, PWA, and React that allow it to load incredibly fast.

DustPress

DustPress is a WordPress starter theme with modern development approach. Leveraging the Dust.js template language, DustPress separates the HTML template layout from the PHP logic allowing developers to produce a much cleaner code. It also makes development faster, more maintainable and gives the theme a organized structure.

VSCode Icons

Visual Studio Code has quickly become one of the most popular code editors. It is lightweight, has plenty of plugins, and now it has selections of different icons. If you feel the default Visual Studio Code icon is boring, switch to any of these icons.

TailWindCSS

TailWindCSS is another CSS frameworks. But it differs from popular CSS framework like Bootstrap and Foundation in a way that it does not provide UI components. Instead, TailWindCSS comes with small pieces of CSS classes that allows you to compose your own UI.

Traefik

I was experimenting with Docker and was wondering how to route domain name to several different containers on a single machine. Then I found Traefik, a modern HTTP reverse proxy and load balancers. Aside of Docker, it also support other services such Kubernetes, Rancher, and Amazon Elastic Container.

CubeUI

Built on top of Vue.js, CubeUI is a fantastic UI component to build mobile apps. Consisting with a lot of components such as Button, Popup, TimePicker, Slide, and Checkbox. Each component is quipped with a TestUnit ensuring continous integration and also minimizing bug on each component.

Air

Air is minimal WordPress starter theme. Extending the _s, Air adds some additional components such as Slides, Sticky Navigation Bar, and WooCommerce-ready.

EmptyStates

EmptyStates is a collection of empty state pages on the web and mobile apps for inspiration. The empty state page is the kind of page that is often overlooked.

Shortcut Design

This website provides a collection of shortcuts of populars applications and tools used by developers and designers. Here you’ll find shortcuts for Sketch, Photoshop, InDesign, Sublime Text, WordPress, and many more to come. The list currently only contains shortcuts for macOS, but it would be great to see Windows shortcuts to also be added in.

Uppy

Uppy is a JavaScript frameworks to build a file upload interface. With Uppy, you can retrieve files, not only from local drive, but also from external storage service like Google Drive, Dropbox, Instagram, and other services. It’s lightweight, modular, and extendabled with custom plugins.

VuetifyJS

VuetifyJS is an initiative from John Leider to build Material Design around Vue.js. Google has similar initiative with MDL or Material Design Lite, but it does not seem to get enough traction in the community and the development seems to progress really slow in the last couple of months now. So if you’re looking for an alternative, VuetifyJS might be the right choice.

WP ULike

WP Ulike is a WordPress plugin to add “Like” to your content whether in the built-in WordPress post type, custom post types, and bbPress as well as BuddyPress. It also comes with some other cool features such Notification System, Analytics, and Widgets which make it one of the most compelling “Like” system for your WordPress site.

Vee Validate

Vee Validate is a JavaScript library to add input field with the validation built-in. It supports many type of inputs such as Email, Number, Dates, URL, IP address, etc.

Vue Data Tables

Another handy Vue.js plugin. VueDataTables is a simple plugin to build customizable and pageable table with Vue.js. The plugin is build with scale in mind that it can render massive data on the table flawlessly. It is also shipped with some extra components to power up your table like Pagination, Searchbox and Filter.

Googler

Googler is a CLI that allows you perform search in Google through the command lines. Similar to the interface, it will also retrieve the title, description, URL, and the pagination. It’s handy tool for macOS and Linux power users.

Bolt CMS

Bolt is CMS built with PHP. It is quick to set up, uses Twig as its templating engine, fully supports PHP7, easy to customize through a simple YAML file. Overall it looks interesting to me; I’ll definitely spend some time to explore it further whenver I have a chance.

Teletype

Teletype is a new a new initiative from the Atom Editor. This new feature allows you to collaborate with your peers on writing code. To use it, you’ll need to install the official Teletype plugin.

Plyr

Plyr (pronounced as Player) is a modern media player library with just 10kb in size. With this you’ll be able to customize the HTML video and audio player, Youtube and Vimeo, and a Live streaming media. It’s in active development with more planned features to be added incuding support for Wistia and Facebook embedded video.