Hur nya madr.se byggdes

2012-07-22 / 3 min.

Madr.se har varit det ständiga offret när jag vill lära mig något nytt. Den nyaste versionen av sajten är inget undantag.

Tack och adjö, Posterous

Jag har verkligen ingenting ont att säga om Posterous då det verktyget hade mycket positiv inverkan på mitt bloggande under två år. Jag känner dock att jag saknat möjligheten att öppna huven och skruva på (läs: pilla på) saker.

Alla gamla inlägg som tidigare låg på Posterous är kvar på sina gamla permalänkar, främst eftersom jag inte har tillåtelse att sätta den här sajten till huvuddomänen då det kräver åtkomst till CNAME.

Jag är inte beredd att gå tillbaka till ett eget webbramverk från scratch som driftas på en egen server i vardagsrummet: snarare vill jag välja något som är utanför min konfortzon och som verkar vara riktigt häftigt och väl igenomtänkt.

Utvecklat i Django

Därav föll mitt val på Django då dess slogan The Web framework for perfectionists with deadlines är alldeles för provocerande för att motstå. Python är ingenting jag använt till stor utsträckning, men det är ett språk som jag alltid haft en bra magkänsla inför.

Att få ihop grundläggande bloggfunktionalitet var busenkelt. Helt på köpet fick jag ett minimalt, men ändå funktionsdugligt CMS för att skriva och hantera inlägg.

Tre saker jag gillar med Django:

Drift i Heroku och Amazon S3

Heroku är något jag använder mycket såväl i jobbet som för privata projekt, och en av anledningarna till att den här sajten blev av är för att Heroku sedan en tid stödjer system utvecklade i Python.

På Heroku använder jag följande addons:

För att inte lasta Heroku mer än nödvändigt ligger mina statiska filer (CSS, JavaScript, bilder) i Amazon S3 där jag enkelt kan hantera expires-headers och annat.

Mobile first

I dagar där följsam design är poppis är det en yrkesskyldighet att applicera media queries. Jag har dock även valt att köra Mobile first genom att applicera följande principer:

Kort om kod

Jag validerar och lintar sajtens frontend-kod med Grunt. Grunt används även för att ladda upp filer till Amazon S3. Här är min Gruntfile:

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    aws: grunt.file.readJSON('../../../Dropbox/madrse/grunt-aws.json'),
    s3: {
      options: {
        key: '<%= aws.key %>',
        secret: '<%= aws.secret %>',
        bucket: '<%= aws.bucket %>',
        access: 'public-read',
        headers: {
          // Two Year cache policy (1000 * 60 * 60 * 24 * 730)
          "Cache-Control": "max-age=630720000, public",
          "Expires": new Date(Date.now() + 63072000000).toUTCString()
        }
      },
      dev: {
        options: {
          maxOperations: 20
        },
        upload: [
          {
            src: '../../../Dropbox/madrse/assets/*.png',
            dest: 'assets/'
          },
          {
            src: 'madrse.appcache',
            dest: 'madrse.appcache'
          },
          {
            src: 'admin/*',
            dest: 'admin/'
          },
          {
            src: 'img/*.png',
            dest: 'img/'
          },
          {
            src: 'dist/*',
            dest: 'dist/'
          }
        ]
      }
    },
    csslint: {
      strict: {
        src: ['dist/design.css']
      }
    },
    devserver: {
      "options": {
        "port": 8888
      },
      server: {}
    },
    less: {
      development: {
        files: {
          "dist": "src/less"
        },
        files: {
          "dist/design.css": "src/less/*.less"
        }
      },
      production: {
        options: {
          cleancss: true
        },
        files: {
          "dist/design.min.css": "src/less/*.less"
        }
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'dist/app.js',
        dest: 'dist/app.min.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-csslint');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-devserver');
  grunt.loadNpmTasks('grunt-s3');
  
  grunt.registerTask('deploy', ['less:production', 'less:development', 's3']);
  grunt.registerTask('test', ['csslint']);
  grunt.registerTask('default', ['test']);
};

Gällande CSS använder jag senaste kopian av site.less, en gist jag ständigt uppdaterar och förbättrar.

Koden i produktion är minifierad enligt rekommendation, men för den som är intresserad finns även orginalen uppladdade på S3:

Tack

Ära den som äras bör. Jag skapade den här sajten utifrån några principer, de främsta här nedan:

~