Fresh Resources for Web Designers and Developers (December 2017)
“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 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.
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 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.
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 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.
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.
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 is minimal WordPress starter theme. Extending the _s, Air adds some additional components such as Slides, Sticky Navigation Bar, and WooCommerce-ready.
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.
Read Also: How To Design Empty State Pages for Websites & Mobile Apps
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.
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 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.
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 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 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 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 (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.