Command-Tab

Running Nuxt 3 Behind an nginx Reverse Proxy

2022-04-24T00:00:00Z

I was attempting to run Nuxt 3 RC1 in development mode behind a local nginx reverse proxy, but ran into several issues. There are a number of reasons to run a development application server behind a TLS-terminating reverse proxy, including more closely mirroring a production setup, ensuring an application performs correctly when proxied, and gaining HTTPS support to enable use of newer HTTPS-only user-agent APIs.

However, when nginx reverse proxies to the Nuxt server using a configuration like the following, the application will load correctly in the browser but Vite (bundled with Nuxt) will no longer be able connect to its backend websocket server to provide hot module replacement (HMR).

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

To fix this, Vite needs to be made aware it's being reverse proxied, and nginx needs to pass through Vite's websocket connection.

In the Nuxt config (nuxt.config.ts), add the following Vite config:

vite: {
  server: {
    hmr: {
      protocol: 'wss',
      clientPort: 443,
      path: 'hmr/'
    }
  }
}

Vite will now use the secure websocket protocol over the same HTTPS port as the application, but it will request it at a new, distinct path.

In the nginx config, add a new location directive to match the configured Vite path (/_nuxt is always prepended), have it perform an HTTP Upgrade, and then reverse proxy to Vite's websocket server, which always listens on port 24678:

location /_nuxt/hmr/ {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://127.0.0.1:24678;
}

After restarting the development server and nginx, Nuxt 3 and Vite HMR work great behind nginx, which now handles TLS termination and reverse proxying of HTTP and websocket traffic.

Update 2023-09-28

As of Nuxt 3.7.4, the nuxt.config.ts configuration is unnecessary, though having the following nginx config in place avoids a WebSocket error about the WebSocket host being undefined:

location /_nuxt/ {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_pass http://127.0.0.1:3000;
}

Note the differences from the above config -- the location path dropped hmr/, the Vite HMR port (24678) became the default Nuxt port (3000), and the Host header was also added (but the Host header is likely not critical for this scenario).

Update 2026-03-23

Tangentially related: In development, Nuxt Icon collections are loaded from the Nuxt server at /api/_nuxt_icon, but this path might introduce a conflict if you are integrating a completely separate non-Nuxt API at /api. In my case, I often have a Python API expecting requests bearing that path prefix. My local nginx setup forwards requests with /api prefixed paths to Python, resulting in a Nuxt 404 on Nuxt Icon collection manifests such as /api/_nuxt_icon/bi.json?icons=escape or /api/_nuxt_icon/solar.json?icons=check.

Setting a localApiEndpoint overrides the default value of /api/_nuxt_icon both in how the Nuxt server route is offered and how the Nuxt client requests the collection JSON. The issue and fix are both documented on GitHub. In nuxt.config.ts, add something like the following:

icon: {
  localApiEndpoint: '/_nuxt_icon',
},

Note that /api is absent from the value of localApiEndpoint, durecting Nuxt Icon to use a path other than /api/_nuxt_icon. Anything that will not be picked up by an external API is valid here, and will make the Nuxt Icon module work again.

Building cen64 on macOS

2020-01-11T00:00:00Z

For testing Nintendo 64 homebrew ROMs, cen64 is the most accurate emulator (though it doesn't run at full speed yet). Here's how to build it from source on macOS:

Install XQuartz from the official distributed disk image
brew install cmake glew
git clone https://github.com/n64dev/cen64.git
cd cen64
mkdir build
cd build
cmake ..
make

If you'd like to enable cen64's debug logging, create a debug build when running cmake:

cmake -DCMAKE_BUILD_TYPE=Debug ..

When running cen64 outside of an XQuartz X11 terminal, it may report:

Using NTSC-U PIFROM
create_device: Failed to initialize the VI.
Failed to create a device.

To fix this, you can run it within an XQuartz X11 terminal, or set the DISPLAY environment variable to something like :0 either in your .bashrc file or inline during invocation:

DISPLAY=:0 ./cen64 /path/to/pifdata.bin /path/to/rom.z64

DISPLAY needs to be set because cen64 calls XOpenDisplay with a NULL display name (presumably to default to your DISPLAY environment variable), but if it's not set, XOpenDisplay returns NULL and cen64 has no display within which to create a window for rendering Nintendo 64 content.

For extremely verbose register-level output, edit CMakeLists.txt and set DEBUG_MMIO_REGISTER_ACCESS to ON. Make sure to remove any cached data in build/ to ensure your changes are reflected, then recompile and re-run.

Update 2024-03-02

Development on cen64 has not progressed in many months and is now considered unmaintained. ares, a cross-platform, open source, multi-system emulator is now regarded as the best emulator for Nintendo 64 development.

BrewBot - Sending Coffee Notifications to Slack

2017-09-16T00:00:00Z

At work, we have a coffee machine that serves dozens of people in the building, and it's difficult to know when to come get fresh coffee. You might arrive when it's empty and be tasked with making more, but the ideal situation is to arrive just as a fresh pot is being brewed.

We also use Slack for team chat and various notifications, so integrating the coffee machine status was a no-brainer. Using a non-invasive/inductive current sensor and Raspberry Pi, the following setup monitors coffee machine energy consumption and waits for a significant rise in current draw, followed by several minutes of sustained usage. Once a time threshold has passed, it does an HTTP POST to a Slack webhook, sleeps for about 15 minutes, then starts monitoring again. This "brewbot" code is available on GitHub, and a parts list can be found below.

Full parts list:

MCP3008 8-Channel 10-Bit Analog to Digital Converter
Raspberry Pi model B
16-pin IC socket
Assortment of heat shrink tubing
Panel mount to Micro USB adapter
10KΩ 1/4W LED resistor
Half-size Perma-Proto Raspberry Pi Breadboard PCB Kit
5mm Yellow LED
1/8" panel mount audio jack
10uF electrolytic decoupling capacitor
33Ω 1/2W burden resistor
2x 470KΩ 1/2W voltage divider resistors
30A non-invasive current sensor
22 AWG Solid Core Hook Up Wire
5x7 photo box, from The Container Store
8 GB Class 10 SDHC card
Edimax EW-7811Un Wireless Nano USB Adapter
6x Nylon screws washers and nuts
8" AC Cord Clips
HDMI to Mini HDMI adapter
6' Mini HDMI to HDMI Cable
10' USB A Male to B Male Cable

Related reading: Hyper Text Coffee Pot Control Protocol

GottaGo

2013-07-23T00:00:00Z

Working at Blackboard Mobile making unique mobile apps is fun, but occasionally it's interesting to do something completely different at work, just to see what you can come up with. To that end, we recently hosted our first Hackathon, where small teams of co-workers had 24 straight hours to create a project of any theme using resources available inside our outside of the office, and the results would be judged by our peers. One of the other benefits of working in a growing industry is that we're expanding our staff almost weekly. Unfortunately, though, that means that the building we're in is less and less able to handle the increasing capacity. Specifically, the bathrooms are occupied more frequently, resulting in either a return trip to your desk only to try again later, or an awkward wait of unknown duration.

Working with Joe Taylor and Eric Littlejohn, our Hackathon project set out to make the office bathroom availability more visible and accessible through a combination of hardware and software. The piece of the project that lets this all work is a microswitch installed inside each door jamb, such that when the locking bolt is engaged, the switch is tripped. That way, we can do anything with resulting data, knowing that when the door is locked, the room is in use. Running wire down through the hollow metal trim was tedious and time consuming, and involved a lot of false starts and fishing around with a straightened coat hanger, but we finally got a run of wire inside each frame.

On each office floor there are two bathrooms side by side, and the pair of switches inside the door jambs are wired to a single Arduino fitted with an Ethernet Shield for network connectivity. The Arduino samples the switches many times per second, providing near-instant feedback.

After debouncing the switch input signal over about 50 milliseconds, the Arduino waits for a definitive change in state -- from locked to unlocked, or unlocked to locked -- before illuminating LED lights on the wall.

After the light corresponding to the now-occupied bathroom is lit, the Arduino also performs an HTTP POST, sending the event details (floor level, which room, and current occupancy state) to an in-house webserver running Node.js and MongoDB. The webserver records the data and makes it visible on a web page for viewers to check the availability digitally, for those who can't see the wall mounted lights from their seating position.

If you'd like to employ a project like this, the code we hacked together is available on GitHub, and the wiring is rather straightforward:

All components share a common ground
LED anodes are wired to room_a_led_pin and room_b_led_pin and brought high when doors are locked, and low when unlocked
Switches bring room_a_switch_pin and room_b_switch_pin low when triggered, and the Arduino uses the INPUT_PULLUP pinMode for the unlocked state

Our Hackathon project came in at second place, losing to an as-yet-unannounced software project, but we had a lot of fun staying up and hacking all night!

Adventures with Nest

2013-06-06T00:00:00Z

I recently purchased a pair of Nest Learning Thermostats for my new home. Compared to the white brick style Honeywell thermostats that came with the place, the Nest is so much more advanced. It does temperature learning, auto-away, and remote control over Wi-Fi from the web and iOS devices. It also has a color LCD and just generally looks beautiful on the wall with its brushed stainless steel housing.

Installing the Nest is pretty straightforward with a modern forced air heating and cooling system:

Remove the old thermostat and mounting plate from the wall
Disconnect the wires
Patch and paint any holes
Install the Nest mounting base and connect the wires
Pop the Nest onto the base and configure the software

My initial install went well physically, but not long after, I discovered that the Nest would regularly run out of battery power. I quickly learned that due to how the HVAC circuits are arranged, the Nest can only draw power while the system is running. When the system is not busy heating, cooling, or running the fan, the Nest is left to run under its own battery power. And in sunny California during the springtime, the system doesn't run often enough to let the Nest keep a charge. Several times per day, I would have to unplug the Nest from its base and charge it over micro USB. Not a great solution.

Reading more about the Nest and HVAC circuitry, I found that there is a solution for situations like this. A "common wire" that provides a path back to the HVAC controller would allow the Nest to draw the power it needs while not running any systems. As luck would have it, my system provided this common wire, but connecting it to the Nest had no effect on the battery. More telling was the fact that the Nest did not detect that the wire was connected.

So, I decided to find out what was at the other end of that common wire. I put up a ladder and ventured into the attic of my home and scouted around the furnace. On top of it, inside an easily-opened metal enclosure, was the thermostat controller, a ZTech ZTE2S. Double checking the wiring diagram and comparing it with the wires on the left (coming from the Nests), it's clear that the blue common wire is simply not connected to the controller. In the photo below, you can see that it's clipped short, close to the brown jacket covering the bundle of five wires.

Reconnecting the wire was a matter of disconnecting the wires that were already connected, snipping them all to the same length, and stripping a little plastic off the end so that all five can be connected to the HVAC controller.

A few hours after leaving the Nest installed with the common wire attached and the HVAC controller all closed up, its battery has fully charged and the features work great.

Simulating Slow Internet for iOS Testing

2011-05-12T00:00:00Z

Apple's iOS Simulator is an acceptable environment for testing development code, but when users purchase your finished app from the App Store, they'll be running it on real hardware, particularly on networks that are likely much less reliable than your home or office internet.

To ensure your app performs well under real-world conditions, you can load up the code on a device and go outside, but then you can't debug as easily. And even if you bring your MacBook Air with you, what if your Verizon iPhone is everything you hoped, and it performs admirably on the worst of days? To get around all of this, you can approximate an unreliable network with SpeedLimit. SpeedLimit is a System Preferences pane for intentionally and selectively slowing down specific ports and domains.

Download and install SpeedLimit, add one or more hosts (separated by commas, as seen above), select a target speed, and click Slow Down. Subsequent network requests matching the criteria you set will be throttled, giving you time to go all out testing your app's performance and error handling. Does it crash when users hit the Back button while a UITableView is loading? Does it lock the UI while downloading avatars or thumbnails? SpeedLimit lets you find out, and be confident in your networking code.

How to Find the Right Windows Driver

2009-09-14T00:00:00Z

When setting up a new Windows machine, whether it's Windows 2000 all the way up through Windows 7, you'll occasionally run into an issue where you need drivers for a system or PCI device that you just can't seem to find. To make matters worse, you don't know which company made the device, so you don't even know where to start looking for drivers. Should you go to Dell's site? The motherboard manufacturer? Persistent "Unknown device" entries in the Windows Device Manager are a plague upon even the most seasoned techs. Here's a tip to get your driver hunt moving in the right direction.

Find Out Who Made the Device

Figuring out which company made the device(s) in question is the first step towards getting it working. Start by opening the Windows Device Manager. My preferred quick way of doing this is clicking Start, Run, type devmgmt.msc, and pressing Enter. Once there, choose the device in question and right click it, and select Properties. Select the Details tab to see something like the view below:

Note the PCI VEN and DEV 4-character identifiers. PCI, USB, and many other system devices have Vendor and Device IDs. The Vendor ID is specific to the manufacturer, like Broadcom or nVIDIA. The Device ID is specific to the particular make or model of device you have. These are expressed in hexadecimal (0 through 9 plus A through F), so don't be surprised to see letters there, as well. Some common Vendor IDs are 8080 and 8086 for Intel, 0A5C for Broadcom, 10DE for nVIDIA, 1002 for ATI, and many more.

Look Up Vendor and Device IDs

A common way to express both the Vendor and Device IDs in a single string is 1022:2000, Vendor ID first. Combine your Vendor and Device IDs in this manner, and wrap it with quotes: "1022:2000". Google that, and you should quickly figure out who made your "Unknown device" and what model it is. With this knowledge, you can either find the appropriate driver on your computer manufacturer's website (Dell makes a good note of which manufacturer's devices they use for a particular system), or you can visit the device manufacturer's website directly.

I hope this information can help those looking to simply get their hardware working under Windows, whether it's running on a Mac or PC.

MacAlly IceKey USB 2.0

2009-07-05T00:00:00Z

MacAlly has been producing the same IceKey keyboard since 2003, and while it's a solid performer featuring comfortable low profile scissor keys and extra USB ports, it still ships with a maddeningly slow internal USB 1.1 hub. While this early USB specification is plenty fast for a keyboard alone, it throttles back speeds of all attached devices like flash drives, iPods, and digital cameras. Copying an music album or two can take several minutes over USB 1.1, whereas today's USB 2.0 takes only seconds. With USB 2.0 as today's ubiquitous standard and USB 3.0 just around the corner, it's disappointing that MacAlly has yet to update the IceKey to include a faster hub. Luckily, you can take matters into your own hands. Here's how to install a high speed hub inside the keyboard while maintaining MacAlly's elegant factory appearance.

What You'll Need

a MacAlly IceKey
a small, narrow USB hub (a cheap Targus hub worked fine for me)
a screwdriver set
a soldering iron, solder, and spare wire
a pocket knife (I'm not sure any project I've done didn't require this...)

Open the Hub

USB hubs generally aren't too complicated to open, and this Targus on is no exception. A single screw on the underside holds together the hub's two plastic halves, which snap apart with little effort. Write a note or take a picture to document the wire colors and order relevant to the orientation of the board inside -- it will come in handy later.

Open the Keyboard

The MacAlly IceKey is slightly trickier to get apart, but not much. Remove all the obvious screws on the bottom of the keyboard, including the one under the "Do Not Remove"/Quality Control/Warranty sticker. Then, flip open the pivoting feet to expose two more screws covered by a protective piece of rubber. The final two screws are under the front rubber feet.

Starting with the keyboard upright and facing you, begin unsnapping the plastic hooks around the perimeter starting at the front middle. A plastic pry tool might come in handy, but isn't required. Once the top is removed, you can clearly see all the important electronics, including a very common Cypress USB controller chip.

Test Fit Everything

Just to make sure the rest of this modification is physically possible, fit the USB hub board in the open space at the top of the keyboard and set the keyboard bezel on top. Luckily, the IceKey has plenty of room to spare. I was planning to have to remove the USB ports from the hub board to make everything fit, but there was so much extra space that I didn't even have to go to that length.

Unhook the Keyboard

Carefully pull the keyboard ribbon cables straight away from their matching plugs on the controller board. Gently flip the keyboard pad over, and unscrew the two short ground wires to completely free the keyboard keys from the plastic housing. Set it aside for later; it does not need to be modified -- all the action happens on the two remaining circuit boards. Unscrew both boards to get at the backs of each.

Cut Wires

Cut the gray ribbon that leads from the controller board to the left port. Since that wire only provides USB 1.1 speed, we won't be using it. You'll note that it has two extra wires that run to an unpopulated LED on the left board, so we can skip those when doing the re-wiring. (I wonder what MacAlly had in store for that, or if this keyboard is a "port" from another language or something?)

Unplug the USB cord from the controller board and cut off the connector. This cord needs to run to the input on the new USB hub, and not to the input on the keyboard controller board where it currently connects.

Cut Traces

Since the right port also needs USB 2.0 speeds, it too will need to be disconnected from its USB 1.1 source. However, it is soldered directly onto the controller board and is effectively hard-wired into the slowness. This is perhaps the trickiest part of the whole project: desolder the USB connector and use a knife to scrape away the traces that run to the port. Some are on top of the board, and some are on the bottom. (You might be able to get away with cutting the traces without removing the port, as a little bit of the traces are exposed on the top before routing into electronic components, but you'll want to test with a multimeter and make sure you've done this successfully.) Once all four traces to the port are cut, re-solder the USB port in place (if you removed it).

Re-wire the Keyboard Controller and Ports

Here's a simple before and after block diagram to help your wiring layout:

Solder Keyboard Cord to Hub Input

Strip about an inch of plastic from the cut end of the keyboard cord to expose its individual wires, and strip just a millimeter or two from each of those. Using your note from earlier, solder the keyboard wires to the matching USB hub input connections. On this Targus hub, the wires were in the same order as the standard USB pinout.

Solder Keyboard Controller to a Hub Port

Solder four wires from the keyboard input port (where the cord originally connected to) to one of the USB hub ports, effectively making the keyboard controller into one of four devices on the hub. Previously, the keyboard supplied its own hub, but we're bypassing it altogether. Luckily, most everything is either color coded or silkscreen labeled on the circuit boards (V/5V is red, D- is green, D+ is white, and G/GND is black).

Solder Keyboard USB Ports to Hub Ports

Solder wire from the left USB port board to another free USB hub port, making sure to get the order correct. With the traces cut on the right port, run wire from the connections under the board to yet another free hub port. You should end up with a hub layout like this:

Test and Close It Up

With each new component wired up, double-check your connections and plug it in. Initially, my first test failed and Windows complained about a malfunctioning USB device (I tested it on an old PC, just in case I shorted out the computer's USB controller. I'd rather fry an old computer than my new iMac!) The key to making everything work properly was to reconnect those two shared ground wires from early on -- the keyboard must have a common ground with the controller and hub!

Once it works, secure all the wires and boards. I used a few short pieces of electrical tape to stop everything from bouncing around, too. Snap the plastic top back on, replace all the screws, and enjoy your USB 2.0 MacAlly IceKey!

Boot Camp Drivers for iMac (Early 2009)

2009-06-14T00:00:00Z

Apple's newest iMacs are a fast set of machines and run Windows faster than any PC I've ever used, but unfortunately, Apple has yet to update Boot Camp with the required drivers to support the latest and greatest components. Mac OS X ships with the necessary software and works as expected, but Windows XP is met with some trouble. Right away, you'll notice that your graphics resolution is set to a paltry 800x600, and you have no sound output as well. Here's how to get those systems working until Apple can provide an "official" fix:

Graphics Drivers

Visit nVidia and download the "GeForce 9M Series (Notebooks)" driver package, as this is graphics chipset in the Early 2009 iMacs. Run the downloaded setup utility, next-next-nexting your way through the steps, and reboot at the end when prompted. Upon restart, you'll be able to properly max out your display to the iMac's native resolution.

Audio Drivers

Boot Camp 2.1 actually ships with RealTek HD audio drivers, as evidenced by the lack of a yellow exclamation mark for this system in Windows' Device Manager, but they don't seem to work properly, since there's no sound output. Visit RealTek and download the "High Definition Audio Codecs" driver package for your OS. In this instance, I downloaded "Windows 2000, Windows XP/2003(32/64 bits) Driver only (Executable file)", since I'm running Windows XP Pro SP2. Run this setup utility as well, rebooting again when done. After restarting, you should be greeted with Windows' standard login sound, confirming the install worked.

Update: The Mac OS X 10.6 Snow Leopard disc includes Boot Camp drivers for these iMacs. The Snow Leopard disc is a hybrid image: it provides the Mac OS X installer when viewed under a Mac OS X system, but shows Windows drivers when viewed in Windows. Just run the setup in Windows right off the disc, and you should be set.

Dig into iPhone Apps

2009-03-22T00:00:00Z

So you're curious about the contents of iPhone and iPod Touch apps, including artwork, sounds, and more? Here's how to dig into an application and see what goodies are hidden inside. Standard copyrights still apply.

Sync Your Apps with iTunes

Assuming you already have the target application on your iPhone or iPod Touch (just "iPhone" from this point forward for brevity's sake), simply sync your iPhone with your Mac or PC. Doing so will backup your device and transfer any purchased applications in both directions. With the target application now on your computer, navigate to your iTunes "Mobile Applications" folder, where iTunes typically does its own file housekeeping. Under Mac OS X, the default location is /Users/yourname/Music/iTunes/Mobile Applications/.

Unzip an App

Copy your target .ipa-suffixed application to a different location, ensuring that the original stays in the Mobile Applications folder to keep iTunes happy. To get inside the application, rename its extension to .zip. Open the zip file, and you will have access to the guts of the app (except the source code, of course).

High-res App Artwork

Directly inside the unzipped application folder, you'll find a file named iTunesArtwork, with no extension. A hex editor revealed that the file is typically a jpeg image, so rename it to include .jpg at the end, and you'll end up with the same 512x512 pixel artwork displayed by iTunes when browsing downloaded Applications. To get at other resources, open up the adjacent "Payload" folder, and you'll find a .app file -- the application bundle that runs on the iPhone. Right- or Control-click on the .app, and choose "Show Package Contents" to open up the bundle.

Sounds

Sounds are typically found among the many resources directly inside the application as files with extensions like .caf, .mp3, .aif, and .m4a. At this point, the organizational structure is up to the application's developer, so you may need to look around a little. Leopard's QuickLook feature is a boon in times like this, helping assess a file's purpose without opening half a dozen applications.

Other Graphics

Also nestled inside iPhone applications are many of the graphics used throughout the app. It's possible that some may be drawn by code, but complex graphics are generally stored as images. However, viewing the images isn't as easy as renaming the files as before. This will be a bit trickier, as the iPhone works some magic on the images before finishing the app build process, leaving images in an iPhone-optimized state. Fortunately, the process can be reversed with a little bit of Terminal trickery:

Copy all .png images to a new folder elsewhere. Images of other formats (.jpg, .gif, etc.) should be readily viewable.
Download David Watanabe's modified iPhonePNG command-line application, unzip the archive, and open up Terminal from your /Applications/Utilities folder.
Type cd, then drop the iPhonePNG folder into the Terminal, and tap Return to switch to that folder.
Type ./iPhonePNG, drop the folder of encoded images into the Terminal, and tap Return to decode the whole folder full of images.
The output folder sites beside iPhonePNG, so type open . and tap Return (open space dot) to open the current folder (a dot, in Unix terms) in the Finder. Open the decoded images folder and have a look around!

iPod Screen Scratch Removal Revisited

2009-01-06T00:00:00Z

Several years ago, I recommended RadTech's IceCreme as a great solution for cleaning up your iPod's scratched-up screen. While I still stand by my results and recommendation, IceCreme isn't the sort of thing you can find at a nearby store, and is also a little pricey. Removing scratches from iPods and other pocket-bound electronics remains a common problem, so I thought it would be worthwhile to test some of the other available options. Additionally, since nicks and scratches occur on more than just the screen, we'll also test the solutions elsewhere on an iPod. For this little experiment, I chose three solutions offering varying levels of abrasiveness: Colgate toothpaste, Brasso metal polish, and Easy-Off oven cleaner. All three promise to leave their intended surfaces shiny and clean, and in the case of the latter two, free of scratches. We'll see how each fares when put to use on both the front plastic and back metal of an iPod.

To keep things clear, each polish will be used in a masked-off area, hopefully leaving a clear division among the results. The target iPod is an already well-used 4G 20GB iPod, with most of its still working inner parts removed and replaced with padding just to help sustain its form while being polished. Donated to the cause, this iPod will be beat up even further, with even layers of light scratches, heavy scratches, and deep cuts, simluating everything from normal wear to keychain induced destruction. It has surely seen better days, and is now destined for that great Apple Store in the sky, all in the name of science. I started with Brasso first, since it has been recommended many times since my last scratch removal post, both by commenters and firsthand accounts. If you're attempting this yourself, be sure to work in a well ventilated area, as Brasso smells very strongly of ammonia, and might start to irritate your eyes after a short while!

After only five minutes of polishing, the results were quite good, with nearly all of the light and medium scratches completely removed from the screen area. Deeper cuts remained, though their rough edges were significantly smoother.

Toothpaste was next on the list, and while it left the iPod minty fresh with a sparkling shine, its scratch-reducing effects were barely noticeable. Due to its sticky consistency, it was also more difficult to polish with than the more liquid Brasso, yielding poorer results for double the effort -- a total flop. Oven cleaner was last, and I really had no idea what to expect with it. Claiming to leave glassy surfaces shiny and free of scratches, it sounded like a possible winner. As it turns out, it's not much more than a repackaged kitchen cleaner, resulting in a streak-free but still heavily scratched iPod. I'll end up cleaning my glass top oven with this one, and nothing else. With the front of the iPod clearly showing Brasso as the top choice, it was time to see what worked best on the scratched metal backing of the iPod.

Again, after just a few minutes with each polish, Brasso came out on top, while the other two trailed woefully behind. The Brasso-polished back still had quite a few scratches, though far less pronounced than when I started. All of them, including the deep cuts, had a very slick feel, whereas the others still left the surface pretty rough.

Convinced that Brasso was the right choice, I went back and finished off the front, cleaning up all but the most severe marks on the screen.

Given the results of my tests, I can easily recommend Brasso as a great iPod polishing solution that can be had for under $3 at your local stores.

Learning Cocoa for the iPhone

2008-12-21T00:00:00Z

These last few weeks, I've been teaching myself Cocoa to learn what makes Mac OS X and iPhone OS apps tick. While Objective-C is quite a departure from my usual web development world, it has quickly become one of my favorite languages, as it takes care of much of the drudgery of pure C and has plenty of useful frameworks to get your application up and running quickly. Here are some of the best resources I've found so far:

Cocoa Dev Central and Become an Xcoder are both excellent tutorials for beginners, written in a clear, straightforward manner. They also explain the ins and outs of memory management, which is critical on platforms like the iPhone and iPod touch.
Stanford's CS193P lecture notes and examples have proven to be one of the best resources for learning Cocoa, particularly for the iPhone. These notes and tests offer Cocoa Touch in bite-size chunks, with a little bit of "on your own" work to ensure you know your stuff before moving on.
Google Code Search is a good last resort for examples of how others are using a small bit of code or a particular class. For more accurate results, append "lang:objectivec" to your search string to narrow results to only Objective-C code.

Consolas Cursor Fix

2008-12-16T00:00:00Z

If you've attempted to use Consolas as your choice programming font on the Mac, you may have noticed (as I did) an odd issue with the font, where your blinking cursor hangs much lower than the current line. Oddly enough, this little issue only seems to affect Mac OS X. Even the Consolas set that ships with Microsoft Office 2008 has the same problem! Yet, when the same exact font file is used under Windows, the cursor position is correct.

John Gruber mentioned that BBEdit 9.1 now ships with Consolas as its default font, so I decided to see if it had the same cursor problem I had experienced in the past. As it turns out, BBEdit's version of Consolas works just fine, as seen in the image above. However, it doesn't include the other styles like Consolas Bold, Italic, and Bold Italic.

Through one way or another, the copy of Consolas that ships with BBEdit 9.1 is different than the one that ships with Microsoft Office 2008. To make system-wide use of the working version, download BBEdit 9.1, mount and open the .dmg, and navigate to:

(Control-click BBEdit, and choose "Show Package Contents" to get inside the application bundle): BBEdit.app/Contents/Resources/Fonts/consola.ttf

Copy consola.ttf from BBEdit's "Fonts" folder to your own Fonts folder at /Users/you/Library/Fonts, or /Library/Fonts if you want to make it available to everyone who has an account on your computer. Then, fire up your favorite editor, set Consolas as your preferred fixed-width font, and get coding!

Update: Bare Bones has apparently changed the version of Consolas that ships with BBEdit versions later than 9.1, and they now have the cursor problem as well...

iPhone NDA Dropped

2008-10-01T00:00:00Z

After hearing the cries of thousands of upset iPhone app developers, Apple has lifted the non-disclosure agreement covering (released) iPhone software. Developers can now freely talk about the inner workings of their applications, write books, publish blog entries, etc. Communicating developers means solutions to common problems get solved and shared, resulting in better software, making the iPhone and iPod Touch platform better as a whole.

For some time I've been worried that the NDA was going to remain in place indefinitely, silencing those who Apple needs the most, but it appears Apple has finally taken a positive action to help their App Store environment grow further. If you thought there was some cool stuff on the App Store now, just give it time.

iPhone and iPod Touch Icon Template

2008-09-21T00:00:00Z

While working on some iPhone and iPod Touch apps, I found that the iPhone OS automatically masks and overlays your application icon for quick and easy development. You supply a square 57x57 pixel image, and it rounds off the corners and overlays the Mac-like gloss to create a consistent look.

When developing an icon for a Touch-based application, it's handy to be able to see what your rendered creation will look like without going through the hassle of exporting your icon, compiling your code, and running your software every time a change is made. To that end, I present a small Photoshop file which very closely mimics the iPhone-applied mask and gloss, which you can place over top of your in progress icon layers to approximate the final result. Also, if you dislike the gloss, or have something special in mind, you can set a certain flag in the application's Info.plist to disable the gloss... I hope my Photoshop file will help others create great looking Touch app icons!

Update: By request, I've added a 512x512 version of the template as well, so you can get a good feel for what your icon will look like when displayed in iTunes. Both files are now combined in a zip archive, downloadable here.

fmTuner: A Last.fm Plugin for WordPress

2008-09-07T00:00:00Z

fmTuner is a WordPress plugin for retrieving song details from your Last.fm profile and publishing them anywhere in your WordPress theme. It provides options for choosing among your Recent, Loved, or Top tracks, as well as tools to adjust the update frequency and appearance.

Of particular note is the customizable Display Format option. Using simple tags like [::artist::] and [::image::] intermixed with regular HTML, you can tweak your Last.fm tracks exactly how you like, or however your WordPress theme requires. You have full control!

Download

Download the latest fmTuner from WordPress.org

Requirements

WordPress 2.7 or newer.
PHP 5 or newer
Basic knowledge of PHP, HTML, and WordPress.

Installation

Upload fmtuner.php to a directory inside /wp-content/plugins/ directory. For example: /wp-content/plugins/fmtuner/fmtuner.php
Ensure /wp-content/plugins/fmtuner/ is writable by your webserver.
Activate the plugin through the "Plugins" menu in WordPress.
Set up options in the "Settings" menu in WordPress.
Place the PHP code if(function_exists('fmtuner')) { fmtuner(); } in your templates, to call up fmTuner.

Release History

fmTuner 1.1 Released on Feb. 1, 2010 Added a placeholder image field to the fmTuner Settings page, which will be substituted when tracks have no artwork. Tested under WordPress 2.9.1.
fmTuner 1.0.8 Released on Nov. 3, 2009 Fixed a bug with the [::url::] fmTuner tag that caused Last.fm links to appear incorrectly.
fmTuner 1.0.7 Released on Apr. 23, 2009 Tracks with foreign character sets now display more accurately.
fmTuner 1.0.6 Released on Mar. 29, 2009 You can now display more than 10 Recent Tracks, and you should get fewer tracks without artwork.
fmTuner 1.0.5 Released on Mar. 22, 2009 Track information is now properly escaped to handle $ signs, quotes, and other non-alphanumeric characters.
fmTuner 1.0.4 Released on Dec. 14, 2008 Made minor tweaks for fmTuner Settings page under WordPress 2.7.
fmTuner 1.0.3 Released on Nov. 15, 2008 By request, a [::number::] fmTuner tag has been added, which emits a sequential number for each track (starting at 1). This is particularly useful for CSS and JavaScript display purposes.
fmTuner 1.0.2 Released on Oct. 5, 2008 Added a cURL-based alternative to file_get_contents to hopefully resolve "URL file-access is disabled" issues. If allow_url_fopen is disabled in the php.ini, cURL will be used to fetch the Last.fm feed instead.
fmTuner 1.0.1 Released on Sept. 9, 2008 Added better failure checking and informational messages, removed development code, and updated instructions.
fmTuner 1.0 Released on Sept. 6, 2008 Initial release.

How to Run Hamachi on Leopard

2008-08-30T00:00:00Z

A while back I detailed how to get Hamachi VPN running on Mac OS X, but times have changed, so here's how to go about it under Leopard. Again, it's a bit tricky, involving some Terminal work, but it's pretty straightforward as far as command-line software goes.

Download and Install Tun/Tap

Hamachi for Mac OS X depends on some other tunneling software, a Tun/Tap kernel extension which does the low-level work. Download the latest Tun/Tap package and install it.

Download and Install Hamachi

Next, download the latest Hamachi for Mac OS X. Installation is a bit more complicated than the Tun/Tap drivers. Unzip the archive, and open up a Terminal window, and type cd, followed by a space. Don't press Return just yet... Instead, drop the Hamachi folder right into the Terminal window, which will insert the path to that folder after the prefix you just typed: cd /Users/you/Downloads/hamachi-0.9.9.9-20-osx. Press Return, and the Terminal's new working directory will be the Hamachi folder -- this is just a quick drag-and-drop shortcut to avoid typing out the path to a folder you already have available.

Once in the Hamachi folder, type sudo ./install. Enter your administrator password to perform the install.

Hamachi should now be installed, and you can initialize it for the first time by typing hamachi-init. This will generate public and private encryption keys in your Home folder, under .hamachi/ (the initial dot makes the folder hidden in regular Finder windows). With both set-ups out of the way, it's time to start using Hamachi!

Run Hamachi

Configure Tun/Tap by typing sudo ./usr/sbin/tuncfg

Start up Hamachi by typing hamachi start followed by hamachi login.

At this point, you should be connected to the Hamachi service, but without a VPN for your computers to join. If you already have a network, or plan to join a trusted friend's network, you can easily join it by typing: hamachi join SomeNetwork.

Most likely, though, you'll need to create your own network: hamachi create MyNetwork

Now you should have a virtual network in place and can go online hamachi go-online MyNetwork.

To see other parties on the network, run hamachi list

If other computers are online, you're ready to connect to them with any higher-level software like iChat via Bonjour, the Finder's "Connect to Server" command, Safari, etc.

To log out of Hamachi and shut down VPN connections, run hamachi stop

For more information about how to use Hamachi, you can view its manual by running hamachi -h.

Coda 1.5

2008-08-27T00:00:00Z

The developers at Panic have been very busy for the last several months preparing a major update for their one-window web development app (covered earlier), Coda, and have finally delivered. Coda 1.5 brings tons of new features like multi-file search, customizable books, "reverse publish", and more, but the one that really takes the cake is full Subversion support. None of that bolted-on nonsense, either -- Panic went out of their way to carefully weave Subversion into the interface, presenting commands as needed. The update is also free for registered owners.

If Coda is your primary tool for web development, and you already use Subversion, you're most likely aware of Versions and Cornerstone, but now you can toss both of those apps and have your source code management built right into your leafy-green development environment. And, after reading how to go about setting up Subversion on MediaTemple, your Mac web development paradise should be complete, ready to start developing all those killer web apps you've been pondering. Check out Coda and get coding!

iPhoto Billing Information Error

2008-08-26T00:00:00Z

While trying to order some prints from Kodak/Apple via iPhoto yesterday, I repeatedly got the error message "Please review your billing information and approve it." After checking out my billing information twice, and still getting that error, I found the answer on an Apple Discussions thread: Make sure your credit card verification code is entered in the Account Information screen. Why iPhoto doesn't highlight or complain about the missing required field is beyond me, but overlooking this tiny field causes problems that hardly indicate their source.

MacBook Pro Insomnia

2008-08-03T00:00:00Z

For the past several weeks, my MacBook Pro had been occasionally waking up during periods where it was expected to be in sleep mode. Even with the lid closed, it would briefly wake up, illuminate the screen and Apple logo, then fall back asleep moments later. Seemingly random, it would sometimes happen only once every other day, and other times it would happen sequentially with only seconds in between cycles. I had no idea if the issue was hardware or software, but it didn't seem major enough to warrant an AppleCare call.

A quick trip to the Console application in the Applications > Utilities folder reported dozens of instances of "USB caused wake event (EHCI)", which gave me some initial Google hits. The obvious answer is that a USB device was waking up the computer, however I rarely had USB hardware plugged in when the random awakenings were occurring.

As it turns out, others have had this problem before. As indicated in the previous links, Mac OS X keeps its power schedule inside /Library/Preferences/SystemConfiguration/com.apple.AutoWake.plist, but this file didn't exist for me, apparently "confusing" Mac OS X. Without it, it would exhibit the symptoms I was encountering.

Following suggestions, I opened System Preferences, Energy Saver, Schedule, where you can schedule system sleeps and wakes. By toggling on a scheduled wake, clicking OK, then disabling it, the com.apple.AutoWake.plist was re-created, and left with no scheduled sleeps or wakes. So far, this has cured my MacBook Pro's insomnia!