VoodooPad 5 released

VoodooPad 5 is out, and it’s awesome. Here’s some of what makes me excited about it:

  • All-new file format allows synching via Dropbox or version control (like git)
  • Markdown pages (with syntax coloring, and smart Markdown authoring features like automatically extending lists)
  • New event scripts make automating document tasks a lot more consistent

Also, VoodooPad just generally rocks. Go buy it; it’s on sale for a limited time.

There’s a ton of other new stuff, but I’ll leave it to you to read about it if you so desire.

Instead of gushing on about the new version, I wanted to share a project of mine that provides a starting point for using the new VoodooPad 5 hotness to create a static website. I call it, creatively enough, my VPWebsiteTemplate:

https://github.com/onecrayon/VPWebsiteTemplate

VoodooPad 5 already offers a lot of great features for exporting a website version of your document. What the VPWebsiteTemplate does is provide some scripts that offer additional functionality:

  • Automatic renames pages when you create them to be URL-friendly
  • Automatically generates page breadcrumbs using tags
  • Copies image and Javascript assets into folders (instead of having everything cluttering up your root website directory)
  • Adds support for Markdown-Extra style header IDs for easier same-page navigation
  • Automatically strips out nested links if VoodooPad and Markdown interfere with one another

And a number of features that stem from its origins as a static app documentation site generator:

  • Converts -> and => into → entities
  • Converts shortcuts using the format `command H` to use <kbd> elements (for easier styling as shortcuts)
  • Fixes paragraphs wrapping <aside> elements (since Markdown doesn’t handle HTML5 elements well)

VoodooPad isn’t appropriate for everything, but if you need to manage a static site with a single shared template (or a single template with minor variations), it’s hard to beat. The Markdown handling, dead-easy synching, and fact that you can package up absolutely everything about your site into a single file that is shareable with other VoodooPad users make it a really compelling solution for anyone who has had to fight with command-line static site generators before.

Documentation for using the VPWebsiteTemplate is available inside of the file itself, so go download it from GitHub already if you’re wondering how everything works. Happy Voodoopadding!

Organizing and packaging an Enyo 2 app

I enjoy using the Enyo framework to write apps (mainly because I am familiar with it from webOS development; it’s not perfect for everything by any means, but it’s one of the fastest methods for me to move from a mockup to a working app), and lately that has meant experimenting around with the pre-release (but public) version of Enyo 2.0. Unfortunately, Enyo 2’s documentation is pretty hit and miss at the moment. If you have used Enyo in the past most aspects of Enyo 2 should be very familiar, but for some tasks you simply need to dig into the source code and figure out how things work by hand.

One of those tasks is building Enyo for use in a production environment, and since I’ve been fighting with this over the course of my development of TapWatch, I figured I would share how I am doing things.

Project organization

To start, here’s how I typically organize things in my project’s root folder (this is certainly not proscriptive, but you need to know it to understand the logic behind the scripts that follow):

- build/
- css/
- images/
- source/
  - enyo/
  - lib/
    - onyx/
  - kinds/
  - package.js
- tools/
  - build.sh
  - package.js
- dev.html
- index.html

Working top to bottom, build is where my final production builds will end up, while css and images are where I store my common stylesheets and image files. Keeping these both in the root of the project makes things easier when it comes to previewing the app during development.

The source folder is where I store all of my Javascript files. Enyo 2 will automatically load package.js when you link against its parent folder, so the root package.js file is my access-point for all of my app-specific functionality. I typically store my custom app kinds in the kinds folder, although depending on the complexity of the app I might break them up differently (for instance, organize based on views, models, and so forth). Where you store your app code doesn’t matter a jot, to be honest. You can go as simple or complicated as you want.

I use git to manage my project, and the enyo and onyx folders are git submodules pointing to their respective GitHub repositories. I like using submodules because it makes it ridiculously easy to test out bleeding edge additions, while still being able to fall back to a particular commit or tag that I know is stable if I need to prep a build for distribution. Using submodules also allows me to experiment with different versions of Enyo and Onyx for different apps. If I were storing it in a central location, I could inadvertently break things in one app by updating Enyo for use with another. GitBox, my favorite Mac git client, provides great support for submodules; after you add them, you can manage the submodule just like another repository, and it’s one click to revert to your last saved commit if you are experimenting with bleeding edge commits.

The relationship between the enyo folder and the lib folder containing Onyx and any other official or third-party packages is something you will want to maintain. By placing your packages in lib next to the enyo root folder you can very easily access your packages without worrying about their specific placement using the special strings $lib and $enyo in your package.js files.

The tools folder is where I store my build.sh script that is responsible for putting together my production builds along with other utilities; more on that in a bit. The package.js file inside of tools simply links against the Enyo source and my app’s main package; this is used by Enyo when building itself for production use.

Lastly, dev.html is my entry point to quickly preview my app in a browser, while index.html is the actual HTML file that I will use in my production builds. These two are different because the development version needs to link against my various CSS resources, Enyo, and my app source separately, while the production version links against a much smaller number of compressed files.

Of course, I include a number of other things in my project root folder that aren’t shown here both to cut down on the complexity and because they are not applicable to all projects. For instance, I typically store platform-specific code and resources in top-level folders (iOS, webOS, etc.).

HTML files

Before you need to worry about building your production scripts, you will want to setup your HTML to allow you to process your app. As you can see above, I keep at least two copies around: a dev.html file for quick browser testing, and index.html for the actual production code.

My TapWatch dev.html files looks like this:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>TapWatch Dev</title>

    <!--Include Enyo (debugging); automatically includes Enyo styles-->
    <script src="source/enyo/enyo.js" type="text/javascript"></script>

    <!--Include styles-->
    <link rel="stylesheet" href="css/styles.css" type="text/css">

    <!--Include application-->
    <script src="source/package.js" type="text/javascript"></script>

    <!--Configure for viewing on mobile devices-->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--LiveReload, for live refreshing-->
    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</head>
<body>
    <script type="text/javascript">
        new TapWatch.app().write();
    </script>
</body>
</html>

Most of this is stuff you can just copy and paste straight into your own app (aside from the point where I initialize TapWatch, of course).

One item of interest is the LiveReload integration. LiveReload is an awesome tool for Macs (although I believe there’s a Window pre-release version, too) that can watch your web folder and do things like automatically compile LESS files every time you save and then ping the preview that the styles have changed. I use this in conjunction with the Espresso preview to have a preview of my app in my editor that updates while I work. This is an insanely helpful bit of wizardry; being able to see my changes in live time really speeds up my workflow.

As for the production-ready index.html, it’s a bit simpler:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>TapWatch</title>

    <!--Include our styles-->
    <link rel="stylesheet" href="css/styles.css" type="text/css">

    <!--Include our application sourcecode-->
    <script src="sources.js" type="text/javascript"></script>

    <!--Configure for viewing on mobile devices-->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
    <script type="text/javascript">
        new TapWatch.app().write();
    </script>
</body>
</html>

The links to sources.js and so forth rely on my specific build layout; trying to preview this file from anywhere but a final build folder does nothing.

The tools folder and build.sh

In order to build your production app you are going to need to get your hands dirty with a little shell scripting. Never fear, though! The process is fairly simple, and the necessary shell commands innocuous.

You will probably want to do some or all of the following:

  • Compile Enyo, any third-party packages you depend on, and your app’s code into a single file (this is a very easy one-step process, but it will require that you install node.js first)
  • Concatenate and minify your built app with third-party scripts (like cordova.js if you are building a PhoneGap app)
  • Concatenate and minify your CSS, if you have more than one CSS file
  • Copy the files you need for a production build (and only those files) into your build directory for distribution
  • Perform any platform-specific logic

In order to accomplish these tasks, my personal build.sh script does the following:

  1. Creates a tools/compiled/ folder in which it will collect in-process files (I exclude the compiled folder from git in my .gitignore file)
  2. Creates a build/www/ folder in which it will output the final production build
  3. Uses Enyo’s built-in minifier to package the app’s core files
  4. Further concatenates and minifies CSS and Javascript using YUICompressor (this step is entirely optional, or you could always use a different minifier); I have yuicompressor-2.4.7.jar installed in the tools folder so I don’t have to worry about where it is in the path
  5. Copies images, css, compiled scripts, and the index.html file into the build/www/ folder

And here is the code:

#!/bin/bash

# Setup path to node (to make sure it's in the path)
export PATH="/path/to/node/bin:$PATH"
export NODE_PATH="/path/to/node:/path/to/node/lib/node_modules"

# Make sure the base directory is the tools directory
# This makes sure relative paths always work right
ORIGINAL_PWD="$pwd"
cd "$( dirname "${BASH_SOURCE[0]}" )"

# Ensure basic paths exist
# If we don't do this, later actions might fail
mkdir -p compiled/enyo-min
mkdir -p compiled/css
mkdir -p ../build/www/images
mkdir -p ../build/www/css

# Build the app and Enyo
../source/enyo/tools/minify.sh -no-alias -output compiled/enyo-min/app package.js

# YUI compress our Javascript
cat compiled/enyo-min/app.js | java -jar yuicompressor.2.4.7.jar -o compiled/sources.js --type js

# YUI compress our CSS, as well
cat compiled/enyo-min/app.css ../css/styles.css | java -jar yuicompressor-2.4.7.jar -o compiled/css/styles.css

# WWW build
# Copy our latest images, CSS, and HTML to the www directory
rsync -av ../images/ ../build/www/images/
cp compiled/css/styles.css ../build/www/css/styles.css
cp ../index.html ../build/www/index.html
cp compiled/sources.js ../build/www/sources.js

# Resume our working directory
cd "$ORIGINAL_PWD"

Of course, this is pretty specific to my own project; you would likely be using completely different paths for some of the items, and you might not want the extra minification and so forth.

The most important bit is the line that builds Enyo and the app:

../source/enyo/tools/minify.sh -no-alias -output compiled/enyo-min/app package.js

As best I can tell, the -no-alias argument has to do with how Enyo dependency loading is handled. I have not had a chance to test what aliases do, though. The -output argument specifies the file name (with optional folders prepending it). So in this case, the final files will be called app.js and app.css, and will be stored in the compiled/enyo-min/ folder. There are a couple of other arguments, but when loading the minify script from directly within your Enyo installation, they don’t appear to be necessary. You can always use the -h argument for a full listing.

In order for the Enyo minify.sh script to work, you will want to include this in your tools/package.js file to tell it to combine Enyo with your app:

enyo.depends(
    '$enyo/source/minify/',
    '../source/'
);

There are some other fun things you can do in the build script, as well. For instance, if you are building an iOS app using PhoneGap or similar, you can use the following conditional statements to process differently when you are running the script from an Xcode build step vs. directly:

if [ -z "$IPHONEOS_DEPLOYMENT_TARGET" ]; then
    # SCRIPT EXECUTED DIRECTLY
fi
if [ -n "$IPHONEOS_DEPLOYMENT_TARGET" ]; then
    # EXECUTED FROM XCODE IOS BUILD STEP
fi

And of course you can add platform-specific build steps using the same basic tools (rsync -av to copy all files in a folder, cp to copy a single file, and mkdir -p to make sure an entire directory path exists are all very handy).

Once you have your build script setup, you can create a custom build by executing the build script in the Terminal, or by adding it to your build steps in Xcode or similar if you are building for a specific platform.

Go forth and build

Hopefully my particular setup has provided you with some ideas or a starting point for organizing and building your own app’s source for production distribution. Enjoy!

Learning to code

Two of my younger extended family members have contacted me recently wondering how to get into app development, which is admittedly kind of a puzzler for me (apparently publishing TapWatch gained me some level of legitimacy, even though TapNote continues to vastly outperform it, dead platform and all). I could recommend a book, I suppose, except that the only coding book I have ever used is Dynamic HTML: The Definitive Reference. Dynamic HTML is fantastic if you need to reference absolutely anything to do with HTML, CSS, or Javascript, but a lot less useful for someone who wants to write, say, Objective-C and has only the foggiest of ideas about what they’re getting into.

Frankly, the way I learn a new language or tool is by using it. I start with a project, usually something I want to use myself, and then just jump in feet first. This typically involves scouring the internet for example code, tutorials, and prior art that I can implement and tweak to my own needs while regularly banging my head against the wall. I’ve bought a few coding books aside from Dynamic HTML over the years, but I never make it very far past the introduction. They bore me to tears. Head-to-wall contact is admittedly a bit painful, but it’s a lot more interesting and the things that I learn tend to stick.

So recommending books is out. I’ve heard good things about a few of them, but having never read any (or learned anything substantive the few times I did try to crack their covers), I’m rather unqualified.

But saying, “Just find a project and run with it!” isn’t terribly helpful, either. That’s a great way to encourage a proto-coder to drop the whole idea before they really get started. Especially if their ultimate goal is writing an app for their favorite iOS device, which can be a complicated and frustrating process even for veteran coders.

And at this point I find myself staring at a blank email, certain I am about to send my young relative down the path to a sad and codeless life.

Though I may not have a lot of practical knowledge when it comes to easing your way into coding, I do have a fair bit of observations based on first-hand experience to offer. Perhaps that will be helpful instead.

Overcoming the wall

The land of coding is a wonderful, magical, frustrating place but to get there you have to find your way over the wall that surrounds it. This isn’t a learning curve (although you’ll find plenty of those beyond); it is a wall. Steep, high, and not exactly obvious in approach. The simple fact is that coding is unlike anything you have ever done previously. When you write code, what you are actually doing is using a specialized language to lay out simple, logical instructions for a device that can only make the mistakes you inadvertently tell it to make (the trick is that huge numbers of other people have already layered on numerous strata of instructions with their own inadvertent mistakes that you are building on top of, so even if your code is perfect you still may find yourself running into problems that encourage head-meet-wall interaction).

There are analogs to other things you might have learned in the past (other countries’ languages, scientific experiments, math, art), but particularly if you do not know what you are getting into, jumping into coding will likely feel like running into a wall. You can vaguely see where you want to be when you back up far enough, but when you get close the whole thing is simply overwhelming.

But do not fear! Many of the other people who have scaled this wall in the past are there to help you over, through, or under it.

Your first coding lesson

I shall now give you your first coding lesson. Learn this, and you’ve basically lopped off the top few feet of the wall before you ever reached it.

Here it is: dream big, act small.

There are numerous desires that lead people to coding, but probably the two most common I run across are the desire to make money and the desire to make a tool you yourself want to use. And make it right this time, because darn it those other developers are approaching the problem all wrong.

Both are great motivations, but keep in mind that neither is something you are likely to accomplish immediately. Especially when it comes to app development a lot of people nowadays are going into it with stars in their eyes, imagining their app taking off on the bestselling charts and making hundreds of thousands of dollars in a month or two. Banish this fantasy! Yes, it is remotely possible you could succeed wildly with your first app/website/whatever, but the chances of it are vanishingly slim. Striving for widespread adoption is laudable, but if you measure your success solely against it you will quickly become discouraged, and discouraged people don’t ship software.

So have your big dream, but act on smaller things. Coding is about taking a complex problem and breaking it down into manageable smaller steps. It is about understanding the limitations and restraints you are working with and finding ways around them or adapting your code and vision to work within them. It is about having a laundry list of features that you know you absolutely must implement, but being able and willing to ship only the tiniest subset of them in your initial 1.0 release, and then steadily adding more as you go.

It is about realizing that you are not, in fact, facing a wall. You are facing a collection of stones, each of which is much easier to deal with on its own.

Three things to master

At root, there are only three things you have to learn:

1) The basic building blocks: variables (typically composed of arrays, strings, numeric types, dictionaries), functions, loops, conditional statements, and (for most modern languages) classes and objects. Learning about this stuff pretty much allows you to write in any coding language you want; usually the only thing that differs between languages is the specific syntax you use, which is (typically) easy to pick up. Coding is simply a specific, logical way of thinking and communicating using a small number of standard tools.

For basic building blocks, you can find any number of “getting started with language X” tutorials and resources online. Look for the very early introductory materials that introduce variables, functions, etc. and read through them. Once you understand if/elseif/else blocks, for and while loops, variables, and functions you will have the basics for what you need to read and write code.

2) The syntax: every language is different, so before you can write one or another you have to figure out how it handles the basic building blocks from above. For instance, here’s the same variable (a string) in three different languages:

Javascript:

var helloString = 'Hello world!';

PHP:

$helloString = 'Hello world!';

Objective-C:

NSString *helloString = @"Hello world!";

Exact same meaning in all three, but slightly different requirements for each. When you are learning the building blocks above, try to find a tutorial for whatever language you are most interested in working in right away, because all the examples will use its syntax, allowing you to learn both at once.

3) Specific capabilities: every language and environment offers slightly different built-in functions and so forth that you can call upon. This is the stuff that I typically spend very little time learning, and look up as I work.

For instance, PHP has a zillion functions that help with anything from manipulating strings to connecting to databases, and it would be a complete waste of my brain to try and memorize them. Instead, I keep the PHP documentation handy when I am working in that language and reference it when I need to figure out how to do a particular task.

The same applies to Objective-C; a lot of the complication behind Objective-C is that most of what you will be doing is working with the framework’s provided objects, functions, and methods, and since there are so many of them it can be overwhelming when you get started. Instead, ignore them. It might be worth skimming over some of the functions provided for working with the basic types of variables like strings, arrays, and dictionaries so you have an idea of what things you can do out of the box, but typically it’s easier to look this stuff up as the need arises.

Practical application

Lovely abstract overviews and pithy sayings may make you feel good, but coding is a practical activity and up to now I admittedly haven’t offered much specific, practical advice. Let’s change that, shall we?

When you are first getting into coding, any language you learn is going to help. They all will teach you the basic building blocks (and for a lot of them, you’ll pick up a fair amount of common syntax, too), so it doesn’t matter at all where you start. The corollary of this is that learning a language other than the language you want to work in might be a good idea, particularly if it will allow you to see results more quickly (and based on my own experience, seeing results quickly is important; there is something truly magical about using something you have programmed that pays for the frustration and difficulty leading up to that point).

For instance, if I were just now getting into coding with the ultimate goal of publishing a native Objective-C app, I would not start off working in Xcode and trying to learn Objective-C.

I would learn Javascript.

The benefit of Javascript is that a lot of the syntax is very similar to C, but because it is a high-level language you can go from learning the building blocks to actually creating something a bit quicker (and typically with less frustration, although there are certainly pain points in Javascript, as well). Javascript has its share of unique quirks, but with your pick of frameworks like Enyo, jQuery Mobile, Sencha Touch, and others you have some very useful tools that can speed things up by providing common interface elements and other niceties.

Granted, you will likely want to learn a framework in addition to the language itself to use them, but the same is true of Objective-C (coding in Objective-C is practically nothing but learning to use a framework).

How I would learn Javascript is a little more up in the air, but I have heard excellent things about Codecademy, so I would likely start there, and then quickly transition into writing my own app as soon as I learned enough to be dangerous. Most Javascript frameworks also have active communities surrounding them, so I would try to leverage those to help me get over the difficulties of going from idea to actual working interface elements on screen.

Once I had a working, simple Javascript app, then I would start digging deeper into Objective-C as I moved toward my true goal.

Other resources

Not everyone learns the same way as I do. If you learn better through books, then by all means visit your local bookseller, consult some Amazon reviews or similar, and try one of them.

Regardless of what you are interested in coding, I would also highly recommend taking a course in C if the chance arises (or C++, but C is far more universally useful). A local community college would probably be the most likely place to find something like this. When I was in college, taking a course in beginning C++ was an incredible boon. It taught me a lot about not only C (which has been useful when I need to write Objective-C or try to read other source code written in other low-level languages), but also introduced me to the command line. Getting enough knowledge not to be scared of the command line is incredibly liberating.

General courses on how to think about and approach code would also likely be useful, but you can usually achieve the same knowledge through active curiosity and a willingness to read a bunch of articles and blog posts online.

Go forth and code

How you go about it and what language you use doesn’t matter. Ultimately, what matters is that you get out there and start writing code. Come up with your big dream, and for your first small act create something simple but useful, be it a website, a mobile app, or a script that makes a repetitive action on your computer less onerous. Learn Javascript, or buy a book about Objective-C, or find a course to take. Experiment, fail, and try again.

No matter what route you choose, it will be frustrating, it will be difficult in the beginning, but it will be worthwhile. Even if you never spend the time to get particularly fluent in any given language, understanding the basic building blocks of code and knowing just enough to be dangerous can open a lot of doors and give you a way to tweak the devices that you rely on every day to better suit your needs.

Good luck!

My first iOS app: TapWatch

I am very pleased to announce that TapWatch, my simple and beautiful stopwatch app for iOS, is now available! View it in the App Store here or check it out in all its minimal glory:

Tapwatch screenshot

Not that long ago, I needed to time something. Having my iPhone handy, I figured it would be the work of a moment to find a simple stopwatch app and get on with things. I had wanted but three things in my stopwatch:

  • No buttons
  • Aesthetically pleasing design
  • A log of recent times

Half an hour later, I emerged from the morass of the stopwatch apps in the App Store without having found anything that even satisfied two out of three (including the stopwatch mode in the built-in Clock app).

Clearly developing a stopwatch is something people do as a learning exercise, and then forget about. But simply because a niche is unprofitable does not mean that it should not have at least one beautiful option. So I decided to write my own stopwatch, and thus TapWatch was born.

TapWatch offers the following niceties:

  • Tap anywhere to start and stop the timer: no more hovering your finger over small buttons!
  • Double tap anywhere while a timer is running to start a new lap: you won’t lose any time, because TapWatch notices the timestamp from your first tap, and picks things up from there on the second
  • Slide left to view your 50 most recent times (automatically saved!)
  • The screen will stay awake as long as TapWatch is active and a timer is running, so feel free to watch what you’re timing
  • Multitask: exit TapWatch while a timer is running with impunity; even if iOS quits it in the background it will continue timing
  • Scales beautifully when timing things that last anywhere from tenths of a second to hours

If you ever need to time anything, I hope you will give TapWatch a try! I would also love to hear from you if you think the app needs improvement; my personal uses for stopwatches are pretty basic, so I would particularly love to hear how people who need to time things often like the app (coaches, teachers, etc.).

Slicy 1.0

If you’re a busy person, here’s the short version: we at MacRabbit just released an awesome new app called Slicy that is absolutely essential for anyone who ever needs to export an image from Photoshop. Go check it out now.

The short story is pretty boring, isn’t it? Thought so. Here’s the long version:

Since moving from doing web development to being the guy who does whatever needs doing at MacRabbit (mostly involving Espresso plugins and customer support), I haven’t been using Photoshop as often. However, I do still need it from time to time; Photoshop is always central when it comes time to redesign one of my sites, and I crafted all of the UI for TapNote and my upcoming iOS app TapWatch in Photoshop (there was a brief stint where I spent a huge amount of time and pain trying to do the same thing in other apps, but it wasn’t remotely worth it).

But there’s one aspect of using Photoshop I always dread: slicing and exporting my images. It sucks. A lot. Always. I can spend almost as much time rearranging and slicing a file in order to get the right transparency and backgrounds as I spend designing the darn thing.

And what particularly sucks is that after I’ve painstakingly sliced my document and created a total mishmash that looks nothing like the original mockup, I inevitably discover that some small thing doesn’t work. Perhaps a button needs to be just a little bigger, or I want to change the color palette slightly.

This wouldn’t be a big deal, except that I no longer have a working mockup. I have my original mockup, and then I have the sliced-up mess that I have to use to actually generate my site files. Trying to move changes between these two versions is soul-destroying.

If you use Photoshop with any regularity to prepare graphics for apps, the web, or just about anywhere that necessitates the “save for web” dialog, you know what I mean.

Time to cue the heavenly light and choir, though, because our savior has arrived and its name is Slicy:

Slicy for Mac

Using Slicy is ridiculously simple: in your Photoshop file you name your layer or layer groups the same as the file you want to output, then drop the PSD on Slicy and watch it work its magic.

For instance, I recently had to design an iOS app icon for TapWatch, which thanks to the sheer number of iOS device resolutions meant I was actually designing five versions of the same icon. When it came time to export my various icons, I simply named the appropriate layer groups “icon.png”, “icon@2x.png”, and so forth, then dropped the PSD on Slicy to export all of them without needing to hide or remove the background layers that provided me context for the icons (or do any other configuration). When it was done, Slicy asked me if I wanted it to watch that particular file for updates and automatically do the same export whenever it changed. I checked “yes”, and now as long as Slicy is running I can make a minor change to my TapWatch icons and export them all simply by hitting command-S.

It’s a completely different way of working, and I wish that it had been around when I was doing web work. There were so many times when the graphic designer wanted to change some small thing, and sent the change over in their original mockup, which I then had to re-translate into my sliced version (and just hope that I noticed all the changes). With Slicy, I could have renamed the layers appropriately, sent the mockup back, and they would be able to make their changes right in the same file. Once they were done, all I’d need to do would be to toss the file in Slicy once more and go.

At this point, the people who are regular users of Photoshop have probably already bought Slicy, but in the interest of helping people get the most out of it, here are some additional fun things to know:

  • If you need to define a specific region for your image to live in, just add a square vector or layer mask to the tagged layer group. Slicy will base the dimensions of the final image off the mask instead of auto-generating them based on the surrounding transparency (this also works to explicitly define the image area if Slicy is missing an outer stroke or shadow, which occasionally happens in v1.0). If for some reason you don’t want to add a layer mask, you can stick a square vector shape layer named @bounds inside of the layer group, and Slicy will use it to calculate the boundaries of the image instead.
  • As you would expect, layers do not need to be visible for Slicy to export them (or even completely contained in the canvas, for really large vector images and so forth).
  • If you name multiple layers identically with an .icns extension, Slicy will automatically combine them all into a single Mac icon file.
  • If you need to slice something like you would traditionally in Photoshop (so that the background layers are visible and so forth), add a group called @slices, and populate it with square vector shapes named after the images you want to export. Slicy will calculate the size and position of the images, and include everything in the group that contains the @slices group (which could be the entire PSD, if you place it at the root level).

Slicy is still a 1.0 product, so it doesn’t support everything (notable exceptions are CMYK documents and advanced filters), but MacRabbit will of course continue to improve it to try and address the edge scenarios. If you would like to buy it, you can find it here, and if you would like to see a Photoshop file formatted for use in Slicy there are several examples on the Slicy website.

Orange tapioca pudding

I love tapioca pudding. I’m generally not a big fan of puddings, but tapioca was one of the few my mother made growing up, and since it’s not terribly sweet and goes wonderfully with fresh fruit I fell for it (growing up we would go to U-pick farms for strawberries and other berries, and after making the bulk of them into jam serving them over tapioca was second in awesomeness only to making them into pie).

In any case, this evening I found myself in need of something to serve with dessert crêpes since we didn’t have any ice cream in the house (a batch of crêpes split in half makes almost exactly two savory and two dessert crêpes, which is perfect for my girlfriend and me). I figured I’d try tapioca pudding, but I wasn’t eager to have plain tapioca pudding inside of plain crêpes.

One thing led to another, and I ended up with orange-flavored tapioca pudding, which is ridiculously good for a shot in the dark (I searched the internet prior to making it, but aside from learning that this is something a small number of people do I didn’t find any good recipes. If you like tapioca pudding and oranges, I highly recommend you give it a try.

Orange tapioca pudding recipe

(This is a lightly-modified version of the recipe on the Minute tapioca box; you could likely adjust it for use with other types of tapioca without much effort; the trick is substituting orange juice for most, but not all, of the milk.)

  • 1/3 cup sugar
  • 3 tablespoons Minute tapioca
  • 2 cups orange juice
  • 3/4 cup milk (whole milk is best)
  • 1 egg, beaten
  • Pinch of orange zest (optional)
  • 1 teaspoon vanilla extract
  • Splash of orange flower water (optional)

Combine the sugar, tapioca, orange juice, milk, beaten egg, and orange zest (if you have a fresh orange on hand) in a medium pot and let it sit for five minutes.

Cook on medium heat, stirring constantly, until it comes to a full boil (boils while you are still stirring). Remove from heat. Stir in the vanilla and a little orange flower water (if you have any on hand).

Let the pudding cool for 20 minutes or so, then either eat it warm or refrigerate for later. I prefer it warm, my girlfriend prefers it cold.

I can say first-hand that this is absolutely divine served in dessert crêpes, garnished with orange zest, and drizzled with chocolate sauce. I fully expect the left-overs will be great on their own, too. If you’re really feeling fancy, slice up some fresh orange or other citrus-friendly fruit and serve it alongside or on top.

Updated site theme

Another year has passed, and once again I’ve been feeling the itch to redesign Beckism.com. So without further ado, I present to you its latest look!

I was actually pretty happy with the previous design, so I stuck with the same main layout and color scheme. The main problem I had it was that the one pixel borders and arrows were simply not breaking things up enough well enough; it was really difficult to distinguish between posts on the homepage, and viewing the site on a mobile device was an effort in frustration (since the borders were virtually invisible and the headings were longer than the text, which made zooming in difficult).

Both of these issues should now be fixed, and I also introduced some fun little features here and there like threaded comments, a search button in the header to jump straight to the footer, and so forth. Additionally, the site should look beautiful on the iPhone 4 (I haven’t had a chance to test it on other mobile devices yet).

I’ve tested things on the major non-IE browsers, but please let me know if you run into any problems! I always love getting feedback.

Clicky Web Analytics