AngularJS vs Ionic abstract state

Ionic is a wrapper for AngularJS and one of the changes that they've done is to the abstract state of the ui-router. I tried to follow an AngularJS tutorial for abstract state and added the following code:
.state('myparent', {
    abstract: true,
    url: '/myparent',
    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ui-view/>',
    controller: 'MyParentController'
})
.state('myparent.mychild', {
    url: '/mychild',
    templateUrl: 'mychild.view.html',
    controller: 'MyChildController'
})

Inside mychild.view.html I had:

<ion-view>
    <ion-content>
    ...
    </ion-content>
</ion-view>

This resultet in a blank page (although the controller was executed since it fetched the model from my backend). Also my navigation, for which I used $ionicHistory, was all messed up.

The trick apparently is to use ion-nav-view instead of ui-view in the abstract state:
.state('myparent', {
    abstract: true,
    url: '/myparent',
    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ion-nav-view/>',
    controller: 'MyParentController'
})

Lesson learned, use Ionic tutorials. :)

Source:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-2/
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states
http://ionicframework.com/docs/api/service/$ionicHistory/

Android 9-patch image in HTML5 CSS3

One feature that Android has adopted is 9-patch images. The Android Studio contains a Draw 9-patch tool which lets you 'create bitmap images that automatically resize'. Basically you select areas of an image that can be repeated or stretched while others are kept at the same size. Giving you almost SVG functionality for bitmap images, especially great for buttons.

Now this feature would be great for web as well, e.g. responsive design pages. To achieve this we can use the CSS3 feature border-image which combines border-image-source, border-image-width, border-image-slice and border-image-outset.

border-image-source defines which image to use.

border-image-width defines the width of the border image. Stretches or shrinks the image regions to fit the widths.

border-image-slice divides the image into 9 regions, thereby the name (see the image above) deciding which parts can be repeated/stretched. The regions are: four corners, four edges and a middle. The fill property decides if the middle should be filled in or kept transparent.

border-image-outset decides how far out from the border the image will appear. Together with border-width this enables the border to not take up all the space inside the container caused by it having a wide border to fit the image inside (See http://www.norabrowndesign.com/css-experiments/border-image-frame.html#one). This is especially great for select/dropdown boxes as they can't work around this by using line-height (http://stackoverflow.com/questions/18613279/text-over-the-top-of-a-border-image-using-the-border-as-an-expandable-backgroun)

border-image combines the four above properties, but I felt I had more control when splitting them up. However, as of right now browser support for border-image and especially border-image-outset is a bit limited. Most browsers support border-image, but might need browser-specific CSS (e.g. -webkit-border-image).


 Example:
border-style: solid;
border-width: 5px;
border-image-source: url(dropdown.png);
border-image-width: 25% 10% 25% 5%;
border-image-slice: 10 70 20 60 fill;
border-image-outset: 12px;

http://border-image.com lets you generate border-image CSS from an image. but it doesn't put in border-image-outset.

Source:
https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/What-Are-9-Patch-Images
http://stackoverflow.com/questions/6806559/does-9-patch-png-can-work-somehow-with-css-on-browsers
http://stackoverflow.com/questions/3659457/nine-patch-images-for-web-development
https://teamtreehouse.com/forum/borderimageslice-vs-borderimagewidth