The first thing I did was to close the guide and switch to the old style snippet view. This way it looks a bit familiar to me. But the new sidebar is nearly useless. I used to switch to different notebooks from the old sidebar because there’s a list of all notebooks. Now the new sidebar only lets you choose recent notes, and switch among notes, notebooks, tags and other views. If you want to switch to another notebook, you have to click the notebook title above the notes list – one more click!

So I thought about using shortcuts to simplify the actions needed. Luckily and unexpectedly, the new Evernote has a complete list of shortcuts.

You don’t have to google for it. What you need to do to find all these goodies is just to click each menu item (especially View, Note, Format) of Evernote, and all the shortcuts are shown alongside the actions.

So to select a notebook with Evernote 5, you just need to press ⌘-J, type in a few words and use arrow keys to navigate the list if necessary. You don’t even need the mouse or trackpad! If you want to further edit a note, just navigate to it using arrow keys and press ⌘-L and the note title gets the input focus. Press Enter, and the note editor gets focused.

Other useful shortcuts I just learned:

• ⇧-⌘-H — Insert horizontal rule. I use horizontal rules a lot to mark section beginnings in notes.
• ⇧-⌘-U — Unordered list
• ⇧-⌘-O — Ordered list
• ⌘-K — Create link. You can select some text and it will become the anchor text.

Now Evernote works more smoothly for geeks, right? You may argue that other apps like Notational Velocity or nvALT are more geeky, but the best part of Evernote is that you never need to think about/take care of synchronization or backup, yet you can access your notes anywhere, from any device.

I was a little resistent when they let me put my projects into it. With so many tools messing my mind, I don’t know where to look for information that matters. But Trello is the kind of product that you can’t help using, as it presents a brand new way of project management, tracking and team collaboration. Like iPhone reinvented smart phones. Like flickr introduced a new approach to online photo albums.

After visiting the account I was forced to create several times, I started to add items into the lists. The interface was so neat and it’s natural to add something into the lists. The visual effect of moving an item, which I believe was implemented using HTML 5, was fancy, but not too fancy to be annoying.

At first it only seemed to be some lists with items, and you could move things around. But after checking out the details of an item, I found it included a rich set of features for project tracking. You can set a due date, and the system will label the item with some color indicating the closeness. You can filter the items by a team member and see what he’s up to. Each item even can have its own checklists and the interface will show the completeness on the card.

Give it a try now if you didn’t already!

One solution is update the database and change all user emails to dummy ones. However this requires one more step each time the development database is refreshed with real data.

The solution I used is to setup a Postfix SMTP server which only allows several whitelisted domains. The configuration is quite simple.

1. Add this into main.cf:

   smtpd_recipient_restrictions = check_recipient_access hash:/etc/postfix/recipient_domains, reject

2. /etc/postfix/recipient_domains is the whitelist file:

   mycompany.com OK
   anotherdomain.com OK

3. Generate hash file: postmap /etc/postfix/recipient_domains
4. Restart postfix service

Now try sending an email to a domain not in the whitelist, like mail -s "Test email" someone@gmail.com. Look into /var/log/maillog and you will find something like that:

NOQUEUE: reject: RCPT from …: 554 5.7.1 <someone@gmail.com>: Recipient address rejected: Access denied;…

Then on all development servers, configure to use this postfix server as SMTP relay server. This is simple even with sendmail – the “SMART_HOST” option.

To the left is a screenshot I took when Evernote Mac client was upgrading itself. Quite stupid isn’t it?

It also bothers me that searching is not so convenient. I don’t know if developers of this software actually use it or not. When I need to search for something, I need to use mouse to set focus to the search box, and then enter the phrase I want to search.

When I want to stop searching and clear the search box, I have to move my mouse and click the cross icon to the right of the search box.

I mean, for productivity’s sake, why not give it a shortcut key? In Adium, I can easily search contacts by directly typing, and stop searching by pressing ESC. That’s the key feature that allures me even if it’s less stable than the Messenger made by Microsoft.

A year has passed since I got the 3G Kindle. How often did I use 3G on it? I think the total time I had 3G turned on must be less than one hour. Most times I turned the wireless network off so that the battery could last a little longer. When I have to access the network, I was always in a location with Wi-Fi wireless. Maybe that’s because I don’t travel a lot.

Many people are fond of the browser built in with Kindle and they think they get an unlimited data plan for free! But the browser has always been marked as “experimental” and it seems Amazon has no plan to make it usable in “production”. It’s by nature limited by the E-Ink display. Web pages must be specifically designed to make them readable in Kindle but few web sites are doing this. And free 3G web browsing is only available on Kindle 3. With the latest generation of Kindle (no keyboards), “Experimental web browsing (outside of Wikipedia) on Kindle Touch 3G is only available over Wi-Fi.”

If you buy a book from Amazon (even if it costs you $0, free), it can be downloaded via 3G. But if you email a document to Amazon, it won’t be downloaded via 3G unless you pay the data fee.

Actually Wi-Fi is ubiquitous today. If I’m going to get another Kindle, I won’t buy the 3G version. But for people who will stay in a special area where Wi-Fi is not available but there is cellular network coverage, 3G is desirable.

Yesterday I found that Django even had a special field SlugField for post slugs. I’m just starting with Django so there’s a lot I don’t know yet. It’s cool that they also designed a “prepopulated_fields” property in the admin module.

class ArticleAdmin(admin.ModelAdmin):
    prepopulated_fields = {"slug": ("title",)}

Its value is a dictionary, with key being the slug field name of your model, and value being a tuple (note the way Python defines a single element tuple!) or list of fields where the slug should get its value from.

Slugs are commonly used for user-friendly (and maybe SEO-friendly) URLs. WordPress has built-in functionality to automatically generate post slugs after you name your post title. So I guess SlugField and prepopulated_fields are designed just for this purpose.

But the problem came when I tried to see it in action in an edit page. I got everything correct but the slug field in the form just didn’t update no matter what I did to its source field. Of course it’s implemented using JavaScript, but looking at the source code, it only generated an useless stub.

I started to dig into the source code of Django’s admin module and had a hard time to find how the prepopulated_fields_js tag work, since I’m new to Django. At first I naively thought it was a bug in contrib/admin/templates/admin/prepopulated_fields_js.html:

{% for field in prepopulated_fields %}

I believed that’s the whole thing of template tag definition. The context doesn’t have “prepopulated_fields”, so the fix was changing this line to:

{% for field in adminform.prepopulated_fields %}

And it worked! Did I just fixed a bug in Django? Was it so easy? Couldn’t be. I went to #django channel and described my situation. An experienced user pointed me to contrib/admin/templatetags/admin_modify.py, where the prepopulated_fields_js tag was actually defined:

@register.inclusion_tag('admin/prepopulated_fields_js.html', takes_context=True)
def prepopulated_fields_js(context):
    """
    Creates a list of prepopulated_fields that should render Javascript for
    the prepopulated fields for both the admin form and inlines.
    """
    prepopulated_fields = []
    if context['add'] and 'adminform' in context:
        prepopulated_fields.extend(context['adminform'].prepopulated_fields)
    if 'inline_admin_formsets' in context:
        for inline_admin_formset in context['inline_admin_formsets']:
            for inline_admin_form in inline_admin_formset:
                if inline_admin_form.original is None:
                    prepopulated_fields.extend(inline_admin_form.prepopulated_fields)
    context.update({'prepopulated_fields': prepopulated_fields})
    return context

So here comes

The fact

That tag does add prepopulated_fields to the context, but only when current action is ‘add’. I was always testing my code in an editing page, so nothing happened. I used svn log/diff to see the history of changes to this tag, but it was designed this way in the beginning.

Yes it’s a feature not a bug Think about the URL. For some sites, the URL doesn’t contain any numerical or hash IDs, and the post slug may be the only identifier. If this slug is changed after editing a title (fixing a typo, for example), people who bookmarked this page won’t be able to visit it again, and search engine crawlers can’t follow the old links again. WordPress also designed post slug to work this way.

But Django team should update the documentation to reflect this design so that new users won’t be confused.

Now Chrome doesn’t need an extension to enable user scripts. It had the functionality built in. But the way it handles the scripts is quite different from Firefox’s. At first when I wanted to test if my Greasemonkey script worked in Chrome, I tried to figure out where it stored the script. That’s the way I always do in Firefox – just right click on a user script and edit, save and refresh to see it in effect right away.

Actually each time you install a user script in Chrome, it converts it into an extension, so it appears in the extension management page along with other “real” extensions. There must be a way to simplify the testing process but I don’t have any Chrome extension development experience yet.

Quote from Chrome’s official doc:

• Chromium does not support @require, @resource, unsafeWindow, GM_registerMenuCommand, GM_setValue, or GM_getValue.
• GM_xmlhttpRequest is same-origin only.

The doc must be a little outdated. Now GM_xmlhttpRequest is supposedly working cross domain, according to this recently fixed issue.

It’s bad Chrome doesn’t support @require, but here’s a cross browser solution example of injecting JavaScript libraries into the page. Taking it a bit further, and we get the following simple pattern for a cross browser user script that injects multiple third party scripts (extracted from “Google Reader Readability” script):

Cross Browser “@require”

// ==UserScript==
// @name           ???
// @namespace      http://your.tld/
// ==/UserScript==

var scripts = [
  '//cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js',
  '//www.readability.com/embed.js'
];

var numScripts = scripts.length, loadedScripts = 0;

GM_addStyle('CSS styles goes here');

function main() {
  jQuery.noConflict(); // if window.$ has been used by other libs
  // ...
}

var i, protocol = document.location.protocol;
for (i = 0; i < numScripts; i++) {
  var script = document.createElement("script");
  script.setAttribute("src", protocol + scripts[i]);
  script.addEventListener('load', function() {
      loadedScripts += 1;
      if (loadedScripts < numScripts) {
        return;
      }
      var script = document.createElement("script");
      script.textContent = "(" + main.toString() + ")();";
      document.body.appendChild(script);
    }, false);
  document.body.appendChild(script);
  console.log(script);
}

With this pattern we put all our logic into the main function. `main` won't be run in the extension scope but it'll actually be run as a piece of inline code in the page. So its code can't make use of any of the "global" variables outside of `main`. Then if making Ajax requests, it can only rely on the ordinary XMLHttpRequest object and won't be able to request cross domain resources. That could be a road blocker sometimes.

iframes

With Greasemonkey add-on for Firefox, if you specify an include pattern in the header, this script will be run no matter it is a normal page or only an iframe. But Chrome doesn't run it for the iframes!

But surely there are workarounds. A simple example of getting Gmail's menu bar which resides in an iframe:

window.frames['canvas_frame'].contentDocument.getElementById('gbz')

Note that we use contentDocument. contentWindow.document won't work in Chrome.

Other issues

Another trivial issue I encountered was that you can't set User-Agent header when using GM_xmlhttpRequest. Chrome would complain:

Refused to set unsafe header "User-agent"

For more information please check out these two scripts:

• Google Reader Unread Count in Gmail - Uses GM_xmlhttpRequest and the DOM nodes of interest are in an iframe.
• Google Reader Readability - @requires two scripts

They're short and simple, but work at least in both Firefox and Chrome.

Install latest version.

Now it seems Google hides Reader link in the “more” drop down. Or at least it’s the situation in my account. Anyway, If that’s the case, my script will swap it with the last one in the menu bar.

What’s more, It now supports Chrome! Day by day I’m getting more used to Chrome and discarding Firefox. And looking at the market share data, Chrome is also making great progress.

Click here to install. It supports both Chrome and Firefox. After it’s installed, open Google Reader and view any entry, you’ll find Readability’s button on the right of the actions bar below the entry content. Like this:

If you don’t already know Readability, you should try it. After clicking the button, the article is saved to your reading list in your Readability account, and Readability sends (after some processing to make it “readable”) it to [your name]@free.kindle.com. Then when you connect your Kindle to a WIFI spot, the articles are automatically downloaded.

Basically I utilized the JavaScript from Readability’s publisher tool. Luckily they didn’t obfuscate the code and it indeed has good readability Anyway I think Readability should develop a page which can be used in Google Reader’s native send to popup. That would be easy and better than my script, since I have to update it every time Google Reader interface changes or Readability updates their JavaScript library.

A minor issue of readability is that it doesn’t extract the redirected URL so all the articles from blogs using feedburner’s service will seem to be from feedproxy.google.com and in readability’s account you’ll see feedburner’s favicon displaying before most items.

I noticed that for my WordPress install, only the original image was available and the other options were disabled. The reason is that the PHP on my server was compiled by me myself and I didn’t compile many of the extensions. WordPress uses GD extension for thumbnail generation. But this time I didn’t recompile PHP with GD (I didn’t know how to compile GD alone as an extension). Instead I used ImageMagick and here’s the whole process.

My server setup

My server OS is CentOS 5.4 (x86_64). PHP wasn’t installed via yum but compiled with configure command:

'./configure' '--prefix=/usr/local/php' '--with-mysql' '--with-mysqli' '--enable-mbstring=all' '--with-libdir=lib64' '--enable-suhosin' '--with-zlib' '--with-mcrypt' '--with-curl'

Install ImageMagick

I used yum to install it.

yum install ImageMagick.x86_64
yum install ImageMagick-devel.x86_64

Compile imagick extension

Download the imagick extension source here.

cd imagick-x.x.x
/usr/local/php/bin/phpize
./configure --with-imagick=/usr/local --with-php-config=/usr/local/php/bin/php-config
make
make install

Since my PHP wasn’t installed in the “standard” location (and the bin dir was not in PATH) I had to use full path to `phpize`, and specify the `php-config` location in configure command. The make program uses php-config to decide where to put the compiled extension (php-config –extension-dir).

Add this line to php.ini:

extension=imagick.so

and restart web server. After that I checked phpinfo() output and saw imagick extension’s information there.

Let WordPress use imagick extension to generate thumbnails

Install ImageMagick Engine plugin. Note that you have to configure it after activation or it won’t work. With this plugin, you can even configure it to generate selected sizes only. I only wanted the thumbnail.

According to the plugin’s description, ImageMagick improves image quality dramatically over GD.