Art Imitates Life

More Art than you should ever need.

A regular roundup of web design and development stuff (and other web-related things that I find interesting).

Responsive Image Breakpoints Generator

Buttinary, an image management company, has released Responsive Image Breakpoints Generator, a great little open source tool for generating multiple versions of an image for responsive designs. One of the interesting features is the ability to set the physical sizes of your images based on the size (in KB) of the image. For example, set your range of viewport widths from 200px to 1080px, your size step to 20, and the tool generates versions of the image, in different widths, in size increments of 20kb. It also kicks out and example code. Creator Nadav Soferman has a detailed explanation of the tool on Smashing Magazine, and Jason Grigsby has a quick writeup on the Butt Four blog.

Vivus

Vivus example

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.” It features quite a few timing and drawing options, and the examples are very slick.

Development Environments

In a recent Draft Weekly Letter, Nick Disabato shares some frustration with the intricacies of setting up development environments when working for multiple clients. Nick’s solution?

I have begun adding explicit stipulations in my contracts that you can’t expect me to set up a development environment to do any of my work for you.

As someone who has worked on a wide array of projects in an equally wide array of tech stacks, I can vouch for the difficulty of getting a bulletproof development environment up and running, especially when you need to ramp up as soon as possible. If you are hiring a freelancer or contractor, do everyone a favor and make sure they’re ready to hit the ground running. Read the whole piece. If you find it interesting and want to hear more from Nick, subscribe to the Draft newsletter here.

Git Sketch Plugin

Git Sketch plugin

A Git client for Sketch from Mathieu Dutour.

Workflow

Once:

  • Init the git repo
  • Add all the sketch files you are working on the repo

Then:

  • Create a new branch when you start working on a new feature
  • Work normally on your design
  • Save the file
  • Commit the changes with a meaningful message describing them. The plugin will extract the artboards in your file in order to show the differences easily.
  • Push your changes to the remote.
  • Create a pull request from your branch to the master branch.
  • Voila. Your co-workers can review the changes, comment on them and approve them. Once approved, merge the pull request.

Clipboard Fill Sketch Plugin

Clipboard Fill Sketch Plugin

A plugin from Scott Savarie to “paste whatever image is on your clipboard as the fill for any shape.” Nice and simple. You can get it on Github.

What’s New in Sketch 3.5?

This is the last Sketch item, I promise. Version 3.5 was just released (with 3.5.1 hot on its heels to clean up a bug), and it introduces a lot of nice small (but very welcome) updates. Yap Kwang Yik runs through the most important new features.

Faster Chrome on iOS

“Chrome on iPhone, iPad, and iPod Touch now uses WKWebView, the latest web rendering engine available from Apple. It helps webpages run faster and reduces the possibility that Chrome could crash or freeze.” Update your app today!

Leave a Reply

Your email address will not be published. Required fields are marked *