| Home | My Account | Directories |
ResponsiveResize - a Safari Extension to help with responsive design
Published on 2012-04-19 16:16:16
The ResponsiveResize extension for Safari help speed up development of responsive design by automatically re-sizing the Safari viewport with pixel precision to one of several preset widths. In each case the space taken up by the scroll bar is accounted for. If the particular width you want to work to is not one of the preset values there is also in input field to type your required viewport width. Basically I've been working on some responsive site designs recently (including a 'soon to be comp [..]
How to add CSS3 properties to CSSEdit
Published on 2012-04-06 03:58:32
For better or for worse CSSEdit was discontinued when MacRabbit released Espresso 2. I'm sure I wasn't the only one eagerly awaiting CSSEdit version 3 with CSS3 capabilities but unfortunately it never came — or rather it came incorporated in to Espresso and was discontinued as a stand-alone app. Well, I tried Espresso but it doesn't really suit my workflow and so I continue to use CSSEdit 2.6.1. However, there is a way CSSEdit can be hacked to get some CSS3 goodness in there... If like m [..]
CSS3 tables with rounded corners and css selectors
Published on 2012-03-12 00:33:57
I recently had to style a table for a shopping cart with rounded corners and a drop shadow. So how is this done? It would be great if you could just slap "border-radius: x" straight on to the element and it would be done but unfortunately this doesn't work. You have to get a rounded corner on to each or at the corners of the table. So how do you do that? Add a class to each corner cell? I suppose you could but it would mean ugly html. CSS to the rescue! By using child selectors you can get t [..]
All my CSS demos are now available on dabblet so you can experiment with the code
Published on 2012-02-20 08:53:53
I have created live editable versions of all my CSS demos on dabblet.com so that you can play with the code. The dabbler versions have slightly simplified css in that they make use of prefix-free to simplify the mark up by eliminating vendor specific prefixes. Links to live code on dabblet.com are available for the following CSS demos: Six fantastic CSS3 animated image captions 7 Great CSS based text effects using the text-shadow property Cross Browser Pure CSS3 Button Demo CSS3 Isometric Tex [..]
Six fantastic CSS3 animated image captions
Published on 2011-11-21 05:21:11
Following on from my previous CSS3 demos, here is a demo of pure CSS3 animated image captions - the kind of thing that usually involves a lot of javascript and all too often bloated markup. In the following demo, all the examples are created using only CSS3 and the following semantic HTML5 markup for describing an image with a caption: sample caption You can see the full demo here: CSS3 animated image captions →
The ButtonBar+ Safari extension is now available!
Published on 2011-11-11 05:44:32
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. 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 hav [..]
Create your own .SVG graphics with the new SVGedit Safari Extension
Published on 2011-10-02 08:16:22
The SVGedit Safari Extension works like a mini vector drawing app, enabling you to create and save SVG (scaleable vector graphic) and PNG images. Once installed it puts a small pencil icon on the main Safari toolbar. Clicking the icon opens the SVG-edit application which has most of the familiar vector app tools and features. From here you can design your graphics, and save them as SVG of PNG. The SVGedit Safari Extension has been created using SVG-edit v1.5.2. You can download it now from my [..]
Cross Browser Pure CSS3 Button Demo
Published on 2011-07-21 10:11:17
I've been doing a lot of experimenting recently with CSS3 gradients, box shadows, transitions etc… The result is this set of buttons created entirely from CSS (no images used at all). They have been tested using Safari 5, Firefox 5, Chrome 12 and Opera 11.5 on the Mac. Sorry if you're using any form of Internet Explorer, but as it doesn't have support for some of the CSS3 properties involved I haven't bothered even trying to see how they render. You can see the full demo here → 1) [..]
Ad campaign tracking with Magento
Published on 2011-05-16 08:02:57
I'm going to show you how to track ad campaigns in Magento to find out how many orders they are generating. Imagine you have an ad campaign running on Facebook for your Magento store and you want to know how many of those clicks are being converted
3 cool new Safari Extensions
Published on 2011-04-25 07:53:37
Announcing 3 new extensions for the Safari web browser! 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 s
Button Bar: a new Safari Extension
Published on 2011-03-17 09:40:10
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 B
CSS3 Isometric Text Demo
Published on 2011-03-14 11:42:29
Just recently I have been playing around with the multiple text-shadow capabilities of CSS3. Now, building on top of that I have produced a method for creating 3D isometric text, by using multiple text-shadows and 2D transforms. In this demo the 3D
New Google Chrome version of the QR Code Generator extension
Published on 2011-03-10 16:08:57
Back in February I created a Safari Extension to generate QR codes from the current URL. I've just completed coding an alternate version for Google's Chrome Browser. When installed, the extension creates a new button on the browser toolbar. Clicking
Introducing Text Tools - a simple text manipulating Plugin for Coda on the Mac
Published on 2011-03-05 09:21:09
I recently released my first Plugin for Coda (Un-Encode Entities), now follow on from that I have created another: Text Tools. The Text Tools Plugin for Coda adds several options for quickly manipulating text in your html / php / javascript etc... f
7 Great CSS based text effects using the text-shadow property
Published on 2011-03-03 02:41:42
Time for a bit of fun with CSS!The following examples are all created using live text and the CSS text-shadow property. Apart from the Letterpress effect, all of the following examples make use of multiple shadows, and as such will only work on the f
Un-Encode Entities: a plugin for Coda
Published on 2011-02-21 09:31:34
I've been using Coda on the Mac since it first came out (2007 I think), and well, I've just discovered how simple it is to create plugins using nothing more complicated than PHP. So here it is: Un-Encode Entities, a Plugin for Coda. It works like th
How to integrate jQuery with Magento
Published on 2011-02-21 04:51:42
I recently ran in to this problem whist developing an e-commerce site using the Magento platform. I needed to incorporate Flowplayer in to the site and for that purpose I wanted to use jQuery. The problem is that Magento relies heavily on the Prototy
New Safari Extension - QR Code Generator
Published on 2011-02-14 08:31:51
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
QR Code Generator
Published on 2011-02-13 08:58:50
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
See your website as a search engine sees it with Lynx
Published on 2011-01-24 07:09:35
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.
Ever wanted to know how many lines of code you have written?
Published on 2011-01-15 08:16:33
Whilst working on a large site, or even a moderately sized one, there may come a time when you stop and think &lquo;Just how many lines have I coded?&rquo;. Today I'm going to show you a very simple way to find the answer, and also break it down into
10 Mac Apps for Web Design and Development
Published on 2011-01-09 10:36:55
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
3 New Dashboard Widgets for 2011
Published on 2011-01-04 03:18:06
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'. 'Terre
@font-face embedding made simple with Font Squirrel
Published on 2010-12-22 08:55:21
Font Squirrel makes font embedding with CSS a cross-browser reality! The CSS @font-face rule is hardly new — in fact it was proposed in CSS2 and has even been supported in Internet Explorer since version 4! The problem has always been that dif
Convert to entities - a widget for Mac OS X
Published on 2010-12-19 10:43:41
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 wa
3 Mac Dashboard Widgets
Published on 2010-12-18 06:51:42
I have recently started coding dashboard widgets for Mac OS X and now have 3 to offer: 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 re
Batch convert images with Automator on Mac
Published on 2010-12-05 08:16:31
Following on from my post on FTPing images using only a keyboard shortcut, here's a quick post to show you how to quicky batch convert images from one format to another... 1) First fire up Automator, and select 'Service' as your chosen workflow tem
Create a downloadable hCard using Microformats
Published on 2010-12-01 16:32:05
First of all what is a hCard? hCard is a simple format for sematically representing people, companies, organisations or even places in HTML or XHTML. And what are Microformats? Well the Microformats website states: Designed for humans first and ma
FTP files quickly on a Mac using Automator
Published on 2010-11-30 04:49:55
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
How to paginate a random list using PHP and MySQL
Published on 2010-11-22 04:30:38
Displaying a list of data from your MySQL database and the breaking the result up in to pages is fairly straightforward to achieve, you simply need to two variables in PHP. One for the amount of data you wish to display on each page $amount=20; and a
Use the Google Font API to break away from web safe fonts
Published on 2010-11-20 15:48:22
Aren't you tired of designing site with the same old font stacks? Tahoma, Arial, Helvetic, sans-serif… yawn… I'm going to show you how you can add an extra touch to your site by using the Google Font Directory.
Although the choice is f