Four Island

I know I've mostly been writing blog posts that are thousands of words long lately, but this is going to be a quick one! I just wanted to share some webdev advice that might be helpful. Maybe I can actually use my blog as a blog sometimes!

I like to include a lot of media in my aforementioned very long blog posts, in order to break up the blocks of text. The problem with this is that all of that media has to load, and it can be a little slow depending on how large the files are. By default, web pages do not know how much space to reserve for external media, which results in the contents of the page shifting around as everything loads in. This can be annoying, especially if you refresh the page when you're somewhat far down.

The main way to solve this problem is to set the HTML width and height attributes on the <img> tag. This way, the page can reserve the appropriate amount of space before the file gets fully downloaded. The reason this doesn't immediately work for me is because most of my images are intentionally wider than the content area of my website. I have max-width: 100% set on img tags in blog posts, which shrinks the image down to the right size. But if you have the image's height annotated on the img tag, the image will shrink to the correct width, but will be stretched out to the original height! Uh oh!

Luckily, the fix for this is very simple:

Read more...

Four Island is about lots of stuff. One of those things are computer programming. So here I am with a small CSS trick.

If you were to look to the at the links on this site, you'll see that any picture inside a link gets a dashed border around it when it is hovered over. That part is simple to do. All you need is some simple CSS:

a:hover img {
 border: dashed gray 1px;
}

But, if you try that, the content around the pictures will move around when you hover over the picture. The real trick is bypassing that. All you need is to have a transparent border there if the link is not being hovered over, and a dashed one if it is:

a img {
 border: solid transparent 1px;
}

a:hover img {
 border: dashed gray 1px;
}

Because the new border is transparent, you obviously can't see it. It barely makes an impact on your page, and allows a nice border on link mouse overs.