• #front end development
    • #accessibility

    A fix for UI elements that do not respond to return or enter key presses

    While I usually don't write much about client specific work about my job, I recently was hit with a minor problem: Slide shows are terrible for accessibility. After scratching my head for a few minutes I was hit with a dead simple solution, simulate mouse clicks with JS. Check out the codepen below.

    See the Pen Tabindex return fix

    • #front end development

    Resolving Grunt Error - libsass bindings not found in...

      Running "watch" task
      Waiting...
      >> File "../scss/theme/_color-mixins.scss" changed. <br>
      Loading "sass.js" tasks...ERROR
      >> Error: `libsass` bindings not found in /Users/~path/_build/node_modules/grunt-sass/node_modules/node-sass/vendor/darwin-x64-47/binding.node.
       Try reinstalling `node-sass`?
      Warning: Task "sass" not found. Use --force to continue.
      
    • Step 1: run npm update from the grunt directory with your package.json. This should fetch the latest dependencies that are specified in your package.json file.
    • Step 2: Likely if you try to run grunt, you'll experience a binding error that reads as follows:
      Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 4.x. Usually this error is followed by the suggestion to of using rebuild node sass.
      Run npm rebuild node-sass
    • Step 3: If you're still receiving sass build issues: try updating grunt
      npm install -g grunt-cli and re-running the above. Also you may need to update Node itself and check your package.json versioning.
    • #front end development

    Sitefinity updated logo for 2016

    Sitefinity is a mess

    Trying to track down what's causing JQuery Validate to glitch out and cause a "Uncaught TypeError: Cannot read property 'addMethod' of undefined" error in SiteFinity on a client's website. When signed into the CMS there's one hundred and five instances of javascript tags. Coincidentally, I also redesigned the Sitefinity logo.

    Sitefinity Updated Logo for 2016

    Now for an official press release:

    For Immediate Release: 05/09/16
    Telerik Sitefinity
    http://www.telerik.com/

    Sitefinity Logo updated for 2016 under direction of disgruntled front end developer with no connection to Telerik

    Portland, Oregon: Today unbeknownst to Telerik corp or anyone affiliated with Telerik or Sitfinity, Greg, an front end web developer with a surely disposition and contempt for french roast coffee released an updated logo for Sitefinity.

    The logo shows a daring new approach in design, with virtually no treatment on the logo but instead an abstraction of the word "javascript" repeated 105 times in various states of legibility, using Operator Mono in book weight from esteemed and respected font foundry, Hoefler&Co. The design is a literal abstraction of the way Telerik has almost no regard for the way javascript is treated, and appears to randomly "shit out" javascript tags according to Greg. The alternate design was arrived after initial sketches that included a large singular pixelated middle finger, and a dead musk rat.

    "This is the stuff that haunts my dreams. Who deemed this an acceptable or maintainable design pattern? Is there ever going to be a CMS that isn't some shade of terrible?" Greg ranted on his company's slack channel which elicited zero responses.

    The new logo should be used in any instance of the old logo and is free for use for all.

    About: This press release is 100% serious and real.

    • #audio

    Maschine hangs or crashes on Loading GUI fix

    It's one thing to post a fix, and its another to explain how I arrived at the fix. As a web developer (and very very long time Mac user), my life is debugging so I have a few more tools to pull from. Hopefully advanced users will be able to follow my logic to arrive at this fix. You can skip past the following to get to the fix but this explanation may help you to troubleshoot not just Mashcine but other apps. I'm not a magician and I do not pretend to be one, and you too with some practice and time can start learning to troubleshoot computer programs.

    maschine loading

    So recently Maschine stopped working randomly. Having a fair amount of technical prowess I wasn't too worried. I went to my Activity Monitor. For those not familiar, OS X comes with an application bundled in every install called "Activity Monitor", in your applications/utilities folder. Activity Monitor is a GUI (Graphical User Interface) to several UNIX applications that can be accessed in the OS X's terminal. These applications allow you monitor memory / CPU / network usage. As a debugging tool, it's a must as you can see if an activity is slowing your computer down by overly utilizing CPU cycles, ram or bandwidth and force quit tasks that can't be accessed by the normal force quick menu.

    I fired up activity monitor and located Maschine in the list and double clicked it to get more info about the precess and to see which files it recently accessed. Even to me, most of what appear in the log files are a garbled mess of esoteric computer speak but I also know that there's important info in these logs. Fortunately files accessed logs are straight forward. In the log, the last files accessed were plist files pertaining to it's freeze state.

    maschine open files

    As an OS X veteran, I knew offhand a few things: plist files are preference files that sometimes get corrupted, and usually can be deleted without any repercussions as the application in question will simply regenerate these (worst is some settings may be lost) and more importantly that the .saved has to do with OS X's ability to relaunch applications to their last known state. As a rule, Freeze states are pretty much always ok to delete, infact occasionally you need to dump a bad freeze state. This is common practice in iOS when users double tap the home button and swipe up to close a frozen app as iOS doesn't by default "quit" apps, but simply places them into freeze states. Deleting a freeze staet simply forces the application in question to fully relaunch.

    I started by dumping the Saved Application state, always an import first step in modern OS X debugging but it didn't work. After talking to my buddy Justin, he mentioned that the time Maschine stopped working when he changed plugins. So I had a hunch and decided to take a memory sample in the activity monitor. Memory samples allow you to peek inside to what your application is doing and what information is being accessed at that moment in time. Remember how I said even I don't understand much of what's in a log file? This is one of those times. We know that the application is hanging so something is causing it to hang, and we can bet that the problem can be "seen" as the program will likely try to repeatedly access something or we may see the last item the application tried to read before stalling out.
    (the screen caps are clickable for legibility)

    maschine open files

    Note that during the hang, the memory sample is calling PSP echo, which is a popular audio plugin. Maschine like many audio applications runs an initial plugin scan to make sure all the plugins installed are compatible and if they aren't they're blacklisted so they will not crash the host application. This scan usually is run only if the application detects a change such as a new plugin install. This sometimes fails, and causes an application to crash. Apple's Logic, has the ability to detect failed launches and thus rescans it's pliugins on a failed launch (a somewhat recent innovation with Logic 8 or 9). Maschine being a little more limited, doesn't have this ability so its up to the user to manually reset the approved plugin cache. While I couldn't find the Maschine 2 location for plugins list, I found the following article MASCHINE Crashes at Startup (OS X) which pointed me in the right direction.

    How to fix

    Step 1: Go to the following location on your computer:

    Users/[your user name]/Library/Application Support/Maschine 2/

    Note: You may need to enable your user library folder visibility if you have not done so already.

    Step 2: Drag all the files into your trash.

    Step 3: Relaunch application.

    maschine could not load plugin

    With any luck you should see something like the message above. Happy Beat Making and troubleshooting! Remember, the activity monitor is one of the most important tools in a power user's bag of tricks. OS X is big and complex but almost nothing is done behind closed doors, this means there's almost always a way to get to the root of a problem.

    • #front end development

    Setting up Operator Mono in Coda

    I'm a big Operator Mono fan. A few months ago I wrote how to Set up Operator Mono for Atom. It involves a bit of style sheet hacking. Coda is pretty straight forward but I realized after roughly 8 years of owning Coda, I've never messed with the font formatting.

    Step 1: Set the font in preference under Editor

    Coda preferences

    Click the Editor Font and locate Operator, select the weight you're most comfortable with.

    Step 2: Setting up the italics character set

    One of the best features of Operator Mono is that all its italics are an alternate character set, useful for programming. Coda doesn't pack in a style sheet akin to Atom or Sublime, which is a mixed blessing. It's pretty easy to set up but requires a little more handy work.

    • Click Colors in Preferences
    • Within the colors panel scroll area click on the various code examples and click the bold/italics to check boxes to change your code styles

    Coda  color preferences

    To mimic Atom's settings and the examples on the Operator Mono webiste, I recommend italicizing the following: all comments, tags, variables, attribute names, and leave CSS unitalicized. That's it!

    • #front end development

    PostCSS is really slow - PostCSS vs minification and autoprefixer

    A few months ago one of the back end developers ribbed me, "Front End Developers can't decide if they want to pre-process or post-process their CSS" after PostCSS and CSSnext.

    The worst part, is he's right but we've been doing both for some time unbeknownst to him. Unlike the hazier CSSNext ambition of bring future CSS code today (based on PostCSS), PostCSS itself simply a library of tools for programmatically manipulating CSS with Javascript which is a zealous under-sale of the potential. Like any good front end developer, I wanted to see if PostCSS actually made sense to use since I don't have the interest (yet) to use CSSnext.

    While admittedly this isn't the most scientific test, I ran this using the current versions of gulp and grunt with their respective plugins using a rather large project build on a heavily modified version of Bootstrap 3. The end result is roughly 9700 lines without minification, and a 160k CSS file minified. It's big but it isn't massive either.

    Grunt Results

    Without PostCSS

    • Total 586ms

    With PostCSS

    • Total 5.3s

    Gulp Results

    Without PostCSS

    • Total 388ms

    With PostCSS

    • Total 4.75s

    The configuration looks as follows:
    Libsass -> autoprefixer -> minification.

    In the grunt task, I have a watch task that triggers libass to grunt-autoprefixer to grunt-contrib-cssmin. I replaced the prefixing/cssmin with grunt-postcss.

    For Gulp the task was nearly identical, libass to gulp-autoprefixer to gulp-autoprefixer. I replaced the prefixing/cssmin with grunt-postcss. The end result is pretty much the same.

    What does this mean?

    The takeaway is that previously modules that PostCSS replicates are considerably slower but (and I'll use bold to stress this) this does not mean you should not use PostCSS. PostCSS still has some seriously potential if you're into eschewing the pre-processor for CSSNext or looking to use CSS Modules. However, unless you need PostCSS, you shouldn't feel obligated to replace current working tasks with the CSSnext version.

    • #off topic

    Kite - an Indie game

    Long time friend, James Treneman is a one man studio making his own game and its in the process of being Green lit on Steam. Check it out.

    • #front end development
    • #browsers

    Exploring and Developing for the PS4 browser

    The Playstation 4 is quite the capable device, unsurprisingly able to run linux. I recently bought a PS4 and in true developer spirit immediately began poking around the browser. To my knowledge, there's next to zero developer documentation. The best I could find was a single PDF from Sony which appears to be dated. My goal is to document what's known about the PS4's Browser.

    My PS4 test setup

    Version: CUH-1200

    OS: 3.50

    Gecko? Mozilla? Netfront?

    whatbrowser.org ps4 screenshot

    Google's whatbrowser gives an error.

    whatbrowseramiusing.co ps4 screenshot

    whatbrowseramiusing.co reads the Gecko-Like User-Agent string.

    whatismybrowser.com ps4 screenshot

    whatismybrowser.com likely matches UA string by closest match, and returns Mozilla.

    whatsmybrowserorg.org ps4 screenshot

    whatsmybrowser.org correctly identifies the PS4 as NetFront.

    Netfront is a proprietary web browser used for the Playstation 3, Playstation Vita,PSP, Nintendo 3DS, Wii U and Kindle E-reader. The original Netfront Browser has since been replaced by a webkit powered NetFront NX which appears to power the PS4.

    Support

    Specs:

    • HTML 4.01, XHTML 1.1, XHTML Basic 1.1, CE-HTML, XML 1.1, RSS feed (RSS 0.9/0.91/0.92/1.0/2.0, Atom 1.0)
    • HTML 5 Support: Canvas, Canvas Text, localStorage, sessionStorage, Web Workers, applicationCache, HTML5 Input types (partial) - Notable missing: Geolocation API, HTML5 Input input attributes, picture element, srcset, service workers, web components
    • CSS3 (Flexbox, full CSS3 selector support Media Queries, Animations, 2D/3D Transforms, Transitions, etc.) - Notable missing: Multiple background support
    • CSS1, CSS2.1
    • Javascript V 1.7+
    • DOM LEVEL 2

    PS4 passes all the CSS3.info's select test

    The PS4 scores relatively well on the CSS3 test (Chrome v 49.0.2623.112 scores 52%, Safari 9.1 54% and FireFox 45 63%)

    Security:

    • TLS1.2 *no compression
    • NSS
    • Configurable digital certificates
    • Extended Validation
    • Elliptic Curve Cryptography
    • No SSL support (2/3)

    Viewport: unsupported

    WebGL: unsupported

    PS4's webGL error

    • Image Formats: JPG / GIF / PNG / BMP (32 bit + compress supported)
    • Note: TIFF image format is unsupported (commonly supported in webkit).
    • Video:

      • Container: Mp4/HLS
      • Codec H.264
      • Profile: Baseline/Main/High
      • Level: 4.1 or lower
      • Resolution: 1920 x 1080 or lower
      • Framerate: 60 fps or lower
      • Bitrate: 20 Mbps or lower
      • Autoplay: supported
    • Audio:

      • Formats: AAC (LC or HE-AAC v1)
      • Channels: 1 channel, 2 channels, 6 channels (AAC-LC only), or 7.1 channels (AAC-LC only)
      • Sampling rate: 8000, 11025, 12000, 16000, 22050, 24000, 32000, 44100, or 48000 Hz
      • Bitrate: 48 to 3456kbps
      • MP3/WAV/AIFF/AU/MIDI unsupported
      • Audio playback using the audio element is not supported.
      • Direct links to audio is not supportered
    • PDF: unsupported
    • Downloads: unsupported

    Browsers Tests

    Successful:

    Acid3 test

    Sunspider 1.0.2 test: Overall score: 3203 ms using remote login (and a game left open)

    unsuccessful:

    PS4's fails to load html5test.com...

    Notably some previous users have completed the HTML5 tests, you can see the scores: here.

    PS4's fails during Octane test...

    Not pictured: Jetstream

    The PS4's weakest link appears to be modern JS support. Unsurprisingly the PS4 isn't a strong performer. In a very uncontrolled environment with 3 concurrent browsers open, and roughly 25 tabs, and several apps, my MacBook Pro in chrome scored a 157.8ms vs the PS4's 2929ms (Lower is better). An iPhone 6 scores roughly 326.6 ms. The big differences here are that both Chrome, Safari and FireFox use highly optimized JS engines, V8, NitroJS and SpiderMonkey respectively. However, other users report much better SunSpider benchmarks clocking around 1027ms which places roughly at the performance of an iPhone 5 when it comes to JS. While the PS4 certainly has room for improvement but is unlikely to see massive gains as I highly doubt most people spend much time in the browser outside of gaming.

    More to come...

    Stay tuned, I plan to update this over time. Testing the PS4 is tedious as the remote support doesn't allow text input via keyboard.

    Planned tests: weinre remote debugging, FireBug Lite, BrowserSync

    Anyone with better documentation or more information please feel free to e-mail at: blog@greggant.com. Thanks!

    • #digital politics

    The Encryption debate wages on

    The Obama administration took a seat in the encryption debate, even in light of What's app rolling out end-to-end encryption for its billion users. Worse yet, the leaked senate bill is soft on security, high on fear. At least there's a few out there fighting the good fight.

    It's almost if there's real world analogies to draw from.

    • #os x
    • #apple

    But He's Not Wrong

    Palmer continues to clarify what he meant by that blunt statement by saying “It just boils down to the fact that Apple doesn’t prioritize high-end GPUs. You can buy a $6,000 Mac Pro with the top of the line AMD FirePro D700, and it still doesn’t match our recommended specs. So if they prioritize higher-end GPUs like they used to for a while back in the day, we’d love to support Mac. But right now, there’s just not a single machine out there that supports it.”
    - ShackNews.com

    The only Macs capable of handling the Oculus Rift built by Apple are 3 years out of production Mac Pros... or Hackintoshes. Those of us with either still have dual booting, so there's always that. I've come to the conclusion the 2013 Mac Pro's trashcan looks are a metaphor for what Apple thinks of professionals.

    • #os x
    • #apple
    • #ios
    • #tutorial
    • #how to

    Messages not delivered error fix

    The message "Not Delivered" has eluded me longer that it should have after retiring my MacBook Pro 2012 Retina for a 2015 Retina. I was able to message anyone using an iOS device through messages but unable to send SMS to non-iOS phones. Here's the fix, it requires both your iPhone and your Mac to be handy.

    Step 1:
    Confirm your messages has been configured on your Mac in messages preferences



    Step 2:
    Go to Settings -> Messages and then finally to Text Message Forwarding



    Step 3:
    Add your computer:



    Step 4:
    A confirmation code will be sent to your Mac in Messsages, it may take a few seconds. Be ready to punch in the pin on your iphone.

    That's it

    • #security
    • #apple
    • #digital rights

    The Cost of the San Bernardino iPhone

    There’s a small point to be made here, insofar as it suggests the FBI is being disingenuous. They’re saying that it’s not about precedent, it’s just about this one phone, this one investigation. But the real reason they’re making a big deal out of it is that it’s politically useful. The phone itself likely isn’t important but the situation surrounding the phone — “terrorism” and the tragedy of 14 innocent people being killed — lends sympathy to their desire for access to encrypted devices all the time.
    - John Gruber, daringfireball.com

    The iPhone debate reminds me of a hot button issue like abortion or climate debate where the two sides are speaking different languages. Strangely the one semantic argument that the other side clearly understands has yet to be made: economics. Forget what you know about encryption and the absurdity of security back door. These are purely intellectually abstractions to the other side.

    Want a sure-fire way to slowly sink potentially hundreds of thousands of American jobs? Set up the precedence that the US Government has backdoor access. What foreign government or foreign firm or even foreign citizen wants to use systems that the US Government can trove at will? We've shown a complete and utter disregard for intelligence gathering on our allies, even our closest, why assume anything else even when wrapped in the best of intentions?

    • #front end development
    • #jekyll

    Grabbing the latest blog post from Jekyll using PHP

    On my website, greggant.com I have a small section of my homepage where it always displays the title of my most current blog post. Prior to Jekyll back when when my blog was hosted on Tumblr, I used the API to grab the latest post via a URL. On Jekyll, the solution is even easier: Create a dummy template that only includes the page title and use PHP to write the blog post title.

    Step 1: Create a blank template in _layouts

    I created a template I named blank.html, the entire contents are one line:

      {{ content }}   

    Step 2: Create a url

    Since the script I'll be using is all for public access, I kept it really simple and decided to make a new page in the root of my blog. I named it currentpost.html.

    
      --- 
    layout: blank
    title: Inaudible Discssion
    ---
    {% for post in site.posts limit:1 %}
    {{post.title }}
    {% endfor %}

    It'd be possible to create a URL directly to the page, but for this solution I opted in for absolutely the most minimum amount of work seeing I'd rather link from my portfolio to my blog's homepage instead of the the actual post..

    Step 3: Creating the script in PHP

    Lastly, comes the PHP, and it looks as such:

    <a href="http://blog.greggant.com">
    <?php $url = "http://blog.greggant.com/currentpost.html";
    $str = file_get_contents($url); echo $str; ?>	</a>

    • #emulation
    • #ios
    • #tutorial

    iOS Emulation, gamepads, Cydia, Xcode, builds.io - A Tutorial for iOS emus

    Contents


    Introduction

    ios 9 8-bit logo

    Before we get started, I’ll be using quite a bit of vernacular related to emulation. Many people familiar with emulation can skim the the Mini Glossary .

    Originally posted: 2015-12-09

    Emulation isn’t exactly legal. Emulators themselves remain legal, jailbreaking remains legal, but downloading ROMs is legally a grey area at best and piracy at worst. However, this isn’t about morality but an exploration of feasibility. With the prevalence of sites like emuparadise, emulation is as alive and kicking as it was during golden age of emulators, the late 90s and 2000s when the explosion of projects like NESticle, ZSNES, SNES9x, UltraHLE, Connectix VGS were still being actively developed.

    Lastly, emulation is a bit tricky to get up and running. I’ll do my best to distill this into a comprehensive, one stop guide for iOS emulation. This post encapsulates quite a few burnt hours, starting with two cross country flights where my sole entertainment on the flights were my iPhone with a Moga Rebel, and my MacBook Pro. While downloading and compiling emulators I realized that the information on iOS emulation is scattered and often unclear. Immediately I started kicking around the idea of writing a guide. What follows is the longest blog post I’ve ever written in terms of hours spent + words. In the end, I downloaded 20+ emulators, took countless screenshots / notes, created original art, dropped over $100 and I accrued over 5000 words, the most I’ve written on since college on a single document (excluding coding).

    Android has a huge advantage compared to iOS when it comes to emulation, as its apps can be downloaded through the Google Play store. Make no mistake, if emulation is very important to you, iOS is not the go-to platform as there’s plenty more work and headache that goes into getting emulators up and running. That isn’t to say iOS is bad at emulation, but getting emulation working on iOS is labor intensive. iOS has a bit of catch up to do on the game controller support even when compared to tvOS. If you’re looking for the ultimate portable retro gaming console, an Android phone with a microSD card is likely the better option. Hopefully this post will be useful to someone, somewhere…


    Mini Glossary of Terms

    invaders

    Emulator - A Program that simulates/emulates specific hardware configurations. These programs range vastly in techniques and scope (and aren’t limited to games). In order for old games games to run properly, programmers recreate the functionality of the chipsets found in the old game hardware to allow games to be played on non-native hardware. Due to the complexity of simulating hardware, emulators always require more powerful hardware than those found on the original chipset . Emulators became prevalent in the late 1990s due to the rapidly increasing power of personal computers and the internet, which enabled developers to collaborate and distribute their code. Even a lowly 1998 iMac (Rev B) with PPC G3 233 MHz and 6 MBs of VRAM was orders of magnitude more powerful than all of the SNES’s hardware, and thus was able to play SNES games. During the early 2000s, emulators were able to add features not found in the original hardware. Famously the two defunct commercial attempts were made for game emulation Bleem emulator allowed the Sega Dreamcast to play a few select PSX games, and Connectix Virtual Game Station allowed anyone with a Macintosh to play any PSX game, and take advantage of the superior load times both occurring in 1999-2001. After lawsuits commercial emulators were deemed legal risk, and seemed on the cusp of legality. UltraHLE, the first N64 emulator was hit with legal threats from Nintendo and thus emulation today now mostly lives on in open source (see source code). For further reading, emulators vary between high level emulation and low level emulation. Today, the average smartphone is orders more powerful than retro game consoles.

    ROM - Read-Only Memory. Cartridge based game consoles like the NES, SNES and Genesis used Read-Only Memory to store games. Games that had the ability to save games used specialized battery packs and additional memory for saving purposes. Later game consoles like the Playstation and Xbox used less expensive optical media formats that were ROM hence the term CD-Rom and DVD-Rom, and opted for memory cards or internal memory to save games. The term ROM is usually used interchangeably for any game file.

    ISO - ISO is shorthand for the common ISO 9660 filesystem used on CD-Rom. ISO files are byte-for-byte self contained data dumps of entire CD-Roms and DVD-Roms. These files can be transferred and later burned onto optical media. Some early game consoles such as the Sega CD and Neo Geo did not have any sort of copy protection, so games can be pirated easily by simply downloading and burning onto CDs. Later consoles employed various methods to ensure copy protection such as the surprisingly simple but effective bad bye header that the Sony Playstation employed.  ISO file format today can contain other variants outside of the 9660 standard.

    Source Code - A program instructions written in the original language before compiled and translated to machine language.  In the context of iOS emulators, iOS emulator source code can be downloaded freely and compiled into native iOS apps using Apple’s Xcode. This program can then be transferred to an iOS device.  Open Source literally means the Source Code is open to viewing, thus anyone can view and modify the code, and submit bug fixes, features, optimizations, and changes to curators of a project to be reviewed. Open Source code projects can be found a variety of places like GitHub. Due to the licensing constraints of Apple’s App Store, pre-compiled apps can not be installed on iOS outside of the App store, but developers need a way to test their code on iOS devices, thus projects compiled through Xcode can be loaded on onto an iOS device. 

    Blitter - Blitter originally is a term for a coprocessor, but in the world of emulation, refers to graphics rendering techniques. Game consoles like the Genesis and SNES had max resolution of 320px x 240px, paltry when compared to modern consoles supporting 1920px x 1080px (1080p), making for 27 times as many pixels. Computers support a range of resolutions, all many times greater than retro game consoles, and the iPad Air and Mini both sport a native resolution of 2048px x 1536px, even greater than 1080p TVs. Due to the resolution differences, the retro consoles appear pixelated when blown up to modern display resolutions. Programmers have figured out various techniques on how to upscale graphics and make them appear smoother for 2D game consoles, called Blitter libraries back in the early 2000s and have steadily improved over the years. 3D game consoles like the Nintendo Gamecube & Wii, Sony Playstation 1 & 2 & PSP have emulators that render the polygons at modern resolutions and apply effects like Full screen Anti-Aliasing, and more detailed particles, and even some edge cases, tweaks that change draw distances and textures. Thus emulated consoles can attain much greater image quality than the original consoles could, especially for 3D games.

    Below is an example using OpenEmu’s blitter “filters”. 

    image

    Blitter libaries can drastically improve image quality, although they can be quite CPU intensive for the most advanced like SABR.



    Getting Started with iOS emulation

    8 Bits of iPhone

    Unlike on Android, emulation isn’t something Apple condones. Occasionally, apps slip through the app stores such as iDOS (A well constructed DOS emulator). Some apps hide functionality in them, such as FloppyBird (a hidden NES emulator).  These are unreliable and often pulled instantly from the App store assuming if they somehow make it past Apple’s screening. This likely has less to do with any beef Apple has with game emulation but with emulation in general.

    Jailbreaking

    Thus this leaves two avenues, the first being the most obvious: Jailbreaking. By now most users are pretty familiar with Jailbreaking. Rather than re-explain jailbreaking, I’ll quote my favorite resource for iOS, iDownloadblog.com

    Jailbreaking is the process by which Apple’s mobile operating system, iOS, is modified to run unsigned code in order to gain access to files that Apple wouldn’t normally let you access.

    Jailbreaking adds unofficial application installers to your iOS device, such as Cydia, which let you download many 3rd-party applications, tweaks, and extensions that are unavailable through the App Store. These packages open up endless possibilities to do things on your iOS device that a non-jailbroken iOS device would never be able to do.

    - Downloadblog.com - JailBreak

    Rather than walk through jailbreaking here on this blog, there’s entire websites and forums dedicated to Jailbreaking. While I’ve written a few popular jailbreak centric blog posts and iFile, I am not an expert. You can find all the necessary files and instructions on jailbreaking at iDownloadblog.com.

    Jailbreak free - Build your own

    The second avenue comes rooted from the Enterprise Distribution certificate exploit to install the app via HTTP. Originally a few clever authors took advantage of a flaw in iOS’s ability to deploy enterprise Apps in iOS 8. The popular emulator, GBA4ios was distributed by this method. The advantage is it didn’t require a jailbreak, the downside is Apple quickly patched this glitch in subsequent iOS updates.

    image

    These emulators quickly became open source, anyone with a copy of Xcode and developer license can download and compile the open source projects. 

    The advantage is its totally free, and unlikely to be closed by Apple. Downside is you need a to jump through several hoops. Notably since previously linked guide, was written a few things have changed. This is by no means a perfect guide but the standard steps to get up and running.

    Step 1) Download Xcode from the Mac App Store

    Step 2) Install CocoaPods

    CocoaPods is a dependency manager for Xcode projects. Since many applicaitons have various dependancies, you’ll need this in order to properly compile many open source projects. Installing Cocaopods process depends on your OS version. OS X 10.10 and below only require one terminal command: sudo gem install cocoapods

    One of OS X 10.11 - El Capitain’s changes is a new security provision for rootless access. In reality, there’s still a root account for the OS but locks off certain directories from access meaning even if a user has root access (full file system) they cannot modify certian portions of the operating system. The default install location for gem installs was in a locked area, thus the above install command will not work. Rather than disable the “rootless” security security provisions, its safer to install the files elsewhere. You’ll need to follow the instructions, by running the following commands in your terminal:

    1. $ sudo gem install cocoapods

      This should execute successfull installs

      Fetching: nap-1.0.0.gem (100%)

      Successfully installed nap-1.0.0

      Fetching: thread_safe-0.3.5.gem (100%)

      Successfully installed thread_safe-0.3.5

      Fetching: minitest-5.8.2.gem (100%)

      Successfully installed minitest-5.8.2

      etc…

    2. Once done, run:

      $ export PATH=$PATH:/Library/Ruby/bin
    3. Test to make sure that Codepods has installed properly

      Test to make sure its installed properly

    Step 3) Launch Xcode

    Go to Xcode -> Preferences  and click the Accounts tab and add your Apple ID

    image

    Step 4)

    Download an open source project, and open the xcodeproj file.

    Step 5)

    This is where things start to get tricky,you’ll need to navigate to the General project settings tab and change the Bundle Identifier to a unique name, and the team name to your Apple ID. 

    Next change the target device to your connected iOS device. Click fix, and it should make some corrections.

    Step 6)

    Build!

    Getting projects to work can involve many steps, so keep in mind that these steps may take additional corrections. Be prepared to visit Github projects, wikis and forums to guild you. This currently is the only way to get emulators on the newly released Apple TV

    Sounds a bit complicated right? It’s because it is. I’m a web developer by trade and it took me a few hours to navigate the process as I’m not an iOS dev. However, there’s another way to go: Have someone else do the work for you.

    Jailbreak Free - Have someone else make the builds -  Builds.io
    A builds.io mini-review

    image

    Since the certificate famed exploit, a few of the emulator authors for iOS combined forces to form Builds.io, a service to distribute HTTP installable enterprise Apps. In order for iOS to be a viable corporate entity, iOS needs the ability to install applications outside of the app store for internal apps that aren’t available on the app store for any number of reasons: not waiting for Apple’s validation, privacy/security, quick distribution and so forth. Builds.io uses Apple’s own built in enterprise functionality. It works by adding your device ID to the Builds.io enterprise network, and authorizes its apps to be installed via HTTP. The catch? It costs $10 a year. Sounds fishy? I was wary but decided to take the plunge.

    To add to questionability Builds.io doesn’t have full the full condolences of some of the emulation authors either. I found the following exchange on Twitter between a user of Builds.io and the author of LibRetro which makes RetroArch possible, a very popular open source emulator for iOS. Since as of writing this, RetroArch does not appear in Builds.io.

    image

    Signing up for builds.io takes almost no time, that is if you don’t run into any PayPal problems. I had deleted my account and I had to create a new account simply to pay for builds.io. Signing up for the service takes only a few short minutes, to create an ID for your device.  Upon payment, your account is then activated (which takes about 2-3 minutes) and then you’re free to install applications.

    Installing applications from Builds.io is as simple as the Apple app store. Click the install button, click it again and a message will alert you that you’re about to install an iOS app. Once the install button is clicked, the app will start installing the background. Emulators are pretty small, and even on LTE, it only takes seconds. Once installed, the apps behave as any other iOS application. You’ll find most the of the emulators listed above at Builds.io. It works great, and there were zero hiccups. A $10 license only covers one device however so I did not test this on my iPhone 5 or 4.

    Would I recommend it the service? In a short answer: Yes.

    I recommended this to my technically-inclined-but-not-a-developer brother who spends all day navigation EDLs, codecs, and deliverables as post-production manager, as he’s quite the retro gamer but probably lacking the patience to compile his own emulators. Admittedly, I used Builds.io for many of my emulator installs. However, I’m still unsure as who the money goes to, and while one may argue you’re paying for the service and not the open source software, it still feels like you’re doing exactly that: paying the wrong person for someone else’s hard work.




    Picking your path

    controllers

    Ideally for anyone interested in iOS emulation, you’d have both your iOS device jailbroken and use the open source emulators (by either compiling the applications yourself or paying the $10 for Builds.io or similar service). There’s some incredible jailbreak only features like drivers for bluetooth PS3 controller drivers and Controllers for all PS4 controller drivers.

    Now for the confusing part, there’s no magic bullet to unlock all the iOS emulators.

    • Some of the emulators are available through Cydia and open source like PPSSPP.
    • Some are available only through open source repositories and Builds.io like GBA4ios.
    • Some emulators are available only through Cydia like SNES 9X Ex+ and several helpful tweaks/drivers.  

    Having a jailbroken device also makes uploading ROMs to your iOS device easier. The ideal iOS emu-gamer would compile her/his own open source emulator AND jailbreak her/his device.

    Currently the momentum is in the compile-your-own side of things as the best iOS emulators are mostly found through open source.

    Software Recommendations

    If you chose to go the jailbreak route or non-jailbreak route, there’s a few recommended utilities to make your life easier iFile (a iOS file management system, available through Cydia) and iMazing (a Windows/Mac utility for device management) or iExplorer. 

    image

    iFile is routinely one of the most recommended iOS jailbreak utilities. I’m quite a fan and have written a few articles related to it. iDownloadblog wrote the post as few years back “Why Every Jailbreak Power User Needs iFile”. Specifically pertaining to iOS, iFile allows iOS users to copy, move, open, delete files, create directories and the usual file management tasks. iFile will be routinely mentioned. 

    image

    iMazing is a wonderful OS X and Windows utility that allows device management outside outside of iTunes, including full file system access for jailbroken devices. Non-jailbroken users still can use limited file management, still useful for rom management. I picked this up as part of a bundle through macupdate.com but it can be purchased for $35. Spendy but its the best overall iOS management utility I’ve used. 

    image

    iExplorer is geared for one thing and only one thing: Browsing your iPhone from your mac or pc. The advantage over iMazing is the var/mobile/Applications are put front and foremost. Normally viewing through iFile, every application resides in a folder that has a random string of letters and numbers. iExplorer has a viewing option that lists the folders by the name of the application they contain, it makes life easier. Again, ringing in at $35. It also has one other killer app feature, mount your iPhone in the finder.

    Each of these applications are worth buying, but you only need one. iMazing is more bang for your buck but iExplorer is better strictly for transferring ROMs. I personally while writing this article switched using iExplorer strictly for rom transfer.



    A rundown of the Emulators

    controllers

    I personally downloaded every emulator I could find and tested them, due to sanity’s sake, I’ve kept my reviews short, and for your sanity’s sake, where the ROMs are stored.   Note: Locating the ROMs using iFile or iMazing will take some trial and error I’m listing these buy iExplorer’s locations.

    Jailbreak Emulators

    The following is a list of emulators that can be downloaded via Cydia.

    PPSSPP - a very impressive PSP Emulator, that allows for upscaling games beyond native resolutions, FSAA and other graphical tweaks. My iPhone 6 I ran the games at 3x their original resolution only once in awhile with a hiccup. Full gamepad support to boot. Highly recommended.

    Default Rom location: /var/mobile/Documents/PSP/

    SNES9x EX+ - One of several SNES9x based SNES emulators, full gamepad support, and support for larger screen iOSdevices. With the plethora of SNES emulation options, this is one of the best. 

    Default Rom location: /private/var/mobile/media

    RetroArch - A powerful multi-console emulator for iOS, includes multi-emulator cores, includes the following support the following emulators: NES (NEStopia, QuickNES), SNES (bSNES, SNES9x, SNES9x Next), Nintendo DS (DeSmuME), NES (FCEUmm), Sega Genesis/MegaDrive/Master System/Game Gear/Sega CD (Genesis Plus GX & Picodrive), Atari Lynx (Handy), Arcade (Mame 2003), Neo Geo Pocket (Mednafen Neopop), PC Engine/TurboGrafx 16 (Mednafen PCE), Sony Platstation (Madnafen PSX, PCSX ReARMed), VirtualBoy (Mednafen VB), Nintendo 64 (Mupen64plus), GameBoy Advance (VBA Next, VBA-M).

    The catch? The Cydia version is massively out of date, you’ll need to use Xcode to install your own. See RetroArch in the open source section

    Target your iOS device and hit build.

    SNES A.D.+  -  Genesis AD+ - A classic iOS genesis emulator, Somewhat out of date, only support Wiimotes and doesn’t include full screen support for wide iOS devices (iPhone 5 and beyond). 

    Rom location: /private/var/mobile/Media/ROMs/SNES/

    Genesis AD+ - A classic iOS genesis emulator, Somewhat out of date, only support Wiimotes and doesn’t include full screen support for wide iOS devices (iPhone 5 and beyond). 

    Rom location: /private/var/root/media/ROMs/GENESIS

    GBC AD+ - A gameboy / gameboy color emulator. Somewhat out out of date, only supports wiimotes and doesn’t include full screen support for wide screen iOS devices.

    Rom location: /private/var/root/media/ROMs/GameBoy Color

    NES AD+ - A classic iOS NES emulator, Somewhat out out of date, only supports wiimotes and doesn’t include full screen support for wide screen iOS devices.

    Rom location: /private/var/root/media/ROMs/NES

    Nescaline - A classic iOS NES emulator, Still working even on iOS 8/9 but woefully out of date.  No controller support.

    Rom location: /var/root/Media/ROMs/NES/

    Installable cydia emulators but incompatible with iOS 8/9 - RockNES, NES4IPhone, SNES4iphone, Gameboy4iphone,

    Open Source Emulators

    The Open Source emulators currently are where the action is, most being still actively developed, thus the emulators are of a slightly higher standard.

    The rom locations the application directories themselves unless stated otherwise.

    NDS4iOS - Nintendo DS emulator, works well, supports gamepads but due to the DS, not the best for landscape gaming.

    PPSSPP - Same as the jailbreak version, impressive and one the best emulators on iOS.

    <a href="https://github.com/rileytestut/SNES4iOSSNES4iOS - A SNES emulator based off SNES–HD, another SNES9x core based emulator. Freeze states are partially supported, iPhone can save them but not load them. iPads can load and save freeze states.  With almost no updates for 3 years, SNES4ios is probably defunct.

    MeSNEmu - An SNES emulator using the SNES9x core, runs well, has minor smoothing, runs without dropping frames on my iPhone 6. Supports a number of controllers. ROMs can be copied directly to it through iTunes or popular utilities.

    Provenance - Multi console emulator that supports the Sega family of game console (Master System / Game Gear/ Genesis / 32x) using Genesis Plus GX and SNES through SNES9x, NES and GameBoy Advance. Supports game gamepads, Genesis runs exceptionally well. Includes game box art. 

    Gearboy -  GameBoy Color and GameBoy emulator.

    Gameplay Color - Another well written GameBoy and GameBoy Color Emulation

    GBA4iOS - The emulator that caused a stir online. It works nearly flawlessly, it could use some blitter support. ROMs can be added directly through the application using Web browser support. 

    Rom Location: var/mobile/Applications/ GBA4ios/Documents

    N64iOS - a work in progress that crashes shortly after launching. Its sitting on Github and hasn’t seen a commit over two years.

    Reicast - An Android Dreamcast emulator with the beginnings of an iOS port. Currently in the Reicast project there are iOS and OS X x project files, you can even compile Reicast to a phone and read the debugger files, and upload dreamcast bios but just don’t expect anything to happen. Seeing as its functioning Dreamcast emu on Android, the iOS port may eventually catch up.

    RetroArch - powerful multi-console emulator for iOS, includes multi-emulator cores, includes the following support the following emulators: NES (NEStopia, QuickNES), SNES (bSNES, SNES9x, SNES9x Next), Nintendo DS (DeSmuME), NES (FCEUmm), Sega Genesis/MegaDrive/Master System/Game Gear/Sega CD (Genesis Plus GX & Picodrive), Atari Lynx (Handy), Arcade (Mame 2003), Neo Geo Pocket (Mednafen Neopop), PC Engine/TurboGrafx 16 (Mednafen PCE), Sony Platstation (Madnafen PSX, PCSX ReARMed), VirtualBoy (Mednafen VB), Nintendo 64 (Mupen64plus), GameBoy Advance (VBA Next, VBA-M).

    The guide can be found here but its a bit overkill.


    Setting it all up

    ios 9 8-bit logo

    A few of the emulators require beyond the normal setup as described above. RetroArch

    RetroArch requires more work than the usual emulator to compile due to its complexity and the jailbreak version is woefully out of date and doesn’t support gamepads. RetroArch is easily the most powerful emulator on iOS or Android due to its insanely large support, and currently the only way to play PSX/N64 games under iOS.

    • Go to RetroArch’s GitHub project and download it.

    • Next go to RetroArch’s Assets github project and download it.

    • Rename retroarch-assts to “assets” and move it inside the main RetroArch project’s media folder

    • Go /pkg/apple/iOS within the iOS project, and open the RetroArch_iOS.xcodeproj, 

    • In Xcode, give the Bundle Identifier a unique name, and assign the team to your Apple ID.

    Gamepads

    Gamepads are a must for emulation gaming. While all the emulators include variations on screen touch controls, they’re a far cry from a physical game pad. There’s a lot of gamepads on the iOS market, all of which use bluetooth to connect to an iOS device. This inherently makes iOS gamepads more expensive than the cheapest USB options for Android. There’s been a few round ups of gamepads for iOS, including Gizmodo and techradar but the modern favorites are the well known Mad Catz C.T.R.L.i and the lesser known Moga Rebel, both featuring a simple phone clip.

    I opted for the Moga Rebel, partially for availability as I made a spur-of-the-moment decision to buy a gamepad before a cross country flight at Target. The Moga Rebel isn’t cheap, at $79.99 its nearly as expensive as a Nintendo DS, which makes even current generation game console controllers seem like a good buy at $50-$60. The Moga sports a micro USB port, used exclusively for charging its rechargeable battery. While Moga doesn’t boast battery life, it certainly lasts longer than the iPhone and then some.

    The other key feature is a simple fold out clamp with rubberized that allows the control pad to grip anything from an iPhone 3g to and iPhone 6s tightly. It works great too, during a very turbulent return flight, even when I heard a few items fall, and I had to pause to grip my controller, my iPhone 6 never came loose.

    The gamepad is clearly inspired by the Xbox 360, which to date, is the best feeling console controller, complete with two analog sticks, two analog triggers, two bumper buttons, a d pad, 4 buttons, and a single start button. It’s only a select button shy of covering the all the bases.

    The pad is both lighter and wider than the Xbox 360 controller but I didn’t notice either until had the two side by side. The Moga Rebel feels “right”, an almost indefinable characteristic. Everyone who’s used generic gamepad can describe how “off” a controller can feel. Does it feel like an $80 controller? I’m not sure, but it certainly feels like a premium product.

    Most games that support gamepads supported the Moga Rebel, I got a kick out of playing Metal Slug and Knights of the Old Republic, both of which played flawlessly and required zero config. I also realized a few games in my library were finally playable such as Sonic CD. iOS gaming still is the wild west when it comes to gamepad support.

    Emulators boasting gamepad support magically worked with the Moga Rebel. I ended up spending most of gaming in emulation, as one might suspect, particularly with PSP games. At 3x their original resolution, and on a infinitely better screen than the original PSP, the PSP games I played (Little Big Planet, Lumines) played like native apps, and perhaps maybe even better. I even took a break to play the GBA remake of Super Dodgeball and beat the game, and played a game of Tecmo Super Bowl (with a rom with updated rosters) for the Sega Genesis.

    Other than the price and a missing select button, there’s nothing to complain about with the Moga Rebel. However, I can’t recommend the gamepad for one simple reason: Support. Moga seems to be dead or mostly dead. Other than a twitter account that seems to fire off a flurry of tweaks every month or two, their website appears to be un-updated, their support non-existent, and no OS X support. Had I known, I’d of opted for the less expensive MadCatz controller.


    The wrap up

    game cart

    iOS emulation takes a bit of work. Builds.io makes easy for the less technically inclined but anyone willing to spend the time with Xcode and Jailbreaks can unlock the full potential of their iPhone. To get up and running, you’re looking at a $50 investment for a Mad Catz Micro C.T.R.L.i. Then if you want to go further $10 for builds.io. subscription and $35 for iExplorer for a grand total of $95.

    I’ll try and keep this article up-to-date as I’ve done with some of my other guides and clean it up overtime.
    • You’ll want to have a jailbroken device but it isn’t required.
    • Support for controllers varies wildly on a per emulator basis. Quality of emulators varies quite a bit too.
    • You will not enjoy iOS emulation very much without a gamepad.
    • You will need to either subscribe to a service like Builds.io or learn to operate Xcode to get many of the best emulators.
    • The the more storage on an iPhone you have, the better. PSP games clock in often at a GB plus, and PSX games often around 600 MB. I am thankful for my 128 GB phone

    Edits:

    12/11/15: Minor restructuring of setup section, corrections.

    12/10/15: Added originally art, removed icons of emulators, article formatting. Wrap up.

    • #fonts
    • #atom
    • #coding
    • #web design

    Setting up Operator Mono for Atom

    If you haven't seen Operator Mono by Hoefler and Co., its worth checking out. It's spendy but worth it if you can expense account it for your team.

    In Atom, go to the Atom Menu and select "Open Your Stylesheet"

    Screen of Atom menu Open Your Stylesheet

    The just drop in the following:

      atom-workspace,
      atom-text-editor {
         font-family: "Operator Mono";
         font-size: 14px;
         font-weight: 400;
         line-height: 1.7;
      }
      atom-panel.tool-panel {
         font-size: 0.88em;
      }
      .entity.other.attribute-name {
          font-style: italic;
      }
      atom-text-editor::shadow{
          .entity.other.attribute-name {
              font-style: italic;
          }
      }
      

    Feel free to play with the line-heights and font-size. If you font isn't installed, you'll see a default font of some variety. Be sure to remove any previous font settings in the preferences.

    Screenshot of Atom menu settings

    • #jekyll
    • #blog

    Good things ahead...

    Moving to Jekyll effectively destroyed my google listings.

    Some of my longer posts that used drive hundreds of views a month are now ignored. I can't even get google to find my 9 months with Codekit - A Codekit 2 Review or my Recommended Mac Pro upgrades & hacks. It'll be some work to rebuild from here on out. Still need to import plenty of posts and set up a better syncing but at least now my blog is under my control and with version control. I originally hacked the default Tumblr theme to suit my own wants and needs but Jekyll is a breathe of fresh air. Slowly I'll be de-jekyllfying my blog look and feel modifying it to match greggant.com. I'll be able to add features like lazyload and page indexes in way Tumblr simply never allowed.

    More freedom, and more flexibility. Good things are ahead.

    • #jekyll

    Things to come

    I'm in the process of updating this blog, to Jekyll, it'll be bumpy for the next few weeks but hopefully things will smooth out.

    • #lightroom
    • #photos
    • #time machine

    Moving Lightroom Photos/Libraries to another volume

    Moving photos between HDs is pretty easy but its not made clear through the Lightroom interface. Previously, I’d been storing photos on my 750 GB SSD boot drive, and I finally was coming to terms that I really needed to move 31,000 photos (a good portion of which are RAW). The process should be the same on any recent versions of Lightroom, and on Windows.

    Step 1:

    First, create a new folder by clicking “Add Folder” 

    image

    Step 2

    At the file window, select your new photo location on another HDD, and click choose

    image

    Step 3

    Drag the folder from the left hand side bar down to your new location on your new HDD.  I’m moving 2015 to Lightroom Library/Photos in this example

    image

    Click move and you’re good to go. Depending on the size of your library, it make take some time.

    image

    Note: I’d highly recommend to anyone, make sure that your new location has some sort of backup as it will delete the original copies of the photos once copied. Since I’m on OS X, I have Time Machine drives configured to backup both “Samsung SuperDrive “ and “SuperDrive”.  

    If you move your photos to an external drive that isn’t backed up in some manner and it dies, you’ll lose your photos. Check out my making the most out of time machine article and please don’t say I didn’t warn you!

    • #app design
    • #development

    Starting my first app…

    image

    This should be fun, its almost embarassing I haven’t done this before, considering I’ve held down development positions for most of my professional career. Nothing too big: PhoneGap + free. Should be doable.  Already using cherrio to create scrapers. 

    • #apple
    • #os x
    • #software

    The problem of the OSX platform is not the software

    Some will burn me for saying this but I think shutting down Apple’s pro software line is not such a bad idea. The problem of the OSX platform is not the software.

    Pier BoverThe problem of OSX hardware in 2016

    There’s a reason why my blog posts about Mac Pro drive the majority of traffic to my blog and echos my own reaction to the abysmal Mac Pro 2013. In the nexi-verse of 2016, creative pros are switching to Windows. 

    If hackintoshes were more viable, I’d of ditched Apple hardware ages ago. I tried. I really did

subscribe via RSS