January 13, 2014
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"
activate
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"
activate
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.