Hello.

I built a web app using Deno, Fresh, and TensorFlowJS to classify images as links or buttons. The app uses a pre-trained ML model and allows users to drag and drop multiple images for classification. I encountered challenges with server-side rendering and islands, specifically with integrating a file-drop web component. I also documented the process of integrating the TensorFlowJS model, including model loading and prediction handling. The code is available on GitHub. Read More

I trained a machine learning model to differentiate between buttons and links on web pages. Using a dataset of ~3000 button images and ~4000 link images, I trained a convolutional neural network (CNN) with added noise for better generalization. Preprocessing included grayscale conversion, dataset diversification with multilingual sites, and image compression. The model performed well in initial tests, correctly classifying button-like and link-like elements. Next, I'll build a web app for easier testing and a Lighthouse audit for website analysis. Read More

In this project, I'm working on an accessibility tool to detect links styled as buttons, a common issue that can confuse users. My approach involves scraping websites to gather images of buttons and links, and then training a machine learning model to distinguish between them. This post focuses on the scraping process using Puppeteer. I encountered challenges like occluded elements and smooth scrolling, which I addressed by checking for occlusion and disabling smooth scrolling. The next step is training the ML image classifier. Read More

I added ActivityPub support to my static Hugo blog hosted on Vercel. It now automatically announces new posts to followers on the Fediverse. Key challenges included implementing the ActivityPub protocol for a static site, handling WebFinger discovery, managing Follow/Unfollow requests, and sending signed HTTP requests. I used Vercel Serverless Functions for dynamic request handling and Firebase Firestore for storing follower data. Check out the code and follow me @paul@paul.kinlan.me to see it in action! Read More

I needed to find a way to send webhooks after a successful deployment on Vercel, which wasn't a built-in feature. Since Vercel integrations can listen for deployment events, I created one to solve this. It's a simple tool hosted on GitHub that lets you set up custom webhooks for your Vercel projects. It's not on the Vercel Marketplace, and it's more of a workaround until Vercel natively supports deployment webhooks. Check out the GitHub repo for instructions on setting it up with Firebase Firestore. Read More

Mastodon's cross-instance following is clunky. I propose a solution using the web+follow URL scheme, like mailto, to streamline following users on ActivityPub platforms. A user's home instance registers as a handler for web+follow. Clicking a web+follow link opens the home instance, redirecting to a /follow request on the target instance. This page uses a meta refresh tag to redirect to /resolve-app, which redirects back to web+follow: with the user's ID. This triggers the registered handler (if available), creating a seamless follow experience within the user's preferred app. If no handler is installed, the user remains on the target instance's follow page, preserving existing functionality. Read More

This blog post explores how machine learning (ML) can enhance the developer experience. Inspired by Corridor Crew's use of ML in VFX, I initially brainstormed ways ML could automate tedious developer tasks, like accessibility improvements and performance optimization. I also considered ML's potential for generating layouts and images. The emergence of tools like GitHub Copilot and DALL-E-2 significantly impacted my thinking, especially regarding the future of software development and my role as a DevRel lead. Ultimately, the transformative power of GPT-Chat, demonstrated through its ability to generate webpage layouts and populate them with images based on simple prompts, left me questioning the future of my profession and considering the role I might play in training the next generation of AI tools. Read More

Custom URL schemes can enhance web app functionality by handling specific URLs, but detecting scheme support is tricky. Several methods exist, including click handlers, navigation handlers (Blink), and server-side redirects with meta refresh. While the server-side approach offers the most robust solution, it introduces complexity. A key challenge is the limited user understanding of custom schemes, leading to a preference for standard HTTPS URLs. This post explores a common pattern for custom scheme usage, involving detecting navigation failures and presenting alternative UI. The pattern addresses the issue of handling custom schemes like web+follow for Mastodon, aiming to improve user experience. While custom schemes are valuable developer tools, user preference for HTTPS URLs persists. Despite this, custom schemes empower developers to guide users to preferred apps or sites while gracefully handling cases where no suitable option exists. This approach also opens possibilities for other applications, like rebuilding web intents. Read More

I'm heartbroken about the situation at Twitter. So many of my friends have been impacted by the changes, and I feel helpless beyond offering support and sharing job opportunities. Twitter played a huge role in my career journey, offering a place to connect with others and find my voice. It's how I made many friends and career connections, and I'm grateful for the community it fostered. I dislike the rapid changes happening now, and like many, I'm concerned about its future and how it will survive. While I haven't paid for the service, I feel a sense of debt to the platform and community for all it's given me. Read More

I've rejoined Mastodon! Driven by the potential Twitter costs and wanting more control, I'm now self-hosting my instance for about the same price as a Twitter Blue subscription. I'll keep using Twitter for learning, but I'm excited about Mastodon's open, interoperable nature and its excellent PWA. Come find me on Mastodon! Read More

I've created a tool called "Now Stable" using Browser Compat Data (BCD) to help developers determine when web APIs become stable across different browsers. This addresses the challenge of keeping up with browser updates and helps developers confidently choose APIs for their projects. The tool allows users to select their target browsers (e.g., Chrome, Safari, Firefox) and see a chronological list of when APIs became available across those browsers. I'm looking for feedback on how this tool can be improved and how developers would use this data. Read More

This blog post discusses the current state of web API permissions and argues for a more restrictive "off-by-default" approach. It highlights the Principle of Least Privilege and observes that most websites don't utilize Feature Policy or Permissions Policy effectively. The author suggests that instead of asking "what should I turn off?", developers should ask "what should I enable?". The post details the different permission models, the complexity of managing numerous permissions, and the benefits of a deny-all-then-enable approach. It also acknowledges the drawbacks and the need for tooling and guidance to facilitate this shift in thinking. The author concludes by advocating for intentionality in permission management and encouraging a discussion on the topic. Read More

HTML5Rocks, a beloved resource for web developers, is shutting down. This post reflects on the site's history, its impact, and the reasons behind its decline. Key factors include the shift away from "HTML5" as a buzzword, changing team priorities, lack of a focused content plan, and challenges with community management. Despite the shutdown, the author expresses gratitude for the experience and the connections made, highlighting the lessons learned about content creation, developer engagement, and the open-source community. Read More

The Chrome and Web Developer Relations team is significantly expanding in 2022. Open roles span program management, Chrome extensions, CSS, rendering, DevTools, web performance, the Privacy Sandbox, and web ecosystem. The team is seeking program managers, developer relations engineers, technical writers, and infrastructure specialists to contribute to various initiatives, including Chrome Dev Summit, Google I/O, web.dev, and improving the overall web platform. Read More

I'm so excited by the renewed interest in web development sparked by Wordle! It's a simple, fun game that highlights the power of the web. It's accessible, fast, user-friendly, and has inspired countless developers to create their own versions and variations. This post celebrates Wordle's impact, lists various Wordle-inspired projects (including different language versions, framework implementations, and even tools), and encourages readers to share their own discoveries. Read More

I missed the trajectory of React's rise. Blinded by my focus on technical details, I failed to see the bigger picture of market demands and developer needs. I need to improve my ability to identify these trends earlier. Read More

This blog post discusses the top challenges faced by web developers in 2021 based on a quarterly survey. The findings reveal that the top pain points remain consistent with previous years, including browser compatibility, testing, documentation, debugging, framework usage, and security/privacy concerns. The survey data highlights the difficulties developers face in keeping up with evolving web standards and the ever-expanding ecosystem of tools and frameworks. Cross-browser compatibility and testing remain significant hurdles. While initiatives like Compat 2021 aim to address these challenges, their impact is yet to be fully realized. The data consistently shows the need for improved developer tooling and a more streamlined web development experience. Read More

I sincerely apologize to the Safari team for misrepresenting their compatibility score in our Chrome Dev Summit presentation. Due to a combination of personal circumstances, a reliance on outdated Safari Tech Preview data from wpt.fyi, and the rush leading up to the event, we displayed an incorrect improvement score (64 => 85 instead of 64 => 92). This was my mistake, and I take full responsibility. While we attempted to rectify the situation, it was too late to change the presentation. Our intent was never malicious, but rather to highlight the collaborative effort to improve web compatibility. I've learned valuable lessons from this experience: triple-check data, consult with relevant engineers, focus on stable release data, and communicate with browser teams transparently. Going forward, we'll prioritize broad browser support and emphasize the user experience in stable releases. Read More

With Chrome nearing version 100, there's a concern about whether user agent checks relying on "Chrome 10" will break. Analysis of HTTP Archive data suggests this is unlikely, with most instances of "Chrome 10" in JavaScript code being comments or workarounds rather than version checks. While client-side checks seem safe, server-side checks remain a concern, highlighting the need for User Agent Client Hints. If you know of tools that might be affected by the Chrome 100 user agent change, please get in touch. Read More

Web compatibility is a major developer concern. While projects like Compat 2021 aim to address these issues, data-driven analysis is crucial for understanding the web's evolving compatibility landscape. This post highlights Browser Compat Data (BCD), a valuable resource from Mozilla that offers detailed compatibility information for web APIs. BCD bridges the gap between raw Web Platform Tests data and user-friendly tools like caniuse.com. I've created a demo app, "The Web Of...", utilizing BCD to visualize API availability across different browsers at specific points in time. This data empowers developers to make informed decisions about API usage, assess compatibility across browser engines, and track the overall progress of web compatibility. The availability of such data opens up possibilities for new metrics like a "CompatIndex" to quantify web compatibility. Contributions to the BCD project are encouraged to further enhance this valuable resource. Read More