I have been working on the Jenn Louise product pages this week which originally used an image zoom script by Ben Watts called Enhance Gallery, as the site was originally based off the default radiance theme from Shopify. I like script but it does not support touch based events and it can be quite jumpy when used with a mouse. I went searching for an alternative and found a commercial plugin called Cloud Zoom that I really like, as it offers great touch support and has an excellent smoothing algorithm. When I first tried it out it unfortunately it didn’t initially support Twitter Bootstrap or responsive designs, both of which are used on the site. I emailed their support team and to their credit they fixed both issues within a day, however in the meantime I had a look at adding these features to the open source Enhance Gallery. It turned out to be quite easy and interesting.
I started with the smoothing algorithm found in this excellent solution on stackoverflow – where would I be without stackoverflow! With some minor modifications including adjusting the frame rate to 60 frames per second and correspondingly adjusting the smoothing factor it was looking promising. The basic algorithm is to find the difference between the desired and current location, then add the difference divided by a factor on each frame. It’s basically an exponential decay function, which gives a nice smooth effect that slows as it approaches the destination.
While I was at it I also added a border region so that to see the edge of the image the mouse or touch just has to be in the border region, not on the edge of the zoom box. I also noticed that there is an issue with an overflow issue if the mouse stayed in the same position for a while. The decay function would still keep working, never reaching the desired position, until eventually the floating point number would overflow. The addition of Math.round solves this.
The second item was to add support for touch events, such that an iPhone, iPad or Android device could zoom the window without having to invoke the hover handler by tapping the image first. It turns out to be quite simple, with the mouseenter and mouseleave events replaced with touchstart and touchend, and the mousemove replaced by touchmove. This article by Deven Olsen is a great start for working with the touchmove event, leaving only one other major change – the inverting of the movement. Touch devices behave differently to the mouse in that we expect the content under the finger to follow as it is dragged, requiring a minor change to the algorithm to both invert the input and to increase responsiveness by reducing the smoothing function.
My fork of the code is up on Github and you can see it in action here. A Shopify user of the radiance theme can simply copy over their enhance.jquery.js file to use. All of the additions are customisable by passing in a settings object on start up.
I have just added a minor feature that might be of some interest for Google Chrome users. HttpRules default rule set now includes a rule for adding the Do Not Track (DNT) header to all requests. This gives support for Do Not Track to Chrome, as well as browsers that already have built in support such as Firefox, Safari and Internet Explorer.
Inspired by the power of Fiddler, I wanted to create a user friendly interface and rules engine to monitor and filter requests made by my computer when browsing the web. Fiddler itself is a great tool, however it is definitely aimed at technical people. Luckily Eric Lawrence, author of Fiddler, offers the core engine as a separate library, ready for other developers to customise and extend as they see fit.
Last year I began work on a Windows based application for monitoring the requests that are made by a computer over HTTP and then apply a rules engine to modify those requests before being send to the server. It is also able to modify the responses before being passed on to the web browser. Based on FiddlerCore and WPF, the application sits in the system tray displaying information on the recent HTTP requests and any rules that have been applied. Rules can be enabled and disabled via the user interface and customised by the use of a simple XML file.
The application sets itself as the system proxy, so all browsers that are set to use the system proxy will start issuing requests via the application. A word of warning, if the process is forcefully closed it will not have an opportunity to clean up, this may result in all web connections being blocked, as the system proxy will not be set to an address that is listening for requests. A quick fix is to restart the application and close it cleanly via the menu.
- Block request – Each request can be blocked from being sent to the server.
- AdBlock Plus implementation – A cut down version of the AdBlock Plus for blocking advertising and tracking content. See below for more information.
- Https Everywhere implementation - Send requests over HTTPS instead of HTTP for popular sites.
- Python script – Run custom code for each request. This is provided to give extensible functionality.
- Modify header – Modify a header before it is sent to the server or returned to the browser, including removing it.
- Modify cookie – Similar to the modify header rule, with support for individual cookie values.
- Break action – Prevent any other rules from running for the request or response.
- Save file – Save request content to the disk if matching a pattern.
- Age filter – Implementation of my proposed header for restricting content that is inappropriate for minors.
AdBlock Plus rule
Included is a version of AdBlock Plus that can potentially give support to Internet Explorer, as well as other applications that issue HTTP requests via the system proxy. Since it does not run inside a browser only rules that are based on URL patterns are supported, all requests that work by hiding HTML elements will not run.
I’m not advocating the use of an ad blocker, as most websites are funded by advertising revenue, resulting in much of what we read on the internet being ‘free’. This was built mainly as a technical exercise for me to see any false positives that are preventing my pages from rendering properly when running the real AdBlock extension. It is extremely useful in that role, so I thought other web developers would benefit too.
I also built this as a way to write my own basic regular expression implementation, and as such it may not perform as well as a version based on the optimised Regex classes within the .NET framework. I was curious to see how hard it would be to write a simple regular expression parser and matcher, and the opportunity presented it quite nicely in the form of the AdBlock Plus rules engine.
The Firefox plugin, on which this is based, converts each rule to a regular expression, then runs it using the optimised engine within Firefox. I wanted to circumvent this step and see if I could directly parse and interpret each rule, as this would give me an insight into how a regular expression engine works. While I am very pleased with the results, it is still not up to the performance of the standard regular expression engine, and all the optimisations that have been added over the years. I may work on optimising my engine in the future, but only if time permits.
To put it bluntly, this will not speed up your system, quite the opposite in fact. On my Core i5 system the overhead is not great, however my Core 2 Duo laptop has a noticeable delay before requests are sent. Generally, the large sets of URL patterns by the AdBlock Plus rule are the culprit, so if performance is an issue try disabling that first. Additionally the Https Everywhere rule will cause a significant slowdown on sites that are forced to use HTTPS, due to the additional overhead of using a secure connection.
I have just added the application to GitHub as an open source project. You can download the installer here.
I had a little spare time a few weekends ago, and had an idea to write a recommendation engine for finding names that are related to each other. I got off to a great start with a fantastic data source, the list of 170 million facebook users provided by a security researcher.
Starting with this, I wrote an engine that finds related names, using common surnames as a base. Each name is calculated to find all the related names, then ranks them using 4 separate methods. The main problem that I faced what that the most popular names are the most related names for everyone – most people seem to have a Michael in their family. Each ranking method tries to find the names that are more common in the related name set compared to the global list of names, which are hence the most related.
I found that the results were initially a little bit inconsistent, for example the name Brad would be related to Brett, however the inverse wasn’t true. So counter this, I added a reverse lookup table and factored that into the ranking alorithm, which helped clean up the data and remove the odd combinations. This ensures that both names need to be related to each other, and removes names that are only related in one direction.
The results were better than I had hoped for, with over 25,000 of the most common names being computed and stored. I can see there are clear trends amongst regions, religions, similar sounding names, and even real world items, such as colours, fruits and emotions. I hope someone finds this useful, especially for trying to find odd or obscure baby names.
I recently upgraded my main PC, and as part of that I also had to transfer my music, photos and documents from the old machine to the new one. I used the trick here to rebuild my iTunes library on the new machine, as this allowed me to keep my ratings and playlists. This went off without a hitch. Great.
Then I plugged my iPhone in. Bad idea.
Without any warnings or confirmations it started to sync, which seemed fine as I now had a complete library of music, so I let it be. All my personal data, such as contacts and emails, lives in the cloud or on servers I have access to. Once the sync was finished I was shown a message that informed me that some of my apps were not authorised on the new machine. I fired up the iPhone, and to my dismay most of my apps had been deleted, with only a few exceptions.
The problem was that I had not yet signed into iTunes and authorised the new PC, which is quite an easy mistake to make. A warning before wiping everything would have been nice, thanks Apple. I had a look on the interwebs for a while, however this did not yield any great solutions for getting my precious apps back. The best solution was to manually go through my purchase history and re-purchase all the apps. Let me assure you this is boring, so I gave up after re-purchasing about 5 apps.
In the meantime, I decided to clean out my music folder. It was then I struck the goldmine of my old apps. iTunes saves all the downloaded apps in a directory with the extension .ipa. In my case this directory was D:\Users\Brad\Music\iTunes\Mobile Applications. For most people it will be in your My Music folder, then iTunes\Mobile Applications.
Simply click each .ipl and the app will be added back to iTunes. One sync and you should be golden.