Highly productive web developers are T-shaped

Highly productive developers have a deep understanding of their specialization and are incredibly focused. They are rarely confused: they know what’s going on in their project and can find the source of a problem in a flash. They are also skilled in a variety of other subjects and can discuss the relative merits of other technologies with ease.

How can you become this way and be productive in your own work? If you want this kind of skills, you must plan to develop your knowledge in a way that allows you to be T-shaped. Put simply, a T-shaped programmer has strong core knowledge in a domain that grounds them and allows them to be effective, which is the base of the T, and other skills in a wide variety of subjects, which is the bar of the T.

I first heard of the concept of being T-shaped in an article about success (http://www.artofmanliness.com/2013/04/09/to-succeed-in-work-and-life-be-mr-t/) on the the Art of Manliness blog. This is how I’m structuring my own growth, so I was glad to be able to put a name onto it. I also believe this is the most efficient way to develop your skills. Being T-shaped is not something that you’ll achieve in a year or two: rather, this is a lifelong pursuit of growth.

This is also a good way to invest in your future: if you only have superficial knowledge of many code bases and frameworks, you’re always starting over again without building a strong base of skills. You have to go in depth in a at least one area: once you have a strong grounding, moving to new languages and frameworks will be faster and more effective since you’ll have a stronger understanding of programming itself to start with.

For a web developer, what is a good plan you can follow to become T-shaped and ultimately become a more productive developer? In my experience, the following knowledge is required as a web programmer if you want to build a proper base for your T. When you’ll have those skills, you’ll be a strong web developer and you won’t fear missing out on new technologies and trends: you’ll have the evergreen knowledge that will allow you to learn new stuff faster.

• Building pages in HTML and understanding how they are rendered, how they behave in the browser and the DOM (Document Object Model) that is used to represent them. Regardless of the language used to render pages, it’s always HTML in the end with some CSS and JavaScript.
• Understanding what happens at the HTTP level when you request a page or sends information, and how those requests are structured so you can debug a wide variety of problems and understand what’s going on in general.
• Styling your HTML with CSS to know how styles behaves and how they are applied to elements.
• Having strong knowledge in at least one programming language used to build web pages such as PHP, Ruby, C# or Python.
• Using debugging tools such as Firebug or the Chrome developer tools and the debugger for your language of choice to solve problems efficiently.
• Understanding JavaScript language itself, which is the language used to code logic on the client (browser). There are many frameworks that make using it easier, but understanding how those frameworks are made will help you adapt easily to any of them.
• Understanding how data is stored in a database and how to retrieve it or manipulate it using SQL queries. This is often abstracted in modern frameworks, but sooner or later you’ll need to look at the real data to debug.
• Sticking to good programming practices in commenting and structuring your code, and understanding how to manage your time efficiently while coding.

Notice that I didn’t include any knowledge about frameworks, API or libraries in there: those change all the time, and you’ll pick them up easily if you base is strong. You can’t commit all the details of the APIs and libraries to your memory, but you can master them basic building blocks and use them to understand the APIs as needed.

Once you filled up the base of the T, you can opt to develop knowledge in additional areas that will allow you to leverage your core skill more efficiently and add to your body of experience. Those skills don’t need to be directly relevant to your work: their role is to add more depth to your knowledge. You will fallback on those skills to fix bug or respond to demands that are normally outside your job description but that will allow you to grow. Anything that you’re curious about and that’s not directly linked to your daily routine is a good fit here. This is the time for dabbling and short-term experiments!

Here are a few ideas to get you going:

• Server-side and client-side frameworks, including popular CMS like WordPress or Drupal
• Other programming languages
• CSS preprocessors
• Creating and editing images
• Designing good user experiences (UX)
• Managing various kinds of servers
• In-depth knowledge of your favorite IDE or text editor
• Advanced computer science concepts like big data or complex algorithms
• Coding for the desktop or mobile
• Soft skills such as writing and speaking at conferences

You don’t need to see these two lists as a huge mountain to climb: they are there to give your ideas of what your skills may look like in many years if you’re aiming to master web development and be highly productive at it. You need to build your own unique plan depending on your goals as a developer so you can aim in the right direction even if technology keeps changing.