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.
With that said, let’s focus on each of your other alternatives!
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.
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).
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…
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 👏
Buy me a coffee if you liked what you read!
Tiago Almeida on Buy Me A Coffee
A Portuguese Designer and Unicorn in Training™, living the lagom life in Stockholm, Sweden. Welcome to my BMC page. If…
The Designer’s Guide to the Galaxy… (of Code) E01
This is where our story begins, learn about the humble beginnings of the web, the creation of HTML and the basics of writing it.
The Designer’s Guide to the Galaxy… (of Code) E03
A not really in-depth, but still deep enough, look into the anatomy of an HTML page.
Further online reading
How Dreamweaver Got Its Name - The History of the Web
When Kevin Lynch started going around and talking to web designers, he wrote everything down. He was interested in the…
A Moment In Time with Editors - The History of the Web
Let's go back to 1996, in Boston, at the annual Macworld Expo. Not a great year for Apple mind you. It wouldn't be…