Hello. I am Paul Kinlan.

I lead the Chrome and the Open Web Developer Relations team at Google. Exploring the intersection of modern web design and future-facing technologies.

4 min read

Using Canvas to create beautiful custom markers in Google Maps

This post details how to use the HTML5 canvas element to dynamically create visually appealing custom markers for Google Maps. Instead of using a server to generate marker icons, we leverage the canvas API to draw rounded rectangles with gradients, center text within them and ultimately convert them into data URIs. Using the HSL color model allows for the creation of a harmonious range of colors by adjusting the hue while maintaining consistent saturation and luminance. This client-side approach offers flexibility and control over marker appearance, specifically highlighting techniques for rounded corners, gradients, and text centering. The code examples provided demonstrate the process of generating these markers and integrating them into a map.

Stay in the loop.

I'm trialing a newsletter. Join for monthly insights into web dev, Chrome, and the open web.

alternate_email

Get in touch

Open to chat about Chrome or Web development.

Book a consultation
1 min read

.Net Developers: SVN vs Mercurial pt2

In this follow-up post, I've decided to use Mercurial for my project's version control. While feedback leaned towards Subversion (SVN), I prefer Mercurial due to its distributed nature, Codeplex support, available .Net tools, and superior branching capabilities. I'm open to further discussion and any compelling arguments for reconsidering SVN.
1 min read

.Net Developers: SVN or HG?

I'm curious to hear from .Net developers, both those working with Windows and Mono, about their preferred source control service between Subversion (SVN) and Mercurial (HG). I'd love to know which one you find most effective and has the least impact on your daily workflow. While I know other SCMs exist, I'm specifically interested in opinions on these two.
2 min read

Using HTML5 Canvas with Drag and Drop (setDragImage)

Using HTML5 Canvas with Drag and Drop (setDragImage) I know a lot of people complain about Drag and Drop (DnD), but it is not all that bad. At least we have a platform to work off for the future. We have recently seen a lot of improvements to Gmail which now includes additional support for Dragging in to Gmail to upload your docs and files, and also dragging attachments out of Gmail to the user file system.
2 min read

Canvas on the Background

I recently discovered a cool trick in WebKit that lets you use a canvas element as a background image, which opens up a ton of creative possibilities. It's a powerful feature, allowing for dynamic, programmatic manipulation of background images. I've included a simple demo showing how to draw a square on a div's background, but imagine the possibilities for games or complex animations! While currently WebKit-specific, I hope other browsers will adopt it soon. More demos to follow!
3 min read

DOM TreeWalker

Tired of recursive DOM traversal headaches? Check out the DOM TreeWalker API! This powerful tool lets you efficiently navigate the DOM, filtering nodes as you go. It's perfect for tasks like finding specific text nodes or elements, highlighting content, or even building Chrome extensions. I've included a simple example of how to use TreeWalker to find and linkify Twitter usernames on a page. Give it a try and see how much easier DOM manipulation can be!
1 min read

Amsterdam

I'm heading to Amsterdam for a business trip, my first time back since I was about 7 years old. While I'm there for work, I'm hoping to explore the city in my free time over the next two days and capture some of the experience through photos. I'd love to hear recommendations on things to see and do!
1 min read

Liverpool John Lennon Airport

Liverpool John Lennon Airport is in a terrible state! There are not enough chairs, the restaurants are dirty, and it's unbearably hot. I'd rather fly from Manchester or Heathrow than deal with this again.
1 min read

What makes an HTML5 Application an Application

We have been thinking about what properties of an HTML application make it an application rather than a webpage with logic. We have documented our thoughts here: http://code.google.com/chrome/apps/articles/thinking_in_web_apps.html (Thinking in Apps). This is only the start of our thinking and work on what hopefully will become a robust guide to patterns in web application development. Many of the things that define a great web page experience are also the same things that describe an application experience on the web, however we think there are some subtle differences, especially around the use of client side data storage, offline support and user experience.
2 min read

Berlin GTUG.

I had a great time speaking at the Berlin GTUG, despite the unexpectedly hot weather. I presented on Web Apps, highlighting the differences between native and web apps, key principles of good app design, and some of the exciting new possibilities with HTML5, CSS3, and WebSockets. I wish I'd had more time to delve into frameworks for building great apps and do some live coding. Chris Chabot also gave a fantastic talk about Buzz. The venue, BetaHaus, was excellent, and I was impressed by everyone's English fluency. Thanks to all who attended!