Mar 23

Take your Mac web server with you using Dropbox

Mac OS, design, software No Comments »

I’ve been doing this for a few months now, and it’s proved so useful that I thought I’d outline the steps here. This is another implementation of a general routine that’s been covered elsewhere:

  • Install Dropbox on as many computers as you need
  • Store your application data and preferences in the Dropbox rather than their original locations
  • Make symbolic links to the Dropbox so that the system finds the files as usual
  • Watch in wonder as your work, settings and preferences update themselves across all your computers.

I’ve found it especially useful to do this with the /Library/WebServer/Documents folder in Mac OS X. I tend to work on web projects in there, so that I can preview them as I go simply by pointing my browser to http://localhost/ . (By putting them in the webserver folder, you gain the benefit of a PHP processor without having to upload the files anywhere.)

In more detail, then:

  1. Firstly, get a Dropbox account. It’s free for up to 2GB, plus you’ll get a bit of extra free space (as will I) if you use this referral link. Download the software and install it on all your Macs.
  2. Download and install SymbolicLinker. This step isn’t strictly necessary, as it’s easy enough to make symbolic links from within Terminal, but I find it invaluable to have this as a service from within the Finder contextual menu.
  3. Now the fun begins. Make a folder called Documents, somewhere within your Dropbox. (To avoid confusion you might want to put it inside some other folder first; doesn’t matter.) Move your entire set of web files into there, complete with folders.
  4. In a Finder window, right-click / control-click on the new Documents folder, and choose Make Symbolic Link. (If you haven’t downloaded SymbolicLinker, this option won’t be there, and you’ll need to do this in the Terminal instead).
  5. Open a new Finder window, navigate to /Library/Webserver . Make sure there’s nothing in there that you want to keep (your web files should be safely in the Dropbox by now, after all) and delete the /Library/Webserver/Documents folder.
  6. Go back to your Dropbox. Drag the file named Documents symlink over into /Library/Webserver, and rename it to just Documents. You should now find that going to http://localhost/ will point you to the files stored in your Dropbox.
  7. Go to your other Mac(s) and repeat steps 1, 2, 4, 5 and 6 . Done!

You now are in the extremely useful position whereby any web work you do at home on the iMac, say, will be synced over to the Macbook in the blink of an eye, ready to demonstrate to anybody. Just remember to connect the Macbook to the internet for a moment before you take it out of range, to give Dropbox the chance to update itself.

Tagged with: • • •
Feb 02

First thing to try when sorting out cross-browser CSS issues

tips No Comments »

This is really straightforward. Almost embarrassingly so. Web designers with even a modest amount of experience know this, and I’ll even go so far as to say that most of them do it regularly. But then, there are the ones like me who, despite its obviosity, tend not to remember, and suffer the consequences.

I do most of my web styling in CSSEdit, and most of my browsing in Safari. These are both about as standards-compliant as you’ll find, as they both use WebKit to display their loveliness, so I don’t normally think much about cross-browser compatibility until I’ve finished most of the work and come back to do the tweaking, testing and fixing. So, I’d recently finished working on a site and went over to test it in IE7, and a lot of it looked inexplicably stupid. Titles overlapped each other, indents looked frankly random, and so on.

The solution? Put this at the beginning of the CSS file:

* {
margin: 0;
padding: 0;
}

Simple huh? Like I said, very well-known, but easily forgotten.

Explanation: Each browser makes default assumptions about how to display various elements. So, in the absence of any other instructions, an h1 will be bold, a certain size, have a certain margin and padding, and so on.  When making a stylesheet you override these assumptions with your own instructions. But here’s the thing: different browsers can make different assumptions from each other. So unless you’ve explicitly stated the value of, for example, the margin underneath a heading, each browser will display it according to its own rules and you can’t assume it will look the same.

By putting that little snippet at the beginning of your stylesheet, you’re defining a rule that applies to everything. In other words, you’re overriding every assumption about (in this example) margins and padding, for every element. It will immediately change the look of your page, of course – because margins that were there by default suddenly won’t be any more. But from there it’s an easy matter to go through and add them back again. And hey presto: in my case, the layout was fixed for IE in about three minutes.

Tagged with: • • • •
Nov 10

Saving graphics from a PDF to use on the web

tips No Comments »

Now and then I get sent stuff and asked to turn it into other stuff. I’m sure there are better ways of phrasing that, but this will do for my purposes. Let’s agree to overlook the wording and move on to the content, shall we?

In the spirit of “please turn this stuff into some other stuff,” I was sent a very large PDF document so that I could use some of the images in it in a web design I was working on. It’s not too tricky to extract the graphics from a PDF — I found a tip here, for example — but then I ran into a problem. Each picture I extracted had its colour and contrast almost irrevocably strangified. I tried a bit of fiddling around in Aperture but it was clearly going to be a long and laborious process.

It seemed clear enough that the problem related to colour profiles, which are something I try to avoid learning about whenever possible. (To be honest, my calibrated iMac screen, InDesign’s PDF export, and every litho printing shop I’ve used work so well together that colour accuracy has never been a problem.) All these pictures had been converted for CMYK printing, rather than the RGB I needed.

But the solution turned out to be pretty straightforward if you have Acrobat Professional and Photoshop:

  • First of all, open the PDF in Acrobat Pro.
  • Choose Advanced – Print Production – Convert Colors.
  • In the Document Colors window that appears, look for anything that mentions CMYK; if it’s there, that’s your problem.
  • Select it, choose Convert from the Action drop-down, and choose an RGB profile in the Destination Space box. (I used Adobe RGB 1998).
  • Click OK and let it do its thing, then save the PDF. It won’t look any different at this stage, because Acrobat Professional had been converting the colours to display them on your screen anyway.
  • Now open the PDF in Photoshop.
  • When the Import PDF box appears, choose images (rather than pages).
  • Select any or all of the pictures you want, and the pictures are imported, correctly displayed, and ready for you to enact your nefarious schemes upon them.
Tagged with: • • • •
preload preload preload