Basic image resizing with nginx

So I came across an nginx module (ngx_http_image_filter_module) that would allow you to resize, crop and compress images before sending them back to the user. This allowing you to create a simple image parsing server. After some reading I wanted to have a play around with this to see what it could do, and if it was something I could use, or something we could use a work.

A couple of requirements I had before I started was I want it to be able to do the following:

  1. Handle resize of images based on the user agent without having to change URL’s on the fly or with JavaScript. eg. – Should return different sized images based on the user agent. (360px wide for iPhone, and 460px wide for Android)
  2. Handle general resizing based on a URL string eg.×400/test.jpg

Not many requirements to start with, but over time I’ll adjust these and play more with nginx but this is enough to play around with and see what’s possible with it.

I got started by spinning up a 512Mb Droplet from Digital Ocean, and installed nginx using yum (you can see a tutorial on Digital Ocean if you need to), then I spent the rest of the time tweaking the conf file (/etc/nginx/conf.d/default.conf). See below for example of what I’ve added to the default.conf file.

Here’s the part of my nginx config that’s doing all the magic:

  location ~ /resize/([\d-]+)x([\d-]+)/(.*) {
     proxy_pass                  http://$server_addr/images/$3;
     image_filter                resize $1 $2;
     image_filter_jpeg_quality   80;
     image_filter_buffer         10M;

  location ~ /(.*) {
     try_files                   /$1 @img;

  location @img {
     if ( $http_user_agent ~ iPhone ) {
        proxy_pass              http://$server_addr/resize/360x-$uri;

     if ( $http_user_agent ~ Android ) {
        proxy_pass              http://$server_addr/resize/460x-$uri;

     proxy_pass http://$server_addr/images$uri;

So, that’s the technically part and some waffle from me. Here’s the demo: Image Demo Page. as you’ll see if you visit the page you’ll not notice anything different, try visiting it on your iPhone, or Android device and look at the image quality. The other way to do it, is if you use Chrome, you can spoof your user agent (I’ve wrote about that before). Also you can see the following URL’s and their outputs:

  • – Will request the test.jpg image, and return it as is. But if you are on an iPhone you will get a image resized to the max width of 360px, or if you are on an Android device it will return the image at 460px wide
  •×400/test.jpg – Will return the image scaled to 523px wide and the height will be proportionally to the width. Try changing the 523 value and see what happens!

So, I have just touched the basics here, and I am looking into more advanced things that it can do and see how far I can take it and if it’s a viable solution for a production environment.

Review: Amazon Kindle – Sleeve

Kindle Sleeve with Kindle inside

After getting myself a Kindle Paperwhite, I was in the market for a nice case to protect it. With things like cases I have a odd taste and I am very picky in what I want.

Kindle Sleeve closedI began my search straight after getting the Kindle and it took a good while for me to finally hit the purchase button on a case I would want. An issue here is that buying online takes me longer as I can not tell 100% if it is what I want, I would much prefer going into a physical store to by something like this. (I’ll leave those details are for another day)

So after finally hitting the purchase button for this case I was still not 100% if it was going to be right or any good. Once I had took delivery of it, I was quite surprised by the quality of the product. I also got a little shock as I thought I was buying just a plain sleeve, but it turned out the strap that goes over it goes in at the back and loops round inside the sleeve. This is used to Kindle Sleeve showing inside strappull the kindle out, rather than having to stretch the sleeve to reach in to get your kindle out. I was a little sceptically at this, as I was after a plain bog standard sleeve. But after some use of the sleeve in a variety of different situations I am very impressed by this little feature, while I say it’s a little feature, its a huge part of the sleeve. I can see how this will help prolong the lift of the sleeve, as I’ll not need to stretch it open to reach for the kindle, a gentle pull up on the tab and it slides up with no resistance at all.


Hatching Twitter

Hatching Twitter Book CoverHatching Twitter: Nick Bilton – I would call myself a bit of a Twitter addict/nerd. I love the service, and the power of it, not everyone understands the system and to me it’s still finding it’s feet in a very tech heavy world, but it’s starting to break through and show what it’s capable of. Having a soft spot for the service made this a great book for me to read, and it did not disappoint.

This books is not about Twitter as a product, but more on how Twitter was born and the struggles along the way of the four co-founders (Noah Glass, Jack Dorsey, Biz Stone, Ev Williams). The books is a focus on these four co-founders and goes into details of each of their part of the creation/ upbringing of Twitter as a tech start up and into a public company. The author Nick Bilton has had a great deal of access to the current and former Twitter staff, investors, and board, in order to put together such detail.

While this books reveals a lot of details you will never of heard about the early stages of Twitter, and the people involved, it may be enough for some readers to make judgement on the four co-founders, but to me it’s still missing a bit of information to make those judgements. As people say, business is very cruel, and this is a great insight in how a business conceived betweens friends can turn into a nightmare and each person thinking they are being treated unfairly. This may put some people of trying to create a business between friends.

On top of the backgrounds and the struggles between the four co-founders the books also gives you a glimpse into the world of the tech start up world (The whole “Silicon Valley” bubble), it has some very interesting parts to it, while this may not be how all start-ups are in there early stages, it could put a lot of people off trying to do a start up. While it may put some people off, it may also just cement the details of what goes on in a tech start-up in their early stages. While this is not the main focus on the book, I found it very interesting and wondered about what it was like for other tech companies that are a huge success now in their early stages. (We obviously know about Facebook form the movie “The Social Network”, but I would quite like to read more about this sort of stuff).

The Climb: The Autobiography

The Climb: The Autobiography

The Climb: The Autobiography by Chris Froome the 2013 Winner of the Tour de France gives a great insight to his back story and how he was not an over night success at winning the Tour de France. Being an avid cycling fan and having been very involved with the sport at young age, I still follow along with great interest. Some people, even myself may have wondered where did this Chris Froome come from? and how did he win podium at the Vuelta, then go on to win the 100th edition of the most famous bike race int he world!

This book gives a great and deep insight into this. Not having the most conventional upbringing that you would expect of a British person. The highs and lows of Chris being brought up in Kenya, and eventually making the switch to become a British rider and give up his roots of Kenya to be able to get the highest possible level in cycling is told in great depth, and gives insight into the struggles of what non european athletes have to contend with.

Another great insight this books gives you is the hard work that Chris has put in to get where he is, some people may think that Chris all of sudden came from nowhere to finish second in the Vuelta, then to stand on podium twice at the Tour de France, with one of being the top stop.

I recommend reading this book if you are anyway interested in cycling, or if you are unsure of the cycling scene post “Armstrong” era.

Amazon Kindle Paperwhite

I finally got a kindle e-reader. I decide to go for the Amazon Kindle Paperwhite, I have had my eye on the paperwhite since the adverts for them appeared on the television before Christmas last year (2013) and I had made a few passing comments while my wife was around that I think I would quite like of them. But me being me, I like to take my time over working out if I wish to actually purchase a gadget of such a price (it can take me weeks to decided on purchasing something, after all the researching, looking around, going to stores to try them, etc). After much thinking about the paperwhite I had made my mind up that while they are a great gadget, it was not for me. A couple of reasons for this is:

  1. I have an ever growing collection of paper books that never get read, so would the kindle change this?
  2. I am not a huge reader and it can take me month to finish a book, so it seems pointless to waste that sort of money on the kindle
  3. Do I actually need one?

With those points in mind, I had made my mind up that I did not need one. I tried reacting my words to avoid my wife purchasing one for Christmas, but I had left it a bit late to avoid that. Turns out my wife had already purchased me one for Christmas. After some discussion it was decided that she would return it. Fast forward 8 months, and like I said at the start, I have now got myself a kindle e-reader, and it’s probably the best tech gadget buy for a long time. I’ve always had a thing with books, I really enjoy reading one, but for some reason I really struggle to finish them.

There a couple of things I struggle with when using the kindle, and hopefully I’ll grow out of them over. As it’s a very similar feeling to holding a tablet I find myself trying to do touch screen gestures on it, like scrolling the page to read, and swiping my finger to move page. I sometimes think it may be a better experience if these gestures where implemented, but with it trying to replace a book I am not sure it’s right for the device/ experience.

I would strongly recommend the Kindle Paperwhite to anyone who has their doubts about it. I know it has tons of features, that I’ve not even explored, but the reading experience is second to none, and it’s got me back into reading.

URLrewrite with OpenBD

I love a good clean URL, and recently I decided that I wanted to clean up the way I was handling URLs in my web apps. while this is easily achieved using say nginx or apache, or which ever server you are using. I had a unique requirement that I wanted to be able to handle the rewrites locally without having to have to install nginx or something on top of what I was already using. Also I did not want to have a separate server config to maintain. I was after a way I could have the settings checked in with the web application code so it would work on the server and locally.

Locally I am developing using jettydesktop launcher, and I deploy to a server that’s running jetty, while I could have jetty handle it, it would mean loosing the ability to test locally easily by having the settings within the web app.

After some research and looking around I came across UrlRewriteFilter this is a jar file that can be dropped into the lib directory, a small update to the web.xml file to ensure its loaded. Then you have a configuration file where you can set up all your URL rewrites. The details are shown on the UrlRewriteFilter website, and it’s was a relativity painless to get up and running. But I did run into a small issue. After using the base config and it was all working with that correctly, I applied the changes I wanted for it to work for my web app, and I was getting lots of java string overflow errors. Some Googl’ing around lead me no further, so it became process of elimination to get it working.

The default config for the web.xml is


But for me to remove the error’s I was seeing I had to remove the <dispatcher> lines to give me the following config:


After restarting jetty all was good. Few  more test’s and then I released it to my web server, and all seems to be working.

This jar file is now part of my base web app structure that I use for all new web apps, and I’ll be updating my other apps soon.

Twitter Cards for

I’ve had this little idea in my head for a while now, on how I could use Twitter Cards to display the content I am sharing from in a much more rich way on twitter, but without taking the user away from the original website.

The idea is that I want to share a link to an article, blog post, review, or what ever I happen to find interesting from the RSS reader application I have written (still in private beta), but I don’t want to handle the traffic or take user’s away from the real website where the information is. I always want to push the traffic to the original source. Which is fine, but when twitter released their twitter cards for tweets, I was interesting if there was a way I could use them with sharing from but without handling the traffic like I mentioned before. Plus another reason for this is so I have a reason to look at the twitter analytic’s.

So tonight I set about implementing it, and to my surprise it was relative easy once I had work out what twitter was doing to get the card information.

As you can see from my tweet below when I share something from it will have a summary card in the expanded display and drive traffic directly to the original website.

For the time being I am only using the summary card, but over time I will look into a way of using the other twitter cards depending on the type of content being shared, guess I can put that doing on the feature list for launch.


Google Chrome (Canary) Emulation


I am a massive Google Chrome users, so much so that I have two versions installed on my work machine. I have the stable Google Chrome that everyone should be using, and I also used Chrome Canary, which is the bleeding edge of the web, or so they say.

By default I do all my development in Canary, this is to keep my history, Cookies, and everything else separate from my main browser, which is right stable Chrome.

If like me you deal with responsive (device aware) web sites/applications you will be aware of the challenges of testing and viewing your sites in all the different browsers and devices, while you can never beat looking at your creations on these real devices, I for one love speed and the ability to do it all from my desktop while in the depths of development and prototyping. This is where Chrome Canary comes in, I know I have wrote about this sort of thing before (Mobile device detection in Google Chrome), it turns out the Chrome team have updated this device emulation parts of Chrome Dev tools, there is a new Mobile icon next to the magnifying glass when you have Dev tools open, click on this icon and you will be greeted with the new Emulation features that contain a whole bunch of cool things like:

  • Better UI for seeing the breakpoints and size screen
  • Added more predefined Devices
  • Bar graph at top for quickly jumping between media queries
  • Ability to set your Network Speed (throttling)

The best thing of the new UI and layout and features that I have found useful so far is the Network drop down to be able to see how you site performs on different network speeds, again while it’s not as good as testing it for real on a device, it certainly helps with development and being able to see the Network tab and the timeline when looking at how your site is performing over different internet speeds.

The onDemand generation

When I was growing up we only have 5 TV channels, and that fifth channel was quite new too, for my early years we had four channels at our home. Back then that seemed great, even better when we got the new channel 5. Getting home from school and having a cup of tea and numerous biscuits we would sit in front of the television watching the children’s programs, and every 15 or so minutes the advert breaks would appear, for a few minutes.

As I grew up I learnt that a black and white square box would appear in the top right to highlight an ad break was coming very soon. Back then we thought nothing of ad breaks, all part and parcel of watching television, even better as you could nip for a toilet or make another cup of tea.

Spring forward 20′ish years and now I have a son, who does a few similar things to what I used to growing up.

He watch’s TV after coming home from school once his homework is done, or the weather is bad, in the mornings, quite a lot, but not too much. But… He never gets an advert break!

Why is this? Because he never actually watch’s normal TV, he is either consuming Netflix, BTVision, NowTV, or stuff we have downloaded. One might not find this bad, but the interesting thing is that the other week there was a children’s movie on Sunday afternoon television, one he really likes, so I decided we would watch that.We started watching just as it had began, 15 to 20 minutes in the first advert break came, the surprise of my son who did not know what was happening, as he had watched this movie many times before and knew that something else was to appear not some random TV.

When the advert break appear he was not best pleased. Trying to explain advert breaks to a five year old who has never experienced them before is very difficult. Since then we have tried to introduce more normal TV where possible, and still he struggles with the advert breaks.

One other thing I have noticed with my son is, he is very aware of the ability to Pause, Stop, rewind or forward parts of a TV program, and the more normal TV we have introduced to him he thinks he has the same control, while we have BTVision he is able to do it, but when visiting family it can get a bit tricky.

My Sublime Text


Over the past few weeks I’ve added a few more packages to my Sublime Text work flow, it’s been a good while since I last added a package. I had got myself into a nice flow and was happy. But then I saw someone mention something about Sublime Text and I decide it was time to see if there where any new packages that might help with my work flow or speed up my development.

I’ve been using Sublime Text 2 for over two years now, and love it to bits, I have tried other editors and can not bring myself to move away, or spend the time to learn something new. I believe that the more time I spend within Sublime learning it’s little short cuts the better I’ll be, and then every now and then I’ll spend a bit of time seeing if there is anything else I should learn, or any other packages I should install. I don’t believe you can become an expert with your editor very quickly, but over time you will begin to gel with it and learn more about it, the trick for me is to every now and then spend some time learning something new with it.

As you may now if you are a sublime user, it’s a good editor straight out the box, but you really need the package manager for it to become it’s own, and for you to make it your own. It’s the first thing you should do after installing Sublime, even if its just for one or two packages.

I will not go into the basics of setting up Sublime and it’s settings, but I am going to talk about the settings I have, the packages I use, etc.

User Preferences

Listed below is a copy of my User Preferences ( Menu > Preferences > Settings – User )

  "auto_complete": false,
  "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
  "detect_indentation": false,
  "ensure_newline_at_eof_on_save": true,
  "font_size": 8,
  "highlight_modified_tabs": true,
  "line_padding_bottom": 1,
  "line_padding_top": 1,
  "overlay_scroll_bars": "disabled",
  "preview_on_click": false,
  "tab_size": 2,
  "trim_trailing_white_space_on_save": true,
  "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
  "word_wrap": true

You may notice that I like my font_size small, I hate word wrap, and hate trailing white space, and yes I use tabs, but only indent by 2.


I use the package manager and have a bunch of packages installed to help with my development.

12 Packages to help with my daily development. A few of them are for syntax highlighting, so not sure if they count, but without out them it would be difficult.

The first two, ColdFusion and Enhanced HTML and CFML along with Sass are for syntax highlighting along with auto completion.

Grunt is quite a new package to me, and it’s one I wish I had found earlier, it means one less terminal window open for me and I can access all my grunt commands without leaving Sublime, and by using the keyboard. You can run any of your grunt commands, including the watch commands, and you can also kill running grunt tasks.

HTTP Requester is a package I sometimes forget I have installed. It’s a great little package for making HTTP Requests from within Sublime, take a few minutes to look at the documentation, it’s not just for basic HTTP Requests.

SideBarEnhancements is the first package I tell anyone who installs Sublime Text 2 to go get, in my eyes it contains everything that Sublime should do out of the box, it provides some basic right click menu action for the left sidebar of Sublime text, for example: New Folder/File.

SVN, is exactly what you might think. Subversion control from within Sublime, while I don’t use this greatly as I get a little nervous when committing file(s) without using a GUI to check my changes, it can come it very handy when I need to do an update or check the status of things. I use a Windows machine to develop on and getting SVN set up via the command line, and then through Sublime took me all evening one day, I should of documented it but never, but I might try and find the settings and things I did and document them. So bear in mind you might be in for a little bit of configuration and banging your head against the wall getting this package to work.

VCS Gutter, this again is a fairly new package for me. This package is a great enhancement to the Sublime interface. The basics of the package is it will provide your visual indicators in the gutter of an open file of it’s local state against the repository’s state. It requires SVN to be on your path and a diff tool to be available on your path, for me I have it set to do the diff check on save of the file.