Chris Hannah


Create a 9-Patch Border with Broider #

Pretty cool little tool by Max Bittker to make 9-patch borders in CSS. Reminds me very much of the pixel art in GameBoy games. If you notice a new border anywhere on my website soon, you know where it’s from.

Adding a Touch Bar Icon to Your Website #

With the MacBook Pro’s new Touch Bar, you can now create your own favicon that will appear there when a user sets it as a bookmark. The same file is also use to create an alpha mask when adding your website as a Pinned Tab.

It’s a small bit of code, that you add to your <HEAD> section, just by your other favicons.

Just specify that it is a “mask-icon”, add the location for the file (has to be SVG), and then specify a colour to be used. The colour is the background on the Touch Bar icon, and it’s also the colour used in the Pinned Tab mask.



As an example, you can see the new touch bar icon I made for Radical Thinker.

If you haven’t already, you can also set an icon for when a user adds your website to their home screen on iOS. This is done similarly, but doesn’t have to be an SVG.