Fresh Resources for Web Designers and Developers (May 2017)

By Thoriq Firdaus. in Web Design. Updated on January 5, 2021.

A collection of useful web resources is something that a web developer really looks forward to have in his toolkit. Therefore, being a developer myself, I strive to present you the best and the most latest web development resources every month.

This month’s collection includes an interesting free app to for screencasting, a couple of frameworks based on Material Design language, a couple of library for Performance testing, CLIs, and a handful our of other handy resources. So, let’s check them one by one in the following.

Click for More Resources

Find our entire collection of recommended resources and the best web design and development tools available.

Kap

Kap is a neat little screen recorder for MacOS. It is an open-source app, built with web technology. One thing that I love in this app is that it offers converting the video right out-of-the box. Kap is a great alternative to record your apps or website’s live demo.

Sizzy

Sizzy is a development tool to test your responsive website in multiple viewport sizes on a single screen. It’s a super handy app as compared to the Chrome’s built-in mobile emulator. Sizzy also comes as a Chrome Extension.

Muse UI

A UI library based on Material Design principle and built on top of Vue.js 2.0, Muse UI is packed with Material Design Compenents such as Appbar, Card, and Dialog. It is great framework to build and run UI quickly.

Advanced WP-CLI

I’m a big fan of WP-CLI and use it almost every day in my work as a WordPress developer. Yet, it is only recently that I found out that WP-CLI allows you to create a PHP UnitTest scaffold for a theme! This is a list of WP-CLI advanced usage from the WP-CLI maintainer, Daniel Bachhuber, himself.

Lunacy

Lunacy is a standalone Sketch file viewer for Windows. It works great with Sketch file that contains text, raster images, even gradients, and shadows. It doesn’t require connection to the internet, thus developers can work on Sketch files from anywhere. And it is completely free.

K6

Speed matters in almost every aspect of web application. But how do you measure the speed of your website? Well, the answer is K6. It simulates traffic to your website and loads the website on a given duration as if it is a real traffic. In short, K6 is the UnitTest for Performance.

Checker Service

A great list of web apps to check a lot of stuff such as DNS, Load, Speed, SEO, Security, and SSL. Many of these tools are free, however, there are a few premium services listed therein that offer advanced features for users.

SVGito

Is a small web tool to optimize SVG that has been generated from the Sketch app. Paste your the SVG code onto the website and it will return the optimized code immediately.

Launchaco

Finding a great name for your startup is hard, and obtaining an available username handler on social media is even harder. Launchaco is a handy tool that allows you to find domain names, usernames for different social media like Twitter, Facebook, Instagram etc., and helps you generate a nice logotype of your business.

Obnoxious

A collection of unique animation done with CSS. Please don’t run the animation, if you heart and mind are not strong enough to see it.

CSS Grid Cheat Sheet

Learning CSS Grid can be quite intimidating when it comes to a number of new properties, a new measuring unit, and also almost a complete new paradigm to build the web layout. This tool, as the name implies, is to help you get your feet off the ground with CSS Grid.

Workbox

Workbox is a new initiative from Google to build Progressive Web App (PWA). It is akin to Yeoman or Create React App in a way that you can get everything up and ready in single line of command.

Mavo

Mavo is a new open source project from Lea Verou. It is a library that turns bare HTML markup and a few custom attributes into a functioning web application. Mavo easier to follow as compared to the other libraries like Backbone, Vue.js or React as it allows less tech-savvy users to build web application quickly and easily.

Material UI

Simlar to Muse UI, it is a UI framework based on Meterial Design language. This one is however built using React. It is now up to your preference; if you are with team Vue.js or team React.

Lazy Image

Lazy Image is a custom HTML element to load image on request. This custome element provides an additional .active object within the Element Object which you can use to trigger the image to load in any event or user interaction as you need.

Mac CLI

This a nifty tool to manage your MacOS through Terminal. Simply type mac update to update MacOS. Or, type mac presentation which will prepare your Mac (minimize all apps, close browsers, send files from desktop and downloads to trash and set not disturb mode) before giving out presentation. How cool is that!