Essential Skills in Web
Development
PV219, spring 2024
Interface and User Experience
• Browsers implement standards inconsistently,
make sure your site works reasonably well across
all major browsers.
• At a minimum test against a recent Gecko engine
(Firefox), a WebKit engine (Safari and some
mobile browsers), Chrome (= Opera / Edge), and
your IE browsers (discontinued in Feb 2023).
• Also consider how browsers render your site in
different operating systems.
Interface and User Experience
• Consider how people might use the site other
than from the major browsers: cell phones,
screen readers and search engines, for
example.
• Some accessibility info: WAI and Section508.
• It should be a legal requirement. Utilize: WAIARIA
and WCAG 2 .
Interface and User Experience
• Don't display unfriendly errors directly to the
user.
• Add the attribute rel="nofollow" to usergenerated
links to avoid spam.
• Build well-considered limits into your site
(this also belongs under Security)
Interface and User Experience
• Learn how to do progressive enhancement or
graceful degradation.
• Redirect after a POST if that POST was
successful, to prevent a refresh from
submitting again.
• Don't make me think (by Steve Krug)
Performance
• Implement caching if necessary, understand
and use HTTP caching properly as well as Web
HTML5 Cache Manifest (deprecated in 2021!).
• Optimize images – i.e. don't use a 2000 Kb
image for a repeating background.
• Learn how to gzip/deflate content (deflate is
better).
Performance
• Combine / concatenate multiple stylesheets or
multiple script files to reduce number of
browser connections and improve gzip ability
to compress duplications between files.
• Use CSS Image Sprites for small related images
like toolbars (…because of next point)
• Minimize the total number of HTTP requests
required for a browser to render the page.
Performance
• Yahoo Exceptional Performance – lots of great
guidelines, including improving front-end
performance and their YSlow tool (requires
Firefox, Safari, Chrome or Opera).
• Google page speed (use with browser
extension, or via browser's Developer tool) – a
tool for performance profiling, and it
optimizes your images too.
Performance
• Utilize Google Closure Compiler for JavaScript
and other minification tools.
• Make sure there’s a favicon.ico file in the root
of the site, i.e. /favicon.ico. Browsers will
automatically request it, even if the icon isn’t
mentioned in the HTML at all.
• If you don’t have a /favicon.ico, this will result
in a lot of 404s, draining your server’s
bandwidth.
Technology
• Understand HTTP and things like GET, POST,
sessions, cookies, and what it means to be
"stateless".
• Write your HTML and CSS according to
the W3C specifications and make sure
they validate.
• Understand how JavaScript is processed in the
browser (e.g. event loop).
Technology
• Understand how the JavaScript sandbox
works, especially if you intend to use iframes.
• JavaScript can and will be disabled, and that
AJAX is therefore an extension, not a baseline.
• NoScript is becoming more popular, mobile
devices may not work as expected, and
Google won't run most of your JavaScript
when indexing the site.
Technology
• Learn the difference between 301 and 302
redirects (this is also an SEO issue).
• Consider using a Reset Style Sheet or
normalize.css.
• Consider using a service such as the Google
Libraries API to load frameworks (or any
another suitable CDN).
Bug fixing
• Understand you'll spend 20 % of your time
coding and 80 % of it maintaining, so code
accordingly.
• Set up a good error reporting solution.
• Have a system for people to contact you with
suggestions and criticisms (always accept
feedback).
Bug fixing
• Document how the application works for
future support staff and people performing
maintenance.
• Make frequent backups! (And make sure those
backups are functional).
• Have a restore strategy, not just a backup
strategy.
Bug fixing
• Use a version control system to store your
files, such as Subversion, Mercurial or Git.
• Don't forget to do your Acceptance Testing.
• Frameworks like Selenium can help. There are
also many alternatives: Robot Framework,
PhantomJS, Cypress.io or BrowserSync.
Bug fixing
• Make sure you have sufficient logging in place
using frameworks such as log4j, log4net or log4r.
• If something goes wrong on your live site, you'll
need a way of finding out what.
• When logging make sure you capture both
handled exceptions, and unhandled exceptions.
Report / analyze the log output, as it'll show you
where the key issues are in your site.