Front end development best practices
•
1 like•776 views
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
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Front end development best practices
Similar to Front end development best practices (20)
Recently uploaded
Recently uploaded (20)
Front end development best practices
- 1. Our Awards: Front-end Development Best Practices Back to Basics Karolina Coates, Pádraig Buckley 25/09/2014 Our Awards:
- 2. Agenda General guidelines HTML markup CSS Java Script Accessibility Performance Cross-browser compatibility Code Reviews Tools & resources
- 3. Introduction to Front End Development This is not about forcing you to believe what I believe Image & slide credit: Christian Heilmann
- 4. Introduction This is the standard we expect. Please contribute.
- 6. Introduction General Guidelines Browser Device Resolution
- 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
- 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
- 15. HTML 5 New Form Types • Email, date, range, tel, required • For further info, go to – http://www.w3schools.com/html/html5_intro.asp
- 17. CSS Best Practices • Create a Style guide – Headings – Buttons – Colour Scheme etc.
- 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.
- 19. CSS Inline CSS
- 22. CSS CSS Box Model padding: 20px 80px 10px 40pxmargin: 20px 80px 10px 40px;
- 23. CSS Clearfix
- 24. CSS Clearfix
- 25. CSS Clearfix
- 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
- 30. CSS Which CSS rule has a power to override them all?
- 31. CSS !Important Tag • When to use • Never unless they are absolutely necessary • Harder to maintain style sheets
- 32. CSS ! Important Tag • When it can be used – Temporarily fix an urgent problem – Override inline styles
- 33. CSS Inheritance & Cascading • Styles can be inherited from a parent • Overriding styles
- 34. CSS Developing Responsive Applications and many more… google it
- 35. CSS Media Queries • Change styles depending on a number of properties – Size – Resolution – Orientation
- 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
- 42. Java Script Avoid Mixing Technologies
- 43. Java Script Over Reliance on JavaScript
- 44. Java Script Debugging – Can help refine code and loading speed – Use developer tools
- 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
- 46. Accessibility
- 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/
- 51. Accessibility – Easy Checks – cont. Headings […] etc.
- 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
- 53. Performance
- 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, …
- 56. Performance - Image size (px) Live demo
- 57. Performance – Image size (KB) Image formats – JPG vs GIF vs PNG
- 58. 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-
- 59. Performance – CSS spritesPerformance – CSS sprites Image credit:Steve Jurvetson https://www.flickr.com/photos/jurvetson/10793760553
- 60. Performance – CSS sprites Image credit: DryBowser455 http://s1037.photobucket.com/user/DryBowser455/media/NyanCatSprite.png.html, Giphy.com =
- 61. Performance – CSS sprites Image credit: Kasey Jean Robinson http://www.kaseyjeanrobinson.com/tech/what-is-a-css-sprite/
- 62. Performance – CSS sprites Image credit: CSS Tricks http://css-tricks.com/css-sprites/
- 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.
- 67. Cross-Browser Compatibility What do we support?
- 68. Cross-Browser Compatibility Browsers Devices Resolutions Cross-Browser Compatibility Image credit: Gideon https://www.flickr.com/photos/malias/73169727
- 69. Cross-Browser Compatibility Define & communicate what you support • Time • Effort • Cost
- 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
- 72. Code Reviews
- 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) “
- 74. Final word
- 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
- 78. 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