Fresh Resources for Web 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 help shaping a better the 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.

HTML5 Test Homepage
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 towards mobile environment and to speed up development.

Weex
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.

Microsoft Web Framework
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.

Vital
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.

Fontea
Drizzle

This is a tool that enables you to build UI patterns or style guide 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.

Drizzle
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.

InterCooler
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.

Picla
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, colors. It is lightweight, responsive and retina-ready.

IziModal
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.

MegaBoilerplate
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.

Howler
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.

SuperEmbed
CleaveJS

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

CleaveJS
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.

Flipping Typical
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.

LightTable
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.

Compressor
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!

Microsoft Site Scan
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.

Disable Blogging

Source: Hongkiat

(1168 Posts)

Leave a Reply