Months ago I wrote a review on CodeKit 2, comprehensive and deep review and had been meaning to review more unreviewed professional applications in the same manner. Even though my business card reads “UX Developer” and my job title officially is “UX Engineer” the truth is, I’m a front-end developer. I’m usually handed a PSD, a list of requirements and go to work. I do user interaction development, but it's been something that I’ve always had an itch for.

Recently a client sent a video of UX interactions over to me to code out, and I was impressed with the quality, it was captured from the iOS simulator. I inquired what software they used: Pixate Studio. Day to day prototyping/wire-frames aren’t something I normally do in my company, and it's rare when a client has the chops to send over high fidelity mockups, let alone interaction design.

Internally, we’re always evolving, as we continue to grow and flush out internal processes, the further we keep stepping into the realm of interaction design for a product to close the gap between developers and designers.

Pixate Studio was on my forever expanding “Things I need to check out” after reading about it on DaringFireball and the mild controversy around it’s Kickstarter.

After seeing the end results, I figured it was time to test it out.

Motion design as a function of design

Pixate Studio is a product for a very particular UX/interface design, specifically motion either trigger or based on user input. Motion design in the era of mobile apps has become an extension of the brand much akin to logos, icons, color schemes and fonts. Motions help define a brand and an experience. Google famously laid out its motion design manifesto, for Material Design.  Motion is now a way to define and differentiate. For years, the big players, Apple, Google, Microsoft. Facebook has used motion as a way to express their brand identities, it has slowly become part of the design lexicon.

Previously, motion design has been relegated to edge cases, either with motion graphics editors using suites like After Effects mocking up user interfaces or Facebook’s approach to leveraging Quartz and rolling it into its motion design suite which evolved into Origami. 

Each is time-consuming and do not lend themselves to quick turn arounds like campaigns or short projects. Motion design for some time has been relegated to higher tier projects, ones with budget and/or time to allocate resources to them.

Interaction Design for the Everyman

Pixate  Studio is the middle ground, the tool for the every-man designed to deliver high end interactions without coding, so designers can spend time designing and only using the most superficial coding, so complex interactions can be defined then later developed.

Like most applications, layouts are handled in layers, akin to most graphics and motion graphics suites.  Layers can be nested within layers within layers. The parent layer can be used to define the input behavior to chain to sublayers.

Interactions and animations are handled through drag and drop functions that are changed together to create effects (such as parallax, taps states, slides, hovers, etc…).

Pixate Studio’s friendly UI is enough to instill a false sense of security, or at least it did for me, after spending a half hour poking at icons and such, I discovered my time was much better spent watching the tutorials. Pixate gets special merit for creating a bunch of short, easy-to-follow, simple tutorials complete with video and step-by-step instructions.

Unlocking interaction

Pixate Studio’s magic is in its ability to trigger animations based on inputs, such as a double tap vs tap, or object’s position during a user scroll using simple if logical operators which chained to a variety of properties: scales, position rotation, opacity, color, image, and order.

It’s enough of a toolset to recreate parallax, sliders, faux trigger states, buttons, and even (if awkwardly) multi-screen prototypes.  

Pixate easily connects to an iOS / Android devices, and updates in real time, allow interactions to be tested and toyed with. iOS gets special treatment the simulator can be run directly from Pixate Studio. Running Pixate on Android requires downloading and installing the application, even with simulators like Genymotion.

Any changes to a project happen in real time, the device(s) connected to reflect the changes immediately after a quick screen refresh, making “feel” tweaks nearly instantaneous. It’s fast. It’s simple. It’s impressive.

Not quite perfection

Its easy to chain effects to create a multitude of behaviors, but where Pixate Studio starts to fall short is a concise way to manage multiple interactions on a screen.

Pixate starts to lose a bit of ground when it comes to defining more than the one screen, without a way to link between projects or screens, creating fully interactive mockups is cumbersome. It’s clear the ideal use of Pixate Studio is to define an interaction one at a time, for high fidelity mockups. 

Also, Pixate doesn’t include any advanced effects that one may associate with motion design like gravities/object attraction/repulsion, particle generators, edge collisions or keyframe animation.

Pixate is spendy, its $149 for a single license or $20 a month for its premium service that includes a quick share cloud service.

Lastly, without any exporting of motions, anything created within Pixate must be recreated in whatever environment you’re working on. There’s simply no magic bullet that’ll spit out Swift or Java or Javascript for your iOS/Android/Web apps.

Final thoughts

There’s plenty of tools and libraries released daily ultimately it comes down to does this fit our workflows and how useful is this/does it save us any time? Pixate isn’t for every project in an agency model like ours, but with some bigger projects in the pipeline for some majors like a sportyshoe company and a buildlyhomesupply company, this looks like something our firm will invest in to test out. After demoing it for the other developers, everyone on our team was significantly impressed.

That said, Pixate is powerful and fast, and is the best game in town for quick interaction mockups. With only a few hours spanning across a week, I recreated the same interaction the client sent to me as a test flight. It took me all of 30 minutes, much less time than it took to code in Javascript, and this included me bumbling around. A vet could easily do it half the time.

Pros

• Real interaciton simulation
• Painless wireless syncing to actual devices
• Works with simulators and is cross platform
• Cloud service lets you load demos without running app on a local computer
• Drag and drop assets works great
• Quick

Cons

• Limited set of interactions and effects
• Doesn’t detect aspect ratio of images
• Not designed for multiscreen or many interactions on a single screen
• Somewhat pricey
• Interactions are not represented in code (isn’t what a WYSIWYG application)
• No keyframe animation options (would be useful for CSS animation modeling)

Pixate Studio

Version Reviewed: 1.10.14

Price: $149

pixate.com

Fandango is a good idea, in theory. Buy movie tickets online, what’s not to like?

• Massive connivence charges, $2.70 for two tickets on-top of normal ticket prices, which often are higher than the theater window.
  
• House of cards website, loads roughly 350k of JS, mostly in tracking services and manages to throw up console log full of JS errors even when privacy services are disabled.
  
• Amateur mistakes like serving up http requests when on https, giving false security warnings and most of all,
  
• Zero support for the payment services people actually use: Amazon, Google Pay, etc. Instead you get PayPal, welcome to 2002
  

if there’s ever been a service that needs “disrupting” its Fandango…

Swapped Ruby Sass for LibSass to compile Sass using Grunt, reducing the speed to 1/18th the compile time for a small project and nearly 1/5th on our company’s website.

You can grab my Grunt starter boilerplate here. (edit no longer up)

I’ve been rolling for quite some time with Flash disabled in Chrome for performance reasons (battery life on my laptop) and security (flash cookies), however there’s a difference from surfing the web with Safari/FireFox without Flash and Chrome and it looks like this:

Sadly this isn’t limited to FaceBook, if you’re designing to the browser, you’re doing it wrong. In the day of age of feature detection and progressive enhancement design patterns, this shouldn’t be a problem.

Not one for anniversaries but realized today that I’ve been blogging for 2 years as of April 9th.  I started this as side-project to compliment my portfolio, and to establish a controlled public presence as I’m absent on most social networks.

While, I cannot give much credit to my blog, it has helped as I’m working for a much better company than when I started this, in a new city.

Things learned:

Quality not quantity counts: The posts that have the most traction have usually been ones I’ve spent more time on. It’s cliché, I’ve read it before but its true.

Tumblr Likes/Hearts/Reblogs mean almost nothing when it comes to stats.  See Tumblr likes vs Page Views, for a break down.

Web Development doesn’t bring the hits. My most popular articles are mostly Apple related.

Building up traffic takes a long time. I once ran a site that got 150,000 visitors a day, I haven’t achieved one what I’d get in a single day half of that in two years. 

Useful Posts tend to attract the most attention. My most popular post by far and away was a list of fixes I discovered when trying to make Far Cry 4 work. I’m not a big gamer, but figured it was worth post. Other big hits have been my recommended list of Mac Pro Upgrades, and my guide to using iFile to upload custom ringtones to iOS. Reviews tend to do alright too, my 9 months with CodeKit 2 has been ever-popular.

Tumblr is a great blogging tool that is used rarely by bloggers. Tumblr is mostly a place for younger people to re-share things they like in a pinterest fashion, but underneath is a friendly and fast interface that has a writer’s heart.

Things I’ve changed:

Less opinions. Quite frankly no one cares what you think, or specifically what I think about stuff. I have a lot of opinions but are they useful? Not really. I’m not John Gruber.

Stop setting goals for X amount of posts over X amount of time. Unless you’re being paid, don’t worry about frequency long as you’re posting more than once a month. 

Write for everyone. Web development is hard enough as it is. As a working professional, I still write for the common folk in mind. Even for the pros, its easier to digest when things are written to be understood by everyone even if it means spending more time explaining every step.

Intro

Grunt isn’t the easiest world to jump into if you’re new and writing a grunt file that does all the neat stuff is rather cumbersome. There isn’t one magic Gruntfile.js that’ll work for every project as often it’ll require individual tweaks to suite a particular workflow. That said, there’s all baseline list of usual features I need for every project:

• sass
• autoprefixer
• CSSmin
• browserSync
• jshint
• uglify
• source maps.

To put it into human-speak: I want grunt to compile my Sass to CSS, auto prefix it (write example: add -wekbit-border-radius and -moz-broder-radius when I write border-radius) minify it (remove the white space), and generate source maps for inspect element use, and I would like my JS to hold me to writing with conventions, and uglify my code (change the var names and remove white space to make the smallest js file possible).Lastly, I want grunt to refresh my CSS file (also known as CSS injection) when I make a change so I can see the changes without having to reload.

Grunt Starter Boilerplate

Even as someone who uses Grunt daily, writing fresh Gruntfile.jses is more time consuming that I’d like so I boiled down my base feature set above into an easily installable set without any front end frameworks like Bootstrap or Foundation.

I created a GitHub Project out of it for anyone who’d like to get started with Grunt.

grunt-starter-boilerplate

It includes full installation instructions for beginners too! It’s everyting you need to get started with Grunt.js.

The Verge posted “Chrome is still a threat to your MacBook’s battery” but failed to mention one of the main culprits of Chrome: Flash. 

Chrome has Flash baked into the browser distribution. Each Chrome update always contains its own version of Flash, and it saves the user from being forever pestered by Adobe flash updates and better yet, you can keep your other browsers flash free.

 Chrome’s flash is very easy to disable. Copy and paste into your browser bar:

chrome://plugins/

Click Disable. Crazy part? You probably won’t miss it in 2015, and it prevents nefarious Flash cookies.

Congrats, you are now Flash free. This won’t solve Chrome’s battery life issues but it helps. Disabling plugins help too as massive javascript libraries contained in some lesser plugins can cause excessive CPU usage.

 The Verge’s article insinuates that Apple has some sort of secret sauce (API?) to make Safari better at Battery life but truth is, Chrome’s fast development cycle puts features over optimization. That’s it.  

Now, I’d be happier if Chrome crashed less….

My buddy and I were debating the Apple Watch after the miserably titled Wired article: “iPhone Killer: The Secret History of the Apple Watch”. Assuming that the Apple Watch has the ability to become a standalone untethered unit it seems abundantly apparent:

The Apple Watch is to the iPhone as the iPad is to the MacBook. 

Assuming the Apple Watch gains the ability in a few years to have its own cell service, I have a feeling there’ll be a subset of users who eschew the smartphone altogether. 

Yes, there’s a lot of comprises: only voice to text, potentially no camera or a severely lower quality one, no access to the internet at large outside of apps, and so on but there are a subset of users who go tablet all the time, and never use a desktop. I don’t know how those people operate but they do it. The iPad is inferior from many standpoints to a desktop but its form factor and experience still manage to meet the needs of many people. 

Just as I am not a fan of tablets, I doubt I’ll be sold on the smartwatch but my opinion isn’t the only one that matters…

The small company I work for, posted an April 1st joke with several orders of magnitude more convincing than than companies with hundreds to tens of thousands more employees. April 1st seems to bring out worst in corporate jokes: Chrome reaction Selfies, Unleashed “Dog On A Stick” selfies, Honda’s Safety Selfie Cam, ThinkGeek’s Do It YourSelfie 360  Motorola Selfie Stick… 

Worst

Achieving worst April 1st joke takes more effort than the best, since most are orders of terrible.  With all the competition, this years goes to NTNews for APRIL FOOLS JOKE: Four-wheel-drives will be banned from all Territory roads from next year. 

Yes, the title is in all caps proceeding the article shows so much absolute disdain for the buttfuckery that constitutes April 1st, that one wonders why bother? Unlike other no-votes-of-confidence, this gets special merit for its absolutely zero-commitment. No matter what was written, the punchline was spoiled before the user makes beyond the first three words. APRIL 1ST HA HA! GET IT? 

Best

The best easily goes to A random tweet, by someone named Joe Heenan.

Prior to writing this, my experience with Yosemite has been mostly positive other than the egregious usage of Helvetica, which was easily remedied. 

However, on my work MacBook Pro Retina early 2013 (15 incher/i7) has been borked since my update recently to 10.10.2. My wifi speeds dropped abysmally, with transfers topping out at 21k a second, usually much lower. 

After trying a boat load of voodoo tricks, such as deleting plists and saw a reddit post recommending killing discoveryd (not the best idea), and I still may yet try reinstalling mDNSResponder. That said, here’s the fix.

The quick fix

However so far there is a fix, and anyone who remembers OS 7 through OS 9 will remember the magic of Zapping the PRAM and its miracle working to make bad SCSI chain start magically working.

1. Shutdown or reboot your Mac
2. Hold Option, Command (⌘), P, and R and power up the Mac (or hold while rebooting), this has to be done before the white screen appears.
3. Hold until you hear the boot chime for a second time.

Notably, the problem may creep back and you’ll have to do this again. I managed to last a week before I had to rezap the PRAM. This hopefully will get you by until Apple manages to fix its networking woes.

A little history…

So what is the PRAM? Back in the “classic days” of OS 7, OS 8 and OS 9, Mac OS stashed important OS settings in the first meg or so of memory, referred to as the Parameter RAM. In early Macs, these settings were stored by battery by battery so they were not lost when powered down.

Later Macs switched to NVRAM (non-volatile RAM), which is the same concept as PRAM, settings that are stored by battery (Screen resolution, network ports available, Speaker volume, startup disk selection, Recent kernel panic information, if any) outside of the computer’s disk storage.  The term PRAM carries over as legacy as well as the key commands. The term PRAM is still used interchangeably even if not technically correct.

/Edit: 5/30/14:

OS X 10.10.4 reverted back to mDNSresponder. Goodbye discoveryd, upgrading to 10.10.4 should solve any major networking issues with Bonjour and OS X.

I’m not sure if it’s OS X Yosemite 10.10.2 but I’m getting a little sick of this:

I noticed Chrome Canary seems to be a little less crash happy and it supports HTTP/2. Still Chrome as a whole has been much crashier FireFox and Safari as of late.

So if you’re being punished with “Aw, Snap!  
Something went wrong while displaying this webpage. To continue, reload or go to another page.”  Try out Chrome Canary, I’m seeing a drastic reduction, which leads me to believe Google has a fix in the pipeline.

It’s a bit of a misnomer even to differentiate mobile web development from web development in 2015. It’s old news, everyone has a smartphone, and people increasingly use it as their primary way of using the web. Since the bulk of development is done on desktops and will be so for the foreseeable future, as developers, we’re left to pick up the task of testing our websites many configurations. Fortunately, with simulators/emulators, these can be tested with very close precision for the major platforms without investing in the hardware. Once properly configured, these virtual devices are always just a few clicks away.

Both Android and iOS can be simulated on OS X relatively hassle-free. Windows Phone on has more stringent requirements that make it more difficult and cannot be run on older hardware, even when Windows is the native operating system.

I’ve assembled several blog posts I’ve written into a singular guide that’ll get anyone up and running for simulators the three major platforms.

iOS 

Tools Needed: OS X, Xcode (Virtual Machine Software for Windows, Linux)

How To Get Started:  Using the iOS Simulator in Xcode 6 for web development

Android:

Tools Needed: GenyMotion

How To Get Started: A better Android Simulator for Web Development: GenyMotion

Note: You can use GenyMotion with Google Play to download other popular browsers

Windows Phone:

Tools Needed: Windows 8.1, Visual Studio Express, (Virtual Machine Software for OS X, Linux)

How To Get Started: Setting up Windows Mobile 8.1 for Front End Development