Category Archives: Programming

Using Notepad++ to Easily Compile LESS CSS Files

Posted on by
5

Recently, I decided that I wanted to use LESS to easily generate CSS files, but I also wanted to compile these files before deploying on the web.  To accomplish this, I used Node.JS (with the LESS module) and Notepad++.  Currently, this Node.JS solution is preferred to the old Ruby compiler.  To use this setup, follow the steps below.

Installing Node.JS

To being the process, you will first need to install Node.JS.  This program basically allows you to easily use JavaScript as server-side code.  (This works with LESS because LESS is a JavaScript application.)  To begin the installation, follow these steps:

  1. Download the Node.JS installer.
  2. Run the installer with the default options.
  3. Verify that the node and npm binaries are included in the PATH by opening a command prompt and typing node. You will be given an error message if this is not available. Reboot if you see this error message.
  4. Create a directory for Node.JS modules. (I used C:\Node.JS)  This will be needed to setup your LESS module, and other modules if you choose to examine Node.JS further.

Installing the Node.JS LESS Module

Next, LESS will need to be installed.  If you are not familiar with LESS, please review their site to see the benefits of using this system instead of hard-coding your CSS files.  To install the LESS module, follow these steps:

  1. Open the command prompt.
  2. CD to your Node.JS module directory (created on step 3 above, C:\Node.JS in my case).
  3. Run this command: npm install less
  4. Take note of the lessc cmd file and its location. In my case, it is stored here: C:\Node.JS\node_modules\.bin\lessc.cmd

Create the Run Command Shortcut in Notepad++

Once the lessc.cmd file is installed, we can configure Notepad++ to compile our LESS files into CSS. Follow these steps to map Alt+F5 as a compile shortcut:

  1. Open Notepad++ and create a simple .less file. Make sure to set the encoding type to ANSI to avoid syntax error messages.
  2. Access the Run dialog box in Notepad++ by clicking Run->Run.
  3. Entering the following text into the Run dialog box (including the quotes):
    • "C:\Node.JS\node_modules\.bin\lessc.cmd" -x "$(FULL_CURRENT_PATH)" > "$(CURRENT_DIRECTORY)\$(NAME_PART).css"
    • Be sure to replace C:\Node.JS\node_modules\.bin\lessc.cmd with the location of your lessc.cmd.
    • The -x option tells lessc to output minified CSS.
  4. Click the save button.
  5. Enter a descriptive name, such as LESS Compile.
  6. Select the key combination of your choice. I used ALT+F5.
  7. Test the command on your less file.  If the command worked, you will see a new CSS file in the same directory as your less file.

Other Tweaks

It is possible to tweak this process in other ways if you do not wish to always save the CSS file in the same directory as the LESS file.  For example, you could create your own CMD, BAT, or .NET app to run the less compiler with your own options.  As always, feel free to comment with questions or additions to these steps.

Choosing a Version Control System for Individual Developers

Posted on by
Reply

Recently, I decided that I needed to set up a version control system due to the increasing number of projects I am involved in. I did manually backup old versions of code, but as you would guess this got to be pretty cumbersome and  time consuming.  While researching version control systems, I quickly learned of 2 different varieties: centralized version control and distributed version control.

Since most of my projects are done individually, I wanted a system that I could set up quickly and that didn’t require me to set up any separate server software.  This ruled out a centralized system for me (YMMV of course), since each client in a distributed system contains its own repository.  After deciding a a type of system, I had to choose which system to use. I quickly narrowed it down to the following based on Google searches:

Since I really haven’t been a big user of Subversion or CVS, I did not require a system that made that sort of migration easy (this is a big selling point for Mercurial).  This is how I decided on Git. If you are serious about checking out a version control system, I would follow a similar path and ask yourself the following questions:

  • Do I want a centralized or distributed system?
  • Are my devs, or am I, already used to a certain system (CVS or Subversion), and/or do I want to spend the time learning a new system? (Git)
  • What features do I really need from my system? (GUI, SSH vs HTTP access, authentication)

In a future article I will talk about my Git Extensions setup experience in Windows, and how it has improved the way I track code changes for my individual projects.

Additional Resources:

Tracking Down “File Not Found” Exceptions in 64-bit .NET Apps

Posted on by
Reply

So while using the Process.Start() command to start the manage-bde command-line application today, I ran into a fun issue.  Mainly, I kept getting a “System cannot find the file specified” error when trying to launch manage-bde.  To track down this error, I checked the following:

  1. Did the file exist? (Obvious question, it was in the system32 directory.)
  2. Was process.start() looking in the system32 directory? (Yep, or so I thought. I had successfully run diskpart before trying to run manage-bde.)
  3. Did I have permissions to run manage-bde? (Yep, this app was running as administrator in an elevated prompt.)

So after pulling my non-existent hair out and doing some research, I figured out that manage-bde is a x64 app while my application was a x86 app. To resolve the issue, I simply had to retarget my application to run in 64bit mode and recompile.  When the app was running in 32bit mode, any requests to %windir%\system32 were being redirected to %windir%\SysWOW64.  The link below explains this issue in more detail, and is definitely something to look out for when developing apps for 64bit versions of Windows.

As a side note, diskpart must have a version available in the SysWOW64 folder.  That would explain why I was able to run the application as indicated in step 2.

More info: MSDN Forums

Restoring Broken Pictures with Word-Generated HTML

Posted on by
Reply

When pasting a Word document with graphics to Sharepoint Designer/Expressions Web, it is advisable to test the document in IE 7 to make sure that graphics are appearing. For some reason, the markup that Sharepoint/Word creates causes issues when using documents with photos. If these are not appearing, the Word vml tags must be removed. For the record, I really don’t like designing web pages with Sharepoint, but it is great for quickly posting Word documents to the net in HTML.

If you copy Word documents to Sharepoint Designer or Expressions Web, follow these steps to remove the VML markup causing graphics to fail:

  1. First, paste your Word document into Sharepoint as normal.
  2. Select the Split or Code view to enable the source code replacement feature.
  3. Open the Replace dialog box.
  4. In the Find box, paste the following text: [<]!–[if gte vml 1(.*n)#.#vml][>]
  5. Make sure that Regular Expressions and source code are checked, and that the Replace box is blank (we will be erasing the vector graphics).
  6. Click Replace All to replace the text.
  7. Next, uncheck the Regular Expressions box, erase the text in the Find field, and paste the following: <![endif]>
  8. Click Replace All to erase the text.

One note with this method: if you use conditions elsewhere in your document, make sure that you replace each item individually instead of Replace All. This should not be needed in most cases. For more information about regular expressions, check out these sites: