Knowing how to code can make a designer’s life easier

The debate about whether designers should be able to code or not is not new. This article (‘The “designers should code” bullshit and a not so new idea‘) addresses the debate from the ‘no’ perspective. Others, such as Elliot Jay Stocks (‘Web designers who can’t code‘) believe designers should know HTML and CSS, but not necessarily front-end languages like JavaScript, let alone back-end ones, such as Rails or Python.

Both sides put forward many arguments in support of their position. While I can see merit in arguments from both sides, it’s not my intention to re-hash those arguments here; you can read the articles for yourself. Instead, there’s one pro-coding argument I’ve never heard put forward that I believe deserves an airing: knowing how to code can make your life as a designer easier.

Many jobs a designer will face contain boring and repetitious tasks; it’s why Photoshop has actions – and why designers use them. But many of those repetitive tasks don’t have a helpful UI to take away the pain, or the UI lacks the flexibility or power to accomplish everything you require. So here are two examples of when knowing how to code can make your life easier. These examples require OS X and use AppleScript; I don’t know how much of these tasks you can accomplish on Windows, but I doubt it will be as easy as doing it with AppleScript.

Example 1: Automating Illustrator with AppleScript

One of my current projects requires me to create a lot of SVG images in Illustrator. The process of creating each image requires the placement of Photoshop files, for reference, and the creation of objects which act as guides, but that have no place in the exported SVG. Paths with strokes also need to transformed into outlined objects to ensure that the SVG code will work with the Raphaël JS library. Deleting objects and outlining paths manually is fine the first time. By the fifth image it’s a chore, and when you have to do it dozens of times it really grinds.

But there is an answer: you can use AppleScript in OS X to control Illustrator to accomplish this automatically. Here’s how:

tell application "Adobe Illustrator"
	set thisDoc to current document

	set locked of layer ("doorspaces") of thisDoc to false
	set visible of layer ("doorspaces") of thisDoc to true
	delete layer ("doorspaces") of current document

	set partialName to ".psd"
	set locked of (every layer of thisDoc whose name ends with partialName) to false
	set visible of (every layer of thisDoc whose name ends with partialName) to true
	delete (every layer of thisDoc whose name ends with partialName)

	set fileName to name of thisDoc
	set fileDir to file path of thisDoc as Unicode text

	set locked of (every layer of thisDoc) to false
	set visible of (every layer of thisDoc) to true
	set selected of (every path item of thisDoc whose stroke color is {red:255, green:255, blue:255}) to true
	set selected of (every path item of thisDoc whose stroke color is {red:0, green:43, blue:89}) to true

end tell

tell application "System Events"

	click menu item "Outline Stroke" of menu "Path" of menu item "Path" of menu "Object" of menu bar item "Object" of menu bar 1 of process "Adobe Illustrator"

end tell

You can’t create an Action in Illustrator to do all this, so without code you’d be left doing this manually; which is mind numbing, and as with any repetitive, automaton task, is prone to error when a human has to execute it manually. It also saves you time, giving you more time to be creative.

Example 2: Mass uploading files via FTP with Fetch and AppleScript

Another project I was involved with required regularly uploading files via FTP to up too 100 instances of a VLE. Often I found that I would be required to upload the same file(s) to every instance, a plugin for example; the structure of the VLE meant code centralisation wasn’t possible. FTPing a single file to a single site is easy, doing it to ten sites is boring, but acceptable. Doing it to 100 sites is pure tedium, and is not a very productive use of your time.

To alleviate the tedium we can use AppleScript to automate FTP-ing with Fetch like this:

set location to "folderX"

if location = "folderX" then

	set hostN to "ftp-address-of-site"
	set uName to "administrator-username"
	set pWord to "password-for-this-account"

else if location = "folderY" then

	set hostN to "ftp-address-of-a-different-site"
	set uName to "the-admin-user-of-a-different-site"
	set pWord to "admin-password-for-a-different-site"

end if

tell application "Fetch"
	make new transfer window at beginning with properties {hostname:hostN, username:uName, password:pWord, authentication:SFTP, encrypt:true}
	set homeDir to "/var/www/html/"
	set themeDir to "/theme_dir/theme_name/"

	set targetDir to "style" # Edit this var to change the remote directory you want to upload to

	set targetFile to ":extra.css" # Edit this var to change the file you want to upload. YOU MUST KEEP THE COLON!

	set localDir to "Macintosh HD:Users:username:vle:vleinstance:" & location & ":" # This is the directory the script will loop through, edit the first part to reflect the location of VLE files on your Mac

	tell application "Finder"
		set foldList to get name of folders of folder localDir # This gets a list of your local folders
	end tell

	# This loops through your local directory and the remote directory uploading the specified file to the target folder
	repeat with folder_name in foldList
		set newDir to homeDir & folder_name & themeDir & targetDir
		set localAlias to localDir & folder_name & targetFile
		open remote folder newDir
		set winName to name of front window
		put into transfer window winName item alias localAlias format Automatic without uniquename
	end repeat

end tell

This particular script is fairly simple, it is designed to FTP the same file/folder to either of two remote sites, each containing multiple instances of a VLE. It does this by looping through a list of folder names in a directory on your Mac, using the folder names to access the equivalent directory on the specified remote site. The key here is to mirror the remote directory structure and folder names locally. This script is a massive time saver, and removes the chance of making an error. Subsequently, I’ve written more complex versions of it that use the presence/absence of local sub-directories to determine whether to upload a file/folder.

Some people in the anti-coding camp, will say that this type of task is the responsibility of a developer, not a designer. However, not every designer is in the position to wash their hands of this kind of task; the project may not have enough developer resource or your developer colleagues might not have the time to do it, and so it falls upon you, the designer.

If you don’t know how to code, then you probably won’t be aware of AppleScript and what it can do; and even if you do you’ll likely lack the confidence to utilise it. I’d never used AppleScript before writing these scripts, but because I know how to code in other languages I had the confidence to dive into it.

Neither of these examples is complicated. AppleScript is often referred to as a ‘natural language programming language‘, which makes it easy to read and understand (even non-coders should be able to grasp what is happening here) it also makes it a good language to start learning with. Take a little time to learn the basics of coding – variables, strings, arrays, loops, conditional statements, functions – first. Understanding the basics will give you the fundamentals to make use of any coding language; everything else is syntax and vocabulary.

A final thought: when you’ve learnt how to code you’ll find that as well as making your life it easier, it can also open up new creative possibilities. This library of Illustrator scripts by Hiroyuki Sato shows you the creative possibilities of code. You don’t need to understand code to use them, just load them up in Illustrator; they’re JavaScript and so work on both OS X and Windows. However, if you open the JavaScript files in a text editor you can look at the code to understand how they work.