What is a web developer? Recently I was involved in a discussion about the skills a web developer is expected to have and how interesting it has been to watch common bad practices (like table layout and SQL injection) continue to spread. So in the nature of Denis's What does a SQL Server developer need to know? post, I present the web developer breakdown.
What Level Am I?
Rather than try and attach years of experience to this scale, I'm going to present a list of major areas and skills, questions, or topics in each area. I've tried to capture whether I feel a skill is required to be an Intermediate or Advanced web developer.
I put this list together based on my own experience, 20-30 web developer interview lists, and some feedback from others.
Beginner: Knows some of the items on the list
Intermediate: Knows most intermediate items and some advanced
Advanced: Knows almost everything on the list
| HTML |
|---|
| The ability to produce clean, valid, maintainable HTML is critical for a web developer. Current standards include HTML 4.01 (1999), XHTML 1 (2000), and the beginning of HTML 5 (2011) |
| I | The effect of doctypes, can code a mostly valid site without looking up the rules |
| A | The effect of content-types and how to set or debug them |
| I | Knows (and use) all of these without looking them up: html, head, title, meta, script, style, link, body, a, strong, em, ul, ol, li, table, tr, th, td, h1-5, input, select, option, img, p, span, div, pre, textarea |
| A | And most of these: dl/dt/dd, thead, tbody, tfoot, abbr, acronym, applet, object, blockquote, iframe, label, map, optgroup, sup, sub, base, fieldset |
| A | Can name/explain at least 15 of the new HTML5 tags |
| I | Knows the escapes for &, <, >, ©, ASCII characters (though you may have to look up the character code) |
| A | Can explain how HTTP works (headers, redirects, header requests, clientside caching) |
| I | Knows how to link to a position in a page |
| CSS |
|---|
| Cascading Style Sheets are used to describe the way an HTML documented should be presented. CSS 1 was released in 1996 and the latest published recommendation is CSS 3. |
| I | Difference between display inline, block, and inline-block and what the default value is for div, span, a, b |
| I | Difference between position static, relative, fixed, absolute |
| I | What z-index is and how to use it |
| A | How z-index is calculated by individual browsers |
| I | Difference between padding and margin |
| I | Difference between display: none and visibility: hidden |
| I | Purpose and use of "media" |
| I | Able to describe and calculate specificity |
| I | Knows at least a few attribute selectors |
| A | Can describe pseudo-classes and know many without looking them up |
| Javascript |
|---|
| Javascript has become the defacto scripting language for web browsers, one of only a few ways to create client-side interactions consistently across available browsers. JavaScript was first shipped in 1995 as part of the Netscape browser. |
| I | How to write a basic function, inline event handler, and a non-inline event handler (raw or w/ a package) |
| I | Can write one or or more methods to make an AJAX call with reference material |
| A | Can write one or or more methods to make an AJAX call without reference material |
| I | Knows at least one framework (jQuery, Prototype, YUI, Dojo, MooTools, …) |
| I | Can create classes (function or literal) |
| A | Knows and can use prototype (little 'p', not the framework) |
| I | Can dynamically find and add elements to the page using DOM or a framework (without looking it up) |
| Tools |
|---|
| Along with standard languages, there are numerous tools available to help validate, evaluate, and improve existing websites. Similar to a spell-checking tool in a word processing application, these tools can help us catch errors and oversights in our websites. |
| A | Can name at least one site, application, or organization that has an HTML validation tool |
| A | Can name at least one site, application, or organization that has an CSS validation tool |
| A | Can name at least one site, application, or organization that has an SEO scoring tool |
| A | Can name at least one site, application, or organization that has an Accessibility evaluation tool |
| Server-Side Programming |
|---|
| The shift to dynamic, server-generated websites in the mid-to-late 90's was responsible for shifting the focus of the web from document retrieval to interactivity, commerce, and services. |
| I | Knows at least 2 server-side technologies - Perl, PHP, ASP 3, JSP, Java Servlets, CFM, ASP.Net (WebPages, Web Forms, MVC), Ruby on Rails, Python (WSGI, CGI, mod_python), etc |
| A | Knows more than 4 of the above list |
| I | Can explain difference between stateful and stateless development |
| I | Can explain how sessions work |
| I | Can explain how cookies work |
| I | Difference between GET and POST and how known languages present this information |
| I | Pros and cons of client-side vs server-side validation |
| A | Understands the basics of (SOAP) web services, how to implement them, and how they work |
| Data |
|---|
| Most web applications have some form of data store behind them. Several forms of storage and caching mechanisms exist and being able to build a basic system often requires at least a basic level of knowledge in these areas. |
| I | Can build databases, define queries, and debug on at least one major RDBMS |
| A | Knows basics for normalization and can create a basic data model to describe their database |
| I | Can work with at least one NoSQL database or data cache |
| I | Can write match and search regular expressions |
| A | Can write match and search regular expressions without a reference in more than one language |
| Web Server |
|---|
| Using a server-side technology to generate HTML generally requires a web server. The two largest install bases are Microsoft IIS 7.5 and Apache 2.2. |
| I | Understands the basics of how the web server (Apache or IIS) works and can create a new site |
| A | Can explain URL rewriting and implement on at least one system |
| Performance |
|---|
| Tuning a website to run in an optimal fashion can sometimes be the difference between paying for a single server or multiple servers, between a responsive site and one that fails under load. |
| A | Understands and can implement data caching |
| A | Understands and can implement page caching |
| A | Can use one or more page performance or load testing tools |
| I | Tools/methods and purpose of minification of JS and CSS |
| A | Understands and uses CDNs when possible |
| Testing |
|---|
| As the technology behind the web has developed, tools to help automate some of the repetition involved in testing websites has likewise evolved. |
| A | Can use one or more automated tools for interface testing |
| Security |
|---|
| As recent news stories have reminded us, security is an ongoing requirement for websites. Understanding the basics of security can help us build security in from day one rather than trying to squeeze it in at the end. |
| I | SQL Injection - what it is, how to prevent it |
| I | Cross site scripting - what it is, how to prevent it |
| A | Cross Site Request Forgery - what it is, how to prevent it |
| I | Understand hashing, salting, and importance of storing critical information in hashed or encrypted formats |
| I | Cookies - Understand session hijacking and dangers of storing user information or identification |
| Design Principles |
|---|
| Being able to implement common design patterns without restoring to hacks is an important part of being a web developer (as opposed to a hobbiest). While it may prove impossible to build a site without some form of hack, hacks should not be the only tool in the toolbox. |
| I | Table Layout - what it is, why it's bad (at least three reasons) |
| A | Can implement multi-column fixed, fluid, and elastic layouts without reference material |
| A | Table Layout - and why using CSS for table layout (display: table, table-cell, etc) is not bad |
| A | Can explain and implement fixed, fluid (liquid), and elastic layouts |
| A | Can implement multi-column fixed, fluid, and elastic layouts without reference material |
| Meta |
|---|
| Metadata (data about data) is critical to helping people and search engines find resources in our sites and applications. |
| I | Knows purpose of description, keyword tags |
| I | Knows purpose of robots.txt file |
| A | Knows purpose and can implement sitemap.xml file |
| A | You know the basics for SEO |
| A | You've implemented some form of browser analytics |
| A | Microformats |
| A | You know what WCAG is and how to test conformance |
| A | You know what semantic markup is |
| Disqualifiers/Limiters |
|---|
| These are topics I consider to be critical to advancement. They reflect common misunderstandings or bad practices that an experienced web developer has to grow past in order to advance their skillset. |
| B | Backbutton doesn't work w/ your sites, would prefer to disable it altogether |
| B | You protect images from download by implementing right click intercepts, layering transparent images in top, etc |
| I | Implement performance tuning without before/after measurements |
| B | Table layout |
Note: Disqualifiers indicate that you won't progress past [B]eginner or [I]ntermediate levels until you stop doing them and understand why doing them was a bad idea
What's Missing
There are several things that were intentionally left out of this list. Some were hard to quantity in a general manner, others I was unsure how relevant they were. And I'm sure people will be kind enough to add additional oversights and revisions below.
Missing Categories:
- Level of knowledge with server-side languages
- Project management skills
- Documentation and Modeling skills
- Design and Graphics skills
- Application Lifecycle Management - Source Control, Deployment, etc
Extra items that didn't make it in:
- Can implement RSS and ATOM feeds
- Can implement a web farm
- Implemented single-signon (openID, SAML, etc)
- Knows how to implement XML data islands (still relevant?)
- Knows how to create DTDs and/or XSDs
- Can write regular expressions without a reference
- Knows relevant tools for Yahoo (SiteExplorer), Google, Bing for managing site information
- Schema.org - it belongs in the Meta category but I didn't know what level of skill, knowledge, or adoption I should include considering it's newness and several other factors
There is also the fact that we often get caught up maintaining or even adding on to a site that violates many of the skills and standards you see in this list. This doesn't prevent us from writing good, clean, semantic sites the rest of the time and being forced to write poor code does not make on inherently less skilled.
A Brief Digression, or Why an App Dev is Not a Web Dev
At one point web development was seen as less exciting and far less complex than application development. It is still seen as extremely similar to application development, so much so that it is quite normal to hire a good or great application developer and expect them to be a good or great web developer.
Unfortunately it doesn't quite work that way, as web development has grown extremely complex since the first dynamic sites started showing up in the late 90's. Doubly unfortunately, web development is based on a stateless model instead of the stateful one most application developers are used to, uses a fluid layout instead of the grid layout, and sneaks a lot of extra communications and caching into the mix. This is a series of paradigm shifts not unlike the one between procedural, object oriented, and functional programming.
