Mike Piontek

In reply to this entry, Nathan asked:

Had to give this a [go]. Some really slick stuff, and a nice simple admin interface, but would I be correct in assuming this is more intended as a “blogging platform” rather than a proper CMS? As far as I can see it’s all about posting entries, and there’s no apparent way of setting up pages, in a site tree, with possibly multiple areas on the page to edit.

Good question! It is designed around the basic concept of a blog editor, but it’s also designed to be flexible enough that it can be easily adapted to any type of site. Most of the sites I use it for aren’t blogs, actually. Anywhere Road is a good example on a non-blog site I’ve built using Junecode (complete with AJAX), and the old Tense Code site is another good one. It’s all a matter of how you set up your templates.

Each entry is a separate page. If you don’t want all those pages to appear in the main directory listing you simply mark them as hidden. This allows you to link to those pages however you choose. Alternatively you might want to list only the titles of those pages (for your sub-navigation, for example). To do that you leave the entries public, but alter the template to show only the titles and links. Here’s an example of that in use. Each part in the Ford GT sidebar is an entry.

For other types of sidebars you’ll want to use hidden entries as well. The Page field becomes important here. Here’s an example of what you might insert in your template:

<junecode:entries dir="journal" page="sidebar">
<junecode:entrytext />
</junecode:entries>

This snippet would look for an entry in the current directory (category) with the Page name “sidebar”, and insert its text. This example would give you the same sidebar for every page in a directory. If you wanted each page to have a different sidebar, you could change the first line to this:

<junecode:entries dir="journal" page="using-junecode-for-a-site-that-isnt-a-blog-sidebar">

In this case, a page named “sample” would look for an entry named “sample-sidebar” and display that page as the sidebar, if found. My own site is a good example of this in use. The “About Me” section on this page, and other sidebars throughout the site, are separate entries inserted this way.

Yet another way to do a sidebar—especially if it’s just a short bit of text—is to add a meta data field in the Options section of the site editor. That will give your entries a new field where you can enter the sidebar text. You can insert that text in your template like this:

<junecode:metadata name="sidebar" />

Those are just a few examples. You could also show an entry from one category on one area of the page, and list pages in a different category on another area of the page. There are a ton of different ways you can build up the page, depending on what you need to do.

This setup may not be the most intuitive, but I think some learning curve is unavoidable when you’re building a complex site with a CMS. My focus has been on removing a lot of the tedium that comes along with web design, without having to sacrifice the flexibility of building a site by hand. Of course the content needs to be easily editable by anyone as well, which is the main purpose of any CMS. I think I’ve accomplished these things pretty well… It has certainly made working on my own sites much easier, and my clients seem to get the hang of editing their sites very quickly. Even if I’m the one updating the site, I’m able to do it much faster with Junecode.

Eventually I’ll be including some themes with Junecode that are designed for common non-blog types of sites. Like a photography portfolio, or a band site. I’ll probably also put together some tutorials on how to handle customization options like the examples above. Further down the line I’m hoping to create a template generator that will allow you to create templates using drag and drop, which should bring that initial learning curve way down. That one is still a long way off, but it’s something I’ve been tinkering with for a while now.

While working on Delivery Status touch (for iPhone and iPod touch) it was clear I needed a new icon. The old “18 days” icon I’ve used for the Dashboard widget was just something I threw together quickly. I never spent much time on it because it isn’t seen terribly often, and I couldn’t justify spending a lot of extra time on a free widget that already sucks up a lot of work hours. Delivery Status touch is different though—that icon will live on people’s home screens and they’ll tap it every time they use the app. Plus it was a good excuse to finally do what I’ve wanted to do for a while now.

I knew from the start I wanted to use a delivery truck. I started out sketching the type of vehicle you generally see delivering packages to your door. It didn’t quite fit the space though, and I loved the idea of designing the icon as a physical object that just happens to fit perfectly into a rounded square area. So I went with something more like a semi. I had to abstract the design somewhat—if this was a real vehicle it’d look very odd—but I think I’ve managed a design that looks striking and unique without looking strange. It’s instantly recognizable as a truck.

I decided on the color early on. I wanted to use something brighter at first. Blue was tempting but there are a lot of blue icons on the iPhone already. Red works well for icons like Calendar and FileMagnet but in this case I felt there’d be too much of it. Yellow was out because it’d look too much like Panic’s Transmit icon. Other bright colors like purple or orange just didn’t seem right to me. Eventually I settled on a shade of brown that falls somewhere between the old Delivery Status widget icon and the darker brown of a UPS truck. I think it’s a perfect fit, and it mingles well with the other iPhone icons. The touch of blue through the window and the yellow headlights help it stand out. (I was careful to roughly match the blue sky in the Weather and Photos icons.)

I wanted a design that would work at larger sizes in addition to the small iPhone icon size, so I could use it for the Mac OS X Dashboard widget as well as in promotional materials. That was a tough, I spent a lot of time struggling with it. Early on I reduced the number of bars in the grille, as they blurred together on the iPhone when there were more of them. Initially I had a dark bumper and lighter grille, but the bumper got lost on the iPhone’s black background so the values were switched.

I also used a lot of hard lines for shadows and highlights initially. It looked good on the iPhone but blown up it seemed very flat—it looked like a bunch of graphic shapes instead of a cohesive object with depth and form. So as the design progressed, I added more gradients, blurred the shadows, and used highlights to pull the shapes together. The black lines were toned down as well. Gradients and highlights that seemed much too strong in the larger view were often difficult to even see on the iPhone, so I spent a lot of time tweaking, testing, and repeating.

Initially I didn’t plan on using the standard glossy curve you see on many of the iPhone’s icons. Something wasn’t quite right though in the final stages, it was still lacking depth. After hours spent tweaking it (I’m not even kidding), that glossy highlight turned out to be exactly what it needed.

I used Adobe Illustrator to create most of the icon—probably the most complex work I’ve ever done in Illustrator. The finishing touches, including the top and bottom bevels and the glossy highlight, were done in Photoshop. I also used Photoshop for the first color mockup you see in the progression. It seemed like the easiest way to rough in the colors and make sure it was working well, before I recreated it all in Illustrator.

A lot of Tiger users have had problems with my Smart Widget Installer. I’ve become much more comfortable writing apps in Cocoa over the past several weeks so I decided it was time I gave this one an overhaul. Previously it was written entirely in AppleScript, which can be somewhat unreliable. Here’s what’s new:

• Completely rewritten in Cocoa instead of AppleScript for better performance and reliability
• Improved compatibility with Tiger (10.4.10 or later)
• The widget’s icon is now displayed in the installation dialog box
• In addition to dropping a widget on the application icon, you can now choose “Install…” from the File menu
• After a smart upgrade, a brief “Installation complete” message is now displayed
• Select All and Copy are now available, which should make it easier to report errors, if necessary!

Download Smart Widget Installer 1.1 beta 1.
Universal, requires Mac OS X 10.4.10 or later.

Please let me know how it works for you!