Saturday, December 6, 2014

Locked rotation on Ipad - The Last Resort

I've been having a lot of issues over the past year with my Ipad's rotation being locked. I think I've been through every support page, blog and even youtube videos in search for a solution. Sure, I've been reading about all the obvious stuff, like checking that "Lock Rotation" isn't enabled (either through swiping up to get to the shortcut menu, or through the side switch option), or rebooting the device by pressing the home and lock screen button for about 10 sec.

In fact, rebooting used to work most of the time, but only if I made sure to quit all running applications before doing it. I.e. double-click the home button and swipe up on all open applications. Seems like some applications manage to lock the rotation indefinitely. Anyway, this time it's not working! Once in a while, it starts working for a day, or two, and then it's locked again. It usually starts working after an iOS update, like the latest 8.1.1, but soon starts locking again.

Now, to The Last Resort! I was really looking forward to watch a movie on the Ipad the other day, but wasn't really that keen on doing it in portrait mode. So, in order for force the device into landscape mode, I found this little thing called "AssistiveTouch". It's hidden under "Settings->General->Accessibility->AssistiveTouch" and will, if you enable it, show a black control button on your screen. Click the control button and choose "Device->Rotate Screen" and choose to rotate it anyway you want. Violá!

Monday, February 24, 2014

Handlebars integration with Yeoman’s webapp-generator

I was looking for an instruction on how to add Handlebars to my application based on Yeoman’s webapp-generator. There is an instruction on the old wiki on GitHub, but it’s out-of-date. For this exercise I’ve been using Yeoman 1.1.2 and the 0.47 version of the webapp-generator.

First off, go ahead with step 1 and 2 (but obviously using the latest versions).

There’s no need to load the "grunt-contrib-handlebars" in your Gruntfile.js (step 3), as "require('load-grunt-tasks')(grunt);" is used to load all referenced tasks.

I did some changes to the file structure in step 4, but I guess that’s a matter of taste? One thing to note is the change from “temp” to “.tmp” as this is the temporary directory name being used in other places:

handlebars: {
  compile: {
    files: {
      '.tmp/scripts/compiled-templates.js': [
        '<%= yeoman.app %>/templates/**/*.hbs'
      ]
    },
    options: {
      namespace: 'MyApp.Templates',
      wrapped: true,
      processName: function(filename) {
        // funky name processing here
        return filename
                .replace(/^app/, '')
                .replace(/\.hbs$/, '');
      }
    }
  }
}

The watch task needs some additions to it, as well (step 5). Note the addition on watching .js-files in livereload:

handlebars: {
    files: ['<%= yeoman.app %>/templates/*.hbs'],
    tasks: ['handlebars']
},
livereload: {
    options: {
        livereload: '<%= connect.options.livereload %>'
    },
    files: [
        '<%= yeoman.app %>/{,*/}*.html',
        '.tmp/styles/{,*/}*.css',
        '.tmp/scripts/{,*/}*.js',
        '<%= yeoman.app %>/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}'
    ]
}

Step 6 handles the configuration of Handlebars tasks being run during build, test and serve:
// Run some tasks in parallel to speed up build process
concurrent: {
    server: [
        'compass:server',
        'copy:styles',
        'handlebars'
    ],
    test: [
        'copy:styles',
        'handlebars'
    ],
    dist: [
        'compass',
        'copy:styles',
        'handlebars',
        'imagemin',
        'svgmin'
    ]
}

Don't forget to get the actual Handlebars package using "bower install handlebars" (step 7).

In step 8, as I changed the file structure - just add
<script src="scripts/compiled-templates.js"></script>
and you're done!

/Mattias