Zeal and Dash—Offline documentation browsers

Zeal for Linux and Windows

Zeal for Linux and Windows

Yesterday I came across a really useful application for web development which has already sped up my workflow when needing to look for documentation: Zeal.

Zeal is available for Linux and Windows only, because it’s based on a similar application for Mac OS X only called Dash.

On my personal blog, I’ve written about how I’m using Zeal, and how I’ve configured it to be integrated into Sublime Text 3. It has been a real time-saver already: thoroughly recommended.

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.

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.

Using XAMPP web server

XAMPP control panel

As we all (should) know testing out software on live environments isn’t particularly sensible. For the last five years in the office, and longer at home, I’ve been running XAMPP from Apache Friends as a test server on my PC.

XAMPP includes Apache httpd web server plus MySQL, PHP and Perl in an easy to install package (available for Windows, Mac, Linux and Solaris).

I don’t know about you but I’ve spent hours trying to get Apache, MySQL and PHP to speak to one another on a number of PCs. Sometimes without any success, other times after a lot of reading and config file editing. That was when I discovered XAMPP. No more delving into config files to try to coax life into your *AMPP server. Out of the box XAMPP just works.

The latest version for Windows, XAMPP 1.7.4 includes the following:

  • Apache httpd 2.2.17
  • MySQL 5.5.8
  • PHP 5.3.5
  • phpMyAdmin 3.3.9
  • FileZilla FTP Server 0.9.37
  • Tomcat 7.0.3 (with mod_proxy_ajp as connector)

Security

This simplicity, however, comes at a cost: security. As they repeatedly stress on their website

“XAMPP is not meant for production use but only for developers in a development environment. XAMPP is configured is to be as open as possible and to allow the web developer anything he/she wants. For development environments this is great but in a production environment it could be fatal.”

The missing secure elements in XAMPP are:

  • The MySQL administrator (root) has no password.
  • The MySQL daemon is accessible via network.
  • phpMyAdmin is accessible via network.
  • The XAMPP demo page is accessible via network.
  • The default users of Mercury and FileZilla are known.

Security holes which can, of course, all be patched. XAMPP comes with a security status page which allows you to see how secure it currently is.

Setting a root password on MySQL and protecting the XAMPP directory is as simple as clicking a link and filling in a couple of forms.

XAMPP security report showing secure status of the installation

Conclusion

I’ve found XAMPP to be really useful, particularly for testing PHP code, developing WordPress themes and learning new Web apps.

If you don’t fancy XAMPP then there is also WampServer. Or you can get your hands dirty and delve into the config files… but remember: in the config files no-one can hear you scream.

What developers think of Internet Explorer

I like this self-deprecating advert from Microsoft about Internet Explorer 9.

Only today I was thinking how refreshing it is that I now don’t have to worry too much about testing webpages in Internet Explorer 9. Everything just works now.

Sure, it doesn’t have the same level of support for HTML5 and CSS3 that Chrome, Firefox and Opera have but it does the basics really well and doesn’t have the same weird quirks that IE7 and IE8 have that require obscure hacks and workarounds.

Besides, at the moment all the major browsers have varying levels of support for these new Web standards-in-the-making. That’s why we’ve got tools like Modernizr.

Let’s hope that Internet Explorer’s support of Web standards grows from strength to strength.

Either that or they see sense and move to using the WebKit rendering engine! 😉

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?

Internet Explorer from version 1.0 to 9.0

Since Microsoft Internet Explorer 9 was released Andy—you know! Andy!—wondered what it would be like to install every version of Microsoft’s Web browser starting at IE 1.0 under Windows 95 and working all the way up through IE 6.0 on Windows XP to IE 9.0 which is only available for Windows Vista or 7 and compare them. His video is fascinating.

Acid tests

In the video he mentions Acid1, Acid2 and Acid3 (these links take you to Wikipedia) which are test pages that are used by browser manufacturers to check for problems in the way that they display Web pages.

  • Acid1 tests how a browser uses the Cascading Style Sheets (CSS) 1.0 specification.
  • Acid2 tests CSS 2.1 styling, HTML, PNG images, and data URIs (a way to include data within pages as though they were external resources).
  • Acid3 tests the Document Object Model (that is the structure of the page) and how the browser handles the JavaScript scripting language which is often used to add interactivity to a Web page.

You can check how well your browser does by clicking on the links above, which take you to the tests themselves.

The browser that I’m using to write this in (Google Chrome 11 beta) passes all three tests, even scoing 100/100 in Acid3. Internet Explorer 9.0 passes tests 1 and 2 and scores an admirable 95/100 in Acid 3; Firefox 4.0 scores 97/100.

But I digress…

Internet Explorer 3.0… without the internet

My first introduction to Internet Explorer was IE 3.0 under Windows 3.11 for Workgroups when I was learning HTML back in 1997. I wasn’t even connected to the World Wide Web, which is fine because the readme file suggested that the internet was just one option:

This product enables you to browse and view HTML documents on the network, in addition to documents on the World Wide Web or Internet. Other services, such as Gopher and FTP, and NNTP news support, are also available.

I still have the installer for Microsoft Internet Explorer 3.0 for Microsoft Windows 3.1 from November 1996).

Here are the system requirements:

  • A personal computer, 386 processor or higher
  • Microsoft Windows 3.1 or 3.11 or  Microsoft Windows for Workgroups 3.1 or 3.11
  • At least 4 megabytes (MB) of memory
  • A VGA monitor or better
  • A mouse
  • A modem with a speed of at least 9600 or a LAN  connection

Personal computers and the Web have come a long way since then.

Saying goodbye to Internet Explorer 6

Today, Microsoft launched a big push aimed at “Moving the world off Internet Explorer 6”. IE6 Countdown aims to educate people about why they need to upgrade their browsers. The target is for IE6 to account for less than 1% of global share.

Web developers have long bemoaned the amount of work it takes to make modern-day websites work properly in IE6. It is a 10 year old browser — almost half as old as the web itself — but it is only in the past year or two that many web developers have begun to feel that it is reasonable to drop support for IE6.

Even so, even to have a website that does not work well for 1% of visitors may be deemed to be unacceptably high. While it is unreasonable to expect a website to work on a stone tablet as well as it does on an Apple iPad, if enough people are using certain software to surf the web — no matter how old it is — we need to make sure it works.

Worldwide usage of IE6

Internet Explorer 6 usage around the world In February 2011, 3.5% of UK users were using Internet Explorer 6. Worldwide, 12% of users still use this decade-old browser. Most staggeringly of all, over a third of web users in China are still using IE6.

It looks like Nordic sufers are particularly savvy. Norway and Finland are the only two countries coloured green on Microsoft’s map, signalling that they have gone below the target of 1%.

St Andrews poised to go green

I have just checked the statistics for visits to the University of St Andrews website, and the percentage of IE6 users stands at 1.01%. This is a tiny smidge above Microsoft’s target of 1%. While the UK is still painted blue on Microsoft’s map, it looks like the University of St Andrews will go green soon!

Although most pages on the University website should work adequately on IE6, we have begun to stop supporting IE6 for some of the fancier, newer designs. There comes a point where supporting IE6 just becomes a waste of time — time that we really don’t have.

Why upgrade?

IE6 was a revolutionary browser for its time. But that was ten years ago, which is an absolute eternity in terms of the web. Not only are IE6 users unable to visit many websites as the designers intended, the continued prevalence of this ancient browser is discouraging developers from innovating more — making all web users worse off. Using a 10 year old web browser is also seen as a security risk.

Microsoft have been criticised for being too slow to update their browser. It was five years until Internet Explorer 7 came out. In comparison, Mozilla are poised to release Firefox 4, two and a half years after Firefox 3 was launched. Google Chrome has reached version 10 just over two years after the first ever version.

Now even Microsoft finds the continued prevalence of IE6 to be an embarrassment. Today, Microsoft are playing catch-up with other browser vendors, but have made great leaps to improve their browser in recent years.

As such, we fully support all initiatives to encourage users to upgrade from IE6. If you still use IE6, please upgrade to the latest version of Internet Explorer.

Better still, you could opt to switch to a different browser altogether. The future version of Internet Explorer — IE9 — is a vast improvement, but is still not perfect. Only today, I worked on some new code that works perfectly in every other major browser, but does not work in IE9 due to its relatively poor support of CSS3.

If you have held off before, I can promise you that switching browsers it is rather pain-free. You will probably end up being much happier with your browsing experiences.

I suggest you consider the following browsers:

PDF problems? Check your filenames

We have been contacted a couple of times recently by content maintainers who were concerned that some users of the website were unable to open PDF files. Our users have particularly been having problems opening some PDFs in Firefox, while I have also known of Google Chrome being affected. Internet Explorer has been fine (for once!).

These odd problems have only been cropping up recently, and not just on the University website. I have heard reports from other people who have been having difficulties opening PDFs in Firefox and Chrome in general. Strangely, despite hearing numerous reports “in real life”, I have seen little chat about this on the web. So I am not entirely sure what is going on. But here is what I think has happened.

What might be causing the problem?

Both of the times I have been asked to investigate this issue, the same thing appeared to be causing it. I noticed that the PDFs in question had filenames that were not web-friendly. They were something like Example File Name.pdf.

A filename that contains capital letters, special characters or spaces is quite common, and is normally adequate if you just want to open your file from your desktop. But they are unsuitable in a web environment. URLs are not designed to contain spaces. But if you upload your PDF with a filename that contains spaces, this is what will be created. This is also what causes the dreaded “%20” ugliness that we are often asked about.

For instance, if I was to upload my hypothetical document with the filename Example File Name.pdf, its URL on the web would be http://www.st-andrews.ac.uk/media/Example%20File%20Name.pdf. This is not ideal.

Normally the software we use is smart enough to work around it. But it seems (and this is just a guess on my part because I have been unable to find any firm information) that a recent update to the Adobe Reader software (perhaps the release of Adobe Reader X) has caused a few bugs in the way certain browsers handle PDFs.

How to avoid these problems — name your files correctly

Both times I have remedied the issue by downloading all of the PDFs onto my computer, renaming the files so that they had web-friendly filenames, then re-uploading them. It seems that the best way of ensuring that your PDFs will open in all browsers is to give them a web-friendly filename in the first place. As a nice bonus, they will end up having nicer URLs as well!

If you are preparing a document to be uploaded to the website, please ensure that you have a web-friendly filename before uploading it. Avoid using any special characters, capital letters or spaces.

Do ensure that your filename is all lowercase and replace any spaces with hypens.

So if you have a file that’s called Example File Name.pdf that you want to upload to the web, create a copy and name it example-file-name.pdf. Upload this new version of the file. That way, you can help prevent users having problems viewing your documents.

This advice also applies to any sort of file you are uploading, including Word documents and  images.

What browsers have our visitors been using this year?

Browsers used to visit the University website during 2010

The topic of which Web browsers are the most popular came up at our weekly Web team meeting this morning.  So I went away and did a little digging in our Google Analytics account.  (Bear in mind that I have no degree of expertise in statistics.)

The issue was raised because we’re currently debugging an issue in Google Chrome, and someone wondered out-loud whether it was really worth trying to fix in such a minor browser if it worked fine in IE, Safari, Firefox and Opera.  The statistics showed that Google Chrome really isn’t that minor a browser now with a share of 11.98% of all visits.

Google Analytics

Looking at the last 12 months (from 01 January – yesterday) I was surprised to see that in September Safari overtook Firefox as the second most used browser after Internet Explorer.

It makes sense that Internet Explorer and Safari, which are the default browsers in Windows and MacOS X respectively, should be first and second, but I don’t really understand immediately why Safari should overtake Firefox in September, even taking into account the new student intake which I would have assumed were also included in the January–June figures?

The Safari figures also include handheld Apple devices, such as iPhone, iPod and iPad, but overall those platforms together only make up 0.8% of the total annual figure.

As a general indication of trend, comparing the January figures to those for December so far, it’s interesting to note that both usage figures for IE and Firefox dropped while Safari, Chrome and Opera grew, with Chrome growing the most.

Chrome UP 5.58%
Safari UP 3.66%
Opera UP 0.13%
Firefox DOWN 4.76%
Internet Explorer DOWN 4.83%

Other browsers

This graph and table, of course, only mention “The Big Five”.  There are other browsers out there.

The statistics for 2010 to date show that 185 different browsers have been used to access the University website.  Most of the other browsers (not those listed above) are for mobile devices, .e.g.

  • BlackBerry
  • HTC HD2
  • HTC Touch
  • HTC TyTN
  • LG
  • Samsung
  • Opera Mini
  • Palm
  • Playstation 3
  • Playstation Portable
  • Xda Ignito

Interesting to see games consoles (Playstation 3 and Playstation Portable) appearing on the list. Over the past 12 months the University website has been visited 451 times using a Playstation 3.  Not quite enough to warrant commissioning a St Andrews level on Grand Theft Auto or Call of Duty.

Broken down by OS

Breaking the browsers down by operating system, across the entire year (01 January–12 December) here are the top 10 browsers by operating system

1 Internet Explorer Windows 43.6%
2 Firefox Windows 18.9%
3 Safari Mac 18.85%
4 Chrome Windows 8.7%
5 Firefox Mac 4.88%
6 Safari Windows 0.93%
7 Chrome Mac 0.91%
8 Firefox Linux 0.65%
9 Opera Windows 0.61%
10 Safari iPhone 0.55%

It will be interesting to see how that moves over the next 12 months and whether things have changed dramatically this time next year.