Can Of Code

Category Archives: Web

Grunt and npm

Why Grunt?

Having spent a lot of time in Visual Studio working on ASP MVC sites I hadn’t had a chance to really get my head around the new tools around managing dependencies and running build tasks because Visual Studio does a lot of that for you, with bundling and NuGet etc.

However  work dictated that I had to spend some time working on a WordPress theme which meant leaving the comforts of Visual Studio behind.

I have come to prefer Brackets as my text editor because of its simplicity and extension support. I had plugins that would minify JavaScript when saving as well as a LESS compiler which helped automate some of the common tasks but was far from perfect.

What made me investigate Grunt properly was the laborious process I was performing to make changes to the WordPress theme. At the same time I was working my way through the new Smashing Magazine’s Book “Real life: Responsive Web Design” which included an article explaining Grunt for people like me.

I already had Node installed so I was ready to have a go at grunting.

Grunting 101

In the root folder of your project you will create a few files that will keep track of what dependencies you have added to your project as well as to tell Grunt what you want it to do.

So first off you need to get NPM up and running so we can install grunt. assuming you already have Node setup all you need to do is run in a Command Prompt from within your root folder:

npm init

This will guide you through creating a package.json which tells NPM your projects dependencies. You can just keep pressing enter to power through it.

npminit

Next up we need to add Grunt as a dependencies so we can start automating. This is once again a single command

npm install grunt --save

The “–save” flag is important because it adds the dependency (Grunt) to the package.json. This means that when someone else comes along to work on your project. they just have to type “npm install” and all the project’s dependencies will get installed.

The next step is a little annoying, because unlike NPM, Grunt doesn’t have a “init” command so you have to create a new file in the root folder called “Gruntfile.js”. Your best step next is to copy the example grunt file from the grunt website or below:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! < %= pkg.name %> < %= grunt.template.today("yyyy-mm-dd") %> */n'
      },
      build: {
        src: 'src/< %= pkg.name %>.js',
        dest: 'build/< %= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

Adding useful stuff

The example above uses a Grunt task called “Uglify” which can minify your JavaScript. Before this configuration will work you will need to install the Uglify NPM Package.

npm install grunt-contrib-uglify --save

That should do it. Now you can run:

grunt

Grunt will process it’s config and proceed to run “uglify”. Its likely that the task failed because your need to edit the config to fit your project setup.

This is the basic workflow of adding Grunt tasks.

  1. Install grunt package using NPM not forgetting the –save flag
  2. Add task to initConfig. An example of the config is almost always included in the readme of the package
  3. Tell Grunt to load the NPM package with
    grunt.loadNpmTasks("package-name");
  4. Add the task to the default registered task by adding it’s name (“uglify”) into the array [‘task1’, ‘task2’]
    grunt.registerTask('default', ['uglify','package-name']);

Get Grunting

Once you get the hang on of it, these tools can be extremely powerful. After a few hours of messing around I was able to:

  • Copy the files I wanted to deploy into a build folder
  • Combine and minify the JavaScript
  • Optimize images in the project
  • Deploy the output using SSH to the test server
  • Automate the whole process when a file in the source directory changes!

I will follow this blog post with a walk through of the Grunt file that handles all of this.  I hope this has inspired you to go and try out Grunt and NPM and in no time at all your be able to tell me all the cool things I have naively omitted.

 

Posted in Web | Tagged , , , | Leave a comment

ASP Entity Framework Many to Many not working

i’ve been working on a simple book website using ASP MVC.  I have a Book class and an Author class. Each book can have one or more Authors and each Author can have one or more books.

Many to Many incorrect in the database

The first issue I came across was that the database was being created without a lookup table as should be the case with a many to many relationship. instead it added a bookId to the Author table. This would mean that duplicate author records would exist for authors with more than one book.

To fix this (thanks to @TheRealDuckboy) I just needed to add a List of books to the Author object! I only had a Author list in the Book object which confused Entity Framework.

Correct database layout, hurrah?

After solving my borked many to many relationship I stumbled across my next issue. It was time to list the authors of the Book object in my view. The Book’s Authors property was null. After checking the database I saw that the data was there and the relationship was valid.

The problem was with how I represented the collection in the Model.  I naively bashed out the following:

 

public List<Book> Authors { get; set;}

 

After some googling i saw that people were using a ICollection for their lists. Its always a good idea to use a generic interface so more fool me.

 

public ICollection<Book> Authors { get; set; }

 

So I ran “update-database” to do the code first migration and started running. The Authors property was still null!

What I then found was that I was missing the “virtual” keyword.

 

public virtual ICollection<Book> Authors { get; set; }

 

It worked! This Stackoverflow answer suggests that the collection can’t be lazy loaded (loaded when first accessed) unless its virtual.

Posted in Web | Tagged , , | Leave a comment

Revisiting the web

Over the last few years I have been focusing on C# and a little Java but after finally getting Uni out of the way i have decided to have a look back at web development.

Browser Support

One of the things that I found to be a useful discovery was the tools available in Firefox. A good example is if you right click on the page and click “Inspect Element(0)” it will bring up a panel telling you the css styles that have been applied. Prehaps the best part of this tool is that you can untick each CSS rule and it will show the effect on the page.

 

Expression Web 4

This is the first time i have not reached for Dreamweaver as the IDE for web but instead i have been trying out Expression Web 4. I admit to being surpised by Expression Web considering that all i was excepted was FrontPage with a new name. A useful tool that comes with the Expression Studio is the SuperPreview which allows you to view the site in multiple diffrent browsers so you can compare the diffrence.

Its rather frustrating that the only remote source control that was supported from what i could tell was using Microsoft’s very own Team Foundation Server.

 

TurnKey Linux

TurnKey linux

Source: http://www.linuxjournal.com/files/linuxjournal.com/ufiles/TurnKey%20WordPress-2010-04-27-10-35-49.png

One of the first things I did was to sort out a local server so I didnt have to keep uploading to the web. I wanted to avoid using XAMPP because I didnt really want it running on my laptop. The solution I went for was running a virtual machine in VirtualBox running a stripped down linux LAMP setup. Firstly i tried Ubuntu server but gave up on that while trying to setup a network conneciton. I then tried TurnKey and was rather impressed, I downloaded the LAMP system image and within minutes I had an up and running web server and the best part is that it only uses 1GB of storage space which is ideal considering im using  a rather limited 128GB SSD.

Also by only running two commands (thanks to admins-eHow ) I was able to hook the server to a VPN.

 

I will be sure to write a post in the near feature about my exprience with using a PHP framework for the first time.

 

 

 

Posted in Web | Tagged , , , , , , | Leave a comment