ericbieller.com

Drupal 6 image paths in template files

Eric — Wed, 18 Aug 2010 19:08:03 +0000

I had a hard time finding much info on this in a Google search so I figured I would post the simple answer. In order to include images in your template files you must include the path relative to your installation. Assuming your template images are in the images folder, this is done with the following code:

 echo $base_path . path_to_template(); ?>/images/picture.jpg" />

The Perfect Development Environment

Eric — Mon, 09 Aug 2010 17:18:07 +0000

Developers will argue all day that a particular development setup is better than the next but we can all agree that having a development environment that is both comfortable and efficient is crucial for creating great software and meeting deadlines.

Here I will be covering, in detail, my ideal development environment. Some of it you will agree with, some of it you will disagree with, but hopefully this can help you refine your own development environment and question your current setup.

Read the full article on Think Vitamin

An Overview of Smarty Templates & Other Comparisons

Eric — Tue, 06 Jul 2010 14:05:25 +0000

The template engine’s job is to help separate out application model logic from display logic and to provide a simpler, more readable way to add functionality to your display files. Since HTML was never meant to handle arbitrary logic, it is generally kept separate from the Model and Controller layers of an application..

Read the full article on OXP

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

Eric — Thu, 24 Jun 2010 16:31:35 +0000

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:

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 {
        background: #a6bcce;
        color: #354e62;
}
 
#items {
       margin-top: 10px;
       width: 100%;
}
 
.item {
        background: #cdcdcd;
        color: #3b3b3b;
        float: left;
        margin-right: 10px;
}

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:

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).css('backgroundColor', '#cedae3');
                },
                out: function() {
                        $(this).css('backgroundColor', '#a6bcce');
                }
        });
});

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).css('backgroundColor', '#a6bcce');
                }
        });
});

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).css('backgroundColor', '#cedae3');
                },
                out: function() {
                        $(this).css('backgroundColor', '#a6bcce');
                },
                drop: function() {
                        var answer = confirm('Permantly delete this item?');
                        $(this).css('backgroundColor', '#a6bcce');
                }
        });
});

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. As always, thanks for reading and be sure and leave and comments and/or criticisms below.

My First Impressions of CakePHP

Eric — Fri, 18 Jun 2010 15:31:25 +0000

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

Eric — Wed, 16 Jun 2010 18:07:31 +0000

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.

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

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.

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.

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

Eric — Sun, 13 Jun 2010 16:11:01 +0000

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?

Eric — Mon, 07 Jun 2010 17:21:17 +0000

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!

ftpmailer.com – Accessing your ftp server via email

Eric — Thu, 27 May 2010 16:56:13 +0000

A month or so ago I stumbled upon a problem that needs fixing. A Twitter friend of mine was searching for a solution that would allow him to grant controlled access to his FTP server without having to setup a temporary account and teach someone how to use an FTP program.

Once I became aware of this problem, I immediately began searching the internet for some piece of software or service that could make this happen. I was unable to find a single solution so I decided to create the solution myself.

So how does ftpmailer.com work? Basically you can add an FTP account in the administration area which creates a temporary email addresses that grants access to a particular directory on your server. The email format is username-driectoryalias@ftpmailer.com. A Directory Alias is a short term that represents a directory on your server. It sort of works like a password so don’t give it out to strangers! Ex: You might setup the alias “sitepics728″ for your “/images” directory. Then you simply hand out the email address “ericbieller-sitepics728@ftpmailer.net” and every attachment (excluding potentially harmful files like .exe) is uploaded the the corresponding directory!

Once an email is sent to “ericbieller-sitepics728@ftpmailer.net”, the sender receives a bounce back letting them know how everything went. If the file was uploaded successfully, a link to that file (in long and short form!) is shared back to the sender. This also creates a super easy way to share small files with your friends. Just send a file to your custom email and share the link that’s sent back to you!

So head over to ftpmailer.com and sign-up for the beta! The launch date is tentative but we are shooting for about 2 or 3 months from now. You can also follow ftpmailer on Twitter at twitter.com/ftpmailer

Creating a repeating website background texture in Photoshop

Eric — Wed, 26 May 2010 14:21:40 +0000

Prerequisite: You are familiar with Photoshop and the clone tool.

Part of optimizing your website for all browser types and monitor resolutions can include creating a repeating texture that will scale to fit any monitor size. I’m going to show you my technique for creating a texture that can infinitely repeat width-wise from a basic non repeating texture. I’m open to pointers or workarounds though if anyone out there has anything to contribute.

The starting texture

This is just a standard wood texture that does not repeat. It has a lot of marks and blemishes that interfere with each other making it impractical to use this as a background.

You can see that if we try to repeat this texture to the right, we end up with quite a few issues that are fairly obvious. So here is how I deal with a texture like this.

Step 1: Cut the image in half

First thing we need to do is to create 2 layers from this image by cutting it in half. You can do this easily by selecting the Rectangular Marquee Tool in the Tools Palette. At the top toolbar you will see “Style:”. Set that to “Fixed Size”. Then, since our texture is 468×468, set the marquee to 234×468. This way, when you drag out the marquee, it will automatically divide the image in half.

With the texture’s layer selected in the Layers Palette, right click the image and select “Layer via Cut”. This will create 2 layers where the marquee was outlining.

Step 2: Flip

Now that the image is divided up into 2 separate layers, select the layer in the Layers Palette that contains the left side of the texture.

Once you have the layer selected, go to Edit >> Transform >> Flip Horizontal. Then go ahead and flip the right side horizontally as well. This will flip the left side of the image horizontally, creating our unsightly repeating texture line in the middle of the image.

Step 3: Fix the problem areas

The next thing we need to do is to blend the two sides of the texture together, getting rid of the seam. First we need to select the both of the two layers that we created (you can select both by holding ctrl as you click them). Then right click on the highlighted layers and select “Merge Layers” at the bottom of the menu.

Now select the Clone Stamp Tool from the Tools Palette. Change the brush size to somewhere between 10 and 15. The goal is to blend the two textures together as seamless as possible. So start blending the texture one area at a time. Try to sample from random areas on the image to reduce texture repeating.

Conclusion

Now you have a texture that can repeat-x seamlessly off into infinity. If you would like to make this texture repeat both x and y, repeat this tutorial but divide the image in half on the width-wise instead of height-wise. It is usually a tad more difficult, however, to make a texture repeat-x so I may create a tutorial for that later on. Please feel free to leave any comments or criticism. Thanks for reading!