Life @ NCP

Ratchet is a css/js library for prototyping iOS apps. Maintained by Twitter, it looks similar to its more established older brother Bootstrap but is much less mature and has an anemic API.

Simple things like closing its popovers don’t seem to exist. If you need to do this, digging into the source reveals

    element.addEventListener('touchend', function () {  
          popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
          popover.classList.remove('visible');
          popover.parentNode.removeChild(backdrop);
    });

for the popover backdrop, so doing something like

    var backdrop = document.querySelector('div.backdrop');  
    if (backdrop) {  
      // sad there's not real way to close this
      // https://github.com/twbs/ratchet/issues/625
      var evt = document.createEvent('TouchEvent');
      evt.initUIEvent('touchend', true, true);
      evt.target = backdrop;
      backdrop.dispatchEvent(evt);
    }

to dispatch the touch event was sufficient for my purposes.

See https://github.com/twbs/ratchet/issues/625 for a short discussion on this.

If you’re using IndexedDB in Chrome and getting this exception, AND you’re not using web workers like this StackOverflow question, you might have members of type Functions on the object you’re saving.

See MDN’s article on structured clones for more info on what’s allowed. Also worth noting are that prototype chains and property features are not cloned.

Hope this helps 🙂

Specifically cordova, Android + iOS

• localStorage
  • Best support – http://caniuse.com/#search=localstorage
  • Not very powerful – name/value pairs, size limits (~5mb)
  • Shim which backs with WebSQL/IndexedDB to bypass some limits – http://mozilla.github.io/localForage/#localforage
• WebSQL
  • Ok support (No IE / Opera / Firefox) – http://caniuse.com/#feat=sql-storage .
  • Sadly, deprecated since 2010 – http://www.w3.org/TR/webdatabase/
  • Cordova plugin alternative – https://github.com/brodysoft/Cordova-SQLitePlugin
• IndexedDB
  • Sad, patchy support. Also not supported in iOS 7 – http://caniuse.com/#feat=indexeddb
  • Horribly broken in iOS 8. – http://www.raymondcamden.com/2014/9/25/IndexedDB-on-iOS-8–Broken-Bad
  • Only key-value pairs
  • Polyfill – https://github.com/axemclion/IndexedDBShim , but broken with workaround on iOS 8 – https://github.com/axemclion/IndexedDBShim/issues/167

Interesting alternatives:

• http://pouchdb.com/

Ionic doesn’t track history too well if you’re going between tabbed and non-tabbed layouts. Here’s a drop-dead simple implementation of a history tracker:

Then to navigate back from your controller, just use the goBack method on the historyState service.

TL;DR: Your svg has to be visible for getBBox to be useful

While working with d3 recently, I was trying to calculate the width of some elements using getBBox , except it kept returning a 0-sized rect.

It turned out that the svg was being rendered when its parent <div> was not visible. Calling getBBox when the svg is visible gives the right results.

Apparently webkit used to some have issues with this but was patched a long time ago.

Hope this helps.