Slides from 'Back to Basics' quarterly theme presentation @Version 1 covering: general front-end best practice guidelines,HTML markup, CSS, Java Script, Accessibility, Performance, Cross-browser compatibility, Code Reviews and Tools & resources
7. General Guidelines
• All front-end code should display clear separation of presentation, content,
and behaviour
8. General Guidelines
Markup
• Markup should be well-formed, semantically correct
– Describe the content rather than the way it is presented.
– Provide Meaning
• Valid
– e.g. W3C Validatior
– Identify missing tags, broken links
Semantic Non-Semantic
<form>, <img>, <section> <div>, <span>
9. General Guidelines
• JavaScript should progressively enhance the experience
– Make a static webpage interactive and enhance usability
– Load on Demand
• Response Times
– Test Everything
• The environments
• The displays
10.
11. HTML Mark-up
General Guidelines
• Doctype
– <!DOCTYPE html>
• Structure and Outline of a Document
• Don’t use tables for layout
• Use <p> instead of </br>,  
12. HTML 5
General Guidelines
• Comment on closing tags to indicate what element you are closing
• Continuously Test
• Readability vs Compression
– Maintenance
13.
14.
15. HTML 5
New Form Types
• Email, date, range, tel, required
• For further info, go to
– http://www.w3schools.com/html/html5_intro.asp
18. CSS
General Guidelines
– Use External style sheets
– Include CSS files in the HEAD of the document
– Establish standards for coding style and practices
– Ensure consistency across browsers
• normalize.css to make rendering more consistent across browsers.
26. CSS
Selectors
• Naming conventions
– Use a name that describes what it is rather than what it looks like
• Classes Vs ID’s
• Selectors
• .class and #id
• Grouping Selectors
37. Java Script
Should progressively enhance the experience
• General Guidelines
– Stored in an External .js file
– Include at the end of the document
– Comment your code and use Whitespace
– Formatting of JavaScript Code
– Validate your code
• http://www.jslint.com/
38. Java Script
General Guidelines
• Never End a Definition with a comma
• Use === Comparison
– The == comparison operator always converts (to matching types) before
comparison.
– The === operator forces comparison
of values and type:
40. Java Script
Global Variables
• Global Scope Vs Local Scope
• Minimize the number of global variables
• Local variables are not available outside the function
41. Java Script
• Variables
– Lowercase or camelCase
• Name Logically
– popUpWindowForAd rather than myWindow
• Bad Examples
– X1, createNewMemberIfAgeOverTwentyOneAndMoonIsFull
45. Java Script
Scripts
• Plugins – plugin.js and script.js
– Advantage
• Give the site greater functionality/ Dynamic
– Disadvantage
• Too many plugins can have a negative effect on performance
47. Image credit: Travelbag Ltd (https://www.flickr.com/photos/98585738@N07/10346101216
Accessibility
Reality check:
Accessibility rights are growing teeth
Image credit: Travelbag Ltd https://www.flickr.com/photos/98585738@N07/10346101216
48. Accessibility
• Web Content Accessibility Guidelines (WCAG)
• Ireland Disability Act 2005:
Where a public body communicates in electronic form, the
communication must be as far as practicable, "accessible to
persons with a visual impairment to whom adaptive
technology is available"
“
• W3C Web Accessibility initiative – Easy Checks:
http://www.w3.org/WAI/eval/preliminary
49. Accessibility – Easy Checks
Page title
Image text alternatives ("alt text")
<img src="pointer_to_image.png" alt=“describe the meaning of the image">
Correct markup http://validator.w3.org/
50. Accessibility – Easy Checks – cont.
Color contrast
Color Contrast Checker
http://webaim.org/resources/contrastchecker/
52. Accessibility
Code checks do not guarantee that people with
disabilities will be able to use your website.
• Requirements need to be defined by the customer
• Train developers and testers to evaluate
• Build best practice into development process
• Use accessibility evaluation tools
• Involve users in evaluating
54. Performance
Follow Yahoo Performance Guidelines
• Put stylesheet links at the top
(HEAD)
• Put scripts at the bottom
• Minify JS and CSS files
• Automate the two above
• Optimise JavaScript execution
• Reduce number of HTTP requests
– Combine CSS files together
– Combine JS scritps
– Use CSS sprites
– Caching
• Use a Content Delivery Network
• Reduce image size (px and KB)
55. Test it - YSlow, Page Speed, Hammerhead, MSFast, …
63. Performance – CSS sprites
Create manually:
• SpritePad
• ZeroSprites
• SpriteCow
• … and many more – google it!
OR automate:
• grunt-spritesmith
• node-spritesheet
• dr-grunt-svg-sprites
• ... and many others.
64. Performance
• Performance can be subjective
• It’s about managing customer’s expectations – agree what’s acceptable.
• Communicate performance impact during design phase or changes
Things to remember:
66. Cross-Browser Compatibility
What do we support?
There are two major truths when it comes to in-browser experience:
1. Everyone wants the best experience possible (support them all!).
2. Everything added to the page slows it down.
71. Cross-Browser Compatibility
Testing is the key
Emulators vs virtual machines vs actual device
https://modern.ie
Firefox portable apps
Opera archive
Chome updates itself
Devs and testers should have access to the same setup
73. Code Reviews
• It's about mitigating risk
• Catches bugs that can affect multiple pages
• It’s ‘you time’ and it’s about your professional development
Why do it
Peer code reviews are the single biggest thing you can do
to improve your code
- Jeff Atwood (Coding Horror)
“
75. Code Reviews
The Internet is a cobweb of different technologies cobbled
together with duct tape, string and chewing gum.
It's not elegantly designed in any way, because it's more of a
growing organism than it is a machine constructed with intent.
- Mattias Petter Johansson, Developer at Spotify
“
76. Image credit: Daniel Levy http://www.bedeliberate.com/use-giants-to-see-further/
-GOOGLE IT