MooFlow is a Javascript based Gallery looks like Apple´s iTunes or Finders CoverFlow™.

Features

• Autosetup onload
• Autoresize on changes of Window dimensions
• Scrolling with mouse wheel
• Scrolling with key input (left and right cursor)
• Autoplay presentation loop

License

MIT-style license.

Code & Documentation

www.outcut.de

Inspiration

ImageFlow 0.6

Christian Effenberger is back with some more Canvas goodness. He has created Edge.js, a library that lets you apply an image mask (in the form of another image) to any image via unobtrusive CSS.

You initialize via:

And then you can simple add classes to the image: class="edge imask1".

Edge.js

I have previously posted about cheat sheets and recently saw a new cheat sheet plus this nice idea of making a desktop background with TextMate shortcuts, so I decided to write a post with a few tips related to finding TextMate functionality, conventions, and the modifier glyphs.

Common Misunderstandings

Two common problems users run into related to key bindings are:

1. Return (↩) is not enter (⌅) — Some actions will show ⌅ as the glyph, for example the button used in the commit window (for Subversion etc.).

   The enter key is part of the numeric keypad on external keyboards. Laptop keyboards generally have a dedicated key for enter, though it can also be reached by using fn-↩.

2. The menu glyph is not the key — When a glyph is shown in the menu then you need to press the keys required to generate that glyph. For example if the menu shows ⌃< (control less-than) then on a US keyboard layout, where you would normally press ⇧, (shift comma) to insert a less-than character, the full key sequence becomes ⌃⇧, (control shift comma).

   This also means that a key equivalent like ⌘[ requires you to actually press ⌥⌘8 on many european keyboards, which conflicts with the key to turn Zoom on/off (Universal Access). You can change the key used for zoom in System Preferences → Keyboard & Mouse → Keyboard Shortcuts (or you can use ⌥⇧⇥ to Shift Left in TextMate)

Finding Actions

A feature to be aware of when perusing the menus is that menu items can hide behind other items. Try for example to open TextMate’s File menu (in sticky mode) and press the ⇧ or ⌃ modifier key. You will see that a few items change their label. The item hidden beneath is a slight variation of the primary item, for example Close All Tabs is hidden behind Close Tab.

This feature is sometimes criticized because it makes things not discoverable by only looking, and TextMate makes it worse by not limiting itself to only hiding items behind a press of the ⌥ modifier key. But with an average of almost a dozen items in each menu (excluding the Bundles menu) I feel the added value in less items per menu makes up for lost usability in not having the items plainly visible — that said, some items presently hidden might become primary, and some primary items might become hidden. The goal is of course to hide what most users would anyway not use.

The Bundles menu is where all the functionality of TextMate is buried. Generally each language / task has its own bundle, but there are several bundles which offer general functionality, and in addition to looking at the bundles for the languages you use, I recommend also checking out the following bundles:

• Diff — This is not bbdiff or FileMerge (which is an oft requested feature) but rather a front-end to the diff shell command with some interesting document sources, for example compare your document with the last saved version, or see the changes between what’s on the clipboard, and the current selection.

  The latter action is useful if you somehow ended up with two versions of the same function and want to cut one of them. To ensure they are actually identical, just copy one to the clipboard, select the other, and now invoke Diff → Selection With Clipboard.

• Hyperlink Helper (new) — I plan to write a separate post about this bundle, as its design is also of interest: it has commands to generate a link from the current word/selection, for example by looking it up on Google, Wikipedia, etc. or using the current URL from the clipboard. The interesting thing is that these commands use a template for the actual markup, so the same commands work in BBCode, DokuWiki, HTML, Markdown, Mediawiki, MoinMoin, reStructuredText, Textile, and TWiki. Adding templates for new markup languages is easy and can be done without editing any of the commands in the bundle (which is the neat thing about this design).

• Math — If you ever need to do calculations while typing in TextMate, this is a very useful bundle. I did a screencast about the Math bundle.

• Source — Functions related to working with source code, this includes commenting/un-commenting text, toggling quotation style for strings (something I never thought I’d use, but actually use roughly on a daily basis), aligning code, and more.

• SQL — Although this bundle is for a language, I find it very useful to be able to execute SQL queries from scratch documents. Check out the Help file in this bundle for setup.

  Having snippets (with tab triggers) for typical queries makes TextMate an even more attractive query runner.

• Subversion — Not everybody knows that TextMate actually has very great subversion support (yes, you do not get to see the status of a file in the project drawer, but it basically does everything else and more :) ).

• Text — This is analogous to the Source bundle, but more geared toward prose and text in general. For source code editing though there are still some very useful actions, such as duplicating the current line / selection, sorting lines, deleting current line, inserting the current date, etc. This bundle also has a semi-oft requested Word Count command.

• TextMate — While this bundle is not directly for working with text, it has three very useful actions:

  1. Paste Line / Selection Online… — This will paste a syntax highlighted version of your text to pastie and allows you to send the link to Adium, iChat, Colloquy, the clipboard, or similar. If you are behind a proxy then Mac OS X Hints recently had a tip about using Paste Online behind a proxy.

  2. Create HTML From Document / Selection — This will generate HTML from the current document which you can use to get syntax highlight in Keynote or you can actually use Window → Show Web Preview to render it, and then hit ⌘P to print it, to make up for TextMate’s lack of color printing. If you do this a lot, I recommend going to the bundle editor, locating this item and change its output from New Window to Show as HTML, that way, it will open directly as rendered HTML (from where you can print).

  3. Install “Edit in TextMate”… — This will install an input manager that adds an “Edit in TextMate…” menu item to all Cocoa applications which you can invoke when editing text in a NSTextView or editable WebView (as is used in Mail).

• TODO — If you annotate your source with useful tags such as TODO and FIXME then you can use the Show TODO List from this bundle to show a nice list of things you need to-do.

• Xcode — If you work with Objective-C, don’t miss this crucial bundle for creating, building and running your Xcode projects, adding files to them, or quickly switch to the current project in Xcode.

So that was ten bundles you should familiarize yourself with in addition to the bundles for the actual language you work with. For something like Rails that might be both the CSS, HTML, JavaScript, Ruby, and Rails bundles, and maybe also the Prototype bundle, etc.

Remembering all the key equivalents and tab triggers is hard, and TextMate has a nice feature to help you here. In the bundles menu is a Select Bundle Item… action with key equivalent ⌃⌘T. If you only want to learn one key equivalent, be sure to learn that one!

Basically it opens a window very similar to the Go to File… window, where you can enter a search string to quickly jump to a particular file.

The Select Bundle Item… window works in a similar way. It initially shows you all the bundle items available from the current scope, but allows you to search these, for example entering “comment” will show several functions related to commenting, e.g. Comment Line, Insert Comment Banner, Insert Block Comment, Insert Comment Header, etc.

By default only items reachable from the current scope are shown, but if you type the search string in UPPERCASE then it will search all scopes.

The window can also search your bundle items based on the key sequence you press. Click the magnifying glass and change the search criterion from “Item title” to “Key equivalent”, now pressing a key sequence will show all the items (reachable from the current scope) that matches this key sequence.

Conventions

TextMate uses a lot of different modifiers and it might help remember them by understanding the conventions behind choosing modifiers for a key equivalent.

Many standard actions are offered by different bundles, for example both HTML, LaTeX, Markdown, and similar have an action for “making the selection bold” (by inserting appropriate markup) which is reached by pressing ⌘B. The list of “standard” action is given in the assorted bundles section of the manual and augmented by the bundles style guide (scroll down to Key Equivalents).

Keyboard Modifier Glyphs

Finally let me talk about the modifier glyphs in general.

The canonical ordering of the modifier glyphs is ⌃⌥⇧⌘, i.e. from lightest to heaviest glyph.

If you wonder how to easily type these glyphs then see my post about multi-stroke key bindings.

If you need a fixed width font to handle these glyphs (and many more) then I recommend the DejaVu Sans Mono font (based on Bitstream Vera Sans Mono). Mail has a tendency to switch font when rendering a glyph that is not available in the current one, so if you like to have your messages displayed using a monospace font and receive messages with fancy glyphs, then DeJaVu Sans Mono is the best choice.

A few weeks ago someone asked me to recommend a few useful books on Ruby. The first one? Using csh & tcsh. I spend a lot of time in the terminal and these shortcuts help in both tcsh and bash.

Reuse previous arguments

The ! operator gives you a quick way to refer to parts of the previous command.

!! (Full contents of previous command)

How many times have you tried to edit a file, then realize that you need to be root to do it? Use bang-bang to quickly repeat the previous command, with other commands before or after.

emacs /etc/init.d/mongrel_cluster
=> Permission Denied
sudo !!
=> Now opens the file as root

!$ (Last arg of previous command)

Sometimes I need to reuse the last argument with another command, like here where I forgot to quote a string.

wget http://weather.yahooapis.com/forecastrss?p=98117
=> wget: No Match
wget '!$'
=> Now it works

!^ (First argument of previous command)

I rarely use this, although it could have been used in the previous tip.

echo fish and chips
echo !^
=> fish # First argument

!:1 (Argument by number)

!:1 is the same as !^. The difference is that you can reference any element of the previous command.

echo fish and chips
=> fish and chips
echo !:1
=> fish # Same thing as !^

echo fish and chips
echo !:2
=> and # Word 2 in previous command, zero-indexed

echo fish and chips
echo !:0
=> echo # The very first word in the previous command

echo fish and chips
echo !:1-3
=> fish and chips # A range

!pattern (Repeat last command in history with pattern)

The bang is useful for re-running a command that you’ve run before. Spell out the first few letters and hit ENTER (or TAB to show the completion in tcsh). The shell will search backwards in your history until it finds a command that starts with the same letters.

I like the tcsh behavior since you can hit TAB to see what you’re asking for. Using this in bash can be more adventurous since you don’t know what command will be run until you hit ENTER.

rake test:recent
...
!rak
=> Runs 'rake test:recent' or last command starting with 'rak'

Sets

{a,b} (A set)

How often do you rename just part of a file? The {} syntax is convenient.

mv file.{txt,xml}
=> Expands to 'mv file.txt file.xml'

mv file{,.orig}
=> Expands to 'mv file file.orig'

mkdir foo{1,2,3}
=> Expands to 'mkdir foo1 foo2 foo3'

Mac OS X-specific

pbcopy and pbpaste

In Mac OS X, you can copy things to the clipboard and read them back out. This is nice because you can reuse it in the shell or back in the OS with Apple-C or Apple-V.

./generate_random_password | pbcopy

pbpaste > file.txt

ReMate is a TextMate plugin which can be used to disable the automatic project tree refresh when the application regains focus (for using SSH-FS etc.).

This version works differently:

• There is now a Configure ReMate option found on the Window menu – this lists volume names with a checkbox next to each for enabling/disabling automatic refreshing for projects in that volume. A volume will be added to the list the first time a project is created from files on it (i.e. /Volumes/Volume Name); automatic refreshing is disabled for new volumes by default.

• You can refresh an individual project manually by clicking the gear icon at the bottom of the project drawer and selecting “Refresh Project Files”

• This version is a Universal build

Download here, extract it and double-click to install.

Here’s a plug-in for TextMate which indicates the Subversion status of files in your project drawer.

Download it here. Simply extract and double click the SVNMate.tmplugin to install it into TextMate (you’ll need to restart TextMate for it to load).

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get:

Sliding doors

Since we want our buttons to be über-flexible, we'll have to make the background image expand with the size of the button's text. For that, we'll use the beloved sliding doors technique; two complementing images creating the illusion of a single, stretching image.

Our button will be a basic <a> tag with a nested <span>, each containing a different slice of the background image. Here's what the HTML looks like:

<a class="button" href="#"><span>Bring world peace</span></a>

Nothing out of the ordinary, right? Next, we need to come up with a crisp design for our button in both normal and pressed state. Here's what I'm thinking:

We will include both states in a single image. To switch between normal and pressed state, we'll simply shift the background image vertically, revealing the alternate button state. This CSS based approach allows us to perform the switch without the need for any JavaScript trickery. Let's merge these two and apply the sliding doors cut. The part of the image that will accomodate the button text will be set to a reasonable 300px. The height we'll set to 24px.

Styling the button

Finally, we need a fair bit of CSS to bring all this together. Since we might want to line up several buttons horizontally, I decided to float them by default. (Floating them also makes the buttons wrap nicely.)

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

Note: Make sure the span's vertical padding (5 + 5) and line-height (14) amount to the total height of the button (24). Using a different padding, means setting a different height.

We now have a pretty looking button, but it doesn't exactly give us much visual feedback when we press it. So let's add that finishing touch of CSS:

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

All done! Go ahead. Click 'em!

One extra measure for IE

Although hardly catastrophic, IE does not return the button to its normal state whenever it's released. To force such behaviour, we need to add a tiny bit of JavaScript to the <a> tag:

<a class="button" href="#" onclick="this.blur();"> … </a>

To submit forms with this type of button, simply add more calls to the button's onclick event.

Prototip vous permet de créer facilement des bulles d’aide simples ou complexes, avec texte seul et/ou image. Prototip requière le framework Prototype. Si vous utilisez aussi Scriptaculous, vous pouvez même leur ajouter des effets visuels.

Vous pouvez créer facilement des bulles d’aide fixes avec des effets de fondu. Vous pouvez également définir où s’afficheront dans votre fenêtre Internet les bulles d’aide.

Coté programmation, depuis la sortie de la version 1.6, Prototip a été complément ré écrit et a vu naître plusieurs fonctionnalités : gestion des clicks de la souris, ouverture/fermeture des bulles d’aide, la possibilité de personnaliser vos infobulles avec la prise en charge du CSS… 

// The class is assigned to the href.

.borderit img {
	border: 1px dashed #776e09;
	padding: 2px;
}
.borderit:hover img {
	border: 1px solid #fff71c;
	padding: 2px;
}
.borderit:hover {
	color: red; /* irrelevant definition to overcome IE bug */
}

There are many advantages to designing with Cascading Style Sheets. CSS is extremely easy to learn and rework once a basic site framework has been established. Websites, or website components can easily be changed into something totally different just by swapping a single CSS file, or a line within a CSS file.

CSS designers always seem to have a few different elements that they commonly use over and over in all designs, these can include navigation elements and form fields, among other items. Smashing Magazine has compiled a list of 53 CSS Techniques that you couldn't live without, linking out to tutorials on CSS navigation, tabbed navigation, bar graphs, rounded corners, hover effects, image map, submit buttons, custom bullets, and sidenotes. Whether you are new to CSS, or have been in it for a while, these are some great tutorials to have archived as reference materials.