Blog posts
There are a whole variety of ways that responsive images can be accomplished, but as of yet there is no perfect way of doing it without using a combination of .htaccess, javascript or css. My solution is no different and uses javascript (in the form of jQuery) as the coordinator of the images.
responsiveBreakpointJQ works by specifying the images that will show if the screen of the device is big enough. The data-XXX values are how the appropriate image is specified. If a screen is wider than the XXX value then that image is selected as the best one for the job.
<img src="small.jpg" data-480="medium.jpg" data-960="large.jpg" alt="Image Alt text" />
If you would like to read more then take a look at the
responsiveBreakpointJQ project on github
. If you feel you can make it better then be my guest :D
Download the jQuery Responsive Breakpoint Image Plugin from git hub to checkout the code:
https://github.com/Designer023/responsiveBreakpointJQ
Pros:
-
Can add as many breakpoints as needed.
-
Breakpoints will automatically work for retina displays if a breakpoint that is big enough is specified. i.e. data-2000 would act as a retina image for a screen with a width of 1000px.
Cons:
-
Will always load the default images
-
Needs jQuery/Javascript
-
Takes no account of bandwidth available, and just assumes that bigger screens tend to be connected to better connections
Continue reading (permalink)
Posted in 'Web development'.
Facebook's app center has opened it's doors to apps but there seems to be quite a few images that need to be created to get it live. To keep them all neatly together and easy to keep in track I thought it would be handy to have a .psd with all the image sized layed out as smart layers so they are all just a click away. As a bonus I have also setup the slices so it's ready to export and upload to Facebook.
It's still rough around the edges, but here it is. Please download, use and modify as you see fit :)
Download the .PSD on github
Continue reading (permalink)
Posted in 'Projects'.
Getting a remote desktop client to work can be a pain. Having used OS X's default share screen option on a local network and found it good, but lacking in some respects, I typically wanted more control. Apple Remote Desktop seemed the logical extension to that.
Getting it to work in anyway with the BT Homehub 3 was far from clear, but after many attempts at trying everything possible, and asking the IT guy at work, it's now working. For my own sanity and those in the same situation it's only good to share, so here is my solution.
-
Log in the home hub (
http://bthomehub.home
)
-
Navigate to Advanced > Port forwarding > Supported applications
-
Add a new 'Game or Application' with the following ports and click apply when done
-
Any 5900-5900 -> 5900 -5900
-
Any 3283-3283 -> 3283 -3283
-
Any 5988-5988 -> 5988 -5988
-
Any 22-22 -> 22 -22
-
Go to Configuration
-
Select your newly named 'Game or Application' and importantly for the device use the internal IP of your computer. If you use the device name it doesn't work. Go figure!
-
Apply!
To test you need to use a device that isn't on the same network. I wasted much time and pulled out some hair by missing this step. I tested by tethering the computer that I was controlling on to my iPhone so it was vis 3G, but you can also use a VPN out your local network and back in.
If you want to make sure you can always get your computer, I would recommend using a service like no-ip.org or similar so you can just point your RDC to mymegacomputer.no-ip.org and it will take care of the external IP.
I imagine I have extra ports open that are in excess so please ...
Continue reading (permalink)
Posted in 'Other'.
Recently I have been working on an interesting project. Not only is the subject of it close to my heart, but the technical aspects of it are fascinating (to me at least). For those of you with no patience, I can reveal that the project is the website for
The Tappy App Co. Ltd
, who are a mobile app development company, focused on iOS apps (for the moment at least).
If you know me at all you will know I have a fascination with Apple and many of their gadgets and philosophies so working on something in the same industry is a joy. As for the technical side of things that is where it gets much more interesting.
The site has been developed with what is known as responsive design. That means an end of having the page seeming to be fixed at a certain size in your browser window. You might think this odd at first, but the more you think about it the more sense it makes. You can view a site on you desktop with it's huge screen, your iPad or your phone. Each one has a different sized screen but each time you view it you are here for the same info. This means the site has been designed to flow into the screen size that you view it on! Neat!
What does it mean for the people involved? Well hopefully for you viewing the site, you get a page that is adapted best as can be for your screen and situation. So far so good. For the client it's about being flexible. Some things have to change. A site can't be drawn out in every possible combo before being signed off or nothing would get started. It's just about trusting the ...
Continue reading (permalink)
Posted in 'News'.
There are plenty of tutorials and guides on how to make a chome extension and there are hundeds for jQuery manipulation of the DOM. There are also a few about using jQuery in a chome extension, but only for the popup window. There seems to be a lack of using jQuery to actually do something on a page.This is something that too me a while to get my head around and a bit of googling to figure out, so now it's time to share.
Create a folder for the extension files. It's probably best to name it after your extension so you can find it later on.
In a plain text editor such as Notepad, Textmate or TextEdit create 3 blank documents. You can save the files as manifest.json, background.js and background.html. Using your favorite image editing software create a png icon with a transparent background (20px x 20px should be ok for now). Chome should scale the icon for the different areas it shows. Later we can create different resolution icons and tell chome to use them.
Get a copy of jQuery. and add it to the folder.
In your folder you should now have the following files:
manifest.json
background.html
background.js
icon.png
jquery.min.js
Let's go over what each of the files will contain, and then what that does.
manifest.json
{
"name": "jQuery DOM",
"version": "1",
"description": "Manipulate the DOM when the page is done loading",
"background_page": "background.html",
"browser_action": {
"name": "Manipulate DOM",
"icons": ["icon.png"],
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
The important part of the manifest.json is:
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
The js tells the extension to load jquery and then ...
Continue reading (permalink)
Posted in 'Web development'.
Recently I have been working on quite a few projects that require different versions of packages to run. Each setup has been running in a virtual environment (that is a post for another day) and setting them up with the required package rather than the latest that easy_install can find is really simple.
easy_install "django == 1.3"
That will find and install Django version 1.3... simple as that!
Continue reading (permalink)
Posted in 'Programming'.
Flipping an image using objective-c is so easy once you know how...
//Create a normal image
UIImage* img = [UIImage imageNamed:@"myImage.png"];
//Flip it
UIImage* flippedImage = [UIImage imageWithCGImage:img.CGImage scale:1.0 orientation: UIImageOrientationDownMirrored];
That's it! Now to have it as an method we can use more conveniently, try this:
-(UIImage *)flipImage:(UIImage *)img {
UIImage* flippedImage = [UIImage imageWithCGImage:img.CGImage scale:1.0 orientation: UIImageOrientationDownMirrored];
return flippedImage;
}
Then we can send any image to it and it will return a flipped version.
Continue reading (permalink)
Posted in 'Programming'.
The uses of NSNotificationCenter can be many; It is handy for using to notify the app that a background download of data, a post of some kind is done, or some calculation is finished. It can also be useful for letting sub views know when some root level functions happen in the app such as shutdown/sending to background because the user tapped the home button. In this example I will be doing just that.
In the AppDelegate you should find a method named:
- (void)applicationDidEnterBackground:(UIApplication *)application
This is called when the app starts the process to pause into the background state. Since this method can only be called by the app delegate and not a sub view notifications are ideal for subviews so that they can do what they need such as save data or stop heavy processing of data.
//.m
- (void)applicationDidEnterBackground:(UIApplication *)application{
[[NSNotificationCenter defaultCenter] postNotificationName:@"UIApplicationDidEnterBackgroundNotification" object:self];
}
'UIApplicationDidEnterBackgroundNotification' is the name of the notification we send out. If we name notifications in a smart way it makes sense when you have lost of them to listen for.
In a sub view class we need tell it to listen (observe) for the 'UIApplicationDidEnterBackgroundNotification'. Add the notification observer to somewhere like the init so that it is listening as soon as the object is created. Lets go over the details before we see the code.
addObserver:self assigns the listener to the current object. We can also assign the listener to other objects, such as views, i.e: addObserver:myCustomViewControllerObject.
selector:@selector(theActionToCarryOut:) is which method to call when we get the notification.
name:@"UIApplicationDidEnterBackgroundNotification" is what notification we are listening to.
object:nil is which object sent it. By setting 'nil' we say that we don't care where the message came from. If we ...
Continue reading (permalink)
Posted in 'Programming'.
I have added a new section to the site to share some the photographs that I have been taking. If your interested then hop on over to http://carl-topham.com/portfolio/photography/ and have a look.
Continue reading (permalink)
Posted in 'News'.
The site redesign has been launched. As with any redesign, things change. Some you may like, and other you may not, but I assure you that I have put a lot of thought behind each change I have made. Let me know what you think of the changes. Since the site was also rebuilt from the ground up some of the things you may see may be things that are buggy or broken so please let me know asap.
Continue reading (permalink)
Posted in 'News'.
