Hello.

As a data-driven manager, I needed a way to track the performance of our team's numerous NPM packages. Frustrated by the lack of an obvious API, I discovered a hidden gem in the NPM registry documentation. Using this, I created a Google Sheet with custom functions to pull download stats directly. The sheet allows you to track both scoped and non-scoped packages, view data in a table or column format, and easily create charts to visualize trends. Check out the linked sheet and accompanying code to build your own NPM downloads dashboard! Read More

We've been using surveys like the MDN Developer Needs Survey and our own quarterly surveys to understand web developer challenges and prioritize our efforts. These surveys highlighted issues like web compatibility, testing, and documentation, leading to improvements like our Web Compat initiative and increased focus on MDN documentation. While valuable, these surveys don't offer granular feedback on specific projects or proposals. Direct feedback is essential, but our current approach is informal and inconsistent. To address this, we've partnered with C SPACE to create the Web Developer Insights Community – a dedicated group of ~1000 web developers who'll provide direct feedback to our questions. This community allows open communication among developers while limiting Chrome team influence. We're excited about this new channel for gathering actionable developer insights and encourage you to join if you're interested. Read More

I integrated the Squoosh CLI into my web app to optimize images. Although Squoosh offers a great CLI, I needed its functionality within my app. Leveraging my experience with FFMPEG in web apps, I adapted the Squoosh CLI code, replacing Node.js dependencies with web APIs. Now, I can call Squoosh's 'run' method directly in my app to resize and compress images. This unofficial solution works for now, but a dedicated browser API would be ideal for broader integration in CMS platforms, performance analysis tools, and other web applications. Read More

Optimizing images for the web is crucial for Core Web Vitals, but the process is overly complex. While tools like Squoosh and web.dev guides offer help, developers still struggle with image optimization. This difficulty stems from needing to consider file size, resolution, codec support, lazy loading, and more. CDNs offer a solution but introduce centralization. To simplify this, I created a prototype tool (https://just-gimme-an-img.vercel.app/) that generates optimized HTML for images, handles AVIF conversion, creates multiple image sizes, and does it all client-side using Squoosh's CLI. The tool aims to make image optimization easier and more accessible, especially for common use cases like hero images. I'm hoping this sparks further discussion and improvements in image optimization tooling to simplify the process for all developers. Read More

I'm sharing my raw, unedited thoughts on modern web development here. Consider this a living document of my ideas, some old, some new, all evolving over time. Expect errors and feel free to provide feedback (@paulkinlan@google.com, @paul_kinlan). The list of ideas will be kept up-to-date below. Read More

I'm excited to announce that I'm starting "Office Hours" to connect directly with web developers. Following a successful run at Chrome Dev Summit, I'm opening my calendar for anyone to schedule a meeting with me. I'm happy to discuss anything from JavaScript, CSS, and performance to career advice. I'm especially eager to connect with developers in underrepresented regions. Book a meeting and let's chat! Read More

I built a simple tool, shortcut.cool, to create custom launchers for Android using the web. It leverages the power of PWAs, service workers, and the web app manifest, specifically the shortcuts feature. The tool allows you to define a set of .new domain shortcuts, which then get encoded into the URL. This URL points to a dynamically generated manifest file that Chrome uses to install the PWA with the specified shortcuts on your home screen. The project is a bit of an experiment and has some limitations, like the inability to update existing PWAs and potential security concerns from URL-encoded data. However, it’s a fun example of how the web can be used to create quick, personalized tools. Read More

I created a bookmarklet to easily download all images from my daughter's nursery school portal, which doesn't allow direct downloads. It uses the File System API to let the user choose a directory and save all images there. The bookmarklet grabs all images, fetches them sequentially to avoid overloading the server, and saves them to the chosen directory using file handles and writer streams. Now I can easily preserve these memories! Read More

I built a Material Design-style Floating Action Button (FAB) without using any JavaScript. This was achieved using only HTML and CSS, leveraging anchor links and the ":target" selector to control visibility and create the open/close functionality. Clicking the FAB opens a menu with links to different actions, and clicking a close button hides the menu. This approach does have the trade-off of adding entries to the browser history, but it's a pure HTML/CSS solution for a common UI element. Read More

For my Hugo static site hosted on Vercel, I wanted a simple way to include server-side logic, like a copyright notice, without setting up a full backend. I created a function that mimics Apache's mod_include to inject dynamic content. It rewrites HTML requests through a handler that parses files for <!--#include ... --> directives. The file command injects file content, while the virtual command fetches content from the /api directory (like a modern /cgi-bin/). Caching is crucial for performance. Check out the demo and code. A more robust solution like Cloudflare Workers' HTMLRewriter would be ideal, but this works for simple use cases. Read More

I'm excited to share that I read my first entire book in Japanese to my daughter! Learning Japanese has been challenging, but this milestone feels great. Read More

My printer decided to send me an advertisement. I'm both amused and annoyed. It knows how much ink I have, so why not just sell me that instead? Read More

I needed a streaming template engine for a web app I'm building that works in Node.js, the browser, and service workers. Existing solutions like flora-tmpl were great for Node.js, but I needed something smaller and compatible with all environments. So, I created whatwg-flora-tmpl (name pending), a lightweight library based on the WhatWG Streams API. It uses template literals, handles dynamic content, and even supports nested streams. The example code demonstrates how it can be used to render HTML responses piece by piece instead of waiting for all data, significantly improving perceived performance. It's particularly useful for responses generated in service worker fetch events. Big thanks to Matthew Phillips, the creator of flora-tmpl, which served as the inspiration for this project. Read More

While building a simple CRUD PWA using only service worker JavaScript and relying on Form submissions for data handling, I encountered an issue with Safari not supporting request.formData(). I created a small shim to work around this by parsing the x-www-form-urlencoded request data as a query string and using URLSearchParams to process data similarly to a FormData object. This approach isn't suitable for multipart forms and requires a different solution. Read More

I'm on paternity leave and I realized how many tabs I have open. It's :D ridiculous. Read More

I accidentally discovered that Twitter has implemented PWA shortcuts, a feature that allows websites and web apps to provide users with quick access to common actions. This is a great step towards bridging the gap between web and native applications, allowing websites to provide a more app-like experience. Read More

I created a shortcut for iOS that lets you view the source code of web pages in Safari and Chrome. It's a workaround for the lack of a built-in view-source feature on these mobile browsers. The shortcut shares the URL to a third-party website I built which then displays the source code. Because it uses a third-party site, it won't reflect the current state of the page if you are logged in or have specific cookies set. Hopefully, Safari and Chrome will eventually bring back a native view-source option. Read More

This blog post introduces a simple bookmarklet that provides quick access to a webpage's JavaScript console logs, warnings, and errors directly on desktop and mobile devices. It eliminates the need for connecting to Chrome DevTools, especially useful for quick debugging on mobile. The bookmarklet creates a small, expandable element at the bottom of the page that displays console outputs and keeps a running tally. It intercepts calls to console.log, console.warn, and console.error, displaying the messages in the created element while preserving their appearance in actual DevTools. While not a full DevTools replacement, it's a handy tool for quick insights and debugging on the go. Read More

For years, I thought bookmarklets weren't supported on Chrome for Android. Turns out, they are! You just need to access your bookmarks through the address bar, not the Bookmarks menu. This method retains the page context, allowing your bookmarklets to execute JavaScript properly. This opens up new possibilities for customizing web pages on Android. Read More

I created a simple bookmarklet for quickly enabling Picture-in-Picture mode for videos, even on sites that disable it. Drag the "Quick PIP" bookmarklet link to your bookmarks bar. When clicked, it activates PIP for the first actively playing video on the page or in any same-origin iframe. The bookmarklet's code is concise and avoids polluting the global scope. It efficiently finds the first playing video and requests Picture-in-Picture mode. Read More