Friday, March 13, 2020

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.

Jetbrains Mono specimen viewed in macOS Font appJetbrains Mono specimen viewed in macOS Font app

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.

Example of code from Zttp to perform basic HTTP request

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.

Example of code from SolidJS to create basic componentExample of code from SolidJS to create basic component

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.

Demo flow chart created with Flowy.js

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.

Example of code to run PlaywrightExample of code to run Playwright

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.

Web page of the 'CSS Cascade' articleWeb page of the 'CSS Cascade' article

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.

Table of CSS Houdini support in the browsersTable of CSS Houdini support in the 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.

Neumorphism.io website homepage in blue colorNeumorphism.io website homepage in blue color

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.

Pastboard Viewer app running in macOSPastboard Viewer app running in macOS

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.

Critic.sh running in TerminalCritic.sh running in Terminal

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.

GitExplorer homepage in the dark modeGitExplorer homepage in the dark mode

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.

Windows terminal with UbuntuWindows terminal with 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.

Github CLI homepageGithub CLI homepage

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.

Full calendar demoFull calendar demo

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.

AOS example HTML codeAOS example HTML code

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.

Table of country list and their currencyTable of country list and their currency

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.

Must Watch Javascript repository in Github with a TV iconMust Watch Javascript repository in Github with a TV icon

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.

List of icons in Heroicons collectionList of icons in Heroicons collection

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.

Examples of animation created with SceneJSExamples of animation created with SceneJS

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.

Collection of illustration created with OpenPeepsCollection of illustration created with OpenPeeps

The post Fresh Resources for Web Designers and Developers (March 2020) appeared first on Hongkiat.

From https://ift.tt/2H0fTCQ, find us on maps: https://bit.ly/31tHUKW

No comments:

Post a Comment