Random musings

    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

    Is it best to render my templates on the server or the client?

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

    A question that I sometimes get asked is “Should I render my templates on the client or the server?”. The trick answer is “Both”.

    The best thing I’ve done in the past year is to make some code that would render my templates on the server in exactly the same way that they would be rendered if they happened to be on the client as well. Why is this? Well firstly - the most important thing for any application is …
    read more