Beckism.com

I’ve always been intrigued by the concept of a program for storing code snippets, but I’ve never found one that I could put to any practical use. I inevitably would end up storing a few snippets in it, and then abandoning it for my text editor’s built-in snippet management because it introduced too many extra steps when it came to inserting snippets as I code. External snippets managers had some very real benefits, but none that outweighed the usefulness of tab completions and tab stops.

Fortunately, I think I finally have a snippet manager that will work for me. Snippets.app 1.1.1 offers a unique new feature: a bridge API that allows third party applications to invoke the Snippets search panel or global menu and then do whatever they need to do with the user’s selected snippet. While they were working on the feature, Lucky Ants asked me if I’d like to help them show it off, so I collaborated with them to develop the Snippets.sugar for Espresso (download it here).

In case you don’t have a clear idea of why this is awesome, here’s what you can do with it:

1. Once the Sugar is installed, choose Actions→Snippets.app→Insert Snippet (control-S) while editing a document in Espresso to jump to the Snippets search panel (or global menu)
2. Find the snippet you want to insert, and hit enter
3. The snippet will be inserted into Espresso, and any placeholders in the snippet will be converted into tab stops

It’s that last feature that vastly improves Snippets.app’s usefulness. Previously, snippets managers were basically just cut and paste. With Snippets.sugar’s integration into the core application’s APIs, though, you can leverage the full power of Espresso’s text snippet syntax.

That’s fun, but it gets better:

• Your snippet can contain Snippets.app-style named placeholders or Espresso/Textmate-style numbered placeholders and they’ll automatically be converted into tab stops
• Your snippet can contain Espresso or Textmate special variables like $EDITOR_PATH or $TM_SELECTED_TEXT, allowing your snippet to interact with your selected code, prefill the path to the document, and so forth
• Because it’s an Espresso snippet, you can also use interpolated shell code, placeholder mirrors and transformations, etc.
• When inserting a snippet that doesn’t contain any placeholders, it will be inserted as plain text, so you won’t have to worry about losing special characters like $ that sometimes get messed up in Espresso snippets

Additionally, you can move in the other direction. Just select some text in Espresso and choose Actions→Snippets.app→New Snippet (control-shift-S) to create a new snippet in Snippets.app using the selected text.

To choose whether to use the search panel or the global menu, open up the Espresso preferences, switch to the Advanced pane, and make sure that Snippets.sugar is selected in the dropdown at the top. There you’ll be able to choose what interface you like, force the Sugar to always use a particular type of snippet logic (if that’s necessary for some reason), and set some defaults for when you’re creating new snippets:

Although this is a fantastic feature, you’ll still need to weigh up some pros and cons before you jump straight into it. On the positive side, it’s now feasible with Snippets.app to have a single, well-organized snippet library that includes advanced tab stopped snippets and can be shared across multiple text editors (for instance, this would make it a breeze to migrate a Textmate snippet collection for use with Espresso). Thanks to Snippets.app’s synchronization capabilities, you could also use your snippets collection across multiple computers far more easily than when Espresso’s snippet management features.

The main downside is that although the Snippets.sugar integrates Espreso and Snippets.app far more closely than before, it still is not a seamless integration because Espresso doesn’t know anything about the snippets until you select them. This means that you can’t use tab completions to trigger snippets, so the process of selecting the snippet you want to use is still relatively time consuming compared to using native snippets.

For more information about the other goodies available in Snippets.app 1.1.1, see the 1.1.1 blog announcement. I hope you enjoy Snippets.sugar!

I had a heck of a time implementing a simple scene fade (or “scroll fades” as they’re also called) in TapNote, mainly thanks to the lack of good information surrounding them. Most folks in the Palm forums recommend looking at the Style Matters example project, but Style Matters was apparently coded by someone who also believed that Coding Style Doesn’t Matter, so screw that.

Sadly, scene fades are only provided for free with some elements (the command menu, for instance), so most of the time you have to implement them by hand.

To get your scene fades up and running, you’ll need to stick a little extra HTML in your scene, add a CSS snippet to your stylesheet, and copy the image resources into your app.

HTML

The HTML is very straight-forward. Just stick this at the very bottom of your scene (don’t nest it in anything):

<div class="scene-fade bottom" x-mojo-scroll-fade="bottom"></div>
<div class="scene-fade top" x-mojo-scroll-fade="top"></div>

Obviously, if you only wanted a top or bottom fade, you’d only include one or the other.

CSS

This CSS snippet is a vastly condensed and improved version of the CSS used by the Style Matters program. Note that you’ll probably need to set height: 100% on your HTML and body elements because otherwise the absolute positioning of the scene fades might not work. If you do so and you’re still not having your bottom scene fade positioned properly, try additionally setting height: 100% on the wrapper element for your scene.

html, body {
    height: 100%;
}

/* === Scene Fades === */

.scene-fade {
    height: 54px;
    width: 100%;
    position: fixed;
    left: 0px;
    z-index: 100000;
    -webkit-palm-mouse-target: ignore;
}

.scene-fade.top {
    top: 0px;
    background: url(../images/fade-top.png) repeat-x center bottom;
}

.scene-fade.bottom {
    bottom: 0px;
    background: url(../images/fade-bottom.png) repeat-x center bottom;
}

Images

The images you need are squirreled away in the WebOS SDK. For instance, the ones I ended up using were located in this folder:

PalmSDK/0.1/share/samplecode/stylematters/images/

And were called my-scene-fade-bottom.png and my-scene-fade-top.png.

If locating those images is too much effort, though, you can just download the example code.

Finally, you will of course need to drop the images into your root images folder, and adjust the path to them in the CSS if it’s located more than a single level away from the project root. Enjoy!