I've written before about the moribund BIMI specification. It's a way for brands to include a trusted logo when they send emails. It isn't much used and, apparently, is riddled with security issues. I thought it might be fun to grab all the BIMI images from the most popular websites, so I can potentially use them in my SuperTinyIcons project. BIMI images are SVGs. Links to a site's BIMI are stored in a domain's DNS records. All BIMI records must be on a default._bimi. subdomain. If you run …
Continue reading →
Bit of a boring write-up, but here we go. Taxi app Gett had a content injection flaw in its search function. By searching for an HTML string, it was possible for an attacker to add links or images to a page. It was really hard to contact them - but the threat of media attention sprung them into action. For example, searching for a specially crafted string meant that an arbitrary SVG could be drawn onto the page like this: Or just a regular <img> element: Links could also be added - like …
Continue reading →
One of the problems with OEmbeds of Tweets is that they're heavy. Lots of JavaScript, tracking cookies, and other detritus. See this excellent post by Matt Hobbs looking at how to make your website faster by removing Twitter embeds and replacing them with images. Here's my attempt to turn a Tweet into a semantic SVG! This doesn't attempt to faithfully recreate the exact look and feel of an authentic Tweet. But it is designed to be a small, fast, and semantic representation. Here's what it…
Continue reading →
I work on the SuperTinyIcons project. Our aim is to make pixel perfect SVG icons in under 1KB. Because SVG can be quite verbose, every single redundant byte we can eliminate is a byte we can use in drawing. Here are three quick tips for shaving a few bytes off an SVG. Decimal Magic SVG co-ordinates can have decimal precision, like: 123.456. But what about co-ordinates which are less than one? 0.123 can be rewritten as .123 - we can drop the 0! These two sed commands will turn 0. to . and…
Continue reading →
I love reading Changelogs - but I hate writing them. Here's what's changed with SuperTinyIcons since I launched it in 2017. It's a project to create SVG logos of popular services in under 1KB. Maximum filesize is 1,023 bytes. New Contributors! What started off as just me noodling around, has now attracted over 60 contributors! Some just drive-by and make a single change, others stay for a while and contribute loads. Which is nice. New icons! The project started with 80 icons. Since then…
Continue reading →
For my contact page, I wanted a generic calendar icon to let people view my diary. Calendar icons are almost always a skeuomorph of a paper calendar, but I wondered if I could make it slightly more useful by creating a dynamic icon. Here it is, an SVG calendar which always display's today's date: The background image is derived from the Twitter TweMoji Calendar icon - CC-BY. Text support in SVG is a little awkward, so let me explain how I did this. SVG supports JavaScript. This will run…
Continue reading →
You may not realise it, but bandwidth is expensive. It costs you time, money, and battery power whenever you download a file larger than it needs to be. That's why I've become a little bit obsessed with SVG - Scalable Vector Graphics. They're the closest thing to magic that the web has when it comes to image compression. Let me show you what I mean. This is the standard Twitter Logo. It's 512 * 512 pixels and, even with hefty PNG compression, weighs in at around 20KB. Here's the same…
Continue reading →
I do a lot of talks and presentations - sometimes in boring conference centres, sometimes in pubs, and occasionally in the middle of a field. One of the things that I've learned is the audio-visual equipment is unreliable. The colours can be off, the projection can be blocked by detritus on stage, or the screen can be defective. It's never a fun experience to flip to your first slide and realise that something is profoundly wrong with the picture. That's why all my presentation decks now…
Continue reading →
The Video Terence Eden is on Mastodon@edentEVERY EMOJI! pic.x.com/2fcuqwu67c❤️ 1,306💬 54🔁 020:09 - Tue 24 October 2017 Download the WEBM version (19MB). The Process Mostly notes to myself, but I thought you lot might be interested 🙂 Get Every Emoji from Twemoji Twitter maintain the Twemoji Project - it contains high quality SVGs of every emoji. They generously make them available under CC-BY. But grabbing all the SVGs we want is a little tricky. GitHub don't make it easy to download a sin…
Continue reading →
Five years ago, Twitter updated its logo and demonstrated that it could be made entirely of circles. Interestingly, the official Twitter logo doesn't use circles directly. So, here is an SVG I've made which is only circles: Or, without the edges, and no transparency: And the raw code: <svg height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" fill="#fff" r="100"/> <circle cx="35" cy="33" fill="#1da1f3" r="56"/> <circle cx="07" …
Continue reading →
Recently, I've become obsessed with the speed and efficiency of my web sites. I'm in the middle of slimming down this blog - but I thought I'd take a first attempt at my contact site - https://edent.tel/ A few weeks ago, the .tel registry released their domain restrictions - users can now host their site anywhere. I'd already experimented with about.me/edent as a contact site - but even that seemed too weighty for my needs. Here's how I used CSS to craft a beautiful homepage, HTML5 to give…
Continue reading →
Recently, I wanted to embed an photograph of a book page. I thought it would be nifty if the text from the page could be selected. If you hover your mouse over this image, you should be able to select part of the text. Ideally, it will look something like this... It even works on Android (tried on Chrome, Opera, FireFox) and iOS 7. So, how did I do it? Originally, I was pointed to Project Naptha - it seems to do everything I want but is very JavaScript heavy and requires modern…
Continue reading →
