NearStory Launch

    I don't make it habit of plugging products on my blog, but this one warrants it.

    Longtime office mate, Giovanni Salimena, is officially launching his iOS application, NearStory. It's already up in the app store and its free to download and free to use. Near story aggregates news/audio content related to your location, so that you can learn the local history of the area around you.

    Download it on the app store.

    Installing Provenance (OpenEmu) on iOS 11 without a jailbreak

    Provenance Logo

    Following up yesterday's post on how to install PPSSPP, I decided to add the instructions for how to install Provenance on iOS 11 without jailbreaking. I wrote in 2015 a guide on how to install emulators via Cydia and sideloading services which is worth checking out for more information on emulation on iOS. Provenance is THE go to emulator for retro iOS gaming, as its based on the wildly popular OpenEmu and boasts MFi gamepad support. Best of all, it is incredibly easy install compared to RetroArch or PPSSPP. Only RetroArch provides a wider range of support. Provenance boasts support for:

    • Sega
      • SG-1000
      • Master System
      • Genesis / Mega Drive
      • MegaCD
      • Game Gear
      • 32X
    • Nintendo
      • NES (Nintendo Entertainment System)
      • Famicom Disk System
      • SNES (Super Nintendo)
      • Gameboy / Gameboy Color
      • Gameboy Advance
    • Atari
      • 2600
      • 7800


    Building iOS applications requires installing Xcode, so if you haven't installed Xcode or updated to Xcode 9.0, download it. Once installed, launch Xcode and then launch a terminal session. Run the following to install the CLI utilities for Xcode.

    xcode-select --install

    Step 1: Download Provenance

    Either download the zip from or via the terminal.

    git clone

    Step 2: Provenance.xcworkspace

    Open the xcworkspace file (Not Provenance.xcodeproj)!

    Provenance setup in xcode

    Step 3: Set up the xcworkspace

    1. Set up the project to the Provenance app
    2. Set the target to your iOS device (be sure you have it connected)
    3. Change the bundle identifier to something unique
    4. Set up your developer profile

    Step 4: Build!

    Hit build, you're good to go. Provenance is incredibly easy to set up. Go to the official wiki for full details on how to use of the emulator.

    If you encounter the error, Untrusted Developer: "your device management setting do not allow using apps from developer... on this iPhone. You can allow using these apps in Settings."

    Go to Settings -> General -> Profiles & Device Managment and under developer App, tap your profile to allow apps.

    Congrats, you're now ready to use Provenance.

    Step 5: Adding games to Provenance

    Provenance Uploads

    Make sure you iOS device and computer are connected to the same access point. Tap on the Provenance icon on your iOS device. Click the + icon to start the webserver. Go to your computer and navigate to the URL in the message on the screen of your iOS device.

    Leave your rom files in .zip file to save space. You can queue up as many games as you want using shift click from the file menu. Sub Folders do not appear to be work within the Roms folder.

    Provenance is one of the better iOS apps. You'll probably want to pick up a MFI enabled controller to get the most out of it.

    Installing PPSSPP on iOS 11 without a jailbreak

    Installing PPSSPP on iOS 11 isn't particularly hard but does require several steps which can be mildly daunting for non-developers or non-iOS developers. I based this guide off of the official guide but realized it provided scant details to troubleshoot any issues.

    Important support disclaimer

    PPSSPP, as of writing this is, not officially supported on iOS 11. iOS 11 was the reckoning for older apps, dropping 32-bit support. From a development standpoint, often this means replacing out-of-date libraries that require more than mere hours of work. Videos on youtube and articles claiming iOS 11 PSP emulation are generally posted around 2015 or 2016 running iOS9/iOS10, well before even the iOS 11 beta with updated titles to garner views. Some video and articles posted more recently, again, show complex sideloading claiming iOS 11 support but the project hasn't been updated. Websites like RedmondPie are distributing IPAs, they won't work. If you'd like to keep tabs on iOS 11 support, I'd suggest looking at as they'll likely build the first stable iOS release for their service or better the official PPSSPP github. The emulator, Happy Chick, often featured in these YouTube videos and articles, also does not support iOS 11, which also uses the PPSSPP core. PPSSPP will launch on iOS 11 but it will be unable to load a game, this is due to 32 bit only support for dynamic recompilation as the emulator must on-the-fly recompile code meant for the PPSSPP. This guide should be accurate if/when PPSSPP gains 64 bit dynarec support and I plan to update this guide when that day comes. If you are interested in a fully functional emulator for iOS 11, I have a guide for installing Provenance, which supports a host of 8-bit and 16-bit era consoles (SNES, Genesis, Sega CD, NES, Master System, GameGear, GameBoy, etc).

    These instructions should work for iOS 9 / iOS 10 devices as well.

    For more information about Emulation on iOS, please see my very extensive guide iOS Emulation, gamepads, Cydia, Xcode, - A Tutorial for iOS emus. It's geared as primer for iOS emulation and the various ways emulators can be installed on iOS.

    PPSSPP icon


    Building iOS applications requires installing Xcode, so if you haven't installed Xcode or updated to Xcode 9.0, download it. Once installed, launch Xcode and then launch a terminal session. Run the following to install the CLI utilities for Xcode.

    xcode-select --install

    If you do not have an Apple developer ID, you will need to create one.

    Step 1 Confirm MacPorts is installed

    port version

    If you get an error message or about version matching or command not found, Go to MacPorts Releases and download the version of macports that matches your OS version.

    Step 2

    Navigate in your terminal to the directory you'd like install the project to.

    Run in your terminal: (this may take a bit depending on your internet connection)

    git clone

    After its installed navigate into your newly cloned repository,

    cd ppsspp

    Next from ppsspp directory run the following:

    git submodule update --init --recursive

    Step 4

    Next we want to create the PPSSPP.xcodeproj and dependencies in an directory called build-ios. This will take a bit.

    mkdir build-ios
    cd build-ios
    cmake -DCMAKE_TOOLCHAIN_FILE=../cmake/Toolchains/ios.cmake -GXcode ..

    If you get an error:

    Error: Current platform "darwin 16" does not match expected platform "darwin 15"
    Error: If you upgraded your OS, please follow the migration instructions:
    OS platform mismatch
        while executing

    The above error means you have the incorrect version of MacPorts. Go to the link listed above and download and install it.

    Step 4

    Open up PPSSPP.xcodeproj in the build-ios folder in Xcode.

    Codekit settings

    Select in the menu, the PPSSPP app icon, instead of ALL_BUILD. If you do not do this, you will not successfully build the app. Next Under Project -> Build For, select running.

    Plug in your iPhone or iPad into your computer and select the target as your device instead of a simulator.

    If you hit build, mostly likely you will get a provisioning error. Assign it to your developer ID. If you haven't added your developer ID, go to Xcode -> Preferences -> Accounts, and add your developer profile. In the general tab of the PPSSPP project assign your developer profile to the Signing section.

    Hit build. If Xcode errors out abt the bundle identifier, give a random string after the .org name.

    properly configured Xcode project for PPSSPP

    Image: Properly configured PPSSPP project requires the fields to be set.

    Step 5

    PPSSPP on phone

    You should now see PPSSPP on your iOS device.

    Untrusted Developer

    If you encounter the error, Untrusted Developer: "your device management setting do not allow using apps from developer... on this iPhone. You can allow using these apps in Settings."

    Go to Settings -> General -> Profiles & Device Managment and under developer App, tap your profile to allow apps.

    Congrats, you're now ready to use PPSSPP. Note, as of writing this, PPSSPP's iOS 11 support is incomplete. PPSSPP will launch but freezes when gamesattempt to load due to the dynamic recompiler not being 64 bit.

    If you'd like to build an iOS 11 compatible emulator, check out installing Provenance

    2017-10-23: Added support disclaimer.

    2017-11-20: Added further support disclaiming, PPSSPP still isn't iOS 11 compatible as it looks like youtubers are looking to cash in on the desires of would be gamers through questionable URLs. Why trust me? There aren't any ads here, I'm not getting paid to write this but there are ads on the YouTube vids and websites. Just sayin'

    2017-11-21: Further disclaimer clarification, looks like RedmondPie is linking a busted IPA file. Until the PPSSPP github project is updated, there will be no iOS 11 PPSSPP support. It's that simple.

    Creating an SVG Fill animation

    Recently I was tasked with creating a fill animation on an SVG; a request has come up a few times recently even for my company's website. The animation as described would rise up to reach a certain predetermined point and stop, like a vertical progress bar. I didn't find any 100% useful guides but was able to piece together from previous SVG work, and a few good stack overflow finds the basics.

    Svg animation

    Creating an SVG fill animation requires some knowledge of a graphics program like Sketch or Illustrator. For this example, I'll be outlining what I did in Sketch to treat the graphic, but this is not Sketch specific. I'll do my best to make this novice accessible but some basic understanding.

    Step 1: Treating your graphic

    Creating a fill animation requires the right graphic. To pull off this animation, we need a polygon that's a solid color for the vertical progress bar effect. This particular animation will rise up to the 25% mark as outlined by the article.

    Originally this graphic's green fill was a separate layer. While this a correct way to illustrate this, it's not easily animated. If we were to stretch the image, the effect would appear like the animation below.

    Lightbulb gift

    Instead, a much simpler solution is to use a gradient fill. Due to the trickiness of SVGs and gradients, make sure the gradient points extend the entire length of the fill; otherwise, the start and end points can create problems. Sketch is a little picking about gradient points, so don't worry if you can see the gradient transition. We will correct this in the XML of the SVG after exporting. Make sure you name your SVG polygons as this will become very useful for CSS as these will become the IDs for each polygon.

    Codekit settings

    Step 2: Export and paste

    Note: A caveat of the SVG format is that it requires being inline on a page for CSS to be able to target the SVG nodes. If it's linked via SRC, CSS is then unable to target the XML in the SVG. We want CSS control as we will be using it to set the gradient.

    Paste in the SVG into your HTML (feel free to remove any XML comments in the header). There are two things to observe: All the SVG gradients are declared <defs>in the section of SVG and that the gradient is linked within the polygon.

    Step 3: Creating more gradients

    To create our animation we're going to need three gradients:
    1. Default Gradient - this will be our default unfilled state
    2. Animation Gradient - this will be our gradient that contains tags within our gradient
    3. Finished Gradient - this is the final animation state, this will be our simple bobbing animation that loops infinitely after the animation has completed

    In the defs, I'm going to do three things: first name gradient and secondly set the second stops to the same endpoint to create the illusion of a solid line. Lastly, I need to make the light bulb "empty" so I'll set the offsets of the last two gradient stops to 100%.

      <linearGradient x1="0%" y1="0%" x2="0%" y2="99.9334221%" id="bulbGradient-default">
          <stop id="stop1" stop-color="#FFC809" offset="0%"></stop>
          <stop id="stop2" stop-color="#FFCF06" offset="100%"></stop>
          <stop id="stop3" stop-color="#6CB31D" offset="100%"></stop>

    Copy and paste and rename the gradient to match this pattern. It'll take a bit of trial and error but set the final stop offset points.

      <linearGradient x1="0%" y1="0%" x2="0%" y2="99.9334221%" id="bulbGradient-animate">
         <stop id="stop1" stop-color="#FFC809" offset="0%"></stop>
         <stop id="stop2" stop-color="#FFCF06" offset="73.5%"></stop>
         <stop id="stop3" stop-color="#6CB31D" offset="73.5%"></stop>
     <linearGradient x1="50%" y1="0%" x2="50%" y2="76.9334221%" id="bulbGradient-end">
         <stop id="stop1" stop-color="#FFC809" offset="0%"></stop>
         <stop id="stop2" stop-color="#FFCF06" offset="73.5%"></stop>
         <stop id="stop3" stop-color="#6CB31D" offset="73.5%"></stop>

    Step 4: Animation

    We can't target the defs via CSS, but we do have another tool, SMIL animation. SMIL is depreciated, but it works for linear gradients. SVGs can contain animations. SMIL is supported in all browsers sans IE/Edge (more on that later). For this example, we're going to use animate Animate consists of the attributeName (the part we want to animate in our parent), duration, values and repeat count. Normally we'd use CSS animations as they're more well supported but as of writing this, I've yet to find any way to animate gradients without complex JS. Within our stop tags, we'll add the animate values. Fortunately, for both animations, the last two stops will contain the same animation to continue our solid line effect.

    If we do not declare a begin property, the animation will automatically regardless if we can see it once the DOM is ready. To prevent this, we need to set the begin time as indefinite otherwise our animation will begin to play. We may not even see our animation or see a strange jump. We also need to give each animate property an unique ID so we can target them.

         <linearGradient x1="0%" y1="0%" x2="0%" y2="99.9334221%" id="bulbGradient-animate">
            <stop id="stop1" stop-color="#FFC809" offset="0%"></stop>
            <stop id="stop2" stop-color="#FFCF06" offset="73.5%">
                <animate attributeName="offset" dur="2s" values="1; 0.735;" repeatCount="1" begin="indefinite" id="bulbGradient-animate-stop1"/>
            <stop id="stop3" stop-color="#6CB31D" offset="73.5%">
                <animate attributeName="offset" dur="2s" values="1; 0.735;" repeatCount="1" begin="indefinite" id="bulbGradient-animate-stop2"/>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="76.9334221%" id="bulbGradient-end">
            <stop id="stop1" stop-color="#FFC809" offset="0%"></stop>
            <stop id="stop2" stop-color="#FFCF06" offset="73.5%">
                <animate attributeName="offset" dur="5s" values="0.995; 0.95; 0.995; 0.95; 0.995;" repeatCount="indefinite" begin="indefinite" />
            <stop id="stop3" stop-color="#6CB31D" offset="73.5%">
                <animate attributeName="offset" dur="5s" values="0.995; 0.95; 0.995; 0.95; 0.995;" repeatCount="indefinite" begin="indefinite" />

    Step 5: CSS

    Finally, we need to set up our CSS so control our linearGradient, each gradient being assigned to a CSS state. The following is written in scss.

        #bulb-icon {
            #Bulb {
               fill: url(#bulbGradient-default);
          #bulb-icon.animate {
            #Bulb {
               fill: url(#bulbGradient-animate);
          #bulb-icon.end {
            #Bulb {
               fill: url(#bulbGradient-end);

    What we have is a pre-animation state gradient, the actually animated gradient, and then the final state after the animation for the gradient.

    Step 6: Javascript

    First, we need to create objects from our animate tags, this way we can access the methods available to them.

        var bulbstop1 = document.getElementById('bulbGradient-animate-stop1');
        var bulbstop2 = document.getElementById('bulbGradient-animate-stop2');

    After that, it is time to write simple our JS. We want to create an animation based on time via JS using a simple setTimeout function to change the class after it is done. The animation is 5 seconds long, so I've made the setTimeout a few ms shorter than 5 seconds. To trigger the animation I need to use the beginElement() method. This initializes the animate.

        function animate(){
          $("#bulb-icon").attr("class", "animate");;
            $("#bulb-icon").attr("class", "end");;
          }, 4995);

    Note: I learned about the beginElement() method from a great blog post at which I highly recommend reading.

    IE Support

    As mentioned previously, Internet Explorer and Edge do not support SMIL with no plans to support SMIL. However, we can add SMIL support with Fakesmile, an Internet Explorer shiv.

    Our final Product!

    See the Pen SVG Animation by Greg Gant (@fuzzywalrus) on CodePen.

    Update 10/20/17: Added in more info about JS. Added the restart animation to CodePen. Added info about beginElement

    Total Eclipse Oregon

    "Welcome back to daylight Portland. So that's it, the last solar eclipse to be seen on this continent in this century..

    And as I said not until August 21st, 2017, will another eclipse be visible from North America. That's 38 years from now. May the shadow of the moon fall on a world at peace" - Frank Reynolds, ABC News

    Such unbridled optimism... :(

    Total Eclipse Hubbard Oregon

    Pictured: Hubbard, Oregon. Captured on my OM-D EM5

    A total eclipse is something to behold as it touches more than the eyes. There are a few silly things I never considered going in which were all obvious in retrospect, the sudden temperature drop, the quiet as all traffic stopped and birds (mostly) stopped chirping, the distant cheering, and the 360-degree sunset. As fortunate as I was to witness it, friends in Salem and north of Corvallis reported being able to see the stars. I feel no need to place any more special significance on the experience than the beauty of nature and astrophysics. That alone should be enough to inspire...

    The lead quote by Frank Reynolds can be found at 9:12.

    Also, bonus, watch at eight as the commentators speculating as to what Oregon was like 360 years ago, the last time the path was nearly the same.

    Simple GUI for an image conversion script on OS X

    This project has less practical value that I'd like to admit, but I decided to go down the rabbit hole of trying to figure out how to create simple GUI for a bash script. This script takes a retina image and down converts into a plethora of formats. Perhaps one day this could be wedged into a straightforward Xcode project that gives it a real GUI and thus more options. I merely ported my my CodeKit 3 hook to an independent shell script and added Zenity after exploring a few options. Notably, there is no error catching.


        brew install imagemagick --with-openjpeg
        brew install webp
        brew install mozjpeg
        brew install zenity

    GitHub Jist

    Creating a CodeKit 3 Hook Tutorial - for Webp & JPEG2000 image conversion

    Despite writing the most comprehensive review of Codekit on the internet, there's a feature I've never spent much time within Codekit: hooks. Most of my day-to-day dev is now in Gulp/Grunt/Webpack thus I haven't dedicated the time to set up a hook. Personal antidotes aside here's a quick tutorial on how to get started with CodeKit Hooks, using a simple bash script to hook into the exceptionally powerful ImageMagick.

    I highly recommend checking out my previous post on JPEG 2000 and WebP for a more in-depth look at creating JPEG 2000 and WebP assets manually. The quick and short is there are (somewhat) better image formats that have been developed for lossy image compression, as the JPEG format is now 25+ years old. Modern web browsers support a smattering of new formats, but no single format is the clear winner. Safari supports JPEG2000 and HEIF(barely). Chrome/Opera support WebP. IE11/Edge supports JPEG XR. WebP/JPEG2000/JPEG-XR all support alpha layers, and presumably HEIF. JPEG2000 / WebP supports both lossy and lossless image compression and JPEG-XR and JPEG2000 8-10 bit color. Firefox in atypical new format crisis the laggard (Remember Ogg anyone?). Sadly, JPEG-XR is a headache due to proprietary hell and is mostly absent on macOS(OS X) or Linux, and HEIF is too avant-garde. BPG is pretty much DOA.

    Creating a Hook

    CodeKit 3 hooks allow CodeKit to tap into your Mac's terminal or Applescript, and trigger scripts to process files. The aforementioned can be exceptionally handy. CodeKit's documentation is pretty solid for getting started with hooks but novice and junior devs might be a bit perplexed as to how or why you may want to do this.

    For those who haven't used or perhaps heard of ImageMagick, it is a CLI utility that allows you to process images in any number of ways, like batch convert file formats, scale images, add borders, remove alpha masks and more. This tutorial only includes a very particulary example of ImageMagick and will require some basic terminal usage. If you'd like to learn more basics of ImageMagick, I suggest reading Process images for your blog with ImageMagick. Most novice developers should feel comfortable with the terminal enough to understand the few basic lines of code in this project. Junior developers should always be wary of executing random terminal commands, especially ones that ask you use sudo commands. All the bash scripts presented should be harmless and do not require sudo.

    Step 1 - Homebrew

    Install HomeBrew. In your terminal, type:

          brew - v

    If running the previous command returns "command not found", go to Homebrew's website, which should have the installation instructions on the first page.

    Step 2 - Installing ImageMagick

    Once homebrew has been installed or verified that it has been previously installed, its time to install ImageMagick with JPEG2000 support as by default it does not come pre-baked with JPEG2000 support or WebP. Fortunately, WebP only requires installing separately.

          brew install imagemagick --with-openjpeg
          brew install webp

    Note: If you have a previous version of ImageMagick installed, you may need to run brew uninstall imagemagick to include JPEG2000 support. Annoyingly, ImageMagick will merely write JP2 files as the source file's file format if OpenJPEG is not present but with the caveat of appending the file with the new file suffix. This is very confusing, misleading, and frustrating. It took me roughly an hour to deduce that JPEG2000 requires OpenJPEG with ImageMagick. If you find ImageMagick creating JPEG2000 files that are massively larger than a PNG, Run magick identify -verbose filename to see if your JPEG2000 is truly a JPEG2000. If it reports your .jp2 file as a PNG, then you are missing OpenJPEG.

    Step 3: Creating a CodeKit 3 Hook

    In CodeKit, click on the gear icon, and click hooks. Click add a new hook. For this example, we're going to create a Shell script (Terminal bash script). Codekit has its own variables that can be passed into your shell script.

    The basics of converting files in ImageMagick is pretty simple:

           convert input.file -quality (numeric setting) output.file

    ImageMagick will export the file type based on you the suffix you choose. My goal is to create both a JPEG2000 and WebP image using ImageMagick in the same directory as the original PNG.

        convert $CK_INPUT_PATH -quality 75 $webpFile
        convert $CK_INPUT_PATH -quality 50 $jp2File

    Codekit settings

    NNotably, there are many ways to go about this, but I went for simple. Here's a quick rundown of what the following code does:

    • $CK_INPUT_PATH and $CK_OUTPUT_PATH are both CodeKit 3 variables that are passed into a shell script. You can read about them here.
    • webpExt=".webp" and jp2Ext=".jp2" are bash vars I use to append a file name.
    • ${CK_OUTPUT_PATH%.png} removes .png from the output path.
    • webpFile="${CK_OUTPUT_PATH%.png}"$webpExt makes a variable with the correct path/filename - .png suffix + .webp suffix.
    • JPEG2000 support
    • convert $CK_INPUT_PATH -quality 75 $webpFile runs ImageMagick's convert function on the CodeKit input file and then processes it with quality 75, and exports it the CodeKit 3 location with the proper file type that I set up in previous steps.
    • I repeat this on JPEG2000.

    Pretty simple right?

    Hopefully, it was. If it wasn't, don't sweat it. The terminal is pretty much using a computer without handrails. CodeKit may buffer you from the terminal, but it's entirely worth your time as a developer to get comfortable with it and expected in most types of development.

    The quality settings will need to be tweaked. Often its better to do this sort of processing hand as I've had some wildly varying results on JPEG2000 and WebP, but this is a simple way batch convert PNGs to WebP and JPEG2000 images, so Chrome/Safari users (99% of North American mobile users) can enjoy smaller image file sizes. Also, PNG with CodeKit's ImageOptim on PNGs can be hyper-effective, and for simple images often best JPEG2000 and Webp.

    Bonus: MozJPEG

    If you'd like to use PNGs as sources, you can also create JPGs of your images using MozJPEG. MozJPEG only supports a few input formats. This script assumes you have a high-quality PNG. Its recommended not to use Codekit's PNGquant on the source PNG. Notably, this script could be exampled using ImageMagick accept @2x only images and resize them. Here's a more involved script that will take Retina PNGs and convert them into 2x and 1x JPEG2000, JPEG, and WebP. The quality setting is arbitrary. You'll want to set up a source folder and build folder otherwise you'll end up with recursive files.

    Install MozJPEG

        brew install mozjpeg

    Bash Script for CodeKit (read above for notes)

        # vars for use later
        # make half size PNG path name, create a 1x PNG.
        convert  $CK_INPUT_PATH -resize 50%  $halfsizepngFile
        # webp
        convert $CK_INPUT_PATH   -quality 75 "${CK_OUTPUT_PATH%.png}"$twoX$webpExt
        convert $halfsizepngFile -quality 75 "${CK_OUTPUT_PATH%.png}"$oneX$webpExt
        # jpeg2000
        convert $CK_INPUT_PATH    -quality 70 "${CK_OUTPUT_PATH%.png}"$twoX$jp2Ext
        convert $halfsizepngFile  -quality 70 "${CK_OUTPUT_PATH%.png}"$oneX$jp2Ext
        # ppm temp for MozJPEG
        convert $CK_INPUT_PATH  $ppm2x
        convert $halfsizepngFile  $ppm1x
        # jpeg (MozJPEG)
        cjpeg -quality 70 $ppm2x > ${ppm2x%.ppm}$twoX$jpgExt
        cjpeg -quality 70 $ppm1x > ${ppm1x%.ppm}$oneX$jpgExt
        # remove temp ppm
        rm  $ppm2x
        rm  $ppm1x

    Double bonus

    I ported the same script as above to a jenky UI meant to be used outside of CodeKit.

    Update August 19, 2017 - Added second script with image resizing + MozJPEG and corrected missing WebP installation step.

    Getting started with Webp, JPEG2000, and JPEG-XR

    I was recently tasked with re-architecting Emerge Interactive's website, a CMS site based off of Expression Engine, which involved the usual work flow of creating requirements, and moving pixel to code. Previous enhancements to our website included classic bandwidth saving strategies: minification of CSS, uglification of js, lazy loading, inlining the crucial CSS to speed up time-to-paint, and such. However, we never touched images until now which is one of the easiest places to shave off hundreds of kilobytes.

    I've had an affinity for image optimization, going as far as to test out Google's guetzli. I decided to revisit something I've been meaning to test out: Alternative image formats.

    Quick Primer

    For those who aren't as versed in image compression, our choices are familiar for bitmapped images: JPEG (lossy, no alpha), PNG (Can do alpha, optimized by pre-processing with lossy strategies) and GIF (LZW and a complete waste of bandwidth). However, there are other image formats that browsers support: JPEG 2000 (Safari 5+), JPEG-XR (IE9-11, Edge), and Webp (Chrome, Opera, Android Browser). If you're keeping score, you're probably noticing two things: That's a fractured landscape, and FireFox wasn't mentioned, both are true. FireFox so far hasn't backed a format, and instead chose to write its own JPEG encoder that offers a 5% data savings as opposed to adding support for WebP, BPG or either JPEG format.

    There's plenty of other places that perform comparisosn but the long and short is that per kilobyte. JPEG2000, JPEG-XR and WebP deliver considerably better images than JPEG and (often) PNG and it doesn't take too much effort. I'd recommend reading the following, David Walsh's WebP images and Performance and playing with the incredibly nifty a format comparison tool

    All three do not require any purchases.

    What you need:

    • A high quality source file (preferably lossless)
    • JPEG-XR: Microsoft provides a free photoshop plugin that can be downloaded here or nab xnview
    • WebP: WebPonzie provides the most painless and easy to use solution. XNView also has WebP support.
    • JPEG2000: Photoshop, Preview both have native support. XNView also has JPEG2000 support. (I've had the best results using Apple's Preview for whatever reason)

    The markup

    Adding multi-format support doesn't require much, just a picture element. Below is an example of a simple picture. This can be mixed with srcset.

        <source type="image/webp" srcset="path/to/image.webp">
        <source type="image/jp2" srcset="path/to/image.jp2">
        <source type="image/jxr" srcset="path/to/image.jxr">
        <img src="path/to/image.jpg" alt="alt description">

    Final Thoughts

    Really, that's all it takes. Notably on macOS previewing JPEG-XRs are a pain, whereas at least WebP can be previewed in Chrome. It takes Photoshop or opening a JPEG XR in Xnview and going to the actions tab, applying a filter so you can view the original JXR file. At the very least, you'll be providing better images at the same file sizes as a normal JPG.

    The case for iTunes Match for all in a permanently ephemeral world

    Last week I had an interesting conversation with a co-worker. She had taken her laptop to Apple. Apple restored her computer but it wiped her iTunes library, and she was confused as she assumed she'd get her music back. She doesn't have Apple Music or Match, but he did get some of it back. She only has the free iCloud 5 GB library which was sufficient to restore most of her docs, and the rest were on cloud services like Google Drive (as our office uses Google Drive). Add in another layer, Apple allows all music purchases to be redownloaded but doesn't extend the service to users without buying match. While hardly an Apple apologist, my knee-jerk reaction was "Well, yeah, you have to pay for it." However, I kept thinking about it after the conversation. Expectations being what they are, media is no longer finite. It lives and always lives: Spotify, Apple Music, Google Play, Netflix, HBOGo, Hulu, Audible, Amazon Kindle, Apple Photos, Google Photos. While we do not expect physical books, CDs/Vinyls, DVDs, Blu-Rays, Photo albums to magically exist in vast media centers, the cloud hype has given a strangely disconnected permanently ephemeral (ephemerally permanent?) quality to digital media; that it should be forgotten until remembered. Google already gives away music/photo storage for free, and Amazon does as part of it's mostly buried Prime services so why doesn't Apple?

    iTunes has been a mess for years, and there's been a cottage industry of music purists who've abandoned iTunes, with utilities like Waltr, PhoneView, iMazing, and the music players Swinsian, Tomahawk and Vox Music Player. Perhaps match should be the driver to keep people in the iTunes sphere.

    While it's nothing new to point out the brokenness of iTunes, iTunes Match should be a killer feature provided for free with iTunes long as you're using an Apple ID as a free service or included as a bonus for anyone who pays for iCloud regardless of the storage tier. It's confusing and disjointed for the average user.

    Squeezer - A review

    Squeezer Icon

    It's not every day I discover a task manager GUI utility that I haven't heard of. Apparently, today is such a day as I randomly came across SqueezerApp, a minimalist pre-processor.

    main app window

    Pictured: Main app window is sparse

    In my previous reviews of GUI task managers for front-end development, I went so far as to write glossaries for them so novice readers could find the reviews more accessible. However, due to the narrow lens of this utility, I'm going to skip this. I highly suggest novices read my review of CodeKit 3 as it goes far far more in-depth than this review ventures into the world of task managers, preprocessors and code compiling. I do my damnest to make my reviews effable, convert esoteric front-end web developer speak into human speak rather than pointless pontification. I'll be using words/phrases like task manager, minification, and uglification, with the assumption that you are already familiar with them or you've skimmed through CodeKit 3 Review.

    Squeezer is the most minimalist task manager I've seen to date. For a course refresher: Task managers are programs set to execute pre-defined actions based on events. These events can be chained to many behaviors, but the most common is by manually triggering (usually by a terminal command or in GUI apps, via a button) or when a file is changed. The most common are terminal based applications that do not include GUIs such as Grunt / Gulp / Webpack and are used to compile pre-compiler languages like Sass or TypeScript into browser readable CSS and Javascript. These pre-compiler languages offer benefits of syntactic sugar (making code easier to read/understand) and ability to perform shortcuts to simplify development. This is only scratching the tip of the iceberg when using task managers as they can be configured to do highly specialized tasks like scanning for unused CSS or spin up a headless browser to perform visual auditing. The problem though is that these task managers take a lot of overhead to set up. For junior developers, it may be more important to focus on coding than tooling. For seasoned developers, it may not worth the time investment to create the tooling for a small project.

    Capitalizing on the need, both CodeKit and Prepros have filled the niché of GUI task managers, (and quite well I might add). CodeKit 3 is powerful enough to be viable in a professional environment, and my review of CodeKit 2, I used CodeKit 2 off and on professionally for 9 months (mixed with Grunt). However, GUI task managers do not offer the flexibility of Grunt, Gulp or Webpack. GUI task managers are about ease of use as most users find GUIs far more intuitive than using a terminal and text configured files. The value that a GUI task manager is the simplicity and ease of use it brings.

    general tab settings window

    Pictured: General settings only allow one single path to export compiled code/images to.

    The Review

    Squeezer's website is a bit low on info. There's no information as to what engines it's using to process files, versions of compressors and so forth. It's a mystery box and poking inside the app reveals little. The website is almost a non-entity, and it's developer, Yanis Zafirópulos lists himself as "Dr. Kameleon", adding to the mystery.(If there's ever a red flag, it's someone who calls themselves a doctor without a full Ph.D.). Also, Chameleon? I could infer plenty more. To be clear, I'm joking... I doubt that there's any ulterior motive to less transpicuous.

    Part of the reason I'm learning just now about the application is that there are several "Squeeze" named OS X applications, like the high-end video compressor, Sorenson Squeeze (formerly Squeezer), PDF Squeezer, and a few other utilities making for a tough SEO battle. Finding the official website takes more google-fu than one would expect.

    Squeezer supports the following:

    • HTML: Minification
    • CSS: LESS, Stylus, Scss/Sass and CSS compiling/minification
    • JavaScript: ES6, CoffeeScript or TypeScript compiling/minification.
    • Images: PNG, JPEG (compression), SVG (minification)

    Unlike CodeKit or Prepros, Squeezer isn't made for monitoring your entire project. Typically, with CodeKit or Prepros, the setup project looks something like this:

    • Drag project folder into application window and wait for a second for the application to scan your project
    • Via the GUI's folder structure, click on the parent Sass/Less file, JS file and set the output locations. Configure JS concatenation.
    • In the project settings, enable/disable features like Linting
    • As long as CodeKit or Prepros is open, it will compile your code. The application will remember your settings and create settings a file in your project folder that can be distributed with your project so others can quickly jump in with minimal configuration.
    • Errors are logged in a central error log. The error log highlights problems in your code

    Squeezer is significantly different. Squeezer only wants to know about your parent files. Dragging the entire project into Squeezer will create unexpected results, creating a bunch of partials of compiled code. I made this mistake when testing it and ended up with a CSS file matching every Sass file in my project, plus the properly compiled code when it hit the parent most CSS file. To make matters more confusing, if you enable file watching, Squeezer will not automatically trigger files unless the parent Sass file is manipulated. Even on single page sites, I like to divide up my Sass into separate .scss files. The shortcomings are immediately apparent, as I'm used to Gulp / Grunt / Webpack / CodeKit / Prepros which watch all your Sass and/or CSS and/or JS and recompile your CSS / JS whenever any of said files are manipulated. This isn't simply a preferred methodology, is the most sensible as you never have to remember to trigger your CSS or JS builds. Everything happens automatically.

    So this leaves Squeezer in a strange space. It's a minimalist utility, but it also is more work to use. If you're simply looking to process Sass files in a project just once with the aid of a GUI, I still find CodeKit and Prepros easier.

    css tab settings window

    Pictured: There's a few mystery options such as "advanced optimizations" and "remove all special comments except the first one."

    Squeezer doesn't offer a proxy server either to inject your CSS changes, or trigger reloads when your JS/HTML (or other assets like Python/PHP) changes. Quite simply Squeezer is the most minimal task manager.

    Who is it for?

    If you only need to compile one type of code, then perhaps this is the GUI utility you've dreamed off. Just drag in the parent file, and it'll recompile on saves or perform a single compile. The problem is, I don't know anyone who works like this.

    Lastly, it's worth mentioning that Squeezer is the cheapest of the GUI utilities.

    js tab settings window

    Pictured: JS options are thin

    Final Thoughts

    Several things jumped out at me while writing this review:

    • The one day trial for a development utility feels mildly insulting. I wanted to test the software and found myself against the gun to test it. I'm unwilling to pay $15 for something that I'm unable to even test drive properly. In fact, I may have missed settings and may have some inaccurate information in this review.
    • Squeezer is not as easy to setup as CodeKit or Prepros nor does it have an easy way to specify multiple paths for individual file types.
    • Little documentation, no real support to speak of and a few "mystery" options that'd require me looking at the code to see what they do. I didn't have time to test all options. My review contains more information about Squeezer than its documentation.
    • Even at almost half the price of its competition and functionality, it's not a viable utility outside of the most bare-bones projects.
    • Image optimization actually managed to INCREASE file sizes of many PNGs and JPGs run through ImageOptim and proceeds to overwrite them with the larger files. If image optimization is increasing the file size, then it shouldn't bother to apply changes.
    • Squeezer logs inaccurate minification stats for Sass as it compares the parent file vis the entire compiled CSS, rather than unminified compiled CSS vs the newly minified CSS.
    • There's no error console, and files that shouldn't have compiled still compiled.

    images tab settings window

    Pictured: Squeezer did a great job with vector images but ended with questionable results with PNGs

    I hate to trash on an indie developer I but just cannot recommend Squeezer when CodeKit and Prepros exist, even at double the price. I do think there is room for an even more simple task manager than CodeKit or Prepros but I found Squeezer too simplistic to mimic a workflow even for a very straightforward static website. It may fit others workflow and it has a free trial but even that has its shortcomings of being laughably short, making it difficult to evaluate if there are workable patterns for Squeezer. Add in the lack of documentation or clarity on the compiler versions, no proxy serving/live-reload and stupid logic on image compression, and Squeezer is a bit of a dud. It functions as advertised but without much grace. Squeezer feels like a beta more than a refined application.

    Moving Forward

    misc tab settings window

    Pictured: The Misc options mostly should exist under other tabs like "Just compile".

    Squeezer isn't a total bust, it performs the tasks it purports to do but without any finesse. It really wouldn't take much to make this utility a viable solution. It's a good start and perhaps it could be a useful task manager if just a few things changed. The biggest changes I'd ask for out the gate are:

    • Allow multiple export paths, at the very least by file type. Compiled JS goes into JS folder, compiled CSS goes to CSS folder, images go to the images folder, etc.
    • Extend the CSS/JS watch to include imported files or allow the entire directory to be moved into the project window.
    • Clean up the options; it's baffling that there are "just compile" options in the Misc tab instead of under the file types they pertain to.
    • Add in an error log. I didn't see an. The file size savings is misleading if Sass files or JS files contain imports. The app either should compare the compiled file against all the sources or not at all.
    • Add at the very least live-reload support (CSS Injection would be nice)

    Adding those five features would make this usable and inexpensive alternative.

    Version Reviewed: 2.0

    Price: $15


    Simple Sass Mixin For Color Theming

    I don't post much in the way of code on my blog, most of my tech posts are bug fixes or esoteric configuration. I’ve been sitting on a nifty sass mixin for about two years. and I've recently ported it to codepen. It’s clever for color theming elements. What it requires is:

    • A predefined list/set of colors
    • The desire to use all of these colors on multiple CSS attributes (borders, backgrounds, color, etc) and UI elements
    • A simple way via CSS to set the color dynamically

    See the Pen Sass parent mixin by Greg Gant (@fuzzywalrus) on CodePen.

    Sass doesn't have arrays. Thus you need to iterate through multiple lists, one to define the CSS name and one with the corresponding color value. This can be taken further so other elements on a page could use other themes, even if the parent theme is different.

    See the Pen Sass mixing by Greg Gant (@fuzzywalrus) on CodePen.

    In no way is this limited to colors only, this could be done with lists of any attributes and values.

    Thoughts on Front End Development 2017 Q1

    This is a slightly belated follow up to "Thoughts on Front End Development in late 2016". The idea is to chronicle thoughts I've had between the last time I wrote about front-end development by quarter. I like to pretend this blog is about front-end development and not random hacks for emulators, pining for new Mac Pros and audio gadgetry.

    • I finally used Docker on a project and its wonderful (I'll admit I did not do the tooling to set up the container). It'd be interesting to try and fold in the front end techs into a docker container.
    • Chrome is kinda glitchy again when dealing with React. I've had better luck with code injection on Safari the past few weeks.
    • • I set up Webpack for our two apps at my company. Webpack is mysterious (unlike piping in Gulp) but damn if it isn't necessary for React. I even saved the day for a coworker with custom fonts. It turned out to be configuring MIME types for font loading. It really shouldn't be this hard, but it is.
    • I started on another side project like, and it'll be on React.
    • I'm happy to work on another Django project. I wish I had more projects with Django.
    • Drupal 8 should be headless and do away with its own goofball templating. Ship it with popular templating options.
    • For the first time I'm (almost) full stacking a site (at my current job), with Expression Engine.
    • The next step for React and me is getting into Redux.
    • Windows 10 S makes me sad. It means Edge will gain market share. It's also pretty much an anti-pattern, desktops are open, and Windows best strength has been: its huge library of software. Limiting it to the Windows Store is pretty much terrible, sure its $50 to "unlock" it but if I were Apple, I'd be laughing myself to sleep.
    • I wish Node apps idled better.
    • Changing OS X to target tabs instead of new windows really has been a surprisingly big change in my day-to-day.
    • Net Neutrality is on the ropes again... If there's ever an example of nepotism and a conflict of interest, its appointing Ajit Pai to run the FCC. We're living in a kleptocratic kakistocracy

    Audio Bit Rate Calculator

    I wrote this some time ago as part of a review of a Focusrite Scarlett 6i6 audio capture box, but decided to break it out into its own separate page. This calculator uses the signal-to-quantization-noise ratio formula, Nyquist frequency, and bitrate formulas to calculate various properties of uncompressed PCM digital audio quickly.

    Common formats:
    * *

    Enter bit depth


    Enter Sample Rate


    Enter Audio Channels


    Maximum Dynamic Range


    Pressure Level Values


    Frequency Range (folding frequency)


    *DVD-A has multiple format options, and uses MLP (lossless compression) so the bitrates represent the decoded data-stream.

    Testing Guetzli

    Google posted Guetzli last month. Curious about testing it out, I decided to give it a go. Image optimization is one of the bazillion things a front-end developer needs to know something about. For the sake of sanity, I'm going to assume that readers understand that PNGs are (mostly) lossless and JPGs are lossy. However, most programs that encode to file formats often include additional metadata, or do not make the most efficient usage of the codec thus not all encoders are created equally. Perceptual encoding is tricky and thus assumptions are made within the constraints of the codec as how to interpret the input data. Based on this, there's frequently wiggle room to improve encoders to make them "smarter" and deliver better results.

    Optimization doesn't end at the encoder. In the interest of delivering the smallest file possible, people have written many series of optimizations designed for existing formats, specifically for this article: JPEGs and PNGs. The easiest (and incidentally one of the most effective) is ImageOptim. Without going too deep, ImageOptim combines several popular image optimizations specific to both JPEGs and PNGs and makes it into brain dead easy optimization. It shaves off valuable kilobytes without affecting the image quality. Usually, I export assets from Photoshop or Sketch then treat them with ImageOptim and ImageAlpha (for PNGs). Often front end developers will use Grunt and Gulp tasks that use many of the same libraries that ImageOptim uses to auto-optimize images in a project. Google's Guetzli is a new JPEG encoder which offers new opportunities over my usual post-export optimization tweaks. Guetzli promises better results as opposed to simply smaller files.

    I downloaded guetzli using the HomeBrew version for OS X/macOS. For my test, I started with high fidelity non-lossy phtoographs captured in RAW and converted to PNG source files.

    Time tests

    Rather than inline my source images, here are the below links for reference and the relative time it took to encode on my MacBook Pro 2016 2.5 GHz Intel Core i7, 16 GB RAM, at 84 quality as defined by Guetzli.

    Apples and Oranges

    The big problem is that Photoshop uses a 0-12 quality setting which has never been very sensible. Unlike video codecs that allow you target file sizes via bit rates, there's no real way to produce file sizes at the same size a Guetzli's JPEG engine. Instead it was a guess work, trying to figure out what Photoshop quality produced nearish the same file sizes. After testing several images, Photoshop's 6 out of 12 was the most "like" setting and its highly imperfect. For my very large image, the Photoshop 6 out of 12 quality JPEG was much smaller than the Guetzli's minimum 84 setting. However, when the images were much smaller, all other tests found Guetzli's 84 quality setting producing smaller files than Photoshop's 6 out of 12 quality setting. All images were also run through ImageOptim for further optimization.

    Guetzli just isn't that effective on high resolution images and at least with my test source, the differences were not very profound. I debated running Guetzli on several 16 MP images but with 16 minutes per-convert, the practical application isn't there for most use cases. This left me going back to the drawing board. I downscaled my image to represent a more likely scenario.

    Zoomed In Test

    The following images are screen captures of the zoomed in results of the PNGs/JPGs for comparison. Linked next to each image is the original image (prior to zooming in). Right click to open up the zoomed images for full sized images. My two main test images are both images that have large gradients, where JPG artifacting often is the most visible.

    Original PNG (size 1.2MB)

    Photoshop JPG (size 95k)


    Guetzli JPG (size 88k)


    Surprisingly, Guetzli doesn't come out ahead. You can see the gradient blockiness in Guetzli's JPG. It's more apparent viewing this on a non-Retina display or at 2x on a retina display. The JPEG blur of the default Photoshop image works to its advantage on the gradients. I certainly didn't expect Photoshop's JPEG engine to win any test. That said, the Guetzli image is 7k smaller.

    Original PNG (size 2MB)


    Photoshop JPG (size 236k)


    Guetzli JPG ( size 223k)


    Guetzli comes out ahead quite a bit in the detail of the sky, something JPGs tend to foul up quite a bit. Guetzli certainly wins in this instance and looks better than the Photoshop image.


    Guetzli is slooooooooooooooooooooow. Converting a 20 mb PNG (4,608 x 3,456) image under a normal load (a few applications open, Atom, Preview, Messages, Safari, Chrome, iTunes, Sketch, Codekit, textedit, 1password, Lightroom, Tower), cost roughly 16 minutes of CPU time on a 2015 MacBook Pro (2.5 GHz i7 / 16 GB Ram). First off Guetzli is a single thread application, occupying 99-100% of the 4 cores on my CPU. Sadly, it left 80% of my MacBook idling. Optimization for OS X is nearly non-existent.

    Guetzli is designed for high quality JPGs, by default the quality slider is limited to 84. Anything else will throw up an error in the CLI. It is possible to bypass this by building the binary yourself. Guetzli also is designed to delver higher quality at the same file size than a JPEG encoded by lesser image encoder, as opposed to simply produce smaller JPGs.

    Guetzli assumes the color profile for the JPEGs is SRGB with a Gamma profile of 2.2, this is the same as the default for Adobe RGB (1998) buuuut not as wide of a color space as it'll read as an untagged image color profile. Thus images you've been viewing in a different color profile may look less end up looking less saturated or vibrant or different

    Final Thoughts

    For static assets that rarely change, Guetzli is certainly an option but for my Front End flow, it's not going to be anything I lean on. There's certainly been some impressive image optimization utilities for JPEG over the past several years but my guess we're coming up against the limitations of JPEG. The sadistic side of me wonders if it could be used for Motion JPEG, which is eschews interframes/keyframes and thus is still a great video codec for high motion scenes.

    The Mac Pro is Dead, Long Live the Mac Pro!

    The Mac Pro is a frequent topic in my blog as I've been a bit of an enthusiast. To this date the most read article is Recommended Mac Pro Upgrades. Needless to say, when Apple redesigned the Mac Pro 2013 as a glorified iMac, my reaction to it wasn't kind. I needed some good news today and I got it, Gruber at came away with the biggest scoop today, and I quote:

    We’re not going to get into exactly what stage we’re in, just that we told the team to take the time to do something really great. To do something that can be supported for a long time with customers with updates and upgrades throughout the years. We’ll take the time it takes to do that. The current Mac Pro, as we’ve said a few times, was constrained thermally and it restricted our ability to upgrade it. And for that, we’re sorry to disappoint customers who wanted that, and we’ve asked the team to go and re-architect and design something great for the future that those Mac Pro customers who want more expandability, more upgradability in the future. It’ll meet more of those needs.

    While the word "PCIe" isn't present, expandability and upgradability show up in the above quote, inferring hopefully a return to towers. My 2008 Mac Pro is still going strong and remains easily the best computer I've ever bought, and quite possibly the most over-engineered beautiful computer to date, down to the RAM upgrade trays, to the dual CPU, dual bus design that has made it a viable computer for almost a decade. It's a problem that Apple left us all wondering about it's fate.

    If they're releasing a new Mac Pro, with a few PCIe slots and drive bays, I'll be the first in line to upgrade.

    You can read the whole thing here

    Photoshop Favicon Creator Action for the Obsessive

    I created a photoshop action after being annoyed with favicons and all the variants. It's on GitHub for download. There's quite a bit to it but it creates 13 icons in total. The support list is loooong! I tried to cover everything and this includes (but not limited to): IE11, Edge, Chrome 4+, FireFox 2+, Opera 10.1+, Safari 3.1+, iOS Safari 6+, Google TV, Android Browser 2.1+, Chrome for Android, FireFox for Android, UC Browser for Android, Samsung Internet, QQ Browser, Chrome Store, Windows 8+ pinned sites.

    Size Name Purpose
    32x32 favicon-32.png Standard for most desktop browsers
    57x57 favicon-57.png Standard iOS home screen
    (iPod Touch, iPhone first generation to 3G)
    76x76 favicon-76.png iPad home screen icon
    96x96 favicon-96.png GoogleTV icon
    120x120 favicon-120.png iPhone retina touch icon
    (Change for iOS 7: up from 114x114)
    128x128 favicon-128.png Chrome Web Store icon
    128x128 smalltile.png Small Windows 8 Star Screen Icon
    144x144 favicon-144.png IE10 Metro tile for pinned site
    152x152 favicon-152.png iPad touch icon
    (Change for iOS 7: up from 144x144)
    167x167 favicon-167.png iPad Retina touch icon
    (change for iOS 10: up from 152x152,
    not in action. iOS 10 will use 152x152)
    180x180 favicon-180.png iPhone 6 plus
    195x195 favicon-195.png Opera Speed Dial icon
    (Not working in Opera 15 and later)
    196x196 favicon-196.png Chrome for Android home screen icon
    228x228 favicon-228.png Opera Coast icon
    270x270 mediumtile.png Medium Windows 8 Start Screen Icon
    (not in action)
    558x270 widetile.png Wide Windows 8 Start Screen Icon
    (not in action)
    558x558 largetile.png Large Windows 8 Start Screen Icon
    (not in action)


    1. Download the Photoshop Action and double click to decompress
    2. In Photoshop in the actions menu, click the hamburger menu and select load actions
    3. Locate the Favicon Creator

    Using the action

    The default image must be square and above 228 x 228 pixels (I personally recommend using higher than this). Click play and the action will create 13 icon sizes in PNG.


    Unoptimized PNGs from Photoshop tend to be quite large. I highly recommend for macOS users the free application ImageOptim for lossless PNG compression. It's brainlessly easy. Drag and drop all the newly created PNGs to shave off valuable KBs off your images without any quality hit.

    For the more obsessive, macOS users, ImageAlpha (works in tandem with ImageOptim) as it allows users to use indexed color profiles to even further reduce file sizes. PNGquant works natively from Photoshop and TinyPNG provides a free service usable from your web browser. See favicon cheat sheet for CLI utilities.

    Favicons and you

    As mentioned above this suite of Favicons includes support for (but not limited to): IE11, Edge, Chrome 4+, FireFox 2+, Opera 10.1+, Safari 3.1+, iOS Safari 6+, Google TV, Android Browser 2.1+, Chrome for Android, FireFox for Android, UC Browser for Android, Samsung Internet, QQ Browser, Chrome Store, Windows 8+ pinned sites.

    So what does that leave off? IE8-IE10 and Windows Start Screen Icons. IE8-10 require .ico formats. Notably if you opt to include a favicon.ico, Safari will use the Favicon.ico (macOS/OSX) over the PNG version. This means you will need to create a retina caliber icon. See DaringFireball's guide.

    Due to the unusual formats of the Windows 8-10 tiles, I'd recommend creating these separately.

    HTML (place in your head)

        <!-- generics -->
    <link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">
    <link rel="icon" href="/path/to/favicon-57.png" sizes="57x57">
    <link rel="icon" href="/path/to/favicon-76.png" sizes="76x76">
    <link rel="icon" href="/path/to/favicon-96.png" sizes="96x96">
    <link rel="icon" href="/path/to/favicon-128.png" sizes="128x128">
    <link rel="icon" href="/path/to/favicon-228.png" sizes="228x228">
    <!-- Android -->
    <link rel="shortcut icon" sizes="196x196" href="/path/to/favicon-196.png">
    <!-- iOS -->
    <link rel="apple-touch-icon" href="/path/to/favicon-120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/to/favicon-152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/to/favicon-180.png" sizes="180x180">
    <!-- windows -->
    <meta name="msapplication-TileColor" content="#FFFFFF">
    <meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

    Is all of this really necessary/is there any penalty to including all these images?

    How often do you really bookmark websites? It's an honest question. Favicons are most useful for desktop browsing as they give a nice indicator. The 32x32 is the only Favicon that truly matters, the rest are Favicons for bookmarking sites. If you only created a single 32x32 favicon, you'd support roughly 95% of desktop users and mobile users (albeit with caveats). The biggest losers are mobile Safari, Chrome for iOS, Opera Mini, Blackberry browser being the odd men out either requiring their own formats or not supporting the 32x32 at all. iOS Safari/Chrome only use use the favicon touch icon sizes for bookmarks within the dock. Chances are your users would never see the icon.

    Today, Web browsers are very smart. The only requests made are for the favicon that matches your browser's parameters. Since it takes almost no effort with this action, you may as well include all the favicons for the edge case users.

    Twitter Cards and FaceBook OpenGraph is the new Favicon

    Users now expect Favicons and social media shares to be equally as compelling. Both OpenGraph and Twitter Cards take a little more effort to support: you need to fill out additional meta data but the image sizes can be found below. Either set can be used with regular meta data to make other services (Slack or iOS's Messages in iOS 10/macOS's Messages) social sharing with more beautiful site previews.

    FaceBook Best Practices for Images practices

    Twitter Summary Card with Large Image

    Google MetaData Console

    Future Plans

    Next up is creating an OS X automator version of this, so you won't need Photoshop at all :D

    Requiem for Final Cut Pro

    I finally took time to fire up Final Cut Pro X. The experience was surreal; it's eerily a foreshadowing of the Apple to come: a paternalistic and patronizing tone to its professional users that seems to shout "We know best" rather than "You know best, and we want to provide you with the best." It's the Apple that removes headphone jacks and dreams TouchBars are a feature for professions. The writing was on the wall: The Xserve. The Mac Pro. Final Cut Pro. Soldered on RAM in the MacBook Retina, all in the span of a year. Let it be known, 2012 was the last year Apple cared about creative professionals.

    2016 didn't kill the Apple that we once loved; it happened five years ago when Final Cut Pro 7 was replaced by Final Cut Pro X. If it weren't for OS X, I don't think any of us will still be buying Macs..

    2016 was the year of anxiety over the future of the Mac

    "Speaking of the Mac Pro, I was reminded today about a time when Apple was proud of the professional Macs they shipped. Until the middle of last year, they had a dedicated page for professional users and case studies." - Nick Heer, PIXELENVY

    ". In the Mac line, at least, 2017 Apple seems a lot like 1994 Apple: misguided products, propped up by gouging the loyalists. The difference is that today’s Apple isn’t dependent on computers, and indeed barely cares about them thanks to the timespace-warping enormity of the iPhone. It’s like being in an alternate timeline where the Newton was a smash success, so the Sculley/Spindler era went on indefinitely."

    "I’m honestly not sure Apple is even a consumer electronics company anymore. I’m starting to think they’re more a fashion and luxury goods company instead. When they make the devices thinner just for aesthetics, at a genuine cost to their performance or utility, the old “form over function” slam rings a little more true than it used to. As does the idea of charging high prices because they can" - Chris Adamson. Time Code

    "But here’s the problem: in retrospect, what they built was a device based around their own ego needs of proving their critics wrong, not a device that served the purposes of their power users. It’s not configurable, it’s not upgradeable, it’s not expandable: It’s pretty, and full of (for 2013) innovative hardware design, but is that really what Apple’s power users needed?

    I don’t believe so. I think they were much better served by the “cheese grater” Macs of the previous generation, and I think Apple needs to rethink this, and for the high end, go back to more of a developer machine which gives users flexibility to expand it and customize it to their needs. Just like the old Mac IIci, one of the best computers Apple ever built. I propose just this in a piece I wrote about this.

    The Mac Pro, and its possible successor are serving niches within the niche that is the Mac market overall, but it’s an important niche: it’s the power users, the influencers and the developers who build all of the Mac and IOS apps we all depend on. These are important people that support and evangelize the Mac AND IOS platforms and ecosystems, and Apple has done a poor job of supporting their needs for a good three years now." - Chuq Von Rospach,

    "I use a Mac as my daily driver, and have rarely made a tech-related purchase I regretted. And I've never returned a Mac, until today.

    The 2016 MacBook Pro is a mixed bag. Many features (most shared between the two models) are huge improvements in the Pro lineup—like the SSD speed, size and weight, keyboard feel, and Thunderbolt 3/USB-C. Other features (like the Touch Bar) are worse than useless—they make the user experience worse.

    I hope Apple realizes the blunder with the Touch Bar (and with the confusing lineup of laptops they currently sell) and either fix it or remove it entirely. I'd be happy if Apple only preserved the Touch ID/power key combo." - Jeff Geerling,

    While Brooks and others are arguing that iPad will eventually replace the Mac, Gruber is arguing there will always be a need for macOS—specifically a desktop operating system. Despite what my aforementioned dalliance with iPad might suggest, I’m firmly in Gruber’s camp. - , Delusions of Grandeur

    I find a bit of solidarity that other Mac faithful seem to be echoing my initial reaction to the Mac Pro. As much as I like the iPhone, there's a viable alternative to it. As a web developer and creative professional, OS X is the beginning and end of why I use Apple products. There is no real competitor even on the same field, mixing a clean UI, and the power of *nix Apple's "courage" is taking its toll. Computer updates do not need fancy press releases but rather a constant component refresh of the latest and greatest, and ability to accommodate the power users rather than Jonathan Ive's whims. As someone who codes, blogs, designs, creates music, and does visual effects compositing (all of these at some level of professional capacity) OS X is vastly superior. iOS always feels like an apology when I try to do real work. It's great for some people, but for those who value raw power and/or raw efficiency, it's OS X or die.

    I doubt I'm the first to notice this, but when will Apple learn that a tiny high end/professional, virtually un-upgradable desktop is the computer no-one wants? The 20th Anniversary Mac, G4 Cube, and the Mac Pro 2013 all have been flops.

    Announcing Bandon Rain Cidery

    bandon rain logo

    My brother, sister-in-law, and dad started a cidery, Bandon Rain and I've been slowly building up its web presence. The website, while far from done, is finally ready to be viewed by the public. There's a lot more to be done (lazy loading, better high-density screen handling, more info, better design, press kit and inevitably a backend for others to manage the copy) but it's finally taken the mighty first step. They'll be at First Taste Oregon and I'll probably be there as well.

    Update: Bandon Rain is starting to make a splash (bad pun). It can be found on tap in many southern Oregon cities on the coast, as far north as Eugene and Portland.

    Running up MAME Arcade emulation MAME/MESS (Intel 64-bit Builds) on macOS (OS X)

    The last OS X native GUI is forever locked in 2013 at version .149.1 but fear not, you can run the current version of MAME ( version .180 as of writing this). However, there is a current MAME port for Intel OS X by @sdlmame_osx.

    Download and install SLD

    Go to download and download the DMG. Then install the SDL2.framework into (in your root) Library/Frameworks. SLDL2 is a library for cross-platform development designed to provide low-level access to hardware such as I/O and graphics cards (many Steam games are based on this library for OS X).

    Download MAME/MESS for Mac OS X - 64-bit Intel

    Go to and download MAME and decompress it into a folder of your choosing

    Create Roms folder

    Create a roms folder and place your roms within the newly created folder.

    create a roms folder

    You can stop here but you'll probably want to download the m64 launcher from (Direct link) to zip and place it in the directory. This will launch the app without the terminal and default to the installed games.

    It isn't pretty but it'll get you the latest MAME compatibility. Notably sites like emuparadise have the rom sets. You may want to consider setting up OpenEmu with Mame if you want native GUI. Enjoy!

subscribe via RSS