Fresh Resource for Web Developers – April 2018

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.

VuePress

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.

IMG-2

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!

Tabler

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.

DayJS

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.

UnifiedArchive

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.

Github Learning Lab

WordPress UnitTest DOM Parser

A nice tip from Takayuki Miyauchi on testing DOMElement when performing UnitTest in WordPress applications. I personally found this really useful; hope you find it the same.

WordPress UnitTest DOM Parser

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.

Popmotion

Driver.js

A JavaScript library that allows you to “drive” user focus on a page. This is particularly useful if you’d like to introduce specific features or guide them to specific tasks on the page. Driver.js is just 4 KB in size, customizable, and keyboard-friendly.

Driver.js

Replace Animated GIF with Video

GIF is everywhere, after making a great come back. But the problem about GIF is that is it usually very huge. It’s a waste of bandwidth, yet the graphic quality is often terrible. This guideline from Google shows how “Video” may replace GIF to show animated graphics.

Replace Animated GIF with Video

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.

Text Mask

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.

Compare Mobile Site Speed

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!

VueNut

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.

FoundationDB

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.

StoryBooks

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.

GhostText

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.

Coala

ReactStrap

ReactStrap is a collection of Bootstrap 4 components transformed into reusable React components. If you’d like to modernize your old Bootstrap-based website, this library is something you might want to look into.

ReactStrap

Reacto

Another React-related tool, Reacto is an IDE built on top of Electron and designed for developing web applications with ReactJS. This looks really handy if your development primary revolves around ReactJS.

Reacto

PicoJS

A JavaScript library that enables face detection. It works with a still photo or from the integrated camera. It’s really fascinating how the web technology evolves over the last few years.

PicoJS
Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail