Log(Frac)  

Welcome

My contact information:  e-mail  | GeekList  | GitHub  | Google+  | LinkedIn  | Twitter

An Example of How to Use Sublime Text 2

Updates of this document

Update of 2012-09-17

  • Added two syntax highlighting packages.

Update of 2012-09-12

  • Added “Element Finder” as a package I might install in the future.

Updates of 2012-09-08

Introduction

The present tutorial show how I use Sublime Text 2. It is based on the following sources:

Why Sublime Text 2

  • It has the most convenient block selection and edition feature I know. The second best is the one of jEdit.
  • Configuring a project is very easy, with a single sublime-project file. The folder structure that is visible on your left-side bar can be configured freely and independently of the actual structure of your project folder. You can even display folders that are located outside of your project.
  • It seems to have many useful packages, although the only one I have used so far is the Markdown Preview package.
  • Text and code autocompletion is very clever and intuitive, simply based on the words you have previously entered in your file (it is probably extensible with language files, but I haven’t felt the need of them yet)
  • The search tool is very powerful as well, and cannot be more intuitive. As an example, the search bar has its own undo history, which can be controlled with the same keyboard shortcuts as the the text editor: Ctrl-Z and Ctrl-Y!
  • The user inteface is extremely fluid: no annoying glitch or halt, in comparison to some Integrated Development Environments (IDEs).

Here is a good video review of Sublime Text 2 (made by Shawn McCool):

Download and installation

Follow the instruction on the Sublime Text website.

The Soda Theme

Motivation

I don’t like the default dark background.

Installation

Follow the installation instructions on the Soda Theme page.

Activation and Option Configuration

Follow the activation instructions on the Soda Theme page.

My user settings (very much inspired by Mark Conell’s Sublime Text 2 Configuration):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "auto_complete_selector":             "source, text",
  "color_scheme":                       "Packages/User/Espresso Soda.tmTheme",
  "draw_white_space":                   "selection",
  "font_size":                          16,
  "highlight_line":                     true,
  "save_on_focus_lost":                 true,
  "soda_classic_tabs":                  true,
  "tab_completion":                     true,
  "tab_size":                           2,
  "theme":                              "Soda Light.sublime-theme",
  "translate_tabs_to_spaces":           true,
  "trim_trailing_white_space_on_save":  true
}

You also need to download and install the syntax highlight colour schemes in order to use Soda Light.sublime-theme.

The Sublime Package Control

Motivations

I need it to install the Markdown Preview package (see next section).

I will probably need to install other packages as well in the future.

Installation

Follow the instructions on the installation page.

Note that the console can also be opened using the menu View –> Show console.

Important: you need to restart Sublime Text 2 to finish this installation.

The Markdown Preview Package

Motivation

I need it to compile my Markdown files to HTML and to send the result to my favorite browser.

Prerequisite

The Sublime Package Control must be installed (see previous section).

Installation

Follow the installation instructions on the Sublime Text 2 Markdown Preview page:

  • Press cmd+shift+P
  • Select Package Control: Install Package
  • Look for Markdown Preview and install it

Usage

  • Open a Markdown (.md) file
  • Press Shift-Cmd-P
  • Select Markdown Preview: current file in browser.

The Zen Coding Package

Motivation

This package allows to write HTML code more easily.

Prerequisite

The Sublime Package Control must be installed.

Installation

  • Press cmd+shift+P
  • Select Package Control: Install Package
  • Look for ZenCoding and install it

Usage

Video

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

The DocBlockr Package

Motivation

This package makes writing JSDoc comments (including in Coffeescript) and PHPDoc comments a breeze.

Prerequisite

The Sublime Package Control must be installed.

Installation

  • Press cmd+shift+P
  • Select Package Control: Install Package
  • Look for DocBlockr and install it

Usage

The HexToASCII Package

Motivation

I’m often looking for an ASCII value.

Prerequisite

The Sublime Package Control must be installed.

Installation

  • Press cmd+shift+P
  • Select Package Control: Install Package
  • Look for HexToASCII and install it

Usage

The simplest method is probably to highlight a text or value and use the context menu.

Syntax Highlighting Packages

Motivation

I’m programming in these languages.

Prerequisite

The Sublime Package Control must be installed.

Installation

Install the CoffeeScript and SASS packages:

  • Press cmd+shift+P
  • Select Package Control: Install Package
  • Look for one of these packages and install it
  • Repeat this procedure for all other packages

Usage

The simplest method is probably to highlight a text or value and use the context menu.

Other Useful Packages

The community Sublime Packages are listed here: WBond.net.

I might install these packages at a later time:

Configuration of Projects

Follow these instructions from the official documentation of Sublime Text 2

How to Check the Availability of CDN-Hosted Files

The author of the article 9 jQuery Mistakes you Shouldn’t Commit recommends to have a local fallback for each CDN-hosted file. It shows us an example for jQuery, which involves testing for the existence of window.jQuery in JavaScript:

1
2
3
4
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')
</script>

The present article shows you how to do the same test for other CDN-hosted packages.

jQuery UI

According to the jQuery Howto blog:

1
2
3
if($.ui && $.ui.version) {
    // jQuery UI is loaded
}

The CDN-hosted version of jQuery UI can be found here.

jQuery Mobile

1
2
3
4
// todo test
if ($.mobile) {
    // jQuery Mobile javascript loaded
}

The CDN-hosted versions of jQuery Mobile can be found here.

jQuery i18n

I couldn’t find any CDN-hosted version of i18n. In any case, here is how you can check whether this package is loaded:

1
2
3
4
// todo test
if ($.i18n) {
    // jQuery i18n loaded
}

jQuery qTip

I couldn’t find any CDN-hosted version of qTip. In any case, here is how you can check whether this package is loaded:

1
2
3
4
// todo test
if ($.qtip) {
    // jQuery qTip loaded
}

jQuery Tools

1
2
3
4
// todo test
if ($.tools) {
    // jQuery Tools loaded
}

The CDN-hosted version of jQuery Tools can be found here.

ExtJs

1
2
3
4
// todo test
if (Ext) {
    // ExtJs loaded
}

The current CDN-hosted version of ExtJS can be found here.

What About CSS Files?

If you use a CDN-hosted CSS file and want to use a local fallback for it, you may use this solution (StackOverflow).

How to Test Whether a Module Exists in Erlang

One solution consists in calling the module_info/0 function, which is available in each module. Any raised exception is caught and interpreted as a negative answer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
%% @doc Test whether a module exists
%% @spec module_exists(module()) -> boolean()
module_exists(Module) ->
    case is_atom(Module) of
        true ->
            try Module:module_info() of
                _InfoList ->
                    true
            catch
                _:_ ->
                    false
            end;
 
        false ->
            false
    end.