Using iFile + Zeppelin to create custom carrier icons

    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.

    image

    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.

    image

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

    image

    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 5: Close iFile’s webserver and go to your iPhone’s Settings -> Zeppelin

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

    That’s it


    Apple Music replaces iTunes Match with DRMed files

    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.


    iFile working in iOS 8.4 along with other popular iOS 8.3 jailbreaks

    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.


    image

    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.


    mDNSresponder, my old friend

    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.


    Quick Guide to using FireFox Developer Edition to Remote Debugging/Inspect Element on iOS

    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.

    image
    image

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

    image

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

    image

    4) From Open App select the open tab

    image

    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.

    image

    Audible’s 2.5.0, 2.5.1 iOS debacle (and how to fix it)

    Here’s a horror story for QA:

    image

    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.

    image


    Tap Settings


    image


    Tap the sign out button in the upper right hand corner


    image


    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.


    One week with Pixate Studio A review

    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.

    image

    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

    image

    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.

    image

    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…).

    image

    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

    image

    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.

    image

    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.

    image

    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 still sucks

    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…


    Libsass vs Sass Benchmark

    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)


    Dear Web Developers Stop Assuming Chrome Has Flash

    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:

    image

    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.


    boilerplate for grunt

    Grunt has been on my mind as I’ve decided to update my work flow.

    This easily the best list of performance optimizations I’ve seen for Grunt/Gulp, some of which are tasks I live by, and some are new to me. It’s a “best of…” for grunt tasks to make your front end web deving more efficient. 


    An unordered list of things I’ve learned from two years of blogging…

    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. 

    image

    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.


    My (unofficial) Boilerplate Grunt.js


    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:

    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.


    Improving Chrome’s Battery Performance

    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….


    The Apple Watch Analogy

    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…