Eli Weinstock-Herman

What Does a Web Developer Need To Know

Original post posted on Tuesday, June 28, 2011 at LessThanDot.com

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)
IThe effect of doctypes, can code a mostly valid site without looking up the rules
AThe effect of content-types and how to set or debug them
IKnows (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
AAnd most of these: dl/dt/dd, thead, tbody, tfoot, abbr, acronym, applet, object, blockquote, iframe, label, map, optgroup, sup, sub, base, fieldset
ACan name/explain at least 15 of the new HTML5 tags
IKnows the escapes for &, <, >, ©, ASCII characters (though you may have to look up the character code)
ACan explain how HTTP works (headers, redirects, header requests, clientside caching)
IKnows 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.
IDifference between display inline, block, and inline-block and what the default value is for div, span, a, b
IDifference between position static, relative, fixed, absolute
IWhat z-index is and how to use it
AHow z-index is calculated by individual browsers
IDifference between padding and margin
IDifference between display: none and visibility: hidden
IPurpose and use of "media"
IAble to describe and calculate specificity
IKnows at least a few attribute selectors
ACan 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.
IHow to write a basic function, inline event handler, and a non-inline event handler (raw or w/ a package)
ICan write one or or more methods to make an AJAX call with reference material
ACan write one or or more methods to make an AJAX call without reference material
IKnows at least one framework (jQuery, Prototype, YUI, Dojo, MooTools, …)
ICan create classes (function or literal)
AKnows and can use prototype (little 'p', not the framework)
ICan 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.
ACan name at least one site, application, or organization that has an HTML validation tool
ACan name at least one site, application, or organization that has an CSS validation tool
ACan name at least one site, application, or organization that has an SEO scoring tool
ACan 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.
IKnows 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
AKnows more than 4 of the above list
ICan explain difference between stateful and stateless development
ICan explain how sessions work
ICan explain how cookies work
IDifference between GET and POST and how known languages present this information
IPros and cons of client-side vs server-side validation
AUnderstands 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.
ICan build databases, define queries, and debug on at least one major RDBMS
AKnows basics for normalization and can create a basic data model to describe their database
ICan work with at least one NoSQL database or data cache
ICan write match and search regular expressions
ACan 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.
IUnderstands the basics of how the web server (Apache or IIS) works and can create a new site
ACan 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.
AUnderstands and can implement data caching
AUnderstands and can implement page caching
ACan use one or more page performance or load testing tools
ITools/methods and purpose of minification of JS and CSS
AUnderstands 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.
ACan 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.
ISQL Injection - what it is, how to prevent it
ICross site scripting - what it is, how to prevent it
ACross Site Request Forgery - what it is, how to prevent it
IUnderstand hashing, salting, and importance of storing critical information in hashed or encrypted formats
ICookies - 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.
ITable Layout - what it is, why it's bad (at least three reasons)
ACan implement multi-column fixed, fluid, and elastic layouts without reference material
ATable Layout - and why using CSS for table layout (display: table, table-cell, etc) is not bad
ACan explain and implement fixed, fluid (liquid), and elastic layouts
ACan 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.
IKnows purpose of description, keyword tags
IKnows purpose of robots.txt file
AKnows purpose and can implement sitemap.xml file
AYou know the basics for SEO
AYou've implemented some form of browser analytics
AMicroformats
AYou know what WCAG is and how to test conformance
AYou 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.
BBackbutton doesn't work w/ your sites, would prefer to disable it altogether
BYou protect images from download by implementing right click intercepts, layering transparent images in top, etc
IImplement performance tuning without before/after measurements
BTable 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.

Comments are available on the original post at lessthandot.com