Latest blog post: 10 Epic Dribblers That You Should Be Following →

Archive for June, 2010

Tutorial: How to create a simple drag and drop with jQuery

by
Ericon June 24, 2010  :  19 Comments

Let’s face it, creating drag and drop functionality with JavaScript alone is tough. What would have taken me hours with JavaScript now takes me a matter of minutes with jQuery. Drag and drop is so beneficial for a web page because it makes it seem more like a desktop application and we all know that that’s where the internet is headed. So here is a quick tutorial to help you get up and running with jQuery drag and drop.

Click here for a demo of what we’ll be making.

1. Create the HTML elements

To use jQuery drag and drop in it’s basic form, there really isn’t any special markup required. Here is the basic setup that we’ll be using:

        <div id="trash" class="out">
                <span>Trash</span>
        </div>
        <div id="items">
                <div class="item"><span>Item 1</span></div>
                <div class="item"><span>Item 2</span></div>
                <div class="item"><span>Item 3</span></div>
        </div>

And here is some some quick css to get the page looking right.

body {
        font: bold 12px arial;
}
 
span {
        float: left;
        margin-top: 17px;
        text-align: center;
        width: 100%;
}
 
#trash, #items, .item {
        height: 50px;
        width: 50px;
}
 
#trash {
        color: #354e62;
}
 
#items {
       margin-top: 10px;
       width: 100%;
}
 
.item {
        background: #cdcdcd;
        color: #3b3b3b;
        float: left;
        margin-right: 10px;
}
 
.over {
    background-color: #cedae3;
}
 
.out {
    background-color: #a6bcce;
}

So here we are setting up a simple example of a drag and drop scenario. We have a bunch of items and a trash bin. We want to be able to drag those items and drop them on the trash bin and trigger a function. Now let’s get ready to code some jQuery!

2. Download and include jQuery files

Drag and drop functions require both the jQuery library and jQuery UI. The jQuery UI website allows you to only download the parts you need so click on “Build custom download” and be sure to include all the UI Core elements plus Draggable and Droppable interactions. Download your custom jQuery UI file and include both the jQuery 1.4 library and the jQuery UI tools in your head of your document like so:

<head>
      <script type="text/javascript" src="js/jquery1.4.2.js"></script>
      <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
      <!-- We'll be writing our jQuery in dragdrop.js -->
      <script type="text/javascript" src="js/dragdrop.js"></script>
</head>

3. Create the draggable elements

So let’s get started coding some jQuery. The first thing we need to do is make the items on the page draggable. This only involves a few lines of code:

$(function() {
        $(".item").draggable();
});

That’s it! Reload the page and checkout your new draggable elements. You’ll probably notice an immediate issue. The draggable elements don’t snap back into place. Instead they simply stay wherever they are dragged to. This can be fixed by enabling the ‘revert’ option:

$(function() {
        $(".item").draggable({
                revert: true
        });
});

That’s a lot better. Now we have some nice draggable elements on our page that snap back into place.

4. Create the droppable element

Now that we have our draggable elements, we need a place to drop them. That’s where jQuery Droppable function comes in. All we have to do is declare the trash div as droppable much like we declared the page items as draggable earlier.

$(function() {
        $(".item").draggable({
                revert: true
        });
        $("#trash").droppable();
});

Now this alone won’t do much. Let’s go ahead and add an alert when an item is held over the trash can so we know that it’s working.

$(function() {
        $(".item").draggable({
                revert: true
        });
        $("#trash").droppable({
                over: function() {
                        alert('working!');
                }
        });
});

When you hold your cursor over the trash box while you are dragging an item, you should see ‘working!’ in a javascript popup. We are nearly in business. Let’s improve on the overall functionality just a bit. By using droppable’s ‘over’ and ‘out’ options we can make the Trash can change colors when an item is hovering over it.

$(function() {
        $(".item").draggable({
                revert: true
        });
        $("#trash").droppable({
                over: function() {
                       $(this).removeClass('out').addClass('over');
                },
                out: function() {
                        $(this).removeClass('over').addClass('out');
                }
        });
});

5. Create a deletion confirmation event

Since we are sending these items to the trash. Let’s make a quick alert that asks the user if they would like to proceed. This can be done by adding a function on to the ‘drop’ option of jQuery’s Droppable function. We also need to remember to change the background color of the trash box back to normal since ‘drop’ skips over the ‘out’ function.

$(function() {
        $(".item").draggable({
                revert: true
        });
        $("#trash").droppable({
                over: function() {
                       $(this).css('backgroundColor', '#cedae3');
                },
                out: function() {
                        $(this).css('backgroundColor', '#a6bcce');
                },
                drop: function() {
                        var answer = confirm('Permantly delete this item?');
                        $(this).removeClass('over').addClass('out');
                }
        });
});

6. Altering the highlight area

You may notice at this point that the droppable item is only triggered when your cursor actually moves over the droppable element. This may be the functionality you want but I prefer for the box to trigger the ‘over’ event when the actual item intersects with the trash box. This can be changed easily by setting the ‘tolerance’ option in our droppable function.

$(function() {
        $(".item").draggable({
                revert: true
        });
        $("#trash").droppable({
                tolerance: 'touch',
                over: function() {
                       $(this).removeClass('out').addClass('over');
                },
                out: function() {
                        $(this).removeClass('over').addClass('out');
                },
                drop: function() {
                        var answer = confirm('Permantly delete this item?');
                        $(this).removeClass('over').addClass('out');
                }
        });
});

Conclusion

Using the jQuery library with jQuery UI tools we were able to quickly replicate the drag and drop functionality that is commonly found in a desktop application. While this is a basic example of how you can utilize jQuery’s drag and drop functionality, this can be easily expanded by triggering a jQuery.post function on drop that actually removes the item from the database. Then you could reload the results in the items div, creating a working drag and drop file/item manager. The possibilities for this really are endless.

You can download the full source of the tutorial and checkout a demo here.

Well I hope you enjoyed the tutorial and hope it helps you get started using jQuery drag and drop. Did this help you out? Would you do anything different? Please let me know in the comments section below!

My First Impressions of CakePHP

by
Ericon June 18, 2010  :  Leave a Comment

So I recently decided to look into some of the different PHP frameworks and pick the one I thought might be the best. I looked into CodeIgniter, Symfony and CakePHP but ultimately chose CakePHP. My decision came after researching and watching videos found on each framework’s website and checking out various speed tests. CakePHP seemed to be the most attractive to me. It has excellent documentation, a great website, and a fairly active community, plus I just liked the way it was organized and implemented more so than CodeIgniter or Symfony. CakePHP was the the slowest in speed tests though, but it wasn’t a large enough difference to worry me.

Initial Thoughts

My initial thought of CakePHP after getting it setup and looking over some of the documentation was “Wow this seems complicated”. There is a certain methodology behind CakePHP that should usually be followed closely, but there’s definitely a learning curve which made it kind of frustrating at times. I found myself searching Google often for anything that wasn’t covered specifically in the Cake Book. It seemed though that with every problem I solved, I learned a little bit more about Cake best/common practices which helped me become more familiar with the framework.

After working with it for a week or two

Once I got the hang of organization, validation, form automagic and Auth for user authentication, I was starting to fly through some of the things that initially took me an hour to implement. I really think it just comes down to being determined and not getting discouraged when it seems like you’ll never get the hang of it.

Conclusion

Overall I am very impressed with CakePHP and am kinda sad that I waited so long to start using it. The way it handles form validation is so simple and intuitive, all the auto-magic that happens behind the scenes is un-obtrusive yet very customizable and your code remains Object-Oriented and organized very logically. While I still don’t know much about CakePHP, I am confident that which each problem I solve, I will become that much more familiar with the framework and begin decreasing development time dramatically while maintaining a more organized code base. So, if you haven’t tried CakePHP, I suggest you do and tell me what you think!

Why the Windows 7 Task Bar is better than the Mac OSX Dock

by
Ericon June 16, 2010  :  7 Comments

The Windows 7 Task Bar

The Task Bar in Windows 7 is broken up into 2 parts by default. You have your pinned program shortcuts and open programs in the middle (much like the OSX Dock) and to the right you see the Task Tray which shows individual running programs as well as programs running in the background.

Windows 7 Task Bar

Now let’s break this down and take a look at each segment:

Quick Launch

Quick Launch

The Quick Launch bar isn’t included in the Task Bar by default (unlike WinXP) but, since Windows 7 allows you to pin program shortcuts to the Task Bar, I feel like it is confusing to have open programs mixed with unopened programs. So I like to keep them separated by having program shortcuts in the Quick Launch and open windows in the main area of the Task Bar. If you would like to enable the Quick Launch bar then you can follow this guide.

Open Programs

The middle section of the Task Bar shows your open programs. This is the biggest change from the WinXP days and I think it’s a change for the better. It basically functions like the OSX Dock with a couple of differences:

To indicate that the particular program has more than one window open, it shows a stack behind the icon while the OSX Dock only shows a dot underneath the icon indicating that it is open.

Taskbar Stack

Dock Dot

Clicking a stack will display a small thumbnail and textual representation of the open window while OSX requires you to right-click the icon and will only display a textual representation of the window.

Taskbar Menu

Dock Menu

And for those of you who think Windows always copies OSX, it is obvious that they both take ideas from eachother, though some are more blatant than others. Either way, I’m not going to hold it against Microsoft for taking what Apple did and making it better and vice-versa.

Conclusion

Although I can give OSX points for their Dock being a bit prettier than the Windows 7 Task Bar, I do think that the Task Bar is a little more realistic and productivity oriented. When I have 8 programs open, each with a window or two open within them, I would take the Windows 7 Task Bar over the OSX Dock any day of the week. To me, it’s just easier. What are your thoughts?

How to get freelance work on the internet

by
Ericon June 13, 2010  :  Leave a Comment

When I took the plunge and quit my day job to work at home, my worst fear was being unable to find steady freelance work on the internet. What I quickly discovered was if you put yourself out there and learn to take advantage of the avenues available on the web today, looking for new clients can actually be a simple and fun process! So here is what I have learned so far. I hope this can help some new freelancers out there.

Personality is 70% of the gig

This may be the single most important aspect of freelance. Never interact with a potential client via a bland copy-and-pasted script asking for their business. Most people can see right through this and they figure, if you don’t take the time to address them personally, they will keep looking for someone who will.

So, if you are sending an email or proposal to a potential client, always hand write it. I have went up against 30 other freelancers and been chosen simply because my proposal letter stood out. Seriously, this is important.

Use Craigslist

Craigslist is the first place I would recommend looking for new freelance gigs. I generally stay under the gigs >> computer or gigs >> creative section. I don’t recommend searching for specific types of gigs. Just start browsing by date and you’ll eventually find a gig that seems like it was made for you. When that happens, write an email with that personal touch that tells the potential client that you are excited about the project and can’t wait to work with them. Be sure to link to a personal website or online portfolio if you’ve got one. If not, pasting a list of links to recent projects into the email is fine.

Freelance websites

Using a freelance website like Elance.com, Freelancer.com, oDesk.com, etc can be a great way to find new projects and clients but can seem intimidating at first.

I would recommend starting with Elance.com. Of all the freelance websites I have used, I have had the best luck with this one. What makes Elance work so well, in my opinion, is the fee structure. Every account level allots a freelancer a certain amount of “Connects”. Every job you submit a proposal to costs you a given amount of these Connects. This helps keep the market from being saturated by low-ballers who will do an entire website for $75 because you providers have to pick and choose which jobs to use their Connects on.

Here are a couple points that I believe will help you find success on Elance:

1. If you are new to Elance, let the provider know that you understand the risks of hiring someone new and that you are just looking for that first job so you can prove yourself and start building a reputation. Providers can usually sympathize with this.

2. If you reside in the U.S. and you notice that most of the proposals submitted have been from offshore providers, don’t be afraid to let them know that you understand how difficult it can be working with an offshore provider and that you speak English as your native language.

3. Write each and every proposal by hand. Include some remarks about the specifics of the job. This helps the potential client feel like you have read through the post and are not simply copy-pasting a reply.

Put yourself out there

If you want to get noticed and start making a name for yourself online, you have to get out there and interact with people. Use sites like Digg, stumbleupon and delicious and comment on any interesting articles you find. If they are good enough you might even subscribe to their RSS feed or retweet it. Generally, if you show interest in others, they will show interest in you.

Another good way to get your name out there is to build a blog and write about the tech topics you think are important. If the article has decent content, you will notice an increase in traffic from Google searches alone. Be sure and include your personal info on every blog post so readers can subscribe to your blog or follow you on Twitter.

Build a brand

While there are many out there who prefer to work with a single freelancer, there are also many who do not, which may lead some freelancers to operate under a company name. This can help if you are trying to portray a certain type of professionalism to your potential clients and in my opinion will will likely attract larger companies, which may be the goal for some freelancers.

Another option is to keep your entire team virtual. If some work comes in that isn’t in your area of expertise, send it to a friend who can take care of it for a cut of the price.

Overall, it comes down to being proactive and making an effort daily to become a part of different communities online and interact with others who you feel are creating great content!

That’s all I have for now. If you have any questions or criticisms feel free to leave them in the comments section below. Thanks for reading!

How can I gain interest in my project from Venture Capitalists?

by
Ericon June 7, 2010  :  Leave a Comment

Are you sure you need startup cash?

First off, are you 100% sure that you cannot bootstrap your startup into at least the initial launch? Have you looked at all options? Most ideas can get off the ground with only a few extra hours of work a night. Maybe you need to search for a more technical co-founder who can help you get it started? For some of us it’s difficult to work from home. If that’s the problem then hop on Craigslist and search for a cheap office space. I once rented a 90 sq ft office for $240/mo. For some people this is necessary but if you can handle the distractions of the home office, that it generally the best option.

Represent your product or idea in a creative way

So you’ve analyzed all the options and you have decided that venture capital is the way to go. The first thing you need to do is create a digital representation of your product or idea. Before contacting venture capitalists, create some kind of video demonstration that gives a nice overview of the project, even if it’s just a short windows movie maker slide-show. This is where it helps to have a designer as a co-founder. I think production value is very important in showing the VC that you are capable but you need to create the video as cheap as possible. Maybe you have a friend with video editing skills that owes you a favor? Maybe you can trade some work? Whatever the case, this is an easy way to get your idea across to potential investors.

Why would a VC ever respond to my email when he gets 100 a day?

Many venture capitalists will read every email that comes their way. Emails are important to them because they are always looking for great ideas. Every unread email is possibly a missed investment opportunity. That being said, a good way to stand out in the crowd is to show some personality in the email and be very thankful. Having a VC even read your email is worth a lot so make sure you portray your appreciation at both the beginning and the end of the email. Let them know that you understand that they are on a busy schedule and you don’t want to take up more than a couple minutes. Keep the email short and sweet and don’t forget to link to your video and any other digital pieces you have created, be it graphics, design concepts, 3d renderings etc..

Here is an excerpt from an email of mine that got a response from a Silicon Valley investor. This email got us in the door and we have been talking with this investor a while now. He has became a valuable asset and mentor to us all from this one email:

“Hi ——, My name is —- —-and I’m the co-founder of a site called ———. I know you’re super busy but if I could have a couple minutes of your time it would be very humbling and I would be forever grateful. I have a presentation video and would absolutely love it if you would give it a look see. If the presentation sparks your interest, I’m sending the executive summary as well. I’m a 24 year old entrepreneur and would love to hear any criticism you might have. I’m in it learn! Thanks again for even reading this, that means so much to me. Keep up the great work at ——- and ———–! I hope to hear from you soon.”

Venture Capitalists don’t have a lot of time to spend reading your email so keeping it short is very important. This particular VC specifically commented on how this email stood out from the others. It is also important to let them know that you are passionate and you want to learn from them. After all, they likely have a ton of experience so every sentence they write to you is important.

If you have any questions or would like me to expand on any of this just leave me a comment. Thanks for reading!

Get Adobe Flash playerPlugin by wpburn.com wordpress themes

The best way to contact me is through one of the networks on the left or by emailing me at
ericbieller [at] gmail [dot] com.