Atom support for Emmet in ColdFusion .cfm and .cfc files

I’m late to the party, but I’m trying out a new editor: GitHub’s Atom. My mission when I try out a new editor is to see if I can get the following 3 items set up properly (because if I can’t the editor is unfortunately not going to work for me).

  1. Language Support for ColdFusion
  2. An Emmet package
  3. Support for Emmet functionality within a .cfm, .cfc file

Setting up Language support for ColdFusion is easy. Simply install the language-cfml package. To install a package in Atom:

  • From the Atom editor menu, navigate to Atom -> Preferences
  • Click the Install button
  • Type language-cfml in the Search Packages field and click the Packages button
  • Click the Install button for the language-cfml package

Setting up Emmet is easy. Simply install the emmet package (see package install instructions above).

Setting up Emmet support for ColdFusion .cfm and .cfc files requires editing your Keymap. This step was derived from the emmet-atom Tab key documentation

  • Open the Keymap file (keymap.cson): Atom > Keymap...
  • Add the following to the keymap.cson file (proper indention counts):
'atom-text-editor[data-grammar="text html cfml"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

Helpful links and definitions of Raspberry Pi related hardware / software for the absolute beginner

Raspberry Pi First Boot
Here is the first boot up of my Raspberry Pi

The Raspberry Pi is basically a $25 computer (Model A) or a $35 computer (Model B) meant to encourage children to learn programming by providing an affordable computing platform that can drive all kinds of projects from controlling robots to running a media center on a tv. I am not a hardcore programmer so I bought one to tinker and encourage my inner programming child.

I bought the Model B because it has 512MB Ram, 2 USB ports, and an ethernet port. The model A has 256MB Ram, 1 USB port, and no ethernet port.

So far I have managed three tasks.

  1. I have booted up with a copy of Raspbian “Wheezy”, surfed the internet and installed a mail client.
  2. I have booted up with a copy of Raspbmc, added some music, and took XBMC for a test drive.
  3. I have installed XBMC Commander to my iPhone and controlled my Raspbmc installation by playing music, videos, etc. I had varying degrees of success with this task.

Rather than copy other people’s fine tutorials I am going to provide definitions of the different technologies, as defined at their site(s). Below the definitions are link(s) to the site(s).

Raspberry Pi

What is (a) Raspberry Pi

“The Raspberry Pi is a credit-card sized computer that plugs into your TV and a keyboard.”

Raspberry Pi Site

Task 1: Raspbian

What is Raspbian

“Raspbian is a free operating system based on Debian optimized for the Raspberry Pi hardware.”

Wheezy is the recommended starting distro. There is also a link below to a distro that uses the MATE desktop environement instead of the LXDE desktop environment that “Wheezy” uses.

Raspbian “wheezy”

Bootable Raspbian “Pisces+MATE” Image by Mike Thompson

Task 2: Raspbmc

What is Raspbmc?

“Raspbmc is a minimal Linux distribution based on Debian that brings XBMC to your Raspberry Pi.”

Raspbmc Site

Task 3: XBMC / XBMC Commander

What is XBMC?

“A Complete media center solution for Windows, OSX, Linux, and more!”

XBMC Site

What is XBMC Commander?

“XBMC Commander is a remote control for the iPad especially designed to interact with XBMC, one of the most advanced open source media centers out there.” (There are iPhone and Adroid versions as well)

XBMC Commander Site

App Store Software – What the Description Really Means

I buy a lot of software.  A LOT OF SOFTWARE.  The following is my tongue-in-cheek assessment of App Store software descriptions.

Gorgeous / Stunning Graphics

We have a graphic artist.  We think her work is awesome.  Lots of companies have awesome graphic artists.  Many times they are pretty much as awesome.

Feature Rich

Our app is really complex.  We put a whole bunch of stuff into it.  Unfortunately the Pareto principle (80/20 Rule) likely applies.

Minimalist

Our app is really sparse.  We <3 Getting Real.  This may or may not be good for you depending on what we consider essential.

Our most awesome version to date

Our last version had bugs / was less than awesome.

Frequent Updates

See “Our most awesome version to date”.

Winner of the Blah Blah Blah Award

If it’s not an Oscar or a Grammy… well ok, if it’s not an Oscar be suspicious.

Using not() in jQuery to exclude a member of a class

This is just a quick tip I thought I throw out there. We have an application that applies a fade to a .alert class on all its pages. We have 2 pages that need to not fade one particular alert. Here is one way it can be handled.

  1. Add a class of .notfade to the alert that needs to stay put and not fade out:
    <div class="alert alert-info nofade"></div>
  2. Place the following in $().ready(): $(".alert").not(".notfade")fadeOut(7000);

Saving to a database with ColdFusion using jQuery

A commenter asked me how to extend a previous jQuery post to perform the database save via ColdFusion.  It is REALLY easy (and please keep in mind this is meant to be a SIMPLE example, not production code).  From the jQuery side my example only required the following code to ship the data off to ColdFusion:

function fSave(){
you=$("#you").val();
// Try to save
$.get("adduser.cfm?"+"you="+you , function(data){
// Result
alert(data);
window.location=location.href;
});
}

The adduser.cfm page then validates and inserts the data and returns a success or failure message.

See it hereGet it here.

Use jQuery to enable submit button and set form action

I recently had to do a quick bit of coding to only accept data from a form if JavaScript was enabled.

This example starts with a form that has no action and a disabled submit button.  When jQuery’s .ready() fires though it enables the submit button and attaches the appropriate action.

Please note the example file is in ColdFusion so your mileage may vary slightly for your own use.

See it here | Get it here.

Using jQuery style a cftooltip span

It’s not hard to figure out how to style the box that pops up when using cftooltip.  It is controlled by the .yui-tt class.

/* Tool tip styling */
.yui-tt {
color: #444;
font-size:110%;
border: 2px solid #1C64D1;
background-color: #eee;
padding: 10px;
width:250px;
cursor:help;
}

But how do you style the text that is triggering the tooltip?  cftooltip is going to generate a span around your text with the id of cf_tooltip_999999999 (where 999999999 is some random number).  I didn’t want to add another span to the mix to provide styling so I turned to jQuery for a simple, quick solution.

In the css file I added a class:

.terms{
color:#168FC0;
border-bottom:1px dashed #168FC0;
text-decoration:none;
margin-bottom:10px;
font-weight:bold;
}

In the jQuery .ready() function I added this line:

$("[id^=cf_tooltip_]").addClass("terms");

The result is that the text which triggers all cftooltips is now controlled by the .terms class.