Building a Hackintosh in 2015

So today I have installed OS X 10.10.4 on my computer that I did not buy from Apple, which essentially means that I have built myself a Hackintosh. Here is what I learnt during that process.

  1. Buy hardware that TonyMacx86 advises you to buy.
  2. Read the complete guide on how to install it on that page too.
  3. If you plan on installing multiple operating systems, get a separate hard drive for each. You are going to save yourself so much time.
  4. Unplug your card reader if you encounter any issues during the installation.
  5. At some time during the installation you will probably need bootflags. Here is what helped me install OS X with my GTX 960 G1 Gaming:
    nv_disable=1 GraphicsEnabler=No maxmem=4096
  6. If you have a GTX graphics card, see if you can install the Web Drivers provided by Nvidia.
  7. Do not screw around and select Mac Pro 6,1 in Multibeast. You will not get any benefits and your Nvidia Web Drivers will stop working. Use the nv_disable=1 bootflag if that has happened to you.

multibeast-customize

After quite some time and furiously purchasing another SSD since I couldn’t get OS X to install on my partitioned Windows SSD, here is what I achieved:

Screen Shot 2015-07-31 at 23.12.58

 

Complete list of working parts:

  • Intel Core i5 4690K (LGA 1150, 3.50GHz, Unlocked)
  • ASUS MAXIMUS VII RANGER (LGA 1150, Z97, ATX)
  • HyperX Fury Black (2x, 8GB, DDR3-1866, DIMM 240)
  • Gigabyte GTX 960 G1 Gaming (GM206, 2GB)
  • Corsair Builder Series CX600 V3 (600W)
  • TP-LINK TL-WDN4800, Wireless N Dualband (PCI-E x1, 450Mbit/s)
  • Cooler Master Silencio 550 Matt (Midi Tower, Black)
  • be quiet! Dark Rock 3 (16cm)
  • AOC u3477Pqu (34”, 300cd/m², 3440 x 1440 Pixel, Black)
  • Samsung 850 EVO Basic (250GB, 2.5″)
  • HyperX Fury (120GB, 2.5”)

Mongoose: Cannot read property ‘paths’ of undefined

When working with Mongoose, make sure you never ever name a property “type”, since it’s reserved for declaring datatypes on fields. Take a look at this:

permissions: {
  type: String,   // this will throw an error
  userGroups: [
    {
      group: { type: mongoose.Schema.Types.ObjectId, ref: 'UserGroups' },   // correct use of "type"
      permission: String
    }
  ]
}

This will throw an uncaught exception. I’m writing this post so I can save you 20 minutes of debugging. Here’s the correct approach:

permissions: {
  permissionType: String,   // correct usage
  userGroups: [
    {
      group: { type: mongoose.Schema.Types.ObjectId, ref: 'UserGroups' },
      permission: String 
    }
  ]
}

 

Smoother/Faster CSS Animations

If you have ever experienced slow/”buffering” CSS animations then it’s probably because you don’t know about this article. Basically, instead of animating the position properties “top”, “right”, “bottom” and “left”, you animate “transform: translate”. On most browsers this activates hardware acceleration, meaning it will use the computers graphic chip instead of the CPU and will therefore produce smoother animations.

How we fixed the -webkit-overflow-scrolling: touch; bug on iOS

When working with the overflow: scroll; attribute, the -webkit-overflow-scrolling: touch; attribute can be very useful on mobile sites. It basically changes the awkward scrolling behavior into the normal, expected behavior.

When you dynamically add content to a div with -webkit-overflow-scrolling: touch; that exceeds the div in height, it becomes broken and unscrollable. You can fix this by constantly having an inner div, that triggers the scrollbar because its 1px higher than the outer div:

.outer {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
}

.inner {
  height: calc(100% + 1px);
}

 

Sidebar Design for our newest Project

UI Screenshot

A friend and I are creating a new ERP software for smaller companies. I am currently designing the UI components while he programs them using AngularJS directives. The whole thing should fit into the iOS 7/8 ecosystem and will be a fully responsive web application. More updates and information on this interesting topic will follow!

NeedThis – Your Personal Must-Have List

Screenshot

Fiona Muff, professional hand model

“Hey, what’s that movie we wanted to see called again?” – “Uhm…”

NeedThis is a website where you can create lists. Those lists are saved server-side and you can share the link to your list with your friends. Entries have three attributes: Name, Link and Status (Not released, Available, Downloading and Completed).

I’ve written NeedThis in Node.js. The lists are stored in a NoSQL database and on the frontend runs Backbone.js MVC. There’s really not much code behind it, but I couldn’t find a similar service on the internet that fits my needs.

Run JavaScript live on your Website

I’ve just written coderunner.js. It allows you to write standard <pre> tags and then convert them into executable code that your users can run on their computer. Here is an example:

for (var i = 0; i < 10; i++) {
  console.log('Number ' + i);
}

You can start coderunner.js by including the file itself, the stylesheet and then initializing like this:

document.addEventListener('DOMContentLoaded', function() {
  var autoRunner = new CodeRunner({ autorun: true });
  autoRunner.makeExecutable('pre.executable.autorun');

  var runner = new CodeRunner({ autorun: false });
  runner.makeExecutable('pre.executable:not(.autorun)');
});

coderunner.js has no dependencies and is about 2 KB in size (uncompressed). It is currently only tested in WebKit and has no issues with prettify by Google.

Observer Pattern in JavaScript

Here is a simple, straight-forward observer implementation in JavaScript that you can use in any modern JavaScript environment. Please note that IE8 and below cannot use Array.prototype.filter and Array.prototype.forEach.

var Observable = {
  listeners: [ /* { event: String, fn: Function } */ ],
  _addListener: function(event, fn) {
    this.listeners.push({ event: event, fn: fn });
  },
  _removeListener: function(event) {
    this.listeners = this.listeners.filter(function(listenerObj) {
      return listenerObj.event !== event; 
    });
  },
  on: function(event, fn) {
    this._addListener(event, fn);  
  },
  off: function(event) {
    this._removeListener(event);  
  },
  listenTo: function(target, event, fn) {
    target._addListener(event, fn);
  },
  trigger: function(event) {
    this.listeners.filter(function(listenerObj) {
      return listenerObj.event === event; 
    }).forEach(function(listenerObj) {
      listenerObj.fn(listenerObj.event); 
    });
  },
};

You can set this object to a prototype of any of your classes:

// new class Person
var Person = function(name) {
  this.name = name;
};

// inherit from Observable
Person.prototype = Observable;

// define getName method
Object.defineProperty(Person.prototype, 'getName', {
  writable: false,
  value: function() {
     return this.name;  
  }
});

Any object that you instantiate from “Person” now is observable. This means you can easily do the following:

var jon    = new Person('Jon Snow');
var tyrion = new Person('Tyrion Lannister');

jon.listenTo(tyrion, 'greeting', function(event) {
  console.log('Received a ' + event + ' from ' + tyrion.getName());
});

jon.on('bye', function(event) {
  console.log('Received a ' + event + ' from ' + jon.getName());
});

tyrion.trigger('greeting'); // "Received a greeting from..."
jon.trigger('bye'); // "Received a bye from..."

jon.off('bye'); // unbinds all 'bye' listeners
jon.trigger('bye'); // does not fire anything

The syntax is very similar to Backbone, but of course without any dependencies. This code works best in a modern NodeJS environment where you do not need to support old JavaScript implementations. Bitbucket repository.