The Designer’s Guide to the Galaxy… (of Code) E02
Among the thousands of stars in the milky way of design articles, one story will froth up above all others — “Should designers learn how to code?”
This is, still… not that story.
Welcome back to our designer-friendly code spaceship! On our first episode, we looked briefly into the history of the World Wide Web and the basics of HTML.
Today, we will be looking into the means for code galaxy exploration, the tools of your hopefully newfound cosmic trade. There are a couple of alternative tools for those willing to venture out into the void of rendering designs on the browser.
- Good old text editors like TextEdit on Mac and Notepad on Windows.
- Web-design tools like Dreamweaver and Aptana.
- IDEs like Sublime Text, Brackets, Atom or Visual Studio Code.
- Code sandboxes like Codepen and JSFiddle.
We already talked about text editors on our first episode, they are good enough to get started, but I would not advise you to stick with them for more than printing an Hello World! on your browser.
With that said, let’s focus on each of your other alternatives!
Web-design tools
Wow, I guess these are still around!
Don’t get me wrong, there are probably a lot of folks out there that still swear by these, as they tan in front of their CRT monitors, with their bleached hair, knee ragged jeans, and flannel shirt, sucking on Pop Rocks in a ditch effort to deal with the mouth sourness, left behind by the death of Flash (try fitting more 90’s references in just one phrase)… 😎
No seriously, I have used plenty of Dreamweaver in my yesterdays, like most designers learning code in the late 90’s and those are fond memories. Honestly, f I had to layout a table based email, I would probably install it on my machine (it‘s’ still part of the Adobe subscription).
These are feature heavy pieces of software that come with visual based editing, live preview, code editors with auto-complete and a lot of bells and whistles, that you will rarely use.
If you want to even stand a chance in a room with “real developers”, pretend they never existed. 😰
Interactive Developer Environments
Also known (by me) as the bread and butter of development, they are supercharged text editors, without all the clutter that plagues our previous contenders.
There are plenty of options to choose from, ranging from paid to 100% open source. Some are even focused on specific languages, like IntelliJ IDEA for Java or PyCharm for Phyton.
In common, they have things like code completion, which means that you can start typing div and the entire HTML element will appear with opening and closing tags, or syntax highlighting, which translates to a colorization of the different types of elements in a coding language (tags will be one color, content another and so on).
I have used a bunch of them over the years, in chronological order Brackets, Sublime Text, Atom and Visual Studio Code (not to be confused with the jurassic Visual Studio).
Due to lingering performance issues when opening long files, I had to take the plunge from Atom, which is owned by the folks at Github, to VS Code that is a Microsoft creation. Funniest thing is that since MS bought GitHub they actually own both of them now. 😜
They are both completely open source and built on top of Chromium, which makes them essentially rendered web pages. That makes them super flexible and customizable, you can tweak them using the same basic knowledge you need to code a website or a web app. Things, like defining UI options with a JSON file or writing your own code snippets are a breeze. You can even open a subset of the Chrome Dev tools to inspect them 😱
They also have plenty of plugins that do things from code beautification, auto-indenting, merge conflict solving to more cosmetic things like UI themes, icon sets and a myriad of other niceties.
In case you were wondering, VS Code seems to be the most popular IDE around right now…
Code sandboxes
If you are not ready to make the jump and join the grownups on the IDE world, you should give these a shot.
They date back to the good old times of W3School, probably one of the oldest sources for learning web languages still in activity and are WYSIWYG editors with a live preview of the your code. Nowadays, the two major ones are Codepen and JSFiddle.
I actually use Codepen, almost every week for prototyping ideas or trying out quick hacks, without having to set up an entire project. You can also share your code easily by just sending someone the link to your sandbox.
Not to mention that they allow you to try different things with ease, from Markdown, to LESS and SCSS, or even JQuery, CoffeeScript and TypeScript without any setups and complications.
By default whatever you do on them is open source, which means you can “fork” other people’s projects (in layman terms you will copy them to your own account) and play with the them as you will.
Before we go, keep in mind that these are my own subjective opinions. Maybe you will actually love Dreamweaver (just try it), or you want to go full commando and use VIM on your command line interface. Whatever works, just go out and code!
So long, and thanks for all the claps 👏
