Fresh Resources for Web Designers and Developers (August 2016)

In this article, we feature a list frameworks and tools that is geared toward web development. Interestingly, I’ve found a few of these tools and frameworks coming from behemoth corporations like Microsoft and Alibaba.

This is a good sign, as more companies are now contributing to open-source and helping shape a better Web. Let’s take a look at what’s in store for this month’s compilation.

CuteStrap

A UI framework built on top of Sass. It comes with all the most common web interfaces, like forms, navigations, and buttons, which should be sufficient in many cases. If you find popular frameworks like Bootstrap and Foundation overwhelming, Cutestrap might be a great alternative for you.

HTML5 Test

HTML5 Test is an online tool that will test how far a browser supports the latest HTML5 specifications. It’s a handy tool for those involved in debugging and testing modern web applications.

Browser Calories

Browser Calories is a Chrome extension that measures a webpage weight. It scans the files loaded and their contribution to the total weight of the page. A great tiny tool to help you optimize your website performance.

Weex

Weex is a framework from Alibaba to build mobile apps with just HTML, CSS and JavaScript. It comes with Modules, UI components, its own DevTools, and CLI that is designed for mobile environments and to speed up development.

Microsoft Web Framework (MWF)

A framework from Microsoft, the UI components in MWF is built based on the Microsoft Modern design language: flat, clean, and minimalistic. This framework, aside from the UI components, also gives direction on the use of Colors, Typography and Animation. I think Material Design Lite has finally met an equal contender.

Vital

Vital is a framework with a very pleasing minimal interface. It is lightweight, has no JavaScript, and natively Rogue – a syntaxhiglighter based on Ruby.

Fontea

Fontea is a free Photoshop extension to easily manage and apply hundreds of Google Fonts. You can search the font from inside Photoshop, preview, and apply the font straight into your design – streamlining your workflow.

Drizzle

This is a tool that enables you to build UI patterns or style guides for your website. It will generate things like the colors, basic styles, or layout for components as well as the code snippet. A style guide generator like Drizzle will allow you to stay consistent with your website styles.

InterCooler

InterCoolerJS is a JavaScript library that makes applying AJAX on your website as easy as adding HTML attributes. It comes with an extensive guide and plenty of examples to help you get started on using the tool.

Picla

Picla is a jQuery plugin to show image labels retrieved from the image alt attribute. It provides a few options to let you add custom styling and motion to the label. Picla can be installed as your website dependency with Bower.

IziModal

Here is a jQuery plugin to show modal popups. IziModal has lots of options for personalization. You can, for example, customize the animation, text content, and colors. It is lightweight, responsive, and retina-ready.

MegaBoilerplate

MegaBoilerplate is a generator to setup a development stack quickly. Go to the website and select which tools and libraries (Node.js, HTML5, Vanilla JavaScript, and Electron) you will use as your website base. It will compile and configure all the things you need in a zipped package, ready for download.

Howler

A JavaScript library to display modern audio player using Web Audio API, Howler works in browsers as old as IE9, and supports many audio codecs like MP3, WEBM, WAV. Lots of features, modular, and works with no external library.

SuperEmbed

SuperEmbed is a tiny JavaScript library that makes embedded objects responsive, while maintaining the original ratio. It supports a wide range of sources, including Youtube, Flickr, Vine, VideoPress, and DailyMotion. See the demo.

CleaveJS

Cleave is JavaScript library that automatically formats values in the input. It can, for example, add a thousand separators in currency input, add space in Credit Card number input, or add / in date input. Use this library to serve a better user experience.

Flipping Typical

FlippingTypical allows you to view all the fonts installed on your system. I find this app to be more convenient than using the FontBook app in macOS. I type random text and see which of the fonts on my system look best.

LightTable

A new IDE that I think is worth exploring. It started as a KickStarter project, backed by Matt Mullenweg (WordPress founder), and finally went open source. You can watch this video to get an idea of how cool this IDE is.

Compressor

Compressor is a web app that compresses image files down to the tiniest size without losing visual quality. It supports JPG, GIF, PNG, and SVG as well. This app is free.

Microsoft Site Scan

This is a handy tool from Microsoft to analyze your website for issues like browser compatibility and accessibility. The tool will list a report telling you if anything is not right about your website and how you can proceed to address the issue. Give it a try!

Disable Blogging

This plugin, as the name implies, will remove blogging features like Posts, Comments and Feeds. It is the right plugin for you if you do not need the blogging feature in WordPress.