Tuesday, 31 March 2015

Insert image using only CSS


How can I insert an image using only CSS?


While there are many ways to do this, we will discuss one below.

Assuming the following html:

This is an image of an icon <span class="myicon"></span>

We can make the span display an icon using the following CSS for the class "myicon", with the stuff in bold being stuff you'll want to replace:

.myicon {
    display: inline-block; /* or 'block' if not inline */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url("path/to/your/image") no-repeat;
    background-size: 85pt 8.5pt; /* (optional) resize image */
    width: 85pt; /* Width of image */
    height: 8.5pt; /* Height of image */
    padding-left: 85pt; /* Equal to width of new image*/

    margin-left: 2pt; /* optional */
    margin-right: 2pt; /* optional */


While the situation is not common, there can be cases where designers might only have access to the CSS and not the HTML, with the developer applying the desired class to the span or div for the designer. If yours is one of these situations then this trick can come in handy.

Note that you can also use this trick to add other content by using the 'content' attribute. While this is out of the scope of this post, you can feel free to experiment and see how it goes.

Also note that this trick will only work with CSS3 and beyond (because of the 'box-sizing' attribute).


Thanks for over 200,000 views!

Thank you for over 200,000 page views!

I'm glad that so many people have found the information in this blog useful :)

As a bonus, here are two Android games that I made which are free as of now. Enjoy!

Friday, 12 December 2014

Sync shared Google calendars to BlackBerry Passport or BB10 device


I have some Google calendars that were shared with me, however I cannot see them in my BlackBerry's calendar. How do I sync these shared calendars? As of now (December 2014) the official Google Calendar apps are not available on the Passport.


  • Go to https://www.google.com/calendar/syncselect
  • Check any calendars that you want to sync
  • Go to the Passport/BB10 calendar and refresh (click menu button on bottom right, click refresh)
  • Wait for a few minutes until all events sync, they will show up then


There have been other solutions online using third party apps or adding CalDAV accounts. However, for basic viewing needs the above solution seems to work. The CalDAV method is considered less secure by Google so it is not recommended.

This solution was tested in December 2014 to work using a BlackBerry Passport, OS version Your results may vary using different OS versions, using different devices, or if Google changes their calendar in the future.

This was attempted in OS 7, however the shared calendars did not show up. Anyone out there have any luck with the older BB OS?

View full Google Calendar website with BlackBerry Passport


How do I view the full Google Calendar website in my BlackBerry Passport's browser? When I go to calendar.google.com, Google brings me to the mobile version.


Try the following URL: google.com/calendar/render

The site will show a dialog asking to confirm using the desktop version. If you click ok, the full calendar site should show up.


Note that the full desktop site may not work fully or it may render slowly on mobile devices. It's a useful site to be able to log into however, as there are many options that can only be set using the full desktop site instead of the mobile site.

This solution was tested to work using the BlackBerry Passport, OS version, and the full Google Calendar site is accessible as of December 2014. Your mileage may vary using other versions and if Google decides to change Google Calendar in the future. Best of luck to you!

Monday, 29 September 2014

Test for shellshock bash bug vulnerability in OS X or Linux


How do I quickly test if my computer is vulnerable to the shellshock Bash bug?


One way to test the shellshock bug is to open a Terminal (in OS X, or any shell prompt in Linux, Cygwin, etc.), and try the following one-lined command:

x='() { :;}; echo VULNERABLE' bash -c :

If vulnerable, VULNERABLE should appear as part of the response. Otherwise if things are alright, you should get a response similar to the following:

bash: warning: x: ignoring function definition attempt
bash: error importing function definition for `x'

(Note that in some versions of fixed/patched bash shells, the above error won't show up but "VULNERABLE" will also not be printed to the terminal.)


If you're unsure of any steps of the above instructions, see if you can find a friend who may be familiar with how to use bash shell and Terminal to try the above for you.

For more detail, check out the references below.

If your system happens to be vulnerable, and you're using Linux and don't know how to update your bash shell, try this post for instructions: http://linux.about.com/od/howtos/fl/How-To-Fix-The-BASH-Shellshock-Bug-On-Your-Linux-System.htm

NOTE: I won't be able to answer any questions about shellshock as I am not enough of an expert on this bug to comfortably respond. Sorry about that! I hope that this post still comes in handy to people out there.


Friday, 12 September 2014

Unable to resolve superclass android.support.v4.app.FragmentActivity


When trying to implement an Android app using the Facebook SDK (v3.18) I get an error similar to: Unable to resolve superclass of Lcom/facebook/samples/hellofacebook/HelloFacebookSampleActivity;

In the above example, HelloFacebookSampleActivity is a subclass of android.support.v4.app.FragmentActivity.

I have already added the android-support-v4.jar to my project (found in FacebookSDK/libs) and Eclipse ADT does not show any linker errors. However, whenever the app is compiled and run on a device it crashes immediately and gives the above error in the log.


Try the following:

  • Right click on your project in Eclipse
  • Select: Build Path -> Configure Build Path
  • Select the "Order and Export" tab
  • Make sure that "android-support-v4.jar" is checked

When you try and run the project now, the app should hopefully be able to find the linked FragmentActivity from the now-included android-support-v4.jar.


Thursday, 26 June 2014

Replaced ADT Eclipse and got errors such as "The type java.lang.Object cannot be resolved"


I've installed the Juno version of the Eclipse-based ADT from the Google Android developers site in order to replace my outdated ADT. Now all of my existing android eclipse projects from my previous workspace have many errors such as "The type java.lang.Object cannot be resolved." and will not compile in the newly-installed ADT.

Steps to try:

The following steps fixed the issue on the author's system so they might be worth trying, (however it's not guaranteed that they will work):

  • Add any add-ons that may have been on your previous ADT build: http://developer.android.com/sdk/installing/adding-packages.html
  • For each project, make sure that each has a valid Android target and Java system library
    • Right click on the project folder and click "properties"
    • Click on "Android" from the list on the left
    • Check an android version in "Project Build Target"
    • Click on "Java Build Path"
    • Click the "Add Library..." button on the right
    • Select "JRE System Library"
    • Choose an appropriate JRE and press "OK"

Explanation of the above steps:

The errors such as "The type java.lang.Object cannot be resolved" are due to the new ADT being unable to find the system's java library (or the library that is installed is currently invalid.) Pointing your project to the appropriate Java JDK should fix this problem. However, this doesn't fix everything.

The next errors regarding android.* and related means that the old ADT pointed to an Android target that likely no longer exists after the upgrade. Pointing the project to the new Android target should fix the problem (or installing the old versions should also do the trick.)

Hopefully this helped, though it definitely won't be a complete solution for everyone out there. Best of luck to you!

Other notes:

Note that the fix above worked for an upgrade to ADT version 23 using Eclipse Juno under OS X 10.9.3. Your mileage will most likely vary with different versions. The above steps were only listed in case someone out there finds them helpful.

Tuesday, 24 June 2014

Android CalledFromWrongThreadException


When I try to run functions such as myView.setText(myText), I get something similar to the following error: CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views.


Use Activity.runOnUiThread()

For instance, within your MainActivity (or whatever your activity class is named):

public void myFunctionCalledByAnotherThread() {
  // ... stuff ...

  runOnUiThread(new Runnable() {
    public void run() {
      // ... code to modify ui such as View.setText() ...

  // ... other stuff ...

If you're outside of the Activity, you can also try getActivity():

getActivity().runOnUiThread( ... )


This error is caused by a thread other than the original thread that created the UI element/View, attempting to modify that view. An example of something that will cause this error is placing a setText() call into the run() function of a java TimerTask.