Blog
Some ramblings and write-ups about tech, music, travelling and other topics.
$ sudo apt-get install compizconfig-settings-manager2. Use Unity to find and launch the CompizConfig Settings Manager (super+a and search for Compiz) 3. Select "Desktop" in the left column and "Ubuntu Unity Plugin" on the right
sudo apt-get install slimwhile installation, it asks for choosing a login manager between GDM and SLiM, just choose SLiM. If you change your mind and want to change the default login manager back to GDM, run:
sudo dpkg-reconfigure gdm
# current theme, use comma separated list to specify a set to # randomly choose from current_theme debian-moreblue-orbitTo select a random a theme, replace the theme name with couple themes separated with “,”(without quotes). To Preview the theme:
slim -p /usr/share/slim/themes/NAME
A few weeks ago I went to this cozy pub in Shibuya called Craftheads. Nice selection of ales and fruit beers, mostly exclusively imported. Nice atmosphere, good food, although the price was little bit costly for the casual Friday night drinking.
When you are working with Git repositories, sometimes you want to separate out a folder into its own repository, removing it from history in the parent repository, but keeping history for the folder in the newly create repository. Here are the steps.
Often when you install a VM in virtualbox you’ll notice that initial size of the VM image would be more or less equal to the disk space actually used in the VM. However with time, as you play around, you will find that the size of VM image would always keep on increasing. The disk space actually used would be far lesser than the VM image size. We would try to compress the VM image to the space actually used up inside the VM.
Pre-condition – The image that we are going to shrink should have been dynamically expanding type, when you created the disk very first time. This is explained for a windows VM. Theoretically should work on other VMs also.
Ok, Lets get started.
We’ll need the following tools:
1. http://www.feyrer.de/g4u/nullfile-1.02.exe : This tool zeroes out free space, which our next tool compresses. For Linux based OS, search for a file, zerospace.c, which you’ll have to compile yourself.
2. VBoxManage : This tool is the command line management tool that ships with VirtualBox. Whatever you can do with the GUI, can be done by this. + A lot more
Ok now.
1. First boot into your VM. Defragment your drive atleast 2 times.
2. Copy the tool, nullfile mentioned above to the VM and run it. A simple double click should do it.
3. Now shutdown the guest. Open a terminal in the VM image directory. Most probably /home/<user_name>/.VirtualBox/VDI
2. Run our final command, We would be done after this.
VBoxManage modifyvdi <file_path> compact
If you are like me, who is just happy with non-crappy looking pages without going into a CSS frenzy, jQuery UI definitely is probably what you're looking for. In fact, pure jQuery UI pages do look pretty awesome - all it needs is a few js/css links and a couple of lines of javascript. If you are placing all files from jQuery UI themes in the same place, so that the common files overlap, it's very easy to switch between themes - just a matter of changing the theme name in the path to the theme specific css file:
<link id="tk-stylesheet" type="text/css" rel="stylesheet"
href="/script/jquery-ui/css/dot-luv/jquery-ui-1.8.4.custom.css" />
into
<link id="tk-stylesheet" type="text/css" rel="stylesheet"
href="/script/jquery-ui/css/redmond/jquery-ui-1.8.4.custom.css" />
I was already doing this theme selection RESTfully, parsing $_GET['skin'] in php. I was looking at the ThemeRoller on the jQuery UI site, which allows you to choose from the pre-set themes and build your own, when I realized how easy it is to switch themes using AJAX in jQuery UI. All you need to do is change the href attribute. However, just changing the theme ajaxly wasn't quite enough for me - I've recently developed a login framework with PHP/MySQL as the backend and jQuery UI as the front-end. This framework also stores user settings. What I really wanted was a way for users the switch between themes ajaxly whilst saving the theme setting so that when the user logs in the next time, the chosen theme will be selected by default. So for the rest of this article I will be talking about how to do all the above, assuming you have a page set up to use jQuery UI as the front-end already, and that you have some kind of mechanism to save user settings.
<link id="tk-stylesheet" type="text/css" rel="stylesheet"
href="/script/jquery-ui/css/dot-luv/jquery-ui-1.8.4.custom.css" />
if (typeof TK == "undefined") var TK = {};
TK.getCssUrl = function(skin) {
return "/script/css-proxy.php/script/jquery-ui/css/"
+ skin + "/jquery-ui-1.8.4.custom.css?css";
};
...
$('#tk-stylesheet').attr('href', TK.getCssUrl("redmond"));
DOCUMENT_ROOT/script/css-proxy.php
file which returns
file_get_contents($_SERVER['DOCUMENT_ROOT'] . $_SERVER['PATH_INFO']);
css-proxy.php
to fetch the all the CSS that you need.
if (isset($_GET["css"])) {
header("Content-Type: text/css");
$s = "#dummy-element{width:2px;}";
$s .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $_SERVER['PATH_INFO']);
$patterns = array(
"/(url\('*)/"
);
$replace = array(
"\\1" . dirname($_SERVER['PATH_INFO']) . "/",
);
$s = preg_replace($patterns, $replace, $s);
echo $s;
}
Notice the #dummy-element
that has been added. This is just a way to detect whether the css has been loaded in javascript, but we will come back to this later. Here we get the path to the css file using $_SERVER['PATH_INFO']
; of course, you may choose to use $_GET
variable instead. Since the page that we are serving is most likely not on the same directory as the jquery-ui theme css file, we need to replace the relative image paths with the absolute paths, hence the preg_replace(...)
.
$(function(){
TK.skinSwitcher.init();
});
if (typeof TK == "undefined") var TK = {};
/* this is where we specify the path to the css-proxy.php file we have prepared earlier */
TK.getCssUrl = function(skin) {
return "/script/css-proxy.php/script/jquery-ui/css/"
+ skin
+ "/jquery-ui-1.8.4.custom.css?css";
};
/* returns another php css proxy file in the same directory as the page being served */
TK.getCssUrl.custom = function(skin) { return "styles.php?skin=" + skin; };
/* This points to the script that allows users to persist their settings
* using GET or POST.
*/
TK.getSettingsUrl = function() { return "/script/your-login-settings.php"; }
/* A wrapper function to get the url for saving
* the current user's skin selection
* If sucsessful, it should return the same skin name as parsed.
* Otherwise it should return the currently selected skin name
* for the current user, or the default skin name or something.
* If you don't have a login framework, you can create a php file with just
* * and put the path to that file in getSettingsUrl()
*/
TK.getSettingsUrl.skin = function(skin) {
return TK.getSettingsUrl() + "?skin=" + skin;
}
/* Main skinSwitcher object */
TK.skinSwitcher = {
dialog : null,
message : null,
init: function(){
$('
').appendTo('body');
},
check: function(callback) {
/* This is why we inserted the #dummy-element to the CSS
* returned by css-proxy.php
*/
if ($('#dummy-element').width()==2) callback();
else setTimeout(function(){TK.skinSwitcher.check(callback)}, 250);
},
load : function(skin) {
TK.skinSwitcher.message = document.createElement("div");
$(TK.skinSwitcher.message).html(
"
Please wait while the skin '" + skin + "' is being loaded... "); $(TK.skinSwitcher.message).dialog({ modal: true, draggable : false, resizable : false, title : "Switching skin" }); /* When working with localhost, you can setTimeout(...) * to introduce fake network latency. Comment it out for Production */ //setTimeout(function() { $.get(TK.getSettingsUrl.skin(skin), function(data){ /* Here's the core of this script; * we simply change the href attribute of the stylesheet tag. */ $('#tk-stylesheet').attr('href', TK.getCssUrl(data)); $('#tk-stylesheet-custom').attr('href', TK.getCssUrl.custom(data)); /* We start off the checking "thread" parsing a callback function * to be executed when the css has been loaded */ TK.skinSwitcher.check(function(){ $(TK.skinSwitcher.message).dialog("close").remove(); }); }); //}, 200); }, showDialog : function() { $(TK.skinSwitcher.dialog).dialog({ resizable: true, height:400, width: 600, modal: false, title : "Select a skin", show : "drop", hide : "drop", buttons: { Close: function() { $(this).dialog('close'); } } }); } }
Now you can test it using something like the following html
...
$skinsdir = $_SERVER['DOCUMENT_ROOT'] . "/script/jquery-ui/css/";
if($dir = opendir($skinsdir)) {
while($entry = readdir($dir)){
if($entry[0] != '.' && is_dir($skinsdir.$entry)) {
array_push($skins, $entry);
}
}
closedir($dir);
}
Then in the TK.skinSwitcher.init() function, you can insert something like:
$('