Fresh Resources for Web Designers and Developers (February 2017)
The Fresh Resouces for Web Developers series has run for around 4 years now, and maintaining this series has greatly given me insight on how the web progress over the years. There are new tools coming out every month to make web development easier.
In this installment, we have collected a number of new tools, which include JavaScript libraries, a couple of CSS libraries, and reference to improve your skill. Let’s check them out.
Click for More Resources
Find our entire collection of recommended resources and the best web design and development tools available.
Caption
JavaScript is taking over desktop application for the portability over the different platforms as well as working just as well as the native app. This app, Caption, for instance is built on top of Electron. It is a simple app that allows you to search Subtitle files (.srt) to attach to the video you are watching.
Awesome OSX Command Line
An enormous list of useful and handy command lines for macOS. Here you may find a lot of things that might be done through the CLI such as “clearing the print queue”, “hiding folder in Finder”, and “preventing system sleep”.
Trevor
Trevor is simply Travis CI done offline. Travis is a Continuous Integration service where developers test their software to see whether the software works properly in multiple environments. Trevor is still in its early stage; it currently only supports “NodeJS”.
Progressively
A nice JavaScript library to load the image progressively, hence the name. A small image will be served and blurred while the browser is loading the full image. This helps your website load much faster especially if it contains large images.
QartJS
This is a JavaScript that makes QR code less boring. With this, you can overlay the QR code over an image — such as your photo.
WP Docker
WP Docker is a Docker environment designed specifically to develop WordPress. The environment is self-contained and won’t affect your computer system in case you’ve made a configuration. It is a great alternative to Vagrant, Valet, Local, and MAMP.
Rellax
Rellax is a JavaScript library to create Parallax effect on page scroll. It comes with a few options and is relatively easy to configure. It is lightweight, runs super fast, and requires no dependency like jQuery hence it is a great alternative to other libraries on this category such as Parallax.js or Scrollax.js.
Articulate
Yet another cool JavaScript library. Articulate brings synthetical voice to your website. It is able to parse and read your website, eventually can improve your website’s accessibility for users with impaired visibility.
MonetizeJS
MonetizeJS is a JavaScript library to implement Stripe easily; as easy as using jQuery.
Vonic
Vonic is a collection of UI for mobile built using Vue.js and Ionic CSS. It comprises a lot of UI components commonly found in mobile, including the Checkbox, Searches Form, Swiper, and so-called Accordion. You can use to build a mobile app aplication prototype right in the browser.
WordPress Component Library
10up, one of the prominent names in WordPress, released a UI library designed specifically for WordPress. Unlike other UI library which only provides CSS and HTML codes, 10Up also provides the PHP code snippet that you can just paste in your theme. The component includes Navigation, Tabs, Tooltips, Comments, and Blogrol.
JavaScript Start-up Performance
A superb and detailed article from Addy Osmani, one of the Google engineers, on how to write JavaScript that run super fast. I encourage you to read it through to level up your JavaScript skill.
KuteJS
Kute is a JavaScript library to perform animation. It is blazing fast and super efficient in memory consumption. It has extensions and extra tools to allow apply animation in CSS, SVG, and even a jQuery plugin for more convenient syntax.
PWA Rocks
Progressive Web Application (PWA) is a methodology that allows a website to run fast and useable offline. This PWA Rocks list one that as been approved by Google as a PWA. To learn more about PWA from Google take a look at: Progressive Web Apps.
Github Auto-updater
Github Auto-Updater is Composer library that allows your plugin to be updated from Github. This is a handy script for developers to maintain plugins for their clients without necessarily uploading it to the Github repository.
Card
Card is a JavaScript library that makes Credit Card input more engaging and improves your user experience while inputting their credit card numbers. It works well with jQuery, React, Angular, and Ember.
Graaf
Graaf provide an overlay over your page to see how the grid — column, row, gutter — is laid out. You can also generate your own grid specification using the API provided.
Luxbar
Luxbar is a CSS framework to create a responsive navigation easily; simply add the stylesheet and add the HTML properly. You can install this library through NPM, Bower, or link the stylesheet directly from the CDN.
Contrast Grid
A list of table shows color contrast and their accessibility grade based on the WCAG 2.0. You can change the value on the table, and quickly figure out whether the color combination complies with the WCAG standard.
ToneJS
ToneJS is a JavaScript library to create a tone or sound which may like coming from a musical instrument. I guess this library will come in handy for building a web-based musical instrument emulator or a game of sound effects.
