Yesterday we at Vísar tested the neat SVG image element hack on all the devices and browsers we had at hand to see how it performed and whether or not it was viable to use in production.

Given this markup:

<svg>
    <image xlink:href="http://example.com/the-image.svg" src="http://example.com/the-image.png" width="100" height="100" />
</svg>

Here’s a table of what each browser+device downloaded:

Note that the Kindle downloaded the PNG despite having pretty good SVG support. Tests carried out locally by watching the Django request logs.

At first, this looked perfect — browsers which supported SVG only downloaded the SVG (apart from IE 10), and other browsers just got the PNG. However, it seems that SVG image elements can’t be sized with percentages, meaning our flexible layouts were never going to work. I tried to fix it using the dreaded viewBox and user units (as I have previously to compensate for percentage-based units not being allowed in SVG paths), but that just led to everything being completely the wrong size.

So, (unless someone can show me how to fix this), whilst we think this is a great hack, it’s not going to work out for our product due to the weirdness of SVG sizing limitations.

I just faked having a task queue for #taproot #indieweb note posting tasks using Symfony HttpKernel::terminate() and it was the easiest thing ever.

Instances or subclasses of HttpKernel have a terminate($request, $response) method which, if called in the front controller after $response->send(); triggers a kernel.terminate event on the app’s event dispatcher. Listeners attached to this event carry out their work after the content has been sent to the client, making it the perfect place to put time-consuming things like POSSE and webmention sending.

Once you’ve created your new content and it’s ready to be sent to the client, create a new closure which carries out all the the time consuming stuff and attach it as a listener to your event dispatcher, like this:

$dispatcher->addListener('kernel.terminate', function() use ($note) {
    $note = sendPosse($note);
    sendWebmentions($note);
    $note->save();
}

Then, provided you’re calling $kernel->terminate($req, $res); in index.php, your callback will get executed after the response has been sent to the client.

If you’re not using HttpKernel and HttpFoundation, the exact same behaviour can of course be carried out in pure PHP — just let the client know you’ve finished sending content and execute code after that. Check out these resources to learn more about how to do this:

• FPM, specifically fastcgi_finish_request()
• flush()
• HttpFoundation\Request::send() as a sample implementation

Further ideas: if the time consuming tasks alter the content which will be shown in any way, set a header or something to let the client side know that async stuff is happening. It could then re-fetch the content after a few seconds and update it.

Sure, this isn’t as elegant as a message queue. But as I showed, it’s super easy and portable, requiring the addition of three or four lines of code.

MDN says FF has “implemented” the SVG text module, then goes on to list 13 presentation attributes which “don’t work”. How exactly does that count as implementing the module? Grr. This is why @supports is doomed.

Just in case anyone was wondering, the “HA HA HA SOUP” bookmark in those gifs is this bookmarklet:

javascript:var tw = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null);while (tw.nextNode()) tw.currentNode.appendData('HA HA HA SOUP');

document.createTreeWalker is actually pretty great.

git pull origin hamster

For the tenth time today.

Uh-oh, markdoesntunderstandanimals.com has gone offline. Time to crank up wget, pointed at markdua.tumblr.com #sitedeath

If you want to maintain a personal copy too, here’s the command:

wget -r http://markdua.tumblr.com -D 25.media.tumblr.com,markdua.tumblr.com -H -w 1

I need some musical help! What time signature is this clip in? It’s been rolling around in my head for the past three weeks but I can’t figure it out.

K:Amin
AB cd- dc _ed cd cB cd |fe de- ec2 AB cA _ed cd :|

The problem seems to be around the 19-20^th notes — that’s how I play it but it means there’s an extra quaver. Otherwise it could almost be alternating bars of 7/4 and 8/4. Any ideas?

var tw = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null);
while (tw.nextNode()) tw.currentNode.appendData('HA HA HA SOUP');

#html #js #code

Loving Django’s prefetch/select_related — that, along with a few small changes, reduced a task which was taking > 500,000 queries to 4558

I’m thinking the time might have come to write a wrapper around #php DOMDocument which actually makes it usable. Thoughts:

• automatic conversion of various encodings to HTML entities to scoot round encoding issues
• XPath queries still work but querySelector and querySelectorAll are implemented for both the document and individual elements via Symfony XPath → CSS converter and relative XPath queries
• A DOMNodeList which actually implements ArrayAccess instead of acting like a fake array
• Perhaps some javascript-inspired property names like innerText, innerHTML for consistency
• Maybe some jQuery-influenced shortcut goodness for doing things like removing/replacing elements

@benwerd loving your work on idno! Just had a look at the source, great that you’re using #microformats 2, I have some suggestions/corrections:

• .h-entry is better off where you’ve got .idno-entry so then the author .h-card can be scoped into the entry
• add .p-author to the .h-card for each .h-entry to explicitly declare authorship
• put .h-as-* on the same element as .h-entry .idno-entry
• put .u-url where you currently have .dt-published, move .dt-published to the time element

Thanks to Aaron Parecki you can see how a page is parsed here, or use my php-mf2 demo sandbox for experimentation by hand.

Hey @appdotnet @daltoncaldwell, what happened to rel=me on personal homepage links on app.net? /cc Aaron Parecki Erin Richie #indieweb #indieauth

#django tip: if you come across weird inconsistencies between apps when trying to serve static files in dev, run with runserver --insecure even if you have DEBUG=True

git grep is pretty amazingly fast — get line numbers too with -n or git config --add grep.lineNumbers true

#TIL that you can put a relative URL in <base> (via Tantek Çelik)

Testing websites on old windows mobile devices is an… experience.

Connecting to WiFi gave me the option of connecting to “The Internet” or “Work” (?).

On form submit using the software keyboard, I get a dialog warning me about the certificate, with the options “yes” and “no” but no question. Turns out the software keyboard was hiding “Do you want to proceed?”

Now I’m finally in the site, there’s no support for label, so those nice big touch targets I made are mostly useless. Also, there’s no text wrapping.

Turns out the #microformats 2 JSON structures enable safe entity expansion just like twitter entities.

In my reply contexts I am not wanting to embed 3rd party HTML in my site, so I take the p-summary and strip tags. But, I want embedded h-cards to be expanded just like at-mentions on twitter. Pseudocode:

let h-card = canonical JSON structure for a note, with .summary as a plaintext representation of the content;

for item in h-card.children:
 if not in_array('h-card', item.type) continue;
 let html = HTML representation of the child from properties.url, name, etc;
 replace item.value in h-card.summary with html

Example here.

Just hooked up my #indieweb notes to Brennan Novak’s rather awesome @emoome sentiment analysis API! So all my notes will have automated emotion/language analysis applied now, which I can query through machine tags.

At the moment I’m not publicly showing this data, but if you can read HTML it’s in the source (machine tags not shown by default) and if you can read JSON, add .json onto the end of the URL.