Random musings

    How to fix GSAM Battery Monitor in Android Nougat (Using OSX)

    2016-11-24 22:00:00 +0000

    I’ve been used to GSAM’s excellent battery monitor tool on android for a year or so, but recently after upgrading to Nougat I’ve noticed that it’s stopped reporting accuratly for most applciations.

    There is an Android Root companion that is supposed to fix the issue, but Nougat is unable to run it (thanks to better security built in to the mobile OS).

    GSAM kidly request that you star an Issue on the open source issue tracker BUT DO NOT COMMENT ON IT. This can help Android offer users the choice to allow apps to access the Battery APIs built in to the OS.

    Until this request is brought into the OS (I don’t think it will be any time soon) there IS actually a way to enable the functionality. It’s hidden in comment number #27 on the page…

     > #27 rjkmadi...
     > In the interim, you can give permissions through an adb shell.
     > pm grant com.gsamlabs.bbm android.permission.BATTERY_STATS
     > or pm grant com.gsamlabs.bbm.pro android.permission.BATTERY_STATS
     > 
     > (Thanks for flindaman on Reddit.)
     > Oct 3, 2016

    Excellent! But what does that even mean?

    Well - let’s try it out. Before I begin a disclaimer.

    adb

    First let’s see if we have adb…

    adb

    For me I didn’t. Rather than installing the android development studio, I just want ADB, so I decided to install the minimum bits I needed.

    This means getting the “Safe way to install things” using brew. Let’s see if brew is on the machine…

    brew

    If not - follow the instructions here

    If you do have it then make sure it’s working

    brew doctor

    Since upgrading OSX I had to run an extra command to get Xcode tools working…

    xcode-select --install

    Now I was ready to install the android-sdk.

    brew install android-platform-tools

    Now plug in your android and ensure it is connected using PKP connection (the picture communication connection from the menu on your device when you plug it into your mac).

    Next let’s ensure we can see the device…

    adb devices

    It should display your device in a list. Awesome!

    Now let’s find the application name installed on the device..

    adb shell pm list packages

    Somewhere in the list you will see GSAM like com.gsamlabs.bbm or com.gsamlabs.bbm.pro

    Take that text and run this next line to enable the hidden permission for this app to monitor battery information.

    pm grant com.gsamlabs.bbm android.permission.BATTERY_STATS

    Then next time you restart your Android, GSAM Battery monitor will have what it needs to monitor all the apps running on your device.

    Using scss compilation and master CSS files

    2016-05-31 22:00:00 +0000

    We’ve been working on our Master CSS files. These are files that repsent a section of the site.

    Historically we would dump a load of CSS files in a MasterSiteAreaCSS.aspx and it would look somethign like the following….

    <%@ Page language="VB" ContentType="text/css" Inherits="BaseCompressedText"  %>
    <!-- #Include virtual="~/Css/global.css" -->
    <!-- #Include virtual="~/Css/tabs.css" -->
    <!-- #Include virtual="~/Css/fancybox.css" -->
    <!-- #Include virtual="~/SiteArea/Css/SearchResults.css" -->
    <!-- #Include virtual="~/SiteArea/Css/Detail.css" -->

    This has served it’s purpose for years, but it’s getting very tired. Firstly it relies on a nasty ASP Includes hack. It also doesn’t allow us to do anything clever with the CSS files.

    Our frontend dev is desperate to get on to playing with SCSS, so we decided to start playing with it to see what little changes we could make to our code to get a similar implementation using SCSS.

    Here’s our first attempt:

    @import '/Css/global';
    @import '/Css/tabs';
    @import '/Css/fancybox';
    @import '/SiteArea/Css/SearchResults.css';
    @import '/SiteArea/Css/Detail.css';

    This worked for files in the same directory, but we seemed to get errors when trying to get files off the route.

    Eventually I worked out the correct syntax is to use ./ notation../

    @import './Css/global';
    @import './Css/tabs';
    @import './Css/fancybox';
    @import './SiteArea/Css/SearchResults.css';
    @import './SiteArea/Css/Detail.css';

    Which now seemed to work from an IDE, but had issues when talking to a build server. What we needed to do was add metadata to describe the compilation process for a build command to pick up.

    We opted for Gulp

    package.json

    {
        "name": "mywebsite",
        "version": "1.0.0",
        "description": "My Website dependencies",
        "devDependencies": {
            "gulp": "^3.9.1",
            "gulp-sass": "^2.3.1"
        }
    } 

    gulpfile.js

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    
    gulp.task('sass', function () {
      return gulp.src('./**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./'));
    });

    This got us the behaviour we wanted. Time to go further, could we minify the css as well?

    package.json

    {
        "name": "mywebsite",
        "version": "1.0.0",
        "description": "My Website dependencies",
        "devDependencies": {
            "gulp": "^3.9.1",
            "gulp-sass": "^2.3.1",
            "gulp-clean-css": "^2.0.9",
            "gulp-sourcemaps": "^1.6.0"
        }
    } 

    gulpfile.js

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var clean = require('gulp-clean-css');
    var sourcemaps = require('gulp-sourcemaps');
    
    gulp.task('sass', function () {
        return gulp.src('./**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(filter)
        .pipe(sass({}).on('error', sass.logError))
    
        .pipe(clean({ compatibility: 'ie8' }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('.'));
    });

    Looking good, but then we realised it was doing some compilation in areas we didn’t want it to.

    We decided to include gulp-filter to fix this.

    package.json

    {
        "name": "mywebsite",
        "version": "1.0.0",
        "description": "My Website dependencies",
        "devDependencies": {
            "gulp": "^3.9.1",
            "gulp-sass": "^2.3.1",
            "gulp-clean-css": "^2.0.9",
            "gulp-sourcemaps": "^1.6.0",
            "gulp-filter": "^4.0.0"
        }
    } 

    gulpfile.js

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var clean = require('gulp-clean-css');
    var sourcemaps = require('gulp-sourcemaps');
    var filters = require('gulp-filter');
    
    gulp.task('sass', function () {
        var filter = filters(function (file) {
            return file.path.indexOf("exclude-folder") === -1 && file.path.indexOf("node_modules") === -1;
        });
        
        return gulp.src('./**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(filter)
        .pipe(sass({}).on('error', sass.logError))
    
        .pipe(clean({ compatibility: 'ie8' }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('.'));
    });

    This seemed to work nicely. I wanted to get gulp-filter working without the function - there is a declaritive syntax, but I couldn’t get it working.

    Remeber to add node_modules to your .gitignore file.

    Describing git concepts using javascript visualizations

    2015-08-29 22:00:00 +0000

    The other day I was trying to describe some branching and merging strategies over distributed repositories to a remote coworker. Sadly I’m fairly new to complex git branching behaviour, so I had a hard time describing what I was trying to say.

    I realised the best thing to do was to try and share some diagrams. Now being clued up on javascript, and having a few minutes spare I researched to see if there is anything I could use to generate descriptive diagrams for me.

    Luckily I stumbled across Git Graph JS. It’s a really simple library for showing git concepts. Without further ado - let’s see some code.
    read more

    PCI Complience with TLS version 1.0 with Internet Explorer

    2015-05-05 22:00:00 +0000

    PCI Compliance is necessary on any site that takes credit card transactions. Trustkeeper is an example of a service you can use to scan your site and see if the site conforms to PCI (Payment Card Industry). To be PCI compliant you have to ensure with various security enhancements are present on your server.

    On Feb. 13, the PCI Security Standards Council declared that TLSv1.0 is an unsafe protocol, and now Trustkeeper deems it as a failure if you have TLSv1.0 on your site.
    read more

    How to output mustache templates in a jekyll site

    2015-03-31 22:00:00 +0000

    I was having difficulty rendering a mustache template out as a code sample.

    Here was my code sample…


    read more