the-10-commandments-of-modern-web-application.md

The 10 Commandments of Modern Web Application

1. Open Web Platform

• Based on Open Web Platform (OWP)
• No Flash, Java or other plugins
• Web technology for developers

2. Responsive Design

• Responsive Layout
• Mobile First
• Material Design Layout
• Responsive Localization
• l20n.org
• Responsive Images
• responsiveimages.org
• Responsive Images Course
• Responsive Images in Practice
• CSS Fluid Image Techniques
• Responsive SVG Icons
• Inline SVG vs Icon Fonts
• Responsive Typography
• Managing responsive typography with Sass
• Roboto Font v2
• Responsive App Size based on Network Speed

Resources

• Responsive Web Design Fundamentals Course

3. Offline First Design

• Offline First on Chrome / Chromium
• Service Worker

4. Availability, Performance, Reliability and Scalability

Web Performance Model - Modern User Experience (UX)

1. Load: 1000ms - Time from app start to appearing ready for use.
2. Response: 100ms - User interacts with app UI causing state change.
3. Animation: 6ms - Animations and transitions, either autonomous or userinitiated.
4. Idle: 50ms - App UI is in a stable state, awaiting user interaction.

Resources

• https://speakerdeck.com/addyosmani/devtools-state-of-the-union-2015
• http://bit.ly/blink-midnight-train

Web Platform Coordinate System

1. Performance - Slimming Paint, Scheduler, ...
2. Capabilities - Service Worker, Push Notifications, ...
3. Productivity - Web Components, DevTools, ES6, ...

Resources

• http://bit.ly/web-platform-coordinate-system
• BlinkOn3: State Of Blink

Technologies

• Static Web Application
• Static Showdown Champions 2015
• Superstatic
• No Backend
• Deployd
• Firebase
• Hoodie
• PouchDB
• SocketCluster
• Microservices
• Microservices Architecture
• The Future of Asynchronous IO in Python
• CDN Hosting
• Amazon S3
• GitHub Pages
• Google Cloud Storage
• WebRTC
• Icecomm
• OpenWebRTC
• PeerJS

Tools

• PageSpeed Insights
• Critical
• CSScomb
• Reduce file size with CSS Sorting
• UnCSS
• http://webdevchecklist.com

Resources

• Website Performance Optimization Course
• http://jankfree.org
• http://www.html5rocks.com

5. Reusability

Reusable CSS Styles

• BEM Methodology

Reusable Elements with Web Components

• Polymer
• Creating reusable elements
• Start Polymer

6. User Experience (UX) - Usability - Accessibility

• Useful: Your content should be original and fulfill a need
• Usable: Site must be easy to use
• Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation
• Findable: Content needs to be navigable and locatable onsite and offsite
• Accessible: Content needs to be accessible to people with disabilities
• Credible: Users must trust and believe what you tell them

Accessibility

• Web Accessibility Initiative (WAI)
• Mobile accessibility checklist
• Accessible Web Components
• Making Polymer Elements Accessible
• Accessibility Developer Tools

Resources

• User Experience Basics
• Web usability
• Your Website is not Special, Don't Make Visitors Make Accounts

7. Readability

• Material Design Typography
• The 10 Commandments of Typography
• Readability test
• Readability Test Tool
• Human Readable Format
  • Markdown

8. Maintainability

• 12-Factor App Methodology

CSS

• BEM Methodology
• http://www.slideshare.net/MaxShirshin/bem-it-for-brandwatch
• https://medium.com/@marcmintel/pushing-bem-to-the-next-level-with-sass-3-4-5239d2371321
• http://www.mathayward.com/modular-css-with-sass-and-bem/
• http://www.sitepoint.com/bem-smacss-advice-from-developers/
• https://github.com/AllThingsSmitty/must-watch-css

JavaScript

• Google JavaScript Style Guide
• How to Write Highly Scalable and Maintainable JavaScript

Sass

• Sass Guidelines

9. Security

• HTTPS Everywhere
• HTTPS as a ranking signal

10. Search Engine Optimization

• Google SEO
• Knowledge Graph
• Prerender