Archive for the ‘Web Development’ Category

Remember the Milk using Adobe Air

Monday, March 3rd, 2008

I’m a list junkie and Remember the Milk is where I get the hit…

If you ‘re the same you can download a simple Adobe Air application I put together with the Remember The Milk website inserted in an iframe. Plus a little extra.

Why bother

Doing web development work my browsers and WinXP taskbar can get messy. In a typical setup, I’ll have Firefox running(with several tabs), Internet Explorer 7, possibly 6 too, an IDE EG Aptana Studio or Editplus, probably a few explorer folders and 4 console windows too.

Yes messy I know.

Now you can imagine what that taskbar looks like, and in the midst of this boiling cauldron, in a Firefox tab will lurk http://www.rememberthemilk.com/. It can be a pain to find it.

Wouldn’t it be great if I could keep the http://www.rememberthemilk.com/ seperate from the rest of the Firefox tabs? Perhaps with a distinctive easy to locate icon too.

Ideally I would have http://www.rememberthemilk.com/ running in system tray, not visible in the taskbar and it would disappear back to the system tray when I minimise it, waiting ready to be restored again at short notice…. if only…..

Da Ding!!

Here it is….

BTW the systemtray feature is WinXP only. Perhaps a dock version will appear shortly

Install guide and ‘how to’ on Subversion client for WinXP

Thursday, February 14th, 2008

Guide to install and use Subversion client for Win XP.

  1. Download Subversion for WINXP
  2. Instruction on installing and using Subversion

New mproved version of the JQuery drop down menu now available.

Thursday, January 31st, 2008

Hello,
New improved version of the JQuery drop down menu now available.

It contains the extra features requested:

  • Order the pages yourself by using the Page menu order feature.
  • Put a link into into the menu for you blog.
  • Works with javascript turned off.
  • Make the the parent of a drop down menu clickable or not.
  • Find out more at my original post.

Enjoy!

Google Gears example using Digg API

Wednesday, November 14th, 2007

Google Gears API is a tool kit which provides JavaScript APIs to allow web application to work off-line.

Three ‘core’ JavaScript APIs are provided:

LocalServer A local cache html, JavaScript and image files. Also provides mapping from on-line URLs to off-line URLs.

Database Google Gears comes with an SQLite database which is accessible via the Database API.

WorkerPool I have not used this, but the Google Gears description states, it can “Make your web applications more responsive by performing resource-intensive operations asynchronously”.

I’ve put together an example which uses the LocalServer and Database JavaScript APIs.

Try out the Google Gears Example using the Digg API

Try out the following steps

  • You’ll be asked to install Google Gears first, if you don’t already have it installed
  • Fetch some Digg story titles from the drop down list, these story titles are saved into a local database provided by Google gears on you machine.
  • This is where the magic happens! On the right hand side click capture.
  • The document is now captured and available for off-line browsing. Go ‘off-line’, so in Firefox click ‘File’, ‘Work Offline’.
  • View the URL again, and low and behold you will see the same web page even though you are Off-line. You’ll also notice a list of the titles that you had fetched before you went off-line.
  • You can Erase the the document from Google Gears with the ‘Erase’ button too, and empty the database with ‘Empty’ if you wish.

And that’s that! Two out of three of the Google Gears demonstrated. Remember to put your browser back on-line when you’re done.

A couple of caveats

  • Google Gears does not do server side scripting. The functionality that you wish to make available off-line must be implemented via JavaScript.
  • Adding Google Gears functionality to an existing web application will require additional code in your application. How much code depends on the level of off-line functionality you want to achieve. You will need to insert logic into your app to check it’s off-line/on-line state and to tell it what to do if it’s off-line as well as when it’s on-line.

Jquery Flash bug: Flash movie disappears on drag in sortable feature from interface plugin

Wednesday, November 7th, 2007

Please view the ticket I’ve submitted to jQuery for the most up-to-date news on this.

The ticket reads as follows:

I have found what I think is a bug with the interface/sortable plugin for jquery.

To explain my scenario. I am using the jquery and the sortable plugin from interface. The sortable items are divs as normal that contain object and embed tags to a flash swf file.

In FF when I drag the divs around the flash movie appears smooth and as you would expect.

However in IE 6 and IE7 when I drag the div around the flash movie will disappear and reappear. It will be replaced by the white rectangle that seems to get stuck and leave a trail and lingers for a split second. When I stop sorting/dragging the div the flash movie reappears..

I’ve made an example available, try drag around the Flash game here, when in IE .

Any ideas with this one?

Powered by ScribeFire.

How to use a Rails App with HTTPS

Wednesday, October 31st, 2007

Summary

We need to provide HTTPS support to test your rails application on your local server. Sensitive data such as passwords are submitted during login and register stages and we want to encrypt the transmission of this data between the client browser and the server. The HTTPS protocol proves this security.

For developing we currently run the Mongrel server. To achieve HTTPS we need to put an Apache server in front of this Mongrel server. The Apache handles the SSL encryption, certificates etc and acts as a type of proxy to the Mongrel rails server.

The end result of the following steps is a Rails app that works with HTTPS.

Install SSL enabled Apache

Install an SSL enabled Apache. The fastest and most convenient method I’ve found is the XAMPP installer.

It’s a one click installer. Download and run. SSL enabled Apache is one of the programs installed that’s what we’re interested in. Ignore the rest (PHP etc).

WINXP

http://www.apachefriends.org/en/xampp-windows.html

MAC OSX

http://www.apachefriends.org/en/xampp-macosx.html

Or if you’re feeling brave install and configure an SSL enabled Apache yourself.

NOTE: mySQL is also installed with XAMPP. However if it causes confilict with your exisintg mySQL you can turn it off via the provided admin panel/command line and use your existing mySQL.

Configure Apache to work Mongrel

Having insalled the XAMPP you will have an Apache directory conf that contains the Apache configuration files.

Edit the Apache file conf/httpd.conf.

Uncomment the following lines:

LoadModule proxy_module modules/mod_proxy.so

and other proxy modules mentioned.

Also uncomment

LoadModule headers_module modules/mod_headers.so

In the Apache file conf/extra/httpd-vhosts.conf edit the following:

Make sure this line exists

NameVirtualHost *:80

Add the following vhost

<VirtualHost *:80>

ServerName Mydomain

ProxyPass / http://localhost:3002/

ProxyPassReverse / http://localhost:3002

</VirtualHost>

To make the above vhost work for us we also need to edit the hosts file in WinXP. Mydomain

WinXP

C:\WINDOWS\system32\drivers\etc\hosts

127.0.0.1 Mydomain

And on the MacOSX, add the same to the /etc/hosts

Start the Apache server

At this point you will have Apache server set up. Start the Apache server.

Test your Apache is running, browse to http://localhost, you’ll get the Apache XAMPP page with some useful tools.

Start the mongrel server

At this point you will have Apache running so start Mongrel

ruby script/server -p 3002

Now browse to http://Mydomain

Browsing to the URL http://Mydomain takes you to localhost (127.0.0.1) via hosts file you edited and there an Apache vhost checks the URL, and sees that it is Mydomain then passes it onto the Mongrel server running http://localhost:3002

Enable HTTPS

Configure Apache to use SSL and configure Mongrel to know about it

Edit the Apache file conf/extra/httpd-ssl.conf

Inside the vhost <VirtualHost _default_:443>

Comment out

DocumentRoot “C:/xampp/htdocs”

Put in the following

ServerName Mydomain:443

ProxyPass / http://localhost:3002/

ProxyPassReverse / http://localhost:3002

RequestHeader set X_FORWARDED_PROTO “https”

At this stage start your development environment is set up. Just start Apache, and Mysql then run your rails app and browse to http://Mydomain to view it.

Now requests to https:// urls in Rails app should work.

Set up Rails to work with SSL protocol

The following steps were required to set up the rails app to work with the SSL protocol.

Make sure that the SSL plug-in for Rails is installed.

ruby script/plugin install ssl_requirement

Next edit the ApplicationController, add the line ‘include SslRequirement ‘

class ApplicationController < ActionController::Base

include SslRequirement

Now you can set policies for individual actions in each of the controllers.

EG

In the AuthController we want the login and the authenticate action accessible via SSL only.

class AuthController < ApplicationController

 

ssl_required :login, :authenticate

Now requests to http://Mydomain/login will redirect to https:// Mydomain/login

The End.

References

Mongrel and Rails behind Apache 2.2 and SSL

http://blog.innerewut.de/2006/06/21/mongrel-and-rails-behind-apache-2-2-and-ssl#comment-form

“Agile Web development with Rails”, Page 612

UPDATED: How to remove object html markup using javascript in IE6 and IE7

Tuesday, October 16th, 2007

I recently posted on this topic.

OK forget that.

It will remove the quicktime player, but the audio will stay playing. Only in IE of course.

You’ll need to use Javascript to stop the quicktime movie.

The best guide I’ve found to do this.

SEO TIP #2: Use keywords in your titles

Wednesday, September 26th, 2007

By keywords here I mean words that people will type into their search engine and by title I mean the words inside the tags in the HTML of the webpage.

Search engines use the words in the title to determine the relevancy of the page to a search. Use specific, descriptive keywords to improve the relevancy.

Try think from the perspective of the person doing the search when phrasing those titles. That’s it for SEO TIP #2.

Good luck!

in_place_editor_field method in Ruby on Rails

Saturday, September 1st, 2007

I kept getting this error with attempting to use the Ruby on Rails in_place_editor_field method.

Called id for nil, which would mistakenly be 4—if you really wanted the id of nil, use object_id

It was driving me nuts! This method is supposed to attach some script.aculo.us javascript to some text, to allow the text to be edited by clicking on it. Not the nasty error above.

Much too much googling later returns of a solution…

“If you’re receiving this error while using the in_place_editor_field method, chances are you’re iterating through a list of objects and you’re passing the variables to the method incorrectly.

To fix this problem, set the current iteration as an instance variable and you should be fine.

For example:

<% for person in @people %>
<% @person = person %>
<%= in_place_editor_field :person, :name %>

Further explanation.

Moblogging script SIMSI

Thursday, August 30th, 2007

The Simsi is a moblog script written in PHP and developed by Marc Rohlfing at www.rowlff.de/simsi/

It came in handy for me when I was completing a master’s thesis at DCU. For part of our project we needed to parse incoming email and MMS mobile phone messages and extract the contents and attachments. This user generated content we received from the 3G mobiles phones (sponsored by 3Ireland, thanks!) would subsequently create a presentation. a dynamic story board of user experience of you will. The SIMSI moblog code helped us to understand how to achieve this collection part of the project.

While working with the script I added support for 3GPP mobile video and fixed some email date formatting issue.

Unfortunately I did not hear back from Marc Rohlfing , the original author of the script when I tried to contact him via email. Recently the link to http://www.rowlff.de/simsi went dead.

So I’m putting this up here as there may be others out may benefit from it as we did.

Short description

It’s a blog script an you can update by sending email/MMS messages from your phone(or not) to your email address.

Long Description

You send email/MMS messages containing text/images/video from your phone to a designated email address.

The moblog script will open that mailbox, extract the messages and save the attachments. The messages and attachments save saved into an xml file and a webpages containing the messages is presented in the browser.

Install

Extract and copy the directory containing the script to your webserver.
Download

Configure

In the index.php set following:

$MAIL_SERVER = “mail_server_here”;
$MAIL_USERNAME = “your_email_username”;
$MAIL_PASSWORD = “your_email_password”;

That’s it.

Now send a MMS to the email address. And browse to the location of the index.php

Happy moblogging!!