Karl Steltenpohl

I just recently changed my coding environment over to the Eclipse IDE for php, anyways I was looking for the best way to FTP from Eclipse and I concluded my search with the Aptana plugin for Eclipse. Its easy to install, but after that figuring out exactly how it works was kind of a pain. Once I figured it out though it works great.

Installing Aptana Plugin:

Download the Aptana plugin for Eclipse here:
http://www.aptana.org/products/studio3/download

Follow the instructions on the download page. Here they are again for reference:

• From the Help menu, select Install New Software... to open the Install New Software dialog.
• Paste the URL for the update site into the Work With text box, and hit the Enter (or Return) key.
• In the populated table below, check the box next to the name of the plug-in, and then click theNext button.
• Click the Next button to go to the license page.
• Choose the option to accept the terms of the license agreement, and click the Finish button.
• You may need to restart Eclipse to continue.

Using the Remote/FTP Features of Aptana:

Now once I got the Aptana plugin installed that's when I found the information out there on how to use it somewhat confusing. There are several explorer panes to explore your files in Eclipse. The one your going to want to use is the "Project Explorer", not the app explorer, or the php explorer. 

Setting up FTP/Remote Connections:

To get to the remote connections panel, in the file menu go to Window >  Show View> Other..., then type remote into the search field and you should see the "Remote" option. Double-click it. This is where you will set up your remote FTP/SFTP connections just like your used to.

Configuring Your Project to Use Your Connections:

Getting your project to upload/download to your remote connection is easy from the Project Explorer panel. The App Explorer panel and the Php Explorer panel gave me a lot of issues. By default my eclipse (for php) was having me use the Php Explorer. After installing Aptana, it was having me use the App Explorer. So in the Project Explorer, there will be a connections icon in your project (it looks like a little globe). Click the connections icon. Here you will setup how and which remote connection your project uses. Once you have it set up. Uploading and downloading files is a cinch! Just right click and transfer.

While working on a project I was googling how firebug achieves its element selection effect. I found some examples but ended up creating my own. I experimented for a long time with different methods before writing my own, and this works the best and is the simplest that I've seen.

The css for the selection highlight class:

.hoverhighlight{
    /*outline:1px solid #2381d0;*/ /* You can use either an outline or a box-shadow */
    box-shadow:0 0 3px 3px #2381d0;
    -moz-shadow:0 0 3px 3px #2381d0;
    -webkit-box-shadow:0 0 3px 3px #2381d0;
}

This is a very simplified version of the code, but it works suprisingly well. It requires jquery. If the element you are hovering over has a parent with no overflow the outline/highlight may be obscured. There are ways around this issue, but not Im not covering it in this post.

$("body").on("mouseover", function(event){
    $(".hoverhighlight").removeClass("hoverhighlight");
    $(event.target).addClass("hoverhighlight");
});

Wow much simpler than you'd think! (IE won't work with box shadow.)

Last night I picked up a copy of REWORK written by Jason and David, the founders of 37signals. I tore through the first 100 pages in 20-30 minutes. I can already tell this is a great book and I strongly recommend it. I wouldn't say that REWORK is a wealth of information you don't, but need to know. Instead the book is one of those reads that articulate common sense ideas so well that it becomes exciting.

The REWORK book has been out for over a year, but I just caught wind of it from a CEO's reply on Sprouter.com. The catchy text on the back cover caught my eye. But the warning from Seth Godin on the cover to "ignore this book at your own peril" sold me.

Anyway just wanted to give props to the guys at 37signals for building great tools, writing a great book, and continuing to be a source of useful inspiration to those who consider themselves starters! 

Demo & Download LazyKarl v1

• LazyKarl v1 Demo
• Download LazyKarl v1

The lazyKarl jQuery plugin loads a webpage's images once they are within the user's viewport.This is a working cross-browser lazy load jQuery plugin. Other lazy load plugins have been less than effective because some major browsers load all of the images on a page when the DOM loads. jQuery plugins are usually not effective until the Dom is finished loading and only after all the images on the page have already loaded.

The Lazy Karl plugin works around this issue with a less than perfect approach, but none the less a functional one. By leaving the src attribute empty or out of the img tag completely, and placing the path to your image inside the rel attribute, images will never load until they are within the user's viewport at DOM ready and on scroll event. A perfect solution would utilize server side scripts like php, but lazyKarl works great for images.

Usage

Place the following code into the head of your document

The following code is an example of how to write the html. Just wrap the list of images you wish to load lazily with the element that you declared lazykarl on in the head.

Make sure that you place path from standard src tag value in the rel tag. This is important to how LazyKarl v1 works correctly across multiple browsers. You do not have add the src attribute to the image tag at all.

Demo & Download LazyKarl v1

• LazyKarl v1 Demo
• Download LazyKarl v1