Web Design & Development Blog
RSS Feed
Subscribe to my
RSS feed

The Web Design & Development Blog is written, coded and maintained by Duncan Midwinter. It regularly features articles on HTML, CSS, Javascript, PHP, Web Design and more…

Posts for tag: Mac 17

Capturing webpages from Safari using Automator and Webkit2Png

Being able to save full length screenshots of webpages is very useful. A quick scan of the Mac AppStore reveals several apps at different price points that fill this niche but I’m going to show you how you can achieve this functionality for free on the Mac. In my example I will show you how to capture a full-length image of the current page being viewed in Safari.

safari web page capture using Webkit2Png and Automator on the Mac

This is an image of the kind of thing we’re aiming to create.

To create the image we will be using Webkit2Png – a command line tool created by Paul Hammond, and to make this tool available from Safari, we will be using Automator which comes installed on every Mac.

1 First of all download a copy of webkit2png to the desktop of your Mac. Download Webkit2Png. Save this file as ‘webkit2png‘ without any file extension.

2 If you are using Mac OSX 10.11+ (El Capitan), you will need to make a small edit to the script before can continue:

Open webkit2png in your chosen Text Editor / IDE and search for the line 422:

app = AppKit.NSApplication.sharedApplication()

Add the following code before line 422:

# Handles ATS HTTPS requirement introduced in El Cap
    if options.ignore_ssl_check:
        AppKit.NSBundle.mainBundle().infoDictionary()['NSAppTransportSecurity'] = dict(NSAllowsArbitraryLoads = True)

This extra code is to get past the App Transport Security error that El Capitan throws when you request a non-https site.
Now save the file.

3 Now you need to move this file to you /usr/bin/local/ directory. To do this, open Terminal.app that resides in your Utilities directory. If you don’t know where the Utilities directory is located you can open it directly by using the keyboard shortcut ‘⌘⇧U‘ in the Finder. Once Terminal.app is open, you can move the Webkit2Png file from your Desktop to to your /usr/bin/local/ directory with the following command:

sudo mv ~/Desktop/webkit2png /usr/local/bin/

You will be asked to enter your account password, and then the file will be moved to the  /usr/local/bin/ directory.

4 The next thing to do is set the correct file permissions on the webkit2png script. Again using Terminal.app, enter the following command to update the permissions on the file:

chmod a+x /usr/local/bin/webkit2png

5 At this point, webkit2png is ready to use. If you’re happy using the command line, you can simply capture webpages by typing the following command in to Terminal.app:

webkit2png https://www.midwinter-dg.com/my-blog --width=1280 -F --delay=5 --ignore-ssl-check

This command will save a full length screenshot of the url https://www.midwinter-dg.com/my-blog, with a width of 1280px. The flag -F is for full width, the delay to ensure the page and any scripts have time to load and the –ignore-ssl-check is to ensure non https pages will be saved.

However, we want to set up Automator to save a screenshot of the current page directly from Safari to the Desktop…

6 Open Automator.app and select ‘Service‘ from the Document type menu. Above the main workflow panel of the Automator app you will see some dropdown menus that read as follows:
‘Service receives text in any application.
Modify this to read:
‘Service receives no input in Safari.
Next, from the Library on the left select Internet, and then drag the ‘Get Current Webpage from Safari‘ in to the main workflow panel.

7 Now, from the Library select ‘Utilities‘ and drag the ‘Run Shell Script‘ action in to the workflow panel below the previous action. Modify the ‘Pass input’ menu in the ‘Run Shell Script’ action to read ‘as arguments’, and edit the contents of the action to read:

/usr/local/bin/webkit2png $@ --dir=/Users/***/Desktop/ -w 1280 --clipwidth 1 -F --delay=5 --ignore-ssl-check

where *** is the name of your user account Home folder.
Then save the workflow. In the example above, the screenshot is being saved with a width of 1280px, so I named it ‘Capture Page @ 1280px‘. I also created services for several different widths.

A Safari service using webkit2png created using Automator

8 To use the new service, open Safari, open a webpage and then from the Safari menu select Services and choose your new service. After a short delay you should see the screenshot saved to your desktop.

If you want to play around with the options available, open Terminal.app and type

webkit2png -- help

to see a full list of all available options.

How to apply one picture to all desktops on OSX 10.8 using Automator

So you have several desktops set up in Mission Control and you have assigned various apps to each desktop. Now when you want to change your desktop picture you open up System preferences, navigate to the Desktop & Screensaver panel and apply a new picture. At this point OSX 10.8* changes only the picture on the currently active desktop so, if you want to change all desktops to the same picture you have to swap to each desktop and change it manually. Fine if you only have 2 or 3, but if you have many desktops how can you change them all at the same time?

*this probably applies to OSX 10.7 as well – I don’t know, as I jumped straight from OSX 10.6 to OSX 10.8.

Automator icon from Mountain Lion

This is where Automator comes in. Automator allows you to script many tedious tasks on you mac (see my previous posts on using Automator), in this case we will be selecting a new picture and then rewriting the desktop preferences file to use only that selected picture. The finished Automator script will be a ”Service“. It will be available in the Finder under Finder -> Services -> Change All Desktop Picutres…

1 Open Automator

Automator is in the Applications folder. Open it and select “Service” as the document type.

2 Start building your script

At the top of the workflow pane (the right-hand column where it says “Drag actions or files here to build your workflow.”) you will see “Service receives selected text in any application” where ‘text’ and ‘any application’ are select boxes. Change the select boxes to read “Service receives no input in Finder”.

3 Adding the first action “Ask for Finder Items”

The Automator Library

From the Library column on the left of the Automator window select “Files & Folders” then from the second column double-click on “Ask for Finder Items” (or drag it in to the workflow).

4 Configuring the “Ask for finder Items” action.

First, change the “prompt” message to “Choose a desktop picture:”, then Select “Start at:” and navigate to where you keep your desktop pictures (I keep all mine in the default: /Library/Desktop Pictures/ folder). Finally make sure that “Allow Multiple Selection” is unchecked.

5 Adding the “Run Shell Script” action

Select “Utilities” from the library and then double-click or drag the “Run Shell Script” action to add it to your workflow.

6 Configuring the “Run Shell Script” action

Once you’ve added the action, make sure that the first two select boxes are set to:

Shell: /bin/bash
Pass input: to stdin

Now in the text area (Where it says cat), delete cat and replace it with the following shell script:

read -e PICTURE;
function set_all_desktops
defaults write com.apple.desktop Background "{default = {ImageFilePath='$PICTURE'; };}";
killall Dock


the finished Automator workflow

7 Saving and running the new Service

The finished workflow in action

Choose File -> Save and call it “Change All Desktop Pictures…” and you’re done. Now to run your new service switch to the Finder and choose Finder -> Services -> “Change All Desktop Pictures…”. In the dialog that opens simply select the new picture and click on “Choose” and all your desktops will be updated.

The Finder services menu

In this example we have built the script as a Finder Service, however you could also build it as an Application which could then be put in the dock. In fact I already have and you can download it from the Automator Workflows section of my Software page.

CSS3 ButtonBuilder is now available on the Mac App Store!

CSS3ButtonBuilder lets you visually create sophisticated CSS only buttons (without the use of background images) that are cross-browser. By simply adjusting sliders or numerical input you can adjust the values for various CSS3 properties and see the results in real-time in the preview window. When you are done, you can output cross-browser CSS3 markup for inclusion in your sites stylesheet. CSS3 ButtonBuilder also lets you save and re-load your designs for later use or adjustment.

CSS3 ButtonBuilder

The application features:

A live updating preview that also lets you change the button text and the background colour so that you can see how your design will work on the same background colour as your site.

live preview of your design

Sliders to adjust all numerical values (as well as numerical input for precision).

easy to use sliders

Fully featured rgba colour pickers — clicking on a colour-well opens an rgba colour picker that lets you adjust the rgb values as well as the transparency. You can also choose form pre-set colours and lock the sliders for greyscale output.

fully-featured rgba colour pickers

You can select whether your button will have a solid background colour or a CSS3 gradient. The gradients are fully customizable — you can add as many different colour-stops as you like and adjust their values as well as choosing the direction (horizontal, vertical, diagonal, radial) of the gradient.

full control over css3 gradients

You can save your designs and re-load them at anytime to re-use the code or adjust the design. Save your work simply by clicking on the ‘Save’ button and typing a name for the design. Open a saved design by clicking on ‘Load’ and selecting the design from the list. Clicking on the X icon to the left of the saved button thumbnail will delete it.

saving and loading designs

When you are happy with your button design you can easily and quickly output the CSS3 markup needed to apply the design to either an anchor <a> element or a form element <button> or <input>.

outputting css3 markup

The application preferences allows you to select which web browsers you would like to generate compatible CSS3 markup for. CSS3 ButtonBuilder generates code that supports the 5 major browsers: Chrome, Firefox, Safari, Opera and Internet Explorer*. As default the app will always output the standard WC3 properties for your design.


* full browser support (particularly in the case of IE), refers to the use of the most up to date version of the browser.

Take the pain out of hand-coding cross-browser CSS3 buttons with CSS3 ButtonBuilder! Now on the Mac App Store.

Available on the Mac App Store

The ButtonBar+ Safari extension is now available!

So what is ButtonBar+? ButtonBar+ is a new extension for the Safari web browser on Mac or Windows. If you like to store your favorite bookmarks on the Safari Bookmarks bar for one-click easy access but you’ve run out of space then ButtonBar+ is the extension for you.

Safari browser window with bookmarks bar
The standard Safari Bookmarks bar.

With ButtonBar+ you can create a second bookmarks bar for Safari that is highly customizable and configurable. What’s more, you can create additional instances of the Bar — it’s like having as many one-click bookmarks bars as you wish.

The ButtonBar+ menu and bookmarks bar
The ButtonBar+ menu & bookmarks bar (click for larger image)

Once installed, you open ButtonBar+ by clicking on the icon 1 in the main Safari toolbar. You can add the current page to the bar by clicking on the + icon 2. You can create extra instances by opening the ButtonBar+ 3 menu and selecting ‘Add new ButtonBar’.

When you have more than one instance of the ButtonBar, you can change between them either by using the menu 3 or sequentially by using the arrow buttons on the ButtonBar 4.

Clicking on the gear icon 5 on the far left of the bar opens the Preferences Panel…

The ButtonBar+ preferences panel
The ButtonBar+ preferences panel (click for larger image)

Once open, you can use the Panel to customize you bar. You can change the name and icon 6 of the bar, these appear in the menu. You can customize the look of the bar 7 by selecting from 10 different bar styles, 2 button styles, and 3 alignments. You can also specify wether links open in the same tab or a new tab.

The ButtonBar+ bookmark bar styles
ButtonBar+ bookmark bar styles (click for larger image)

NOTE: each instance you create has it’s own Preferences Panel and can be styled individually.

You can further customize your bars by assigning label colors to important links 8 , re-ordering your links 9 and grouping them by adding dividers between sets 10.

Customizing Safari bookmarks with ButtonBar+
Customizing Safari bookmarks with ButtonBar+ (click for larger image)

ButtonBar+ also has a ‘Backup and Restore’ panel. This is accessed through the menu 11. Once open, this allows you to backup or restore from a backup either all your data or the currently active instance.

The ButtonBar+ backup and restore panel
The ButtonBar+ backup & restore panel (click for larger image)

You can download the demo version of ButtonBar+ for Safari below, and you can visit the ButtonBar+ site to find out more and watch the screencasts:

Download the ButtonBar+ Safari Extension Visit the ButtonBar+ Safari extension website now

3 cool new Safari Extensions

Announcing 3 new extensions for the Safari web browser!

Search All Safari Extension

1) Search All.

This extension installs a new toolbar to your browser from where you can search up to 15 sites simultaneously from 1 search box. By default the extension comes configured to search the following sites:

  • Google
  • Google Images
  • YouTube
  • Yahoo
  • Bing
  • Wikipedia
  • Facebook
  • Twitter

Each site can be searched individually or, by clicking on the “Search All” button, you can search all at once.

The extension is also highly configurable: want to search stackoverflow.com?* Open the Search All preferences and add it to the list! You can also control exactly which sites to include in the “Search All” results.

Preferences for the Search All extension

* in this case, the site url would be: stackoverflow.com & the query string would be: /search?q=

Typesetter Safari Extension

2) Typesetter.

This is a fairly simple extension. You may have noticed that the standard Safari text rendering tends to result in ‘fat’ looking text. This is especially noticeable when the text is light on a dark background. In some cases it can be difficult to distinguish between bold and normal font weights.

The Typesetter extension resolves this problem by enabling -webkit-font-smoothing. As well as improving the font rendering, the Typesetter extension also enables advanced typographic features such as ligatures.

Preferences for the Typesetter extension

Web Radio Safari Extension

3) Web Radio.

This extension adds a toolbar for accessing your favourite internet radio stations. The ‘radio’ can hold up to 5 stations which cab be configured by entering the URL and station name in to the preferences panel. The rest is pretty intuitive.

‘Out of the box’ it comes pre-configured to the following stations:

  • Planet Rock
  • Absolute Classic Rock
  • Jazz FM
  • Classic FM
  • BBC World Service

Preferences for the Web Radio extension

And finally – I’ve moved all my Safari Extensions to a sub-domain so here’s the place to get them: http://safariextensions.midwinter.dg.com/

Download Safari Extensions

Button Bar: a new Safari Extension

Button Bar Icon

Button Bar is a new Safari Extension that allows you to create a second Bookmarks bar to store important links. Once installed, the Button Bar is displayed or hidden by toggling the button on the main Safari toolbar. You can add links to the Button Bar by opening Safari Preferences (cmd+,) and selecting the extension preferences.

Button Bar Safari Extension

From the Button Bar preferences, you are also able to customize the look of the Button Bar. By default, the style is in keeping with the Safari interface but there are also ‘dark’ & ‘light’ styles, and you are able to specify whether you want the buttons centered, or aligned left or right.

Button Bar Styles

New QR Code Generator Icon

Whilst working on this new extension, I also took the time to update my popular QR Code Generator extension. This has been updated to include similar features: the extension now features a toolbar for generating the QR Codes, and the main toolbar button toggles the status of the QR Code toolbar.

QR Code Generator Safari Extension

You can still change the Character Encoding of the generated codes from the preferences pane, and I have also added options for changing the overall look of the toolbar:

QR Code Generator Styles

You can get both the Button Bar Extension and the QR Code Generator Extension from my downloads page.

(Added 19-3-2011) I have updated the Button Bar Extension (v.1.1) to include coloured ‘labels’ that can be added to any button.

Button Bar Safari Extension

New Safari Extension – QR Code Generator

Safari Extension - QR Code Generator

Following on from yesterday’s QR Code generating widget…
…I’ve just completed a Safari Extension for generating QR Codes.

The Extension works simply by adding a new button to the Safari toolbar. Clicking the button will generate a new tab containing the QR Code. By opening the Safari Preferences pane and selecting ‘Extensions’, then ‘QR Code Generator’ you can select what size you would like generated QR codes to be.

Safari Extension - QR Code Generator preferences

QR Code Generator

QR Code Generator Widget

I’ve coded a QR Code Generator widget for Mac, which as usual can be downloaded from my downloads page. Basically it uses the Google Chart Tools to turn any string in to a QR code. You can use it to encode URLs, vCards or well, anything you want. The resulting QR Code is ready to be scanned by any mobile device with a camera & decoding software.

I realize not everyone is using Mac OS X, so I’ve included a plain old HTML / Javascript version in this post ↓

QR Code Generator


QR Code Generator

See your website as a search engine sees it with Lynx

So you’ve created a great design, you’ve built the site and you’ve written and added the content. Everything’s looking good — or is it?

Sometimes it helps to step back from the design and see the site as a search engine will see and index it. This is where the Lynx browser can be very helpful. Basically Lynx is a cross-platform text-based browser that runs in the command line. Originally it was developed for UNIX but DOS versions are also available that run under all versions of Windows.

First of all you will need to install Lynx. The Lynx project is hosted at http://lynx.isc.org, however you can download a packaged version for Mac from Softpedia: http://mac.softpedia.com/progDownload/Lynx-Download-7825.html (at the time of writing the latest version is 2.8.7).

After installing the Lynx Browser, open Terminal.app and enter the command: lynx

The browser will then open in the terminal window. From here type: g (for go), then enter and you will be prompted for a URL. Simply enter the URL you wish to view.

Lynx 2.8.7

It’s always a good idea to check your page with all images/javascript etc. turned off. Read it through, is it as you expected? Does it get the message across that you want? Does the content appear in the order that you were expecting? If the answer to any of these questions is no, maybe you need to re-think your content and/or structure.

Ever wanted to know how many lines of code you have written?

Whilst working on a large site, or even a moderately sized one, there may come a time when you stop and think ‘Just how many lines have I coded?’. Today I’m going to show you a very simple way to find the answer, and also break it down into languages, HTML, PHP, Javascript, etc…

1 First of all you need to download a copy of the Perl script Cloc. You can get it from http://sourceforge.net/projects/cloc/files/ — the latest version is 1.53.

2 Download the script (if you have copied and pasted it from the browser window, make sure you give it the .pl Perl extension).

3 Next, open up Terminal.app and navigate to the script. I put mine in a folder called ‘TerminalScripts’ in my home folder, so…

cd TerminalScripts

…gets me there.

4 Run the cloc script, referencing the folder containing the project you want to analyse eg:

perl cloc-1.53.pl /Users/duncan/Webserver/OxfordTravelGuide-SVN

Cloc 1.53

And that’s it, simple!

10 Mac Apps for Web Design and Development

I thought it’d make an interesting experiment to post my current top 10 apps for Web Design and Development on the Mac now at the beginning of the year, and then follow up at the end of the year to see what, if anything, changes.

So without further ado, here are my top 10 apps (in no particular order) for web design and development on the Mac:

1 MAMP, MAMP pro

MAMP pro

It’s always best practice to develop and test everything locally before uploading to a server, and whilst the Mac comes with an Apache Server & MySQL already installed, I use MAMP. It’s quick to install and get up and running, and easilly configurable from it’s simple interface. An installation of MAMP gives you an Apache server with PHP and MySQL and the ability to locate the root level of your localhost server anywhere on your Mac. The basic MAMP installation is free but the paid for MAMP Pro is much more configurable and it allows you to setup multiple virtual hosts, and use Dynamic DNS.

version: 1.9.4
developer: appsolute GmbH
site: http://www.mamp.info/
Price: MAMP: free / MAMP Pro: €29.00

2 Subversion


Developing and maintaining a project would be a nightmare without some kind of version control. I use Subversion, as it plays well with my choice of editor (Coda — see number 4). Subversion can be a struggle to learn, but once learnt it definitely makes life easier.

version: 1.6.11
developer: CollabNet
site: http://www.open.collab.net/
Price: free

3 SequelPro


So now we’ve got the server environment and version control set up, what about working with MySQL?. I could use the command line or PHPMyAdmin which comes preinstalled in the MAMP package, however, on the Mac you can’t go wrong with SequelPro. It’s simple, powerful and free, giving you direct access to all your databases both local and remote.

developer: mjmedia
site: http://www.sequelpro.com/
Price: free

4 Coda


Finally on to the coding! I’m currently using Coda from Panic. It’s not quite a full IDE, but it does a lot and makes what it does do very easy. To begin with, it’s a text editor based on the popular SubEthaEdit text engine, it features syntax modes for ActionScript, ASP-HTML, CFML, CSS, ERB, HTML, Java, Javascript, JSP-HTML, LassoScript-HTML, Objective-J, Perl, PHP-HTML, Python, Ruby, Smarty, SQL & XML and additional syntax modes can be added. Whilst coding HTML it can validate on the fly. It gives coding hints as you type (great if you can’t quite remember the syntax for that php function!). It supports Subversion for version control and it is extensible both with AppleScript and third-party plugins. Coda has built-in FTP (it uses the same FTP engine as Panic’s top Transmit app). As well as all this Coda has a built-in GUI for coding CSS, a preview mode which allows you to browse the DOM, a built-in Terminal for when you need access to the command line and ‘books’ — a reference section giving you the complete run-down on HTML, CSS, Javascript and PHP.

version: 1.7
developer: Panic Inc.
site: http://www.panic.com/coda/
Price: $99.00

5 CSSEdit


Although Coda has a built-in GUI for handling CSS I still find myself coding all my CSS in CSSEdit from Macrabbit which I have been using for much longer than Coda. In fact, CSSEdit is the app that taught me CSS. The main window is split in to 3 columns, the left column contains all your classes, ids, selectors etc., the right column is a GUI for building your styles and the central column is a text editor for any manual adjustment you would like to make. On top of this, the Preview window gives you a live preview of your site which changes in real time as you edit your CSS. And that only scratches the surface of what this little app is capable of. If your developing on the Mac and you don’t have CSSEdit get it now!

version: 2.6.1
developer: Macrabbit
site: http://macrabbit.com/cssedit/
Price: €29.95

6 Kaleidoscope


When you have been working with version control for some time there will come a point when you want to either compare or merge a document with a previously archived version. If you have the Apple Developer Tools installed (they’re on your Mac OS X install CD) you can use FileMerge. However, a far more elegant solution is Kaleidoscope. As well a having a fantastic interface, Kaleidoscope has the ability to compare image files. Kaliedoscope can also be configured to work as the default diff app for Versions, TextMate, Cornerstone, Subversion (command line), Git, Mercurial, Bazzar and with a bit of command line persuasion Coda.

version: 1.1.1
developer: Sofa
site: http://www.kaleidoscopeapp.com/
Price: €29.00

7 Pixelmator


Anyone who is familiar with Photoshop will instantly have some idea of where Pixelmator is coming from. That’s not to say that it is a direct copy and whilst not as poweful as PS, it has some features and functionalitiy that is in fact better. Pixelmator can only handle RGB but as I’m using it for web graphics that’s just fine. Pixelmator uses Apple’s in-built quartz filters for image effects, so if you have Apple’s Developer Tools installed and you know your way around Quartz Composer, you should be able to build your own. All the familiar features are here, selection tools, gradients, brushes (it even supports Photoshop brushes). It can open and save in the .PSD format although some features like layer effects are not supported. It’s not a complete replacement for Photoshop (one thing I miss is some kind of path tool), but it can do most things – and for the price (E29 from the app store – which includes a free upgrade when version 2.0 comes out) it’s just great!

version: 1.6.2
developer: Pixelmator Team
site: http://www.pixelmator.com/
Price: €29.00 (Mac app store special offer)

8 Sketch


When it comes to designing icons I generally prefer to use a vector app. There are several alternative vector apps out there for Mac and each has it’s pros and cons. I am currently using Sketch which I got at a reduced price when I purchased the excellent Fontcase (see number 10). If you’re used to using Adobe Illustrator then this app can take a bit of getting used to, however, once learnt it’s really quite fun to use and for icon design it’s prefectly adequate. It creates files in it’s own .sketch format but it can export to .pdf, .eps. .svg, .jpg, .png and .tiff.

version: 1.0.6
developer: Bohemian Coding
site: http://bohemiancoding.com/sketch/
Price: €32.00

9 ImageOptim


This small utitliy is great! Before uploading any images I always run them through ImageOptim — if fact I have an Automator action set up to process them and the upload to my server. Basically ImageOptim is a GUI for several command line utilities (PNGOUT, PNGCrush, OptiPNG, AdvPNG, JPEGOptim, Jpegtran & Gifsicle). Even after saving an image using Photoshop’s Save for Web feature you can make considerable savings on the size of images (PNGs in particular) by running them through ImageOptim.

version: 1.2.5
developer: Kornel Lesiński
site: http://imageoptim.pornel.net/
Price: free

10 Fontcase


When it comes to Font Management the Mac’s built-in Font Book is not really up to the job — enter Fontcase. Fontcase is a kind of ‘iTunes for fonts’, it makes organizing, activating, and choosing fonts easy and enjoyable.

version: 1.5.8
developer: Bohemian Coding
site: http://bohemiancoding.com/fontcase/
Price: €42.00


Whilst I’m not claiming these apps are the best out there — although one or two (Fontcase and CSSEdit spring to mind) probably are — I am using them all on a more or less daily basis. It will be interesting to see how that changes over the course of 2011.

3 New Dashboard Widgets for 2011

I’ve just completed 3 new dashboard widgets for Mac OS X. In addition to my previous 5 widgets (which you can find on my downloads page), I have now completed ‘Terremoti in Italia’, ‘UK Earthquake Monitor’ & ‘NASA Video Podcast Viewer’.

3 New Dashboard Widgets

‘Terremoti in Italia’ & ‘UK Earthquake Monitor’ both chart seismic activity in Italy & UK respectively, & ‘Nasa Video Podcast Viewer’ allows you to browse and view all 12 of NASA’s video podcast feeds in one widget!

Convert to entities – a widget for Mac OS X


Well, I did promise in my last post that I would be creating some more useful widgets for web development — and here is one of them:

ConvertToEntities can convert any text / code / etc. to entitles for use in html or Javascript. Whether you want to obfuscate an email address using javascript, or you simply want to know the character code for, say ‘π’ you can do it with this widget.

xkcd widget

And finally, I couldn’t help it — whilst I was working on ConvertToEntities, I also hammered out a feed widget for the xkcd webcomic to save myself from having to visit the site every Monday, Wednesday & Friday.

You can download them both from my downloads page. Enjoy!

3 Mac Dashboard Widgets

I have recently started coding dashboard widgets for Mac OS X and now have 3 to offer:

Mac Dashboard Widgets

  • midwinter-dg.com
  • Global Earthquake Monitor
  • #md5 encoder

The first widget displays the latest news from my RSS Feed, the second widget GeoLocates the most recent earthquakes greater than magnitude 2.5 and the last (and probably the most useful!) provides a quick method for creating md5 hashes from character strings — great when developing databases with logins, of for calculating checksums etc…

So, if you’re running Mac OS X give them a go, they can be found on my downloads page.

Hopefully I’ll be adding some more development tools in the near future.

Batch convert images with Automator on Mac


Following on from my post on FTPing images using only a keyboard shortcut, here’s a quick post to show you how to quickly batch convert images from one format to another…

1) First fire up Automator, and select ‘Service’ as your chosen workflow template, then as before change the two drop-down menus to read ‘Service receives selected image files in Finder’.

2) In the far left-hand ‘Library’ column select the ‘Photos’ Library, then from the next column locate the ‘Change Type on Images’ action and drag it across in to the main window. You will be asked whether you want to convert the original image or a copy. If you choose to convert a copy, Automator will add another action to your workflow (Copy Finder Items). However, for now I will continue as if you have selected to work on the original.

3) You can now see the action added to your workflow. Located at the bottom of the action window are 3 options – ‘Results’, ‘Options’ and ‘Description’. Click on ‘Options’ and check the ‘Show this action when the workflow runs’ checkbox.


Basically what this does is give you the option when you run your workflow to select what kind of file type to convert to. If you don’t check it, the workflow will run and convert the image to the file type selected in action when the workflow is saved.

4) One last thing to do — if you think you will mostly be converting images to .png, set the ‘To Type’ menu to .png (or whatever you prefer).

5) Now save it and give it a name. I’ve called mine ‘Convert images’. If you want to set up a keyboard shortcut look at my post on FTPing images to see how it’s done.

Services menu

And that’s it — simply select an image or multiple images in the Finder and then hit your shortcut or select your new workflow by right-clicking on them — a small dialog box will appear — choose the file type, click continue and your files will be converted!

It should be easy from here on to create some more image processing workflows of your own…

FTP files quickly on a Mac using Automator


Wouldn’t it be great if you could upload an image to your site just by clicking on it instead of having to open an FTP client, connect to your server, browse for the image etc…?

Well, if you are on a Mac you can, by creating an Automator action to do it for you, and here’s how.

1 First you will need to download the Upload to FTP action by Peter Dekkers, you can get it here: http://editkid.com/upload_to_ftp/

Once the Disk image has mounted, double click on the Install Upload to FTP package and follow the install instructions.

2 Now, open Automator (it’s in the Applications folder). You will be asked to choose a template for your workflow. Choose ‘Service’ and click ‘Choose’. At the top of the screen you will see two select menus. Change the selections until they read: Service receives selected image files in Finder.

automator options

3 Now, on the left side of the automator window you will see the Library containing actions for various applications. Upload to FTP has been installed in to ‘Other’. Click on ‘Other’, and Upload to FTP will appear in the column to the right. Click on it and drag it in to the main Automator window (Where it says ‘Drag actions of files here to build your workflow’).

4 The options for Upload to FTP are pretty self explainitory, if you’re unsure copy and paste the details from your FTP client. At bare minimum you will need to enter:

FTP options

  • Server
  • Username
  • Password
  • Directory
  • Port

5 Once you’re done select Save from the File Menu and name the action (I named mine ‘Upload blog image’). The action is now fully working, try it out — highlight an image in the Finder then ‘right click’ or ‘control click’* on it and from the ‘Services’ menu choose your action. The file will automatically be uploaded to the chosen folder on your server!

You can make the process even quicker by giving the action a shortcut key. To do this, open System Preferences and choose the ‘Keyboard’ preference pane. Select the ‘Keyboard Shortcuts’ tab, then select ‘Services’ from the left column. Click the ‘+’ icon to add a new shortcut, then choose ‘Finder’, add the exact name of your action, and enter a shortcut (I chose ‘Control-Option-CMD-U’).

Now, all you need to do is highlight an image, hit the shortcut and it’s done!

You can also add other actions to your workflow — for instance you could resize the images and then FTP them. The images for this article were uploaded in this way.

* it depends on what kind mouse you have

How to use Subversion version control with Coda on the Mac

For those of you who don’t know, Subversion is a version control system. Basically it enables you to track all changes to a project. It gives added security and control to the integrity of your work enabling you to compare a document with any previously saved version, and revert to, or merge different versions of a document.

Coda for MacIn this tutorial I will show you how to set up Subversion to work with Coda on the Mac. Coda from Panic Inc. is my app of choice when it come comes to web development on the Mac — it may not do everything, but it does a lot and it makes working with Subversion a cinch!

For the purposes of this tutorial I will assume that you develop sites locally, as I do, using MAMP and will be installing Subversion locally to manage your projects as you work on them.

1 First you need to get yourself a copy of Subversion. Go to http://www.open.collab.net/downloads/community/ and download the latest binaries, then install. (the installer will install Subversion to: /opt/subversion/bin/svn ).

terminal.app2 The next thing you need to do is create a repository. The repository is where all of your versioned data will be stored. You can locate it anywhere you like, personally I have mine in my home directory, where I also have the directory that is the root level of my localhost server. To create the repository, you need to access the command line. Open a terminal window and navigate to your chosen location (in my case: cd /Users/duncan/) and then create the repository: svnadmin create SVNrep – this will create a repository in the home folder called SVNrep.

3 OK, now that SVN is installed and you’ve created a repo, you need to configure it. In the Finder, open the directory ‘conf’ that resides inside your repo. (in this case /Users/duncan/SVNrep/conf/). Using a text editor, open the files svnserve.conf and passed. In svnserve, you need to uncomment and amend the following lines:

anon-access = none
auth-access = read
password-db = passwd
realm = My Repo

Save and close this file, then add a line to the passwd file to set your username and password, for example:

myusername = mypassword

Then save and close the passwd file.

4 Now to add your project to the repo – again, this will be done using the command line. Again, I’m assuming that you have many sites on the go, and each is sitting in a separate folder on your server – let’s say you have one called ‘my_great_site’. To add this to the repo type the following:

svn import my_great_site file:///Users/duncan/SVNrep/my_great_site -m “Initial import”

The path will be different for you depending on where you have put your repo and what you have called it.

5 Now you can delete you site as its safely stored in the repo (OK, you don’t want to delete it, just move it out of the root level of your server and archive it somewhere).

6 To work on your site, you need to checkout a ‘working copy’ from your repository (terminal again!). Type the following:

svn checkout file:///Users/duncan/SVNrep/my_great_site Webserver/my_great_site-SVN

As before you may need to adjust the paths depending on A. where you repository is (in this case: /Users/duncan/SVNrep, and where your server root is: /Users/duncan/Webserver/ ). The final -SVN is not necessary, it’s just my way of visually marking the project as being under version control.

Coda preferences

7 OK, now the project has been checked out, it’s time to update your site settings in Coda. First, open the preferences – Coda > Preferences… and click on the ‘Files’ tab. Enter /opt/subversion/bin/svn into the ‘Subversion Tool Path:’ field, then close the preferences.

8 Nearly done, now it’s time to update your site settings in Coda. Open the ‘Sites’ tab and click on the ‘i’ icon for your site. (pic). If you added -SVN to your checked out copy (or called it something different entirely, you will need to adjust the ‘Local URL:’ and ‘Local Root:’ fields). Now scroll down to the bottom, and expand the ‘Source Control’ section. Check the ‘Enabled’ checkbox and then enter you username and password that you set up in stage 3. If the Repository URL is not already set, close the sites panel and open it again. If it’s still not set you may need to add it manually – in this case it would be: file:///Users/duncan/SVNrep/my_great_site

Coda sites panel

9 That’s it – your site is now under source control, check out the ‘Managing Files With Source Control’ section of the Coda Help files – enjoy!