Recent content on Ryan Seddon
This post explores how to build an agent using an on-device model such as Phi-4-mini or Gemini Nano (available in Edge or Chrome browsers respectively), all behind a simple flag. This approach lowers the barrier to entry since it requires no external API or service. You can read the original, How to Build an Agent . I urge you to follow along. The barrier is so low, it’s less than 200 lines of…
On June 12th, 2025 I gave a talk at Web Directions Code conference about the rise of on-device AI and how rapidly the capabilities are moving, and how capable they are today.
I recently gave a talk at a local meetup, MelbJS . Talk was about my explorations with the Google Chrome Built-in AI early preview .
I’ve been very interested in the potential of view transitions since they were called navigation transitions . Recently, they’ve landed in Chrome stable v126 with a more stable API. Initially it was a SPA-only API but has now been opened up to MPA, first with an experimental meta tag and now via a CSS at-rule.
A few weeks ago Charlie Holtz ( @charliebholtz ) showed a pretty cool demo using GPT4’s multimodal abilities to caption and narrate a screenshot of you which was then passed to ElevenLabs to speak out in the voice of David Attenborough with their cloning service. T his demo required you to run the code on your machine using python. I wanted to see if it could be done in the browser since all the…
We have a large hole, 65mm, cut into our gutter rainbox to allow it to overflow in the case of a large downpour. Rather than have a hole there I worked with my daughter on choosing something fun to cover it while still allowing it to overflow. After deliberating over a unicorn vs trex vs shark we settled on the low-poly shark head . Check out sharkbox .
Another year another timelapse of earth as seen from 5 satellites! I’ve been running this little twitter bot for over 5 years now and it never gets old watching this beautiful pale blue dot. I’ve previously wrote about how I do the yearly timelapse . Earth in 2022. A year in review 🧵 — Earth (@earthin24) January 16, 2023 If twitter isn’t your thing it’s also on…
I recently wrote something up on the work engineering publication on a production use of the Proxy & Reflect objects to hook into the createElement web api and add a CSP nonce to any style tags created that way. 📝 Patching builtin Web APIs using Proxy and Reflect.
The Home app has some frustrating limitations around creating automations or triggering events that don’t require auth from the user. Apps like Eve allow you to hook into more HomeKit APIs and create automations that can react to more sensors. What’s missing though is awareness of the automation suite as a whole e.g. overrides, priorities, and general awareness of how a bunch of automations could…
Homebridge has been an amazing contribution to connecting most of my home into a single automation platform. If you’ve read this blog you’ll know that I’ve electrified my home and dumped fossil gas into the past where it belongs. Bringing solar into HomeKit Part of electrifying my home was adding solar and I’ve talked about how I’ve extracted data from my realtime circuit hardware via a dashboard…
Let’s start with the acknowledgment that I am in a very privileged position to be able to do this to a home I own. I do believe that my home will be commonplace in the coming decade, clean, fossil fuel-free, and efficient. I just got here earlier as I had the means and passion to be an early adopter. I electrified my home about 18 months ago but have only now clocked over 12 months of an…
Every year I produce a timelapse video of my @earthin24 twitter bot for each of the 5 satellites that it tracks. Earth in 2021, a year in review thread 🧵 pic.twitter.com/L485FyF7EH — Earth (@earthin24) January 3, 2022 This year was the first year I built, tweeted, and stored each video and fulldisc frame inside github using their actions infrastructure. So my usual process of ssh’ing…
I recently had the privilege of being able to install solar on my roof and with that came the need/want to track and monitor lots of information about my solar install and my usage patterns of it. Having recently electrified my home and completely removing gas all together (I plan to write about this too), I wanted to know where I could load shift some of my usage patterns. Another aspect of…
So a while back I created a twitter bot @earthin24 that generates a video of earth, as seen from himawari8 satellite, every day.
At work my team have recently taken over a golang app. To learn a new language I like to build something that keeps my interest and by the nature of exploring something of interest you tend to cover way more surface area of a language this way.
I had twitter open the other day and I had to put my phone down and attend to something else, the timeline happened to be on a looping gif video and I noticed when I came back that my phone was still awake and unlocked the fact that video was in view kept the phone awake and this got me thinking about the new playsinline attribute that has been enabled for <video> elements in iOS10 Safari.
The other day I had to test an API response based on a file having the incorrect Content-Type of a FormData PUT request.
September 2015 I had the privelage of giving a talk at JSConfEU 2015 in Berlin. My topic was about what the browser actually does to construct your website and show it on the screen. This is a topic I’ve been digging into for a few years now and it was really fun trying to distill it into a ~25 minute talk.
Just in time for the launch of Modernizr 3 I’ve been working on a beginners course . This is aimed at people who are getting started in web development and want to know how they can use Modernizr in their workflows. I have 5 vouchers to give away that will give you free access to the course! The first 5 people to tweet the course link with the hashtag #modernizr3course will get a voucher link to…
This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this: Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named…
If you’re familiar with iOS development you will know that a UITableView is very efficient when displaying a list of data. A simplification of what it does is display enough cells to fill the viewport plus a few more either side. As you scroll it re-uses cells that are now out of the viewport so a list with thousands of items will only ever use a fixed amount of cells. Highly recommend reading The…
If you’re unfamiliar with LIFX it’s basically a smart wifi enabled led lightbulb. Lifx recently released a Ruby gem to communicate with it and give it instructions. With winter looming in the southern hemisphere and the sun being up for what feels like 4 seconds at that time of year it’s really hard to get up in the morning so I investigated using their gem to simulate a sunrise effect in time…
60fps scrolling article got quite a few people excited but also a few smart people to point out some flaws in the approach. I was planning to just update the original article but I’ve compiled so much info about this topic that I thought it would be better to do a follow up article and dive into the detail of the techniques that I tried and some solutions to the critiques made about the last…
Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class.
So had an interesting bug the other day where upon refresh, navigating to another page or external site within the same tab on iOS safari would cause some of my content to flash before the page was loaded. What’s interesting is the main layer over the top was a composited layer and the one beneath was not.
I saw a really cool demo by James Long using Firefoxes implementation of Generators to instrument code so you can stop the execution and step through it like your in the dev tools using break points.
TL;DR; iOS6 will keep the network activity spinner around forever, with no fix, if you do a CORS ajax request at any time with preflight the network activity spinner will stay until the tab is closed.
Gruber posted a video of a website that does some dodgy history insertion. Go to tgdaily.com let it load (it has horrible perf so give it a bit) and click back and you’ll notice that you get taken back to exitjunction.com with tgdaily as a query. Insert rage face here. Once past rage face open dev tools and investigate.
I’ve been deep in the Angularjs world and have gone through the many emotions other developers have expressed . One thing that is lacking is best practice on testing, although yearofmoo has a huge article on testing which improves this greatly. I still had some trouble and I thought I’d post this to help others.
Source maps are awesome but one issue is that compiling from x-lang to JavaScript is a single level of mapping, if you want to go from x-lang > JavaScript > minified JavaScript you couldn’t as closure compiler, currently, only has a single level of mapping, until now. UglifyJS2 allows you to specify an input source map from the first stage of compilation, enabling multi-level mapping. Check out…
So recently the company I work for has been getting quite a few complaints on our location dropdown randomly (un)selecting country locations in iOS6 Safari. Thinking at first it may be something to do with our code I quickly created a reduced test case that stripped everything away except for the select in question and the behaviour persisted.
The other day Chris Coyier created a test case demonstrating that chaining together 256 classes will give it greater specificity than an id, in theory it shouldn’t. But in IE, Mozilla and WebKit browsers it does, Opera on the other hand upholds the specificity. Not familiar with CSS specificity then take a look at Estelle Weyl’s hilariously informative specifishity chart .
I recently redesigned my site and wanted to add a little fun effect at the bottom of the page (go on scroll down I’ll wait) that looked liked the whole website was sliding up and revealing a secret section under the footer and I wanted to do it without JavaScript.
Let’s face it doing thorough client-side unit testing fills me with rage, throw mobile browsers into the mix and I want to start flipping tables. There are tools out there to somewhat tackle this issue but they either require painful setups or want you to rewrite your unit tests using their framework. What if I told you there’s a tool that is easy to get up and running, doesn’t require you to…
A while back Brad Frost posted a very useful breakdown on testing mobile devices and how to do it without breaking the bank. This post is kind of an extension to it but pointing to other useful resources that I have come across and used. Frost went down the route of physical devices, what you should test and their breakdown in prices. This post will be a list of services I have come across for…
Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you’ve combined and minified it, without impacting performance? Well now you can through the magic of source maps .
Last year, I did a quick 5 min presentation on some of the features available in Modernizr for Web Directions What Do You Know event. From there, Sitepoint & Learnable’s Kevin Yank asked me to put together a short course for learnable.com based on the presentation. So after working on the occasional weekend I put it all together and got it launched just before xmas 2011.
So the other day it hit me that since iOS safari supports contenteditbale it should surely have support the clipboard events and other handy bits and pieces. Like any good hacker I created a testcase to find out basic support of events and getting selection range values, and as expected the support is pretty good. Let’s dive deeper.
Here’s a super awesome trick I had no idea about until someone pointed out you could do this. addEventListener can take an object as a second argument that will look for a method called handleEvent and call it! No need for binding “this” so it will pass around the context correctly, the context is the object you’ve just set as the event listener callback.
In preparation for a talk I’m doing at Web Directions South I needed to be able to put video into fullscreen mode from within my HTML based slides. In order to do this I imagined I would of needed to use flash but thankfully Webkit nightly, Chrome dev and Firefox nightly have added the ability to put HTML5 videos, and other elements, into fullscreen mode using javascript. The FullScreen API now…
I love writing about web tech and now I’m starting to speak about web tech! Here you’ll find links to slides I’ve talked about and upcoming events. If you’d like to contact me about speaking somewhere hit me up through the contact page.
The iPhone 4 has introduced a new challenge to web developers due to its retina display using a higher dpi than most devices. What looked sharp in desktop browsers and other lower dpi devices appears blurry and pixelated on the iPhone 4 and potentially other devices which will have higher dpi screens. The current solution is to have two sets of images one for general and one for high dpi screens.…
The other day I was writing some updates and improvements for Modernizr , one to detect for generated content support and two to improve stylesheet and element injection. Modernizr already in a few places inserts a stylesheet and a corresponding element to do some tests e.g. generatedcontent , touch , css3transforms and a few others. All this happened multiple times; each test would inject an…
Ever wanted to remotely access the DOM of a mobile device so you could make changes, test ideas and generally just have a bit of fun. I know I have and I’ve been hacking to create a proof of concept piggy backed on the development of two great projects. The first is Remy Sharps awesome little jsconsole web app that lets you do a bunch of cool stuff using a simple yet elegant interface. The second…
The trusty console.log() method serves a great functional purpose to write messages to the developer console. But did you know the console object has around twenty other methods you can use? I rarely see developers tapping into the extra power the console provides other than using it as a non-blocking alert. Let’s change that.
Filesystem access has been a pipe dream for web developers for many years. With the ever evolving complexity of web apps and their need to potentially process large amounts of data, filesystem access is the next evolutionary step in order to push web apps to the next level. Thankfully, smart people have been thinking about these issues and defining new and useful specifications that fill those…
Recently I wrote an article for A List Apart about Forward thinking form validation and I introduced a script I wrote that emulates some of the new HTML Forms chapter functionality in older browsers, allowing a developer to use all these new features and have it work the same across the board.
Google in their quest to keep me busy in trying to figure out how they do their innovative features in Gmail are at it again. First it was drag and drop uploading which used a clever trick to make it work in Chrome which currently doesn’t support the FileReader in their stable release. Now they’ve added the ability to drag out attachments to your file system, allowing you to bypass the usual…
The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not content with any of those solutions I investigated doing it with pure CSS, I got a good head start from my Custom Radio and Checkbox inputs article. From there I’ve come up with a solution that…
Recently Gmail pushed out an update that allowed users to drag and drop files from desktop to Gmail and have them automatically uploaded. Being the web geek I am I had to figure out how it functioned. Firefox was easy and I have covered drag and drop uploading already. They also mentioned in their post that Chrome was supported but I know Chrome is yet to implement the File API. Most intriguing…