Suntour vintage derailleur maintenance

Suntour derailleurs are solid constructed components that perform troublefree for a long period of time. But as years go by they suffer from wear that ultimately leads to failure. From my experience it´s often the tension spring of the parallelogram cage that breaks and leaves the derailleur useless. But how can this spring be exchanged; after all the derailleurs of Suntour are, like the ones of Shimano, rivetted and not fully able to be taken apart, like the ones of e. g. Mavic?!
This how-to illustrates the complete disassembly of Suntour derailleurs, the exchange of damaged parts and finally the re-assembly of the whole mechanism to form a functioning derailleur. This article further wants to show how one can substitute a broken tension spring with a self-made spring made from hardware store parts. At the beginning i´ll try to define some terms i will use in the further text. The orientation is set according to the normal mounting position on the bicycle. Parts oriented to the center line of the bike are are referred as "inboard", parts oriented outside as "outboard". The parts of the derailleur that bear the pivots are called "front parallelogram body" (FPB) and "rear parallelogram body" (RPB). They guide the two parallelogram arms (inboard parallelogram arm (IPA), outboard parallelogram arm (OPA)). The entity of FPB/RPB and IPA/OPA is called the parallelogram cage. The parts of a Suntour derailleur that can be disassembled are the pulley cage and the spring-loaded hanger bolt assembly. The pulley cage can be detached removing the M4 set screw. The spring-loaded cage is unloaded rotating it clockwise up to the "twelve o´clock" position and pulling it out of the FPB. The hanger bolt assembly can be opened removing a circlip that secures the bolt.

---

The disassembly of the rivetted parallelogram cage is shown in the following part.

Fig. 1: To drive out the pivots a small hole has to be drilled in the upper extension of their axis. Using a small stub steel nail and a hammer the pivots can be driven out.

 

Fig. 2: The required drilling to drive out the pivot under the hanger bolt housing has to be performed meticulously, because the position direct above the pivot has to be reached exactly. The picture shows the relative location of the drilling entrance. Because of the more precise mode of action i use hand drillers of the caliber 1.5 mm.

 

Fig. 3: After drilling the pivots are driven out using the steel nail and a hammer. As a support i use a wood board with a small recess below the pivot.

 

Fig. 4: To remove the parallelogram spring a brass bushing in the IPA has to be driven out. To do this an M5 screw is placed on top of the fixated IPA and gentle (!) hammering is applied. After this the inner (serrated), the outer brass bushing and the parallelogram spring can be separated.

 

Fig. 5: If there are no original Suntour spare springs available, a replacement spring can be formed using a pull-spring taken from a local hardware store (outer diameter 12.5, inner diameter 9.5, wire gauge 1.5 mm). To keep the cylindrical form of the spring during the forming and bending, it is hoisted onto a fitting wood stick.

 

Fig. 6: After bending the spring is shortened using a bolt-cutter and the IPA is reassembled. The self-prepared spring bears the option to control the preloaded tension in a distinct range. Therefore one can fine-tune the shifter and will be able to build it up using a less amount of operating force. The picture shows from front to rear: the broken original Suntour spring, the newly built spare spring (not shortened) and the outer and inner brass bushing.

 

Fig. 7: A completely disassembled parallelogram cage. Its OPA has been broken. After exchange of the OPA the derailleur could be newly built up.

 

Fig. 8,9: After thorough cleaning and lubrication the derailleur can be re-assembled. The IPA has to be inserted into the FPB folded to the inner side and is rivetted. The RPB is connected with the IPA and rivetted. As the last step the OPA is mounted and rivetted, which tensions the parallelogram spring.

 

Fig. 10: The newly rivetted derailleur.

 

---

The drill holes can be left untouched or tinned which masks the the modification of the derailleur. To leave the drill holes as they are bears the benefit that the derailleur can be opened for maintenance very easy. Another application for the dissassembly of the rivetted parallelogram cage is the completion of a derailleur from parts of broken derailleurs. This is a valid option since the last "generation" of Suntour derailleurs are identical in construction (leave out the Superbe Pro derailleur).

comment || digg this || add to reddit || add to del.icio.us || add to technorati

i do it my way - a blogger workflow

here is a quick outline of the procedure i use when preparing an article for a blog hosted on the appletalker scrapbook and other blogger hosted blogs to which i contribute my words of infinite wisdom. it's not a definitive guide and i'm not making any claims that this is the 'right' way to do it but, as anyone who blogs even semi-regularly via blogger knows, the process can be teethgrindingly irritating. after many years of trying different approaches [including using desktop clients like marsedit and ecto], this is the method that works best for me.

equipment needed:
• a rough draft of your article
• images used [prepared in a web ready format]
• a good HTML editor [i recommend textmate. beg, steal, borrow or even buy it!]

let's get started.

before i go anywhere near blogger, i write up my article in draft format in textmate. this allows me to work in a comfortably sized window in a text editor, rather than that cramped wee text entry box in the blogger interface. for some reason i always find my creative juices [such as they are] flow more easily when i'm writing in an anonymous text editor window, rather than staring at that blogger interface, trying to think what i want to say. i think it's the same psychological effect which causes all my greatest artwork to be scribbled on the backs of envelopes, while anything i try to draw in a pristine, eagerly awaiting sketchbook turns out to be shite.

draft version of article - written in textmate:

OK- so i've written up the text of my article. the next step is to source and prepare any images i want to include. for this i tend to use 'the daddy' [aka photoshop] but any image editor which will allow you to save images in a webready format will do.

i'm not going to go into the ins and outs of the various web-friendly image formats out there, but basically; GIF for graphical style images [logos, line-art etc], JPEG for photographic images and PNG for either [although PNG files tend to be larger in filesize than either GIF or JPEG]. if you want a handy hint on how to remember which format for which type of image, learning the meaning of the acronyms will help; GIF stands for graphics interchange format and JPEG stands for joint photographic experts group.

when saving web-ready copies of my images, i usually make them no larger than 800px on their longest side. blogger scales the images down to a maximum of 400x300px anyway for display on your blog, so as not to break the standard template layouts. [tho' people can click on the image to view a larger version in its own window], so you might as well scale your images with that in mind. unless you're showcasing your photographic talents with high resolution imagery, i dinnae see much point in uploading an image four times larger than it's going to be appear on the page. you might as well work to just over display size, so you know that the image is going to be 'readable' on the page at its reduced size.

it's at this point that i usually darken blogger's door for the first time, and create my new article.

before i type a word of text, i upload all my web-ready images into the new empty article. the reason i do this is because of one of the most infuriatingly irritating bugs in blogger; whenever you add a new image, blogger inserts the code for it at the beginning of the HTML for the article, irrespective of where the insertion point is in the text. this means that if you are in the middle of writing a long article directly in the blogger interface and you try to add the images as you go along, you have to constantly scroll to the top of the article [and remember this is all taking place in a postage stamp sized text entry box in your web browser], cut the code for the newly inserted image, scroll back down again to where your insertion point used to be and paste it in there. it's much less hassle to just dump all the images in at the start and then work the text in and around them as necessary.

uploading the images in blogger. use the 'add another image link' to queue your images in batches of five at a time for uploading. set layout to 'none' size to 'large' and make sure to upload them in reverse order!:

BTW - all the references to working in the blogger interface in this article assume i am working in edit HTML mode, rather than compose mode. in my experience compose mode generates such a complete hash of code spaghetti that when [not if!] something goes wrong with the layout, you'll be tearing your hair out, wading through all the auto-generated proprietary code tags, trying to sort it out. much easier and cleaner to write your own HTML and use edit HTML mode to work in.

compose mode = divil's butthermilk!:

i also turn off the preference [you'll find it under settings > formatting ]to automatically convert linebreaks, as i like to have complete control over the HTML code i'm using, and not rely on the blogger engine to second guess what i'm trying to do. besides which, this option generates loads of fugly <br /> tags in your code, instead of proper grown-up <p> ... </p> tags

turn off auto-linebreak creation:

one more caveat with image uploading; not only do i upload all my images before writing a single line of my article in the blogger interface but - just to make it even more fun! - i also upload them in reverse order.

'why is this?', you ask, with an idiotic expression playing about your simian features.

well, dear reader, it's because of the abovementioned fact that blogger will insert the code for each new image, as i upload it, at the top of the HTML code for the article. so if i have three images to put in my article [let's throw caution to the wind and name them image01.jpg, image02.jpg and image03.jpg] then, if i upload image01.jpg first and then image02.jpg, the code for image02.jpg will be inserted above the code for image01.jpg. carry on with the process for all your images and you'll find they appear on your page in reverse order.

dontcha just l-u-u-r-r-r-ve blogger!

one other thing i do is to use layout - none when uploading images. while this may not be as visually sexy as using the left, center [sic] or right options, which generate CSS float tags, it's a lot less hassle, as you dinnae have to faff about putting in 'clearing tags' where your text has wrapped round your images in unwanted ways. also set image size to large. this will make blogger use the actual size of the image if under 400x300px, or a maximum of 400x300px, if larger.

so to summarize where we're up to so far:

• write the draft of your article in a text editor
• prepare your images in web ready format [max size 800 x 600]
• create a new empty article in blogger and upload all the images into it in the reverse order they should appear on the page

once you've uploaded all your images, you'll have a nice chunk of HTML code in your blogger article, which will look something like this:

at this point it's time to abandon blogger's shitty interface and return to the saner world of your favourite HTML editor.

i now cut all the HTML image code from the blogger window and paste it into the top of my draft article document in textmate [remembering to set the document mode to HTML, so that i get access to nice syntax colouring and also textmate's excellent HTML editing tools].

image code pasted into my textmate draft:

at this point, this article is going to start reading a bit like an advert for textmate. i apologise in advance for this. i'm not on commission from macromates, nor do i have any links with the company or the developer, i just happen to think that textmate is the dog's bollox, when it comes to text editors on the mac. you may have your own favourites, but let me indulge myself by showing you how easy textmate makes it for me to format up my blog articles.

the first thing i do is put a few linebreaks in between the HTML code for each image. this disnae alter the formatting of the article in any way, as HTML ignores whitespace. but having a bit of whitespace between each image code block makes it easier for me to see where the 'gaps' are between the images, so i can start cutting and pasting the paragraphs of my draft article into the correct positions, relative to the images. at this point i make constant use of textmate's HTML preview window [accessed via [CTRL+ALT+CMD+P ] to make sure i'm cutting and pasting into the proper places. dinnae worry that, at this stage, the layout is all over the place. we've not added any HTML tags to format up the text yet. this part of the exercise is just about getting the various blocks of text and the images in the correct order.

spacing out the image tag blocs, so the dog can see the rabbit:

chopping up the text and inserting it in and around the images:

textmate preview window showing that, although the layout is still all over the show, we're getting all the 'bits' in the right order [BTW - the images in this and a few of the other screenshots are not actually from this article. that's because this article is one of those rare - and confusing! - ones where the article is effectively documenting its own creation. this makes it a bit difficult to include the actual images at some points, without causing huge rents in the space/time continuum. so you'll just have to use your imaginations!]:

now that the text has been cut'n'pasted into the proper order in relation to the accompanying images, it's time to start formatting it up.

i now surround each paragraph of text in <p> ... </p> tags. here textmate's' HTML formatting shortcuts really make the job a breeze. select a paragraph of text and hit CTRL+SHIFT+W this automagically wraps the selected text in HTML tags. by default these are <p> ... </p> tags, so the job's a good 'un. note however that the 'P' of the opening paragraph tag is selected. if i now start typing i can change that 'P' inside the tag to generate any other HTML tag i want. so, if i start typing 'a href='....' the tag will turn into an anchor [or link] tag, instead of a paragraph tag. the really nice thing is that as my typing changes the beginning tag, the end tag automatically changes to match.

hand-coding HTML made easy, the textmate way:

select your block of text:

hit CMD+SHIFT+W and textmate surrounds the text in <p> ... </p> tags

if you dinnae want a paragraph tag, just start typing and textmate will automagically update the tag pair:

but, as i say, i usually start with just adding the paragraph tags, whereupon, textmate's preview window shows that, at last, the article is starting to look readable.

with paragraph tags added the text is now readable enough for a bit of typo-hunting:

at his stage, with my text in a readable format, i usually do the first of many 'read throughs', checking for typos and sentences that are badly worded, even by my semi-literate standards. next, i go back and start adding the icing on the cake, as regards formatting up the rest of the article text; adding bold and italic tags, putting in links and making bulleted lists etc. [incidentally the traditional text formatting commands of CMD+B and CMD+I also work for adding bold and italic tags to selected text, as well as the CTRL+SHIFT+W then type B or I method].

one last textmate trick, before i finish my eulogy and return to getting my article up onto blogger; anyone who's ever hand-coded a list in HTML knows what a ball-ache that can be. with textmate's HTML shortcuts, it's a veritable piece of piss. assume you have a chunk of lines of text which you want to make into a list:

select the block of text:

hit CTRL+SHIFT+CMD+W - this command differs from the regular CTRL+SHIFT+W in that it surrounds each selected line individually in a pair of tags, rather than the selected block as a whole. these tags default to <li> ... </li> which is just what we wanted:

now select your block of text again [this time including the <li> ... </li> tags]:

hit CTRL+SHIFT+W - textmate surrounds the whole block in <p> ... </p> tags:

immediately type UL [or OL if you want an ordered list] - the tags change to <ul> ... </ul>

and there you have it - an HTML list, in less time than it takes to pick your nose. at this point anyone who's ever hand-coded HTML before and lists in particular will appreciate why i tend to get a bit evangelical about textmate on occasions.

one final suggestion although this isnae textmate specific; working in a text editor you can use find and replace to greatly speed up formatting as well:

dinnae forget that the good ol' fashioned find/replace can speed things up too:

OK - back to blogger. by now, thanks to textmate's HTML generating magic, you should have your article formatted up and ready to paste into that empty article you set up previously. proof-read a few times, fix any errors [i usually do this in textmate and then re-paste into blogger again] and then publish your article.

this has been quite a long article and i'm sure more than a few of you will be thinking - 'why go to all that hassle? why not just use blogger's compose mode or one of those desktop WYSIWYG apps like ecto or marsedit?'.

to which my answer is:

blogger's compose mode generates atrociously complicated and proprietory HTML code. if you dinnae care about your code, or the fact that WYS-is-not-quite-WYG then feel free to use it. just pray you never need to hand edit it when something goes wrong!

desktop blogger clients like ecto and marsedit work well up to a point. however they generate completely different image code from that which is generated when you upload images to blogger directly. you may actually prefer ecto or marsedit's image code, as it's more 'traditional' but the blogger image code does integrate better with picasa [which blogger uses to host your images] and which allows your images to be clicked upon to view a full size version [if appropriate]. i've kind of got used to blogger's image code, so that's why i use it as the starting point for hand-crafting my articles.

using a text editor to compose my articles and then pasting the code into blogger means that i have a clean HTML backup saved on my hard drive for every blog article i write. since i also keep the folder of webready images alongside the HTML file, a simple find/replace on the image tags in the HTML file would allow me to recreate a standalone version of that article, if i wanted to publish it elsewhere.

quite apart from these reasons, i actually find it less hassle to compose my articles this way. once you get your head round this way of working, it's actually more efficient and speedier and offers more control, than working in blogger itself or any of the desktop clients i have tried.

comment || digg this || add to reddit || add to del.icio.us || add to technorati

Suntour vintage Accushift Plus index control thumb shifter maintenance

Intro:
Many of you may know them, many still use them on their vintage mountain bike or randonneur and appreciate them because of their low weight and ability to be run in friction mode when the lever or the derailleur are somehow damaged. But as time goes by, and weather and dust keep on having a bad influence on the delicate mechanics inside such a lever, one may feel the need to overhaul the lever to restore correct indexing. This how-to article mainly relies on the pictures that illustrate the complete "clean-lube-adjust" procedure done with a 1991 7-speed Suntour XC ltd. thumb shifter. But this can be applied to all modern Accushift plus indexed shift levers Suntour produced during it´s last few years before it went out of business in the mid-nineties, even the road bike downtube shifters that are mounted on braze-on studs bear the same interchangeable mechanics inside and therefore can serve as a spare part supply (they can be purchased for a small fraction of that money one has to pay for a new out-of-the box NOS "thumbie").

Fig. 1: The thumb shifter (XC ltd. rear derailleur, Accushift Plus 7-speed) connected to the mounting bracket.

 

Fig. 2: The toggle screw removed which also serves the clamping of the friction/index mechanism in order to adjust the friction of the system.

 

Fig. 3: The mechanism inside the lever can be opened by removing a circlip in the recession of the plastic cap assembly using a flat head screwdriver.

 

Fig. 4: The cap assembly opened. The upper part of the friction/index mechanism is visible.

 

Fig. 5: The ball holder plate with the two indexing steel balls. The balls are inserted into the holes in line with the broad inner noses (not the ones marked with an engraved "circle" symbol!).

 

Fig. 6: The indexing cam ring. Seven pits on each side serve as resting points for the two indexing balls. This cam ring still looks good and needs only cleaning.

 

Fig. 6a: This cam ring taken from another thumb shifter (Suntour XC Pro, 8-speed) suffers from massive wear. The shifter was unable to "hold gears" and general shifting performance was poor. Note the "engraved" grooves between the index pits which prevent the correct positioning of the lever.

 

Fig. 6b: The index cam ring can be refurbished by grinding the surface until the grooves have disappeared. The index pits have to be deepened using a dremel tool and a fine abrasive tip.

 

Fig. 6c: The loss of thickness of the index cam ring has to be compensated by an additional washer. I prepared one by cutting and sanding an old credit card type plastic card (white ring inside the lever). During reassembly the new washer is placed under the index cam ring.

 

Fig. 7: An exploded view of all parts of the thumb shifter

 

Fig. 8: After thorough cleaning of all parts they are greased with a ball bearing grease and the lever is reassembled according to fig. 7. The ball holder plate must be inserted like it is shown in this picture. The friction/index cam plate has two areas, one with a pit which engages the friction mode and one with a flat surface which presses the indexing balls against the index cam ring and ensures the latching of the gears. For reassembly i found it suitable to insert the friction/index cam plate in friction position because the pits help to hold the whole mechanism in correct place. After placing of the cap assembly the whole lever can be secured by inserting the circlip. Although there is some special tool for handling circlips, with a little bit of patience and practice this step can be done using two flat head screwdrivers.

 

A cross-section scheme of the parts of the assembled thumb shifter. The blue parts are connected with the plate holder/axis, the black parts move with the lever during shifting, red: the index balls. This scheme also illustrates how the cup spring is assembled the right way.

 

To date i have managed to refurbish three Suntour XC Pro and one XC ltd. index thumb shifter, two of them had fully lost function before performing the touch up. This saved me a large amount of money spent otherwise and i hope this little how-to is of use for some of the folks that still ride Suntour equipped bikes out there. If you have any suggestions or questions concerning this how-to or other Suntour-related topics, feel free to contact me!

comment || digg this || add to reddit || add to del.icio.us || add to technorati

extreme contrast in photoshop

here's a handy technique for really giving your images some hyper contrast in photoshop.

let's take an image which looks a bit wishy washy and see what we can do to make it a bit more punchy.

here's one i prepared earlier:

traditionally you would up the contrast of an image like this by using photoshop's brightness/contrast slider, either by applying image > adjustments > brightness/contrast directly to the image or, if you're a wee bit smarter and prefer to work non-destructively, by using a brightness/contrast adjustment layer.

applying a brightness/contrast adjustment layer:

let's throw the contrast up full:

layers panel, showing the image with the brightness/contrast adjustment layer applied:

and here you have the final result - our wishy-washy image with the contrast shoved all the way up to 100%:

it's a lot better, but it's not 'hyper-mega-super-eleventy billion 111!!!-contrasty©'.

we could increase the contrast by applying another adjustment layer... and another... and another... but that's a time-consuming way to go about it and it also looks absolutely shite, as the image will very quickly start to almost posterise as you layer on additional contrast layers.

there is a better way and, weird as it may seem, it involves using that old favourite of anyone who's ever brought a scanned image into photoshop and had to sharpen it up; namely the unsharp mask filter.

first of all we need to select our image layer and choose filter > convert for smart filters [smart filters are the filter equivalent of adjustment layers, in that they allow us to piss about with filters in a non-destructive way. the original image remains untouched and the effects of any smart filters we apply can be increased, lessened or removed altogether].

convert the layer for smart filters:

next you need to apply filter > sharpen > unsharp mask to your image:

usually, when using the unsharp mask filter for it's 'regular day job' you'd start with the radius down quite low and the amount up around 50% and start twiddling from there. when using unsharp mask as a 'hyper-mega-super-eleventy billion 111!!!-contrasty©' filter, you start off the other way round.

turn the amount right down to 1% and whack the radius up to somewhere between 80 and 100 pixels:

now start edging the amount slider upwards. as you do so you'll notice that the contrast of your image starts to increase really dramatically. you'll also notice that you've got a helluva lot more contrast to play with as, unlike the traditional contrast slider, which only goes up to 100% - in true spinal tap fashion, the amount slider of the unsharp mask filter goes up to 500%. so you can add far more contrast this way than you can using the actual contrast controls in photoshop.

in the image below, i've knocked the amount up to 134%. that's probably a bit much for this image, as it's starting to bleach out in places, but it gives you an indication of what this technique can do. theoretically i've still got another 366% to play with [although in practice the image will break up before you get anywhere near that level].

amount turned up to 134%:

i eventually went for somewhere about 109%:

as you can see from the comparison below, the unsharp mask filter with the amount slider barely off the starting blocks gives far superior contrast to the brightness/contrast adjustment layer, running at full speed. it's an interesting technique and well worth having a tinker with, if you really want to go for some extreme contrast.

unsharp mask technique [LEFT] - traditional brightness/contrast adjustment layer [RIGHT]:

comment || digg this || add to reddit || add to del.icio.us || add to technorati

install eruby on mac OSX leopard

i've seen several guides to installing eruby on OSX - none of which i could get to work for leopard. but after much trial and error, i've managed to get eruby up and running on leopard, using a special mix'n'match blend, culled from various bits of other tutorials on the web.

so here is my guide to installing eruby on OSX leopard. as i say, this worked for me, when other guides didnae, but i'm not guaranteeing anything. 'your mileage' - as they say - 'may vary' and if you completely blow up your computer, following these instructions, you're on your own!

[if you're the impatient type, you can bypass the waffle and jump straight to a precis'ed code listing at the end by clicking here. the rest of you read on...]

first things first; fire up terminal.app so you can grab yourself a copy of eruby. at the time of writing the latest version is 1,0,5 but you can check modruby.org's archives before downloading, to see if there's a newer version and if necessary, adapt the following terminal commands:

download eruby to downloads folder and unarchive it

cd ~/Downloads

curl -O http://www.modruby.org/archive/eruby-1.0.5.tar.gz

tar -xvf eruby-1.0.5.tar.gz

cd eruby-1.0.5/

run the 'configure', 'make' and 'install' commands [as root]

./configure.rb

make

sudo make install

alias eruby into leopard's existing ruby frameworks

sudo ln -s /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/eruby /usr/local/bin/eruby

[NOTE: the above is all one line - not two separate commands!]

you should now have eruby working at a system level. close your terminal window and open a new one [to refresh your session] and then type eruby –-version, the terminal should greet you with something along these lines: eRuby version 1.0.5. if not - yep. you guessed it - go back to the beginning and start again. do not pass go. do not collect £200!

assuming eruby is up and running, let's test it on a file containing some ruby code. fire up your favourite text editor and create a new plaintext file with the following content:

hello world! the time is now <%= Time.now %>

save the file as rubytest.rhtml or rubytest.erb [either extension is valid] into your ~/Sites folder.

now switch back to the terminal and let's see what eruby makes of that file:

eruby ~/Sites/rubytest.erb

hello world! the time is now Thu Mar 27 19:47:53 +0000 2008

pretty cool! - now let's see what happens if we view it in a browser. make sure you've enabled websharing in 'system preferences > sharing', so that your apache server is running..

...and then goto the following URL in your browser [rem to replace 'username' with your username for your OSX account]- http://127.0.0.1/~username/rubytest.erb

whoops! - what's going on?

well, you've wired up leopard for eruby, but you havenae told apache what to do with ruby embedded in HTML files yet. so let's take care of that now.

back to the terminal. you need to edit apache's configuration file which, in leopard is found at /etc/apache2/httpd.conf. you can either edit this directly in the terminal using sudo nano /etc/apache2/httpd.conf - or, if you prefer to stay out of the terminal, use a texteditor which will allow you to authenticate on saving [you dinnae own /etc/apache2/httpd.conf, so you'll have to enter an administrator password to save changes to it].

my own particular favourite text editor is textmate.

open /etc/apache2/httpd.conf and make sure that the following line is not commented out. ie. if there's a # at the start of the line, remove it:

ScriptAliasMatch ^/cgi-bin/((?!(?i:webobjects)).*$) "/Library/WebServer/CGI-Executables/$1"

from what i've read, this line can also look like this:

ScriptAlias /cgi-bin/ "/Library/WebServer/CGI-Executables/"

but the first version is what i have. i suspect the latter may be the tiger version.

this tells apache to treat any files it finds in 'library/webServer/CGI-executables' as if they were in 'cgi-bin' and therefore as executable scripts.

after making sure that line is uncommented you need to search for a block which looks like this:

<Directory “/Library/WebServer/CGI-Executables”>

AllowOverride None

Options None

Order allow,deny

Allow from all

</Directory>

when you've found that, change the 'options' line so the block reads as follows:

<Directory “/Library/WebServer/CGI-Executables”>

AllowOverride None

Options FollowSymLinks

Order allow,deny

Allow from all

</Directory>

this tells apache to recognise aliases in the 'library/webServer/CGI-executables' directory. so if you place an alias to eruby in there, apache will be able to find eruby itself. you can do that in a bit. for now there's a couple more tweaks to make while you've got httpd.conf at your mercy. you need to tell apache to hand off any files ending in .rhtml or .erb to eruby in the apache cgi-bin

[only eruby will actually be an alias inside a directory which is in itself an alias for the cgi-bin - phew!]

the following lines need to be added to httpd.conf somewhere between the <IfModule mime_module> and </IfModule> tags. those two tags are spaced pretty far apart, with loads of comments and other lines of code in between, but as long as you make sure and put the two ruby lines somewhere between these two tags, you should be OK

<IfModule mime_module>

---- lots of code and comments ---

AddHandler rubypage .erb .rhtml

Action rubypage /cgi-bin/eruby

---- lots of code and comments ---

</IfModule>

save your changes to httpd.conf and you're almost done. you've just got to put that alias to eruby, that i mentioned above, into apache's library/webServer/CGI-executables directory. so back into the terminal with you and put in the following:

ln -s /usr/local/bin/eruby /Library/WebServer/CGI-Executables/eruby

now, you just need to restart apache and you should be good to go. before i restart apache, i always like to check i havenae ballsed anything up while messing with the httpd.conf file - by using apachectl configtest:

apachectl configtest

Syntax OK

if you didnae get a 'Syntax OK' from apache, you've cocked up somewhere, while editing /etc/apache2/httpd.conf and you're going to have to backtrack and fix it.

assuming apache's given you the green light, it's time to restart the webserver [as root].

sudo apachectl restart

now switch back to your browser again and reload that rubytest.erb [or rubytest.rhtml] page from before. if all's gone according to plan, you should now see some proper ruby output in your browser

woohoo! - that's more like it! now all you've got to do is learn some feckin' ruby to stick in there!

now. here's the precis version for folks who just want the commands, without the waffle

[TERMINAL: download, make, install, alias, test eruby]

cd ~/Downloads

curl -O http://www.modruby.org/archive/eruby-1.0.5.tar.gz

tar -xvf eruby-1.0.5.tar.gz

cd eruby-1.0.5/

./configure.rb

make

sudo make install

sudo ln -s /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/eruby

/usr/local/bin/eruby

eruby –-version

[TEXT EDITOR: edit/etc/apache2/httpd.conf]

ScriptAliasMatch ^/cgi-bin/((?!(?i:webobjects)).*$) "/Library/WebServer/CGI-Executables/$1"



<Directory “/Library/WebServer/CGI-Executables”>

AllowOverride None

Options FollowSymLinks

Order allow,deny

Allow from all

</Directory>



<IfModule mime_module>

----

AddHandler rubypage .erb .rhtml

Action rubypage /cgi-bin/eruby

----

</IfModule>

[TERMINAL: alias eruby to apache cgi-bin]

ln -s /usr/local/bin/eruby /Library/WebServer/CGI-Executables/eruby

[TERMINAL: test apache config and restart]

apachectl configtest

sudo apachectl restart

comment || digg this || add to reddit || add to del.icio.us || add to technorati

add a social bookmarking toolbar to your blogger posts

here's a quick tutorial on how to add a nice toolbar [with icons!] to the bottom of each of your blogger posts, that will allow your avid readership to post your drivel to the following social bookmarking sites; digg, reddit, del.icio.us and technorati. i've also incorporated blogger's built-in 'add comment' link into the toolbar, to keep everything neat and organised.

first of all, grab yourself some icons for the social bookmarking sites you want to provide links to. if you're feeling lazy, or you just want to use the same ones as i did, click here to download icons for comment [generic], digg, reddit, del.icio.us and technorati.

upload the icons to somewhere on the intarwebs. if you havenae got your own server space, you'll have to try one of those free image storage sites like imageshack, photobucket, flickr.. etc.

[NOTE: you'll actually have been given image storage space on picasa, when you signed up for blogger, but picasa makes it nigh on impossible for you to link directly to images stored thereon, without having you jump through half a dozen hoops, so [at least for this mission] you're better off hosting your own, or using one of the less hassle-filled alternatives]

now you're ready to start hacking your template. two caveats here:

1. make sure that you're using one of the modern templates. depending on when you first signed up for blogger, you may have been given an old-style template. you need to upgrade it to the new style templates, in order to be able to easily customise it. look under 'template > customise design'
   
   
   
   if you see a window full of code, you're ready to go. if you see the following dialogue, click 'upgrade your template' and then reselect it in its modern guise.
   
   
   
   [NOTE: if you've already hacked your existing template, you'll lose any changes when upgrading to the modern version, so be warned!]
   
   
   
   
2. you can only upgrade your template to the new type if you're using 'custom domain' or 'blog*spot address' as your publish settings. if you're using either 'FTP (publishing on your ISP server)' or 'SFTP (secure publishing on your ISP server)', you're out of luck.
   
   

phew! - still with me? - OK. here's the code i used to build the toolbar. notice it's not yer average HTML. it makes use of blogger specific tags such as expr:href inside the links. so normal HTML code willnae work here. note also that i've enclosed my social bookmark links [and blogger's own 'comment' link] inside their own <div> tag, of class 'linktoolbar'. this is so that i can style up the text and adjust the position of the icons later.

remember to change 'http://yourdomain.com' to point to wherever you stashed your icons!

<div class='linktoolbar'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img alt='comment' src='http://yourdomain.com/comment.png' height='16' width='16'/> comment</a>

||

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='digg' src='http://yourdomain.com/digg.png' height='16' width='16'/> digg this</a>

||

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='reddit' src='http://yourdomain.com/reddit.png' height='16' width='16'/> add to reddit</a>

||

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' src='http://yourdomain.com/delicious.png' height='16' width='16'/> add to del.icio.us</a>

||

<a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='technorati' src='http://yourdomain.com/technorati.png' height='16' width='16'/> add to technorati</a>

<br/><br/>

</div>

now you need to paste this code into your template in the appropriate place.

go to 'layout > edit HTML'

make sure you've ticked the box which says 'expand widget templates' - otherwise you'll only be shown the bare bones of your template's HTML - and not all the stuff you need

now you've got to hunt through all this code spaghetti [which the blogger developer's have kindly left bereft of anything so feckin' helpful as more than a couple of lines of code commenting!] and look for the line <p><data:post.body /></p>. again, these instructions are for the 'minima' template. if you're using a different template, the code may be slightly different.

paste your toolbar code immediately after <p><data:post.body /></p> as shown below

once you've pasted the code in, save your template and hit the preview button at the bottom of the template editing window

you should see the new social bookmarking links toolbar at the bottom of each of your posts. if you get an 'XML parsing' error while trying to preview, you messed up pasting in the code and you'll have to revert your template [by hitting 'clear edits' ] and try again. if your toolbar is in the wrong place, you've pasted the code into the wrong place in the template - or you're using a template that's laid out completely differently to 'minima' [which is the one i'm using here].

the toolbar's looking good as far as it goes, but the text is a bit big and i dinnae like the borders round the icons. luckily, since we put the toolbar in its own <div> tag we can use some CSS styling to tidy things up.

back to your template again and this time you're looking to stick your CSS definition in somewhere between the <b:skin><![CDATA[/* and ]]></b:skin></head> tags. the location isnae as vital this time, but i like to add my custom CSS just before the end ]]></b:skin></head> tag, so i can find it easily when the urge for further 'tweakage' is upon me!

right. here's the CSS i used to adjust my toolbar. use as is, or adjust to fit your own layout. the first declaration shrinks the text. the second removes the borders from the icons and moves them downwards by 10 pixels, so they line up better with the text.

.linktoolbar

{

font-size: 0.75em;

}





.linktoolbar img

{

margin-bottom: -10px;

border: 0px;

}

and here's the finished product. smaller text makes it a bit less clunky and the images now line up nicely with the text. as my old multimedia lecturer, steve marland used to say - 'job's a good 'un!'

well, that's it. dinnae forget to save your changes and then sit back and wait for all that extra traffic to come pouring in when people start adding your posts to the social bookmarking world - and, if you found this tutorial useful, why not return the favour by clicking on a few of the links in *my* social networking toolbar below!

comment || digg this || add to reddit || add to del.icio.us || add to technorati

archiving your photographs without iphoto

i've always hated the way iphoto forces you to adopt its system for archiving your photographs. it may work fine, while you're browsing around inside iphoto itself, but it's a major pain in the arse, if you just want to find an image quickly, without the overhead of firing up iphoto - plus, it makes finding a particular image on an archived CD or DVD an even more teethgrinding experience.

here's a handy technique i use for organising my photos into folders named by date taken. it makes for an easy to navigate archival system - with no need to depend on iphoto.

1. before you start, grab yourself a copy of datetree - a great wee utility which sorts photos by EXIF creation date

2. if you havenae done so already, set your prefs to open imagecapture when you connect your digital camera, rather thaniphoto. the pref for this is actually well hidden inside imagecapture itself....

3. when you connect your digital camera, imagecapture will open and the camera dialogue will come up. set "download to" to point to wherever you want to download your photos to, prior to sorting and set "automatic task" to point to datetree [you did remember to install that into your 'applications' folder, didn't you? ].

[you'll only have to do this the first time. next time you connect your camera and imagecapture opens, the dialogue will have these settings filled in already]

4. click "download all" or "download some" to download your snaps.

5. imagecapture will download your photos and fire up datetree, which will present you with a dialogue asking you where you want it to sort your photos into [i usually just have it sort them into the same folder as i downloaded the snaps to and then move them to my archive later.]

[again, you'll only have to do this the first time. datetree will remember these settings for next time]

6. click the "organise" button and let datetree do its stuff. when it's done you can quit it and switch to the finder and you'll find that datetree has copied all the photos into folders titled by the date the photo was taken [actually this is one of the minor annoyances i have with datetree - it copies the photos, rather than moving them, so you'll now have to throw away the original photos and keep the folders with the copies in ]

7. then, as necessary, i add a bit of descriptive text onto the end of specific folders to indicate if the photos therein were taken at a certain place or on a certain occasion and there you have it - a nice photo archive, easily searchable by date or folder keyword and free from all the unnecessary cataloging bloat that iphoto uses.

comment || digg this || add to reddit || add to del.icio.us || add to technorati

TIP: straightening wonky horizons in photoshop

[shamelessly lifted from my work blog - just to get the appletalker scrapbook ball rolling!]

 

we've all got photographs where the horizontals or verticals aren't quite perpendicular.

you can try to avoid this problem by not taking photographs while drunk but it's much more fun to use photoshop to fix things up later. this tip also works for teetotallers who just cannae get their perpendiculars perpendicular either.

1. first find an afflicted image. here's one i've deliberately 'wonkified' to an exaggerated degree. if your horizons are consistently sloping this much, maybe try a lower strength beer. 2. if you click and hold on photoshop's eyedropper tool, a popup window will appear in which you will see the much ignored ruler tool, which is generally intended for measuring distances on your images. not much use in your everyday photoshop work, the ruler tool does have one clever party trick which makes straightening out wonky images a veritable piece of piss.

3. use the ruler tool to drag out a line along a part of your image which is meant to be horizontal [or vertical - either method works]. here i've dragged out along my horizon line which - obviously - should be horizontal. but if the image was of a building or tree, i could drag a line with the ruler down the side of the building or trunk of the tree. you're just looking for something in the image which is supposed to be perfectly horizontal or vertical

4. now look under the image menu for rotate canvas and select arbitrary... this is the option which allows you to type by how many degrees you wish to rotate your image. 5. now here's the clever bit! when the rotate canvas > arbitrary dialogue box opens, it will contain a value already filled in. this value will be the angle that photoshop measured before, when you dragged out your line with the ruler tool, across your wonky horizon. photoshop is smart enough to know whether or not to select clockwise [CW] or counter-clockwise [CCW] as the required direction in which to rotate the canvas to make that line perfectly horizontal [or vertical], so all you need to do is click OK

6. hey presto! - your sloping horizon is now perfectly horizontal. however, it stands to reason that by rotating the image slightly to straighten the horizon, you've now introduced some whitespace at the edges. this will need to be removed by cropping the image. because i exaggerated the crookedness in this image, i'm going to have to crop quite a bit off my image. unless you're really cack-handed, your own images are unlikely need so much adjustment, so you'll most likely only have to crop a tiny part, to tidy things up

7. select the crop tool

8. drag over your image to select as much of it as you can, without including any of the white around the edges and then hit return.

9. and there you have it. not as large as the original image, but we now have a horizontal horizon and poor stío disnae look as if he's clinging for grim death, onto the side of a mountain any more.

comment || digg this || add to reddit || add to del.icio.us || add to technorati

using 'categories' with blogger

[shamelessly lifted from my work blog - just to get the appletalker scrapbook ball rolling!]

 

recently, one of my students, who had previously used wordpress, asked me if blogger 'did categories' because she wanted to file her posts under categories reflecting which college project they referred to.

'no...' i replied with the robust confidence of someone talking out of his nether regions '... blogger disnae support categories. the best you can do is organise posts by date'.

well, even a towering intellect like myself can occasionally get things wrong and, after further tinkering i have discovered that, whilst blogger disnae support categories per se, there is a way to make it behave as if it does, taking advantage of the fact that blogger does support attaching keywords to a post [or labels in blogger parlance] and does allow you to add some custom menus to your template layout [providing you're using one of the modern templates].

so here's how to use categories in blogger:

1. login to blogger and from the dashboard page click on layout to take you to the template section. then click on page elements.

2. now click on the add a page element link in the box at the top of your list of sidebar items [ profile and archives will already be there as defaults]

3. in the window which pops up find the labels item and click add to blog.

4. after you've added it you can click edit to customise the title. you may prefer to call it categories instead of labels. here, i've changed mine to tags.

5. you can also rearrange the order of the sidebar items. by dragging them. i've put my profile on top [and renamed it about me], labels [renamed tags ] underneath and archives [renamed previous drivel] at the bottom.

6. now whenever you write a post and want to file it under a certain category. use that category name as a label. the labels box is at the bottom of the posting box. to file a post under multiple categories separate them with a comma. if you've used a category name before, blogger will suggest it as you begin to type [below i've typed 'blogg' and blogger is guessing i'm referring to my previously used blogger category. to accept blogger's guess, just hit the tab key - it'll fill in the rest of the word for you and even add a comma, ready for the next one.

7. once you've done all that, you'll have a nice wordpress-esque categories menu on your blog, allowing you to archive your posts by category as well as date.

comment || digg this || add to reddit || add to del.icio.us || add to technorati

hello world!

welcome to the appletalker scrapbook. for a long time now, us appletalker regulars have been saying we should put together some kind of compilation of various handy tips, tricks and tutorials that have accumulated over the years on the appletalker forum - but which tend to get lost in the general day-to-day conversation. well, i've got a couple of weeks off from the day job for easter, so i thought it was about time to 'put my money where my mouth is'. so here you have it; the appletalker scrapbook. builds week by week into a complete compendium of 'stuff you didnae know you wanted to know' may god bless it and all who sail in it!

comment || digg this || add to reddit || add to del.icio.us || add to technorati