From IDE to Plain Text Editor

Clients, friends, acquaintances, and hobbyist developers will often ask me “what program” do you use to make websites. No matter how many times I hear the question I’m always taken back. I don’t know how to answer that question. Inevitably, each time I respond in an annoyed/confused tone “What do you mean”? Professionals talking amongst themselves will speak about IDE’s, text editors, terminal emulators, and other specifics, each of which are actually far simpler tools than the one that the less skilled are hoping you’ll tell them is the best. So how is that we go from complex IDE’s like Dreamweaver to simpler tools like text editors as we get better at our craft?

In most professions, as your competence increases so does the complexity of the tools you use. In the fields of construction, gardening, and other manual-labor-type jobs you see beginners starting off using shovels, pruning shears, and a lot of bare hands. As they become more skilled the power tools come out and they become proficient with those power tools and better, often more complex, versions of the same tools begin to be used in their place. A pilot will learn to fly in a Cessna (a small plane) and work their way up to a 7XX series Boeing jumbo jet. The vast majority of skills will start beginners off with simple tools and as the person grows in skill they graduate to more and more complex tools.

This makes sense. I recently wrote about cargo cult web development where one of my conclusions was that as a developer grows in skill they will begin to learn how the tools and techniques they use on a daily basis work even if they don’t quite understand what or why they’re doing something when they first begin. As any beginner progresses to an intermediate or expert level of competence it’s expected that they understand the concepts underlying what they’re doing. This is what allows them to begin using more complex tools. For example, a beginner guitarist may not understand how the tremolo arm on their electric guitar works but they know what happens when they use it. As they learn more about their instrument their knowledge of that part of their instrument will increase which in turn allows them to be more deliberate in their use of the instrument and how its maintained. They graduate to more complex tools that requires less work.

As a developer it seems as though we progress backwards. A lot of us (especially those who are self-taught) begin using tools like Microsoft Frontpage, iWeb (which I believe is now dead), Word docs that are saved as HTML, or any number of DIY WYSIWYG editors. With time our skills grow and, hopefully, we begin to wonder how these tools are working under the hood. I’m not talking about how Word saves things to HTML but how HTML itself works. Once you go down that rabbit hold a whole new world opens up. Suddenly you find yourself using Notepad in place of Dreamweaver then Textmate instead of Notepad and so on. The more you learn the more tools you begin to use. You go from using these huge monolithic pieces of software that do everything under the sun to a set of separate tools that you make work together on your own. As an example, here is a sample progression I’ve seen:

Stage 0 Developer: WYSIWYG

This stage is almost pre-beginner. A person who wants to put a website together but doesn’t care much for knowing how the web works. They’re content to use drag-and-drop tools to create websites as long as it’s easy and there’s nothing to learn. The tools they use are:

  • Uses Frontpage, MS Word, or iWeb to cobble together drag-and-drop websites

Stage 1 Developer: Discovers HTML

Frustrated with the inability of their Stage 0 software to create the website they had pictured in their mind’s eye, this person does a bit of research and learns that HTML is the “language” that drives the web and they begin to learn the basics of it.

  • Gets a copy of Dreamweaver because the site says “Professionals” use it
  • Is frustrated by the limitations of drag and drop
  • Has little or no understanding of CSS yet (if they even know it exists)
  • Their toolbox still only consists of a text editor and a browser for the most part

Stage 2 Developer: Says “Dreamweaver sucks”

It’s interesting that a lot of people who continue to use Dreamweaver long term are actually very terrible developers who can only be counted on to change small amounts of styling and markup on simple websites. Stage 2 developers hate Dreamweaver but only because its either too complicated or too limiting. This person begins to understand the very basics of how the web works and can use FTP to get static HTML online and begins to upgrade their tool sets.

  • Uses Notepad instead of Dreamweaver
  • Is introduced to JavaScript which they use irresponsibly
  • Can write markup and styling without tables. Everything is ugly but it’s beginning to look like a website designed by a toddler
  • Is frustrated that they have more control but still have uglier sites than they did before with WYSIWYG
  • Understands the benefit of using a plain text editor over a monolithic IDE

Stage 3 Developer: Thinks they’re a pro

Stage 3’s make a huge leap forward in skill and it makes them feel as though they’re true pros. Unfortunately, this is the stage where a lot of people get stuck and don’t improve beyond. I almost stagnated here myself. These developers will begin taking money for websites which is very unfortunate for their customers. Their tooling is more complex and they’re masters at finding code to copy and paste. Note how many more skills they have.

  • Begins using a real text editor like Sublime Text or anything with autocompletion and syntax highlighting
  • Runs a server locally with MAMP, WAMP, XAMPP
  • Understands that the web basically runs on Linux servers and knows just enough about them to barely log into a VPS and get a site running (they’ll usually opt for something like Digital Ocean’s pre-build droplets that start you off with a fully working server from the start)
  • Knows enough PHP to code a Wordpress theme
  • May use a CSS preprocessor and thinks it’s awesome
  • Uses a collection of tools to automate some parts of their build process
  • Relies heavily on GUI applications
  • Can run a few commands in the terminal

Stage 4 Developer: You can hire this person

This person is somewhere between an intermediate and an expert. They may not know everything but they’re capable of learning it. They’ve gotten past the stagnation danger zone in Stage 3 and have proven they can keep up with technology and industry changes. They’re proficient in a handful of languages and can make their way around most languages they’re unfamiliar with. These people work as developers for various companies around the world. They’re not the cream of the crop but you can hire these people.

  • Is comfortable using the command line to make computers to repetitive tasks for them
  • Can automate effectively
  • Knows when automation is necessary and when it’s a waste
  • Has mastered front-end development, back-end development, or generalist development
  • Is proficient in modern development practices (if you use these words they’ll know what they are, how they work, and may have used them: scrum, agile, version control, scripting, compiling, preprocessing, refactoring, TDD, etc.)
  • Has settled on a tool set that includes a variety of different purpose-built tools working in synchrony (for example, they’re using Grunt to optimize, preprocess, and create a distribution build on the front-end or uses Rake to automate Ruby app deployment, setup, and maintenance) and occassionally updates it when best practices change over time
  • This person can adapt to development practices different than what they’re used to and can get up to speed on just about anything as they understand basic programming concepts and how to apply them to different technologies and tools

Stage 5 Developer: You are not this person

I am not this person. These are the people you look up to. The Jeff Zeldman’s, Paul Irish’es, and the guy who created Normalize.css. Few of us ever get here but we can all get real close if we try. I can’t really say much about these people because I’m not one of them. All I can say is:

  • Will write the tools you use
  • Will pioneer the techniques you’ll be reading about
  • Are the people you follow. Are influential

How did we get here?

So how it is that as you progress in experience the tools you use become simpler. It would be logical to think that using something like Dreamweaver with its build-in previews, snippets, and all-in-one design would be far superior to wiring together 15 different command line tools to run servers, process Coffeescript/LESS/SASS, optimize images, etc., etc., all the way to deploying your site. Hell, it usually takes a day to get the wiring together before you can actually start working!

The answer is that the monoliths get in your way. There are so many different ways to build a website which all depend on what you’re trying to accomplish. No one tool can ever be flexible enough to handle everyone’s use case. That’s why we’ve created a number of single-purpose tools that we wire up ourselves in order to make our lives easier. As most of us settle on a tool set we create boilerplate code that we share between each other so that we don’t have to spend a day getting the wiring right before we can start building.

In reality, the complex tools like Dreamweaver actually the simple ones in that they can only do a few things well and once you need more flexibility you grow out of them. Our most complex tools are the most limiting and the ones that serve a single purpose are the most flexible.

When someone asks me “what program do you use to make a website”, I answer – after I get over the disdain I have for that question and the ignorance it implies – “a text editor” to which the person usually replies “what’s that”. I then have to explain to them that it’s like using Notepad and I do everything from scratch and that “no, professionals don’t use Photoshop and I haven’t heard of the WYSIWYG tool you use to create websites”. Its always my hope that this answer makes the person curious to learn HTML and move on to Stage 1.

Web design, Web development

« Random issues on OS X after installing Xcode Sublime Text Keyboard Shortcuts »