Random Code Solutions

Mobilize.js versus responsive web design (RWD) Both mobilize.js and responsive web design offer solutions to having a mobile and desktop site from the same codebase.  This is a comparison and evaluation of the 2 approches mobilize.js rendering I previously blogged about mobilize.js and how it can be used to transform a website dynamically between a desktop and mobile-enabled site.  As a brief background, mobilize.js is a javascript library that detects if a mobile browser is being used and, using client-side javascript, and re-renders the page using predefined mobile-optimised css.  However mobilize.js is no longer being developed - the developers now recommend using responsive web design instead.  In one of the comments to my original post I said I would check out the relative merits and report back - this is me reporting back Responsive web design works by detecting the size of the display and rendering differently using css (css3) media queries. ...

How to launch a website as a mobile app using PhoneGap/Apache Cordova I spent some time recently trying to find out how to launch my website as a mobile app.  The information was available around the internet but since it took me a while, I thought I'd collate it here in one simple post for anyone who wants to do the same I decided to use Apache Cordova since it gave me the framework for developing an HTML5 site as a mobile app already, meaning all I really needed to do was plug my website into it.  Their getting started guide has good information on how to create a Cordova project - I used Android but you can use whatever means you wish A basic Cordova app gives you a way to launch the app with an HTML page that you use to display your app contents.  The trick then is make the page load your website which you can do in one of 3 ways: 1. Package your site inside the app. This means it loads fast and without an internet connection.  The downside i...

One of the new nifty features on Android Jelly Bean 4.2 is the concept of daydreams (basically a screensaver but also displays when docked etc).  I wanted to create one that displayed an HTML page, which makes for prety easy development and this is how First of all, this assumes you have API 17 (Android 4.2) installed, otherwise you won't have access to the relevant Android class Android Daydream option You need to create a new class that extends android.service.dreams.DreamService and override the onAttachedToWindow() method which is what is called when the service starts up.  In here all you really need to do is create a new WebView as normal and attach it.  Example code below import android.annotation.TargetApi; import android.service.dreams.DreamService; import android.webkit.WebView; @TargetApi(17) public class MyDreamService extends DreamService {   @Override   public void onAttachedToWindow() {     super.onAttachedToWindow(); ...

HTML5 Appache I won't go into a full explanation here (if you want a tutorial the  HTML5 Rocks  website) but HTML5 appache is a method of caching web content so that, when offline, it can still be accessed One method of doing this is to add a meta tag to each page specifying an appcache file, which will tell the browser to cache that page. But what if you want to tell the browser to cache everything when the site is first accessed? Well HTML5 has a way of doing that too - you still add the meta tag but also specify the files to be cached in the file. When it is accessed, those files will be cached. This though leaves you with a problem - how do you make sure you locate every file to be cached and add them to the file? This is where this plugin can help Plugin The Appcache Eclipse Plugin is a plugin for the Eclipse IDE that will check all your files for your site and add all html, image, css and javascript files to the appcache. Once the plugin is installed, all you n...