I created a WordPress site for a client who needed to support both English and Español versions of their content, which involved using a plugin called MultilingualPress that creates relationships between sites for each language.
I developed the site locally on my server, and then after they created some content, migrated it to their hosting service.
I offer support for a few web sites, and not too long ago, I created a WordPress theme for Omnis Risk (http://www.OmnisRisk.com). Actually this was just a slightly modified version of the theme that I’d done some time ago for Omnis Tools (http://www.OmnisTools.com), with some style changes to match the branding for the risk management logo.
I love Firebug, and I’m getting so I understand jQuery pretty well.
I often drop into the console and type in jQuery commands to figure out how to get things to happen on a page. For example, I was looking at a really long page of search results from Taleo that lists out all of my submissions for jobs at CACI. The problem is, that it shows the fully active submissions with the inactive ones, so it’s not very useful for figuring out what I need to follow up on.
So it occurred to me that if I could just write a couple lines of jQuery to look for the items that include “Active” in them, I could reduce this list in a way that would be meaningful for me.
So the first thing I did was go look at the page HTML to figure out whether there was something on the page I could use to separate out each row on the search page.
I fired up Firebug by right clicking on one of the items and choosing “Inspect in Firebug”.
This starts up Firebug (if it isn’t already showing) and took me to the part of the HTML that I was looking for:
So now I knew I needed to look for something that had a class of “iconcontentpanel” that contained the text “Active”. I decided to outline it with a green dashed line, so my jQuery looked like:
|
1 |
$(".iconcontentpanel:contains('Active')").css('border','3px dotted green'); |
So I flipped over to the Console in Firebug and tried running that:
But that gave me an error since there is no jQuery on the original page. But there’s this nifty little thing in the console that says “jQuerify”, and clicking that injects jQuery into the page:
So now that jQuery is available, running the script again gives me what I was looking for:
And of course I can add even more jQuery to strip out unwanted parts of the page, change format, etc, leaving me something that is more actionable:
Since last week, I’ve been immersed in coding and development education about various cloud applications.
First there were a couple of meetups about the Google Wave product that gave me a overview of some of the capabilities and requirements for developing applications around the Wave product. Google Wave is an interesting piece of social media that is a bit like chat and MediaWiki combined with WebEx.
The first talk on Monday, was about the federation server, which is the open source implementation of Google Wave. The idea is that you could have a Wave server inside your firewall that could protect your data, while also allowing for communication and interaction with other federated servers. The code is so new, that it is actually using a different protocol than the Google Wave servers are using.
This is a very early prototype, but the idea is that it will use standard XMPP servers to communicate between domains, and use typical certificate based trust mechanisms to authenticate between domains. The internal server could be implemented with rules to (for example) prevent patient data from being sent outside of the firewall in a conversation between a medical team and a provider at another institution.
The next talk on Wednesday was about writing extensions for Google Wave. These extensions are UI widgets (called Gadgets), and Robots, which add capability to Google Wave.
A Gadget is basically an HTML and JavaScript snippet that does something useful when added to a Wave. A Robot is a bit of code that interacts with the Wave as if it were one of the collaborators in the wave. The Robot can add participants, Gadgets and edit the contents of the Wave.
As an example, you could have a voting Gadget, that allows the collaborators to vote. A Robot could add the Gadget to the Wave, tally the results, and write them out to a database.
A Robot can also do interesting things like watch the wave for keywords and make changes or respond. Some of the examples are a grammar checker that corrects grammar as you type, a code formatting and highlighting robot, and the classic Eliza conversational robot.
Next was the weekend long GTUG Campout at the Googleplex. This was a heads down coding adventure where the idea was to get a workable Google application up and running in 48 hours. I signed up for the campout a while back, with the intent of learning how to work with Google Wave.
I had signed up for a Wave sandbox account when it was first announced at the Google I/O conference, so I was able to play with it a bit, but hadn’t really had time to get started with developing anything. After the talk on Wednesday, I had a pretty good overview of how to get set up, so at least I had all the bits installed to parcipate.
So Friday came and I returned to Google once again. The idea was that we form teams to develop applications using the Wave extensions, so the first task was to come up with ideas and pitch them. After the 50+ people got through with their 5 minute pitches, we networked for another hour forming teams. There were many ideas that were very similar, and for the most part these groups joined up into a combined team.
After the teams were formed, the Google team gave another talk about developing Wave extensions, which was a great review and contained some things that aren’t really documented elsewhere (since the API is still changing). The slides from that talk became my guide to building my first robot, an experience that I’ll talk about in another post about the GTUG Campout 2009.
I use Google Reader to follow industry blogs about things like PHP and Java. One of the nice things that Google Reader does, is to automagically translate the page into English when the post is in a different language.
This is very helpful especially with blogs in subjects like these, especially since the international community is very active. Reader will give you a brief translated version of the feed, and when you click the link to go to the page, it typically forwards you through http://translate.google.com so you can read the page. For the most part, this yields a very understandable page that represents the subject the author was trying to convey very well.
To set this up in Google Reader, you just set the feed to automatically translate the page by clicking on the “Feed settings” button:
Notice that with the “Translate into my Language” checked, you’ll see “Translated by Google” at the top of the page. The link to go to the post is now run through the http://translate.google.com with the appropriate languages so that you can read it, and if you click the “View original” link, you’ll see the summary in the original language.
In the above example, the feed looks like this, when I choose original language:
Clicking on the link for this post takes me to http://feeds.feedburner.com/~r/cakephp/~3/521947537/ which ends up at the blog for CakePHP & DIEVOLUTION, which looks like:
Going back to the translated version, if I click on the link to go the the page, I get redirected to http://translate.google.com/translate?sl=auto&tl=en&u=http%3A%2F%2Ffeeds.feedburner.com%2F~r%2Fcakephp%2F~3%2F521947537%2F , which gives me the nicely translated page (below).
So this got me to thinking: it should be a relatively simple thing to add a link to your page to send it to Google translate, to allow somebody to translate into their language, since it’s basically just an HTTP GET with parameters of the page, source language and destination language.
So I figured I’d try it with my blog first. I know the URL is http://blog.accuweaver.com, and my language source is EN (English). So to translate into German for instance, I need to create a URL that starts with http://translate.google.com/translate, and includes those two elements, and the language I want it translated to.
The parameters for the link are as follows:
| parameter | Used for | value |
|---|---|---|
| u | URL of page | http://blog.accuweaver.com |
| sl | Source language (English) | en |
| tl | Translate to language (German) | de |
So by putting these together, I get a link that looks like: http://translate.google.com/translate?u=http://blog.accuweaver.com&sl=en&tl=de, which when clicked will give me a German translation of my page.
Google also has a JavaScript widget that you can use to allow anybody to translate your page, which effectively builds the same sorts of URL’s for each language. You simply post some JavaScript code in your page which does some magic and places a little “translate tool” on your page (see http://translate.google.com/translate_tools?hl=en) and looks like the widget below:
I have a new open source project at VolunteerCake that is using their recently released web hosting service. This service includes the typical LAMP stack with MySQL, Apache and PHP, so I thought it would be a great place to keep a demo of the site running.
It was working fine, and then one day I noticed that the pages were being over aggressively cached. For instance, if I clicked the login button on the front page, and logged in successfully, I expected to see a “logout” button and my user name, but instead was seeing the original page. By hitting “shift-refresh”, I was able to get the right page to display, but obviously that wasn’t a good way to demonstrate the software.
During my work on figuring out my Plaxo problem, I found a really cool tool called Fiddler2 that acts as a web proxy and lets you do nifty things like see the headers on web requests. Using this tool, I was able to look at the cache headers being sent by the server which looked like:
HTTP/1.1 200 OK
Server: nginx/0.6.31
Date: Tue, 18 Nov 2008 22:02:49 GMT
Content-Type: text/html
Connection: keep-alive
X-Powered-By: PHP/5.2.6
Set-Cookie: CAKEPHP=b7pvoorvj11tb45micnfqhc4b2; path
P3P: CP="NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM"
Cache-Control: max-age=172800
Expires: Thu, 20 Nov 2008 22:02:46 GMT
Content-Length: 444
The part marked in red was the problem, the Cache-Control and Expires headers were being set to 48 hours in the future for my pages, so the browser was displaying the cached version of the page instead of asking the server for a new copy.
Knowing this, I opened a case with the SF.net support team to see if they could help figure out why the server was setting these headers for the PHP pages. I had a suspicion it had to do with the fact that Cake uses a new file extension of “.ctp” for the view files, but I really had no proof of this.
The SourceForge.net guys told me that their service had just been moved to some new servers, so it was possible this was related to that. They suggested that my application was responsible for setting the cache headers. While Cake does do some caching, it didn’t fit with what I knew. This exact same setup was working on my hosting service at http://volunteer.lctd.org/, which didn’t send those same headers.
I did some research on the Apache settings for cache, and while it is generally something you do at the server level, I found that it is possible to override these settings in the .htaccess file for a particular directory. Having had to tweak this file before to get Cake to work properly, my .htaccess file looked something like:
|
1 2 3 4 5 6 |
<IfModule mod_rewrite.c> RewriteEngine on RewriteBase / RewriteRule ^$ webroot/ [L] RewriteRule (.*) webroot/$1 [L] </IfModule> |
So what I needed to do was to tell the server not to set the Cache-control or Expires headers. After some experiments, I ended up with a new .htaccess file that looked like:
|
1 2 3 4 5 6 7 8 9 10 |
<IfModule mod_rewrite.c> RewriteEngine on RewriteBase / RewriteRule ^$ webroot/ [L] RewriteRule (.*) webroot/$1 [L] </IfModule> # Turn off Expires and set default to 0 ExpiresActive Off |
Which basically turned off the whole caching on the http://volunteercake.sourceforge.net site. Since this is just a demo application, I figured that was good enough, so I didn’t spend any more time on figuring out how to restrict the change to a specific type of file (which would be important if this were a large application).
