chuyeow.wtf

Firefox quick tip: view images in a new tab quickly

2009-11-25T19:13:21+00:00

A mini-tip on viewing images quickly in a new tab in Firefox. Useful for web devs who want to look at the URL of an image quickly.</p>

As an example, here's the Youtube webpage</a> of the owner of Maru the Cat</a>:</p>

</p>

To open the thumbnail image of Maru in a new tab, right-click the image, and then middle-click</strong> the View Image</strong> item from the context menu:</p>

</p>

It should open up in a new tab:</p>

</p>

You can also do the same for background images (middle-click View Background Image</strong> from the right-click context menu).</p>

New in Rails: ActiveResource timeouts and why it matters

2008-04-22T22:25:57+00:00

If you've ever used ActiveResource or for that matter, coded anything that involves interacting with a remote API, you've probably had the misfortune of having that API go down or become unresponsive. The experienced old geezers would already have forseen the problem and set a timeout on those API calls. For the rest of us, it's a good time to get acquainted with the idea of fail-fast</a> and how no response is better than a slow response</em>.</p>
So what happens when the API you're accessing via ActiveResource or Net::HTTP</code> (or whatever, really, so long as there's a network socket involved!) becomes unresponsive?</p>
Unfettered outbound remote connections can kill your server</h3> ActiveResource (or Net::HTTP</code> or whatever you're using) would block while waiting for the API to return. What did we learn about blocking IO in Operating Systems 101? That your process or thread gets stuck waiting for a response that's what. So now your Mongrel/Thin/Ebb/X web server process basically stuck waiting for a response from an API that might return a response in 30 seconds, or maybe it'll never return at all. It won't be long before all your web server processes get blocked and its time to "kill dash nine" (kill -9</code>) some processes and bring out the 500 error page. Yes, your server has been incapacitated and your website is now basically offline.</p></div> </p>
Timeouts and you</h3>
If you're using Net::HTTP you can easily safeguard yourself against errors like this by setting a timeout on the socket connection. Like so:</p>
def fetch_something_from_some_api(uri) http = Net::HTTP.new(uri.host, uri.port) http.read_timeout = timeout response = http.start { http.request(Net::HTTP::Get.new("#{uri.path}?#{uri.query}")) } response.is_a?(Net::HTTPSuccess) ? do_something_with(response.body) : nil rescue Timeout::Error logger.warn("Timeout accessing #{uri}: #{$!}") nil rescue logger.warn("Error accessing #{uri}: #{$!}") nil end</code></pre></p> Take note that you really do need to explicitly rescue from the Timeout::Error</code> (or Interrupt</code>) since it's a child of the Interrupt</code> class and not a StandardError</code>.</p> Any good client library should also allow you to specify a timeout on the socket connection so read the API documentation.</p>So what's this about ActiveResource?</h3> So back to ActiveResource: Michael Koziarski was kind enough to commit my 2 patches (this</a> and this</a>) to ActiveResource so now on edge Rails</a>, you can do this:</p> class Person < ActiveResource::Base self.site = 'http://api.people.com:3000/' self.timeout = 5 end</code></pre> This sets the timeout to 5 seconds on the underlying Net::HTTP</code> instance that ActiveResource uses. The default timeout (to be exact, the read_timeout</code>) for Net::HTTP</code> is 60 seconds</strong> on most Ruby implementations (that includes MRI). That's far too long if your ActiveResource call is in a public-facing controller!</p> If you are using ActiveResource anywhere and haven't safeguarded your application with a timeout, I think it's a good idea to fix it by using edge Rails or at least applying the patch</a>!</p> The 2nd ActiveResource patch</a> introduces the ActiveResource::TimeoutError</code> exception that you should rescue from whenever you make an ActiveResource call. When this happens, it's up to your application to decide what to do (like show a placating we're sorry message). At least your application is still able to do something!</p>
Generating migrations gets easier - Rails 2.0 a feature a day #6 2007-12-24T16:58:07+00:00 You may not have noticed this yet, but Rails 2.0 has a new convenient syntax for generating ActiveRecord migrations. Go ahead, run the migration generator with script/generate migration</code>. I'll wait.</p> Yup, you can now specify the columns you want to add in your migration by passing attribute/type pairs to the migration generator. Ergo,</p> script/generate migration AddMoreToAnime episodes:integer licensed:boolean</code></pre> will generate a migration like so:</p> class AddMoreToAnime < ActiveRecord::Migration def self.up add_column :animes, :episodes, :integer add_column :animes, :licensed, :boolean end def self.down remove_column :animes, :licensed remove_column :animes, :episodes end end</code></pre></p> This ties in pretty nicely with the syntax for the model generator (script/generate model</code>), which also accepts attribute pairs. Tiny change but "it's all about consistency".</p> For the geeks among you, check out the related changeset</a> and ticket</a>.</p> About the contributor, Pratik Naik</h3> Pratik Naik</a> (WorkingWithRails profile</a>), probably better known as lifofifo or just lifo, is an active Rails contributor and can be found on #rails-contrib</a> and #rubyonrails</a> nearly 24/7. Almost everyone who's used Rails has used code that lifo has written. Oh, and lifo also won one of the monthly Rails Hackfests</a>.</p> He also keeps a pretty good blog</a> where he posts mostly on Rails hacking and tips.</p> Concatenate your stylesheets and JavaScripts in 3 seconds - Rails 2.0 a feature a day #3 2007-12-12T23:25:39+00:00 I don't think I need to explain how concatenating your 5 stylesheets and 12 JavaScript files into single files</a> each makes your webpages load faster. Unless you're using multiple asset hosts (Rails 2 allows for multiple asset hosts</a>), then it becomes tricky to say for sure which method is better, but I digress.</p> There're a bunch of really useful plugins that help you bundle your JS and CSS files, most of them offering minifying/packing of JS and stripping of comments and whitespace in CSS as well. I was a big fan (still love it) of Asset Packager</a>, but newer plugins like PackR</a> and Bundle-fu</a> work great too.</p> With Rails 2.0 though, unless you want the minifying/packing/comment-stripping features, you can do away with installing a packager plugin. Remember your trusty javascript_include_tag</code> and stylesheet_link_tag</code>? They now accept a :cache</code> option:</p> # :cache => true creates a cached javascript named all.js. <%= javascript_include_tag :all, :cache => true %> # This becomes: # <script type="text/javascript" src="/javascripts/all.js"></script> You can name your javascript too, by passing a name instead of true.</h1> <%= javascript_include_tag 'jquery', 'swfobject', 'application', :cache => 'base' %></p> This becomes:</h1> <script type="text/javascript" src="/javascripts/base.js"></script></h1> Same deal for stylesheets...</h1> :cache => true creates a stylesheet named all.css.</h1> <%= stylesheet_link_tag :all, :cache => true %></p> This becomes:</h1> <link href="/stylesheets/all.css" media="screen" rel="Stylesheet" type="text/css" /></h1> You can name your stylesheet like for javascript_include_tag.</h1> <%= stylesheet_link_tag 'yui/reset-fonts-grids', 'application', :cache => 'styles' %></p> This becomes:</h1> <link href="/stylesheets/styles.css" media="screen" rel="Stylesheet" type="text/css" /></h1> </code></pre></p> Of course, this only takes place if caching is turned on (ActionController::Base.perform_caching</code>), which is on by default in the production environment and off in the development environment.</p> For those who want to look at some code, check out the changeset</a>.</p> About the contributor, DHH</h3> Well, DHH</a> hardly needs any mention. David has_one Wikipedia entry</a>. Nice little touch on this new feature though, I love the convenience.</p> I promise, like I'd said before</a>, to cover contributions by someone less "mainstream" in the next Rails 2 "feature a day"</a> blog post.</p> Firefox 3, Beta 2007-11-20T17:23:57+00:00 Firefox 3 Beta 1</a> is out! Check out the pretty sweet list of changes</a>.</p> </div> </p> If you want to try it, you'll probably want to run Firefox 3 and Firefox 2 at the same time</a>. Only this time you should remember to rename Firefox 3 so that it doesn't override your install of Firefox 2.</p> I'd blogged about some of the changes previously if you care for some screenshots of some</em> of the new features (Mozilla Links covers a good number of new Firefox 3 changes</a> too):</p> Resumable downloading: users can now resume downloads after restarting the browser or resetting your network connection.</a></li> supports Growl for notifications of completed downloads and available updates.</a></li> Easier password management: an information bar replaces the old password dialog so you can now save passwords after a successful login.</a></li> Optimized Open in Tabs behavior: opening a folder of bookmarks in tabs now appends the new tabs rather than overwriting.</a></li> </ul> New in Rails: a request profiler for profiling your app 2007-10-26T10:01:30+00:00 Jeremy Kemper</a> (aka bitsweat) committed</a> a very useful tool into the Rails trunk not too long ago: a request profiler</a>! It's a human-friendly wrapper script around the ruby-prof library</a>, a nice ruby code profiler, that lets you run multiple requests against a URI in your application and get a detailed code profile report in text and HTML.</p> Wanna try it out? Update your vendor/rails to at least revision 8016, run rake rails:update</code> to copy the new script/performance/request</code> script into your app's script</code> directory, install the ruby-prof gem (sudo gem install ruby-prof</code>), then let it loose on your app.</p> The options are pretty simple, just pass the script the URI you wanna profile. There're options for specifying how many requests you want to process, and for profiling POST requests, there's one for specifying a POST fixture file.</p> USAGE: script/performance/request uri [options] -u, --uri [URI] Request URI. Defaults to http://localhost:3000/ -n, --times [0000] How many requests to process. Defaults to 1000. -b, --benchmark Benchmark instead of profiling --method [GET] HTTP request method. Defaults to GET. --fixture [FILE] Path to POST fixture file --open [CMD] Command to open profile results. Defaults to "open %s &" -h, --help Show this help</code></pre> At the end of the run, you get a text and HTML report with the methods called and the time spent in them. If you haven't seen a code profile before, it looks something like this:</p> </div> </p> Very nice stuff! It's extremely</em> convenient to have profiling like this built into Rails itself - personally I've not even run any profiling on my Rails code because it seemed like a hassle (though I do run httperf benchmarks and take note the number of requests per second). With code profiling, you can easily see which parts of your code are the bottlenecks and optimize away - it's a godsend that it's so easy to do it in Rails!</p> Anyway, this is all still new stuff I imagine and subject to change (and improvements), but still very exciting for those of us who are hitting performance bottlenecks in our Rails apps (and are not already doing code profiling).</p> New in Edge Rails: helper for creating form labels 2007-09-25T10:40:55+00:00 Edge Rails now comes with a helper for creating form labels</a>, so in your views, instead of doing this:</p> <% form_for(:user, @user, :url => user_path(@user)) do |f| -%> <label for="user_login">Login</label></strong> <%= f.text_field :login %> <end></code></pre> where the <label></code> is given a for</code> attribute of user_login</code> (since the convention for form input ids is {MODEL_NAME}_{ATTRIBUTE_NAME}</code>), you can instead now do:</p> <%= label(:user, :login) %></code></pre> Quite a bit neater. Makes it easier to explain to beginners how they should use <label></code>s appropriately since the syntax is similar to the other form helpers. Now give your <label></code>s proper for</code> attributes if you're not doing so already.</p> This makes plugins like this form label helper plugin</a> obsolete.</p> Dugg? No problem with WordPress 2007-09-13T18:53:25+00:00 An old post I wrote on a spoof MMORPG</acronym> named "Outside"</a> was Dugg</a> not too long ago and I was quite pleased to find that my server and the blogging software (WordPress</a>) that I use was handling the load extremely well. Quite obviously I was getting more hits in a day than entire months:</p> </div> </p> My setup is a Virtual Private Server (VPS) with 256MB RAM hosted at SliceHost</a> and this blog is served off Nginx</a> and PHP FastCGI processes to handle PHP scripts. The wonderful (because it just works and is really easy to setup) WP-Cache WordPress plugin</a> keeps a cache of pages that's swept at logical times (i.e. whenever there are any updates or comments).</p> I may be a Rails/merb fanboy, but this awesome piece of blog software that can stand up to the Digg Effect</a> with ease is great</strong>. WordPress FTW</code>!</p> Don't trust web apps (or how Google Reader and my ISP conspired to lose all my feeds) 2007-08-17T18:33:11+00:00 About a month ago, I logged in to Google Reader to see a shocking thing - all my subscriptions were gone and I was subscribed to some feeds that I've never heard of.</p> </div> </p> I would say I'm a pretty heavy Google Reader user, checking my several hundred subscriptions several times a day, so it was pretty distressing. I posted a thread at the Google Reader Google Group</a> (the link doesn't work now because they've moved the Google Group somewhere else for some reason) and several other people responded that they were seeing the same weirdness.</p> I had the same problem, and here's the really weird part: I got YOUR feeds! If you look at the top of the page you can see the account you're supposedly logged in with. Well, I saw your account there. And this was before I read this message. I also saw some other names every so often. Right now it says email censored</em>.</p> Maybe it's some weird mix up with the ISP. Do you use SingNet?</p></blockquote> Some time later I started seeing other people's accounts:</p> </div> </p> The problem affected only Singnet</a> (a major local ISP) users in Singapore (about 7 other users in Singapore using Singnet responded with the same problems). No one really knew what the problem was and neither the Google Reader team nor Singnet (someone sent them an email) responded.</p> My guess was Singnet started caching Google Reader at a proxy and somehow managed to bypass all the credentials that was needed to modify any feed subscriptions. Sounds like a pretty nasty security bug to me.</p> The aftermath:</p> Google Reader no longer has my feed subscriptions (I didn't manage to recover them so it's still in the sad state of having only 1 feed subscription to some UK property shite).</li> I've manually rebuilt my OPML file (containing my feed subscriptions).</li> I'm now using NewsFire</a>. It's not decentralized so I can't sync it between machines, which really sucks since I have 2 primary machines, but I'm wary of using online feed readers right now.</li> I regularly export my OPML file and check it into Subversion.</li> I'm looking for a reliable decentralized feed reader once again (having used Bloglines</a> and of course, Google Reader</a> prior to the catastrophe).</li> </ul> Adium themes use plain old XHTML, CSS and JS 2007-07-28T14:07:18+00:00 Just a quick note of something I found out while reading Transcending CSS</a>: all the themes</a> (message styles, contact list styles, etc.) in Adium</a> are crafted with our old friends XHTML, CSS and JS. I opened up a few AdiumXtras</a> to see for myself and true enough, <div></code>s and CSS rules make up the style. Very smart decision by the Adium developers.</p> Some of the world's hottest startups - Bezurk on Business 2.0 2007-07-27T18:15:18+00:00 Business 2.0</a> recently published an article on the world's hottest startups outside the US</a> and Bezurk was picked</a>. Nice to know that ;)</p> </a></div> </p> YSlow - Firefox extension that helps to optimize your web pages 2007-07-26T13:24:51+00:00 YSlow</a> is a Firefox extension that works with Firebug</a> to grade your web pages' performance and gives you advice on how to fix any problems. Awesome. It has JSLint</a> built into it too. And yes I got a big freaking F</strong>. Via Arun</a> (IRL</acronym>).</p> MySQL command line "secret" 2007-07-19T18:02:25+00:00 Tom Preston-Werner</a> (of Gravatar and Chronic fame) wrote about this neat MySQL command line "trick"</a> where instead of ending your SELECT statements with the usual semi-colon, using a "\G" gives you a very readable output.</p> mysql> select * from locations where location_code = 'SIN' limit 1\G *************************** 1. row *************************** location_code: SIN location_name: Singapore Changi Apt multi_airport_city_code: SIN location_type: A location_sub_type: A country_code: SG state_code: active: 1 latitude: 01.22.00N longitude: 103.59.00E 1 row in set (0.10 sec)</code></pre> Very useful, especially when SELECTing multiple fields where the output becomes unfit for visual consumption (you know what I mean, just go SELECT some stuff in your MySQL command line and you'll see if you don't).</p> God and your web server 2007-07-18T23:43:38+00:00 God</a> is a new process monitoring Ruby framework with a rather apt name (no, it's not that</em> God</a>). The config files looks something like that:</p> God.meddle do |god| god.watch do |w| ... end end</code></pre> Interesting code to write. And feels safe too to have God watching over your mongrels. Oh and you can use it to clean up stale mongrel PID files without patching mongrel_rails</a>. Right now I use monit</a> a lot and it's really rather unDRY to have repeated configs for each mongrel on the server (is there a better way of doing this in monit?). God would be able to DRY it up.</p> Better JSON output from Rails with the Jsonifier plugin 2007-07-11T12:46:38+00:00 Update: Edge Rails now does whatever Jsonifier does (and more). Check out my blog post on JSON serialization maturity in edge Rails</a>. This means that this plugin is virtually obsolete if you're using edge Rails.</ins></p> If you've tried to output JSON from your Rails applications before, you'd probably have noticed how inadequate it all seems. Let's look at the kind of output (pretty-printed for easier reading) you get from calling to_json</code> on your typical User model:</p> { attributes: { id: 1, name: "Konata", awesome: true, created_at: "07/01/2007" } }</code></pre> Some of the common problems developers who write applications that speak JSON have with this are:</p> The attributes</code> part is often unnecessary cruft when consuming ActiveRecord objects as JSON.</li> There's no obvious way to control which attributes are shown in the JSON (e.g. you may want to hide private or lengthy attributes). The way to workaround this is either to write your own to_json</code> instance method for your ActiveRecord model, or to use a Rails plugin (like acts_as_json</a>) or a gem</a>.</li> Including 2nd (or higher order) associations is tricky (as above, you can achieve this by defining your own to_json</code> instance methods).</li> </ul> Under the hood of the current ActiveRecord#to_json</h3> The to_json</code> method for ActiveRecord objects falls back on using that defined in ActiveSupport's JSON classes</a>. The way it's currently done, there are a bunch of JSON encoder classes defined for various types - when you call to_json</code> on an ActiveRecord object it simply uses Object#to_json</code></a>.</p> By the way, see that created_at: "07/01/2007"</code> bit in the example above which is the JSON output for a Date attribute? That's in MM/DD/YYYY format. Yup, 1st July 2007 not 7th January 2007 you "rest of the world you". Ouch, but at least you can use JavaScript's Date.parse()</code> on it directly as detailed in this patch</a>. And before you ask, yes, Date.parse()</code> doesn't understand the YYYY-MM-DD format.</p> Can has Rails patch?</h3> So about 2 days ago, I wrote a Rails patch to boost ActiveRecord#to_json with an options hash</a>. Yep much like what you can do with ActiveRecord#to_xml</code></a>.</p> I hope it gets committed into the core some day. I mean, gosh, isn't Rails all about Web 2.0 mashups. It even has that fancy render :json</code> thing. I do believe JSON output needs to be treated more seriously in Rails rather than the half-hearted attempt at JSON encoding. No? Well, if the patch doesn't get accepted I'll still have my plugin</a> (see below</a>).</p> Anyway, let's see some examples:</p> Some examples, see?</h3> Assuming User and Post models where User has_many Posts:</p> david = User.find(1) david.to_json # {id: 1, name: "David", awesome: true, created_at: "07/01/2007"} </code></pre> No more attributes</code> cruft!</p> :only</code> and :except</code> work the same way that as for ActiveRecord#to_xml</code>:</p> david.to_json(:only => :name) # {name: "David"} david.to_json(:only => [:id, :name]) # {id: 1, name: "David"} david.to_json(:except => :created_at) # {id: 1, name: "David", awesome: true} david.to_json(:except => [:id, :created_at]) # {name: "David", awesome: true}</code></pre> You can use the :methods</code> options as well to include any methods on the object.</p> david.to_json(:methods => :permalink) # {id: 1, name: "David", awesome: true, created_at: "07/01/2007", permalink => "1-David"} david.to_json(:methods => [:permalink, :interestingness]) # {id: 1, name: "David", awesome: true, created_at: "07/01/2007", \ # permalink => "1-David", :interestingness => 666}</code></pre> The :include</code> option lets you include associations.</p> david.to_json(:include => :posts) # {id: 1, name: "David", awesome: true, created_at: "07/01/2007", \ # posts: [{id: 1, author_id: 1, title: "Welcome to the weblog"}, \ # {id: 2, author_id: 1, title: "So I was thinking"}]}</code></pre> :only</code>, :except</code>, and :methods</code> works on the included associations as well:</p> david.to_json(:include => { :posts => { :only => :title } }) # {id: 1, name: "David", awesome: true, created_at: "07/01/2007", \ # posts: [{title: "Welcome to the weblog"}, \ # {title: "So I was thinking"}]}</code></pre> Of course, 2nd level (and higher order) associations work too:</p> david.to_json(:include => { :posts => { \ :include => { :comments => { \ :only => :body } }, \ :only => :title } }) # {id: 1, name: "David", awesome: true, created_at: "07/01/2007", \ # posts: [{comments: [{body: "1st post!"}, {body: "OMGWTFBBQ!"}], \ # title: "Welcome to the weblog"}, \ # {comments: [{body: "Don't think too hard"}], \ # title: "So I was thinking"}]}</code></pre> Please do give any feedback at the Rails patch for ActiveRecord#to_json</a> or here. I wanna know what you feel about adding this functionality into the Rails core!</p> Jsonifier plugin</h3> I've rolled the patch into a plugin: Jsonifier. The Jsonifier Trac</a> is at http://trac.codefront.net/jsonifier/</a>.</p> Git repository:</p> git://github.com/chuyeow/jsonifier.git</code></pre> Github project page:</p> http://github.com/chuyeow/jsonifier/</code></pre> To install the plugin:</p> ruby script/plugin install git://github.com/chuyeow/jsonifier.git</code</code></pre> or git clone</code> the repository manually into the vendor/plugins</code> directory.</p> A note on valid JSON</h3> The JSON Rails spits out by default is not strictly valid JSON since the JSON specifications</a> require keys to be double quoted. To get strictly valid JSON, add</p> ActiveSupport::JSON.unquote_hash_key_identifiers = false</code></pre> in your environment.rb (or in the Rails initializers directory if you're on edge). See my blog post on how to get strictly valid JSON from Rails</a> for more info.</p> Prototype 1.5.1 is baaaaad for Safari 1 and 2 users 2007-06-21T19:15:00+00:00 Read the bug fix announcement</a>. Upgrade! This was causing extremely puzzling crashes in Safari on Macs (pre-Safari 3 beta) on one of our applications</a> and I'm glad (in some ways) that the problem lay with the Prototype library.</p> Bezurk featured on Channel NewsAsia 2007-06-20T18:31:30+00:00 The company I work for was featured on a short "Surf Time</a>" segment on Channel NewsAsia</a>'s TV channel. Catch the Bezurk Surf Time video on YouTube</a>.</p> How to get strictly valid JSON from Rails 2007-06-20T11:47:59+00:00 Update: Edge Rails (and the forthcoming Rails 2.0) will emit only valid JSON. Read JSON serialization of ActiveRecord objects reaches maturity for more details</a>.</ins></p> If you've worked with JSON</a> long enough in Rails, you'd probably have noticed that the JSON the convenient Object#to_json</a> method spits out is not strictly JSON-compliant (according to the RFC 4627</a>, which states that object keys should be "strings", and "strings" should be double-quoted). Here's an example of what to_json</code> produces when called on an ActiveRecord instance:</p> { id: 6589, code: "SIN", name: "Singapore", type: "City" }</code></pre> Notice how the keys (id, code, name, type) are not surrounded with double quotes. While this is generally not a problem if working purely in Rails, since Prototype and Rails itself can decode JSON like this, you'd run into problems with more finicky JSON parsers and decoders. PHP's json_decode</a> is a perfect example - it demands that the object keys be double-quoted (or it fails to decode your JSON, silently returning NULL).</p> For a while I couldn't figure out why Rails was doing it and Google was of no help</a>. I decided to look at the Rails code since this can't be a huge oversight on the Rails community, can it? Sure enough, I found the "solution" in the encoding portion of the ActiveSupport::JSON</a> module:</p> # When +true+, Hash#to_json will omit quoting string or symbol keys # if the keys are valid JavaScript identifiers. Note that this is # technically improper JSON (all object keys must be quoted), so if # you need strict JSON compliance, set this option to +false+. mattr_accessor :unquote_hash_key_identifiers @@unquote_hash_key_identifiers = true</code></pre> Doh! All that's left to do is to put ActiveSupport::JSON.unquote_hash_key_identifiers = false</code> in your environment.rb</code> (or in the Rails initializers directory if you're on edge) and your Rails app will start producing strictly valid JSON (and is friendlier to other non-Rails applications):</p> { "id": 6589, "code": "SIN", "name": "Singapore", "type": "City" }</code></pre> unquote_hash_key_identifiers</code> was added in changeset 5486</a>.</p> Get your Rails tests results via Growl notifications 2007-04-01T14:25:05+00:00 I've been using Autotest (part of the ZenTest</a> package) while testing my Rails applications and never thought of asking for more. After all, getting my tests (well, specs</a> actually) run automatically whenever I make a relevant change and</em> having diff</code>-level granularity on which tests Autotest re-runs is pretty damn useful enough. That is, until I came across this RSpec and Autotest with Growl notifications blog entry</a> (on JavaBlogs</a>, no less!)</p> How're these for red</span>/green</span> test results?</p> Tests (specs) passing!</strong></p> </div> </p> Tests (specs) failing :(</strong></p> </div> </p> Much better! Now I don't have to glance at my terminal window (I recently realized how painful it is while coding with a single monitor) and get unobtrusive notifications.</p> Unfortunately, this is Mac-only (or wherever Growl</a> is supported). I had to follow links to several blog entries to get it setup nicely (see Growl + Autotest Rails with Zentest 3.4.0</a> and Green goodness with autotest + growl</a> - those are my references).</p> Basically you need Growl</a> installed, and the growlnotify</code></a> tool in your path. growlnotify</code> can be found in the Extras/growlnotify</code> directory in the Growl dmg (for example, after you've mounted the Growl-0.x.x.dmg, you can find it here: /Volumes/Growl/Extras/growlnotify</code>). Just copy the growlnotify</code> executable into your path (I copied it into /opt/local/bin</code> since I'm using Darwin Ports and don't have a /usr/local/bin</code> directory). Verify it's running by entering:</p> growlnotify -m "Testing growlnotify" Boo Ya!</code></pre> into a terminal window. You should see a Growl notification.</p> Now, you need to create an Autotest hook by creating an autotest init file in your home directory named .autotest</code>, and copy this chunk of text in:</p> module Autotest::Growl def self.growl title, msg, img, pri=0, sticky="" system "growlnotify -n autotest --image #{img} -p #{pri} -m #{msg.inspect} #{title} #{sticky}" end Autotest.add_hook :ran_command do |at| output = at.results.last.slice(/(\d+)\s.*specifications?,\s(\d+)\s.*failures?/) if output =~ /[1-9]\sfailures?/ growl "Test Results", "#{output}", "/Data/Pictures/Icons/rails_fail.png", 2, "-s" else growl "Test Results", "#{output}", "/Data/Pictures/Icons/rails_ok.png" end end end</code></pre></p> Replace the paths to the pass/fail icons (as you can see, mine are in /Data/Pictures/Icons/</code>) with the correct paths to any images you want to display (grab them from Green goodness with autotest + growl</a> or roll your own). You can change the parameters passed to growlnotify</code> however you want (use growlnotify -h</code> to see what parameters it acccepts). The pri</code> parameter sets the priority level of the message (test failures come up with a priority of 2, hence the red background of the Growl notification). Passing -s</code> to sticky</code> tells Growl to keep the notification sticky. If you're running your (auto)tests on a remote server (e.g. in a Continuous Integration system), you can even use growlnotify</code> to send remote notifications (see the -H</code> switch) to your development workstations!</p> Lovely! I love you, MacBook Pro serial no. W86280NAVWW (despite your broken DVD drive and you randomly freezing up on me when you get too hot).</p> Setting up svnsync-ed (mirrored) SVN repositories on Ubuntu (part 2 of 2) 2007-03-31T23:12:31+00:00 Note: if you haven't already, you may want to read part 1 of this article</a> first.</ins></p> Phew, and that was all the work you needed to do to migrate your Subversion repository to another server. We've barely touched that other server that we wanted to use for mirroring the repository!</p> "Bootstrapping" your mirror SVN server for svnsync</h3> This mirror SVN server also needs Subversion 1.4.x installed, so go ahead and do the (almost) same things we've done in part 1</a> to get Subversion installed. You should be able to use the .deb</code> package generated by checkinstall</code> on your main Subversion server to install Subversion 1.4.x on the mirror SVN server. Just scp it to the mirror SVN server and install it (dpkg -i subversion-1.4.3.deb</code>).</p> With Subversion installed, create a new Subversion repository (using svnadmin create</code>, remember?), but don't</em> load the repository dump like we did on the main SVN server in part 1</a> (of course, since we are going to be mirroring the repository!).</p> Setting up svnsync to mirror your repository</h3> First, create a SVN user for svnsync to use - let's call this the 'svnsync user'. The easiest (and best) way to do this is edit the svnserve.conf and passwd files:</p> conf/svnserve.conf</strong></p> # Uncomment this line. password-db = passwd </code></pre> conf/passwd</strong></p> svnsync = secret </code></pre> This gives read and write access to the 'svnsync user'. The svnsync</code> program will authenticate with our repositories as this user via the svn://</code> protocol (i.e. via svnserve).</p> Next, we need to create a pre-revprop-change</code> hook for the destination repository. The svnsync documentation</a> has a detailed explanation. Create a hooks/pre-revprop-change</code> file under your destination repository's directory.</p> #!/bin/sh USER="$3" if [ "$USER" = "svnsync" ]; then exit 0; fi</p> echo "Only the svnsync user can change revprops" >&2 exit 1</code></pre></p> Make it executable, and then initialize the sync:</p> chmod +x hooks/pre-revprop-change svnsync init file:///var/svn/repositories/destination_repos svn://source.host/source_repos</code></pre> Don't worry, this only sets up the sync - there's no actual data copying yet. Syncing your repository data may take a long time if you have a big source repository, so I suggest using nohup</code> to run the code overnight (or something), or at least saving the output in a log. Either way, the command to start the sync is:</p> svnsync sync --username svnsync file:///var/svn/repositories/testsync/</code></pre> You should start seeing svnsync committing in changes from your source repository. Instant gratification (well, almost)! Should your svnsync process get aborted or killed, you can remove the hanging lock by running:</p> svn propdel svn:sync-lock --revprop -r 0</code></pre> Setting up 'on-the-fly' syncing</h3> So now you have your source and destination repositories synced, but what happens when you start committing changes to your source repository? Nothing! That's because svnsync is merely a passive syncing tool (meaning you have to run it to sync, instead of it knowing when to sync automatically).</p> There are two ways you can setup 'real-time' syncing:</p> Use cron</code> (or a similar scheduler) on the destination repository server. Add something like this to your crontab</code>:</p> * * * * * /usr/local/bin/svnsync --non-interactive sync svn://source.host/source_repos</code></pre> This basically runs svnsync on your destination repository server every minute to pull down any changes to your source repository. </li> Add a post-commit hook to the source repository. I found this svnsync entry by Paul Querna</a> that has a sample post-commit hook. If I recall correctly I tried it but it didn't work for me, so I settled on using cron to sync up my repositories.</li> </ol> Things that I skipped</h3> There're some things that I skipped over while writing this, mainly to do with SVN authentication.</p> If you're accessing your repository via the svn+ssh://</code> protocol, you've to manage the (group) permissions of the repository files in the filesystem appropriately (basically the repository should be group writable by your users). chmod</code> and chown</code> are your friends, as is NIS</acronym> (or something similar) to manage your users. I use these steps to create a new SVN repository that gets access via the svn+ssh://</code> protocol:</p> sudo mkdir /var/svn/repositories/funky_project mkdir /tmp/funky_project mkdir /tmp/funky_project/trunk mkdir /tmp/funky_project/branches mkdir /tmp/funky_project/tags sudo svnadmin create /var/svn/repositories/funky_project sudo svn import /tmp/YourProjectNameHere file:////var/svn/repositories/funky_project -m "Initial import." rm -rf /tmp/funky_project sudo chown -R www-data:www-data /var/svn/repositories/funky_project sudo chmod -R g+w /var/svn/repositories/funky_project </code></pre> As you can see, my SVN users are part of the www-data group, and the repository directory is made group-writable. </li> The svn://</code> protocol has authentication configuration files in the conf/</code> directory of your repository. The SVN book has a section explaining how to configure authentication</a> for svnserve</code>.</li> Apache httpd can be used to expose your SVN repositories via the WebDAV protocol. This allows for the very commonly seen http://</code> repository URLs (especially for Open Source projects). Configuration is a little more involved and you would probably have to install Apache from source as well. The SVN book has the details</a>.</li> </ul> Wrapping up</h3> I hope someone found this entry useful - I know I could have used one when I was setting up Subversion and svnsync.</p> Setting up svnsync-ed (mirrored) SVN repositories on Ubuntu (part 1 of 2) 2007-03-29T01:34:36+00:00 This is a 2-part journal on setting up migrating and upgrading a Subversion repository, and then using svnsync to mirror the newly created repository. (Part 2</a>)</p> Initial setup</h3> Ever since Subversion</a> 1.4 was released</a>, I'd been eying the new svnsync</a> tool because we had a single repository that was not, erm, really</em> backed up (we had daily server backups and occasional manual repository dumps but that was it). svnsync promised to make repository mirroring simple, and after doing some repository migration and upgrading, I can assure you it really does make things easier than any other (more manual) repository backup solutions I had seen before. This is a walkthrough of how you can upgrade your pre-1.4 SVN</acronym> repositories to 1.4.x, and setup svnsync to mirror your repositories. It's going to be very biased to Ubuntu but I'm sure you can translate any Ubuntu specific steps to your favorite distros.</p> Here's our initial setup:</p> A pre-1.4 (it was version 1.2.3) SVN repository that needed to be upgraded and</em> migrated to another server.</li> 2 cleanly installed Ubuntu 6.06 LTS</acronym> VPSs</acronym>, one of which is the intended target for the repository migration. The other would mirror the new 1.4.x repository (using svnsync).</li> </ul> An un-installable Subversion 1.4.x?</h3> I wish I could have simply ran sudo apt-get install subversion</code> and have Ubuntu pull down the latest 1.4.x .debs. Unfortunately, the version of Subversion in the Ubuntu apt-get repository is still 1.3.1 (which doesn't have svnsync). If anyone knows a reliable way to install Subversion 1.4.x via apt-get, let me know! I looked around for a good edge sources.list but came back empty-handed.</p> I balk at installing stuff from source because I never did figure out how to easily clean out the stuff that gets installed. All thanks to this reluctance, I went digging around and found checkinstall</a>. This thing is awesome</strong> - I wonder why I didn't manage to find it earlier.</p> What checkinstall</code> basically allows you to do is, instead of running the usual make install</code> after the usual configure</code> and make</code> steps, it creates a Debian package (it also does RPMs and Slackware packages) for you that is easily un-installable with dpkg</code>, and then proceeds to install the files just as it would have for any other deb.</p> On Ubuntu it's really easy to install checkinstall</a>, just:</p> sudo apt-get install checkinstall</code></pre> Now, you no longer should type 'make install' - always use the 'checkinstall' command instead:</p> ./configure make sudo checkinstall # instead of "make install"</code></pre> checkinstall</code> will ask you a bunch of stuff but you can just go with the defaults for most of them - I did name my packages 'XXX from source</strong>', like 'Subversion 1.4.3 from source' so it's easier to check which packages are checkinstall</code>-generated with a simple grep to dpkg -l</code>.</p> checkinstall</code> generates a .deb (Debian) package before it actually installs your software (Subversion, in this case). It should tell you right at the end of its installation process about where to find this .deb and how to uninstall your newly installed (from source!) package (something like dpkg -r subversion-1.4.3</code>). Don't delete this .deb yet as we will be using it to install Subversion 1.4.x on our mirror SVN server.</p> Installing an un-installable Subversion 1.4.x on Ubuntu</h3> Now, blessed with our new checkinstall-granted powers, we can install Subversion from source without any qualms. Before we start, be sure to purge any existing Subversion packages you may have installed (do note that if you're using any packages that depend on the official Ubuntu Subversion packages, you may run into library version problems).</p> dpkg -l | grep svn dpkg -l | grep subversion sudo dpkg --purge subversion sudo dpkg --purge libsvn0</code></pre></p> Now, it's time to get the source. Get it from the official Subversion website</a>. Look for the source code download - the file should be something like this: http://subversion.tigris.org/downloads/subversion-1.4.3.tar.gz</a>. Remember to get SVN dependencies (something like this: http://subversion.tigris.org/downloads/subversion-deps-1.4.3.tar.gz</a>) as well as these are needed for access to 'http://' scheme SVN repositories. If you want to use Subversion to connect to a server via a http:// or https:// URL, you will require these dependencies (more specifically, the Neon library).</p> Use something efficient like wget, curl or Axel</a> (love</em> Axel) to get the sources on the server where you want to install Subversion. Unpack them to the same directory. configure. make. checkinstall</strong>.</p> tar zxf subversion-1.4.3.tar.gz tar zxf subversion-deps-1.4.3.tar.gz cd subversion-1.4.3 ./configure # Be sure to read the INSTALL file for any options you may want to set (such as SSL) make sudo checkinstall</code></pre> If you get a warning "configure: WARNING: we have configured without BDB filesystem support" during your configure</code> step, you'll get by just fine. Unless you specifically want your Subversion repositories in Berkeley DB format, we can ignore the warning (Subversion will use FSFS filesystem for your repositories) - see FSFS notes</a> and Choosing a Data Store</a> if you want to make an educated decision.</p> Anyway, now with a brand new Subversion 1.4.x installed, we are finally ready for the real work - migrating your Subversion repository!</p> Dumping and importing a repository</h3> Dumping a Subversion repository is dead easy:</p> svnadmin dump /path/to/repository > repository_name.dump</code></pre> Depending on how big your repository is, you could end up with a pretty large dump file. gzip it, then scp it over to your new server, then gunzip it. Use svnadmin to load the repository dump.</p> cd /var/svn # I like to keep my svn repositories under /var/svn mkdir repository_name svnadmin create repository_name svnadmin load repository_name < /path/to/repository_name.dump</code></pre> If you have a good pipe between the source and destination servers, you can do this in a one-liner:</p> svnadmin dump /path/to/repository | ssh -C [IP/domain of destination server] svnadmin load /path/to/new_repository</code></pre> Of course, all this dumping would require a temporary suspension of any repository write actions otherwise you're just going to have an inconsistent dump - just send out an email to your fellow developers and disable svn access.</p> Setting up access to your new repository</h3> Now, you have a Subversion repository that is only accessible via the local filesystem (file:// 'protocol'), which isn't very useful. We'll need to setup remote access. Your Subversion repository can be accessed in a variety of ways, including:</p> svnserve</a> standalone daemon (svn://)</li> svnserve</a> with inetd</code> (svn://)</li> svnserve</a> over a SSH tunnel (svn+ssh://)</li> over the HTTP protocol (http:// and https://)</li> </ul> The svnserve documentation</a> details how to deal with the first 3, and setting up http:// and https:// access to your protocol is really a subject that deserves its own tutorial. Try the SVN book</a> or Google.</p> Personally I prefer svn+ssh:// access for internal projects since it allows me to unify authentication for my Subversion repositories with UNIX user accounts. Be wary of an angry cadre Windows developers though, since they need to take quite a good number of steps to setup public key authentication and integrate it with their svn clients on Windows machines. Integration with TortoiseSVN is quite a pain, though my Windows-using colleague at work found these useful: Putty and TortoiseSVN</a>, Using Cygwin, Keychain, SVN+SSH and TortoiseSVN in Windows</a>.</p> svn:// access</h4> I also expose my repositories via svn:// (as we'll see later, this is useful for allowing access to a svnsync user without messing around with any UNIX user accounts) and use the xinetd</code> daemon (apt-get install xinetd</code> on Ubuntu to install) to launch svnserve process. If you're taking this path, create a file (I name it 'svn') in /etc/xinet.d</code> to tell xinetd about svnserve.</p> In /etc/xinet.d/svn:</p> service svn { port = 3690 socket_type = stream protocol = tcp wait = no user = www-data server = /usr/local/bin/svnserve server_args = -i -r /var/svn }</code></pre> Notice that I needed to use the full path to svnserve (do a which svnserve</code> to get the full path, making sure this is the 1.4.x version that you just installed). The server_args</code> parameter also bears some explanation. The -i</code> option tells svnserve to use inetd (xinetd is a variant of inetd, sorta). The -r /var/svn</code> option tells svnserve to only expose repositories below that path. This basically translates your repository at /var/svn/my_cool_project</code> to be accessible via svn://your.hostname/my_cool_project</code>.</p> svn+ssh:// access</h4> Accessing your repository this way basically logs in to the host server of your repository over SSH, invokes the svnserve process, and accesses your repository in a very file://-like manner. What this means is that your repository path is taken from the root of your filesystem. An example: a repository located in /var/svn/my_cool_project</code> would be available at svn+ssh://your.hostname/var/svn/my_cool_project</code>. For this reason I often symlink /svn</code> to /var/svn</code> (to get repository URLs like svn+ssh://your.hostname/svn/my_cool_project</code> instead).</p> Relocating working copies</h3> Now, all your working copies are still pointing to the old Subversion server - no need to fret, a simple svn switch</code> fixes things:</p> svn switch --relocate [from] [to]</code></pre> Replace '[from]' and '[to]' with the source and destination Subversion repository URLs.</p> Remember to stop access to your old server so no one is making commits to the wrong place.</p> Setting up svnsync</h3> I'd intended to write this entire piece in one blog post, but I'm running out of steam at this point. In Part 2</a>, we'll actually setup svnsync for some repository mirroring goodness!</p> DRYing up link_to_remote for degradable URLs 2007-03-24T23:20:08+00:00 I like to keep my links in my Rails applications that make AJAX requests degradable in non-JavaScript browsers so I often find myself doing this:</p> link_to_remote 'Show details', { :url => { :action => 'show', :id => post.id } }, { :href => url_for({ :action => 'show', :id => post.id }) }</code></pre> This allows me to get HTML links like so:</p> <a href="http://www.example.com/posts/show/123" onclick="...">Show details</a> </code></pre> instead of the usual (if the :href parameter is not specified):</p> <a href="#" onclick="...">Show details</a> </code></pre> You've probably already noticed the duplication right there in the :url</code> key of the 2nd parameter (options) and the :href</code> key of the 3rd parameter (HTML options) that litters my Erb</acronym> templates where link_to_remote calls are prevalent. I got tired of editing and copying and pasting the url_for</code> parameters so I monkey patched Rails' PrototypeHelper class in ActionPack (actionpack/lib/action_view/helpers/prototype_helper.rb</code>).</p> To do this, I had to replace Rails' link_to_remote</code> method definition. Thanks to living and breathing code examples in Rails that do this, I was able to promptly come up with this module that I placed into the lib/</code> directory of my Rails application and require</code> it in my environment.rb</code> file.</p> module Bezurk #:nodoc: module ActionView #:nodoc: module PrototypeHelperExtensions def self.included(base) base.alias_method_chain :link_to_remote, :degradation end def link_to_remote_with_degradation(name, options = {}, html_options = {}) html_options[:href] = url_for(options[:url]) if !html_options.has_key?(:href) link_to_remote_without_degradation(name, options, html_options) end end </code></pre> end end</p> ActionView::Helpers::PrototypeHelper.send(:include, Bezurk::ActionView::PrototypeHelperExtensions)</code></pre></p> The modification to link_to_remote</code> itself is dead simple: it checks for the non-existence of a :href</code> key in the html_options</code> parameter and sets the :href</code> option in the html_options</code> parameter hash to the url_for</code> the :url</code> value in the options</code> parameter hash. It then calls the original link_to_remote</code> to do what it does best.</p> I've submitted a (trivially simple) patch to Rails in my opened ticket #7904 - DRY up link_to_remote for degradable URLs</a>. Let's hope this makes it in so I can kill my monkey patch!</p> Validate that favicon 2007-03-10T13:50:55+00:00 The Favicon validator</a> ensures that you have a correctly created favicon</a>. If you're wondering why your favicon works in some browsers but not in others (like IE), it probably has an incorrect format.</p> </div> </p> I also learnt from validating my favicons that you can actually place more than 1 version of the favicon image into the .ico file (it seems to be a container for these images rather than being an image itself).</p> Oh, and the same site also has a very handy Favicon generator</a> - I used this to fix some of my favicons, which used to be GIFs renamed with the .ico file extension. Very handy. </p> Firefox tips sharing session at WebSG meetup 2007-03-03T03:07:20+00:00 Kevin</a> has uploaded a video of my session</a> on Google Video - it's kinda grainy and really soft.</ins></p> I was at the 2nd WebSG</a> (Web Standards Group Singapore) meetup (read about the recap of the meetup</a>) on Wednesday (28 Feb 2007) where I hosted a short session on some Firefox tips. It's all thanks the urgings and encouragement of Lucian</a> (the organizer) that I finally got down to publicly sharing my Firefox knowledge ever since I wrote Firefox Secrets</a>.</p> </div> </p> I was asked to blog about this (since I didn't have any presentation slides), so here it is, for those of you who missed anything in my mumbling or frantic keystrokes.</p> Keyboard shortcuts you should know</h3> Note: Mac users should replace Ctrl with the Cmd key for any of the keystrokes listed below.</p> Ctrl-L</strong> puts your cursor in the address bar, Ctrl-K</strong> puts your cursor in the search bar.</li> Ctrl-T</strong> opens a new tab and puts your cursor in the address bar, but</li> I forgot to mention this during the session, but I personally prefer using Ctrl-L or Ctrl-K, typing in the new URL or search query, and hitting Alt-Enter</strong> open the new page or search result in a new tab - it just feels more accessible than Ctrl-T. Most people I observe still use Ctrl-T though.</li> Ctrl-Shift-T</strong> re-opens closed tabs. Keep hitting it to reopen more closed tabs in your history. This is a big</em> time saver. Newly built into Firefox 2.0.</li> Ctrl-Tab</strong> and Ctrl-Shift-Tab</strong> brings you to the next and previous tab. If you're having trouble remembering both, just remember that the usual convention is a Shift does the reverse. So all you need is to remember Ctrl-Tab, and adding a Shift modifier does the reverse (i.e. goes to the previous tab instead of the next).</li> Ctrl-F</strong> brings up the Find bar, and you can start typing in whatever you want to find on the page and</em> in any input fields. Use Ctrl-G</strong> and Ctrl-Shift-G</strong> to go to the next and previous occurences respectively. The Find bar is good, but...</li> I forgot to mention (as Zul</a> mentioned to me after) during the session that Quick Find</strong> is much better. Just hit /</strong> and start typing as you would for the normal Find bar, and the Quick Find bar will go away after several seconds. Much better in most cases than the Find bar which likes to stick around until you close it. And why is this important? Because the Find bar takes up screen real estate, especially for those of us using wide screens.</li> </ul> Getting rid of the close button on all tabs</h3> I've been told how annoying Firefox 2.0 is when it insists on putting a close button on each tab.</p> </div> </p> Accidental closing of tabs when you try to select them is one big complaint. Well, you can turn it off and go back to the good olde Firefox 1.5 days of a single close button on the extreme right of the tab bar. Enter about:config</strong> in your address bar, filter for browser.tabs.closeButtons</strong>, double click on the preference entry that shows up, and change the value from the default of 1, to 3. If you don't want the close button on the right of the tab bar, enter a value of 2 (this assumes you're going to close tabs with either Ctrl-W or middle-clicking on the tab - this is my prefered setup).</p> Backing up your profile</h3> MozBackup</a> is all you ever need if you use Windows exclusively. This neat little (Windows-only) application backs up your profile into a single file - all you need is to use a very simple wizard. And of course, you can restore your profile just as easily. I loved this when I was still using Windows.</p> Like I said, people using other operating systems can easily DIY - just read Mozilla's official documentation on Firefox profiles</a>. You're probably using either Mac OS X or some Linux distro - you can do this without any hand-holding ;)</p> What about backing up extensions?</h4> Some people asked me during and after my session about backing up extensions. FEBE</a> is one extension you can look at unless you use a Mac (I tried the beta version that supports Mac OS X, but gave up when I couldn't get it to use the correct binaries for zipping and unzipping.)</p> My personal take on backing up extensions: don't</em> back them up. I prefer to dump a list of extensions (I use the Extension List Dumper extension</a>) that I have installed and just re-install them again. This is no big chore for me now since I have significantly fewer extensions installed than back in the day. I just like starting clean, after having had bad experiences with restoring extensions from backup before.</p> Still, if you really want to back up your extensions, I say just go ahead and see if it works (MozBackup and FEBE should work).</p> Profiles and "why is my Firefox so damn slow?"</h3> This is one thing I had planned to mention but I got kinda threw off kilter when the slowness of the wireless internet connection made me worried about quitting Firefox (didn't want to quit Firefox, load up another profile, only to find that it'd take another 5 mins to get my demo tabs loaded again).</p> Anyway, some questions I often get is, "why is my Firefox so slow?" and "why does Firefox use up so much RAM/CPU?" The first thing I suspect is a busted profile. Whenever I experience intolerable slowness in my Firefox setup, I dump and restore my profile into a newly created profile, minus all the tab history information (and of course, never restoring backed up extensions). Sometimes I even start clean new profiles, importing only bookmarks. You'll very likely notice immediately that Firefox is back to its old speediness. And if anything happens, you still have your old profile with you.</p> I'm not that certain of what exactly causes Firefox to get too slow over time, but my suspicions lie with:</p> Firefox saving browsing history in all the bazillion tabs you have open - that's a lot of data to be carrying around</li> broken/bad extensions</li> a busted profile </li> </ol> Profile management for productivity</h3> Firefox hides its Profile Manager from you. You can access it by passing the -profilemanager</strong> switch to your Firefox executable. For Windows users, it's actually --profilemanager</strong>.</p> </div> </p> The Profile Manager is really handy for people who need to remove distractions. For me, I setup different profiles for work and for play so I don't become distracted the "play" tabs I have open while I'm working (I'm beginning to like the Tab Groups extension for segregating tabs</a> more though). Also really handy for setting up clean profiles for running user demos (I setup a WebSG profile for my presentation and installed specific extensions I wanted to talk about) - don't really want to have your naughty browser history showing up in some autocomplete heh.</p> Some extensions I dig</h3> I also demoed some extensions that I find essential.</p> Download Statusbar</a> for unobtrusive downloads.</li> All-in-One Gestures</a> for easily accessible Back and Forward gestures when you happen to have your hand on the mouse. Like I said, I don't use any of the other gestures because they all require memorization (I use too much of my memory storing keyboard shortcuts).</li> Super DragAndGo</a> for drag and drop searching. Great time saver when you are doing online research.</li> Web Developer toolbar</a> for its convenient Disable Cache, browser resizing, and HTML validation shortcut (Ctrl-Shift-A).</li> UrlParams</a> for easy viewing and editing of GET or POST parameters.</li> And of course, Firebug</a> - godsend for web developers, web designers, and especially AJAX developers like us</a>.</li> </ul> Oh, and Mousepose</a> was the application I used to get my keystrokes to show up on the screen. It's simple yet extremely helpful for presentations, though I probably should have used the mouse spotlight feature more. Oh well, I did just buy the license for it a few hours before the meetup - goes to show how unprepared I was heh.</p> It's late and I'll blog more on the event and the people I met another day.</p> Finally, Bezurk and news.com.au co-brand is up and running 2007-02-25T01:01:18+00:00 It was a few weeks later than planned, but finally (actually, about 3 days ago), we</a>'re up on the News.com.au Travel section</a>.</p> No thanks to a CSS bug in IE6</a>, we were delayed by a week. The last thing we expected was a CSS bug hanging IE6 with all the JavaScript we were pushing out, but yeah, well, it was. At least now my conscience is clear - everything works nicely in IE6, IE7, Firefox, Safari and Opera.</p> Determining web page size - the wrong way 2007-02-05T20:03:27+00:00 Got an email today that disputed web page sizes I reported (diplomatically telling me to get my facts right):</p> Regarding the size, if you save the homepage as webpage complete you can get the size of the iframes files individually.</p></blockquote> <teenage-angst>Ick... Learn to use Firebug</a> or a Web Page Analyzer</a>. Or anything else that does better than saving the page from a web browser.</teenage-angst></p> Essential Firebug video for web developers 2007-01-28T14:41:45+00:00 If you're doing web development or design of any sort, you have to check out Joe Hewitt's talk on Firebug at Yahoo!</a> - download the movie or watch it online, just make sure you watch it.</p> If you aren't already using Firebug</a>, this will convince you. If you are, you'll probably find some gems in there that you didn't know before. I didn't know that you could log events to elements on the fly, or press the up and down arrow keys to adjust numerical values (such as margins and paddings), or edit the values in the box model layout diagram, or hover over variable names to see a tooltip of their values in the JavaScript debugger, or conditional breakpoints.</p> Now if only it were able to detect JavaScript syntax errors that cause an entire JS file to be ignored by the browser. </p> BarCamp Singapore Jan 2007 2007-01-21T00:21:21+00:00 I just got back from BarCamp Singapore</a> a few hours ago. I was only vaguely familiar with the Rules of BarCamp</a> prior to this, and actually only found out about the event from Choon Keat</a> (of RssFwd</a> fame - check it out if you haven't already) 2 days ago.</p> Anyway, props to the organizers for putting this together (especially the free BarCamp t-shirts from Yahoo!). Personally, I felt the icebreaker game took up too much time that could have been used for the sharing sessions - the tech track of sessions were crammed up towards the end of BarCamp.</p> </div> </p> Notably, Harish Mallipeddi</a>, who interned at Bezurk</a> for a couple of months, shared with us an introduction to Django</a> together with some working code on a site he is working on. I didn't know a whole lot about Django before and was impressed that there is a "free" admin application for Django applications. We (Choon Keat, Harish, and I) had a small debate over Django's templating system (briefly, Django has it's own templating system for its views, whereas Rails ERB is basically Ruby code mixed in HTML). To this day I am still convinced that PHP is already a templating language despite my old Smarty card-carrying days</a>. Relating back to the Django templating system, Choon Keat and I didn't like the idea of having to learn to use a templating language when the base language itself (Ruby or Python) would suffice. Obviously Python syntax wasn't suitable for web designer consumption so Django had to come up with its own templating language.</p> Michael from PetrolWatch</a> showed us some flashy scriptaculous effects on his site and demoed the Ruby on Rails-inspired CakePHP</a>. It's a nice framework if you had to use PHP and performance is a concern (it's true, Rails apps run more heavily than PHP scripts, and the difference in performance is very clear in servers with minimal resources). But the lack of a good testing framework was discouraging. Still, I must say I'd have used it (or a similiar framework) if Rails didn't exist or if I was tied to using PHP for web development.</p> Choon Keat</a> showed the non-believers the power of Rails' script/console</code> as well as the flexibility of Ruby in allowing developers to make their own extensions to existing classes (aka "who needs hooks from God?"). I probably should have stepped in and showed some basic Rails migrations stuff that would have impressed (hopefully) the Django and CakePHP fanbase (all 2 of them) - but my laptop was running out of battery (and I was shy).</p> Oh and I saw a good number of Macs there, and at least 3 laptops running a Linux distro of some sort. Cool.</p> Job Ad: Java Web Developer for Bezurk 2006-09-22T20:37:35+00:00 We</a>'re on the lookout for a Java Web Developer (ad on Craigslist)</a>. I managed to get "Ruby on Rails" into the ad copy somewhere heh - it gets kinda lonely working in a development team of Java heads. Anyway, we're looking for a great Java developer to work with us in Singapore - if you're up for it, send us your resume</a>. I would really like to get someone with some interest in Rails development to work together with on some upcoming (Rails) projects (you know, like after all the real work is done).</p> Unobtrusive IFrame shim - a half solution 2006-08-01T19:33:50+00:00 Something that really bugged me when using YUI Calendars</a> and YUI AutoComplete</a> widgets was how IFrame shims are currently being managed in libraries and home-brewed code (we use IFrame shims in many places as well). YUI Calendars doesn't have a built-in IFrame shim, YUI AutoComplete has its own, and we use our own IFrame shim library.</p> For the uninitiated, IFrame shims are basically IFrames dynamically inserted (hence "shim") under overlaying DOM elements so that any <select> elements do not show through in IE 5.5 and above. A common example would be dynamically generated divs that float on top of drop downs in forms, such as the Yahoo! Calendar widget example below.</p> </div> </p> So anyway, the thing that's bugging me is the awkwardness in inserting IFrame shims where they are needed and the duplication of unnecessary code to create, show, and hide the IFrame shims. Ideally, I'd like to do something like this to attach IFrame shims and forget about them:</p> var iframeShim = new net.codefront.IFrameShim('elementId');</div> Or the conceptually nicer way of attaching IFrame shim "behavior":</p> net.codefront.IFrameShim.attachShim($('elementId'));</div> No need for manually displaying and hiding the IFrame shim, polluting display logic and event handlers. I don't care how all that shimming is done nor should I have to. I don't want to have to call displayShim() whenever I display a floating div and hideShim() when I hide it. It should be smart enough to display the shim when the overlay is showing and to hide when the overlay is no longer visible.</p> As it is, I am seeing code duplicated in many places to manage these IFrame shims, and that's a bad smell</a>. Ahh ahh, before I go further, I am completely aware that I could be completely off-base and such a miraculous time-saver of a library already exists. If so, I want to know!</p> Trying to fix this problem, I came up with this bit of JavaScript</a>, which you shouldn't bother reading. The idea is to allow me to do this:</p> var shim = new com.bezurk.widget.IFrameShim('myFloatingCalendar'); shim.manualShim = false; shim.manualDeshim = false;</div> And I have a 'myFloatingCalendar' element that's automagically shimmed whenever it's displayed. (The shim.manualShim and shim.manualDeshim are defaulted to false, and are shown purely for explanatory purposes.)</p> There is one problem though - I can't figure out an elegant way to "listen" to the display and hide events of the element that's shimmed. The way I've done it is to rely on Prototype's PeriodicalExecuter</a> (extended to support a stop() method) to poll for the visibility of the element. Naturally this is an ugly hack and causes noticeable flicker.</p> I've looked at custom events (YUI and Dojo have very nice</em> event handling libraries) but can't see how to hook this up unobtrusively. If you have a suggestion or a solution, I want to hear it!</p> The first rule of Maintenance is - you do not talk about Maintenance 2006-07-05T17:57:02+00:00 What would Tyler Durden do if he had to bring down his Web 2.0 service for maintenance?</p> Someone in the office thought this message</a> would be appropriate.</p> Wufoo - Cool AJAX form builder 2006-03-26T17:45:41+00:00 Wufoo</a> - try the demo</a>. Very impressive (strange how I find this more impressive than Ajax Write).</p> Simple anti-comment spam measure 2004-11-05T17:47:18+00:00 Thanks to Patrick Strang</a> who pointed me to Steven Geen's simple anti-comment spam measure</a> for MovableType, I managed to stem the current flow of "Please approve this comment" emails flooding my inbox. This has been happening since last Saturday! Argh! Why are they doing this even when everything goes into the moderation queue?</p> Anyway, it's so simple to get this into WordPress - just edit wp-comments.php and wp-comments-post.php to add the field to the comment form (see below) and die() when the correct "letter of the day" isn't entered. (Though die()ing isn't the most elegant way, but WordPress does this for the other fields as well.)</p> </div> </p> Check out the comment form</a> if the picture above is too small. Sorry to have to put you commentors through this, but it's really for my sanity. At least it isn't one of those randomly-generated graphical thingies that really ensures you are human (or an equivalent intelligent lifeform).</p> MySQL 4.1 production-ready 2004-10-28T11:27:39+00:00 MySQL Version 4.1 Certified as Production-Ready</a>. Still waiting for the MySQL 4.1.7</a> ebuild (relevant bugs - MySQL 4.1.6 ebuild</a>, request to include mysql 4.1.6 in portage and add ~amd64</a>).</p> How "well designed, popular and accessible" is your website? 2004-10-27T23:58:28+00:00 You'd probably already have heard of or seen Silktide Sitescore</a> that purports to "rate how well designed, popular and accessible your website is". A while back it used to tell me I was a criminal for having an inaccessible website. I got sub-5 scores and a close-to-zero score for accessibility. I was surprised but attributed it the script doing something wrong somewhere (it is automated after all and Cynthia</a> did tell me my site was OK in terms of accessibility).</p> Recently, after reading Ingoal's post on an update to his score</a>, I tried out Silktide again and to my surprise, got a respectable 8.6. (Ingoal's</a> a fellow Advisor at SitePoint</a> - this guy knows</em> computers.) After some fixing some XHTML-validation borkage, I eked out a 10 for accessibility and managed to get a 9.2 overall score (and a 9.3 once). That puts me in the top 10 (true to form</a>, I'm right at the bottom at number 10 below SitePoint</a>).</p> </div> </p> I'm not sure it means anything except that it goes to show what a poor boy I must be to keep posting about rankings and scores. Perhaps it's my low self-esteem working here.</p> But I have to say again, thank you</strong> for your donations to Firefox and keep donating whether you do so via my donation link or not! (What am I talking about? Read more</a>. This too</a>.)</p> Portions of Spamx plugin for Geeklog minimally based on MT-Blacklist Updater 2004-10-24T14:07:52+00:00 Part of the Spamx plugin</a> for Geeklog</a> (a PHP blogging script) proclaims to be based on MT-Blacklist Updater</a> (MassDelete.Admin.class.php</a> and Import.Admin.class.php</a>). I hardly see the similarity though.</p> LiveSearch hack for WordPress 2004-10-24T00:06:57+00:00 I found this old link on LiveSearch</a> that I'd wanted to implement here but never got around to doing so until now. It's really quite a bit of a hack right now, with most of the code coming from the LiveSearch page on the Bitflux Blog wiki</a> and with direct calls to PHP's MySQL functions to get it to work with WordPress.</p> Instead of replacing the default WordPress search box, I decided to add another one instead (that you can see right now on the left just below the "standard" search box) and label it a "LiveSearch" box. I do this because livesearch.js seems to crash Firefox randomly on occasion (as mentioned on Bitflux blog</a>). Besides, it's hardly fully done, as it currently only does simple SQL LIKE matching on post titles, and the CSS is somewhat inelegant.</p> Anyway, what I did was to add livesearch.js to the WordPress index template, and added the LiveSearch form.</p> <form id="livesearchform" method="get" action="https://chuyeow.wtf/livesearch.php"> <input autocomplete="off" id="livesearch" name="q" onkeypress="liveSearchStart()" type="text" /> <input id="submitted" name="submitted" value="yes" type="hidden" /> <div id="LSResult" style="display: none;"><div id="LSShadow"></div></div> </form></div> Next, I hacked out a livesearch.php script (source listing for livesearch.php</a>) that performs the relevant query on WordPress' wp_posts table (may be differently named on your installation) and returns an XML document containing the matching post titles and their URLs. The tricky part was to map the matching post titles to their URLs (since I'm using SEO-friendly permalinks). All it took was to include the wp-blog-header.php file and have the get_permalink(ID) function return the correct URL.</p> The other tricky part involved preventing searches in the LiveSearch box from going to the livesearch.php page, because that'd return an XML page that the user would hardly know how to proceed from. Adding a hidden form field was a quick hack, but it works just fine and redirects the user to the search results page that WordPress spews.</p> // If the LiveSearch form was actually submitted (as opposed to being requested // via a XMLHttpRequest, we redirect to the standard WP search page. if( isset($_GET['submitted']) && $_GET['submitted'] == 'yes' ) { header('Location: ' . get_settings('siteurl') . '/?s=' . $_GET['q']); exit; }</div> Well, that's it for now. It feels really like a hackjob but it works just fine. Perhaps someone could roll this up into a WordPress plugin or we could get LiveSearch as a feature in WordPress in future (as Serendipity</a> already does).</p> WordPress hosting up for grabs 2004-10-17T20:28:03+00:00 Update: All gone! Thanks everyone!</ins></p> Update: seeing how pathetic the (non-)response has been, I've lowered the donation amount to USD2. C'mon people. Even as a gift for your non-tech-savvy uncle/auntie/grandma who wants to blog, it's a good deal!</ins></p> Update: There are 3 of the accounts</del> is 1 account left. Thanks Jannah and Phu for making the donations to WordPress!</ins></p> Jeff Holman of Revise Media</a> wrote me awhile back to put up ads for his new WordPress weblog hosting</a> service, and I gladly agreed because I was kind of a WordPress fan (caution: heavy understatement in use). His ad is on the left where you've probably been seeing it for awhile (if you're not reading via a feed reader). (On the subject of ads, well, they fund the webhosting for this blog and then a little more.)</p> Anyway, Jeff offered to give me 5 Plus plans</a> (1 year subscription)</ins> for free to give away to you, my dearest readers. There was supposed to be some contest, but I gave up trying to think of a good idea for one. So I spoke with Jeff on this other idea I had and he has agreed to let them go for a donation to WordPress</a> (rather than for "free").</p> Well, the Plus plans are going at $9.95/year each, and I ask of you to make a donation to WordPress</a> of at least $5</del> $2</ins> (this amount was of my choosing). Write me</a> first (or leave a comment) if you're thinking of donating and claiming a free Plus plan - Jeff has 5 of them for me to give away.</p> PHP 5.0.2 and 4.3.9 2004-09-25T13:05:05+00:00 PHP</a> 5.0.2 and 4.3.9 final are out - maintenance releases both. GIF support is back in the GD extension.</p> Why not to use MySQL 2004-09-06T21:57:21+00:00 MySQL probably is the lowest common denominator for a RDBMS</acronym> in the webhosting world - you can't leave /home without it. This blog wouldn't exist without MySQL (someday WordPress will be database-independent). Sometimes I hear people say MySQL isn't a real RDBMS, or that it lacks certain features that causes it to suck™. I work extensively with MySQL and there are times when I wish for stuff like referential integrity (available with InnoDB tables, but most hosts don't provide it) so I don't have to code constraint checks in the application. I wish for transactions (again supported by InnoDB). I wish for a PL/SQL equivalent.</p> Now, these guys, they've got MySQL gotchas</a> and an anti-MySQL list</a> listing some niggly inconsistencies and general bad behavior in MySQL. And after reading that, I'll never trust what MySQL does to my data again (silently change my data would you, mysqld?).</p> (Yes, the entry title is grammatically incorrect on purpose.)</p> Setting up AWStats on Gentoo 2004-08-28T22:06:14+00:00 Some notes to myself on setting up AWStats</a> on a Gentoo</a> box.</p> First, emerge the awstats package. I added the "vhosts" USE flag because it's listed as a USE flag that awstats reads, and I need support for virtual hosts (although I don't know for sure what it does - I reckon it has something to do with the webapps-config</span> package that's a dependency).</p> emerge -pv awstats USE="vhosts" emerge awstats</div> </li> Don't</strong> use the webapp-config program that the emerge process tells you to use at the end unless you know what you are doing. There have been reports that it isn't exactly ideal in the Gentoo forums</a>.</p> </li> Make a symbolic link to the Apache configuration directives we need to add to Apache in a convenient location. You may also want to make the file owner-writable (chmod u+w</span>) since it's read-only.</p> ln -s /usr/share/webapps/awstats/6.1/postinst-en.txt /etc/apache2/conf/awstats.conf</div> </li> I had to add this bit to /etc/apache2/conf/awstats.conf</span> prevent a 403 error when accessing the ScriptAliased /awstats directory.</p> <directory "/usr/share/webapps/awstats/6.1/hostroot/cgi-bin/"> Options +ExecCGI +FollowSymLinks AllowOverride None Order allow,deny Allow from all</directory> </div> </li> Include the AWStats-required configuration directives in the main Apache config file (mine's /etc/apache2/conf/apache2.conf).</p> Include conf/awstats.conf</div> </li> I'm using name-based virtual hosts, with logs for each of them (they are in the included vhosts/vhosts.conf file). AWStats by default parses the Combined log format</a> and this is what I specify for my access logs as well. An example VirtualHost directive:</p> <VirtualHost *:80> ServerName chuyeow.wtf DocumentRoot /www/codefront.net/htdocs/blog ServerPath /blog CustomLog /var/log/apache2/chuyeow.wtf/access_log combined</strong> ErrorLog /var/log/apache2/chuyeow.wtf/error_log </VirtualHost></div> </li> Now, create an AWStats configuration file for each virtual-host.</p> cp /etc/awstats/awstats.model.conf /etc/awstats/awstats.chuyeow.wtf.conf</div> Notice that the configuration file name is of the format "awstats.domain.tld</em>.conf".</p> </li> Edit the configuration file (/etc/awstats/awstats.chuyeow.wtf.conf). The important things to change are:</p> LogFile (point this to your access log)</li> SiteDomain (your site's domain name)</li> HostAliases (any aliases your site may have)</li> DirData (AWStats database where your results will be stored. This has to be writable by the Apache user if the AllowToUpdateStatsFromBrowser option is turned on.)</li> DirCgi (AWStats CGI directory)</li> DirIcons (AWStats icons directory)</li> </ul> </li> Restart Apache.</p> /etc/init.d/apache2 restart</div> </li> You can access AWStats from www.example.com/awstats/awstats.pl?config=www.example.com.</p> </li> Set password-protection for the AWStats directory.</p> </li> Run AWStats from the command line to update it. You'd likely want to set up a cron job for this.</p> /usr/bin/awstats_updateall.pl now -awstatsprog=/usr/share/webapps/awstats/6.1/hostroot/cgi-bin/awstats.pl -configdir=/etc/awstats/</div> </li> </ol> Useful links:</p> AWStats documentation on installation</a></li> </ul> Split a webpage into 2 with this bookmarklet 2004-07-18T00:40:14+00:00 Cedric asked for Document-splitting in Web browsers</a> and promptly got it</a> (read the comment by Jeff Mesnil</a> in Cedric's blog entry).</p> Jeff Mesnil</a> whipped up 2 bookmarklets</a> in the space of less than one and a half hours that allows you to split a browser into 2 frames. How does it do that? It loads the current URL in a frameset consisting of 2 frames (both showing the same URL). A simple, yet genius, idea.</p> Here's a screenshot of a blog entry split vertically:</p> </a></p> Notice how it could be useful when cross-referencing something on the same webpage, particularly if it's a long vertical-scrolling page. A perfect use case would be referring back to a long blog entry when making a comment.</p> Here's the same page split horizontally.</p> </a></p> There are probably lots of other use cases for a webpage splitter. Cedric's in particular is this:</p> Just recently, I was reading an article that showed a figure at the top and which constantly referred to this figure in the rest of the article.</p></blockquote> Thanks Jeff</a> for writing the bookmarklets and Cedric</a> for thinking of it.</p> admin=false 2004-07-15T10:06:44+00:00 TheDailyWTF</a> is great. If you develop or have developed web applications before, you will appreciate this entry: Admin=False</a>.</p> PHP 5 released! 2004-07-14T10:18:31+00:00 Freshly-baked newsbit: PHP 5.0.0</a> has just been released not too long ago. How long will it take for PHP 5 to become mainstream in webservers around the world? It's anybody's guess.</p> Online promotion of software products 2004-07-13T01:09:38+00:00 Another call for help and advice. I can't really resist it because I've been seeing so much success in my appeals for assistance before.</p> I'm looking for advice/articles/tutorials on online promotion, more specifically online promotion of software products.</p> At the moment, I have these on my list of things to do:</p> Google Adwords</li> Submission to software listing sites</li> SEO</li> </ul> What else is there and why?</p> Table names and case sensitivity - bad MySQL 2004-06-17T23:18:02+00:00 This issue has wasted a good part of a day trying to figure out why my database-driven pages failed to work correctly after dumping a database from my Windows dev machine into a Linux box - I just had to whine about this.</p> Following database naming conventions (actually, there are many, not all of which advocate using mixed case naming schemes), I decided to use mixed case table names when developing on my Windows box. So a table containing localization (or L10n</acronym>) information for widgets would be named `Widget_L10n`, and the lookup table for widget to purchases would be named `Widget_Purchases`. No problem. Everything worked fine on the dev machine.</p> When the time came to move into live testing, I dumped the contents of the database into a file and proceeded to import into the production database server. Of course, nothing worked. I checked the database contents - everything was there. I checked the scripts - everything was good to go; if it works in the dev machine, it should rightly work in the production. I then checked the dump file, thinking it unlikely that something was wrong there but checking anyway - everything seemed fine. I went back to the MySQL client (I was using MySQL Front) and it hit me - the table names were in lowercase. And the PHP scripts were (correctly) using the mixed-case table names. Gah! The database dump file contained queries with the table names in lowercase, so they were</em> lowercase in the Linux box while I was using queries with mixed-case names. At that point I hated myself for forgetting how MySQL stores table names - as a name of the file that stores the table. The manual said so</a> and I even read that before.</p> Lesson learnt: use all lowercase identifier names in MySQL for portability across Windows and operating/file systems where lettercase matters (such as Linux and Mac OX X UFS volumes). Throw the existing database naming conventions you have out the door.</p> Who cares about Web standards? 2004-06-13T20:08:33+00:00 The Web Standards Project</a> asks of anyone and everyone "involved in web production in any capacity" to take a survey on Web Standards and it's relevance to you</a> in a recent press release, Web Standards: Who Cares Anyway?</a>.</p> Most salient question in the survey: What roadblocks or challenges have affected your use of Web standards?</strong></p> "All of the above" applies to my position to a certain extent, but the biggest challenges I experience in my capacity of as a web developer for muvee Technologies</a> (yes, I just got employed, 2 weeks ago) relate to that of lack of team and management knowledge and support. The current webpages are coded in old school tables, using Dreamweaver. Everyone else on the web team uses Dreamweaver. There's absolutely nothing wrong with that, because a WYSIWYG editor is the best for productivity. And I take nothing away from the frontend designer and media designer - they are a class act when it comes to design.</p> I'm probably the oddity in the team, the only guy using a text editor to crunch out PHP scripts using the HTML webpages that are done by the creative department. And I am the only one to see invalid HTML, unclosed tags, and spacer images that Dreamweaver generates. Does it matter to the designers? Not one bit because they don't see it and the pages still turn out find in the important browsers. Does it matter to me? Yes, it is annoying because I've been coding to Web Standards wherever I can, but it is something I can and should live with</strong>. There are honestly far more important things to do, as I have been reminded, than cleaning the HTML towards Web Standards-production code. I can't argue with that. The website works</strong> (well, it doesn't work in Opera, but fixing it is going to be a touchy subject I'll bring up after I'm more settled into my position), so what's the point of wasting time making changes that don't produce any tangible benefit (to them). I can't argue with that too, yet.</p> But when the time comes when there aren't more important things to do, I will be faced with an urge to propose a shift towards Web Standards. How will that turn out? One word - badly</strong>. Why? Because the designers are not going to like it. They (nor the company, I'd guess) would not be willing to toss away what they've used for years to produce their webpages. Unless Dreamweaver starts becoming a far better webpage editor in terms of the code it generates, I don't think they'd like looking at raw HTML code (and I don't blame them either). I'd probably become public enemy number one in the web team if I start proposing these changes, even if I suggest to undertake the conversion to Web Standards all by myself. I don't have a case, yet.</p> Anyway, take the survey</a>, let WaSP know what's happening in the real world, and also let me know if and how you've managed to convince your department/company to switch to Web Standards. Please do share your experiences, especially those that end in sucess, because that's where I believe everyone has lots to learn from.</p> Seen elsewhere - Free eBook "Budget Design" 2004-06-10T02:35:25+00:00 Didier Hilhorst and Dan Rubin of SuperfluousBanter</a> fame have written and released for free (for 7 days) Budget Design: Increase Profit by Improving Process</a>. After 7 days, it'll set you back $9.</p> All web developers should take a look at it (even if your budget is larger than the US trade deficit), because it's quality stuff from 2 quality web developers (and now, writers).</p> Sorry, no more hot-linking, please 2004-05-23T17:11:44+00:00 Yup that's it, no more hot-linking of images (and CSS files as well) on this site, please. Thanks to pippo's How can I prevent hot-linking images?</a> post, any hot-link requests to this site will be redirected to this image below instead:</p> </div> </p> I know there have been cases of legitimate hot-linking (at least in my view they are legitimate), such as from forum threads (legitimate because I don't expect your run-of-the-mill forum member to have webspace). So this "sorry" goes to you guys. If I notice hot-linking from forum threads in the future, I'll be sure to add you to the allowed list of referrers. In fact, I've already added http://gathering.tweakers.net/forum/</a> and http://mozillapl.org/forum/</a> to the "allowed list" in my .htaccess</a>.</p> I did this because there have been people who have been leeching my image files, list bullets and even my CSS(!), and I think that is bad form. If you want an image from this site, download it, and upload it on your server. So far every image and screenshot I've ever posted is available for "free" despite the Creative Commons Attribution-NonCommercial-ShareAlike 1.0 license</a>, and should be in the future unless I turn into the Picasso of graphic design soon.</p> Bookmarklet lays out topography of a webpage 2004-04-07T01:42:31+00:00 Joseph Pearson of Make Believe</a> has coded a topographic page layout bookmarklet</a> that shows the layout of a webpage. Basically, it recolors the elements of a webpage, giving more deeply nested elements a lighter color. The effect is that you can see the "topography" of a webpage, which makes it that much easier to detect unclosed divs or for those situations where something is wrongly positioned but you just don't know why. Another of those must-have web development bookmarklets.</p> The best list of CSS filters, so far 2004-03-01T17:43:08+00:00 Chris of dithered.com</a> has compiled a list of CSS filters</a>. For those not in the know, CSS filters are techniques that hide CSS rules from browsers who misinterpret, abuse or just plain don't understand them.</p> In more personal news, I've been slaving away at putting out a technical paper and a thesis for my honors project. Now you know why I've been so quiet. Well, you can read my scrapped together About</a> page (that finally has some content) to keep yourself entertained. Yeah, right.</p> Textpattern - a promising CMS sprouts its wings 2004-02-25T01:05:01+00:00 Textpattern</a>, a content management system written in PHP by Dean Allen</a> (of Textism</a> and Textile</a> fame), has just been released to the public.</p> Curiousity piqued by what it promised to offer about a year ago (when it was in closed development), I made it a point to check out Textpattern once any release is made. I took a quick install and run through of Textpattern gamma 1.11 and am pleased to report that it delivers on its promises. This has the makings of the next big weblog publishing tool (bigger than MT?), or even the next big CMS. More on this after I play around with it a bit more.</p> list-style-image alignment quirk in IE/Win and Opera? 2004-02-20T19:47:43+00:00 Take a look at this example page</a> I set up in IE/Win or Opera, and then in a Gecko-based browser.</p> Notice that the positions of the list images in IE/Win and Opera are misaligned - they're not in line with the text, but seem to be vertical-aligned to the top. After a bit of hair-pulling, I figured out that is because I applied "line-height:180%;". Setting the line-height back to 100% for the <ul> works, but then I had to resort to adding margins to the <li> elements to simulate a line-height so that it'll be consistent throughout the document.</p> Does anybody have an explanation why IE and Opera does it this way while Gecko browsers render it the other, seemingly correct, way?</p> Tooltips with CSS 2004-01-22T16:18:27+00:00 Pure CSS tooltips</a> by SantaKlauss shows you how to display tooltips using purely CSS. The idea is not unlike Nice Titles</a>, though the execution is very different - Nice Titles uses the DOM to extract the nicetitles, the tooltips use only CSS.</p> The smart part is when printing: the tooltips are "inlined" and bracketed appropriately so that they show up in the normal flow of the document when printing.</p> Still, I consider the execution to be semantically incorrect since the tooltip requires the anchor tag <a> to work - the text that is "tooltipped" is not</em> an anchor. A better way would have been to use a standard <span> tag. Of course, this then breaks in IE because IE only supports the :hover</span> pseudo-class on the <a> tag. Thanks to whatever:hover</a>, however, this can easily be fixed. Also, there seems to be no need for the z-index fix as mentioned (tested on IE/Win 5, 5.5 and 6). The CSS is below:</p> body { behavior:url(/htc/csshover.htc); } span.info{ position:relative; background-color:#ecc; color:#000; text-decoration:none } span.info:hover { background-color:#e96 } span.info span.tooltip { display: none } span.info:hover span.tooltip { display:block; position:absolute; top:2em; left:2em; width:15em; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center } </div> Here's an example</a>.</p> HTTP error pages for weblogs! 2004-01-13T00:11:28+00:00 Check out the custom error pages over at Dunstan Orchard's blog</a> as linked in his weblog entry entitled Friendly error handling</a>. Now that is cool. One other thing is certain - Dunstan really has too much time on his hands. Heh. I think I'm just jealous.</p> Ungreeking, a color wheel, and GIFs 2003-12-21T22:34:21+00:00 Some things that could prove useful to myself in future: ungreek</a> is what you could call a lorem ipsum</em> generator - it generates placeholder text from a variety of sources including the Old Testament, the US constitution and even the Internet RFC 1630</a>.</li> 4096 Color Wheel</a> is a color wheel written in JavaScript. Nice to have an instant swatch at the side.</li> Pixel2Pixel</a> is a PHP script that allows you to change any color in your GIF images on the fly. Just upload your image and choose what colors you want changed.</li> </ul></p> Easy .htaccess 2003-12-18T23:21:45+00:00 Dot HtAccesser</a> is a web-based tool that generates .htaccess files for you via a simple form. Writing the right .htaccess file isn't exactly rocket science, but we are fortunately spared reading up when in doubt, especially when the official Apache .htaccess tutorial</a> is so sparse.</p> CSS selectors translator 2003-12-01T03:21:45+00:00 Confused by CSS selectors like a:not([href*="codefront"])</span> and body > h2:not(:first-of-type):not(:last-of-type);</span>? SelectORacle</a> can translate that into plain English (or Spanish) for you.</p> Very neat idea that's apparently the brainchild of Eric Meyer</a> (the CSS guy), and implemented in Python</a> by Kevin Jacobs.</p> Getting funky with Nice Titles 2003-11-28T01:33:15+00:00 Dunstan wrote up on an improved Nice Titles script</a> in his beautiful and very interesting blog</a>. What are Nice Titles</a> you say? They are the brainchild of Stuart Langridge</a> and appear on this site when you hover over a hyperlink with the title</span> attribute set. If you're using Mozilla or Mozilla Firebird, the CSS takes advantage of the -moz-opacity</span> to give the popup div some transparency, and -moz-border-radius</span> for rounded corners (other browsers will render an opaque rectangle).</p> Why Nice Titles? Firstly, they are kinda cool. And I like the way the URL is displayed in the popup div. Control over the delay between mouseovers and the div popping up helps to have title dialogs show up faster (or slower) than the browser default - I personally find the delay a little too long for "standard" titles.</p> All this is done using purely DOM methods (DOM is a W3C standard) and will work in all correctly-implemented</em> DOM-compliant browsers. Of course, this method degrades gracefully in the face of text browsers, limited browsers in mobile devices, screen readers, etc. Want it for your site? It's as easy as uploading the CSS and JS files to your webserver and linking to them. Any existing title</span>s will magically become a Nice Title.</p> Required reading: Floats and Positioning 2003-11-11T22:02:18+00:00 Position Is Everything</a> has some very coherent, very required reading on positioning and floating with CSS</acronym>: Flowing and Positioning: Two Page Models</a> and Float: The Theory</a>.</p> By the way, Position Is Everything</a> is a great place for CSS demos and articles. Bookmarked!</p> Source: Simon Willison's Weblog</a></p> View your website in Lynx, without Lynx 2003-10-30T16:25:26+00:00 Came across this while reading the little orange book by Jeffrey Zeldman</a> - Lynx Viewer</a>. It's a pretty neato Perl CGI script</a>. Very useful for checking how your site looks to that minority of people who still use a text browser. Also very interesting to see how many</a> sites</a> break</a>.</p> See how important it is to separate presentation from structure, and to follow accessibility guidelines? At least, as important as it is for these sites not to lose the proportion of viewers who either use text browsers or are visually-handicapped and use a screen reader.</p> Anyway, here's redemption in a blog when viewed in Lynx</a>.</p> I've got Mini-tab Shapes 2003-10-27T06:19:00+00:00 I've always been wanting to try out Mini-tab Shapes</a> and finally got down to doing so. Granted, the whole thing was a no-brainer since all that had to be done was to copy the source in that page and tweak the CSS to suit the rest of the site.</p> Initially though, I'd wanted to put up tabs like those in the Sliding Doors of CSS</a> article at A List Apart</a>, but my graphic design skills weren't up to the task - I had problems coming up with tabs that weren't child-like doodles. So I settled for mini-tabs.</p> Anyway, for those of you who've been visiting lately, you'd probably also have noticed the new look. Hate it? Like it? Let me know!</p> Update</strong>: The Sun Report</a> has Vertical Mini-tabs, inspired by Mini-tab shapes!</a></p> Mimicking Magazines, with CSS 2003-10-10T15:58:58+00:00 Anton Andreasson of Standardice</a> has put together "Mimicking Magazines</a>" which is a collection of web styles that mimic those of magazines (the kind that are made up of trees), using CSS. Very nice. Should get better as more is collected. Maybe he should allow user-contributions or put together something like a CSS Zen Garden</a> thing.</p> Winner of SitePointForums.com CSS contest announced 2003-10-08T15:49:56+00:00 A while back I wrote on</a> the CSS contest at SitePointForums.com called The Beauty of Style</a>. Well, after some hiccups over the judging, the winner has finally been announced</a>. All credit to zoo</a> (Rick) for handling the contest very nicely despite the many difficulties and speed bumps.</p> Personally, I liked Zanzibar</a> as well, and would have liked it to win over Deadend Prophecy</a> which I've found breaks in IE 5.0 (on Windows). Nevertheless, it's still a stunning design, and I don't really give too much of a care for IE 5.0 myself.</p> Vinnie on tables and CSS 2003-09-23T16:28:17+00:00 A fellow Advisor at SitePoint Forums</a>, Vinnie Garcia</a>, has a blog</a>! And how's this for a 3rd blog entry</a>? In that entry titled "On tables, layouts, and CSS</a>", Vinnie makes a very coherent argument on using tables for layouts - probably one of the most practical viewpoints to date.</p> We can love using CSS for our layouts fanatically, but we must also come to realise that sometimes tables will allow you to design truly cross-browser sites. At this time I've yet to find a 3-column CSS layout that doesn't break with varying column heights, without resorting to hacks. If a hack is required, I think I'd stick to using a table, thank you. At least until browsers are capable.</p> Vinnie sums up pretty nicely with this </p> I guess the moral of this rant is to remind everyone that while using Web standards is a smarter way to work, let's not get bogged down in theory and worrying about validation.</p></blockquote> CSS rollovers without preloading 2003-09-13T13:59:30+00:00 Petr Stanicek</a> has devised a clever technique to do image rollovers without resorting to JavaScript and with no need for preloading. Check out the examples</a> to see if you can figure it out for yourself before reading his explanation - that "eureka!" feeling would be that much more gratifying.</p> For the eternally constipated, zoom over to "Fast rollovers, no preload needed</a>" for the explanation. (via Simon Willison's Weblog</a>)</p> CSS contest at SitePointForums.com 2003-09-02T14:39:56+00:00 The SitePoint Forums</a> community has recently organized a CSS website design competition called The Beauty of Style</a>, very much in the style of CSS Zen Garden</a>. If you're thinking of taking part, sorry, the submission date is over, and judging is currently in progress.</p> You can take a look at the submitted entries</a> though. Some of them are very good, like Crispy</a>, Zanzibar</a>, Lichen</a>, SP Style</a> and The Box</a> (slightly broken in Mozilla).</p> Stumped by regular expressions? Try the Regex Coach 2003-08-28T18:21:26+00:00 Peter Bowyer</a>'s entry on The Regex Coach - interactive regular expressions</a> alerted me to the very excellent Regex Coach</a>.</p> The Regex Coach allows you to experiment with your regular expression (regex) and quickly determine how it would match your target string. It would be a very useful tool for trying out all any examples in any tutorials or books you may be reading. Also serves as a good testing platform for verifying your regex interactively (as opposed to writing it in your script, running it, and then checking the results). I wish I had this when I was learning regex.</p> 2nd installment of A Second Voice 2003-08-28T16:38:51+00:00 Dave Shea</a> has published the 2nd installment of "A Second Voice</a>". This 2nd article is entitled Standards: Designing For the Future</a> by Ian Lloyd</a>. In it, Ian gives a personal account of his experiences promoting Web Standards</a> in the workplace and his thoughts on what's holding people back from accepting and practising them.</p> As before</a>, I'm posting this in hope it gets passed on as "word of blog". Essential reading for web developers and designers alike.</p> Dealing with colors 2003-08-21T18:44:40+00:00 Several tools to help the web developer in color scheming and color management.</p> Iconico's Color Picker</a> is a free Windows application that helps you pick colors and save them to your swatch. Very good for picking colors from sites and pictures. My only grouse is that it doesn't allow you to save your swatch.</li> Color Schemer</a> helps to create a color scheme when given a particular color. The resulting schemes don't always work though.</li> Color Blender</a> does as its name suggests - it blends 2 colors into 1. The results can surprise you - you may just find your new favorite color with some experimentation.</li> ColorChip</a> is a PHP class that, given a single color, produces the complementary color, nearby hues, a light to dark version of the color, and more. You have to try it</a> to be impressed.</li> </ul> Tracking entry referrers with PHP in MT 2003-08-16T19:30:18+00:00 I've always wanted to track referrers for each entry and at the same time be able to tell which entries are the more popular ones by keeping track of each entry's hit count.</p> So I did the smart</em> thing first by Googling to see if anyone else had done it. I found the AWStatsReferers</a> MT plugin at the MT Plugin Directory</a> but it requires your host to have AWStats</a> installed. My host doesn't, and I wasn't going to get them to install AWStats just so I can track referrers for my blog. Refer</a> is a referrer tracking script that turned up - it actually seems like it could do what I wanted with a little tweaking, but a look at the code left me thinking there should be a simpler way to achieve my more specific goals (i.e. track referers and, consequently, hit count for each entry).</p> So, hey, I decided to whip up a simple hack of sorts using PHP and a database table to store the referrers.</p> </span></a></p> Tracking entry referrers with PHP in MT</h3> Requirements: MovableType, webhost that supports PHP, database (MySQL in this tutorial)</p> A plain text version of this tutorial is also available here</a>.</p> </del></p> First off, any page where you wish to display the referrers or hit count, including your archives and main index page, need to have a .php extension (or any other extension that will cause the file to be pre-processed by PHP). You can do so by renaming your Archive File Templates</em> to have a .php extension (go to Weblog Config</em> -> Archiving</em>). The same goes for your main index page (go to Templates</em>) . </li> Create the database table. The SQL is: </p> CREATE TABLE `mt_entryhits` ( `entry_id` INT(11) NOT NULL REFERENCES mt_entry(entry_id) ON DELETE CASCADE ON UPDATE CASCADE, `referer` VARCHAR(255) NOT NULL );</div> You can use either phpMyAdmin, the MySQL command-line client or whatever suits your boat. </li> Create a file named db-config.php</span> with the following code: </p> <?php $host = 'host'; // database server hostname $user = 'user'; // database username $password = 'password'; // database password $database = 'database'; // MT database ?> </div> Replace the values of the variables as per your configuration. Upload it in your blog's top level directory (i.e. the Local Site Path</em> of your weblog, as specified in the Weblog Configuration</em> screen). </li> Login to your MovableType installation and Manage your weblog</em>. Go to Manage</em> -> Templates</em> -> Archive-Related Templates</em> -> Individual Entry Archive</em>. </li> At the top of the template, add the following lines:</p> <?php error_reporting(0);</p> include( '<$MTBlogSitePath$>db-config.php' );</p> mysql_connect( $host, $user, $password ); mysql_select_db( $database );</p> // this is the list of referrers you don't want to record // use the following format within the parentheses: // 'http://domain1.com', 'http://domain2.com', ... // leave it blank if you want to record all referrers $ignore_list = array( 'http://referrer.you.want.to.ignore' );</p> // check referrer string to determine if we want to record it $ignore_referrer = false; foreach( $ignore_list as $ignore ) { if( stristr( $_SERVER['HTTP_REFERER'], $ignore ) !== false ) { $ignore_referrer = true; break; } }</p> // record the referer if( !$ignore_referrer ) { mysql_query( "INSERT INTO mt_entryhits(entry_id, referer) VALUES (<$MTEntryID$>, '{$_SERVER['HTTP_REFERER']}')" ); }</p> // get the no. of times this entry has been read $rs = mysql_query( 'SELECT COUNT(*) FROM mt_entryhits WHERE entry_id=<$MTEntryID$>' ); $row = mysql_fetch_row( $rs ); $hits = $row[0];</p> // get the list of referers $sql = 'SELECT referer, COUNT(*) AS count FROM mt_entryhits WHERE entry_id=<$MTEntryID$> GROUP BY referer ORDER BY count DESC';</p> $rs = mysql_query( $sql ); ?> </p></div> This code snippet is specific to MySQL - you should be able to change it easily for PostgreSQL or SQLite (if not, let me know</a> and I'll post code snippets for those RDBMS</acronym>s too). Of course, you can plug in a database abstraction library like the excellent ADODB</a>, but I leave out that portable solution in favor of database-specific built-in function calls because MovableType supports only MySQL, PostgreSQL, or SQLite. </li> In the same template (the Individual Entry Archive</em> template), look for a good place to display the entry hit count and insert the following code: </p> Read <?=$hits?> time<?php if($hits != 1) echo 's';?> </div> I place them in the "Posted by" bit at the end of each entry, which for the default MT template is</p> <span class="posted">Posted by <$MTEntryAuthor$> at <$MTEntryDate$> <MTEntryIfAllowPings> | <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack</a> </MTEntryIfAllowPings> | Read <?=$hits?> time<?php if($hits != 1) echo 's';?></span> <br /></span> </div> </li> Now, it's time to display the referrers. Again in the same template, add the following code where you wish to display the referrers.</p> <?php // display the list of referers echo '<div class="sidetitle">Referrers</div>', "\n"; echo '<div class="side">', "\n"; echo '<ul>', "\n"; while( $row = mysql_fetch_assoc( $rs ) ) {</p> $referer = $row['referer']; $count = $row['count'];</p> echo '<li>';</p> if( strpos( $referer, 'http://' ) !== false ) { echo '<a href="', $referer, '" target="_blank">';</p> // truncate URL if too long if( strlen($referer) > 90 ) { $referer = substr($referer, 0, 90) . '...'; } echo $referer, '(', $count, ')'; echo '</a>'; } else { // truncate URL if too long if( strlen($referer) > 90 ) { $referer = substr($referer, 0, 90) . '...'; }</p> // handle cases where there is no referrer if( $referer == '' ) { $referer = 'Direct hit or unknown referrer'; } echo $referer, '(', $count, ')'; } echo '</li>'; echo "\n"; } echo "\n"; echo '</ul>', "\n"; echo '</div>'; ?> </p></div> You can format the HTML</acronym> to suit your current template. </li> Phew! The hardest part is now over. All that's left is to display the number of times each entry has been read in the other archive pages and the main page (Main Index</em>). I'll only work through the changes to the Main Index</em> template, since it will be similar for the other templates (Category Archive</em>, Date-Based Archive</em>, any other templates you have created that displays blog entries).</p> At the top of the template, add the following lines:</p> <?php error_reporting(0);</p> include( '<$MTBlogSitePath$>db-config.php' );</p> mysql_connect( $host, $user, $password ); mysql_select_db( $database ); ?> </p></div> Look for the <MTEntries></span> tag in the template and add the following lines after it:</p> <?php // get the no. of times this entry has been read $rs = mysql_query( 'SELECT COUNT(*) FROM mt_entryhits WHERE entry_id=<$MTEntryID$>' ); $row = mysql_fetch_row( $rs ); $hits = $row[0]; ?> </div> Now that we've the number of hits in the variable $hits</span>, we can display the entry hit count as before by adding the following line of code within the <MTEntries></span> tag:</p> Read <?=$hits?> time<?php if($hits != 1) echo 's';?> </div> </li> Do the same for the other archive templates (Category Archive</em>, Date-Based Archive</em>, any other templates you have created that displays blog entries). </li> Rebuild your site and you're done! </li> </ol> Thanks to everyone who gave comments and asked questions at the MovableType support forums</a> and elsewhere, who pointed out things I overlooked.</p> Update</strong>: Matt Moore</a> has an alternative (based on this very post! ;-)) that includes collection of the page title of the referrer, and also the search terms used to get to your blog entry. Check out his entry entitled "How to collect referrer data</a>"</p> Beginning Web Design series 2003-08-15T04:50:06+00:00 Paul Scrivens</a> has started a series of mini-articles for beginning web designers, starting with Ch. 1</a> which points out some of the best sites to study as prime case studies for color, layout and liquid design.</p> Mezzoblue</a> and hicksdesign</a> are 2 of the best-looking blogs out there.</p> Getting with the style switcher 2003-08-11T13:53:25+00:00 I've always been fascinated with JavaScript-based style switchers, like those at A List Apart</a> and Netscape DevEdge</a>. It's fun to have a (limited) amount of customizability, without having to reload the webpage like those done using server-side scripting. It's like a shiny toy for your users to play.</p> I got myself one of those using Paul Sowden's</a> Style Switcher and following the (simple) instructions at his A List Apart tutorial entitled "Alternative Style: Working With Alternate Style Sheets</a>".</p> And so, redemption in a blog</a> now sports a new Default</a> style and a Clean</a> style, along with the Original</a> style.</p> Redesigning made easy with "edit styles" bookmarklet 2003-08-11T13:09:14+00:00 I've recently redesigned redemption in a blog</a>, optimizing the CSS</acronym> and reducing line width for more optimal reading. I did this quickly and painlessly with a gem of a bookmarklet, the "edit styles" bookmarklet</a>.</p> The "edit styles" bookmarklet allows on-the-fly editing of the active CSS</acronym> file of any webpage. Try it out - click here</a> (only in Mozilla</a> and Mozilla Firebird</a> - all the more reason to switch, if you haven't). Changing the CSS changes the webpage immediately, allowing for a great way to try out new styling painlessly and saving you the constant edit-reload cycle. This is a must-have tool for the web designer/developer. Drag it to your bookmark toolbar. Don't style your site without it.</p> Web designer article series: A Second Voice 2003-08-10T23:58:16+00:00 Dave Shea</a> has started a new series of articles on Mezzoblue</a> titled "A Second Voice</a>". It is a group effort consisting of web designer specialists in their field, including Usability, Design and Programming. The 1st article on accessibility</a> by Nic Steenhout reads easily.</p> This is definitely one to watch and bookmark. I'm just passing it along as "word of blog".</p> Designing with web standards slides online 2003-08-08T07:02:47+00:00 Jeffrey Zeldman</a> has put up the slides for the Web Design World keynote</a>. For those of you still unfamiliar with Web Standards</a>, the slides (in HTML) would be a pretty good run through of what web standards can do for you and your website. CSS layouts are used by commercial websites like EPSN</a> and Wired.com</a> to good effect. Some that don't break</a> or ask you to download X browser (with MS IE being the most common - check out MSN Gaming Zone</a> in Firebird).</p> ®_id is not ®_id 2003-07-27T12:37:39+00:00 Another reason to hope Microsoft gets it right in IE 7, seeing as they are reluctant to fix IE 6: I was making changes to a website for a client and mostly tested the site in Mozilla Firebird 0.6 - I forgot to test the site in IE, but that was a fault on my part on thinking it would be alright. It wasn't. The JS popup loads an invalid page because of the query string, which had become file.php?event_id=3®_id=12345.</p> Apparently, IE was being _too_ smart in converting the ® into ® even though the ending semi-colon ';' was missing. Changing to &reg_id didn't help either. It is a subtle bug though, since it only happens when loading via window.open(this.href)</tt>. I had to fix it by making reg_id the first query string parameter.</p> MovableType for your site (not blog) 2003-07-20T13:51:46+00:00 Beyond the Blog</a> walks through the modification of MovableType</a> for use in managing entire sites. Boxes and Arrows</a> is a prime example of an entire website powered by MT.</p> This is very interesting to me, because I've been searching high and low for a free, lightweight, usable Content Management System (CMS) for CodeFront.net but all my experimentation and evaluation has turned up naught. Perhaps it would be good for me to do a little under-the-hood tweaking of MT myself.</p> Bookmarklets for the web designer 2003-07-16T17:17:28+00:00 I've made Simon Willison's blog</a> one of my daily reads, and was reading some of the archives in the CSS category when I chanced upon a 1-month old entry</a> that was an absolute gem.</p> To be honest, I didn't previously bother with bookmarklets because I thought they were cool, but lacking in practicality. Until I saw this...</p> With this, you can experiment with the CSS styles of your website(s) for those 'what if?' moments... </div> I've replicated the 'edit styles' bookmarklet here. Just click on it, or drag it to your bookmark toolbar if you think it's useful (don't think too much - it IS). » edit styles bookmarklet</a></p> With this, you can experiment with the CSS styles of your website(s) for those 'what if?' moments. You can also change how a site looks to your liking (too small font sizes, glaring background colors) at the click of a bookmarklet and some CSS editing.</p> For more useful bookmarklets, visit Jesse's Bookmarklets site</a>, in particular the Web Development Bookmarklets section</a>.</p> Pull quotes for your blog 2003-07-16T16:26:19+00:00 ... I decided to steal the idea and implementation for my blog. </div> After reading an entry on pull quotes</a> in Adam Polselli's blog</a>, I decided to steal the idea and implementation for my blog.</p> All you got to do is define a CSS class and apply it to the <div> that will contain your pull quote, like so (copied directly from Adam's blog entry</a>):</p> div.pullquote { float: right; width: 150px; margin: 10px; margin-left: 15px; margin-right: 0; padding: 0; color: #333; font-family: georgia, palatino, serif; font-size: 20px; text-align: center; line-height: 24px; } </pre> All credit goes to Adam for that bit of CSS. </p> A handy color picker 2003-07-15T14:33:35+00:00 I found this very handy color picker imaginatively named Color Picker</a> from Iconico</a>. The good thing about it is that it comes as a ready to run single-file executable (Windows only though). It is also freeware.</p> Only thing I find lacking is the absence of a palette-saving feature.</p> Rounded tables with CSS 2003-07-14T14:02:22+00:00 I had cause to create rounded tables in my recent freelance work and rather than use the "old" way</a> of doing it, I decided to set out to see if this can be more easily achived with CSS</acronym>. </p> And no it isn't possible to do so until CSS3 border-radius</a> is supported in browsers. </div> And no it isn't possible to do so until CSS3 border-radius</a> is supported in browsers. It is, however, possible to do so using Mozilla's -moz-border-radius</tt>, which works in Gecko browsers like Mozilla, Firebird and Netscape 6. It is proprietary though so it won't work anywhere else.</p> .roundedCorners { -moz-border-radius: 20px; } </pre> Still, it wasn't a fruitless search as it turned out easier, erm, hacks to achieve rounded goodness, as demonstrated here</a>. </p> CMS - Mambo Open Source 4.5 2003-06-20T12:58:17+00:00 Looking forward to the release of Mambo Open Source 4.5</a>. From the screenshots here</a> and here</a>, it looks very promising, and most important of all, easy to configure, administer and use without requiring a messy or non-intuitive process.</p> Young (and talented) web developers, designers 2003-06-10T15:06:44+00:00 Judging from this thread titled Your Age</a> at SitePoint Forums</a>, the web development and web design world is full of young talent. Patrick O'Keefe (iFroggy</a>) is only 18 but runs a webhosting business, a webdesign business, and is webmaster of many popular communities. Marc James (mjames) is 17 and runs a successful sports-related site at Sports Central</a>, among other achievements. Those are just 2 exemplary individuals who are young and are making successful web-related careers.</p> I wonder - are there and prodigies that are committers or project leads of Open Source projects like those under the Jakarta project umbrella?</p>

chuyeow.wtf

Firefox quick tip: view images in a new tab quickly

New in Rails: ActiveResource timeouts and why it matters

Timeouts and you</h3> If you're using Net::HTTP you can easily safeguard yourself against errors like this by setting a timeout on the socket connection. Like so:</p>

Generating migrations gets easier - Rails 2.0 a feature a day #6

Concatenate your stylesheets and JavaScripts in 3 seconds - Rails 2.0 a feature a day #3

You can name your javascript too, by passing a name instead of true.</h1> <%= javascript_include_tag 'jquery', 'swfobject', 'application', :cache => 'base' %></p>

This becomes:</h1>

<script type="text/javascript" src="/javascripts/base.js"></script></h1>

Same deal for stylesheets...</h1>

:cache => true creates a stylesheet named all.css.</h1> <%= stylesheet_link_tag :all, :cache => true %></p>

This becomes:</h1>

<link href="/stylesheets/all.css" media="screen" rel="Stylesheet" type="text/css" /></h1>

You can name your stylesheet like for javascript_include_tag.</h1> <%= stylesheet_link_tag 'yui/reset-fonts-grids', 'application', :cache => 'styles' %></p>

This becomes:</h1>

Firefox 3, Beta

New in Rails: a request profiler for profiling your app

New in Edge Rails: helper for creating form labels

Dugg? No problem with WordPress

Don't trust web apps (or how Google Reader and my ISP conspired to lose all my feeds)

Adium themes use plain old XHTML, CSS and JS

Some of the world's hottest startups - Bezurk on Business 2.0

YSlow - Firefox extension that helps to optimize your web pages

MySQL command line "secret"

God and your web server

Better JSON output from Rails with the Jsonifier plugin

Prototype 1.5.1 is baaaaad for Safari 1 and 2 users

Bezurk featured on Channel NewsAsia

How to get strictly valid JSON from Rails

Get your Rails tests results via Growl notifications

Setting up svnsync-ed (mirrored) SVN repositories on Ubuntu (part 2 of 2)

Things that I skipped</h3> There're some things that I skipped over while writing this, mainly to do with SVN authentication.</p>

Wrapping up</h3> I hope someone found this entry useful - I know I could have used one when I was setting up Subversion and svnsync.</p>

Setting up svnsync-ed (mirrored) SVN repositories on Ubuntu (part 1 of 2)

Setting up access to your new repository</h3> Now, you have a Subversion repository that is only accessible via the local filesystem (file:// 'protocol'), which isn't very useful. We'll need to setup remote access. Your Subversion repository can be accessed in a variety of ways, including:</p>

DRYing up link_to_remote for degradable URLs

Validate that favicon

Firefox tips sharing session at WebSG meetup

Keyboard shortcuts you should know</h3> Note: Mac users should replace Ctrl with the Cmd key for any of the keystrokes listed below.</p>

Getting rid of the close button on all tabs</h3> I've been told how annoying Firefox 2.0 is when it insists on putting a close button on each tab.</p>

Profile management for productivity</h3> Firefox hides its Profile Manager from you. You can access it by passing the -profilemanager</strong> switch to your Firefox executable. For Windows users, it's actually --profilemanager</strong>.</p>

Finally, Bezurk and news.com.au co-brand is up and running

Determining web page size - the wrong way

Essential Firebug video for web developers

BarCamp Singapore Jan 2007

Job Ad: Java Web Developer for Bezurk

Unobtrusive IFrame shim - a half solution

The first rule of Maintenance is - you do not talk about Maintenance

Wufoo - Cool AJAX form builder

Simple anti-comment spam measure

MySQL 4.1 production-ready

How "well designed, popular and accessible" is your website?

Portions of Spamx plugin for Geeklog minimally based on MT-Blacklist Updater

LiveSearch hack for WordPress

WordPress hosting up for grabs

PHP 5.0.2 and 4.3.9

Why not to use MySQL

Setting up AWStats on Gentoo

Split a webpage into 2 with this bookmarklet

admin=false

PHP 5 released!

Online promotion of software products

Table names and case sensitivity - bad MySQL

Who cares about Web standards?

Seen elsewhere - Free eBook "Budget Design"

Sorry, no more hot-linking, please

Bookmarklet lays out topography of a webpage

The best list of CSS filters, so far

Textpattern - a promising CMS sprouts its wings

list-style-image alignment quirk in IE/Win and Opera?

Tooltips with CSS

HTTP error pages for weblogs!

Ungreeking, a color wheel, and GIFs

Easy .htaccess

CSS selectors translator

Getting funky with Nice Titles

Required reading: Floats and Positioning

View your website in Lynx, without Lynx

I've got Mini-tab Shapes

Mimicking Magazines, with CSS

You can name your javascript too, by passing a name instead of true.</h1>
<%= javascript_include_tag 'jquery', 'swfobject', 'application', :cache => 'base' %></p>

:cache => true creates a stylesheet named all.css.</h1>
<%= stylesheet_link_tag :all, :cache => true %></p>

You can name your stylesheet like for javascript_include_tag.</h1>
<%= stylesheet_link_tag 'yui/reset-fonts-grids', 'application', :cache => 'styles' %></p>

Wrapping up</h3>
I hope someone found this entry useful - I know I could have used one when I was setting up Subversion and svnsync.</p>