front end development best practices
TRANSCRIPT
Our Awards:
Front-end Development Best PracticesBack to Basics
Karolina Coates, Pádraig Buckley25/09/2014
Our Awards:
AgendaGeneral guidelinesHTML markupCSSJava ScriptAccessibilityPerformanceCross-browser compatibilityCode ReviewsTools & resources
Introduction to Front End Development
This is not about forcing you to believe what I
believe
Image & slide credit: Christian Heilmann
Introduction
This is the standard we expect.
Please contribute.
General Guidelines
Introduction
General Guidelines
Browser Device Resolution
General Guidelines
• All front-end code should display clear separation of presentation, content,
and behaviour
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>
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
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>,  
HTML 5
General Guidelines
• Comment on closing tags to indicate what element you are closing
• Continuously Test
• Readability vs Compression
– Maintenance
HTML 5
New Form Types
• Email, date, range, tel, required
• For further info, go to
– http://www.w3schools.com/html/html5_intro.asp
CSS
Best Practices
• Create a Style guide
– Headings
– Buttons
– Colour Scheme etc.
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.
CSS
Inline CSS
CSS
Formatting of CSS
CSS
CSS Box Model
padding: 20px 80px 10px 40pxmargin: 20px 80px 10px 40px;
CSS
Clearfix
CSS
Clearfix
CSS
Clearfix
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
CSS
• Specificity
CSS
Specificity Example
CSS
Specificity Example
CSS
Which CSS rule has a power to override them all?
CSS
!Important Tag
• When to use
• Never unless they are absolutely necessary
• Harder to maintain style sheets
CSS
! Important Tag
• When it can be used
– Temporarily fix an urgent problem
– Override inline styles
CSS Inheritance & Cascading
• Styles can be inherited from a parent
• Overriding styles
CSS
Developing Responsive Applications
and many more… google it
CSS
Media Queries
• Change styles depending on a number of properties
– Size
– Resolution
– Orientation
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/
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:
Java Script
Global Variables
Java Script
Global Variables
• Global Scope Vs Local Scope
• Minimize the number of global variables
• Local variables are not available outside the function
Java Script
• Variables
– Lowercase or camelCase
• Name Logically
– popUpWindowForAd rather than myWindow
• Bad Examples
– X1, createNewMemberIfAgeOverTwentyOneAndMoonIsFull
Java Script
Avoid Mixing Technologies
Java Script
Over Reliance on JavaScript
Java Script
Debugging
– Can help refine code and loading speed
– Use developer tools
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
Accessibility
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
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
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/
Accessibility – Easy Checks – cont.
Color contrast
Color Contrast Checker http://webaim.org/resources/contrastchecker/
Accessibility – Easy Checks – cont.
Headings
[…] etc.
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
Performance
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)
Test it - YSlow, Page Speed, Hammerhead, MSFast, …
Performance - Image size (px)
Live demo
Performance – Image size (KB)
Image formats – JPG vs GIF vs PNG
Performance
Image formats – a quiz!Match a file format with use scenario:
Size matters + = ?
Size matters + = ?
+ transparent background = ?
Image credit: Huffingtonpost http://www.huffingtonpost.com/2011/05/31/the-hardest-simpsons-quiz-of-all-
Performance – CSS spritesPerformance – CSS sprites
Image credit:Steve Jurvetson https://www.flickr.com/photos/jurvetson/10793760553
Performance – CSS sprites
Image credit: DryBowser455 http://s1037.photobucket.com/user/DryBowser455/media/NyanCatSprite.png.html, Giphy.com
=
Performance – CSS sprites
Image credit: Kasey Jean Robinson http://www.kaseyjeanrobinson.com/tech/what-is-a-css-sprite/
Performance – CSS sprites
Image credit: CSS Tricks http://css-tricks.com/css-sprites/
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.
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:
Cross-Browser Compatibility
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.
Cross-Browser Compatibility
What do we support?
Cross-Browser Compatibility
Browsers
Devices
Resolutions
Cross-Browser Compatibility
Image credit: Gideon https://www.flickr.com/photos/malias/73169727
Cross-Browser Compatibility
Define & communicate what you support
• Time
• Effort
• Cost
Image credit: Jess
Cross-Browser Compatibility
Testing is the key
Emulators vs virtual machines vs actual device
https://modern.ieFirefox portable appsOpera archiveChome updates itself
Devs and testers should have access to the same setup
Code Reviews
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)“
Final word
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
“
Image credit: Daniel Levy http://www.bedeliberate.com/use-giants-to-see-further/
-GOOGLE IT
Tools & Resources
Tools & Resources
• W3C CSS Validation Service
• HTML Validation firefox extension
• CSS validator
Validators
Browser Developer Tools
• Chrome Developer Tools
• IE Developer Tools (F12)
• Firefox Firebug
• Opera Dragonfly
CSS Sprite generators
Manual:
• SpritePad
• ZeroSprites
• SpriteCow
Automatic:
• grunt-spritesmith
• node-spritesheet
• dr-grunt-svg-sprites
• ... and many others.
Front-end templates & frameworks
• http://cssframeworks.org/
• Bootstrap
• HTML5 Boilerplate
• Topcoat
References
• http://isobar-idev.github.io/code-standard
• http://jstherightway.org/