BarCamp on Sublime Text 3

Sublime Text 3

Sublime Text 3

In order to try to improve our skills and share knowledge within the team we are currently trialling weekly, informal ‘BarCamps‘ within the team. Today we had our second, focusing on the code editor Sublime Text 3, which is currently in beta.

I’ve been using Sublime Text for a couple of years now, having moved from Blumentals WeBuilder, which I’d been using for years. I loved WeBuilder, I created loads of code snippets to use in it, I even contributed to developing colour themes for the editor. But I just found that Sublime Text was a more efficient editor for me.

At our BarCamp this afternoon I went through the following:

Install

Available for Linux, Mac and Windows. Download from Sublime Text website. Version 2 is stable; version 3 is in beta.

Package manager

Will Bond has created a tremendous package manager, and curates an impressive repository of packages (add-ons, extensions) for Sublime Text 2 and 3.

Recommended packages

With package manager installed, either go to Preferences > Package Control > Install Package, or Shift+Ctrl+P and type Install.

  • Alignment
  • BracketHighligher
  • ColorPicker
  • DevDocs
  • Emmet (see documentation and screencast by Chris Coyier)
  • jQuery
  • SidebarEnhancements
  • SublimeCodeIntel
  • SyncedSideBar
  • Tag
  • Tomorrow Color Schemes
  • View In Browser

User preferences

One powerful feature of Sublime Text is being able to set user preferences. Preference > Settings — Default will show you all the options available. You can then copy and paste those into Preference > Settings — User to edit them.

A few of my favourite options:

  • “bold_folder_labels”: true,
  • “draw_white_space”: “selection”,
  • “fade_fold_buttons”: false,
  • “highlight_line”: true,
  • “line_padding_bottom”: 1,
  • “line_padding_top”: 1,
  • “show_encoding”: true,
  • “show_line_endings”: true,
  • “tab_size”: 4,
  • “translate_tabs_to_spaces”: true

Keyboard shortcuts

Scotch has a useful page showing Sublime Text keyboard shortcuts. Print pages 2–4 for an easy-to-use cheat sheet.

Create snippets

Code snippets are a really useful way of adding blocks of regularly-used code, and mapping them to keywords which are triggered when you hit the tab key.

There’s a really useful tutorial on Hongkiat.com: working with code snippets In Sublime Text that will get you up-and-running.

Q & A

Two questions that were raised during the session we found answers for:

  1. Can you find a PHP function in any file within a project?
    A combination of SublimeCodeIntel package (Alt+click will open the file in the current project that defines the function), and Shift+Ctrl+F allows you to search within the current project for that function name.
  2. How can I ensure that all .inc files are shown with PHP syntax highlighting?
    Open a .inc file, then View > Syntax > Open all with current extension as…

More tips

Sign up for the Sublime Text Tips email newsletter, or simply browse the site for more top tips on what many regard as today’s best text editor.

If you’ve not already tried it, do give it a try. It’s free to try, USD $70 (approx. GBP £42) to buy.

Advertisements

Using Trello from within Microsoft Outlook 2010

Trello board

Trello board

If you’ve been following this blog for a while then you’ll know that almost a year ago we moved our Agile board to Trello. It has been a great success.

Last year the University also moved both our email and meeting scheduling software to Microsoft Exchange. I’ve been a fan of Outlook since about 2000, first synchronizing it with  my Psion PDAs and then with a Windows Mobile smartphone. I do pretty much all my planning in Outlook. Or at least I did, until I discovered Trello.

So my question was: how can I use Trello within Outlook? Then I remembered Outlook’s little-used shortcuts feature.

1. Open up a Trello page in your browser. It doesn’t really matter which browser. I’m using Google Chrome 23 beta for speed.

2. Now drag a bookmark onto your desktop from the address bar .

Browser shortcut on desktop

Browser shortcut from Trello page on PC desktop.

3. Next, open up Microsoft Outlook and click on the Shortcuts icon in the left-hand navigation pane; it has a shortcut key of Ctrl+7.

Shortcuts sits beneath Mail, Calendar, Contacts, Tasks, Notes, and Folder List

Shortcuts sits beneath Mail, Calendar, Contacts, Tasks, Notes, and Folder List

4. Now drag the icon from your desktop onto the label “Shortcuts”. It won’t work unless you drop it right on the word “Shortcuts”.

5. Next, right-click the new icon (which will by default show the URL) and select “Rename Shortcut” from the context-menu, to give it a more user-friendly name.

Adding a shortcut to the Outlook shortcuts list.

Drag the shortcut onto the Shortcuts label, then right-click to rename it.

6. Click on the new shortcut link. Now you have Trello displaying within Microsoft Outlook. You can have as many shortcuts as you like, to as many boards as you like but remember you can always change boards within Trello too.

As far as I can see (using findmebyIP.com) it’s using the Microsoft Internet Explorer 7 engine to render the page, so obviously if FogCreek Software stop supporting IE7 in Trello then this top tip will stop working.

Trello being displaying within Outlook 2010

Trello being displaying within Outlook 2010

Update

If you want to take the Outlook/Trello integration even further you can now use Emello, which allows you to send emails directly to lists within your Trello boards. I’ve not used the service myself, but it certainly looks useful should you require that functionality, and the website looks slick and professional.

Which browsers do you support?

Five web browsers

Chrome, IE, Opera, Safari and Firefox

I’m currently working on a document of guidelines for our web team and web developers. Something that I’ve been asked to include is to indicate which browsers we support.

Digging around, for example, Yahoo! have their fine Graded Browser Support page which lists specific version numbers of various browsers. Google Apps, on the other hand, supports

“the current and previous major releases of Firefox, Internet Explorer, and Safari on a rolling basis. Each time a new version is released, [they] begin supporting that version and stop supporting the third most recent version.”

What do you folks do? Do you have browser support guidelines, either written down or not? Where do you draw the line (do you still support IE7, for example)? What are your criteria for what you support and don’t support?

And what about mobile devices?

I’d love to read your thoughts about this.

My favourite Web developer add-ons for Firefox

Mozilla released Firefox 4.0 on Tuesday—it has already been downloaded 16,041,437 times; that’s about 92 downloads a second!— and there is a lot to commend it for: a clean look, that’s not too far away from both Google Chrome and Internet Explorer 9 and it’s much faster too.

While I use Google Chrome for most of my day-to-day browsing I still use Firefox for Web development, largely thanks to the number of mature add-ons available for it. These are my favourites:

1. Firebug

20110324-firefox4-firebug

Firebug is the number one reason that I use Firefox. Sure, Chrome and Internet Explorer have their own Web developer tools but none of them come close to Firebug for its awesomeness.

That said, I recently tried out Opera Dragonfly and I was really impressed.

2. Web Developer

20110324-firefox4-webdeveloper

A close second is Chris Penderick’s Web Developer toolbar that adds all sorts of useful tools to Firefox: disable CSS, outline headings and tables on the page, show HTML classes and IDs, show image sizes as overlays on the images. Brilliant!

3. ColorZilla

20110324-firefox4-colorzilla

The most useful feature of ColorZilla for me is the eyedropper tool that allows me to sample a colour on a Web page and find out the RGB or HEX value for it.

4. HTML Validator

20110324-firefox4-htmlvalidator

HTML Validator does exactly what it suggests that it does: it shows HTML validation information in the Firefox add-on bar (what used to be the status bar) at the foot of the browser viewport.

It’s very useful for at-a-glance error checking; obviously, recognising that HTML validation is an ideal and a guide rather than a hard-and-fast rule.

5. Wappalyzer

20110324-firefox4-wappalyzer

Wappalyzer is a new add-on for me that adds to Firefox the functionality that I’ve been enjoying with the Chrome Sniffer extension in Google Chrome.

It shows you in the AwesomeBar what technologies are being used, e.g. JavaScript framework, server type, content management system, web statistics, etc.

6. RSS Icon in Awesombar

20110324-firefox4-rssiconinawesomebar

For some unfathomable reason Mozilla has removed the RSS icon that appears in the AwesomeBar when you visit a page that has an RSS autodiscovery tag, such as the University homepage.

That’s where RSS Icon in Awesombar (sic) comes in. It… well, puts an RSS icon in the AwesomeBar.

7. Tab Mix Plus

20110324-firefox4-tabmixplus

There are some options within Firefox that I still cannot believe are missing. There is still no way to, by default, open your homepage when you open a new tab.

Tab Mix Plus allows you to set this option—and a whole lot more, like being able to duplicate existing tabs, or protect or lock tabs so that you don’t accidentally close them.

Over to you…

What are your favourite Firefox add-ons, for Web development or otherwise?

Xobni for Outlook

Outlook 2007 with Xobni sidebar on the right

Outlook 2007 with Xobni sidebar on the right

The University is currently in the process of moving to a replacement service for staff email and calendars, which are currently provided via two separate, locally-hosted applications, including Meeting Maker.

The new service, dubbed Unimail, will be provided by Brightsolid in Dundee and is built on Microsoft Exchange 2010. It will be nice to have everything in one place, and as most of the Web team have been using Microsoft Outlook since we started there won’t be too much of a learning curve.

Xobni

One add-on that I’ve been using off-and-on for a year or two is Xobni, which is described as an “Outlook plugin to search people, email, and attachments instantly.“.  The name, you’ll notice, is simply the word ‘inbox’ spelt backwards.

Once installed Xobni takes a few minutes indexing your email and builds up some interesting statistics about each email recipient, such as

  • who you most frequently email
  • what times of day you most often exchange emails
  • how many emails you’ve sent and received
  • how long it takes you to respond

This is the mini-stat for my boss:

Xobni statistics

Xobni statistics

What I’ve found it most useful for is quickly searching through my email.  It is significantly faster than using Outlook’s built-in search.

The threaded email conversations are also really helpful.  Last week I received an email from someone at the University of Strathclyde, Glasgow.  I knew that he’d sent me emails a few days before but I couldn’t find them.

With Xobni it was simple.  I selected his most recent email and Xobni showed me the entire conversation, including the messages that I couldn’t find (I’d accidentally dropped them into the wrong folder).  It would have taken me ages to find those messages without Xobni.

Xobni threaded conversations, attachments, links, etc.

Xobni threaded conversations, attachments, links, etc.

As you can see from the screenshot above Xobni doesn’t just group conversations. It also remembers which files and links you’ve been sent, it extracts contact information from people’s signatures, it analyses emails to see who else is copied into emails and it builds up a picture of your contacts’ actual work or social networks.

And if that’s not enough you can explicitly enter your Twitter, Facebook, LinkedIn, Hoover’s and Xing login details and Xobni will also pull in your contacts’ profile photos and latest updates so you can see who you’re emailing.

Scheduling time with my contacts is something I do all the time. Xobni helps with that too, checking my calendar to see when I’m next available.  With one click Xobni gives me this to send to colleagues:

Here is my availability for the next few days.  (All times are GMT Daylight Time, GMT+01:00.) Auto-generated Xobni Schedule:

Mon September 27, now to 14:30

Tue September 28, 09:15 to 10:00, 11:00 to 11:30, 12:00 to 12:30, 13:30 to 14:00, 16:00 to 17:00

Wed September 29, 09:00 to 10:00, 13:30 to 15:00

Thu September 30, 09:00 to 10:00, 10:15 to 12:15, 12:45 to 15:00, 15:30 to 17:00

Fri October 01, 09:00 to 09:30, 11:00 to 17:00

Once we’re all using the Exchange calendar Xobni will also be able to tell me when I’m already scheduled to meet with my contacts.

Outlook 2010 Social Connector

Outlook 2010, which we’ll be upgrading to at some point, has a built-in social connector which does some of the same things, but having been using the two together on my PC at home I much prefer how Xobni does it, and it’s much faster too.

Free and plus

Xobni comes in two versions: Xobni (free) and Xobni Plus (US $29.95).  The paid-for version comes with more features such as a really impressive auto-suggest option when adding recipients to an email and it can search unlimited PST files (e.g. email archives).