Monthly Archives: September 2013

Raspberry PI adventures

I managed finally to have some time to play with the an RPi Model B I received from a friend of mine for experimentation. I prepared all the peripherals as below:

raspberry-pi-preparation

  • An HDMI cable
  • A micro USB 700 mA+ charger (I used my Samsung Galaxy Nexus 1A charger)
  • An Ethernet cable
  • An 8GB class 4 SD card
  • A USB keyboard
  • A USB mouse
  • An LCD TV with HDMI input (not shown above :))

Woo! A long list!

To prepare the OS, I downloaded a Raspbian Wheezy image, a Debian-based distro for RPi. I used Win32DiskImager to dump the image to the SD card. I connected everything, inserted the SD card to the RPi, and powered it on. Within a few moments, I saw a setup screen, where I chose to expand the rootfs to the whole SD card so that it uses all the empty space for storage. I also enabled the SSH server. There was an option to specify the amount of memory reserved for display. I left the default of 64MB for display and 192MB for RAM to run the GUI smoothly, but I’ll probably need to modify this later if I use it as a server.

After that there was a beautiful GUI with some sample applications, including some simple yet enjoyable Python games. The web browser is a basic one and doesn’t run Flash nor HTML5. I didn’t yet try running videos but should do that soon.

I then switched the RPi off, removed all cables except network. Then re-powered it on. I then connected to it via SSH, installed VNC server (via apt-get install tightvncserver). This allowed me to connect remotely to the GUI. I created a script for starting the VNC (~/vnc.sh).

I then tried installing a LAMP stack (apache2, mysql-server-5.5, php5, php5-mysql) .. all installed and worked smoothly. The document root is /var/www.

Next things that I plan to check later:

  • Can Firefox or Chrome be installed for a better web experience?
  • Running videos and checking which formats are supported.
  • Using the RPi as a network storage, possibly implementing some RAID via USB for redundancy.
  • Measuring MySQL performance for a possible dedicated database server (though I guess this won’t work due to the very low RAM that comes with RPi).
  • Installing some Podcast subscription software or so for using it as an internet radio.
  • Trying to connect to the internet via a 3G USB modem.
  • Trying to connect a USB webcam.
  • Trying to connect a USB printer (so the RPi becomes a print server).

Related links to check:

 

 

Bootstrap theme and IE7 and hours of debugging!

I was trying to apply bootstrap CSS framework to a page and things where going smooth until I started testing it with IE 8. For some reason, the drop-down menu in the navigation bar was not showing correctly .. it was stacked below other elements in the page.

The bootstrap drop-down menu appears correctly in Firefox.
The bootstrap drop-down menu appears correctly in Firefox.

 

But is rendered incorrectly in IE 8
But is rendered incorrectly in IE 8

Well .. I tried searching for a fix for this issue and stumbled upon several suggestions, mainly involving z-index CSS property. Unfortunately, none of them worked to fix this issue without breaking other elements.

It was really puzzling, specially that the example on the Bootstrap website was working just fine. So, I began tracing its code line by line, trying to remove some of the javascript libraries in my code one by one, adding html5shiv, removing it, adjusting meta tags .. nothing worked.

After several maddening hours, I found the ultimate cause of this issue … it was the Bootstrap theme CSS file that accompanies Bootstrap. This file adds some 3D shading effects to Bootstrap components. Here is how a page looks with and without it.

Bootstrap page without theme file.
Bootstrap page without theme file.
Bootstrap page with theme file.
Bootstrap page with theme file.

In IE 8, the drop-down bug would disappear if the theme file is not loaded.

In IE 8, not loading the Bootstrap theme file would eliminate the drop-down menu bug.
In IE 8, not loading the Bootstrap theme file would eliminate the drop-down menu bug.

So, basically, the fix was to load the Bootstrap theme file only if the browser is not IE, or is IE 9 or higher:

The above code tells browsers that are greater than IE 8 or not IE to load Bootstrap theme file. Otherwise, don’t. This works like a charm, though at the (bearable) cost of sacrificing 3D shading effects for IE 8 and below.

I hope this would help save someone hours of frustration!

Moving from Prototype to jQuery

AppGini used to use Prototype and Scriptaculous javascript framework for client-side scripting. It’s a great framework but it’s not being frequently updated any more, and finding plugins for it is getting harder. So, I decided to move on and migrate to jQuery. jQuery is in very active development, has a huge user base, has a huge library of actively-developed plugins, and is used by many great client-side frameworks, like bootstrap for example.

During the migration, I created a checklist of code lines I needed to change. I thought this would be useful for anyone who wishes to follow this path. Feel free to add your own points in the comments.

Prototype code To convert to jQuery, replace with
document.observe("dom:loaded", function(){ some_code }); jQuery(function(){ some_code });
$$(selector)[x] jQuery(selector).eq(x)
$('id') jQuery('#id')
.style.x = 'y' .css({ x: 'y' })
.checked .prop('checked')
.disabled .prop('disabled')
.some_attr .attr('some_attr')
.value = x .val(x)
.observe('event', function(){}) .event(function(){})
$F('id') $('#id').val()
.fade({duration: x}) .fadeOut(x * 1000)
.appear({duration: x}) .fadeIn(x * 1000)
Effect.Appear fadeIn()
Effect.Fade fadeOut()
.update('new content') .html('new content')

Tip: To work directly with DOM methods after selecting an element through a jQuery selector, use get(0) or [0] .. for example:

jQuery('div#author')[0].style
// or
jQuery('div#author').get(0).style

Hello world!

I founded my personal business website, bigprof.com in 2002. I began by selling a RAD (rapid application development) tool, AppGini. It quickly grew and is now used by tens of thousands of users worldwide. I decided to take a further step and convert it from a desktop application that runs under Windows OS, to the more natural approach of making it available as a web service (SaaS app, for those of you who love acronyms!) … And while building that app, I thought of branching another app, SaaSBase, which represents a framework for SaaS applications. This blog is a discussion of my coding experiments, thoughts and ideas. I welcome your feedback.