Skip to content

Instantly share code, notes, and snippets.

@JosefJezek

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

Last active June 12, 2020 03:39
Show Gist options
  • Star 19 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save JosefJezek/8020bd8f02c4992e7d7d to your computer and use it in GitHub Desktop.
Save JosefJezek/8020bd8f02c4992e7d7d to your computer and use it in GitHub Desktop.
Download ZIP
The 10 Commandments of Modern Web Application
Raw
the-10-commandments-of-modern-web-application.md

The 10 Commandments of Modern Web Application

1. Open Web Platform

2. Responsive Design

Resources

3. Offline First Design

4. Availability, Performance, Reliability and Scalability

The RAIL Performance Model - Modern User Experience (UX)

  1. Response: 100ms - Tap to paint in less than 100 milliseconds.
  2. Animation: 16ms - Each frame completes in less than 16 milliseconds.
  3. Idle: 50ms - Complete that work in 50-millisecond chunks.
  4. Load: 1000ms - Get first meaningful paint in 1,000 milliseconds.

Resources

Web Platform Coordinate System

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

Resources

Technologies

Tools

Resources

5. Reusability

Reusable CSS Styles

Reusable Elements with Web Components

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

Progressive Web Apps

Accessibility

Resources

7. Readability

8. Maintainability

CSS

JavaScript

9. Security

10. Search Engine Optimization

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment