Using Code to Design, pt.1: Introduction

5 min readJan 17, 2018

I’ve been attempting to teach myself to replace my design tools with code over the past year using Codepen and online tutorials to mild success,. I started this Medium series to keep track of my progress and hold myself accountable. I’ll return here to update and formalize any mistakes or errors so that this can turn into a reliable “how-to” document.

I now feel confident in my ability to structure HTML, style websites with multiple styling languages and understand the fundamentals of React. I lack a strong understanding of Computer Science and JavaScript

Codepen has been a godsend for me, allowing me to progress without forcing me to learn more complex aspects of what I’m trying to do. In order to truly design with code, I need the following:

Be able to create & modify my development environment.
See my work in real-time.
Track my progress using GitHub.
Segment my work into manageable chunks.
Store data outside of the design.
Add and remove elements from a page.

#1 — Setting Up Development Environments

A development environment is the ‘application’ for you to design within. The environment will contain all the functionality you need — and it is customizable. Digital designers are trained to open applications — programmers are trained to create their own. Sketch is changing this, but it’s still a little bit of a mental leap. I’ll refer to our development environment as the ‘design environment’ once we get through the foundation.

#1.1 —The Foundation

There are a couple different layers when we look at a development environment. First, we’ll need to install ‘foundational’ software to be able to create our development environment. This software will be installed on your computer, and not need to be reinstalled with every project.

Text Editor

We’ll be using a text editor to write our code — there’s a ton of different ones out there, I was using Atom until recently when I was advised to check out Visual Studio Code by Microsoft “because it is faster”.

Command Line & Terminal

Terminal is an interface that allows you to use command line to control your computer. Command line is like typing a message to your computer. We’ll use Terminal to set up our development environment.

We’ll start by using it to set up Xcode. Xcode is Apple’s developer tools, and will allow us to install more developer tools. You won’t interact with it much.

Open terminal and type:

xcode-select --install

Throughout this process, you may be asked to authenticate using your password.

Ruby

Ruby is required in order to install Homebrew, which I’ll describe next. macOS comes with Ruby already installed, which makes setting up Homebrew easy. I’m not entirely sure what Ruby does or why it’s needed to install Homebrew.

Homebrew

In order to get started, we’re going to need a package manager. A package manager simply installs software (read as “applications”). Homebrew will install the core functionality of our development environment: Node.js.

To install Homebrew, type:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Once this is complete, run this code to make sure it’s working:

brew doctor

You should receive a message that says “your system is ready to brew”.

Periodically, you may want to run brew-doctor and brew-update in order to keep Homebrew up-to-date.

Node & NPM

Now that Homebrew can install our core functionality, we’re going to install our core functionality: Node.js. Node is a JavaScript run-time environment, and it is going to be what we start to build our development environment with. This will ‘run’ our design, allowing us to interact with it.

Installing is simple:

brew install node

NPM is another package manager, specific to Node. It will help us install the specific functionality we want our development environment to have, similar to the plugins in Sketch.

Check that Node is installed and working by asking Node what version is installed: run node -v and npm -v.

You can update Node by running brew upgrade node.

Bonus: Yarn

Yarn is yet another package manager. It is a younger, hipper, faster version of NPM. I don’t understand enough about it to comment further, but I’ll be using it at the suggestion of my peers. I’ve heard it’s also best not to mix NPM and Yarn when installing packages.

Install yarn with:

brew install yarn

Git

Git is a version control system, used to track changes on files. GitHub hosts git repositories, and we’ll need it to use GitHub later, when we work on step #3.

Install it with:

brew install git

CSS Pre-Processors

Depending on a project, you may want to use a CSS Preprocessor like Sass or Stylus. Preprocessors allow you to write CSS in different ways, and at runtime convert the CSS to vanilla CSS.

Some preprocessors require or allow for installation on your computer globally.

To install Sass globally:

gem install sass

To install Stylus globally:

yarn add stylus -g

#1.2 — Project-Specific Tools

Now that we have the foundational tools necessary to create our development environment, we can choose additional software to supplement it. We may use these tools with every project, or we may swap them out in certain circumstances. These tools are installed within a project however, and will need to be installed each time a new project is started.

Webpack

Webpack is a module-bundler that handles your dependencies for you. A dependency is a project-specific tool that is needed in order for the code to work properly.

Vue.js

We may choose to use a frontend framework like Vue.js to our design environment. Vue is JavaScript framework for building user interfaces. Frameworks provide you with a template for your application. They are broader, attempting to encapsulate anything you could need.

React.js

Libraries, on the other hand, focus on making it easier for you to create your own application, but leaving much of that work up to you. React.js is a well known library

Bonus: Styled Components

Styled Components is a JavaScript library that allows for styles to be saved in JavaScript instead of in a separate stylesheet. This is good for scoped styles that are not needed elsewhere in a design. I am not sure if Styled Components is meant to be installed globally or not, or if it is just installed in a project.

Resources Used:

Follow the series here:

Introduction — you’re already here
Git