“Extensions, apps and user scripts can only be added from the Chrome Web Store”

Fortunately the resolution is quite straight-forward. First download the script you want to a local directory/folder, then go to chrome://chrome/extensions/ and drag the user.js script there instead. This feature is designed to protect users from malicious installs and as long as you know the workaround to install user.js scripts it’s not too much of a big deal.

Ctrl+v tab

That is Ctrl and “V” and hit the tab key, et voila you’ve entered an actual tab.

Err http://archive.ubuntu.com/ubuntu/ precise-updates/main devscripts i386 2.11.6ubuntu1.2
  404  Not Found [IP: 91.189.92.188 80]
Err http://archive.ubuntu.com/ubuntu/ precise-updates/main openssl i386 1.0.1-4ubuntu5.2
  404  Not Found [IP: 91.189.92.188 80]

The cause is the pbuilder image being out of date and some dep packages are no longer present becuase they’ve been superceded by more recent versions. The good news is the fix is really simple just run:

pbuilder-<dist> update

Which will update your pbuilder image and from there the dependency installation should work just fine.

# Open new window in current dir.
bind c stuff "screen -X chdir \$PWD;screen^M"
bind ^c stuff "screen -X chdir \$PWD;screen^M"

Hat tip: mteckert on SuperUser.com

Anyhow, prior to installing CM 7.1 I’d carefully made a nandroid backup with ClockWorkMod recovery. Having set everything up I chose a ringtone + notification sound. Having lived with it for a bit I realised I miss the old sounds from the stock desire rom. To recover them I needed to mount extract the system.img file and then push the old audio files to the correct place.

Warning: Please follow these steps at your own risk!

Compiling unyaffs

To extract .img files you’ll need unyaffs which can extract the files from a yaffs file system image. First copy the .img file into a directory. (For me the Nandroid img files were found in clockworkmod/backup/<date>/<foo>.img on the sdcard)

To compile unyaffs grab the unyaff.c and unyaffs.h from http://code.google.com/p/unyaffs/downloads/list and compile it with:

gcc -o unyaffs unyaffs.c

Once you’ve done that and added it to your path (alternatively copy it to /usr/local/bin).

Navigate to the directory containing the yaff img and run:

./unyaffs system.img

This will un-pack the files into that directory.

Getting Files onto a Rooted Phone

Once you have the files the next step is to get them onto your phone. To do that you’ll need the Android SDK to be installed and set-up.

When the SDK is there, connect your phone with the USB cable (with USB debugging enabled – Settings->Application->Development) run the following from the sdk’s platform-tools directory.

./adb reboot recovery

When the phone reboots to recovery mount the system partition.

Next as an example here’s the command I ran to copy the ringtones from the desire rom onto the phone:

./adb remount
./adb push /home/bungle/desire-system/media/audio/ringtones /system/media/audio/ringtones

This will copy all the files in the ringtones dir onto the phone.

With the latest versions of Spotify on Linux (e.g: 0.6.1.309.gb871a7d0, 0.6.2.291.gcccc1f58) the DBus interface has changed a little which has resulted in the need to make some changes so that the playing status is tracked correctly.

The code can be found here on github as a Gist or the raw file.

Web Components and Model Driven Views – Alex Russell

Alex Russell’s presentation was a really interesting look at the state of modern browsers along with the deatails on some really shiny but potentially controversial new features that are currently being worked on in webkit.

First was a look at how the speed of new browser versions being released affects the progress of the web. With slides based on the browser adoption graphs in this ars technica article, it’s clear that Internet Explorer users tend to be much slower to upgrade their browsers. Especially with Firefox’s new release schedule both Chrome and Firefox are seeing much faster uptake of new versions. Faster releases means browsers are beginning to evolve more quickly resulting in a faster rate of progress. All of which can only be good for the web.

Moving beyond this Alex took a look at aspect of web components. First up was scoped CSS, the idea here being that you can “scope” CSS to a specific element. In this way that CSS will only apply to the children of that element.

Next was a look at Web Components. The first part of this is API that allows you to extend the DOM and create your own custom elements. The example given was the creation of a Comment object. Next a feature called DOM Shadow allows you to “hide” or make private the subtree that your custom object is created from so that it’s invisible to anything else. Interestingly, this is already something used in the development of video controls in webkit. This allows you to make something with divs and spans but hide the implementation details from the world. Depending on your point of view this is either fantastic news or will leave you feeling a little bit icky.

Lastly was a look at templating and model driven views which really do look good. It allows a template to be bound to data in such a way that when the data changes the template is updated. Definitely looks to be useful.

To see the full set of slides head over to http://infrequently.org/11/fronteers/fronteers.html

The New Developer Workflow – Divya Manian

This presentation was a walkthrough of steps that make-up the work flow of a modern web developer from using Version Control to deciding what browser features to use and when to use polyfills or not, vendor prefixes, CSS preprocessors and build scripts.

I enjoyed the walk-through of the features and capabilities of Compass (a CSS preprocessor). From a personal stand-point I’ve ever used SASS or LESS but seeing some of the features that Divya talked about I can see some worthwhile use-cases (time to try it out on a personal project maybe ).

The New Developer Workflow Slides

HTML5 Forms – KISS time – Robert Nyman

Robert’s presentation was an honest look at the features of HTML5 forms and provided really good practical information on where the issues are and where as a developer you need to be careful.

Of particular interest was a number of caveats around using form validation features. For example: Required attribute will pass if you just submit a space. Email validation can’t cope with international characters e.g: röbert@kissonline.com won’t work. Pattern attributes can be submitted if they are empty (This is counter-intuitive though a commenter at the end of the session pointed out it makes sense that you would to use the required attr as well).

Overall the key takeaway here was the new HTML5 form features are cool, but like everything else they need to be used with care.

CreativeJS – beauty in the browser – Seb Lee-Delisle

This was perhaps the most surprising presentation of the event. Seb has a fantastic speaking style, very down to earth and good humoured. His presentation was in two parts, first was looking at how to create beautiful particle effects using JavaScript. Seb showed some very simple code which produced fantastic results. The approach was to create effects such as smoke and roman-candle like firework effects by approximating the physics and making it look just about right rather than spending a lot longer nailing an effect based on a 100% accurate physics model.

To play with all of this the files are on github. https://github.com/sebleedelisle/JavaScript-PixelPounding-demos

The next part was Seb’s software which turned the audiences mobiles into a giant display. This was mind-blowingly creative and a fascinating demonstration. The problems involved in this are pretty big, first was that of synchronising the signals sent to the phones so they would display in sync. This was done by measuring the delay from sending data to each phone. The next, even bigger problem was that of identifying where in the audience a given phone was. My understanding is that the software sends a pattern to each phone which it then looks for in the camera pointing at the audience. Having identified the location the audiences phones could then be used like a big display. Very cool stuff indeed!

jQuery and the Open Source Process – John Resig

John Resig talked in detail about how JQuery became popular through being very responsive to users in the early days and through building and fostering a community by being open and transparent.

In your @font-face – Jake Archibald

Jake’s talk was very good – highly entertaining and also packed with interesting details about the potential issues and pitfalls in using web-fonts today.

There’s a number of problems to solve from how browsers treat @font-face, how to reduce the weight of fonts to download by reducing the glyphs used, to the way in which browser actually download the fonts to use them. All in all it’s a royal mess. Lastly Jake looked at how the way browser download fonts affects the final rendering.

Bottom line was that it really shouldn’t be this hard.

Jakes slides can be found at http://speakerdeck.com/u/jaffathecake/p/in-your-font-face

The Prestige of being a web developer – Christian Heilmann

Christian’s closing presentation was built around a theme of the film “the Prestige“. Christian made lots of good points about how we can be better developers by being inventive, learning from others, contributing to projects through documentation or submitting bugs and being open about what we do.

Slides and audio with a transcript are available on Christian’s blog

And that was it.

A big thank-you to the speakers and organisers for putting on an excellent conference.

Here’s an overview of Day One.

The Future is Native – Aral Balkan

Aral Balkan presented the opening keynote with a presentation looking at where web experiences sit in relation to experiences provided by native applications. In a nutshell this presentation was about inspiring developers to embrace Use Experience (UX), to focus on the user’s needs rather than focus on technical considerations at the beginning.

Aral advocated a notion of “Write once, optimise everywhere”, starting with progressive enhancement as a basis, then optimising for features, and then to optimise for specific devices. I personally feel this is good ideal to aim for, however my immediate thought was that it’s important to be pragmatic and choose the battles to fight in terms of what devices you optimise for.

Towards the end of Aral’s presentation he looked at how UX is difficult; as you move away from face to face communication towards using a device you’re losing visual and audible cues. This means getting things right can be difficult but the right UX provides the “Superman effect” which in other words is to make the user feel empowered and feel good about their interactions with an application.

Accessibility for the Modern Web – Derek Featherstone

Derek Featherstone, gave a great talk on what considerations there are around building web applications that take into account accessibility. Firstly he looked at work he’d done in the past that had been criticised as being a collection of hacks. These were scripts that added accessibility features to existing applications, for example: keyboard accessible you tube controls, and adding keyboard accessible controls to google maps. Derek went on to explain that the need for such “hacks” is because of decisions someone else made.

Following on from these inital examples Derek walked through a number of real-world examples where odd markup decisions had been made to provide (in come cases) a certain look and feel rather than using the best-fit native elements. For example Amazon use a convoluted customized checkbox widget rather than use a checkbox. Another example was Gmail’s compose links being a span with an onclick rather than a link.

Looking at examples of real-world problems the key points made were around choosing the right control for the job. Buttons for actions link to take the user somewhere. If you’re needing to use tabindex=0 to make something focusable then this a good point to reconsidering if you’re using the right control.

Another issue considered was management of focus. If a link opens a dialogue then once the user has closed the dialogue the focus should go back to the link that opened the dialogue. For a keyboard user focus is crucial and if you send focus to the top of the page constantly then you’re providing a very poor user experience.

Derek also provided some examples of use of tabindex had resulted in “keyboard trap”, in this case it was a form that had focus controlled in such a way that you couldn’t get to to certain fields through the use of tabbing to move through the fields.

Looking at keyboard interactivity Derek pointed out the caveats of using role=button on links. As assistive technology that support aria roles announces a link with role=button as a button the user will expect to be able to use the spacebar to activate it. However unless the site author has added keyboard handling to allow for this spacebar will do nothing. This is something that’s all too easy to do and whilst trying to be well-meaning the addition of such a role has impaired accessibility.

Derek’s presentation provided lots of great examples and practical advice and it’s definitely made me want to dive in to everything that we’re building an re-evaluate what improvements we can make to provide a better experience for all our users. In addition I feel it’s important to get a good sense for what a baseline experience should be so that it becomes a given that we build accessibility into sites rather than facing the prospect of retro-fitting it afterwards, as that’s always going to be more expensive in terms of time and effort.

CSS3 Secrets: Ten things you might not know about CSS3 – Lea Verou

Lea provided a great showcase of cool tips and tricks you can achieve with CSS3. Lots of interesting and cool stuff here. I particularly like the gradient tricks for faux-columns and the background-origin tips. Interestingly this highlights something I love about working with CSS in that creative approaches to problems can yield really good results. One of the best examples of this was the use of nth-child selectors to provide layout control based on the number of elements.

You too can be a bedwetting antf**ker: Bruce Lawson

Bruce’s Presentation highly entertaining presentation walked us through the new elements in HTML5, noting problems that currently existing in the specifications. This was a good overview of what’s new in HTML5 and where new elements provide more options for describing your content with more appropriate semantics.

Go with the flow: Stephen Hay

Stephen gave a talk on the exciting features of CSS Regions. CSS regions are just appearing on the horizon in terms of current browser support, but that doesn’t diminish what interest creative possibilities they open up. I’d definitely recommend checking out the deck.

The future of CSS—Current Experiments and Near Future Reality – Tab Atkins Jr

In this presentation Tab Atkins Jr (who works for google as a CSS specification writer) outlined a lot of cool features that are coming into CSS specifications and in some cases these are things that are starting to be implemented albeit experimentally in most cases.

Image function

background: image("foo.webp", "foo.svg", "foo.png", blue);
background: image(rgba(0,0,255,.2)), url(foo.jpg);

This allows fall-backs in the first example the first item that loads is used.
The second example allows a transparent colour to be overlaid an image.

Flexbox

I particularly liked the flexbox example which demonstrated an input and button with the flex() used for the width so that it takes up the remaining space up to the button.

<div style="display: flexbox;">
	<input style="width: flex(); display: block;">
	<button>foo</button>
</div>

Calc

The calc() function (I can see this coming in very handy):

calc(50% + 20px)
calc(100% / 7)

attr() lets you pull values from attributes on the element.

width: attr(data-size as px, 100px);

CSS vars!!!

@var $header-color #006;
@var $main-color #06c;
@var $secondary-color #c06;
a { color: $main-color; }
a:visited { color: $secondary-color; }
h1 { 
  color: $header-color;
  background: linear-gradient(left,$main-color, transparent 25%);
}

Tab noted that a lot of innovation was happening in the CSS preprocessor space and this was being recognised and informing some of the newer specs.

To see the full range of examples Tab’s Slides can be seen here: http://www.xanthir.com/talks/2011-10-06/

Passion. Purpose. Promise. Pursuit – Leslie Jensen-Inman

The final presentation of day one was a call to action to embrace the things we are passionate about, define our purpose, make commitments to ourselves and others (promise) and to pursue these goals to make greats things and do good.

This was a sound message, and it’s easy to see how it can apply to being a web developer. Also something that we don’t often do is step back and evaluate ourselves and look at where we are heading and rationalise our interests with what we want to achieve.

Passion. Purpose. Promise. Pursuit. slide deck on Speaker Deck

For Day two see: Fronteers Conference Day 2

sudo apt-get install python-software-properties

I’ve recently updated the spotify notifier example I’d previously posted as an example along with my spotify screensaver script. First, I made an update to have it listen to the PropertiesChanged signal. Annoyingly for some unknown reason this signal isn’t visible in D-feet which had led to the erroneous assumption it wasn’t implemented.

Implementing Album Art

After getting it working again, I started to think about how it would be nice to add album art. So I rigged up the script to the last.fm API to grab album art. I’d have preferred to pull the album art from spotify or via open.spotify.com, but annoyingly there doesn’t seem to be a way to get the album art url without scraping, which just seemed too much of a kludge. If anyone knows how to get album art from the spotify cache (assuming it’s there) then I’d be interested to hear about it.

Listening for Spotify announcing itself on D-Bus

Once I had that done, I then thought about how this script would run. Ideally it needs to run before spotify is necessarily open. This causes a problem though because if you try and listen for D-Bus events when the app in question isn’t running you’ll get an error.

So I used the NameOwnerChanged signal and listened for Spotify joining D-Bus and leaving it again. This then provided all that was needed to turn on or off the listener for the PropertiesChanged signal that fires when the track changes.

Also I added a check to try and set-up the PropertiesChanged listener at start-up in-case spotify is already running when the script is launched.

The code

#!/usr/bin/env python
# -*- coding: utf-8 -*-

"""
Title: Spotify Notification Demo
Author: Stuart Colville, http://muffinresearch.co.uk
License: BSD

"""

import os
import dbus
import gobject
import pynotify
import httplib2
from urllib import quote
from cgi import escape
from xml.dom.minidom import parseString
from hashlib import md5
from dbus.mainloop.glib import DBusGMainLoop
from dbus.exceptions import DBusException

LASTFM_API_KEY = os.environ.get("LASTFM_API_KEY")
HTTP_CACHE_DIR = os.path.expanduser("~/.cache/spotify/http/")
IMAGE_CACHE_DIR = os.path.expanduser("~/.cache/spotify/art/")
BASE_URL = ("https://ws.audioscrobbler.com/2.0/?method=album."
            "getinfo&api_key=%s&artist=%%s&album=%%s" % LASTFM_API_KEY)

MISSING = os.path.realpath(os.path.join(os.path.dirname(__file__), "missing.png"))

if not os.path.isdir(HTTP_CACHE_DIR):
    os.makedirs(HTTP_CACHE_DIR)
if not os.path.isdir(IMAGE_CACHE_DIR):
    os.makedirs(IMAGE_CACHE_DIR)


class SpotifyNotifier(object):

    def __init__(self):
        """initialise."""
        bus_loop = DBusGMainLoop(set_as_default=True)
        self.bus = dbus.SessionBus(mainloop=bus_loop)
        loop = gobject.MainLoop()
        self.http = httplib2.Http(HTTP_CACHE_DIR)
        self.notify_id = None
        try: 
            self.props_changed_listener()
        except DBusException, e:
            if not ("org.mpris.MediaPlayer2.spotify "
                    "was not provided") in e.get_dbus_message():
                raise
        self.session_bus = self.bus.get_object("org.freedesktop.DBus", 
                                 "/org/freedesktop/DBus")
        self.session_bus.connect_to_signal("NameOwnerChanged", 
                                        self.handle_name_owner_changed,
                                        arg0="org.mpris.MediaPlayer2.spotify")

        loop.run()

    def props_changed_listener(self):
        """Hook up callback to PropertiesChanged event."""
        self.spotify = self.bus.get_object("org.mpris.MediaPlayer2.spotify", 
                                           "/org/mpris/MediaPlayer2")
        self.spotify.connect_to_signal("PropertiesChanged", 
                                        self.handle_properties_changed)

    def handle_name_owner_changed(self, name, older_owner, new_owner):
        """Introspect the NameOwnerChanged signal to work out if spotify has started."""
        if name == "org.mpris.MediaPlayer2.spotify":
            if new_owner:
                # spotify has been launched - hook it up.
                self.props_changed_listener()
            else:
                self.spotify = None


    def handle_properties_changed(self, interface, changed_props, invalidated_props):
        """Handle track changes."""
        metadata = changed_props.get("Metadata", {})
        if metadata:
            if pynotify.init("Spotify Notifier Demo"):

                title = unicode(metadata.get("xesam:title").encode("latin1"))
                album = unicode(metadata.get("xesam:album").encode("latin1"))
                artist = unicode(metadata.get("xesam:artist").encode("latin1"))
                hash_ = md5()
                hash_.update("%s-%s" % (artist, album))
                hash_path = hash_.hexdigest()
                image_path = os.path.join(IMAGE_CACHE_DIR, hash_path)
                if not os.path.exists(image_path):
                    url = BASE_URL % (escape(quote(artist.encode("utf8"))),
                                       escape(quote(album.encode("utf8"))))
                    response, content = self.http.request(url, "GET")
                    dom = parseString(content)
                    images = dom.getElementsByTagName("image")
                    for image in images:
                        for attr, value in image.attributes.items():
                            if attr == "size" and value == "medium":
                                image_url = None
                                if image and image.firstChild:
                                    image_url = image.firstChild.nodeValue
                                if image_url:
                                    response, image_contents = \
                                                self.http.request(image_url)
                                    if image_contents:
                                        fh = open(image_path, "w")
                                        fh.write(image_contents)
                                        fh.close()            

                if not os.path.exists(image_path):
                    image_path = MISSING

                alert = pynotify.Notification(title,
                              "by %s from %s" % (artist, album), image_path)
                if self.notify_id:
                    alert.props.id = self.notify_id
                alert.set_urgency (pynotify.URGENCY_NORMAL)
                alert.show()
                self.notify_id = alert.props.id

if __name__ == "__main__":
    SpotifyNotifier()

Pre-requisites

• Spotify for Linux
• A Spotify unlimited or premium account
• Install httplib2: sudo apt-get install python-httplib2 (I think that’s the only dep that isn’t installed by default)
• Set-up the script as outlined below.

Getting the code

The code is available in a bzr branch here: code.projectfondue.com

To run it check it out and follow the notes in the README file. No doubt there might be some bugs so feel free to let me know of any possible improvements that can be made to it.