DevHints

Posting this here because I just ran into the problem and couldn’t find a solution on the interwebs.

If you’re using Mysql Administrator on a Mac and you try to schedule an automated backup only to find your SQL backups only a few lines long. You probably won’t see an error anywhere, either. Here’s your fix:

Go to Preferences and to the General section. Change the password storage type from Keychain to Obscured. The problem is that Mac OS won’t let the automated program have access to the Keychain, so it can’t connect to your database and get to work.

Okay so having never bothered playing with Mozilla Add-Ons, I was a bit frustrated with the lagging behind from Chris Pederick, author of the Web Developer extension. All that is needed is an update to the compatibility maximum version in the install file and it would work with Firefox 3, but alas, it hasn’t been updated.

Well, I did a little bit of tinkering and figured out how to get it all working.  For all you non-techies, I’ve made the xpi available so you can use it for your Firefox 3.* nice an easily. Right click an Save As the file linked below, then use Firefox to open it (File > Open) and continue on as usual.

Right Click and Save Me!

It’s 2am and I’m up working on a website. It’s fairly typical. And while most people would doubt my productivity at such an hour given that I’m awake all day, I have proof of productivity (and creativity).

I was playing with a layout revision of one of my websites when I got to doing the links. Typically I do something plain-jane like this:

a:link, a:visited { color: #000; text-decoration: none; }
a:hover, a:active { color: #333; text-decoration: underline; }

That makes a neat little link that goes from plain black to a dark gray with an underline when hovered over. Nothing special. Of course, I mix in all sorts of fun colors and I do background color changes too. Tonight was different though.

I decided I wanted to do something to help visitors keep track of where they’d been by styling “visited” links differently. After seeing a few people (most notably Mike Davidson) do the little check boxes, I figured it wasn’t a half bad idea. Mike uses the :after pseudo selector to add the checkbox to visited links. Not a bad idea, but it won’t work in IE and it makes changing it on hover difficult and choppy. I had a better idea.

I used the background property. I had just used the same method for my list bullets, so it was still fresh in my mind. Simplified, we had the following:

a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }

I used 60% because it achieved better alignment in my situation than center and it scales better than pixels. Now my little visited links had neat little checkboxes next to them. Awesome. But now my hover style didn’t look quite right since I was changing the background color on hover. This is when I started thinking…what if I could tell the browser to change the background on hover over a visited link? Well, it looks like you can:

a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }
a:visited:hover { background-image: url(‘images/check_hover.png’); }

I actually originally had the hover and visited pseudo-selectors swapped the other way around (:hover:visited) but IE didn’t want to cooperate, so I got to thinking what I was really telling it (apply this to anchor tags when they are being hovered over that are visited) and how it made more sense if I flipped it (apply this to anchor tags that have been visited when they are being hovered over). Sure enough, it worked like a charm.

NOTE: While this method does allow for more customization and it works with IE, Mike’s method is better from an accessibility standpoint since it doesn’t use an image.

If you’ve written much CSS, then you probably know that the different implementations of the CSS rules by each rendering engine are really frustrating. Firefox, Opera, IE5, IE6, IE7, Safari, and more all seem to have different interpretations of how your code should look. They make no exception with the use of different rules that allow you to center objects.

Some common ways are to use margin: 0 auto; on a block level element, and using text-align: center; on the parent of an inline element. Well, the auto sides setting on the margin rule doesn’t always act like it should, and you might not want all of your actual text centered. So here’s a better solution, albeit a bit more strict in it’s implementation:

#centerMe {
display: block;
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
}

Okay so what’s going on here? With the left rule we’re forcing the left side of the object to be in the exact center of the screen. Since it’s then going to be too far to the right, we use the margin-left rule to bring it back by half of the width of the object. Obviously, this doesn’t work too well with dynamically sized objects, which is why I mentioned that it’s a bit strict; however, I think it’s an excellent way of getting around browser inconsistencies regarding margin: 0 auto;.

There’s been this long standing bug with IE and changing the src attribute to update the image. Under certain conditions, it causes the image to simply disappear. There are two well known solutions to this problem:

1.) Have an alert box popup immediately after the change.

2.) Use a setTimeout function.

Neither of these is exactly pretty. But fear not, there’s a new way to do this that’s really ingenious. Are you ready for it? Here it is in an example:

var src=”http://example.com/image.gif”;
document.getElementById(‘myimage’).src = src;
return false;

Did you catch that? Just add “return false;” immediately after the update to the image src! Hopefully this will save you an entire day of frustration. ;)

I have a friend who has been, like many others, totally sucked into the world of marketing called Apple. I don’t have anything against Apple, and I actually own a Mac and quite like a lot of the stuff that it does, but I’m the last person to fall for a marketing gimmick.

Like we all know, Apple is king of ooo-aaaaah marketing. They come up with glorified terms like “Breakthrough Internet communications device” that means that the phone has a browser and wifi. There’s nothing wrong with it, but I wish more people would see through it in some cases. Like the case of Safari.

“The best browser in the world.” That’s what Apple likes to call Safari, and from a marketing point, they should. The problem, however, is that people Mac Fanboys all propagate that line throughout everything and they really believe it. I mean, why shouldn’t they?

Safari is great! It really is the best. I mean, it looks good. It has and RSS reader build in, even though it doesn’t work that great. It can read HTML, XHTML, XML and more! It can execute JavaScript! It works with Flash! Um, it has a build in search box that only searches Google. OH! It does TABS…if you go into the preferences and enable them, anyways. I almost forgot, it has it’s own rendering engine so that websites look more like Apple thinks they should. Eh…and it does JavaScript it’s own way too. Hmm…it doesn’t follow those silly CSS standards! It restyles input elements the way Apple thinks they should look! F5 doesn’t do that irritating “Refresh” thing! Tab won’t select links so I can’t accidentally use my keyboard to browse instead of the non-ergonomic mouse that causes carpel tunnel!

Seriously now. Safari is just not a very matured browser. It’s sort of like a beta version of Mozilla blended with IE5. Sure, it looks good, but it really lacks what so many other browsers include. You can’t really customize it like Firefox with extensions and user styles. It doesn’t offer support for all of the standards like Opera…nor is it as fast at executing Javascript. It doesn’t even offer the nifty shortcuts that Internet Explorer offers.

Honestly, it’s a pain in the ass. Especially if you’re a website designer. It gives us just one more browser to test code in, and usually we have to make changes and sacrifices to allow Safari’s retarded engine to display the page as intended.

Lets jump right into it here. HTML is based on tags. Each tag performs a specific function, and most tags have attributes that modify them. In HTML, tags are delimited (separated) by < and > signs. Here’s what a tag should look like:

<tagname attribute=”value” attribute=”value”>content</tagname>

As you can see, the syntax is very simple. The tag name comes first. Some tags are <b>, which makes the content appear boldfaced, <i> which makes the content appear italicized, and <br> which is considered a line-break…aka a new line. A tag doesn’t have to have any attributes, but some, like the img tag require attributes.

Not all tags have endtags (</tagname>) either. Linebreak (<br>) tags, for example, do not need to be closed…in fact…they can’t be. Paragraph tags (<p>) don’t have to be closed either, though they can be.

Here’s a list of common tags:

<b> – Bold text

<i> – Italic text

<u> – Underlined text

<img> – Display an image. Common attributes for an img tag are src (the URL of the image), width, height, and alt (alternate text in the cast that the image cannot be displayed).

<br> – line break

<p> – Paragraph. By default this places two linebreaks before the content and two linebreaks after the content if explicitly closed with </p>.

You’ll almost certainly find that there isn’t much to be done with the above tags. You really can’t create anything fancy, and even doing modest styling is difficult. This is where CSS, tables, and divs come into play. Since divs are harder to grasp the concept of, I’ll only explain tables.

<table> Creates a new table.

<tr> Creates a new row in a table.

<td> Creates a new cell within a row.

When you envision a table, think of a chart or spreadsheet. It has rows and columns, which define individual cells. In an HTML table you certainly have rows and columns, but you do not explicitly set columns, rather, the number of columns is defined by how many cells are in a row.

To create a simple table with numbers 1 and 2 in the top cells and 3 and 4 in the bottoms cells, here’s what we would do:

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

We created our table with the <table> tag. Then we created our first row with the <tr> tag. We created 2 cells by placing 2 <td> tags in that first row. Then we closed the row and opened a new one. We created two cells in this row as well, then closed it and the table. This table will display as a 2×2 table, meaning it has 2 rows and 2 columns.

You can use a table to position things on your page better. You can create a table to display content on the left or right of your menu, for example. A very large percentage of websites use tables to layout their content. I strongly suggest you view the source of websites you visit to get a better understanding of how they lay out their website.

With this I leave you. This is by no means an all inclusive session on HTML. It is, as the title declares, a crash-course.

Follow

Get every new post delivered to your Inbox.