If I Had a Dollar for Every ‘border:1px dashed red’

Tweet

Although this isn’t strictly web design, I think it’s worth mentioning.

While we web developers are often finicky creatures, each with our own working methods, habits and superstitions, there are some things that bind us all together. The day you coded your first CSS layout, was probably the day you met the CSS coder’s friend ‘border:1px dashed red‘.

Whether it’s inline in the markup or attached CSS, there’s no quicker way of illuminating a quirky CSS problem than being able to see exactly where it’s happening with gaudy red borders.

Likewise, the JavaScripter’s longtime companion has so often been ‘alert(“The variable is: ” + variable);‘. And for that matter, how many times have you added a paragraph of ‘Lorem ipsum’ text to a page of markup?

ClipomaticNow, after a while it may well have occurred to you to create a some kind of keyboard shortcut or macro to make it quicker to add this snippet text.

My problem was that I tend to skip between different editors for different types of work. I find JEdit is nice for heavy coding, Dreamweaver is faster for big-picture layout work, and EmEditor and PSPad load up fast for quick edits and bug fixes. Each has it’s own programmable shortcuts, but it’s not always possible to make them the same in each application.

What I wanted was something that would work identically in any app — it just took me a while to figure out I was already running it.

A few years back I installed Mike Lin’s Clipomatic. At 96kb, Clipomatic is a free, tiny but elegant clipboard cache manager, designed to simply keep track of the last 10 text items you copied. If you’ve ever cut something important to the clipboard and then mindlessly copied something else over it, you’ll understand why this is handy. It’s certainly saved me on many occasions.

The thing I didn’t understand until recently was that Clipomatic can also splice in preset text snippets. It just wasn’t immediately obvious how to do it.

If you think this might be useful to you, simply install it, and then:

  1. Right-click on the Clipomatic icon in your systray
  2. Select ‘Clipset editor’
  3. By default the editor shows the ‘default.clipset’ — which is whatever you’ve copied since installing it (possibly nothing at this stage). Browse and select the ‘permanent.clipset’.
  4. Right click in the textarea and select ‘New’ (the bit I couldn’t figure out at first) and type or paste your code snippet into the popup. Hit enter and repeat if necessary
  5. Close the editor

To access the snippet in any pastable area (editors, webforms, MSWord, etc) just hit CTRL+ALT+V and tap the up/down arrow keys to select the text string and enter to paste it. After a few days I had this down an almost instantaneous blur of keystrokes.

My most useful web design snippets have been:

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sapien justo, congue vel, pulvinar vel, commodo egestas, enim. Phasellus aliquam blandit leo. Etiam nec diam. Curabitur eu neque id augue eleifend mattis. Sed pellentesque dolor quis lorem. Proin facilisis nulla eu erat. Suspendisse ullamcorper, nunc sed ullamcorper scelerisque, ligula neque vestibulum diam, in malesuada lorem ipsum ut leo. Etiam justo. Morbi varius nisi. Nullam tempus. Praesent et dui. Vivamus condimentum sapien eget eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce leo. Vivamus diam risus, scelerisque sit amet, tincidunt non, tempor nec, ligula.
  • alert(“This variable” + variable);
  • border: 1px dotted green;
  • border:1px dashed red;

Ok. So, clipboard managers may not be super cool in 2005, but for some reason I’ve found this little app strangely satisfying to use. Maybe it’s just me.

See what you think.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.designity.nl peach

    Thanks sounds like just what I needed. Just last night (yes very late) I accidentally lost the style sheet that I had been editing in firefox, by copying something over it.

  • Dominik

    Thanks a lot! :)

  • Tobias Bergius

    Dashed? I use solid. And I can probably type it faster than you can paste it with that clipboard. :)

  • YoGi

    for border: 1px red dashed;, there’s a macro in the web developper toolbar of firefox which outline block elements.

  • http://www.webland.gr spyross

    Neat. I just installed it as well :)

  • http://www.webland.gr spyross

    By The Way, you can make Clipomatic hold more than the last 10 clipboard entries by changing the cahe items in the settings :)

  • Fenrir2

    It’s really handy for some things. I use it to paste basic html (…).

    Fortunately I don’t need it with PHP because of Unit Testing :).

  • http://www.lowter.com charmedlover

    You wouldn’t believe how I handle multiple things to copy over. Notepad becomes my friend. This program looks quite nifty, although I’m not sure how often I’d actually use it.

  • Redivider

    This is great. I’ve wanted something like this for a while now. I always wondered why it would be so hard for the clipboard to be able to remember more than one thing at a time. I can’t even begin to count the number of times I’ve hit Ctrl+V and got something completely different than what I was expecting.

    And being able to have a permanent set of copied items is great. No more opening up “lorem_ipsum.txt” when I’m laying out new pages!

    Thanks for the link!

  • http://www.sitepoint.com AlexW

    Dashed? I use solid. And I can probably type it faster than you can paste it with that clipboard. :)

    Perhaps, Tobias, but you could probably paste it quicker than you could type it.

    CTRL + ALT + V + ↑” vs. “border:1px red solid;

    That’s 4 keystrokes vs. 21 — it adds up ;)

    for border: 1px red dashed;, there’s a macro in the web developper toolbar of firefox which outline block elements.

    Yogi, that function is great for some things. but I find sometimes it can just confuse the issue and break the layout.

  • Saumendra

    This is really a very handy tool. Saves lots of time !!
    Thanks Alex

  • http://www.dustindiaz.com polvero

    background:red

  • wei

    The aadvark extension for Firefox is also very useful.
    http://www.karmatics.com/aardvark/

  • http://autisticcuckoo.net/ AutisticCuckoo

    Setting a border on an element to highlight it has its drawbacks, since it changes the dimensions of the element (in standards-compliant browsers). It can be very disruptive in a precise design.

    Using outline would be ideal, but only really good browsers support that.

    The most useful solution is often to use a garish background colour, since that doesn’t affect the element’s size.

  • Etnu

    Don’t use a border to find css problems. Use a background color instead. Borders add width, background colors do not.

    Of course, the issue is moot if you use Firefox with the Developer toolbar. It’s probably the greatest thing since bread.

  • http://www.sitepoint.com AlexW

    Of course, the issue is moot if you use Firefox with the Developer toolbar. It’s probably the greatest thing since bread.

    No argument on the WDT, but it’s not much help to you when you’re chasing CSS weirdness in other browsers. Knowing where an element’s edges are in Firefox doesn’t tell you much about why it’s forcing scrollbars in Exploder.

  • http://wv4.co.uk/ roblewis100

    Looks like a very useful tool Alex, and as you say, the Web Developer Toolbar is oh so useful in Firefox, but things always need to be checked in IE too.

  • rLektriq

    Another tip –

    If you are developing on Safari (and anything else that supports { outline }) – use that instead as, like { background-color }, it doesn’t mess with your layout.

  • http://www.artorg.co.uk Pie

    I use a 6px solid #f0f line (fuschia)… i use red in my designs but not fuschia.

  • http://www.designstudiomag.com DSMag

    I have to agree, it is a far better indicator to use a background color. With that said, this is a neat utility and could definately be used for similiar types of applications.

  • MickoZ

    I also often typed background-color: yellow, red, whetever fast to find out what was happening with html I had to debug. I mostly do the code, but I often have to either design part myself or help people who design good, but sometime need a little help doing it right with html. background-color is my friend to debug the visual. ;-)

  • http://www.dustindiaz.com polvero

    thus…can we say that my comment wins?
    eg.

    background:red

    :)

  • DougB

    Handy little program Alex, neat! Thanks a bunch…

    DougB

  • misterchris

    Whenever I introduce anyone to CSS that is one of the first tricks I teach ‘em.