1. I get a little annoyed at every now and again (grr package management) but then I come across things like nested tuple unpacking which are just so lovely they make up for it:

    for i, (key, value) in enumerate(list_of_tuples):
        print i, key, value
  2. My take on generic prev/next controls on keyup, using only bean for events, based on previous work by Aaron Parecki and Tantek Çelik:

    // Generic prev/next navigation on arrow key press
    bean.on(document.body, 'keyup', function (e) {
      var prevEl, nextEl;
      if (document.activeElement !== document.body) return;
      if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return;
      if (e.keyCode === 37) {
        prevEl = document.querySelector('[rel~=previous]');
        if (prevEl) bean.fire(prevEl, 'click');
      } else if (e.keyCode === 39) {
        nextEl = document.querySelector('[rel~=next]');
        if (nextEl) bean.fire(nextEl, 'click');
  3. 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:

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

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

    Browser Format Requested
    Mob. Safari iOS 4.2.1 PNG
    Mob. Safari iOS 6.1.3 SVG
    Chrome 28 Mac SVG
    Safari 5.1.9 Mac SVG
    Safari 6.0.5 Mac SVG
    Firefox 26 Mac SVG
    Firefox 22 Mac SVG
    IE 8.0.6 PNG
    IE 10 SVG+PNG
    Kindle (3rd gen) PNG

    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.

  4. I just faked having a task queue for 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);

    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:

    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.

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

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

    The problem seems to be around the 19-20th 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?

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

  7. I’m thinking the time might have come to write a wrapper around 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
  8. Ben Werdmuller: @barnabywalters Btw, I don't actually see datetime format guidelines in the mf2 spec. Hoping moving to the time attribute helps. 8m

    @benwerd explained here and here — essentially <time class="dt-*" datetime="yyyy-mm-ddThh:mm:ss±hhmm">human representation</time> is the preferred format.

    Sorry about the messy state of the mf2 docs at the moment, we’re working on it!

  9. @benwerd loving your work on idno! Just had a look at the source, great that you’re using 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.

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

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

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

  13. Turns out the 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.