You're looking at all articles on The Hickensian tagged 'safari'

Safari Omnibar

Safari Omnibar is a SIMBL plugin for Safari that enables a single addressfield/search bar like Google Chrome’s Omnibox. Its still fairly early days, but it works well, and has just been updated to support search shortcuts:


(the search bar is hidden after installation)


To edit keyword searches, right click the address field…


… and then you can then enter the search keywords

This is of course functionality that’s been available in Opera and Firefox, long before Chrome, but this is a great way for folks that prefer Safari to get it.

Safari Omnibar is hosted on github

Safari 3 thoughts

Apple has announced Safari 3 beta for OS X and Windows. To make room for more important thoughts in my head, here’s the associated Brain Dump™.

  • Updated version of WebKit. Nothing new to Omniweb 5.5 users, but my un-scientific perception is that it’s speedier. I think there will be some users complaining of ‘ugly form buttons’ though…
  • Draggable Tabs. Yay!
  • Inline Find, and very nicely implemented it is too. Yay!
  • Resizable textareas, extra yay. Is this the only browser to do this by default?
  • The Web Inspector is in there too. Not a patch on Firebug, but a welcome addition.
  • Its wonderful looking at a website on XP, and seeing gorgeous text smoothing. Even the apps menu’s are smooth – presumably it’s using webkit to display the interface too?
  • WebClips are conspicuous by their absence, but I’m assuming that this is a Leopard only feature.
  • No session saving. I wasn’t really expecting it, but this does make Safari the only browser that doesn’t reopen your tabs inbetween launches. As some commenters have pointed out, you can ‘Reopen previous windows’ from the History menu, but sorry, there really needs to be a preference for this, so that the process is automatic.
  • Looking at the preferences window in Windows is slightly scary. Like those PC-esque interfaces in early version of Firebird/Firefox for the Mac. I did feel that the interface should’ve been a better Windows Citizen.
  • I wondered if installing this on Windows would make Lucide Grande available to the OS. It seems that like iTunes, it doesn’t and keeps it to itself. Shame, I really hoped it would available to IE, Firefox and Opera as well, although as Ben Darlow points out, it does look ropey when aliased!
  • Also wondering if Apple will give a copy of the updated webkit to 10.4 users, in the same way they did for Panther users?
  • The sizable textareas thing and smooth text rendering seem to be only new browser features to Windows users. Is that right? If you’re a Windows user, and have tried the Safari 3 beta, I’d love to know what you think: Does it make you want to switch over?
  • Developing Javascript to work in Safari in the past has been a pain in the arse, so I would love to know from any Javascript developers whether the situation is improved in v3.
  • I wonder if/when developers of Saft, SafariStand and Inquisitor will update their plugins for SF3? My money is on Hetima getting a SafariStand b18 out first. (Update: Inquisitor actually works fine! Also, SafariStand will work if you turn off ‘Enable Site Alteration’).
  • I find the new interface too dark, but I use the Uno shade which for me is just right. To clarify: I’m referring to the screenshots of the Leopard version, which I find darker than the brushed metal. The UNO shade I find just right.

Pimped Safari Icon

There has been a lot of requests for one of these, so I’ve finally made the PimpMySafari logo into a custom Safari icon!

Screenshot of the application switcher with the new safari icon

Download this zip file to get the icon as an .icns file, iContainer and applied to a folder.

How To Install

There are 3 ways to install the new icon

  • If you have Pixadex, import the iContainer, and apply the icon with Quick Drop
  • Ctrl Click Safari.app and choose “Show Package Contents”. Drop the new compass.icns file into the /Contents/Resources/ folder.
  • Select the folder with the PMS icon, choose Get Info from the Finder (Apple-I). Click the icon and copy (Apple-C). Do the same with the Safari.app but paste intead of copy.

Please note that due to lack of time this icon file does not include 48,32 or 16 pixel resolution components, but should be fine in most situations.

Enjoy!

A Proposal for a Safari Microformats plugin

In a nutshell, I want to be able to easily take advantage of Microformats. I want to know about and get that information with the same ease as RSS Feeds, and I want it to work on a Mac.

Firefox already has its ‘Tails’ extension, but this currently only displays microformats in the sidebar. There’s the TailsExport extension for exporting the data found, but sadly, this is Windows only.

So what tools do we have on OS X? Tantek has put up some bookmarklets that will do the export for you, but the trick is detection – knowing that there is data present in the first place. So either the site author needs to announce the presence of microformats (in the same way that they would display an icon for RSS feeds), or the browser has to check and inform you. I prefer the latter, but currently, Endo is the only OS X app I know that detects (it looks for the hCalendar format and passes it onto iCal).

What I’m doing here is illustrating a request I sent to Hao Li (Saft), Hetima (SafariStand) and Kasper Nauwelaerts (Safari Tidy), all developers of excellent Safari plugins. I can’t imagine that Apple are intending to integrate Microformats any time soon, so I thought it was worth trying the plugin developers. If you don’t ask, you don’t get!

Here’s what I’m imagining in Safari (although I would equally welcome this in Camino and Omniweb). Microformats are detected and announced the same as RSS feeds – an icon appears in the location bar to warn you. (Incidentally, in these screenshots, I’m using Safari Standardized Feed Icon from Mac Specialist). I’ve picked on Chris Messina’s Blog here, as it had a post with plenty of hCalendar love:

Mock screenshot showing Microformats notification icon

(Click to see the full image)

Clicking the icon reveals a sheet, with details of all the available data on that site hCards, hCalendars and so on. Each type is represented by an familiar OS X system icon:

Mock screenshot showing sheet with available Microformats

(Click to see the full image)

Data can be added individually, or all in one go. An option to cancel is there too. I’m not sure about the small + button, but you get the idea. I also think the ‘hCard’ bit is too techie – perhaps something like an email address or phone number?

I don’t know how hard this would be to implement, but I certainly needed to illustrate what I was asking for. Cross fingers! Any further suggestions and ideas welcome.

Update: Ben Ward had a similiar idea at the same time, but Ben expands the idea further. I like the concept of a ‘downloads’ style window. Go see.

Another Update: Remy Sharp has implemented this functionality as a bookmarklet !

Web Development with... Safari

When it comes to testing and debugging sites, it seems that Firefox can’t be beaten. Not only does it have an inbuilt DOM Inspector and Javascript console to beat all others, but the plethora of useful extensions is unmatched. Everyone knows and uses Chris Pedericks Web Developer extension, along with any number other handy extras – Firebug, X-Ray, Aardvark, etc.

Other browsers have useful tools though, which gave me an idea for an ad-hoc series highlighting useful web development features, starting with Safari. While it doesn’t have an official plugin architecture like Firefox, that hasn’t stopped developers finding ways around it and providing excellent plugins.

The Web Inspector

(More Information)

The first one isn’t a plugin at all, the Web Inspector is a ‘future feature’ of Safari, available in the WebKit nightly builds. Until this becomes the mainstream release, you have to download a webkit nightly from here.

Once you’ve coped WebKit.app over to your applications folder, open terminal.app and type:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Web Inspector context menu command

Then when you launch WebKit.app instead of Safari the context menu has the command ‘inspect element’ at the bottom. Selecting this will show the inspector. Like the Mozilla DOM Inspector, it will show you source and style information for any element, but in an Aperture style ‘HUD’ window.

Web Inspector window

If you want to keep your copy of WebKit up to date, you can use NightShift to automate the process for you.

SafariStand

(More Information)

SafariStand's action menu

SafariStand adds an ‘action menu’ button to your toolbar options. Its not there by default – you have to customise the toolbar to add it. Once added, you can use the useful ‘Sub Resources’ menu, which lists all the linked assets from the page – css, javascript, gifs, swfs, etc. Select one, and it opens in a new window.

‘Show Page Info’ option which displays this date again, but more like Firefox’s page info window.

SafariStand page info window

‘Show Related cookies’ shows you all cookies from the current site, with options to delete them.

You can also use SafariStand to colour your view source, but I recommend SafariSource for that (see below). Do tick the option of Source > Editable though, as this will allow you to make changes to the HTML and redisplay it, a great feature for debugging.

SafariTidy

(More Information)

Safaritidy status bar messageA newcomer is this tasty little free plugin. At the time of writing its only on version 0.2, but already adds many useful web development features.

It sits in the status bar, telling you of validation warnings and errors, and when clicked, displays the source view along with a clickable list of message in a split view beneath. It also adds line numbers to the source (joy!!). The plugin has been designed to work with SafariSource, and I have run both with no problems.

SafariTidy source view

The screenshot above shows SafariStands editable source tools (top toolbar), SafariSource’s syntax colouring and SafariTidy’s line numbers and warnings list.

SafariSource

(More Information)

This wee plugin gives you more options for colouring the source view. While SafariStand does have syntax colouring options, SafariSource allows you to be far more prescriptive about it.

SafariSource preferences

It requires SIMBL to be installed first.

Also…

One plugin I haven’t included is WebDevAdditions, which adds many useful commands to the View menu. I haven’t heard of any updates to this in a while, and I used to get problems using it in conjunction with other plugins, so I haven’t gone into any depth with it here. By all means, try it out and see if it works for you.

There are many more plugins for Safari of course, these are just the ones that aid web development. As always, you can find out about more plugins for Safari at PimpMySafari, where there is also a good list of webdev bookmarklets that have been tested for Safari.

Moving navigation solved

One of the headaches I’ve had with the position: fixed navigation on the journal pages is a bug that has reared its head in WebKit based browsers (Safari, Omniweb, NetNewswire etc).

OK, a little background. To avoid the IE flicker problem, my navigation’s rollover states are set as the background of a list item in a numbered list, and the ‘normal’ state is set as the background of the link. On hover the link background is set to none – revealing the rollover state below. With me so far?

When combined with position:fixed, the nav had a strange effect when scrolling. As you scroll down, the background of the anchor tag scrolls with it, but not the background of the <li> item:

Progressive screenshots showing navigation problem in Safari

This didn’t occur in Firefox or Opera (IE doesn’t support position:fixed of course, so it gets position:absolute instead), just in WebKit browsers. It’s a minor, but irritating problem.

The fix was not, as I thought it might be, applying background-attachment: fixed, but just this:

#nav ol a  { position: absolute; }

I’m posting it here in case anyone else has come across it too. A bug in WebKit? Trouble is, when you’re bending CSS to do thing it wasn’t designed to do (Image replacement and fixed positioning) it may not be.

Riffs, now for Safari too

As promised earlier, Riffs is now able to open its doors to Safari. Believe me, no one is more glad to see this than me!

There is now a blog to accompany the site – riffs on riffs so that Attap can communicate about what they’re up to, new features & changes, as well as gather more feedback about the site. If they let me, I’ll also use this to write about the CSS issues I encountered and solved whilst designing the site.

The inaugural post explains the Safari problems that held it back at the soft launch.

There’s still more to do, make sure you send in your feedback.

Dark alpha PNGs in Safari 2

Here’s a weird one, and it only affects Safari 2 (Tiger), not even Safari 1.3 or earlier, or Omniweb (using the earlier rendering engine).

If you look at my ‘contact section’, or my live search function, I use an alpha png in the background to overlay a transparent white tint over the header image. In every other browser (except IE of course, which just gets a white background) this works just as I expect it to, but not in Safari 2. The effect is transparent grey – not white. Richard Rutter was kind enough to check in Safari 1.3 for me, and the png shows up fine.

Apart from Paul Haine, I couldn’t find anyone else that was experiencing this problem.

After a lot of experimentation however, it turned out that Safari just needs the repeating image to be at least 2px square, not 1px.

Here’s a comparison:

Screenshot of before, using a 1px square png, and after, using 2px

I hope this is useful to someone else, who may have come across this problem.

Jeremy is right! Tiger underwhelms, except for...

I have to come out and agree with Jeremy, Mac OS X 10.4 Tiger is a little underwhelming. I’ve been using it for 8 weeks now, and overall, I’m not as wowed as I was with the Jaguar>Panther upgrade. Sure, there are a lot of improvements, but I’ve not found a use for Dashboard and Spotlight, the supposed major features. I’m still missing uControl’s virtual scrolling, and haven’t found any suitable replacement. Thats a sore point.

Dashboard takes a while to ‘kick in’, as you watch the widgets load slowly. I think this is still yet to reveal its usefulness, as a lot of widgets are things like ‘Amazon Search’. Hmm, referrer fees are wonderful thing aren’t they? Even the Transmit widget isn’t that useful. Why use that when I can just drag files to a dock or finder sidebar icon? It also seems to use up CPU unnecessarily, and since turning it off with DashOnOff on my powerbook is improved. Those widgets that I actually use (Calculator and currency converter) I have bookmarked in Safari, and open them in a tab. (To do this, ctrl-click the widget, and open the main .html file found inside).

To be honest, I still prefer my neat little Stattoo.

Spotlight is nowhere near as quick to use as Quicksilver (although, to be fair, I find the fact that it indexes text in PDFs quite useful). The jumpiness of its search results are annoying to say the least.

I think there are sleepy features that will reveal their usefulness over time, such as Automator, but until then, the one thing that has made me glad to upgrade is Safari 2. Not only for its new features (little things like undos in textareas), but for its RSS Reader. I had very low expectations for the in-built RSS reader, despite really wanting a browser+RSS solution. I’ve now found myself using it all the time. Its convenient, feeds are synced along with my bookmarks, and it suits my style of reading perfectly. I always prefer to view the actual content in the browser, using RSS readers as little more than a notification of updates. It also seems to cope well the 250+ feeds that I subscribe to – no speed problems at all.

Admitting this makes me feel very guilty though, as if I’m personally betraying Brent Simmons and David Watanabe.

I’ve had a few questions about how I use the RSS feature, so I thought I’d just quickly outline what I do. In my bookmarks toolbar is an ‘RSS Feeds’ folder, in which there are sub-folders for ‘Mac’, ‘Music’, ‘Design’ and so on. This means that each sub folder has a ‘View all RSS articles’ command at the bottom its menu, which means I can view feeds together, or just in 1 category. New feeds are set to be coloured red, and sorted by ‘new’. Finally, I’ve hacked the appearance to be little less vanilla. I love the fact that that I can do it all within the browser.

Safari RSS screenshot

In fact, there is only one drawback I’ve come across. Sometimes it takes two goes to get the RSS feeds displayed. Click ‘View all RSS Articles’ once – nothing. Go back and do it again, it works fine. I’ve also seen this happen on individual feeds, but there doesn’t seem to be any reason or reproducible steps to it. Has anyone else found this? Its odd, but I find that I can put up with this (and hopefully its a bug that’ll be fixed in the future).

So thats the way it is now, at least until NetNewsWire gets even more browser features…

Safari tabs for Firefox updated

When I last explained how to hack Firefox to get Safari style tabs, there was a missing element – close buttons on each tab. There is an extension to do this called Tab X, but it only seems to work on the Mac when using certain themes, not including the default mac theme. Fortunately, a nice fella called Chad has now created a mac version, which you can install directly from here, and it works a treat.

Safari style tabs for Firefox - with close buttons

There are just a few fixes that need to applied after this. I couldn’t get the preference to hide the tab-bar close button to work. No problem, this just gets added to the userChrome.css file:

/* Tab X mods <strong>/
/</strong> ------------------------------------------------------- <strong>/
	

.tabs-closebutton-box { /</strong> hides the tab bar close button */ display: none !important; }

Also, when used with the Safari tab styling, the position of the close button is a little too high, but this sorts it out:

.tabs-closebutton {
padding-bottom: 0 !important;
 }
Finally, a separate problem I’d come across was with site favicons. Sometimes I’d get a favicon 16px high but 32px wide – presumably when the 32×32px resource was included in the favicon. This sorts that out:
.tab-icon {
padding-top: 0px !important;
width: 16px;
height: 16px;
}

If you want a true Safari tab-look with no favicons, use this instead:

.tab-icon {
    display: none !important;
}

I’ve updated the original download package with these small changes, so let me know if you have any problems.

Pimp My Safari: As ready as it will ever be

“As ready as it’ll ever be”, is an apt description of a little side-project of mine just launched, Pimp My Safari.com. Its been a pet project for many months, and was started as a reaction to all the sites cataloguing Firefox extensions. Many excellent plugins for Safari have been developed, but because Safari doesn’t have an official ‘extension architecture’, many are unaware of these extensions. This is where PimpMySafari comes in – a resource for the pimping of your copy of Safari no less!

Its just intended to be a simple, functional, information-based site. I’m not giving it a whole lot of time design-wise, its not the purpose. I just wanted a central place to promote these add-ons. I haven’t even bothered testing in IE, but I have given it a scant look in Mozilla.

So here’s my plan. All the Safari related browser talk will now go to Pimp My Safari, leaving this blog returning to matters of design, css, music and family. Those few who are interested in such things can now read them there. When meeting people at SXSW, I often found myself apologising for running a dull browser-based blog. I shouldn’t have to, but I did feel a little embarrassed.

I’m still rather wary of blogging about my family, I’d like to do it more than I do, but I just don’t feel comfortable doing it. I wish it weren’t the case, but the internet isn’t an appropriate/safe place for such things – there are nutters out there. Anyway, I digress…

A quick word about the CMS

When I started this, many months ago, I was using WordPress 1.5 nightlies (I wanted to make sure that I wasn’t missing out on anything). While I was very impressed with how far it had come since the last time I’d evaluated it (1.1), it was a relief to get back to Textpattern, and thats what I’ve used for the final site. I don’t think its just a case of being familiar with it. It just worked the way I wanted it to, and enabled me to easily run the entire site.

So there we go, I hope someone finds it useful. I’d love it if people felt like contributing, so let me know if you feel the urge!

Skinning sites in Safari with PithHelmet

It would easy to to think that Firefox is the only browser with cool extensions, and overlook the excellent ones available for Safari, such as Saft, Stand and PithHelmet.

Like Saft, PithHelmet started life as an extension with a single purpose, and and has since grown beyond its remit. Starting life as an advert blocker, PithHelmet now boasts powerful per-site preferences, and the ability to apply custom css AND Javascript to individual sites. This takes Omniweb’s site preferences and expands it even further.

Late last year I began playing with the custom css function, and while it didn’t work at first (preferences weren’t saved after quitting Safari), Mike Solomon, PithHelmets developer, soon ironed out all the glitches. Its been a real pleasure to communicate with Mike. I’ve questioned, he’s responded with new versions, and now he’s added the ability to create a single theme file that can be sent to others. Dragging a site rule from the preferences window into the finder creates .phr file (Pith Helmet Rule), but now it will include all the css, javascript and images for your site skin.

Why bother skinning a site? Actually, there is a purpose of sorts. Lets say for example that you’re a heavy Gmail user, but you’d like the interface to look a little less PC. With a site skin you could alter it to look more OS X.

So here’s the one I’ve been working on. A Spotlight-ish skin for de.licio.us. The start of this idea came from Tom Coates mockups of bookmark tagging inside Safari. My aim was to make de.licio.us look more like a part of my browser, rather than a web page.

delicious after being skinned

(click image for full sized version)

If you’d like to give it a go, download this site rule (ctrl-click and ‘Save linked file as’), and then drag and drop it into PithHelmets site preferences window. That should be all you have to do, but this is a ‘first try’, so do let me know if anything goes wrong.

The css for this is a bit quick and sloppy. I’ve coded it so that the css can be used in a usercontent.css (that would get applied to every site), so while it’s flexible, it could be cut down when being used in the PithHelmet context. Ways to improve this (if I had the time) would be to use a javascript to dynamically create classes for the alternating rows, rather than the limited adjacent sibling selector method that I used in the css. All in all, it’s not perfect, but its enough to demonstrate what you can do. Someone with more time could take this and improve on it.

To create your own site theme, you have to use copious amounts of the inherit value to override the site’s own css rules. Then once you’re ready to go:

  1. visit the site you want to change in Safari
  2. open up PithHelmet menu>Show Site Preferences. If you haven’t already set preferences for that site, it will be at the bottom of the list.
  3. under ‘style’ select your custom css, and javascript, if applicable.
  4. type in a theme name
  5. If your theme requires images, create a directory with the theme name:
  6. /Library/Application Support/PithHelmet/com.apple.Safari/themename and then add the files to that directory
  7. make sure that images in your css file refer to file:////Library/Application%20Support/PithHelmet/com.apple.Safari/
  8. themename/newlogo.png (You can leave the ~, as this will choose the current users home directory, and allow the theme to be used by others). If it all looks OK, drag and drop the theme onto the finder, and this will create the .phr file with all the theme information.

The ability to create an easily sharable site theme opens up possibilities. Sites like de.licio.us are perhaps a little easier than some to theme, as all the styling is done with external css.

So, who’d like to have a go?

Full Metal interface

Many users are divided over Apple’s use of brushed metal windows. My personal feeling is that I like it in certain apps, but not others. It’s overuse by Cupertino seems to have given many independent software developers the impetus to use brushed metal too, in an attempt to ‘keep up’. While the Human Interface Guidelines are full of good solid reasoning, it doesn’t help when Apple go against them, and then produce beautiful interfaces as a result. It feels as if the pressure is on – you must use metal for your app to look cool and sell.

I’ve been following what John Gruber has to say on the matter with interest, there are two excellent articles about this subject, and I’ll try not to go over old ground, but there is one argument I’ve not heard before, and it’s the reason I like Safari’s metal interface – differentiation. Take a look at this example of one of my favourite sites in Camino:

Airbag in as seen in Camino

and now in Safari:

Airbag in as seen in Safari...mmmm...

I don’t know about you, but I find the Safari one much more pleasant to look at, because there is a clear demarkation between what is the browser, and what is the web page. I haven’t done a survey, but I’d be willing to bet that a large majority of web sites have white, or at least pale backgrounds. In the standard aqua coloured window the distinction isn’t as immediately clear. I’m not sure why this thinking doesn’t extend to other areas such as text documents, but there it is. I like differentiation.

(Having said all that, one thing that does give me that differentiation in a non-metal app, is the grey tab background on my safari style tabs for Firefox…

Airbag in Firefox

I find that the darker grey is just enough to create a visual separation.)

Safari style tabs for Firefox OS X

As a CSS designer, I’m really enjoying the ‘customisablity’ of Firefox with a language that I understand. I can’t program, but I can do CSS, which it uses to define the look of its interface.

Screenshot of the safari-esque tabs

Here’s another little mod for OS X* Firefox users. It emulates an aqua version of Safari’s upside down tabs. I personally love this style, and prefer the more compact size of them compared to Firefox’s default tabs (which are designed to emulate the window title bar).

All you need to is quit Firefox, download these files, and pop them into your Firefox profile’s chrome folder. (*Please note, this is designed to use the default pinstripe theme as its basis – it won’t work on windows – sorry!). If you’ve already made changes to your userChrome.css file, you’ll need to add the enclosed css rules in your file. Please let me know if you have any problems using this mod (there have been some issues for people using the Sage mods posted earlier).

Thanks to Kevin Gerich, who helped me solve the last hurdle in creating these – changing the text size. I’d never used the CSS property font: icon, before.

Safari grinds to a halt - culprit found

Hmm. It looks as if Zlog had this problem and I’d like to know if anyone else has too. Safari seems to have a problem with usage over time. The more I use it, the slower and unresponsive it becomes. Resizing the window takes the patient of a saint. Clicking on toolbar bookmarks has a 4 second delay, and it really has to think hard about showing you a menu item. Whats that all about? Does Safari need a sit down with a cup of tea the same as I do? The simple fix is the quit out, and relaunch. Everything is back to normal, until later in the day when I start to notice it slow down again. Grrr. Not so bad when you’ve got Saft reopening your last used tabs for you, but I still shouldn’t be having to do it. I have wondered whether this has anything to do with the various plug-ins for Safari that I’ve installed, so I’d particularly like to hear from anyone who runs Safari in its clean, naked form. update – It seems that after a length of time Safari will slow down, until you relaunch it, but that it was Saft that made this a little worse. Fiddling with caches of pages/history/favicons made no difference, but removing Saft from the input managers folder did. Its a bit of an arse using Safari without Saft, but the speed difference was incredible!

New Safari Stand features

Sorry, this will the be the last browser post in a while – promise. Stand for Safari has been updated to work with v1.2.3 (v125.9), and has added some nice new features.

First of all Doug Bowman pointed out that there is an english translation page for Stand here. That makes life easier.

You can now replace either the Bug Report, Autofill, Add bookmark or Home buttons with an ‘Action’ button. This gives you a drop down menu with the following options:

Action menu

(*Note*: This menu now includes the ability to view HTTP headers, cookies for that site (with another option to delete them) and a selectable menu of all css and images etc from that page – amazing!)

Workspaces can now be opened in new tabs as well as saved, and you can make ‘labelled bookmark separators’ by adding a folder with the following title:

-:-label here.

This adds a greyed out text label – nice.

Menu label

Another nice feature I’ve discovered is that you can get the history and bookmark searches to display within the browser window rather than in a smaller, separate window. To try this out, drag and drop these links to the toolbar: History search and Bookmark Search.

You can also add RSS Feeds. Create a Bookmark Collection called ‘Stand Bar RSS’ and bookmark feed URL’s there. You can then read these feeds in the ‘Stand Bar’ under the ‘R” menu. While I probably won’t use this feature, its good to know that there are developers wanting to add value in this way.

Stand Bar RSS Feeds

When you combine Safari, Saft and Stand you get one very good browser.

Extending Safari 3: Stand

I’ve recently discovered another plug-in for Safari, called Stand. I can’t tell you a whole lot of detail about it, as the site is written in Japanese. What I can tell you is that its free, and it allows you to do the following slick actions:

  • Allow syntax colouring in viewed source (no control over colours used though)
  • Specify a font and size for viewed source (I like this – I have a thing about using Lucida Grande for source view).
  • Search your bookmarks and history (very nice, although I tend to use Quicksilver to find bookmarks quickly, this is even faster).
  • Specify that all links to a ’_blank’ target open in a new tab instead of a new window. This is nice.
  • Save tab layouts as workspaces alá Omniweb.
  • Assign categories, colour labels and comments to new bookmarks
  • Create search shortcuts (as in Sogudi and Saft)
  • ‘Site Alteration’. This allows you some basic preferences on a per site basis, such as what encoding to use, and whether images, pop-ups, plug-ins or javascript are to be allowed.
  • Remove favicons.
  • Set a time delay for auto-closing the downloads window after completion.
  • It also seems to add ‘Copy Link HTML Tag’ command to the context menu when ctrl-clicking links. (I’ve only just noticed this though, so it could’ve been there all along!)

This is a beta, so although I could save windows as workspaces, I couldn’t find a way of reopening them. There is also a window called the ‘Stand Bar’, which includes searchable bookmarks and history again, plus 2 other menus which haven’t been ‘hooked up’ yet.

Having said all that, it appears to be very stable, and chuffed with my lovely new source view. Its another worthwhile addition to make Safari the browser it should be.

RSS sidebar in Safari

Those of you who are registered users of Saft will now have the latest preview version with the new sidebar feature. The plugin nature of the sidebar (each panel can be a web page, perl script or shell script) has got me wondering about what useful little widget I could put in there.

Here’s my first idea. After hacking the excellent Feedonfeeds news aggregator script, I’ve made a little OS X style RSS sidebar. Feedonfeeds is a php/MySQL solution that you can install on your site, rather than using a desktop client. From here I can click the unread number to view the latest feeds, the grey number to see all the recent entries, and the blog name to go straight to the site. The first 2 open in a simplified format – very like the RSS Reader/Sage extension for Firefox, and the upcoming Safari RSS reader.

All the menus are faked with CSS, but it helps it look like its part of the browser, rather than a separate web page:

screenshot of the rss sidebar

(It makes it so much easier when you’re writing CSS for just one browser!)

The advantage of a browser based, non-local solution is that its always up to date. I can access it from anywhere, and pick up where I left off. Downsides? Just one so far – It isn’t as good as NetNewsWire at detecting feeds. Where the XML has errors it just gives up. I’m giving it a trial for a while, I’m not sure yet whether it would replace NNW. After all, NNW 2 is going to be introducing a sync feature – great if you use more than one machine.

If this looks like the kind of thing you’d like to use, let me know. If people are interested, I’ll clear it with the creator before uploading the additonal files to create the sidebar.

Next, I think I might have a crack at creating a plugin similar to the Web Developer Extension for Mozilla and Firefox.

safari sidebar - beta screenshots (updated)

That’s right. I’ve just received a new Saft beta, with the sidebar that I’ve been bellyaching about for months! To be honest, alhough I pestered Hao for this feature, I never really thought it would be possible, but hey, it never hurts to ask. Hao seems to like a challenge however, and he’s been kind enough to allow me to post screenshots here.

This version works the same as other releases of Saft. The plug-in goes into the Library>InputMangers folder replacing the previous version. Once launched, Safari then has the ‘Show Sidebar’ command in the Safari menu (this is a temporary position).

At the moment, once opened, there is no way to close it (this is a beta after all), but I get the feeling that I’ll probably leave it open most of the time.

Enough talk, here’s how it looks (full size version here)

Thankfully, Hao decided on a Finder-style sidebar, rather than an OS X drawer. These always look a bit stuck on to me (although I’m warming to them more these days).

As you can see, the sidebar sits underneath the tab bar, and its width is adjustable as you would expect. At the moment there are 4 ‘panels’ – bookmark searching, history, Versiontracker RSS and a google search. In the real release, Hao says that “one should be able to add RSS feeds, URL shortcuts like the one for Google, sidebars for local html files”. Superb! I had wondered whether downloads should go in there too, but as the recent builds of Shiira has shown, this could be a bit too cramped.

At the moment, just the bookmark search doesn’t work. Each of the panel buttons toggle the content beneath it (click to show, click to hide). Scrollbars come in when this pushes content below the window.

History is searchable, so although it only shows the last 12 places, as you type in the search field, the history is filtered.

The prelimary RSS panel shows just Versiontracker posts for now, but this works just fine. With all of these panels, command-clicking links opens them in new tabs, as you would expect.

Finally, the google search panel actually loads the google homepage in the sidebar, while search results are automatically opened in a new tab. This gives you a few more options than the toolbar google search, but I’m not sure I’d use this over the toolbar option.

The beauty is, each of these panels is just a html page, which I’ve styled with CSS. Hao explains: “The extended parts of sidebars are really just a mini web page. For history, bookmarks and RSS feeds, there are html templates in Saft’s resources folder. You can just modify it to whatever you like. Also, in the same way as adding RSS feeds, I will add support for sidebar template in a way that user supplies a folder with a plist file, which points to a html file, URL or a script file that generate HTMLs, so you can add almost anything to the sidebar…”(!).

Updated: Hao has done further work into the extensibility of the sidebar, and extra sidebar items can easily be added as .plugin files. As mentioned above. these can other web pages (local or remote – I’ve now got one set up for adding links to my textpattern setup), RSS feeds, and in the future – scripts such as perl or shell. So you can have whatever you want going on in there! The first application of this that I can see is a Safari version of the Firefox Web Developer Extension. Although not all would work in Safari, it would be an easy way to add a large folder of development bookmarklets to Safari.

Here’s an example. I’ve made a simple sidebar plug-in to view my Shortstats in the sidebar:

Thats all there is to say at the moment, except that I’m like a boy who’s just been told he can fly a real X-Wing Fighter. This has got real possibilities!

Saftari

Saft has been updated yet again. It was only a week or so ago when Hao Li added the ability to save and restore windows and tabs on quit. Now, check out these new additions:

  • New feature: Customizable HTTP timeout
  • New feature: Separator in bookmark menu
  • New feature: Control-1 to 9 to popup bookmark menu or open bookmark
  • Improvement: Saft contextual menu items for shortcuts grouped in sub-menus
  • Improvement: Open new tab for shortcut searching from contextual menu when holding down the option key

Look at that second one. Separators! I wrote to Hao Li asking for this feature, but never thought he would actually do it. How good is that?! The guy is putting Apple to shame with his development speed.

So Hao, if you’re listening. Here’s my next request to keep you busy.

Safari menu separators

screenshot of the menu separators

I’ve come up with a very lo-fi hack for creating bookmark menu separators in Safari. By combining a grey line favicon, with the most minimal page title I could find (unfortunately, Safari doesn’t allow blank titles) you can get a passable separator. If you like the look of example above, simply go to http://sep.hicksdesign.co.uk/, and bookmark it. Once in your bookmarks it can copied into other folders by alt-dragging.

Updated: As clever clogs Shaun Inman has pointed out in the comments, you can remove the title completely by editing the bookmarks.plist file and changing · to . Safari accepts this and just leaves with the grey line.

Updated again: If you prefer to use a plain-as-possible favicon (a single-pixel of pinstripe colour) then go to http://sep2.hicksdesign.co.uk/ instead.

extending Safari 2: saft!

One of my niggles about Safari is that I’ve always felt it’s a little short in features. As mentioned before, Pith Helmet (Advert blocking), Sogudi (Address bar searches) and Safari Enhancer go someway to improve it. I want to use Safari – I love its clean, elegant interface and speed, but sometimes it feels a bit lacking.

I’ve been testing and enjoying the radically more stable Omniweb 5 (beta 3) for a few days now, and enjoying its workspaces feature. This reminded me that Safari is about the only Mac browser that doesn’t let you save a group of tabs. However, Saft v6.5 was released today, and amongst its many new features – the ability to save tab groups. I’d never looked into Saft before, as I’m not that bothered about full screen or kiosk mode (which was its original purpose) so I was surprised to see that its developer was busy adding more functionality.

Even better than tab group saving though, is the option to save a browser window – its tabs, window size and screen position. Previously saved windows are accessed through the File menu, as well as the ability to delete saved windows. Saft also features the same shortcut searches from the address bar as Sogudi, but adds those search engines to the google search bar menu as well. Nice.

Add to this PDF export/back/forward commands in the context menu, a preference to force new windows to open as a tab, type-ahead searching and suddenly Safari starts to feel like a fully-featured browser.

The only possible downside to all this, is that you have to pay $10 (£5.89 in UK money) for all this extra functionality. Some may feel its not worth paying to extend a free browser, especially when Apple might get around to adding these features someday. Its up to you, but personally I felt that it was a pittance for functionality that I would enjoy every day.

I’ve asked for bookmark menu separators in the next version – you never know…

Finallly, a quick mention for Safari Sorter, which will organise your bookmarks alphabetically for you.

New Browsers

After excitedly downloading the Omniweb 5 Beta yesterday, I was all prepared to give a critique, but as usual, John Gruber says it best.

Suffice to say that OW 5 shows a lot of promise, but the beta crashes and hangs too much too often to use it for any length of time. The thumbnail tabs are wonderful and I’m no longer a sceptic. The toolbar icons are not to my taste though. I feel a browser theme coming on…

There’s more activity on the browser front – Safari 1.2 has just been released, and is even zippier, as well as adding few more features. Safari Enhancer and PithHelmet have both been updated to work with 1.2. There are bug fixes too: The aggressive caching issue is fixed, so I no longer have to use Firebird to view Dunstans Blog. Dan Cederholm reports that the hover bug is fixed too. This was causing my site logo to stick on ‘home’, so I’m glad to see the back of that. The one downside is that you now have to use Panther to get the updates – Jaguar users have to stick with 1.0.

Also, Firebird 0.8 is due out next Monday. In the nightly builds annoying OS X bugs such as no new browser window when clicking the dock icon, have been fixed, and its looking good.

Extending Safari

Just wanted to share with you my favourite apps for extending the capabilities of Safari – There might be one here you haven’t tried…

Safari Enhancer – Does a whole variety of tasks, but I use it to enable the debug menu (contains a spoof user agents menu), remove the metal skin (looks great in Panther!) and deactivate the cache.

Sogudi – creates search shortcuts to use in the location bar. For instance, to search for ‘skEdit’ on Versiontracker, just type ‘vt skEdit’ into the location bar. Comes with some preset searches, and the ability to add your own.

Pith Helmet – Blocks adverts, particularly annoying animated gif banner ads. Just makes life so much nicer. You can specify sites to always block or never block content from.

Safari No-Timeout – get longer than 60 seconds before Safari times out.

What’s more, these apps are all free. There are some nice people out there.

Incidentally, the new OS X 10.3.2 update, seems to include enhancements Safari or the WebCore, as I’ve just noticed that title attributes now show up as tooltips, as promised by Dave Hyatt. This doesn’t seem to be mentioned in Apple’s release notes. Presumably, this means that the other niceties on his list are now installed too.

safari and 10.2.8

If any other OS X users had the misfortune to update to 10.2.8 before it was pulled, you may have noticed that Safari Enhancer doesn’t work anymore. I use this to deactivate Safari’s cache and enable the debug menu. Also I’ve been trying Safari ‘demetallized’ recently, which looks great combined with a Panther OS Theme.

I found a fix on the Lord of the Cows forum. Copy Safari (cmd-D), dump the original, then remove the word ‘copy’ from the duplicate version. Works a treat.

Safari final in June?

Think Secret reports the possibility that Apple is ready to release the final version of Safari next month, before the Worldwide Developers Conference.

There has also been a rumour flying around that iSync will feature a bookmark synchronisation option for Safari. This is partly due to the bizarre ‘iSync is updating your bookmarks’ error that users of the latest Beta have been getting.

Archives by tag:

2006, 2007, 2012, 2013, accessibility, acoustic, actionscript, adobe, advert, adverts, advice, air, alternative, ambient, analog, apple, applecare, appletv, apps, appstore, art, articles, atmedia, attap, audio, australia, authenticjobs, awards, ban, basecamp, bbc, beatles, belkin, bikes, bikeshops, bitmap, blackhole, blog, blogs, bluetooth, boardman, bonecho, books, boxee, boxeebox, boxmodel, braindump, breakfastbaps, britain, british, browser, browsers, browsers.mozilla, bug, bugs, cairo, cakes, calendar, camera, camino, casestudies, cbbc, cc, chap, chaps, charity, cheerup, cheese, childreninneed, christmas, cinelli, cms, cocoalicious, coda, code, collections, colnago, colour, colourblind, colourblindness, comedy, comments, competition, comps, conferences, copywriting, cotswolds, country, covers, craft, crafts, creativity, cs5, css, css.webstandards, cycling, danielsmonsters, delicious, dell, design, design.colourblindness, desktops, development, digital, discovery, discussion, diy, dock, doctorwho, dogs, drawing, dream, dreams, dropbox, drwho, education, electronica, email, emoticons, endofyear, england, events, evernote, expressionengine, eyetv, family, favicons, feedback, femalevocal, figures, film, films, firefox, fireworks, firstworldproblems, flash, flexible, flickr, flock, fonts, found, foundries, foundsounds, fowd, free, freelancing, frontrow, ftp, g5, games, gaming, gardening, garlic, geek, geekends, geekery, geekmediabox, genesis, genius, gentleman, gifs, gigs, google, googlereader, grammys, graphics, greader, grids, gtd, guvnor, hacks, handbag, handbags, hardware, harrypotter, helvetica, helvetireader, heros, hicksdesign, history, holiday, hosting, howto, hp, html5, humanrights, icab, ical, ichat, icon, icon design, icondesign, iconhandbook, icons, ideas, illustration, illustrator, illustrators, im, images, indesign, infographics, inspiration, installation, intel, interface, interfaces, internet, internetexplorer, interview, interviews, inventions, ios, ios7, ipad, iphone, iplayer, ipod, itsmyblogandillbangonifiwantto, itunes, javascript, jobs, journal, justabitoffun, knitting, koken, leaflets, lego, leigh, less, lifecraft, lifeio, links, list, listening, lists, littlebigplanet, logo, logo and branding design, logo design, logos, london, londonbombing, mac, macbook, macmediacentre, macmini, macs, macworld, magazine, magazines, magazines.illustration, making, maps, mechanics, mediacenter, mediacentre, mediacentres, mellow, memes, memories, menus, merchandise, messages, metal, metro, microformats, microsoft, mkgn, mobile, modernart, moleskine, monkeybutler, moon, movabletype, movies, mozilla, mum, music, myob, natural, nerdery, newmusic, news, nintendo, nostalgia, nostradamus, notes, obituaries, offers, office, offscreen, omniweb, opacity, opensource, opera, organisation, os, osx, oxford, oxfordgeeknight, packaging, panic, panther, paper, parallels, pashley, penguin, people, personal, phantogram, photo, photography, photos, piecharts, pimp, pipes, plex, plugins, png, podcast, polygamy, posters, powerbook, practice, presentation, presentations, presents, press, print, printmaking, productivity, products, projects, propoganda, ps3, published, punditry, puppetry, questions, quicksilver, quotes, radio, radiohead, raf, railway, rants, rapha, recentwork, repair, resources, responsive, retorts, retro, review, reviews, riffs, righteousindignation, rip, ripoffs, rissington, rss, safari, saft, sage, samantha, sass, sauce, science, scifi, scrapbook, scripts, security, server, shelf, shiira, sideprojects, signage, simplenote, sites, siteskin, siteskins, sixties, skinning, skype, slides, slowcore, software, solutions, songbird, sony, sound, spam, speakers, speaking, sponge, spotify, spotlight, starflyer59, startrek, starwars, stationery, steel, stevejobs, store, stories, summerboard, surveys, svg, sxsw, syncing, tagging, talks, tasks, tattoos, tea, teasing, templates, ten, texpattern, text, texteditor, texteditors, textile, textpattern, thebeatles, theme, themes, theming, thenational, theory, tiger, time, timeline, tips, toys, tumblr, tv, tweed, typefaces, typography, ui, updates, updtes, userstyles, vans, vector, veer, versions, video, videos, vinyl, vw, wallpaper, web, webapp, webapps, webbies, web design, webfonts, webkit, website and logo design, webstandards, whitenoise, why, widgets, wifi, wii, windows, windows8, winter, wireframing, wishlists, wordpress, work, working, workshops, xhtml, xul, yojimbo, youtube, zengarden, zip

The Hickensian is the journal of Jon Hicks, one half of the creative partnership Hicksdesign. Take a look at the work we do.

AD by FUSION

Upcoming Talks

I sometimes pop up at conferences and waffle about design, icon creation in particular. Here's where I'll be next:

An Event Apart Chicago- "Icon Design Process" - 25-26th August 2014

Web Expo Guildford- "Icon Design Process" - 26th September 2014

playlist

See more on last.fm

Contact

Hicksdesign

73a High Street

Witney

Oxfordshire, UK

OX28 6JA

+44 (0)7917 391 536

Download vCard

Engine Room:

Hicksdesign is powered by Textpattern and hosted by the lovely boffins at Engine Hosting

Engine Hosting