Likesalmon Design » admin

A list of HTML Snippets in Gedit

admin — Tue, 28 Apr 2009 06:50:24 +0000

Snippets are extremely useful feature of Gedit that make it usable for TextMate fiends like myself. They work exactly the same as in TM: in Gedit go to Edit -> Preferences -> Plugins and put a check next to “Snippets”. Now open, say, an html file, type body and press TAB. Gedit will automatically fill in the whole body tag complete with closing tag and your cursor conveniently resting in the id argument ready to fill in a value.

Snippets for HTML

Here’s a list of all the Snippets for html files. They are listed by tag names, with the TAB trigger in paratheses. These will only work in html files, other files have different snippets.

Base (base)
Body (body)
Br (Shift+Ctrl+Space)
Div (div)
Form (form)
Head (head)
Heading (h)
HTML — 4.01 Strict (doctype)
HTML — 4.0 Transitional (doctype)
Input (input)
Link (link)
Mail Anchor (mailto)
Meta (meta)
Non-Breaking Space (Ctrl+Alt+Space)
Script (script)
Script With External Source (scriptsrc)
Style (style)
Table (table)
Table Row (tr)
Text Area (textarea)
Title (title)
Wrap Selection as Link (ref, Shift+Alt+L)
Wrap Selection in Open/Close Tag (Shift+Alt+W)
XHTML — 1.0 Frameset (doctype)
XHTML — 1.0 Strict (doctype)
XHTML — 1.0 Tran (doctype)
XHTML — 1.1 (doctype)

Just sign the waiver

admin — Sat, 25 Apr 2009 22:44:55 +0000

I just completed adding all of my posts from my previous blog at http://likesalmon.wordpress.com to this blog. I haven’t even read all of my original posts but I can tell you that there are some factual errors and naivete that I am not taking responsibility for. Use at your own risk, there is some stupid shit in there.

Flash is dumb?

My design/development education has taken me in some directions that I didn’t count on. For instance, that Flash phase? Never went anywhere. Seems to work for some people, but I lost interest like immediately. Do I regret that? Not really. Flash is useful in some instances (see kuler for an excellent example) but mostly its just a bunch of crap (see Flash scroll bars, user interfaces, and slideshows). Besides, most of the time the same things can be achieved with JavaScript.

I’m not a total hater. I appreciate that Flash opened up web design to designers who would not otherwise have embraced the web due to technical limitations. Like it or not, the common JavaScript versions of Flash-esque visual effects came after Flash had been doing it for a long time. And good visual design helps usability and makes the web a nicer place to hang out in.

The cool kids are NOT doing it

The final nail in the Flash coffin? None of the designers I look up to use it. Jason Santa Maria, Khoi Van, Andy Clarke, Cameron Moll – these guys make incredible things and none of them use Flash. And that pretty much does it for me.

FTOB: Set height and width for anchors with display:block

admin — Sat, 25 Apr 2009 22:14:27 +0000

Originally posted on 10/25/08 at http://likesalmon.wordpress.com

Turns out the width and height properties only work on anchor tags when used in conjunction with display:block. WTF?

So this does not work:
a { width: 100px; height: 100px; }

But this does:
a { width: 100px; height: 100px; display:block; }

Again, have I seriously never run into this before? Do I always just give up and work around this problem? Denial ain’t just a river in Egypt.

FTOB: CSS width property does exactly what you would expect it to

admin — Sat, 25 Apr 2009 22:13:32 +0000

Originally posted on 10/19/08 at http://likesalmon.wordpress.com

The other day I was laying out a wordpress driven site in css and realized that I didn’t actually understand how the “width” property works. This was extremely embarrassing to admit to myself, because it means I’ve been flubbing and cheating my way through the layout of every website I’ve developed so far. Its one the things that fell through the cracks because of limited time or lack of will. So I did a little testing and it turns out the width property works in the most obvious way possible, with one exception. Here are the results of my test:

All of the following boxes are div elements set to width: 200px; height: 200px and background-color: #ccc. I use lots of shorthand, so you’ll want to review that or this won’t make much sense. I performed this test in Firefox 3 so I trust that this behavior is the standard.

The following code was removed because it was breaking my layout — ed.

This is the basic box. No other styling has been added. If you add more text to the box than the box can hold, it will flow outside the box, but the box will remain the same size. To cut the text off at the edges of the box use “overflow: hidden”.

The border property of this box is set to border: 10x;. Notice how the inner box is still 200px by 200px. The border has been added to the outside. The total dimensions of the div are now 220px by 220px.

The margin of this box is set to margin: 40px. The space it now takes up is 280px by 280px. Margins appear to behave exactly like borders, except they are always transparent.

The padding of this box is set to padding: 10px;. Notice how this expanded the box 10px on each side, for a total height and width change of 20px. This is the one unexpected behavior I encountered: I figured it would constrain the contents of the box instead of expanding the box itself.

This box is like the last one, with padding: 10px;. The difference is that this one is nested inside a div with width: 200px; height: 200px;. Unless the overflow: hidden; property is set, this makes no difference at all. The box still expands to 220px by 220px and overflows the container div.

This box is contained within a div that is 100px smaller than it is. This only makes a difference if you use “overflow: hidden”, which will cut off the edges of the box where the container div ends. Keep in mind that the next element on the page will butt up against the parent div and will be overlapped by the over-sized box contained therein. I had to adjust the margin of the

element that follows this div so they don’t overlap.

In conclusion, if you’re designing a site that is 800px wide with an 8px border, you would subtract the width of the border from the width of the container element like so: #container { width: 792px; border: 8px solid #ccc; }. The #container element stays at 800px and everyone is happy.

FTOB: Using jQuery with Wordpress

admin — Sat, 25 Apr 2009 22:12:58 +0000

Originally posted on 10/10/08 at http://likesalmon.wordpress.com

I struggled with this, as the usual method of including a javascript library and an external javascript script did not work. Usually, I would do this: