JosefJezek
2/6/2015 - 10:14 AM
The 10 Commandments of Modern Web Application
The 10 Commandments of Modern Web Application
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
- What Web Can Do Today
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
3. Offline First Design
4. Availability, Performance, Reliability and Scalability
The RAIL Performance Model - Modern User Experience (UX)
- Response: 100ms - Tap to paint in less than 100 milliseconds.
- Animation: 16ms - Each frame completes in less than 16 milliseconds.
- Idle: 50ms - Complete that work in 50-millisecond chunks.
- Load: 1000ms - Get first meaningful paint in 1,000 milliseconds.
Resources
- https://developer.chrome.com/devsummit/sessions/owningyourperformance
- https://developer.chrome.com/devsummit/sessions/railintherealworld
- https://developer.chrome.com/devsummit/sessions/futureofperformance
- https://developers.google.com/web/tools/profile-performance/evaluate-performance/rail
- https://docs.google.com/presentation/d/13AJe2Ip4etqA8qylrva7bEgu1_hAvsq_VQiVOAxwdcI/present?slide=id.p19
- http://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
- https://speakerdeck.com/addyosmani/devtools-state-of-the-union-2015
- http://bit.ly/blink-midnight-train
Web Platform Coordinate System
- Performance - Slimming Paint, Scheduler, ...
- Capabilities - Service Worker, Push Notifications, ...
- Productivity - Web Components, DevTools, ES6, ...
Resources
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
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
- https://developer.chrome.com/devsummit/sessions/progressiveapps
- https://developer.chrome.com/devsummit/sessions/polymer2
- https://developers.google.com/web/updates/2015/11/app-shell
Accessibility
- Web Accessibility Initiative (WAI)
- Mobile accessibility checklist
- Accessible Web Components
- Making Polymer Elements Accessible
- Accessibility Developer Tools
Resources
7. Readability
- Material Design Typography
- The 10 Commandments of Typography
- Readability test
- Readability Test Tool
- Human Readable Format
8. Maintainability
CSS
- MaintainableCSS
- SUIT 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