25 February 2002

Some updates

Posted at 11:14 PM | Permalink | Comments (0)

Improvements to the Bookmarklets page and Photoshop tips pages. Thanks for the feedback!

19 February 2002

Documented all my installed bookmarklets.

Posted at 12:17 AM | Permalink | Comments (2)

Documented all my installed bookmarklets. The real reason I did this was when I found myself working at different offices, and noticed again how dependent I am on the system customisations I make. I'm planning to put as much configuration descriptions and downloadables on this site as possible in the near future.

18 February 2002

Photoshop shortcuts and tips

Posted at 12:00 PM | Permalink | Comments (8)

Middle of last year I summarised a bunch of Photoshop shortcuts and other tips for a friend. A thread on web-graphics prompted me to put them online.

I have since used Photoshop 6 and many of these shortcuts have changed. I'll update this list when I switch over to Photoshop 6 full-time. Let me also caveat this by stating that most of these will be insultingly obvious to most seasoned Photoshop users; I created this list to help new users and others who have yet to learn them. (That said, I know many designers who've used Photoshop for years and don’t know half of these shortcuts.)

Shortcuts: learn as many as you can. They speed you up, and keep your focus on the work.

Tool shortcuts (indispensable):

V
moVe
M
Marquee (Shift+M, circular Marquee)
C
Crop
W
Wand
B
Brush
E
Eraser
S
cloning Stamp
N
liNe (Shift+N, penCil = aliased brush)
T
Type
K
fill bucKet
I
Idropper (eyedropper)
G
Gradient fill

Tool shortcuts (slighly less indispensable):

P
Pen
O
Dodge / Burn / Saturate (Shift cycles through)
R
bluR / shaRpen / smeaR (Shift cycles through)
H
Hand
Z
Zoom

Completely indispensable colour shortcuts:

D
Default colours (Foreground/Background to B/W)
X
Xchange (Swap) foreground/background colours)

View mode shortcuts:

Q
Quick mask mode toggle = view selection as rubylith overlay, accepts paint tools
F
Cycles through Normal and 2 full-screen modes — very useful for previewing without clutter
Tab
Removes all palettes (INDISPENSABLE)
Ctrl+;
Show/Hide Guides
Ctrl+'
Show/Hide Grid
Ctrl+R
Show/Hide Rulers

Layer shortcuts: (very useful)

Ctrl+E
Merge Down
Ctrl+J
New Layer from selection by Copy (Duplicate Layer if no selection)
Ctrl+Shift+J
New Layer from selection by Cut
Ctrl+G
Clipping Group with previous layer (Ctrl+Shift+G ungroups)

Selection techniques:

Ctrl+click on layer
loads layer transparency as selection (indispensable)
Ctrl+Shift+I
Invert selection

Selection tool (marquee, wand, lasso) modifiers (with click):

+Shift
Add
+Alt
Subtract
+Shift+Alt
Intersect

…believe me, you use these all the time. Intersect, for example, you use always to refine a previous selection.

Ctrl+Shift+C
Take Merged Copy (very useful: merged of all visible layers)
Ctrl+T
Free Transform (and right-click on the resulting box for more options, incl. Numeric)
Ctrl+Shift+D
Feather selection
Click+drag
[inside selection when selection tool is active] Move selection (or Nudge using arrow keys)

Image adjustments

Ctrl+M
Gamma Curves (Always use this instead of Brightness/Contrast)
Ctrl+L
Levels (Learn to use this)
Ctrl+U
hUe / saturation / lightness
Ctrl+B
colour Balance

Add Alt to any of these to bring back the previously-used values

Paint shortcuts

Alt+Backspace
Fill with foreground colour
Alt+Shift+Backspace
Fill with foreground colour, preserving transparency
Shift+F5
Fill dialog box
[ ]
[Square brackets] Brush size up/down (INDISPENSABLE)

File

Ctrl+Alt+Shift+S
Save for Web

Remember:

  • ESC aborts all dialog boxes (equiv. to Cancel), also some operations like Crop and Free Transform
  • Enter (on numeric keypad) OKs some dialog boxes, notably Type
  • Hold Alt down while using any brush tool to get the Eyedropper
  • Hold Ctrl down when using any selection tool to get Move tool
  • Right-click when using Move tool to get Layer Picker
  • Hold Alt down when using the Move tool (by mouse or arrow keys) to Duplicate (otherwise it cuts). When no selection is active, this will duplicate the layer.
  • Ctrl-Alt-Z steps back through the History palette. (Effectively, multiple Undo levels)

Actions

  • Record your own (remember the Insert Menu Item option in flyout menu)
  • All steps can be paused to allow work during action processing
  • Assign to F-keys
  • Can be used for batch processing

Here are mine:
Snapshot of my Actions palette
I can't do without any of these. Download them here: General actions.atn, Filters.atn, Web.atn, Selection.atn

Palettes

Believe it or not, I still try and stick to the 6x6x6 palette. I like to keep this GIF handy:
Basic 6x6x6 grid
Here are also two interesting configurations, courtesy of lynda.com. (1).GIF .ACO (2).GIF .ACO

Bookmarklets and other useful things for IE’s Links bar

Posted at 12:00 PM | Permalink | Comments (0)

What are bookmarklets (also called favelets)?

Tantek summed it up best: “Combine Internet Explorer’s Toolbar Favorites feature and mini applications (applets) written in jscript, stamped with a 'javascript:' URI scheme, and you have a way to add features built from DHTML to your browser.” Most are self-contained, but some link to other scripts or files on the web. Here’s a tutorial on how to create a bookmarklet.

How do you install them?

Drag the hyperlink onto Internet Explorer’s Links toolbar (View: Toolbars: Links.) (This toolbar changes into a drop-down menu like the one below for all items that don’t fit.) Explorer will warn you that you are adding a link “that may not be safe.” You’ll just have to trust me on this.

Alternatively, for users of IE on PCs, download this ZIP with all the bookmarklets below. Extract it into C:\WINDOWS\Favorites\Links (after first deleting all the default junk in there.)

Not all bookmarklets work on all browsers; refer to the creator’s site for details.

Where do you get them?

This page lists the sources of all the bookmarklets I use. Most of these sites have more bookmarklets besides the ones listed here. Web-graphics.com maintains a list of bookmarklets sites. One of the best selections (for the web developer) is to be found at Jesse Ruderman’s Squarefree.

Alternatives for Mozilla

Most bookmarklets will also work on Mozilla-based browsers (indeed, many are exclusive to it), but many are conveniently bundled into custom toolbars or extensions.

My bookmarklets

Composite screenshot of IE Links menu

  1. Google
    Google search on highlighted word; brings up Search prompt otherwise. Sometimes local scripts on a page prevent it from working. For more functionality, install the Google toolbar, or even better, Dave's Quick Search Taskbar Toolbar Deskbar (unreservedly recommended).
    Source: Google
  2. 800x600
    Resize browser window to 800×600 pixels, at the time of writing still the “average” screen resolution benchmark. (Note that you should subtract 20px if you want to take into account the size of the Windows Taskbar, a given on the majority of home computers.)
    Source: favelets.com
  3. Google current site
    Google search on highlighted word; brings up Search prompt otherwise. Restricts search to the current site.
    Source: centricle.com
  4. TinyURL!
    Generates a short URL pointing to the current page, placing it on the clipboard automatically, ready for pasting (Windows only). Useful with long, messy URLs that'll wrap when pasted into plaintext emails. My favourite over the other three alternatives, Makeashorterlink, Notlong and SnipURL. (The latter lets you customise the shortened URL.)
    Source: TinyURL.com
  5. zap plugins
    Removes java, flash, background music, and third-party iframes. Excellent for intrusive Flash ads. I prefer using this rather than a blanket ad-banning solution, since I occasionally enjoy seeing ads.
    Source: Squarefree
  6. Page Weight & Speed
    Combined weight (in bytes) of all HTML and images on the page, with estimated download speeds. Its main weakness is that it does not measure linked resources, like CSS or scripts. For this, use Q42's GetPageSize (much slower).
    Source: Kindly custom-made for me by Dave Lindquist
  7. Web development
    1. ! (view comments)
      Expose the invisible comments in the code. Sometimes useful to understand the layout.
      Source: endquote.com
    2. Add borders
      Adds a green border around each element on the page.
      Source: Squarefree
    3. ancestors
      Lists the ancestors of any element you hover over in the status bar. One of my favourites.
      Source: Squarefree
    4. Check Links
      Check for broken links on the current page.
      Source: favelets.com
    5. clone slowly
      Clones page several chars at a time (to test incremental rendering). Sheer genius.
      Source: Squarefree
    6. GetPageSize!
      See no.5 above
    7. IE compatibility mode
      Pretty simple: Makes IE report whether it's in 'Quirks' mode or 'Standards' mode. More info on CSS-discuss.
      Source: Accessify
    8. list classes
      Lists classes used in the document (in a new window).
      Source: Squarefree
    9. Show and label divs with classes
      Highlights ALL div tags with a red border and labels each one with an id.
      Source: Accessify
    10. Show and label divs with ids
      Exactly as above, but this time only divs that have a class are labelled.
      Source: Accessify
    11. Show Divs, Spans & P
      Outlines <div> (solid lines, colours indicating depth of nesting), <span> (dotted green) and <p> (dotted blue) tags.
      Source: Started at web-graphics.com, but I later changed it to show nesting and paragraphs. Links to this stylesheet on my server. If you want to use it, copy it to your server and update the bookmarklet.
    12. Show Specific Elements
      Brings up dialog boxes asking for the element, and what colour to highlight it in. Interesting.
      Source: centricle.com
    13. Show Tables
      “Turns on table borders and color codes them to reveal nesting. This script inserts a link node into the current document head, which pulls in a stylesheet I maintain on my server. Feel free to download and adapt this to your own purposes: tableborders.css
      One of my favourites. I recommend you copy the CSS to your own server if you plan to use it.
      Source: sam-i-am.com
    14. View CSS
      Just as useful for web designers as Show Tables, this one pops up a window with links to all linked stylesheets, enabling you to view or download them.
      Source: Liorean’s web coding depot
    15. ViewScripts
      Similar to View CSS, pops up a window allowing you to view the linked and embedded javascript.
      Source: Liorean’s web coding depot
    16. zap presentational HTML
      Removes most presentational attributes and tags while leaving style sheets intact.
      Source: Squarefree
    17. Zoom in
      This pair will zoom in on the current page in 50% increments. Great for pixel level debugging and using with Element Ancestry to click on exactly the element/screen are you are interested in.
      Source: sam-i-am.com
  8. Screen sizes
    Resize the browser window. Useful for testing how layouts fit or reflow at various standard screen sizes.
    1. javascript-resizeTo(800,600) (A text file, as syntax reference)
    2. PocketPC iPaq 240x320
    3. SVGA 800x600
    4. SXGA 1280x1024
    5. TV safe 544x372
    6. UXGA 1600x1200
    7. VGA 640x480
    8. XGA 1024x768
    Source: favelets.com
  9. CSS-related
    Resize the browser window. Useful for testing how layouts fit or reflow at various standard screen sizes.
    1. Choose style sheet
      Adds a feature lacked by IE. Provides users the opportunity to select an alternate style sheet. See the Alternate style sheets example for more information about alternate style sheets.
    2. Toggle CSS style sheets
      See what the page looks like with CSS disabled.
    Source: favelets.com
  10. Zap (cleanup)
    1. Page Color to Grey
      Use this when white web page backgrounds give you eyestrain. Modified from a “Page Color to White” original at bookmarklets.com. Unfortunately this does not work on sites where the background colour is set by the stylesheet. [There are bookmarklets on squarefree for that too.]
      Source: Bookmarklets.com
    2. Remove Background Image
      Use this when arty textured backgrounds behind the text give you eyestrain. Again, this does not work on sites where the background is set by the stylesheet. [Should be fixable.]
      Source: Bookmarklets.com
    3. Statusbar Shows URL
      Prevent those pesky scripts from replacing the destination URL in the browser's Status bar with supposedly helpful descriptions.
      Source: Can't remember! I think it might be from ZDNet, via web-graphics.com
    4. zap cookies
      Removes cookies set by the site, including cookies with paths and domains.
      Source: Squarefree
    5. zap
      Zaps plugins, colors, cheap effects, event handlers, and timers.
      Source: Squarefree
  11. Accessibility
    1. Alt attributes - images missing alt attribute
      Displays all images on the page that do not have any alt attributes - useful accessibility checking tool. Remember, an image such as a spacer gif or an image used as decoration (such as a lined pattern) should use alt=" " (with a space between quotes).
    2. Alt attributes - show all
      Displays all images on the page, alongside their alt attributes - useful for checking that alt attributes match up with image.
    3. Convert abbreviations and acronyms
      Highlight some text on your web page (or perhaps some text that you are entering into a textarea, for example a Blogger or MovableType post), then run this favelet - the highlighted text will be passed through the Acrobot, converting all your acronyms and abbreviations.
    4. Links - titles and hrefs
      Shows all links on the page and the contents of the link (text and/or images). Also shows title attributes of each link (if present - very useful for assessing how accessible your links are.
    5. Show links
      Highlights links on the page in glorious garish lime
    6. Show table headings th
      Highlights table headings (yellow text on black background) - use this to see if table headings really are <th> tags or whether plain old <td>s was used instead.
    Source: Accessify
  12. Validation
    Validate HTML, CSS and HREFs, or all at once using Tantek’s Multivalidator. Also validate XHTML or accessibility (cast.org), or simulate colour blindness. Validation bookmarklets with more options can be found at gazingus.org.
    1. Accessibility ColorBlindnessCheck
    2. Accessibility cast.org
    3. Multivalidator Window
    4. Multivalidator
    5. W3C CSS validator
    6. W3C HREF validator
    7. W3C HTML validator
    8. WDG HTML validator
    9. W3C XHTML validator
    Source: favelets.com, 13thparallel.org (XHTML), gazingus.org (Accessibility), Q42.nl (colour blindness)
  13. Page information
    1. General page stats
      General page statistics, including when the page was last updated, what forms and styleSheets are linked, how many images, how many links and so on.
      Source: Accessify
    2. getContentSize
      Interesting tool for measuring the code:content ratio on a web page. Author's disclaimer: These statistics are good fodder for conversation, and they make you think a bit, but otherwise they're trivia at best.
      Source: Holovaty.com
    3. Read Cookie for Site
      Shows the cookies stored by the page you're viewing.
      Source: Squarefree
    4. Uptime & Server
      Shows a Netcraft report.
      Source: favelets.com
  14. Internet Archive:
    1. Most Recent Internet Archive, Index at Internet Archive
      Turns the clock back on the current page, courtesy of the awesome Wayback Machine.
    2. Go Wayback
    3. Wayback Analyse
    4. Wayback Undo
    Source: Lost the sources for these... Also not sure which are the best. I think the latter three are more robust.
  15. Text:
    1. Google Translate!
      Google automatic translation (to English) service.
    2. Look up a definition at dictionary.com
    3. Look up a definition at m-w.com
    4. Look up synonyms at m-w.com
    5. Look up synonyms at thesaurus.com
    6. Lorem Ipsum
      Not a bookmarklet. Links to this text file on my hard disk, which is the standard “greek” text used by typesetters.
    7. SCRABBLE search (Website: validates words, but doesn't define them.)
    Source: Dictionary/Thesaurus bookmarklets found (and modified by) Aleksandar Nikolic (thanks!)
  16. Utilities:
    1. Download Calculator.. (56K)
      I've had to manually work this out several times in the past (with effort each time), which convinced me of the usefulness of this utility which asks for file size in KB and returns the download time on a 56K modem, in seconds.
      Source: Bookmarklets.com
    2. 216 Standard Colors
      “Displays the 216 “browser-safe” colors along with their hex code numbers. These are the colors that display the same, without dithering, across all platforms (debatable). The page is entirely generated from within the bookmarklet (so you can use this tool offline).
      Tip: If some hex codes are hard to read try choosing ‘Select All’ from the Edit menu. ”
      Source: Bookmarklets.com
    3. Basic ISO Latin Characters
      “Makes a list of the ISO Latin character codes for the international umlaut, circumflex, grave, and acute characters. Helps when you want to add symbols like to your webpage. The page is entirely generated from within the bookmarklet (so you can use this tool offline).
      Note: This list may collapse if you do Back-Forward (so you get is ). Just select the bookmarklet again to rebuild the list. ”
      Source: Bookmarklets.com
    4. MASL, notlong and SnipURL
      Three competitors of TinyURL. MASL was the first; SnipURL has the most features (letting you create your own shortcut name and password-protecting.)
  17. Blogs
    Post to fjordaan
    and Post to web-graphics
    Post to two Moveable Type (excellent weblogging software) blogs I write on.
    Source: www.moveabletype.org
  18. Toggle Images.exe
    Not a bookmarklet, but a little EXE that you can get from Microsoft.

Also make sure you add the following extras — Links List, Images List and Oper Frame in New Window — to IE's contextual (right-click) menu:

Right-click menu with Open Frame in New Window, Links List and Image List

You get them with Microsoft's Web Accessories for IE 5. If you install the Google Toolbar, you get some more useful options in this menu, e.g. Google Search. See also my other tips on customising IE.

Finally, these bookmarklets are mostly only useful to web developers. This is not all they’re good for. Bookmarklets.com especially have bookmarklets for just about anything.

Thank you

Note that I am not the creator of any of the above bookmarklets. I duplicate them on this page as a handy backup for myself, like when I need to customise a new PC. If any of the authors would like their bookmarklets removed from here, and their site linked instead, they need but ask.

13 February 2002

Styling the scrollbar

Posted at 11:06 AM | Permalink | Comments (0)

I didn't know you could do all this...

scrollbar-face-color : #E8D8B8;
scrollbar-base-color : #180C10;
scrollbar-track-color : #180C10;
scrollbar-highlight-color : #EEE2CA;
scrollbar-3d-light-color : #EEE2CA;
scrollbar-dark-shadow-color : #AEA28A;
scrollbar-shadow-color : #AEA28A;
scrollbar-arrow-color : #180c10;

(from a quick peek at the CSS on the inspirational mijnkopthee, one of the only sites I know making use of CSS image filtering (e.g. opacity).)

Stallman talks

Posted at 09:21 AM | Permalink | Comments (1)

Went to listen to hacker god Richard Stallman at the Queen Mary College last night.

The first half of the talk summarised the philosophy of Free Software (pretty much all this). While I cursorily knew what is was about, it was enlightening having the distinction between Open Source and Free Software pointed out (the former's raison d'tre is technical, the latter, moral) and between Gnu and Linux (properly, Gnu/Linux).

The second half of the talk concerned the evolution of copyright, and the role of copyright in the era of digital copying. In a nutshell, where copyright evolved to advance knowledge and serve the public, its meaning is now being perverted to protect publishers, who are facing obsolescence, at the expense of the public and the advancement of knowledge.

One interesting argument was the case of ebooks: removing from their use the freedoms always associated with books, as is currently being attempted, provokes relatively little controversy as most people are not using ebooks. But when people start using ebooks en masse, as they eventually will (with loud encouragement), they will assume these restrictions on their use of the ebooks as the status quo. Dastardly.

He cautioned against the use of analogy to reach conclusions (whenever I have a hard time understanding issues, I ask for analogies), as it can yield false conclusions. What is applicable in one area is not necessarily so in another. One must look at the consequences.

Interestingly, towards the end of his talk, when speculating about music distribution without publishers, he made a strong case for what others would call "micropayments". This is something of a pet interest of mine, as I share the belief that this is what internet commerce should become. Further reading: Jakob Nielsen, Scott McCloud (I like the middle right panels on the right from this page of his last book), Writetheweb.

Some questions I didn't get round to asking:

1. Couldn't the music/publishing industry use micropayments to maintain the status quo? In effect, use technology to make themselves more streamlined, but maintaining all the restrictions on use. (I think this is what is being attempted with Napster now...)

2. Maybe ordinary people like hype.

3. If selling CDs at concerts is so profitable for musicians, why are they always so shit at it? I don't know how many times I've given up on trying to fight my way through the crush for merchandise at concerts, how many times the supply runs out within 10 minutes, them not having change, etc... (going to a concert tonight BTW.)

...answers to the above on a postcard.

12 February 2002

Some trepidation, yesterday, over whether

Posted at 01:59 PM | Permalink | Comments (0)

Some trepidation, yesterday, over whether using Moveable Type is allowed under my ISP's terms and conditions. It's up to me to make sure, but I was afraid I may offend out of ignorance.

Anyway, Ben Trott's reassurance has set my mind at ease.

11 February 2002

ArsDigita R.I.P.?

Posted at 05:57 PM | Permalink | Comments (1)

As one of the thousands who's downloaded and read Philip and Alex's Guide to Web Publishing, forever said goodbye to static websites (at least in principle), and idolised ArsDigita, I was shocked to unexpectedly hear that they "called it quits" last Friday (via CMSwatch). Here it is in Slashdot. Interestingly, today's homepage doesn't show any hint of it.

But really, as I found out after a bit of googling, this is just the outcome of a story that started over a year ago. I found Philip Greenspun's version of the events (courtesy of archive.org) fascinating and sad.

After seeing that PG had to remove the above article from his site, and reading that even internet archive records can be deleted, I saved it to disk. Just in case.

Ornament: a vanishing quality?

Posted at 05:31 PM | Permalink | Comments (0)

Recently, visiting the Musee D'Orsay in Paris, I had a mini-epiphany about "decorative" design. There was a large section devoted to architecture, as it was practiced in the pre-modern era. This involved vast repositories of knowledge of decorative "languages", as mainly seen in neoclassicism. I was looking at a minutely detailed engraving of a building facade, and some accompanying models, and realised that while it is underpinned by sound engineering, what I am looking at most of all is an unbelievably rich language of ornament and decoration, which does not equate to whimsy in the slightest but is every bit as intellectual and rational and considered as the engineering. And how this ornament is not simply "clothing" for a functional building, how it is the building in the minds of the occupant and viewer, how it makes the building visually pleasing and functionally more articulate and coherent. (Consider e.g. how much the concept of "entrance" is articulated through decorative means -- pillars, mouldings, etc.)

Looking at that I felt as if CHI, under the usability banner, is perhaps following modernist form-follows-function too rigidly, and is ignoring (and forgetting) a vast body of knowledge of the functional and psychological role of ornament. That there was a time when these issues weren't lumped under "touchy-feely", but when aesthetics were every bit as rational as the engineering.

That said, I have to admit I'm quite happy that it's possible these days to design staircase banisters without acanthus leaves. All decorative languages tend to stultify over time.

10 February 2002

Powered by...

Posted at 10:28 PM | Permalink | Comments (2)

As of today, this page is powered by Moveable Type, as I've been intending to do for months. OK, there are still dozens of technical hurdles to overcome, templates to create, and I haven't got my ISP's blessing yet, so I'm not out the woods yet.

09 February 2002

I don't have the knack

Posted at 12:00 PM | Permalink | Comments (0)

I don't have the knack yet to blog at the speed that I learn. Every day there were dozens of things I'd like to jot down, but simply not the time. (Partially due to this still being old-fashioned hand-coded blogging.) This'll do for now:

Bookmarks added 24 January to 9 February.