Wired posted a pretty interesting (and negligent) video and article where a hacked Jeep was handed over to a reporter to drive. During the drive the hackers asserted control over the vehicle, blasting music, triggering the wipers/cleaner and even cutting the accelerator all while on driving on an Interstate highway. 

I’ve been a bit of a skeptic of the IoT (Internet of Things) for sometime but when insulin pumps and medical devices pose security threats from remote hacking, we’re already in the era of the IoT without really understanding it. It only takes a trip to Shodan to see the how easily networks are mapped.  Simple every day objects are hacked like elevators, but in the era of IPV6 IoT, everything gets its own IP: Smart refrigerators, Smart TVs are already here and already being exposed for security threats and that’s not even counting external threats.

The IoT looks to redefine ownership. Want proof?  Look no further than John Deere vs the farmers that buy their products.

I’m not a neo-luddite or even anti-technology,  as we constantly improve quality of life but I’m starting to doubt all the benefits in a world where everything has firmware and  you’re always being watched.  

 I was handed a batch of videos from a client’s video shoot recently from a client’s video shoot. MXF  (Material exchange format) is a container format much like MOV, AVI and MKV but there’s little info about it. Quicktime derps on it.

Playback:

VLC  and MplayerX plays MXF without hitches.

Converting:

Apple’s Compressor ($49.99) works great as well as ffMPEG  based apps like iffMPEG ($19).

Recently one of my friends asked me what I used for my mobile testing, and I was struck by how few devices I use. Perhaps its a bit of nostalgia but in 2015, the idea of mobile device labs have dried up.  

I remember more than a few products like the Device Lab Stand by Vanamco and various companies proudly posting their setups or posting how to create your own. I’d be surprised today to see any sort of setup resembling these in a web dev firm. I imagine iOS devs keep a small roster of a few generations.

Back in 2012, I’d been very excited to have a setup like one of the messes above, but the wild west days are gone. A few reasons jump to mind: 

• Mobile is a two party system between iOS and Android (Sorry MS, RIP Palm).
  
• Mobile browsers have matured. 
• We no longer think in “devices” but screen sizes. Responsive web design solves most screen size issues.
  
•  Fragmentation is increasingly less of an issues. iOS adoption rates are impressive. Android grew up and thanks to Chrome swapped to the default browser for most handsets, Android fragmentation is less of a problem for web developers.
  
•  Its all about webkit (Sorry Mozilla).
  
• Simulators are fairly accurate for 95% of the time for web development. 
  
• The rise of VNC fueled services like BrowserStack enable users to test on edge cases without the need for expensive labs.
  
• Device longevity for phones is still relatively low (when’s the last time you’ve seen an iPhone 4 or Galaxy S1 in the wild or even a iPhone 4S?)
  
• Most devs make effective use of libraries like Modernizr and HeadJS.
  
• Visual Regression testing keeps a finalized design in check.

The Variables

Quick introduction, Bootstrap Sass is pretty easy to use, and highly recommended as unneeded UI can be commented out in the _boostrap.scss

I’ve compiled a list for quick reference of common vars and media queries. These are located in bootstrap/_variables.scss, these can be changed at roughly line 287. Each root variable $screen-XX defines both the min and max variables, the root vars are depreciated adn media queries should be written with the -min and -max.

$screen-xs = 480px

$screen-sm = 768px

$screen-md = 992px

$screen-lg = 1200px

Depreciated

Note: These can be used instead of screen-xx-min but shouldn’t be.

$screen-phone = 480px

$screen-tablet = 768px

$screen-desktop = 992px

$screen-lg-desktop = 1200px

Minimum Media Queries

@media (min-width: $screen-xs-min) { } //480px & greater

@media (min-width: $screen-sm-min) { } //768px & greater

@media (min-width: $screen-md-min) { } //992px & greater

@media (min-width: $screen-lg-min) { } //1200px & greater

Minimum - Maximum Media Queries

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-min) { } //480px - 767px

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-min){ } //768px - 991px

@media (min-width: $screen-md-min) and (max-width: $screen-md-min) { } //992px & 1199px

Maxium Media Queries

Note: It’s highly recommended to use min-width media queries when possible.

@media (max-width: $screen-xs-max) { } //479px & lower

@media (max-width: $screen-sm-max) { } //767px & lower

@media (max-width: $screen-md-max) { } //991px & lower

@media (max-width: $screen-lg-max) { } //1199px & lower

I wish I made a yearly habit of this, documenting my front end work flow: both hardware and software wise over the years.

Historically its largely been determined by place of my employment. When I worked for a university bookstore, my workflow was pretty basic. I was given sort of AMD WinXP config with Dreamweaver / Photoshop in 2010 followed by some sort of awful energy drink.. My job after that was an 21 inch iMac in 2012 with Coda / Photoshop / VMware / iOS simulator, and with some sort of tea or energy drink.

Over time my workflow has expanded, smaller computer but bigger displays and more devices, and more software and straight coffee has replaced all inferior beverages.

Hardware: ( Pictured Left to right):

27 inch 4k Dell monitor, Nexus 5, iPhone 5, iPad 2, 2013 Retina MacBook Pro 15, 20 inch Viewsonic 1080p, Elgato Thunderbolt 2 Dock, USB 3.0 hub, USB 3.0 HDD, Apple keyboard, Logitech G500.

Software:

OS: OS X 10.10.4

IDE: Sublime Text 3 (occasionally coda)

Graphics: Photoshop / Illustrator / Sketch + ImageAlpha & ImageOptim

Precompiler: Grunt.js  with LibSASS  + autoprefixer + cssmin + BrowserSync + JSHint + uglifier

Version Control: Tower (Git) usually on BitBucket

Ticketing System: JIRA

Virtual Machines / Simulators: iOS Simulator (Xcode 5 & 6), Genymotion (Android), VMware/Parallels/Virtual Box + Modern.ie configs + previous OS X releases

Other tools / utilities: 1password, ColorSnapper, SnapRuler, Ghostery, Adium, Keynote, Pages, Transmit, Fontprep, Iconslate, Time Machine, Apple Motion, Codepen.io

Retired but legacy; CodeKit, Prepros 

Notably this doesn’t include a few devices around the office I use: A Microsoft Surface RT, an iPad 3, a Nexus 7 tablet, and a Kindle Fire.

My first DSL modem in 1999 required Telnetting in via serial port to USB. I had to call a network technician at Qwest, and followed by typing in what seemed like arcane commands.  I had no idea what I was doing.  Things have changed for the better, but most DSL modems still have the ability to log into them directly through command line interfaces. The C1000Z runs BusyBox Linux which comes loaded with your usual base Linux utilities, so if you can wield Bash, you can hack your modem.

Grabbing your PPP username

I was looking to enabled the Transparent Bridge mode for my new Netgear R6050 after a friend managed to break the internal antenna on my Zyxel C1000Z, I wasn’t home so I don’t know the physics involved. Rather than pay $99 to CenturyLink for a new modem/router I decided to buy a new WAP/Router. 

Having a little network administration under my belt, I figured I could grab the PPP Password.

The following guide was indispensable and got me 95% of the way there so I suggest checking it out first and/or following it along with my more “For Dummies” guide: 

How to Find Your CenturyLink PPP Password on a Zyxel C1000Z Modem 

You’ll want a basic understanding of SSH and/or Telnet. OS X regardless of version come with SSH and Telnet as does (almost) every flavor of Linux. Windows users will need Putty. 

Step 1:

First you’ll need to enable telnet in your Router, and you’ll need PPPoe enabled (Under WAN settings), these can easily be done through the Modem’s GUI

 Step 2: 

Fire up your terminal (Windows users will have to use Putty, and translate the instruction) and type:

telnet YOUR-IP-ADRRESS

In this example, my router’s IP address is 192.168.0.1, this is the default address so I would type:

telnet 192.168.0.1

It make take a moment for the router to respond, once it does, respond something like “BCM963268 Broadband Router” and  it should ask for your username, type in the username you entered hit return and it should then ask for your password, enter the password you typed in, hit return.

Step 3:

Using the terminal we can call all the active tasks running on the modem, to do so type:

ps

Geek stuff: Users can use sh to access the BusyBox linux Bash shell and run task monitoring software like top. If you’re feeling adventurous, type sh and poke around using commands like ls and top. You can grab the process ID using top just like we do in step 4.

Step 4:

You should see a long list of responses, that read:

The myusername@qwest.net is your username.

Step 5:

Next you’ll need to analyze the process ID further, take special note of the preceding number, in this example its 3494. Type in the console:

cat proc/3494/cmdline  

It should return something like 

pppd-cppp0.1-iptm0.1-umyusername@qwest.net-pjlFrVNtRMtU=-f0-D0-n1-L0-X120 >

The password portion of this is encoded, the tricky part here is identifying it. We know the that this is a concatenated line by gauging from the previous line. The password portion should be between -p  and -.  In this example, the encoded password is:

jlFrVNtRMtU=

Step 6:

This password is encoded in base64, thanks to the leg work Make a new tab or new terminal window, and type:

echo "jlFrVNtRMtU=" | base64 --decode

It should spit back something like:

ac7gkDnUmac-pro:~ user$

the ac7gkDnU  will be your PPP password. Congrats! You’re now ready to enable transparent bridge mode on your router.

Zeppelin is a custom carrier icon jailbreak application, and when combined with iFile, it only takes a few minutes to create your own carrier icons.

All of Zeppelin’s icons are located /Library/Zeppelin (using iFile). Also notable is the README.html located in the same directly which contains all the specs for custom Zeppelin icons, which are all listed here.

Most guides recommend a plethora of icon names and sizes but most pertain to old iOS versions. As of iOS 7, only three styles matter.

Step 1: Creating the icons

For iOS 7 and iOS 8 (tested on iOS 8.4), you’ll need to create three separate icon styles at three sizes for a total of nine icons. Here’s a quick run-down of the three styles:

• logo - black silhouetted logo (free of whitespace). This is used by Zeppelin to color accordingly.
  
• dark  - this is used when the statusbar icons are dark. It can use any combination of colors.
  
• light - this is used when the statusbar icons are dark. It can use any combination of colors.

Each icon needs three separate sizes for varying densities, standard, 2x and 3x sizes. The height is the most important if the size height is incorrect, you may see icon flashing on screen transitions. The sizes are as follows: 40px by 16px , 80px by 32px @2x, and 120px by 48px @3x.  

So for a working set of Zeppelin icons you’ll need to create a total of nine icons:

• logo.png - black silhouetted logo. 40px  (max width) x 16px.
  
• logo@2x.png - 80px  (max width) x 32px.
  
• logo@3x.png - 120px (max width) x 48px
  
• dark.png - show on dark toolbar,  40px  (max width) x 16px.
  
• dark@2x.png  - 80px  (max width) x 32px.
  
• dark@3x.png  - 120px (max width) x 48px
  
• light.png  - show on light toolbar,  40px  (max width) x 16px.
  
• light@2x.png  - 80px  (max width) x 32px.
  
• light@3x.png - 120px (max width) x 48px

For this example, I created an based off of University of Oregon’s O logo, you can download my icon set here (click download zip on the lower right hand corner).

Step 2: Launch iFile and go to Library/Zeppelin.

Step 3: Create a new folder for your new icon.

Click Edit in upper right hand corner and click the + symbol. 

Name your icon whatever you’d like, all the default iFile attributes and ownerships should be correct.

Step 4: Start up iFile and click the web server (the globe icon).

Plug the IP address that ifile reports  into your web browser on your desktop computer (In this example its 192.168.0:103:10000), and navigate to Library/Zeppelin/[YOUR FOLDER] and upload your set of 9 PNGs.

Step 6: Select your custom icon under your theme menu!

That’s it

This means that if you’ve matched your library with Apple Music and iCloud Music Library, you need to keep backups of your original files. If not, you’ll end up with files that you can’t play without an Apple Music subscription.

So think carefully if you plan to use iCloud Music Library. 

- The Real Difference Between iTunes Match and iCloud Music Library: DRM, mcelhearn.com

Ouch. 

Match doesn’t exist separately. Instead, Apple Music gobbles up your iTunes Match library. I’m sure there are some users who don’t care, but your music library is held hostage for eternity even if you bought it elsewhere (if you delete or lose your DRM free originals).

With reports of playlists being munched and the service crashing, Apple Music has been anything but smooth.

/edit: Update: iTunes 12.2.1 appears to fix the DRM issue.

Tested a few of my favorite tweaks and can confirm the following jailbreak tweaks/apps work with iOS 8.4 despite not being labeled as such. I personally tested the following:

• iFile
• SBRotator
• Better 5 Icon Dock
• Adblocker 2

Update:iDownloadblog has come through not long after writing this with a full spreadsheet

The author of Activator dropped a beta for iOS 8.4, so dependent apps can be installed.

It took a full restore before I was able to jailbreak with Taig, but after that, it went smoothly. I’d hold off on installing any music related tweaks, but most iOS 8.3 jailbreaks seem to be working.

Apple kicked out discoveryd to the curb, after the hell, it put OS X users through. I look forward to not having my connect drop to 10k a second and requiring me to reset my PRAM.

I’ve been running FireFox Developer Edition for two days now, and easily one of the most exciting features is having access to FireFox’s Dev tools on iOS. Safari Development tools work, but FireFox’s dev tools are a bit easier to use once properly fired up.

The instructions are pretty good on FireFox’s website but here’s a quicker, easier guide to getting going with Remote debugging in FireFox.

1) Enable development mode on your iOS device (or simulator).

Go to Settings -> Safari -> Advanced and check Web Inspector. Physical devices need to be plugged in via USB.

2) In FireFox Developer Edition go to Tools -> Web Developer WebIDE

3) From the WebIDE window select Safari, FireFox and other WebViews on iOS on the right-hand side from Select Runtime.

4) From Open App select the open tab

Troubleshooting!

FireFox Developer Edition is exceptionally finicky about multiple iOS devices, so if you’re experiencing problems, connect only one device (a simulator or physical hardware).  

WebIDE also doesn’t like when devices to go to sleep, letting a device go to sleep probably will require disconnecting and reconnecting, be sure Safari is open and the active application.

When in doubt, Disconnect from the WebIDE and select again from the WebIDE. Your device should show up on the Open App menu.

Here’s a horror story for QA:

On May 18th, 2015 Audible unveiled a new version touting CarPlay, better lock screen support, book discovery, however, it didn’t go as planned and an App that average a 4.5-star averages overnight dropped to a single star and half. 

In a scramble to fix, Audible released 2.5.1update requiring users to log into the app, sign out, delete it and reinstall it, sign back into their account, and redownload their books. 

Still ,even after the 2.5.1 update, t seems a large number of users are still experiencing problems (I imagine a fair amount are unaccustomed to the contrivances of following the aforementioned steps).

Audible provided a handy guide, but it doesn’t cover all the steps. I had to walk my own mother through the steps so here’s the problems she encountered.

"I tap Audible and all I see is a black screen" :(

If you’re receiving a black screen, first try quitting Audible. Go to your home screen, double tap the home button to bring up your recent apps and swipe up on the Audible pane. 

How do I sign out?

Relaunch Audible, ignore any errors about updating. Click ok or cancel. From the home screen tap More.

Tap Settings

Tap the sign out button in the upper right hand corner

I’m a fan of Audible, and can’t recommend it enough as I have roughly 225 titles in my library as of writing this. However, I was pleasantly annoyed when I updated today to find this problem plagued 2.5.1.

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)