1 line
No EOL
18 KiB
JSON
1 line
No EOL
18 KiB
JSON
{"slug": "myshov--awesome-mobile-web-development", "title": "Mobile Web Development", "description": "All that you need to create a great mobile web experience", "github_url": "https://github.com/myshov/awesome-mobile-web-development", "stars": "1.1K", "tag": "Front-End Development", "entry_count": 106, "subcategory_count": 1, "subcategories": [{"name": "General", "parent": "", "entries": [{"name": "Articles and Documentation", "url": "#articles-and-documentation", "description": ""}, {"name": "Books", "url": "#books", "description": ""}, {"name": "Specifications from W3C for Enhancing Mobile Web Experience", "url": "#specifications-from-w3c-for-enhancing-mobile-web-experience", "description": ""}, {"name": "Talks", "url": "#talks", "description": ""}, {"name": "Performance Auditing Tools", "url": "#performance-auditing-tools", "description": ""}, {"name": "Platform Monitoring", "url": "#platform-monitoring", "description": ""}, {"name": "Other Useful Tools and Libraries", "url": "#other-useful-tools-and-libraries", "description": ""}, {"name": "300ms Tap Delay, Gone Away", "url": "https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away", "description": "How to prevent 300 ms delay on tap."}, {"name": "60 FPS on Mobile Web", "url": "http://engineering.flipboard.com/2015/02/mobile-web", "description": "How to make a really fast mobile website (by Flipboard)."}, {"name": "Adaptive loading: improving web performance on slow devices", "url": "https://web.dev/adaptive-loading-cds-2019/", "description": "How to optimize site for specific hardware and network constraints."}, {"name": "Animating the Mobile Web", "url": "https://engineeringblog.yelp.com/2015/01/animating-the-mobile-web.html", "description": "A case study on achieving fast animations on mobile web (by Yelp)."}, {"name": "Autofill: What web devs should know, but don\u2019t", "url": "https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/", "description": "Everything you need to know about forms autofill."}, {"name": "Back/forward cache", "url": "https://web.dev/bfcache/", "description": "How to optimize site for navigation through the history."}, {"name": "Benchmarking the global 5G experience", "url": "https://www.opensignal.com/2021/02/03/benchmarking-the-global-5g-experience", "description": "A case study on prolifiration of 5G networks."}, {"name": "Cache-Control for Civilians", "url": "https://csswizardry.com/2019/03/cache-control-for-civilians/", "description": "How to setup Cache-Control to achieve the best reponse time."}, {"name": "CSS fix for 100vh in mobile WebKit", "url": "https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/", "description": "How to fix issue with 100vh in mobile WebKit."}, {"name": "Current Web on Galaxy Fold", "url": "https://medium.com/samsung-internet-dev/current-web-on-galaxy-fold-ad12d7f57c26", "description": "An advices on web development for Galaxy Fold."}, {"name": "Designing a Dark Theme for OLED iPhones", "url": "https://medium.com/lookup-design/designing-a-dark-theme-for-oled-iphones-e13cdfea7ffe", "description": "On issues with dark themes on OLED displays and what to do with them."}, {"name": "Designing Websites for iPhone X", "url": "https://webkit.org/blog/7929/designing-websites-for-iphone-x/", "description": "How to deal with \"the notch\" on iPhone X."}, {"name": "Developing Mobile Web Applications: When, Why, and How", "url": "https://www.toptal.com/android/developing-mobile-web-apps-when-why-and-how", "description": "The good high-level overview of mobile web development."}, {"name": "Enhance SMS-delivered code security with domain-bound codes", "url": "https://developer.apple.com/news/?id=z0i801mg", "description": "On additional security measures for 2FA."}, {"name": "Everyone has JavaScript, right?", "url": "https://kryogenix.org/code/browser/everyonehasjs.html", "description": "A diagram that shows in which cases JavaScript can be unavailable."}, {"name": "Faster Web App Delivery with PRPL", "url": "https://addyosmani.com/blog/the-prpl-pattern/", "description": "On pattern for performant web applications."}, {"name": "Get Started with Remote Debugging Android Devices", "url": "https://developers.google.com/web/tools/chrome-devtools/remote-debugging/", "description": "Debug your web app on Adroid with Chrome DevTools."}, {"name": "Guidelines For Mobile Web Development", "url": "https://www.smashingmagazine.com/guidelines-for-mobile-web-development/", "description": "The compilation of good articles about mobile web development."}, {"name": "Hiding Videos on the Mobile Web", "url": "https://dougsillars.com/2020/01/06/hiding-videos-on-the-mbile-web/", "description": "How to hide videos without an impact on mobile traffic."}, {"name": "How To Poison The Mobile User", "url": "https://www.smashingmagazine.com/2016/10/how-to-poison-the-mobile-user/", "description": "An overview of negative practices on mobile sites."}, {"name": "How Web Content Can Affect Power Usage", "url": "https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/", "description": "What you can do with web app to achieve better battery life."}, {"name": "HTML attributes to improve your users' two factor authentication experience", "url": "https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete", "description": "On autocomplete attribute regarding 2fa."}, {"name": "Interaction Media Features and Their Potential (for Incorrect Assumptions", "url": "https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/", "description": "On detection of various input devices."}, {"name": "Learn AMP by Example", "url": "https://ampbyexample.com", "description": "A hands-on introduction to Accelerated Mobile Pages focusing on code and live samples."}, {"name": "Loading web pages fast on a $20 feature phone", "url": "https://dev.to/addyosmani/loading-web-pages-fast-on-a-20-feature-phone-8h6", "description": "Best practices for building web pages for feature phones."}, {"name": "Measuring Network Performance in Mobile Safari", "url": "https://csswizardry.com/2021/02/measuring-network-performance-in-mobile-safari/", "description": "An advices on using Mobile Safari for measuring network performance."}, {"name": "Microbrowsers are Everywhere", "url": "https://24ways.org/2019/microbrowsers-are-everywhere/", "description": "On optimizing sites for messengers."}, {"name": "Mobile Performance Inequality Gap", "url": "https://infrequently.org/2021/03/the-performance-inequality-gap/", "description": "Why you need to care of performance on cheap smartphones."}, {"name": "Mobile Search UX 8 Obstacles", "url": "https://blog.algolia.com/mobile-search-ux-8-obstacles/", "description": "Series of articles about mobile search UX."}, {"name": "Mobile Web Best Practices", "url": "https://www.w3.org/TR/mobile-bp/", "description": "A little bit out of date but still useful list of best practices for mobile websites from W3C."}, {"name": "Mobile Web Application Best Practices", "url": "https://www.w3.org/TR/mwabp/", "description": "The list of best practices for mobile web applications from W3C."}, {"name": "Mobile Web Development", "url": "https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile", "description": "Guideline (must read) from Mozilla about designing mobile websites."}, {"name": "Mobile Web Performance Checklist", "url": "https://www.oreilly.com/ideas/mobile-web-performance-checklist", "description": "Best practices for optimizing mobile web apps."}, {"name": "Observing Intersection Observers", "url": "https://davidwalsh.name/intersection-observers", "description": "An introduction to intersection observers."}, {"name": "Offline First (Awesome List)", "url": "https://github.com/pazguille/offline-first", "description": "The awesome list of offline-first stuff (Progressive Web Apps, Service Workers etc.)", "stars": "2.9k"}, {"name": "Prevent Mobile Browser From Sleeping", "url": "https://davidwalsh.name/wake-lock-shim", "description": "How to prevent your phone from sleeping."}, {"name": "Responsive Web Design \u2013 What It Is And How To Use It", "url": "https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/", "description": "Overview of technics of responsive design."}, {"name": "Rules for Mobile Performance Optimization", "url": "https://queue.acm.org/detail.cfm?id=2510122", "description": "An overview of techniques to speed page loading."}, {"name": "Self-Host Your Static Assets", "url": "https://csswizardry.com/2019/05/self-host-your-static-assets/", "description": "Reason why you need to self-host your static assets."}, {"name": "The Impact of Web Performance", "url": "https://simplified.dev/performance/impact-of-web-performance", "description": "On performance as a key factor for the business."}, {"name": "The joy and challenge of developing for KaiOS", "url": "https://nolanlawson.com/2019/09/22/the-joy-and-challenge-of-developing-for-kaios/", "description": "How to start developing for KaiOS."}, {"name": "Timing Out", "url": "https://adactio.com/journal/15122", "description": "A service worker strategy for dealing with lie-fi (a bad network connection)."}, {"name": "Tips for making interactive elements accessible on mobile devices", "url": "https://bitsofco.de/tips-for-making-interactive-elements-accessible-on-mobile-devices/", "description": "List of advices on creating accessible mobile UI."}, {"name": "Touch Devices Should Not Be Judged By Their Size", "url": "https://css-tricks.com/touch-devices-not-judged-size/", "description": "Overview of interaction media features."}, {"name": "Web Content Accessibility Guidelines (WCAG)", "url": "https://www.w3.org/TR/WCAG21/", "description": "Wide range of recommendations for making Web content more accessible."}, {"name": "Web Fundamentals", "url": "https://developers.google.com/web/fundamentals/", "description": "Guideline from Google about creating good mobile web experiences."}, {"name": "What Does A Foldable Web Actually Mean?", "url": "https://www.smashingmagazine.com/2020/02/foldable-web-meaning/", "description": "Musings on the impact of foldable phones on web."}, {"name": "Who Killed My Battery", "url": "https://mobisocial.stanford.edu/papers/boneh-www2012.pdf", "description": "An interesting paper about websites' power consumption."}, {"name": "Brain Food Mobile Performance", "url": "http://www.awwwards.org/brainfood-mobile-performance-vol3.pdf", "description": "Free small ebook on mobile performance from Awwwards."}, {"name": "Going Offline", "url": "https://abookapart.com/products/going-offline", "description": "Guide on building offline experience with service workers."}, {"name": "High-Performance Mobile Web: Best Practices for Optimizing Mobile Web Apps", "url": "https://www.amazon.com/High-Performance-Mobile-Web-Optimizing/dp/1491912553", "description": "Book about the performance of the web on mobile devices."}, {"name": "Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps", "url": "https://www.amazon.com/Mobile-Design-Pattern-Gallery-Smartphone/dp/1449363636", "description": "UI patterns which can be useful for mobile web apps."}, {"name": "Mobile First", "url": "http://mobile-first.abookapart.com/", "description": "How to design sites for mobile devices (free online version)."}, {"name": "Responsive Web Design", "url": "https://abookapart.com/products/responsive-web-design", "description": "Book about responsive web design."}, {"name": "Battery API", "url": "https://www.w3.org/TR/battery-status/", "description": "On access to information about the battery."}, {"name": "Connection API", "url": "http://wicg.github.io/netinfo/", "description": "On access to information about connection."}, {"name": "Generic Sensor API", "url": "https://www.w3.org/TR/generic-sensor/", "description": "The spec for exposing sensor data."}, {"name": "Geolocation API", "url": "https://www.w3.org/TR/geolocation-API/", "description": "On access to geolocation."}, {"name": "HTML Media Capture", "url": "https://www.w3.org/TR/html-media-capture/", "description": "On user access to camera or microphone."}, {"name": "Payment Request API", "url": "https://www.w3.org/TR/payment-request/", "description": "On payment method with minimal integration."}, {"name": "Presentation API", "url": "https://www.w3.org/TR/presentation-api/", "description": "On access to presentation displays."}, {"name": "Remote Playback API", "url": "https://www.w3.org/TR/remote-playback/", "description": "On controlling remote playback of media from a web page."}, {"name": "Vibration API", "url": "https://www.w3.org/TR/vibration/", "description": "On access to the vibration mechanism of the hosting device."}, {"name": "Visual Viewport API", "url": "https://wicg.github.io/visual-viewport/", "description": "On access to a visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area etc.."}, {"name": "Wake Lock Api", "url": "https://www.w3.org/TR/wake-lock/", "description": "On access to wake lock request (prevents some aspect of a device from entering the power-saving state)."}, {"name": "Web Bluetooth", "url": "https://webbluetoothcg.github.io/web-bluetooth/", "description": "On an API to discover and communicate with devices over the Bluetooth 4."}, {"name": "Web NFC API", "url": "https://w3c.github.io/web-nfc/", "description": "On access to Near Field Communication capabilities of the device."}, {"name": "Web Notifications", "url": "https://www.w3.org/TR/notifications/", "description": "On an API for end-user notifications."}, {"name": "Adaptive Loading - Improving web performance on slow devices", "url": "https://www.youtube.com/watch?v=puUPpVrIRkc\\&feature=emb_title", "description": "Overview of practices for adapting a site to hardware and network constraints, by Addy Osmani, Nate Schloss."}, {"name": "Fundamentals of Mobile Web Development", "url": "https://www.youtube.com/watch?v=z6dg_V22wV0", "description": "Overview of the best practices for mobile web development, by Matt Gaunt."}, {"name": "Future App Model: Advanced Service Worker", "url": "https://www.youtube.com/watch?v=J2dOTKBoTL4", "description": "The glimpse on how to optimize web apps and sites using streams and service workers and other new APIs, by Jake Archibald."}, {"name": "Instant Loading: Building offline-first Progressive Web Apps", "url": "https://www.youtube.com/watch?v=cmGr0RszHc8", "description": "Introduction to service workers, by Jake Archibald."}, {"name": "Mobile Web Performance", "url": "https://www.youtube.com/watch?v=_y5IzI_tpTw", "description": "What to do on your site to achieve the best possible mobile experience, by Estelle Weyl."}, {"name": "Mobile Web Performance Auditing", "url": "https://www.youtube.com/watch?v=WrA85a4ZIaM", "description": "How to audit performance issues on the site, by Paul Lewis."}, {"name": "Lighthouse", "url": "https://github.com/GoogleChrome/lighthouse", "description": "Analyzing tool for web apps and web pages.", "stars": "25k"}, {"name": "Mobile-Friendly Test", "url": "https://search.google.com/test/mobile-friendly", "description": "Tool for testing that your site is mobile-friendly."}, {"name": "PageSpeed Insights", "url": "https://developers.google.com/speed/pagespeed/insights", "description": "The tool that analyzes your page and gives recommendations for increasing downloading speed."}, {"name": "PageSpeed", "url": "https://www.modpagespeed.com", "description": "Web server modules that optimize your site automatically."}, {"name": "Site Speed Checker", "url": "https://www.thinkwithgoogle.com/feature/mobile", "description": "Compare the speed of your mobile site to others."}, {"name": "Test Your Mobile Speed", "url": "https://testmysite.withgoogle.com/intl/en-gb", "description": "The tool from Google that performs comprehesive speed check of the mobile site."}, {"name": "Webpagetest", "url": "https://webpagetest.org", "description": "Website speed test from multiple locations using real browsers and at real consumer connection speeds."}, {"name": "Can I Use", "url": "https://caniuse.com", "description": "State of support of various web features in browsers."}, {"name": "Mobile Browser Market Share", "url": "http://gs.statcounter.com/browser-market-share/mobile", "description": "Market share between various platforms and countries."}, {"name": "Standards for Web Applications on Mobile", "url": "https://www.w3.org/Mobile/mobile-web-app-state", "description": "Current state of mobile-related W3C specifications."}, {"name": "What Web Can Do Today", "url": "https://whatwebcando.today", "description": "What your browser capable of."}, {"name": "Browsersync", "url": "https://browsersync.io", "description": "Time-saving synchronised browser testing."}, {"name": "Eruda", "url": "https://github.com/liriliri/eruda", "description": "Console for mobile web browsers.", "stars": "13k"}, {"name": "Interact.js", "url": "https://github.com/taye/interact.js", "description": "Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers.", "stars": "11k"}, {"name": "Fastclick", "url": "https://github.com/ftlabs/fastclick", "description": "Removing of 300ms delay in old browsers.", "stars": "19k"}, {"name": "Lozad.js", "url": "https://github.com/ApoorvSaxena/lozad.js", "description": "Highly performant, light and configurable lazy loader using IntersectionObserver API", "stars": "7.1k"}, {"name": "React Dates", "url": "https://github.com/airbnb/react-dates", "description": "An easily internationalizable, mobile-friendly datepicker React library for the web.", "stars": "12k"}, {"name": "Screen Sizes", "url": "http://screensiz.es/phone", "description": "A list of screen sizes of all popular smartphones."}, {"name": "Shiny", "url": "https://github.com/rikschennink/shiny", "description": "Shiny reflections for mobile websites.", "stars": "2.8k"}, {"name": "Slideout", "url": "https://github.com/Mango/slideout", "description": "Standalone and lightweight navigation menu for your mobile web apps.", "stars": "8k"}, {"name": "Swiper", "url": "https://github.com/nolimits4web/swiper", "description": "The most modern mobile touch slider with hardware accelerated transitions.", "stars": "33k"}, {"name": "Web Inspector Remote (Weinre)", "url": "https://www.npmjs.com/package/weinre", "description": "Web inspector for debugging sites in non-mainstream browsers."}, {"name": "Web Starter Kit", "url": "https://github.com/google/web-starter-kit", "description": "A workflow for multi-device websites.", "stars": "18k"}, {"name": "Workbox", "url": "https://developers.google.com/web/tools/workbox/", "description": "JavaScript libraries for adding offline support to web apps."}, {"name": "WorkerDOM", "url": "https://amphtml.wordpress.com/2018/08/21/workerdom/", "description": "Library to provide a full representation of the DOM inside of Web Workers."}]}], "name": ""} |