Brygg eget IPA hemma

Jag har nu påbörjat min första IPA (Indian Pale Ale).
Det är enkelt att göra hemma i köket och det behöver bara stå sedan i vanlig rumstemperatur i några veckor. Jag köpte mitt första kit från http://olkassen.se
Ska bli spännande att se hur bra det blev om fyra veckor då det kan avnjutas.

Se min film om hur jag gjorde här:
https://youtu.be/G-UbbWB2Qfs

Grunt - Get started

 - Install Node Package Manager (npm)
 - Open Nodejs Command Prompt (as admin) and go to folder of your project!
 - Create a file in root of your project called package.json that looks like:

{
 "name": "Pers-FrontEndStuff",
 "version": "0.1.0",
 "devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
 }
}

 - Make a file in root of your project called Gruntfile.js that looks like:

module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: ['static/js_grunt_src/scriptsA.js', 'static/js_grunt_src/scriptsB.js'],
dest:'static/js_grunt_src/_scripts.js'
}
},
uglify: {
static_folder: {
files: {
'static/js/scripts.min.js': ['static/js_grunt_src/_scripts.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
};

 - Install Grunt by following http://gruntjs.com/getting-started, basically:
npm install grunt --save-dev
 - Install each plugin you want like concat (merge js-files together into one) and uglify (minification of js-file) jshint (js-file validation), like:
npm install grunt-contrib-concat
npm install grunt-contrib-uglify
npm install grunt-contrib-jshint
 - Now you can run each task (like the concat task) with command:
grunt concat
 - Run 2 tasks with command:
grunt concat uglify

Node.js, Node Package Manager (NPM) and Bower

Snabb guide vad som behövs för att installera och komma igång med Bower med hjälp av Node.js och Node Package Manager (NPM) i Windows.

Börja med att installera GiT från:
http://git-scm.com/download/win

Se till att GiT finns i din PATH genom att högerklicka på "Den här datorn" i utforskaren och välja "Egenskaper".
På Windows 7 finns länken "Ändra inställningar" en bit ner till höger på det fönster som öppnades.
När du klickar på den länken öppnas ett nytt fönster och där väljer du fliken "Avancerat" och sedan klickar du på knappen "Miljövariabler" (Environment variables).
Leta upp PATH under antingen användarvariabler eller systemvariabler och lägg till sökvägarna för GiT (kontrollera att de stämmer på just din dator) efter de sökvägar som eventuellt redan finns där:

C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd


Installera sedan Node.js från:
http://nodejs.org/download/

Skapa en testmapp någonstans på din dator.
Öppna Windows kommandotolken eller PowerShell och ställ dig i din nya testmapp.
När du installerade Node.js så inkluderades Node Package Manager så med hjälp av dess kommando npm kan du nu installera Bower.

npm install -g bower

Skapa en ny fil din testmapp som heter bower.json och som innehåller följande:

{
  "name": "my-project"
}

Nu kan du exempelvis installera jQuery via kommandot:

bower install jquery --save

Flaggan --save betyder att den även lägger till och sparar denna referens i bower.json.

Tips på var du kan läsa mer.

Returnera innehåll som fil i MVC

För att returnera en fil för nedladdning i MVC, antingen genom att returnera en fil på disk eller ett textinnehåll i en variabel, så gör man bara en Action som ser på följande vis.
Sen kan man själv variera mimeType beroende på vilken typ av fil det är såklart.

 public FileContentResult DownloadFile()  
 {  
      string fileName = "minfil.txt";  
      byte[] doc = System.IO.File.ReadAllBytes(@"C:\path\...\" + fileName);;  
      //byte[] doc = Encoding.UTF8.GetBytes(myStringVariable);  
      string mimeType = "text/plain";  
      Response.AppendHeader("Content-Disposition", "attachment; filename=" + fileName);  
      return File(doc, mimeType);  
 }  

Simpel autocomplete funktionalitet - jQuery

Tänkte visa hur jag gjort en simpel variant av autocomplete som man kan använda där man vill kunna välja bland ett antal förutbestämda värden.

_searchTextBoxControlId = ID på textfältet där användaren ska skriva sitt sökord.
_tagAutoCompleteListId = ID på den DIV-tagg som agerar "behållare" för alla värden som användaren kan välja bland. CSS på denna bör vara "display:none" initialt.
showMessage() är en valfri metod där man kan skriva ut info till användaren, t.ex. i en informationsruta.

Kod att köra vid sidladdning:

 var initTagAutoComplete = function() {  
 $.ajax({  
  type: 'POST',  
  url: '/your/url/to/fetch/arrayofstrings',  
  dataType: 'json',  
  beforeSend: function (jqXhr, settings) {  
      showMessage('Initilizing autocomplete...');  
  },  
  success: function (data, textStatus, jqXhr) {  
      //data should be expected to be returned as ['astring', 'anotherstring', 'yetanotherstring', ...]  
      $(_tagAutoCompleteListId).empty();  
      $.each(data, function(idx) {  
       $(_tagAutoCompleteListId).append('<div class="autocomplete-item"><a data-autocomplete="' + idx + '" href="#" onclick="event.preventDefault;$(\'' + _searchTextBoxControlId + '\').val(\'' + data[idx] + '\');$(\'' + _tagAutoCompleteListId + '\').fadeOut(\'slow\')">' + data[idx] + '</a></div>');  
      });  
      showMessage('');  
  },  
  error: function (jqXhr, textStatus, errorThrown) {  
      showMessage('Technical error!');  
  }  
 });  

Kod som knyts till texfältet för sökning:

 $(_searchTextBoxControlId).keyup(function (event) {  
  var searchWord = $(_searchTextBoxControlId).val();  
  $(_tagAutoCompleteListId).fadeIn('slow');  
  $('a[data-autocomplete]').each(function (idx) {  
      $('a[data-autocomplete="' + idx + '"]').parent().hide();  
      var tagValue = $('a[data-autocomplete="' + idx + '"]').text();  
      if (tagValue.toLowerCase().indexOf(searchWord.toLowerCase()) == 0) {  
       $('a[data-autocomplete="' + idx + '"]').parent().show();  
      }  
  });  
 });  

Håll koll på versionerna

Det är ofta man behöver veta eller undersöka vilka versioner som gäller och finns tillgängliga för olika plattformar och ramverk.
Här är några bra länkar att ha koll på som hjälper till:

• .Net Framework Versions
• SQL Server versions
• EPiServer versions

Skapa iframeinnehåll dynamiskt med Javascript

Denna kodsnutt visar på hur man på ett enkelt sätt kan skapa en iframe med javascript, som i sin tur skapar upp HTML-dokumentet som ska visas i iframen istället för att länka till en befintlig sida.
Visar dessutom hur man t.ex. kan lägga till en scripttagg i den skapade iframesidan.

 <div id="my-iframe-container"></div>  
 <script>  
 var iframe = document.createElement('iframe');  
 iframe.width = '539px';  
 iframe.height = '380px';  
 iframe.scrolling = 'no';  
 var html = "<!DOCTYPE html>\n<head>\n<title>Test</title>\n</head>\n<body>\n";  
 html += "<div>Hello World!</div>";  
 html += "\n</body>\n</html>";  
 document.getElementById('my-iframe-container').appendChild(iframe);  
 iframe.contentWindow.document.open();  
 iframe.contentWindow.document.write(html);  
 iframe.contentWindow.document.close();  
 var headTag = iframe.contentWindow.document.getElementsByTagName('head')[0];  
 var s1 = iframe.contentWindow.document.createElement("script");  
 s1.type = "text/javascript";  
 s1.charset = 'UTF-8';  
 s1.async = true;  
 s1.id = 'another-script';  
 s1.src = 'http://mydomain.com/another.js';  
 headTag.appendChild(s1);  
 </script>