Jappler Recommends: Shutter Reloaded

I had been looking around for some alternative lightbox like plugins (for photos) and came across the super lightweight option: Shutter Reloaded. The script is super lightweight (10k), does not require any other libraries, and works perfectly without having to add any additional code. If you are looking for a nice little lightbox like plugin – check it out!

Jappler Recommends: Lightview Plus WordPress Plugin

I recently switched from using a gallery WordPress plugin called fGallery to something that is more elegant and updated: NextGen Gallery During this transition, I found a really cool lightbox-ish plugin called Lightview Plus which is more polished than your typical lightbox plugin.

Example:

You do not have to add in extra code to get the images to show up in the lightview – it automatically takes care of everything for you.

Followup: Bluetooth Cordless Phone

I recently posted about the bluetooth cordless phone I ordered. Yesterday I got everything set up and to my surprise – both my iPhone and Amy’s Sony Ericsson something or other phone both paired without any problems and everything works quite nicely! I would definitely recommend this phone (or type of phone) to anyone who gets a lot of calls on their cell and home phones. Not to mention, the UI of this Panasonic phone (KX-TH111) is great!

Jappler Recommends: Do Not Use iPowerWeb Hosting

I have a lot of hosting companies – thanks to my clients who come in with all kinds of hosting companies. I have found that some hosting companies are better than others in terms of support and I just found another horrible support company that I wanted to mention: iPowerWeb. I was on hold multiple times today for over 30 minutes and I waited to “Live Chat” with someone for over 20 minutes. When someone actually got on and tried to help, after 1 hour, they told me they could not help me and had to escalate the issue. Yikes. (other hosting posts)

Jappler Recommends: Liquid Web

It has almost been two years since I moved all my sites to Liquid Web for my hosting needs and am still very happy with them. If you take a look at my hosting category, you can see I have been around the block a few times. I have had a few issues, BUT, everyone who I have spoken with is very knowledgeable, helpful, and always been on top of the issue. If you are interested in a new web host, I highly recommend Liquid Web.

Great CSS Buttons

I am working on a project that started small and got really big. Good for the company, bad news for the code. I am in the process of going through the code and to fix and optimize it for multiple browsers. One word of advice for developers: when starting a new project, expect exceptions. One issue I have run into: not all buttons will be 90px wide like once thought by the original designer. By using flexible code, your big and small sites can benefit from changes in the future. If you are going to create buttons for your site, check out the “sliding doors” buttons. I also recommend the “sliding doors” tabs – I use those on almost every site I do.

My iPhone

iPhone I finally did it, I had to…I bought an iPhone and I have loved every minute of owning it. I had an appointment the second day I owned it and the person I met with wanted to “zoom the pictures like the commercials”. I also now have the ability to carry around tons of pictures and movies of my son, as well as some of my favorite Curb Your Enthusiasm so I can watch my favorite show while waiting instead of reading some lame magazine. Sure, the camera is not great, but it beats mine on my old Blackberry (there was none) – and the user interface is absolutely fabulous. Automatically detecting when I flip the iPhone over to change my view with music, pictures, etc is wonderful. It has a great weight and I am quite excited about it! Sure I miss hearing the Price is Right theme song when Amy calls, but I cannot imagine it will be too long before we can easily switch ring tones. Great work Apple!

css containers: one image, fixed width, rounded corners.

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the third of three articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I have used this code on several large and small sites and have enjoyed the flexibility of both changing the height and the width. (Also see css containers: simple, fixed width, rounded corners, and css containers: fancier, fixed width, rounded corners..)

There are some sites where you need to have some flexibility with both height and width of the containers. This technique is known as the “ThrashBox” and I will not go into detail about it because it is well documented: ThrashBox. If you want to use something like this, there is a great web site that offers to create the graphic needed based on your input of color, height, weight, and corner radius. Check it out:Spiffy Box.

CSS Containers: Fancier, Fixed Width, Rounded Corners

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the second of 4 articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I created this code from scratch and use this for any fancier fix width boxes I might need for sites I create. Height is not fixed. (Also see css containers: simple, fixed width, rounded corners.)

The container:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url(“/downloads/rounded-corners/top-rounded.gif”) no-repeat bottom;}
.roundedBoxMiddle{background: url(“/downloads/rounded-corners/middle-rounded.gif”) repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url(“/downloads/rounded-corners/bottom-rounded.gif”) no-repeat top;}

Content

This is a quick and easy way to do something that looks better than a square box.

The code:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url("/downloads/rounded-corners/top-rounded.gif") no-repeat bottom;}
.roundedBoxMiddle{background: url("/downloads/rounded-corners/middle-rounded.gif") repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url("/downloads/rounded-corners/bottom-rounded.gif") no-repeat top;}


<div class="roundedBox">
<div class="roundedBoxTop"></div>
<div class="roundedBoxMiddle">
<h2>Content</h2>
<p>This is a quick and easy way to do something that looks better than a square box.</p>
</div>
<div class="roundedBoxBottom"></div>
</div>

General Information:
This is based on a simple graphic I created in Photoshop using the rounded corner box tool, a drop shadow, a stroke, and a left to right gradient. I then cut it up into three pieces: top, middle, bottom. *The .roundedBoxMiddle p {margin:0; padding:0;} is specific to my layout and is not needed if you want to use this.