Fresh Resources for Web Designers and Developers (July 2017)

By Thoriq Firdaus. in Web Design. Updated on October 9, 2022.

Time flies, and we are now in the middle of 2017. In this month’s installment, we have an array of great JavaScript libraries and a few others, like a plugin to enable GraphQL in WordPress, a desktop application to render CSV data, and a few website frameworks. Let’s check them out.

HeroPatterns

A collection of repeatable pattern made with SVG that you can use as a background in your website. The site is equipped with a handy setting to customize the color and opacity of the pattern and lets you simply copy and paste the code to add in your CSS.

TestCafe

TestCafe is an end-to-end (e2e) testing tool that allows you to test your websites and web apps as if it is being used by real users. It will automate several things when performing the test, including starting the browsers, running specified test unit, generating reports, screenshots as well as sourcemap to troubleshoot errors easily.

SugarJS

SugarJS is a JavaScript library to manipulate Objects, Arrays, and Dates with a nicer and more readable syntax. The library also comes with a handful of utility functions, for example, .escapeHTML() which will convert HTML elements into their Entity format.

MS

A handy JavaScript library to turn time, number and regular string to milliseconds. ms('2 days'), for example, will be converted to 172800000.

pa11y

A great collection of tools to help improve accessibility on your website and web apps. pa11y consists of a CLI for testing any web pages for any accessibility issues, a Dashboard to show generated reports of errors and warnings, and a CLI that is specifically designed for a CI tool like Codeship or Travis.

Feather Icons

A collection of icons with modern vibe. These icons are a perfect fit for websites and apps designed for any platform (iOS, Windows, or Ubuntu). The icons come in SVG as well as in React and Angular components.

React Flight

A React module to build animation composition in your application. The library is inspired by Principle for Sketch, in which you can add interactivity to a UI component quickly and easily.

BounceJS

A library to create animations with bounce effect. The animation is powered by CSS3 and a number of preset animations. You can install the JavaScript library through npm, bower, or simply copy the CSS animation generated in the website.

Devicon

A collection of icons of programming languages, designing, and development tools. The icons are available in SVG and Font format. Some particular icons such as Firefox, AWS, and HTML5 also come with their detailed variants. Pretty cool right?

Now UI Kit

A responsive collection interface based on Bootstrap 4. It features 50 elements and 3 custom templates. Aside from the HTML version, the UI is also provided in PSD and Sketch formats.

T-Scroll

T-Scroll is a JavaScript library for applying animation when an element is visible in the viewport. It is equipped with a handful of options and preset animations.

Ory Editor

ORY is a modern and more accessible web editor on the web. The ORY Editor is built on top of React and Flux. It makes editing easy by allowing users to edit content and see the result immediately without having to know special syntaxes like HTML or Markdown.

TadViewer

TadViewer is a handy desktop app to view CSV and it works on large data and files. The app is available on macOS, Windows, and Linux.

Smooth Scroll Polyfill

Smooth Scrolling has proven to serve a more pleasing user experience. It is now proposed and drafted officially in W3C. At the moment, it is only working in Chrome, Firefox, and Opera. Use this library to emulate the smooth scrolling behavior in Internet Explorer and Safari.

Noty

A JavaScript library for displaying notifications, Noty makes it easy to show an Alart, Success, Error, Warning, Information or a dialog message. It can be used along with an animation library like mo.js and bounce.js to make the notification slides in and out gracefully.

HopScotch

Hopscotch is an open-source project instantiated by LinkedIn. It is a framework to make it easy for developers to add product tours. Check out the demo for a live example and the API.

SurveyJS

SurveyJS is another awesome JavaScript library. As the name implies, it is designed to create survey inputs. It features various input types to fill in the survey answers and has also been ported to several popular JavaScript frameworks including AngularJS, VueJS, and React.

WP GraphQL

GraphQL is on the rise and might be a strong contender to replace REST architecture that powers nearly all the web APIs. This is a plugin that will allow you to retrieve your WordPress content with GraphQL. Here is a great reference on how REST and GraphQL differ to each other.

Monaco Editor

Monaco Editor is the editor that powers Visual Code Editor. It is built by Microsoft and supports several languages out of the box including HTML, CSS, LESS, CoffeeScript, and PHP along with the Intellisense that helps you write code faster.