Chrome reloads sprite image on CSS image hover

The image flickers on hover in Google Chrome when I have the following code:

#MAIN_MENU a.foodMenu {
 background: #000 url('../images/home_icons.jpg') -525px -176px no-repeat;
}

#MAIN_MENU a.foodMenu:hover {
 background: #000 url('../images/home_icons.jpg') -525px 0  no-repeat;
}

It seemed that my image was not preloaded fully so I tried preloading the image using javascript or css but to no avail. Found out that the problem is not in the preloading of image, it's the css definition. Apparently, Google Chrome thoughts it needs to reload the image even if you are using the same one.

The solution:

#MAIN_MENU a.foodMenu:hover {
 background-position: -525px 0;
}

Do not use background property to re-define the hover. Use background-position only to re-position the sprite. That's it!

Node.js: exports vs module.exports

If you've been using node.js, you're probably familiar with the following scenario:

book.js:

exports.title = 'The Alchemist'

reader.js:

var book = require('./book');
console.log(book.title); // prints "The Alchemist" to console

In the above, "exports" allows us to call the property "title" of book.js. However, this approach always requires us to define and call a method or property. The object returned by "require('./book')" is the exports object which is created by the node.js framework but what if we want our own custom object returned?


This when "module.exports" becomes useful:

book.js:

module.exports = 'The Alchemist';

reader.js:

var book = require('./book');
console.log(book); // prints "The Alchemist" to console

In the above, notice that we don't need to call any method of book to be able to use it. In some cases, module.exports may be more convenient. In Express js, I use this approach to modularize my routes.

Use Node.js 0.8.14 or any custom version in Openshift

It's relatively easy to set-up a different version of node js in Openshift:

1. rhc app create -a nodeapp -t nodejs-0.6
-- you can add "-s" to make the app scalable e.g. rhc app create -a nodeapp -t nodejs-0.6 -s

2.
cd nodeapp
git remote add upstream -m master git://github.com/openshift/nodejs-custom-version-openshift.git
git pull -s recursive -X theirs upstream master

3. Edit .openshift/markers/NODEJS_VERSION and specify the version you want, e.g. 0.8.14

4. Commit then git push

That's it! Happy coding!

[Updated March 2013] Created a Swig, Mongoose, Passport, Zurb Foundation and Node JS 0.10.1 package in github for OpenShift. I confirm that OpenShift works with Node JS 0.10.1

> rhc app create -a nodeapp -t nodejs-0.6

> rhc cartridge add mongodb-2.2 --app nodeapp

> cd nodeapp
> git remote add upstream -m master https://github.com/mannyvergel/node-swig-openshift-quickstart.git

> git pull -s recursive -X theirs upstream master

-- Edit .openshift/markers/NODEJS_VERSION commit then git push

[Solved] iOS didrotatefrominterfaceorientation is not called

There are cases that did rotate method (didRotateFromInterfaceOrientation:) of a view controller is not triggered. A workaround is to manually call it from you main view controller, but if you don't have time, an easier fix is to use notifications:

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didRotate:) name:UIDeviceOrientationDidChangeNotification object:nil];

Place the above in your controllers view will appear, and don't forget to unregister it in view did disappear.

- (void)didRotate:(NSNotification *)notification {
  //do your post-rotation logic here

}

Top iOS programming bloopers for this week

These are my top iOS bloopers for this week (and corresponding fixes):

1. For proper spacing of Toolbar Items in iOS you can use
   
   UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
   
   //this will center-align myButton
   
   [self setToolbarItems:[NSArray arrayWithObjects: flexibleSpace, myButton, flexibleSpace, nil]];
   
   or you can also use
   
   UIBarButtonSystemItemFixedSpace system item and set the width.
2. 2nd or Bottom Navigation Toolbar in a popover (UIPopoverController)
   
   It is actually the toolbar item of the navigation controller.
   
   Assuming you added a navigation controller in a popover for the title,
   using initWithContentViewController: [UINavigationController]
   
   To show bottom toolbar, just set the navigation controller's toolbarHidden to NO.
   
3. When changing the width of a UIBarButton, I often try to find the frame, but it's not there. Apparently, just set it directly using setWidth method.
4. Change Navigation Controller's Back Button Title or Text
   Just accessing the backBarButtonItem will not work, you have to set the button entirely.
    self.navigationItem.backBarButtonItem =
         [[[UIBarButtonItem alloc] initWithTitle:@"Back"
                  style: UIBarButtonItemStyleBordered
                  target:nil
                  action:nil] autorelease];
5. UIButton is not showing , also related topic: UIBarButtonItem not showing UIButton custom view
   
   [btn setBackgroundImage:image forState:UIControlStateNormal]
   instead of
   btn.imageView.image = .. //ugh
   
   The same way if title is not showing, use:
   [btn setTitle:itemTitle forState:UIControlStateNormal];
   instead of
   btn.titleLabel.text = ..
   
   

Show GSP directly in Grails 2

Starting Grails 2.0, you cannot access GSP's directly when you type it in the url without defining it in url mappings. It has been disallowed since it's considered a security flaw of Grails 1.x. The side-effect is for simple static pages, it's a hassle to create mappings everytime.

Fortunately, Grails allows a simple workaround by using the UrlMappings.groovy. You just need to define one controller and make its actions accessible in url mappings configuration.

These are the steps I followed to quickly see all my root pages:

1. Create a StaticViewController
2. My UrlMappings.groovy contains:
    "/"(controller:"staticView")
    "/$action"(controller:"staticView")

Creating a controller is my preferred way, it's an additional step but my views are more manageable this way. 

For this example, I defined the following in my StaticViewController:

def index() {

}

def hello() {
}

Then added the ff gsps:

views/staticView/index.gsp

views/staticView/hello.gsp

I can now access the following in my browser:

http://localhost:8080/[app]/

http://localhost:8080/[app]/hello

To make your urls more search engine friendly, you may also want to map urls that ends in "html" to your controller, just add this line in UrlMappings.groovy :
"/*.html"(controller:"staticView")

In this case, I'll be able to access:
http://localhost:8080/[app]/hello.html

---
src: http://grails.1312388.n4.nabble.com/Direct-linking-to-gsp-in-Grails-2-0-td4228929.html

How to force Google to reindex your site or blog - kind of

Google Webmaster Tools has a page for submitting a url to Google. Google will queue then try to re-index the requested page, but it doesn't guarantee that it will do so. Here's the extracted disclaimer:

Google adds new sites to our index, and updates existing ones, every time we crawl the web. If you have a new URL, tell us about it here. We don't add all submitted URLs to our index, and we can't make predictions or guarantees about when or if submitted URLs will appear in our index.

I guess it means they will try their best! It's better than nothing :)

The full url of the tool is https://www.google.com/webmasters/tools/submit-url