Design your way

After over a month since the last article of this kind I decided to post a new one with, of course, new tools that could make your work easier and better. Some of these tools have made a big buzz the last month in social media and also on various newsletters that are targeting web designers.

The most popular one that has been insanely shared is screensiz.es which offers a really nice overview of the devices that you have to build responsive websites for. Besides this one, Pure and Joel Glovier’s Microframe Template were also received very well by the community.

The other items that are in this article, besides the ones already mentioned, haven’t received the exposure they deserved and instead of submitting them individually to various websites, I’d rather put them all in one place to be easier to find.

I hope these tools and resources will be useful to you and will make things easier for you.

GistBox

GistBox uses GitHub’s backend but adds its own layer of label and search functionality. It was designed to be a curated, personal snippet library – like long term memory for the practicing software engineer.

screensiz.es

Tactile Design Kit

A physical, interactive web design kit created to facilitate client conversation and brainstorming during the discovery and design phase.

Intern

Run tests using the browser or node.js and seamlessly integrate with SauceLabs or Selenium. Write tests using object, TDD, or BDD styles and get full code coverage reporting with Istanbul. Continuous integration? Intern has you covered with Travis CI support out-of-the-box.

Microframe Template

Microframe is a micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts.

Chart.js

JSHint

JSHint is a tool to detect errors and potential problems in JavaScript code and can be used to enforce coding conventions.

Progression.js

A jQuery plugin that gives users real time hints & progress updates as they complete forms

Pure

A set of small, responsive CSS modules that you can use in every web project.

Fries

Fries lets you create sexy Android-like UI using HTML, CSS, and JavaScript.

FROONT

Design websites directly in the browser with a simple drag and drop interface

CollagePlus

This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.

Pico

A stupidly simple & blazing fast, flat file CMS. Making the web easy.

Pop Easy

A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.

Pedestal

An open source tool set for building web applications in Clojure

Selectize.js

Selectize is a jQuery-based custom select UI control. It’s useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API.

Clipping Magic

Easily remove the background from your photos to create masks, cutouts, or clipping paths, all done instantly online with ClippingMagic.com

Unveil.js

Lightway version of Lazy Load with support for serving high-resolution images to devices with retina displays

Pinba

Pinba is a MySQL storage engine that acts as a realtime monitoring/statistics server for PHP using MySQL as a read-only interface

jQuery TourBus

WideArea

WideArea is simple and lightweight JavaScript and CSS library (2KB JS and 4KB CSS) which helps you to write better, simpler and faster.

Sylius

Sylius is modern e-commerce solution for PHP, based on framework Symfony2.

Flatdoc

Flatdoc is the fastest way to create a site for your open source project.

Swiper

Mobile touch slider & framework with hardware accelerated transitions

Kineticwing IDE

Smart, Lightweight and Portable IDE for faster and easier web development.

Cardinal

Cardinal is a small, “mobile first” CSS framework with some useful default styles, scalable typography, reusable modules, and a simple responsive grid system.

Unicode character table

OpenWeatherMap

The OpenWeatherMap service provides free weather data and forecast API suitable for any cartographic services like web and smartphones applications. Ideology is inspired by OpenStreetMap and Wikipedia that make information free and available for everybody. OpenWeatherMap provides wide range of weather data such as map with current weather, week forecast, precipitation, wind, clouds, data from weather Stations and many others. Weather data is received from global Meteorological broadcast services and more than 40 000 weather stations.

Jekyll

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through Markdown (or Textile) and Liquid converters, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.

Aristochart

Aristochart is highly customizable and flexible line charting library for canvas. Aristochart allows you to focus on aesthetic while it manages the data behind the scenes.

FlipClock.js

So why use this library when there are many others with the same name? Well, this library was created because the other solutions weren’t abstract enough to provide a deep level of customization without rewriting the code.

Mason

Mason was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges. Mason was made to fill those gaps in.

Built on the idea of true masonry when a grid is constructed there are bound to be holes, so Mason calculates where those holes are fills them in.

Pingendo

Quickly create rich layouts, with a clear DOM tree-editor, and dozens of ready-to-use snippets. Inspect and edit all CSS rules visually, producing clean, standardized CSS3. Enjoy simplified input for complex values such as colors, gradients and 2D transformations.

Secrets of the Browser Developer Tools

Over the last few years there has been one tool that has helped out every web developer more than any other – the browser developer tools. Working in harmony with the web browser, the developer tools allow us to manipulate DOM elements; gauge performance and debug JavaScript from within the browser window in real time.

Chrome Logger

Chrome Logger is a Google Chrome extension for debugging server side applications in the Chrome console.Most languages include their own logging capabilities, but sometimes it is easier to see your logs right in the browser. Chrome Logger used to be known as ChromePHP.

Picksum Ipsum

Do you love movies as much as you love making cool websites? Then, boy – have we got the lorem ipsum for you! Our badass text generator will give you the best lines from some of the hardest Hollywood legends – we’re talking Eastwood, Caine, Carrey and Freeman – and mix them up ready to work their magic on your new website.

Hitch

Hitch provides a better way to write your CSS. Including Hitch in your page lets you import and use features like CSS selectors that have only been proposed or HTML widgetry based on an earlier Web Components proposal (simple microformats which provide an easy uplift to real native when you decide to do so). With Hitch, it is up to you (the author of the page/stylesheet) to determine which features you need, not the user’s particular browser.

Forecast Font

Forecast Font is a web-font for creating multi-layered weather icons. It was created to enable you to have more control over the look and feel of the icons, rather than only having a single colour or style.