Custom Services for Web Designers

Filling the gap in your budget, workflow, or even your passion.

It’s no secret that there are a host of web apps available that solve common problems in web design workflows, but if you have a spare box laying around or rent out some server space, it might be more cost effective to setup some services for yourself.

The state of front-end tooling has come up recently, so I’ll cover some of the services I have setup and how you can use them to your advantage in your next website or app.

Webfont Hosting

Over time, I have found that as I acquire licensed web-fonts that are useful for future projects. Unfortunately, most of these one-off fonts don’t come with a hosted solution like Typekit. I wanted a central place to host all of these web-fonts, so I setup a new bucket on Amazon S3 just for web-fonts that I could serve up on Cloudfront.

The next step was to upload all the web-fonts to the bucket like this:

font-name/
  font-name-license.txt
  font-name-bold-italic.woff
  font-name-bold.woff
  font-name-italic.woff
  font-name-regular.woff
font-name.css

Naming conventions aside, you really just need a stylesheet in the root that contains the font-face declaration referencing the font files. You can find the directory listing html and CORS configuration file at this gist. With all of this put together in your new bucket, you and your team will now have your own simple web-font service.

Image CDN

This one is a little more than advertised. You get an Image CDN, but it has enough tooling built-in to keep you from opening up your graphic’s editor for most image tasks. Thumbor is an open source CDN based on open technology. Here are just a few things it can do that have been useful:

Here is the original photo

http://thumbor.thumborize.me/unsafe/500x350/filters:strip_icc()/thumborize.me/static/img/beach.jpg

Resize & Crop

With pinning options, you can resize the photo to whatever size you want. Bundled in, it comes with face detection so that your photos never crop out the important subjects. This is also great for serving up responsive image sizes.

http://thumbor.thumborize.me/unsafe/400x100/filters:strip_icc()/thumborize.me/static/img/beach.jpg

Grayscale

Every time I design a site to use a specific style of photography, I always think to myself, “I really want to make this happen in my stylesheet.”. Without modifying the original image, I should be able to apply effects that make all the images look grayscale like the one below. Now I can!

http://thumbor.thumborize.me/unsafe/500x350/filters:grayscale()/thumborize.me/static/img/beach.jpg

Format

You can specify what format you want the image to get served up at (jpeg, gif, png, and even webp). Another great way to standardize and provide support for future image formats with new methods like srcset and <picture>.

http://thumbor.thumborize.me/unsafe/500x350/filters:format(webp)/thumborize.me/static/img/beach.jpg

For more useful techniques using Thumbor, I recommend checking out their the Github wiki.

Selenium Grid

When it comes to browser testing, I’m usually using BrowserStack, or I’ll open up Firefox locally or even use Microsoft’s RDP client with some free IE browser instances I can pull up. These tools are great, but what if you don’t have them? Maybe your a freelancer without the means to afford a BrowserStack subscription. Whatever the reason, there is an alternative.

Selenium Grid is an automated testing hub for web browsers. It lets you setup browsers you can call into via VNC, or use the headless option for functional testing.

To get started I recommend this post by Carlos Becker.

Gogs

It’s been nice using Github and Bitbucket I have to say, but recently I’ve had to ask myself how I’m going to react and remedy a situation where one of those companies disrupted service because they are moving onto bigger and better things, as they should. But what do you do? I decided that I liked the idea of a Git website where I can host and even mirror my repositories on a backup cycle.

MainWP

Managing a multitude of Wordpress sites can be a pain, sometimes even unmanageable. This Wordpress plugin called MainWP gives you a dashboard on your main Wordpress install. On this dashboard you can update everything, without going to any of those instances.

Rancher

…and now for the shocker. I use all of these services as Docker containers on one server in my garage. Plus, I run Wordpress and Ghost containers for new projects. I am very visual, so getting started with Rancher made a lot of sense given it’s awesome UI for managing multiple docker containers visually. This will save you a lot of time setting up applications that weren’t necessarily meant to run on your computer in the first place.