Sass CSS with Compass using Grunt Not Working on Windows

My team is using AngularJS, Node.js, Grunt, Sass CSS via Compass, Yoeman, and a few other web toolsets.  The other day when running the serve process to generate the css output from Sass CSS, the css wasn’t able to generate.  It turned out that Compass was setting the permissions on the .tmp folder where it puts the CSS to a state that didn’t all the process to write the file, hence a Permission Denied error.  To fix this issue I followed the StackOverflow thread http://stackoverflow.com/questions/22596760/yeoman-error-errnoeacces-on-line-897-of-c-permission-denied which did these steps.

Open a command prompt and run the following.

  1. gem uninstall sass (if you have multiple version, select all)
  2. gem uninstall compass
  3. gem install compass --pre
  4. gem install sass --pre

Setting Up PhoneGap/Cordova for Visual Studio

It’s always a struggle to find time to invest in side projects when you work and play an active role in your kids lives.  I appreciate when installing tools is just simple and you don’t have to google “why doesn’t …. do …” or “where is…” because the instructions aren’t straight forward or are missing steps/pieces.  I found this the case with the latest phonegap instructions as of 2014-3-9.

  1. Install Windows SDK.  I’m using Windows 7.1 because I have a Win7 machine, I found SDK here.  This installed Visual Studio 2010 Express for Windows Phone (VS2010).
  2. Download PhoneGap SDK and unzip in C:\Tools.  PhoneGap SDK is on github here.
  3. In the C:\Tools\phonegap-master (you might have to drill down a bit) there will be a lib folder, and in it there are folders for the different target frameworks one of which is “windows-phone”.  As of recent the Visual Studio template .zip is not there.  I had to run a batch filed called “createTemplates.bat” which created templates for WP8 and WP7.
  4. Once you have the Visual Studio .zip file template(s), copy those to your \Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#.
  5. Open VS2010 and create a new project.  You will now see a project template as shown below.  The template name may change at some point.

image

 

The project structure will look like the following.

  • cordova – build tools
  • cordovalib – code for browser engine interaction
  • www – folder for html/js/css of your app
  • plugins – plugins for interfaces on your phone (i.e. camera, contacts)

image

Installing Node.js and Other Packages

Keeping up with technology can be a job in itself.  Learning is fun, but is quickly forgotten so writing things down can always save you time later.  This thread goes over various was of installing Node.js and other packages.

Installing Node.js

There are 2 ways in which you can install Node.js.  Node.js comes with node package manager now so it will not need to be installed independently.

Installer (recommended): Go to node.js.org and use the installer for your OS.  Run the installer.

Homebrew (Mac only): Run the command “brew install node”.  You will have to have homebrew installed.

 

Other Node packages t

Installation will use node package manager.  You can list the node modules for your node application by listing the directory of “node_modules”.

Express – web application framework for node

npm install -g express --save

NOTE: once you create a application with express (i.e. express AppName) you will have to navigate to AppName folder and run the command “npm install” to install the components defined in node’s package.json.

Yeoman – front end tool focused on scaffolding (yo), building/testing (grunt), and dependency management (bower)

npm install -g yo --save

npm install -g generator-webapp --save

coffee-script – scripting language that builds down to javascript.

npm install coffe-script --save

node-dev – a tool for node that will monitory files and auto restart the node app when a file has changed.

npm install node-dev –save

NOTE: When using this you will want to separate development dependencies from production ones.  In the package.json, you can create a “devDependencies” like so:

{
"name": "application-name",
...,
"dependencies": {
"express": "2.5.8",...
},
"devDependencies": {
"node-dev": "~0.2.2"
}
}

mocha – javascript test framework for node

npm install mocha –save

NOTE: put this in your dev dependencies

REQUIRES: request

request – modeule that simplifies the process of making http calls

npm install requets --save

Redis – open source advanced key-value store

npm install redis hiredis connect-redis --save

REQUIRES: Installation of Redis backend.  On a Mac use homebew “brew install redis”, Windows see redis.io.

connect-assets – transparent file compilation and dependency management for Node’s connect framework

npm install connect-assets --save

socket-io – simplifies the use of IO on all browsers.  See WebSockets for information on this topic.

npm install socket-io --save

AngularJS – front end web application framework dealing with models, views, collections, and events

npm install angular --save

Backbone – front end structured for web applications dealing with models, views, collections, and events

npm install backbone --save

RELATED: Marionettejs (npm install backbone.marionette --save)

ASP.NET Debugging in Visual Studio 2013 IIS Express Not Continuing

Looking at VS2013, I’m impressed with it’s speed over VS2012 not to mention that Microsoft appears to be releasing more often and taking into consideration a lot of community feedback.   Other than the quickly visible improvements, I noticed that the virtual web server would stop working when debugging was stopped in Visual Studio. To fix this open you ASP.NET project properties and uncheck “Enable Edit and Continue”.  Once this is unchecked IIS Express will run after debugging has stopped.

image