Ryan Seddon

How to build an Agent, On-Device Edition

Wed, 13 Aug 2025 23:02:26 +0000

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 code, just pop open your browser dev tools console and you can follow right along as you read this!

The Rise of On-Device AI: What's Next for LLMs in the Browser

Sat, 14 Jun 2025 03:21:38 +0000

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.

Presentation: On-device LLM with Gemini Nano

Thu, 14 Nov 2024 09:07:32 +0000

I recently gave a talk at a local meetup, MelbJS.

Talk was about my explorations with the Google Chrome Built-in AI early preview.

View transitions + speculative rules

Sat, 06 Jul 2024 00:16:47 +0000

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.

Narrate your life with Generative AI

Fri, 08 Dec 2023 02:53:08 +0000

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.

This 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 generative AI capabilities were done through APIs.

All that was needed was the ability to capture a stream from a users webcam and take a snapshot at required intervals. This is fairly trivial these days in the browser.

3d printed rainbox overflow shark

Fri, 24 Mar 2023 00:05:23 +0000

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.

Earth in 2022

Mon, 16 Jan 2023 04:03:35 +0000

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 mastodon! https://botsin.space/@earthin24/109696834017584339

Patching builtin Web APIs using Proxy and Reflect

Wed, 30 Nov 2022 04:20:26 +0000

I recently wrote something up on the work engineering publication on a production use of the Proxy & Reflect objects to hook into the createElementweb api and add a CSP nonce to any style tags created that way.

📝 Patching builtin Web APIs using Proxy and Reflect.

Smarter automations with dummy switches

Tue, 16 Aug 2022 22:13:10 +0000

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 be modelled as a whole system.

Using virtual lightbulbs to represent solar stats in HomeKit

Sun, 03 Jul 2022 04:40:04 +0000

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 created with a magtag device on my fridge. But I wanted to bring it into HomeKit so I could run automations based on my solar generation.

A year in review of an electric home

Wed, 27 Apr 2022 23:23:06 +0000

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 electric home with rooftop solar.

How I produce the @earthin24 yearly summary

Sun, 20 Feb 2022 22:32:17 +0000

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 into my VPS and running some flaky scripts to generate the videos would have to be changed.

Solar dashboard using Adafruit MagTag

Sun, 26 Sep 2021 03:24:19 +0000

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 monitoring was to know my panels were performing at their optimal, and expected, output. I have a large flat roof at the back of my house and did the calculations on tilt frames vs laying flat, I could fit almost twice as many panels if I laid them flat. I needed something to monitor that their performance was outputting expected kW and the monitoring device/software could tell me if I needed to get up there and clean them.

An earth mosaic

Fri, 12 Jan 2018 17:00:25 +0000

So a while back I created a twitter bot @earthin24 that generates a video of earth, as seen from himawari8 satellite, every day.

How I built my earthin24 twitter bot

Sat, 26 Aug 2017 05:43:36 +0000

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.

Stop iOS10 browser auto-locking

Tue, 27 Sep 2016 04:19:30 +0000

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.

Changing content type of a file in a FormData request with cURL

Mon, 25 Jul 2016 16:00:02 +0000

The other day I had to test an API response based on a file having the incorrect Content-Type of a FormData PUT request.

So how does the browser actually render a website

Wed, 04 Nov 2015 09:47:28 +0000

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.

Modernizr 3: A beginners guide

Thu, 24 Sep 2015 15:18:09 +0000

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 access the course for free.

They’re all gone thanks for playing :).

Sample Page

Sun, 12 Oct 2014 00:26:37 +0000

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 Jack, and I like piña coladas. (And gettin’ caught in the rain.)

UITableView in JavaScript, list view with re-usable cells using flexbox

Tue, 22 Jul 2014 11:19:05 +0000

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 fine art of UITableViews. Now this has certainly been done before in JavaScript, the best known project being infinity.js, but my approach takes an interesting turn, I avoid heavy DOM operations by using flexbox.

Creating a sunrise alarm with the LIFX lightbulb

Fri, 18 Apr 2014 14:00:16 +0000

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 with my alarm on my phone.

A follow up to obtaining 60fps scrolling performance

Mon, 13 Jan 2014 12:02:16 +0000

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 technique.

60fps scrolling using pointer-events: none

Mon, 25 Nov 2013 10:30:36 +0000

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.

Composited layers in iOS Safari bug

Wed, 30 Oct 2013 09:57:20 +0000

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.

Instrumenting code with generators in JavaScript

Thu, 15 Aug 2013 11:22:03 +0000

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.

iOS6 network activity spinner and CORS

Wed, 12 Jun 2013 11:27:24 +0000

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.

Stealing the users back button with the History API

Wed, 24 Apr 2013 08:50:08 +0000

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.

Testing $location in an Angular service

Fri, 01 Feb 2013 07:12:16 +0000

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.

Multi-level Source maps

Fri, 02 Nov 2012 09:43:27 +0000

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 the following demonstration showing multi-level source maps for TypeScript and Coffeescript. If you haven’t enabled source maps you can do so in Chrome and WebKit Nightly by opening the dev tools > clicking the cog in the lower right corner > general > enable source maps.

Weird behaviour with optgroups in iOS6 Safari

Wed, 10 Oct 2012 11:01:34 +0000

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.

Extreme specificity overriding a CSS ID with 256 chained Classes

Fri, 17 Aug 2012 03:27:58 +0000

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.

Curtain reveal effect using CSS

Wed, 18 Jul 2012 11:11:49 +0000

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.

Bunyip: client-side unit testing made easy

Tue, 05 Jun 2012 12:37:11 +0000

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 rewrite your tests and allows you do it all from the command line in desktop and mobile browsers. Watch a video showing it working.

Testing on Mobile devices

Wed, 28 Mar 2012 08:58:41 +0000

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 testing on a vast array mobile devices without having to purchase said devices.

Introduction to JavaScript Source Maps

Wed, 21 Mar 2012 23:55:26 +0000

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.

A short Modernizr course

Wed, 11 Jan 2012 22:57:34 +0000

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.

Playing with the clipboard in iOS safari

Wed, 21 Dec 2011 10:33:16 +0000

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.

addEventListener, handleEvent and passing objects

Fri, 21 Oct 2011 09:47:20 +0000

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.

Fullscreen HTML5 video

Mon, 10 Oct 2011 09:38:10 +0000

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 updated to point to official editor draft, thanks Hans!.

Talks

Sun, 14 Aug 2011 01:18:50 +0000

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.

Handling high resolution sprite images with CSS3

Wed, 15 Jun 2011 12:41:09 +0000

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. You then switch it up using media queries depending on the screens dpi, this has been documented and discussed many times. Let’s try a different approach.

I scope, you scope, we all scope for NoScope! JS style element injection quirks in IE

Wed, 13 Apr 2011 12:18:09 +0000

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 element and an inline style element, do its test then remove both elements. All this happens while the page is loading and as you can see the more tests that involve these steps exponentially grow the number of times it needs to touch the DOM.

Remote debugging with jsconsole, a different take

Mon, 07 Mar 2011 11:15:05 +0000

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 is a Firefox plugin that allows Firefox to act as a WebSocket server and receive and delegate messages sent from a client.

Getting fancy with the console

Wed, 23 Feb 2011 11:36:42 +0000

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.

I’ll have the DOMFileSystem with a side of read/write access please…

Thu, 02 Dec 2010 13:44:42 +0000

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 gaps. Eric Uhrhane of Google has been working on the working draft of the File API: Directories and System specification which defines a set of APIs to create a sandboxed filesystem where a web app can read and write data to.

The H5F library, emulate the HTML5 forms chapter

Wed, 29 Sep 2010 11:33:17 +0000

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.

Drag out files like Gmail

Mon, 16 Aug 2010 12:53:42 +0000

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 method of the save dialog.

Pure CSS collapsible tree menu

Wed, 14 Jul 2010 11:52:53 +0000

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 works pretty well.

How Gmail’s drag and drop works and why it’s not supported in Safari

Wed, 21 Apr 2010 12:42:51 +0000

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 was that it doesn’t work in Safari?

Futurebox, lightbox without the javascript and target pseudo-class

Sat, 10 Apr 2010 02:05:14 +0000

So I recently released a revised version of Futurebox which added a lot of functionality. But one thing was nagging me, the fact that it utilised the target pseudo-class to hijack in page anchors which has a few side effects that can create some major drawbacks to the technique. One being that if you click multiple futurebox links and then click the browser back button it will go through all the previous overlays that were activated due to the natural behaviour of in page anchors. The other drawback, clicking an in page anchor can cause the page to abruptly jump as it tries to bring the anchor location to the top of the page.

Is that a Speedo in your pocket?

Sat, 13 Mar 2010 04:11:25 +0000

Why yes it is…

I’ve been sitting on this little idea for a while and as a bit of fun I finally got around to putting it together and properly testing it. Basically on an iPhone with geolocation support (3.0+), I have set up a little web app that will get the speed from the GPS and move the speedometer needle according to your current speed in kilometres.

Custom radio and checkbox inputs using CSS

Fri, 19 Feb 2010 05:13:08 +0000

In my never ending quest to find weird and wonderful ways to abuse CSS and all its little intricacies, I have come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting browsers. The journey wasn’t easy and I was on the brink of filing it in the “to crazy” folder, never to be seen again. Luckily I had a brain wave that paid off and actually allowed this to be a very viable solution that degrades beautifully and works in 80% of the browsers. This is my story.

Web Notifications

Sat, 06 Feb 2010 06:40:58 +0000

Web Notifications allows users to get updates on a webpage even if they’re not looking at it, shown to them through small notification boxes, think growl. This opens up some great potential for the current web apps out there. When you get a new email it could popup a little notification much like our desktop email clients do now or your twitter page could let you know when new @replies have come in, the possibilities are endless.

Even better image preloading with CSS2

Tue, 05 Jan 2010 08:35:17 +0000

Recently I read an article on better image preloading using CSS3 which presented a clever idea using CSS3 multiple background images to preload images on one element as opposed to another method of having containers for each image. As of writing the support for multiple backgrounds is fairly sparse with webkit having the best support (Safari 3+ & Chrome 1+), Firefox is introducing this in the upcoming 3.6 release.

Futurebox, revisited

Sat, 19 Dec 2009 05:12:01 +0000

Earlier this year I unleashed futurebox into the wild. It got a whole lot more attention than I anticipated and I got some great feedback. Since then, I have been slowly working on a new version of futurebox which incorporates many new features.

The File API has changed

Thu, 10 Dec 2009 06:53:52 +0000

Recently I have been touting how awesome and revolutionary the File API is through a few demo’s. After some feedback on webapps mailing list there have been some major changes to the API and how it works.

Font Dragr: A drag and drop font tester

Tue, 13 Oct 2009 07:39:27 +0000

After playing with the new file API draft spec available in Firefox 3.6 with my drag and drop upload article. I had another idea when I was playing with custom fonts, @font-face, in the browser. What if you could drag an drop a font file (otf, ttf, svg, woff) from your desktop into the browser and have text rendered on the fly using any available valid font.

Make IE awesome by turning it into Google Chrome

Wed, 23 Sep 2009 12:15:15 +0000

As I’m sure you all know by now Google made an announcement about their Chrome Frame plugin for IE that turns the Trident rendering engine into the Chrome rendering engine giving IE access to the awesome power that is Chrome. No longer will IE miss out on those awesome new features in CSS3 & HTML5 the more competent browsers enjoy today such as the soon to be released Google Wave.

Drag and drop file uploading using JavaScript

Wed, 26 Aug 2009 08:52:39 +0000

With the recent announcement of the File API draft specification being published I’m sure a lot of people were confused as to what it could really do and why it is truly a powerful API. Firefox’s latest alpha release of their 3.6 browser, aka Namoroka, is the first to implement this new draft specification.

Create the accordion effect using CSS3

Wed, 05 Aug 2009 13:26:25 +0000

Recently I have been playing around with CSS transitions and animations as implemented in webkit based browsers such as Safari and Chrome. They have been submitted to the W3C for consideration in the CSS3 spec so hopefully we should see more browsers support this soon, Firefox 3.5 supports CSS transforms which was developed by the webkit people to work alongside CSS animations & transitions.

Real text rotation with CSS

Wed, 29 Jul 2009 11:27:22 +0000

Just saw a great post on Jonathan Snooks’ blog about doing text rotation with CSS and how to accomplish it in IE using IE propriety filter basic image property to rotate a text block. But there is a better way using CSS3 writing-mode property that has been in IE since version 5.5.

Accessing the GPS in iPhone Safari

Wed, 08 Jul 2009 13:15:18 +0000

Finally with the release of the 3.0 firmware update to the iPhone we now have access to the GPS coordinates in Safari. Using the W3C Geolocation API we can access the users position much the same way a native app would. The user can either allow or disallow the current websites’ access to your location.

Determine iPhone orientation using CSS

Mon, 29 Jun 2009 11:08:19 +0000

With the beta of Firefox 3.5 showcasing 35 new features over 35 days, the article on CSS3 media queries stuck out, the orientation detection really got my attention and immediately put my thought process to mobile devices, in my case the iPhone. I thought this is great maybe this has been snuck into the iPhone 3.0, unfortunately for us it wasn’t. That didn’t stop me and I got thinking about how it could be done if at all on the iPhone without using JavaScript.

Futurebox, lightbox without the JavaScript

Sat, 20 Jun 2009 06:42:04 +0000

I was playing around the other day and had a bright spark. Is it possible to do the “lightbox” effect without JavaScript? The answer is yes! Thanks to the :target pseudo class. Without further ado I introduce Futurebox.

How to create offline webapps on the iPhone

Tue, 28 Apr 2009 04:30:46 +0000

Recently Google launched their latest mobile version of Gmail optimised for iPhone and Android based browsers. One of the features that stood out was the offline access thanks to the browsers support of html5 application cache.

Top 8 April Fools websites of 2009

Sun, 05 Apr 2009 12:56:06 +0000

Each and every the web produces some of the best April Fools jokes across the globe, some go all out and create fantastic often highly involved and well thought out pranks. Let take a look at the top 8.

Advanced hover states using CSS

Wed, 01 Apr 2009 12:30:13 +0000

The hover pseudo-element in CSS can be a powerful tool in a front-end developers arsenal, it’s not only for changing a links colour. In good browsers the hover element can be applied to almost anything but unfortunately ie6 & 7 only support the hover selector on the anchor tag, but of course that isn’t going to stop us accomplishing something cool. I’ll be looking at using the hover pseudo-element to add some clever functionality when a user hovers over an image.

Chroming: How google is changing the browser

Mon, 23 Mar 2009 11:23:22 +0000

The browser wars are in full effect once again thanks to a healthy plethora of browsers available such as Safari, Firefox, Opera and Chrome all leading the way in the addition of new and exciting features in the upcoming CSS3 & html 5 specifications.

Don’t kill IE6, degrade it.

Wed, 11 Mar 2009 11:12:57 +0000

Buzz about the internet has been rampant this year with many claiming that this is it, 2009 will be the death of IE6. A campaign in Norway has declared war with some great success. There are now some high profile Norwegian sites following with a week long campaign to educate users on more suitable browsers they can use instead of IE6.

5 clever uses of the canvas tag

Wed, 25 Feb 2009 11:17:01 +0000

If there is one thing that really gets me exciting about the upcoming HTML 5 specification it’s the canvas tag. This relatively simple tag holds so much potential and power thanks to the strong well thought out JavaScript API available to manipulate what appears on the canvas.

iPhone bookmarklet, for saving bookmarklets

Sat, 14 Feb 2009 05:09:14 +0000

Have you ever found a useful bookmarklet while browsing on your iPhone only to discover that you can’t actually save it directly from the phone. Frustrating I know, so much so that I decided to make my own bookmarklet that lets you save it on your phone. Let’s delve right in and take a look at the JavaScript involved.

Sangraal layout: A true flexible, fluid CSS layout

Tue, 10 Feb 2009 01:10:10 +0000

The wait is over, finally a real ‘sangraal’ layout that ticks all the boxes:

3 column, 2 column, 1 column it’s all flexible
Fluid centre layout
No need for negative margins.
Works in ie5+, firefox 1+, opera 9.6+, safari 2+, chrome
Minimal mark-up & clean CSS

A look at pure CSS IE6 min-width solutions

Sun, 01 Feb 2009 03:18:12 +0000

As a large user base are still using Internet Explorer 6, with it’s extremely poor support for essential CSS, we as front-end developers need to come up with creative solutions to Internet Explorer’s limitations. One such limitation is the min-width property. In this article I will be looking at 2 pure CSS solutions each with their strengths and weaknesses.

Why display: table shouldn’t be frowned upon

Sat, 24 Jan 2009 03:44:12 +0000

I’ve seen a lot of commentary on the for, and against of using the CSS property display: table, a lot of it negative. It takes us back to the dark ages, using tables for layout. These people tend to forget that CSS is purely presentational and setting something as display: table is not the same as using the table tag. A screen reader going over a layout styled using the CSS table model will not get confused and muddled up. It will in fact breeze through a layout done correctly no matter which technique used floats or CSS tables. The display properties values: table, table-cell, table-row etc are named due to the fact its presentational result is that best described of how a table would work and the similarities end there.

Contact

Wed, 10 Dec 2008 12:05:20 +0000

Need to get in contact? Fill out the form below.

Please do not contact me for the following

SEO, seriously go jump off a cliff.
Advertising, go through adpacks.com if you want to advertise on my site
Support for a project on github, go to github and file an issue

Getting hammered with spam so turning off this contact form. If you can google, you can find my email that way

About

Wed, 10 Dec 2008 11:22:54 +0000

What is The CSS Ninja?

The CSS Ninja is a personal blog and playground where I can put my skills and ideas out into the public.

Who is The CSS Ninja?

My name is Ryan, I live in the great city of Melbourne, Australia. I’ve been in the front-end developing game for a long time. This is my ‘lab’ where I post my thoughts, tutorials, trends and ramblings on front-end dev sexyness.