Fresh Resources for Web Designers and Developers (March 2020)

It’s time again for us to share fresh resources with our fellow web developers. In this round, we’ve got some great new tools from big names in the tech industry including Microsoft, Github, and JetBrains.

We also have a number of high-quality JavaScript libraries to create Flowchart, data grid, and a calendar, and a PHP library that makes it easy to perform an HTTP request. So without further ado, let’s jump in to see the full list.

Jetbrains Mono

A monospace type font created by Jetbrains. The font is designed for developers and provides a better reading experience when working within code editors. Jetbrains Mono comes with 4 weights, more than 100 of code-specific ligatures like => and ===, and best of all it’s FREE.

Zttp

Zttp is a library to make an HTTP request with PHP. It’s essentially an abstraction layer to Guzzle which is a robust powerful library for dealing with HTTP in PHP which can be overwhelming to use. Zttp makes it easier and more straightforward for 90% of use cases.

Solid.js

A JavaScript library for creating user interface. Unlike some popular libraries in this niche like React.js, it does not use Virtual DOM. Solid.js will compile codes to native DOM nodes which makes it run fast. Yet, despite being relying on native DOM, it also provides some modern features that make it enjoyable to work with such as State and JSX.

Flowy

Flowy makes creating a flowchart easy. You can simply drag-n-drop a block, move up or down, and left to right to arrange the flowchart. It has a nice looking UI, works well on mobile, and is responsive and customizable at the code level with the API and Callback Functions.

Playwright

A new open-source initiative from Microsoft, Playwright is an automation tool for browser testing. It will run the test in a real browser such as Chrome, Firefox, and Webkit-based browsers, and performs a series of actions that you define it. It’s a great tool to check if a particular feature works as expected when your user is using it.

CSS Cascade

CSS Cascade is an in-depth article on how the Cascading works in CSS. It’s quite informative for any designer or developer who wants to get into or fill in the gap in their CSS knowledge base.

Awesome CSS Houdini

Another cool thing that’ll be coming to CSS is CSS Houdini. Usually, a new feature in CSS can take a very long time to be applicable in the browsers; it can take a few years or even a decade.

CSS Houdini specification focused on address this issue. It’ll allow you to create a custom feature that will apply to CSS by leveraging the browser API, and you can manage it to work across different browsers.

Neumorphism

A handy tool for creating neurphomism user interface with CSS. You can pick a color, adjust the shadows, the shape and it will generate the CSS code to copy.

Pasteboard Viewer

Pasteboard Viewer is a utility app that makes it convenient for developers to make sure that their app is putting the correct data on NSPasteboard. The app refreshes the pasteboard contents live and can preview text, RTF, and images. Another great app from Sindre Sorhus.

Critic.sh

Critic.sh is a small library that allows you to test your Bash scripts. Like a Testing Framework, you can perform the assertion whether your function returns expected result or work as expected.

GitExplorer

GitExplorer helps you to find the right Git commands in the most intuitive way. So it provides a couple of options where you can select the command and the context or the scenario to run the command. For example, if you select clone and submodules after cloning the existing repo, it will generate git submodule update --init --recursive.

Windows Terminal

A Terminal application is coming to Windows. Microsoft has recently announced it’s latest version with bug fixes and new features. With this Terminal app, you can run scripts in various Shell environments including the PowerShell or the Windows Linux Subsystem such as Debian and Ubuntu.

Github CLI

Github has recently announced its official CLI. This allows you to manage your Github repositories from the Terminal and that means you can possibly automate a few other stuff too. You can perform some tasks that you would usually do from their website, such as creating a Pull Request (PR), an Issue, and check their status.

FullCalendar

A JavaScript library to create a full-fledge calendar. FullCalendar can render a calendar similar to what we see in Google Calendar but comes with more features and high customizability. Developers can easily incorporate it with some popular frameworks such as React.js, Vue.js, and Angular.

Aos

A JavaScript library to animate content as they appear on the viewport. It runs on Vanilla JavaScript without any external dependencies. Aos is shipped with API in a form of JavaScript and HTML which makes it quite flexible to integrate with any type of website.

Handsontable

An advanced JavaScript library to create a data grid that looks and feels like a spreadsheet. It provides API that allows you to perform data binding, data validation, filtering, sorting and CRUD operations quite easily. It’s also compatible with popular frameworks like Vue, React and Angular.

Must Watch JavaScript

A collection of talks about JavaScript. It covers topics such as ES6, frameworks, client-side applications, JavaScript performance, tooling, and more. A great free source to brush-up your JavaScript skills.

HeroIcons

A collection of icons in SVG format. It comes with two styles – solid style and outline style. Each of these styles consists of 140 icons and more to come to the collection. As these icons are an SVG, they can be resized to any size without losing the quality.

SceneJS

Scene.js is a JavaScript to create animation with a CSS-based timeline. It’s a perfect library if you’re already familiar with CSS animation and want to apply it with the dynamic language of JavaScript.

OpenPeeps

A collection of elements like arms, hair, cloth, accessories and facial expressions made of SVG. You can mix all these elements to create characters with various persona.

It also provides a pre-made combination of these elements in PNG and SVG that you can download for free. This collection is a time-saver for both designers and developers if you need to add characters to your website or web application.