Download as PDF, PPTX
![Accessibility – Easy Checks – cont.
Headings
[…] etc.](https://image.slidesharecdn.com/front-enddevelopmentbestpractices-170128215049/85/Front-end-development-best-practices-51-320.jpg)
Uploaded byKarolina Coates
Front end development best practices
The document outlines best practices for front-end development, including guidelines for HTML, CSS, and JavaScript to create accessible and performance-optimized web applications. It emphasizes the importance of semantic markup, maintaining code quality through reviews, and ensuring cross-browser compatibility. Additionally, it provides resources and tools for validation, debugging, and responsive design, aimed at enhancing user experience.
More Related Content
Similar to Front end development best practices
Front end development best practices
- 1. Our Awards: Front-end DevelopmentBest Practices Back to Basics Karolina Coates, Pádraig Buckley 25/09/2014 Our Awards:
- 2. Agenda General guidelines HTML markup CSS JavaScript Accessibility Performance Cross-browser compatibility Code Reviews Tools & resources
- 3. Introduction to FrontEnd Development This is not about forcing you to believe what I believe Image & slide credit: Christian Heilmann
- 4. Introduction This is thestandard we expect. Please contribute.
- 5.
- 6.
- 7. General Guidelines • Allfront-end code should display clear separation of presentation, content, and behaviour
- 8. General Guidelines Markup • Markupshould 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 • JavaScriptshould 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 FormTypes • Email, date, range, tel, required • For further info, go to – http://www.w3schools.com/html/html5_intro.asp
- 17. CSS Best Practices • Createa Style guide – Headings – Buttons – Colour Scheme etc.
- 18. CSS General Guidelines – UseExternal 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.
- 21.
- 22. CSS CSS Box Model padding:20px 80px 10px 40pxmargin: 20px 80px 10px 40px;
- 23.
- 24.
- 25.
- 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
- 27.
- 28.
- 29.
- 30. CSS Which CSS rulehas a power to override them all?
- 31. CSS !Important Tag • Whento 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 andmany more… google it
- 35. CSS Media Queries • Changestyles depending on a number of properties – Size – Resolution – Orientation
- 37. Java Script Should progressivelyenhance 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:
- 39.
- 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 MixingTechnologies
- 43. Java Script Over Relianceon JavaScript
- 44. Java Script Debugging – Canhelp 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.
- 47. Image credit: TravelbagLtd (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 ContentAccessibility 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 – EasyChecks 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 – EasyChecks – cont. Color contrast Color Contrast Checker http://webaim.org/resources/contrastchecker/
- 51. Accessibility – EasyChecks – cont. Headings […] etc.
- 52. Accessibility Code checks donot 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.
- 54. Performance Follow Yahoo PerformanceGuidelines • 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 - Imagesize (px) Live demo
- 57. Performance – Imagesize (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 – CSSspritesPerformance – CSS sprites Image credit:Steve Jurvetson https://www.flickr.com/photos/jurvetson/10793760553
- 60. Performance – CSSsprites Image credit: DryBowser455 http://s1037.photobucket.com/user/DryBowser455/media/NyanCatSprite.png.html, Giphy.com =
- 61. Performance – CSSsprites Image credit: Kasey Jean Robinson http://www.kaseyjeanrobinson.com/tech/what-is-a-css-sprite/
- 62. Performance – CSSsprites Image credit: CSS Tricks http://css-tricks.com/css-sprites/
- 63. Performance – CSSsprites 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 canbe subjective • It’s about managing customer’s expectations – agree what’s acceptable. • Communicate performance impact during design phase or changes Things to remember:
- 65.
- 66. Cross-Browser Compatibility What dowe 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 dowe support?
- 68. Cross-Browser Compatibility Browsers Devices Resolutions Cross-Browser Compatibility Imagecredit: Gideon https://www.flickr.com/photos/malias/73169727
- 69. Cross-Browser Compatibility Define &communicate what you support • Time • Effort • Cost
- 70.
- 71. Cross-Browser Compatibility Testing isthe 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.
- 73. Code Reviews • It'sabout 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.
- 75. Code Reviews The Internetis 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: DanielLevy http://www.bedeliberate.com/use-giants-to-see-further/ -GOOGLE IT
- 77.
- 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
- 79.