.: aaron vanderzwan :.

So I was on a trip back from Canada and I caught some CBC. Everyone loves a little CBC, right? Anyways, I listened to this whole episode and loved it. I just now found it again and am really enjoying going through each episode. The show is called ‘Wiretap’ and is written and produced by a guy named Johnathan Goldstein who often has pieces featured on This American Life, an interesting weekly podcast by Ira Glass.

This episode is divided into 4 sections, the first two are not what made me fall in love with it. The second two, however, are phenomenal. Light, clever writing; greatly timed acting/reading; just really great work.

Let me know what you think. (click the grey play button below to listen or pop it out into a new window)

This website talks all about it: The Unofficial Wiretap Blog. You can subscribe via iTunes with this link: Subscribe to the Unofficial Wiretap Podcast.

 

 Wiretap - Fishing for Glory (2009-03-22)s [26:29m]: Play Now | Play in Popup | Downloads 4

So for anyone who has not heard, I got laid off two weeks ago and therefore I have been recently scrambling to get all of my stuff in order as I prepare to hit the job market again. I have the resumé updated, but seeing as it has been a while since I have been in this situation, finding a way to rebrand myself with my new skill-set has proven to be quite a hefty task.

I want something that represents my abilities, that will forté my strengths and depict what I love most about my profession. But what does that mean? I know some basics, like… It will have to be extremely clean, the way I like my code and styles. It will have to be intuitive the way I enjoy building systems to play into one’s ease of use. It will have to be something dynamic as a representation of my love for javascript / jQuery. The question still remains, however; how do you design something to express a [primarily] developers skill-set or even emotion.

Some might say, “Aaron, you have so much to go on here. Read your previous paragraph.” and if this was someone else’s portfolio, I might agree. The problem is that our minds are endless caverns of thought processes and ideas. Everything seems like it fits for a split second, until it gets pinned up. Then somehow, it looks all wrong.

So how do you build a portfolio in a timely manner? It’s about taking strong steps. Trusting your intuitions and reacting to the instances of what you find inspiring. I think I am finally onto something in my little designer / developer head and am growing more and more fond of it. I am excited to share it, which has convinced me that it must be working.

What it is, you all will have to wait and see… but check http://www.aaronvanderzwan.com/ often because it will be up very soon.

UPDATE: It apparently is also about finding enough time to do it. It has been good that I have been really busy lately, but it cuts into my ‘me’ time. Oh well. Another weekend thing to do.

The Dilemma
I recently was working on a website where I needed an image to resize or scale dynamically within a liquid layout. The image needed to fit the browser window and take up as much space as possible all while keeping it’s original ratio. I was unable to find any really customizable plugins for jQuery that would accomplish this task, so I decided to build it myself.

This plugin, called maxImage, resizes the image to it’s largest possible size depending on browser size, ratio of image, and some basic options.

Options
These are the editable options and their defaults:
verticalOffset: 0
verticalOffset is the amount of space you don’t want the image to take up. So say you want 10px above the image and 10px below, your verticalOffset would be 20px.

horizontalOffset: 0
horizontalOffset is the same as the verticalOffset except for the space to the left and to the right of the image. Say you have some content to the left of the image that takes up 400px and you always want 10px to the right of the image, your horizontalOffset would be 410px.

position: ‘absolute’
This changes the positioning and surrounding space to be appropriate for either ‘absolute’ positioning or ‘relative’ positioning. Remember, if you want to use position:absolute, it will be absolutely positioned within it’s first parent that has position:relative (if none are set it will be absolutely positioned within the body).

leftSpace: 0
This is an option that automatically sets either margin-left of the image (position:relative) or just left (position:absolute).

topSpace: 0
Similar to leftSpace, but for the top.

rightSpace: 0
Similar to leftSpace, but for the right.

bottomSpace: 0
Similar to leftSpace, but for the bottom.

isBackground: false
This is an option that automatically positions the image behind all of your content and as large as the browser window. It depends on the smallest dimension according to the browser. i.e. If the browser height is smaller according to your image’s ratio than the width, the width will be a little bit cut off.

verticalAlign: ‘bottom’
This is used mostly with the isBackground:true option. If isBackground:true, this option will make it so the top of your image will get cut off if the browser width is smaller than your images width per ratio. i.e. If your browser window is wide, and you have a skinny image, you will see more of the bottom of your image than the top.

zIndex: -10
This option gives you custom control over what z-index is assigned.

maxFollows: ‘both’
This option was added so that the image max will follow the width, the height, or both. i.e. if maxFollows:width, the max will always and only be as large as the width of your browser, and the height will be disregarded; meaning the user might have to scroll down to see the bottom part of the image.

slideShow: false
Simply setting this to true will set your images to run as a background image slideshow with crossfades in between images. See slideDelay to change the length you are on each slide.

slideDelay: 5
In seconds, this number is how long each slide is shown for.

slideShowTitle: true
This option tells the slideshow whether or not to take your title=”" tags from your image and show that content as a caption in the lower right corner.

loadingGif: ‘images/loading.gif’
This is the URL to a loading graphic which is displayed when images are loading in your slideshow.

loadingGifWidth: ‘32px’
This is the width of your loading graphic.

loadingGifHeight: ‘32px’
This is the height of your loading graphic.

Examples
My first example is a very basic example of an image that resizes in a liquid layout with some copy to the left of the image.

$('img.maximage').maxImage({
verticalOffset: 91,
horizontalOffset: 490
});

View all the demos that show how this plugin can be used.

Instructions
You can view instructions on how to use this plugin at the instructions page of the demo.

Download
You can download and try out the most recent release of maxImage at jQuery Plugins.

Community Response
Please leave comments here to let me know what you think of this maxImage and if there is anything I could do to improve it.

Thanks.

Note: I should note I am also working on a dynamically resizing grid plugin for multiple columns of thumbnail images. I will probably call it maxGrid.

I was frustrated that no one had created a really simple rounded corners plugin for jQuery. As I could see it, it wasn’t a difficult task. So I went to work and created a plugin. This plugin does only a couple of really simple things. If you start with an tag, it writes 5 others, and styles them accordingly.

Create the rounded corners graphic
Create a small image with a rounded corner on each four corners and a transparent background:

Next, upload this graphic to your server.

Edit your code
Make sure you have the library (jquery.js), the script (jquery.rcorner.js), and the stylesheet (jquery.rcorner.css) uploaded to your server using an FTP program like Transmit.

Then make sure you are associating those files in your html document. Put these lines inside of your <head> tag and make sure the src and href’s point to the actual files.

<link rel="stylesheet" type="text/css" href="jquery_rcorner.css">
<script src="jquery.js"></script>
<script src="jquery_rcorner.js"></script>

Now add an ‘rcorner’ class or some other selector to your image tag, or div, etc.

<img src="imagesrc.jpg" class="rcorner" />

or

<div class="rcorner">I have rounded corners.</div>

Then go back up to your <head> tag, and right before the closing one, add the following code:

<script>
$('img.rcorner').rcorner({
bgImageLocation: 'images/background.gif',
bgImageWidth: '30px',
bgImageHeight: '30px'
});

Make sure you edit this to represent where your background image is located on your server and the width and height of your background image.

This will write the following automatically when your page loads:

<div class="rcorner-wrapper">
<img src="imagesrc.jpg" class="rcorner" />
<div class="top_left"/>
<div class="top_right"/>
<div class="bottom_left"/>
<div class="bottom_right"/>
</div>

It then uses the attached stylesheet to place all of the rounded corners in the correct places.

Download and other stuff…
For more examples, see http://www.aaronvanderzwan.com/rounded_corners/.

Download: jquery_rcorners.zip (updated January 26, 2009)

If you use this, let me know what you think… It will make me feel better to know someone else has found this useful.