Friday, May 23, 2014

A visual representation of seeding before manually bootstrapping AngularJS



If you're just here for the demo, here you go: http://embed.plnkr.co/vBb2c3/preview

The Problem

As a developer using AngularJS, sometimes you'll want to seed data into some data source (local storage), or make some async calls to a server before your AngularJS application actually loads.  There are good reasons to avoid this at all costs, except when you're trying to replicate an existing user experience.

Take the case of local storage. Sometimes when you deploy a new version of your AngularJS application, you want to see how it works with existing user data. That is, you don't want to assume your user has no data. Ideally you're writing perfect code and you're handling all the null cases correctly, but we don't want to assume that with production data, right?

This process is critical because you don't want your application to incorrectly handle, corrupt, or delete any user data stored in these source, but how do we test this experience without writing hard coded config structures (which are actually data) directly into our Angular application. We want to separate these concerns and bring seeding outside of the Angular application so that we can accurately replicate the user experience when we actually bootstrap the application.

The Solution

To accomplish this, we're going to remove the ng-app attribute from our index.html. By doing so, we ensure that the application is not bootstrapped until we actually want it to be.

Since this is a complex topic, I've created a visualization that I think shows the AngularJS manual initialization process pretty well. Keep in mind I've added in UI-Router and several wait functions so that your eyes have a chance to see each step in action. As a visual learner, this helped me to understand the process from start to finish.

You can see the example Plnkr here: http://embed.plnkr.co/vBb2c3/preview

PS. This all came about while diagnosing an issue for the ng-inspector extension/plugin. Check that excellent project our here: http://ng-inspector.org/

Happy seeding and bootstrapping!

Saturday, January 25, 2014

How to type the Dogecoin symbol on a Mac? (Ð, Icelandic capital letter Eth)

Summary

Hello Shibes,

To type the Dogecoin symbol on a Mac (Ð, an Icelanding uppercase letter called ) is way harder than it should be, but can be done using a combination of Mac's built in text replacement and a Chrome Extension called Popchrom.

The first thing you'll need to do is choose a phrase that you want to type which will be replaced by the Doge symbol. I chose $D$ because you can hold down shift throughout the combination and it isn't likely to conflict with anything else. Feel free to choose whatever you like.

Instructions to set up OSX's text replacement to show Ð:

  1. Go to Settings > Language & Region.
  2. Click Keyboard Preferences button at the bottom of the screen.
  3. Click the "Text" tab of the Window that pops up.
  4. Click the plus (+) sign to add a new replacement.
  5. In the "Replace" column, type $D$ or the phrase you chose above.
  6. In the "With" column, copy and paste this:     Ð
  7. Close out. This should take care of basic apps like TextEdit and others. You just need to type $D$ or your phrase, then hit space, it should replace it, although it can be a little slow. :)
  8. NOTE (UPDATE): For older OSX versions, you must enable text replacement on a per application basis. This is dumb, so instead, run this command in termina to enable it in all apps that support apple text replacement, then restart your apps and it should work:
     defaults write -g WebAutomaticTextReplacementEnabled -bool true
Warning: some apps do not follow the built in Apple method of doing text replacements. This is a pain, but usually you can make it work. Word, for example, has their own text replacement that I am not going to cover here.

Instructions to set up Google Chrome's text replacement to show Ð:

Since Chrome unfortunately does not listen to the Apple way of doing text replacement, and does not have its own text replacement built in, we're forced to install a Chrome Extension called Popchrom. It is a little finicky so make sure to follow all the instructions carefully.
  1. Close all your Chrome tabs.
  2. Install Popchrom from here: https://chrome.google.com/webstore/detail/popchrom/iinhokidgfoomcighckbjmlcndbjmomp?hl=en
  3. Once installed, go to Tools > Extensions
  4. Scroll down until you see Popchrome, click Options.
  5. Once in the Popchrom options, you can delete all the default replacements.
  6. Create a new replacement with
    (or your chosen phrase)
    as the abbreviation and Ð as the Expand to...
  7. Click save.
  8. Voila. Now you should be able to use your phrase in text boxes in Chrome, press Ctrl + Space on any website and it will be replaced when you hit space afterwards. 
  9. Note that this will not work in other extensions or in the Chrome search box, only in website text fields so that you can post in /r/dogecoin :)  I'd love to see proper text replacement in Chrome (or if someone could implement the Apple method)!

wow. So keyboard. Much typing.