I created Quick LogCat, a web tool for debugging Android devices without needing adb installed. It uses WebADB.js and the WebUSB API to connect to your device and display logcat output. The tool is useful for on-the-go debugging. It's powerful but also highlights the potential security implications of granting web access to USB devices. This technology opens up exciting possibilities like firmware updates and app sideloading via web interfaces. I'm curious to see what others build with WebUSB and adb access.
I temporarily switched to a Chromebook (Pixelbook) after my main machine broke. Setting up Crostini, the Linux container environment, was a little tricky due to limited information available at the time. The process involved enabling developer mode and then activating the Linux apps option in settings. While the Pixelbook is expensive, Chrome OS is a great platform for web development, allowing me to test on various mobile browsers via ARC and utilize Linux apps like Firefox, vim, and VS Code thanks to Crostini. Although Crostini has room for improvement regarding speed, GPU acceleration, and file integration, and the Pixelbook needs more ports, it's exciting to see this technology becoming available on more affordable devices.
Following on from my list of the things that I am [excited about on the web in 2017](/2017-exciting-times/) here are three predictions of things that I think will happen in 2017 based off reading tea-leaves and random musings of things that I have 0 direct knowledge of but I might do if I was 'them'.
I'm excited to share that barcode detection is now available in Chrome Canary via the Shape Detection API! This feature, along with QR code detection, offers a standardized way to access device hardware and bridge the physical and digital worlds. It's especially useful for mobile, eliminating the need for special apps just to scan barcodes. The API is simple: use BarcodeDetector.detect() with an image input to get a promise resolving to a list of barcodes. I've already integrated this into my QR Code Scanner App, and the ability to use it in worker threads is a huge bonus. It's a very promising addition to the web platform and I'm looking forward to seeing what people build with it!
Custom URL schemes for launching apps have limitations: single app handling, one-way data flow, lack of fallback, and limited mobile support. A better approach is needed, one that offers user choice, developer fallback, diverse data transport, web app registration, and online/offline functionality. Android's 'intent:' URL syntax offers a good starting point, abstracting service discovery and supporting fallback URLs. I propose exploring a new 'action:' scheme or 'web+action' to bridge web and native apps, providing a unified service resolution and registration system for a richer, more integrated user experience.
Sharing content between web and apps is difficult due to platform incompatibility. Android's intent system offers a potential solution, but it lacks portability. This post explores a workaround for sharing actions, using a server-side redirect to handle intent URLs for Android users while providing a fallback to a web service like Twitter for other platforms. This approach allows cross-platform functionality while leveraging Android's intent system when available.
This story starts a long time, was tickled into existing after I visited FlipKart in Bangalore and was finalized after an internal conversation about the fact that it is impossible to trigger the share dialog in Android from the web. Lots of people want it, it turns out everyone thought it wasn't possible. It is.*
I recently used Page Speed Insights for Mobile to improve my blog's page load time and one of the key recommendations was to reduce render-blocking CSS above the fold. This led me to explore the concept of critical CSS, which is the minimum CSS required to render the initial view of a page. I developed a proof-of-concept tool (bookmarklet and devtools snippet) that analyzes the DOM and extracts the critical CSS by iterating through visible elements and using window.getMatchedCSS(). This tool helps identify unnecessary CSS, integrate into build processes for optimization, and potentially generate page-specific CSS files for improved performance. It currently has limitations, working only in WebKit/Blink, ignoring media queries, and not handling pseudo-elements.
I've been working on making html5rocks.com more mobile-friendly, focusing on reducing "Time to first read". The main culprit was the Table of Contents (ToC). My initial experiment with an offscreen ToC using CSS had cross-browser inconsistencies. Now, using existing JS, the ToC is fixed to the footer and toggled into view. I'm still exploring pure CSS solutions. Initially, I favored a small scrollable ToC at the bottom, but Paul Lewis suggested a full-screen ToC, which proved better. It minimizes distractions and clutter, provides more screen space for a readable, easily navigable ToC with larger touch targets and subtle hierarchy, even for long lists. The before/after screenshots demonstrate the improvement.
For our Google I/O 2013 talk, we needed a way to seamlessly showcase live demos on an Android device. Projector switching was clunky, so we pre-recorded the demos for smoother transitions. This post details our process. We used a Blackmagic Intensity Shuttle to capture high-quality HDMI output from a Galaxy Nexus (which thankfully doesn't enforce HDCP on HDMI). This setup, along with the Orientation Control app to maintain portrait mode, allowed us to create polished, in-line video demos. While this solution isn't cheap, the quality and seamless integration were worth the investment.
I've been experimenting with the Bluetooth library for .NET I mentioned earlier, but I'm having trouble getting it to work. I wanted to connect my phone to my computer and transfer images, but it's not working as expected. The library itself seems fine, it's likely my understanding of Bluetooth communication that's lacking. On the plus side, detecting devices with the library is very easy!
