Fresh Resources for Web Designers and Developers (April 2018)

A monthly dose of new and highly useful resources for web designers and developers.

By Thoriq Firdaus. in Web Design. Updated on June 28, 2023.

This month we saw a few announcements from notable names in tech. For example, Apple open-sourced a new database system, Google released a new tool to measure your website speed on mobile, and Github with a free course to get you started with Git, Github, and coding in general.

Also, in today’s post, I’ll also feature a number of new tools that are currently on the rise. Let’s jump on to what we have more on the list.

VuePress

A new tool from the creator of Vue, VuePress is a static site generator designed with Vue.js in mind. It generates and pre-renders static HTML for each page, and runs as an SPA (Single-page Application). It comes with some features out-of-the-box including the ability to add Google Analytics ID, search, next and prev navigation, sidebar, and PWA.

IMG-2

A JavaScript library that introduces a custom element, img-2. The new element adds a number of optimizations that do not come with the standard img element, improving how the image is loaded for the users. With the custom element, the image will be pre-cached, it also lazy load the images and serve will from the cache only as the images enter the user’s viewport. Check out the demo.

Tabler

An elegant Dashboard/ Admin Panel based on Bootstrap 4. The dashboard features pre-made components such as Charts, Forms, Galleries, a Pricing Table, and a nice collection of custom Icons. A great starting point to let developers building an Admin Panel quickly. Check out the demo!

DayJS

DayJS JavaScript library to format dates and times. Even more, DayJS features similar APIs to Moment.js, yet it’s just weight 2Kb in size. Given that, it could be a great alternative to Moment.js, if you’d like a lighter library yet maintain familiarity of what you’ve already known.

UnifiedArchive

A PHP library to deal with compressed files, UnifiedArchive supports a wide range of formats including RAR, Zip, Gzip, Tar, and a lot of other compression types. With this library, you can archive and extract files or directories. It provides a handful of APIs to manipulate files after it’s been extracted from the archive. UnifiedArchive is available as a Composer package.

Github Learning Lab

Github has just announced a free course covering primarily Git in Github. There are 5 courses at the moment where you can learn a few handy things such as how to use Github to host your codes, how to use Github pages to get a free site or blog for your project, and how to manage Merge conflicts that are common to happen when you work with many developers on a project.

Popmotion

A JavaScript library for a buttery smooth animation on the web, “Popmotion” provides an API called Physics that allows you to create with a near real-life animation effects. It is unopiniated; the library simply outputs values based on the specific set of the configuration. This allows you to apply those outputs to animate any medium including CSS, SVG, Three.js and even React.js.

Text Mask

A JavaScript library to transform the text that requires special formatting like a phone number, currency, or a credit card number. As the user is typing in the text will automatically be transformed into its appropriate formatting improving the user experience. TextMask can be used with React, Vue, or just plain old JavaScript.

Compare Mobile Site Speed

This is another handy tool from Google. This tool will allow you to check your website’s speed when loading from mobile and estimate the total loss of revenue when the website loads slow. You can select the country and the speed of which your website will be tested against.

VueNut

A development companion when building a web application with Vue.js and Vuex, VueNut makes it easier to explore the data state stored and allows you to manipulate the data during the development easily. Cool stuff!

FoundationDB

Recently Apple made FoundationDB open source in Github. It’s a key-value pair database system that promises scalability and performance. It’s cool to have big tech companies starting to devote to open source some of their products.

StoryBooks

StoryBooks is a tool to build a React component in isolation. It provides a UI on the browser allowing you to view the different states of each component as well as test the components.

GhostText

A browser extension that will sync what you write on the browser to your text editor or vice versa. I found this ultimately useful if you’d like to be able to write on a website with the convenience and the features of your code editor. GhostText is available for Chrome, Firefox, and Opera.

Coala

Coala is a CLI providing an interface for linting and fixing code regardless of languages used. You can use Coala within a code editor, integrate it with a CI (Continuous Integration), and customize it with a configuration syntax in .coafile. Coala supports many languages such CSS, JavaScript, PHP, and you can find more in this directory.