Drop The Nerd :: RSS Feed

The tools of a Nerd

Sat, 21 Jan 2012 18:37:23 -0800

If you're a nerd like me, you definitely value your hardware. This leads me to touch on the greatest modern battle of them all Macs vs PCs. Don't worry, I'm not going to hate on anyone for their preference - I completely understand the value in appreciating something for the purposes it serves and, as most things are, the prefered useage of a particular brand of computer is, at times, situational. I used to be 100% PC and a cold hearted hater of "Apples". Now, the only PC under my roof isn't even plugged in, and I proudly power a MacBook Pro, 27" iMac, iPad, iPhone. So, when did I make the conversion? Probably about the time I started doing more work than video games... most of my gaming now is console based - and all of my development is done on my macbook pro. It makes me wonder though, 10 years from now, what will I be working on? Will it be all one preferred brand or split? Hard to say.

About Project Management

Fri, 20 Jan 2012 22:19:15 -0800

Let me start off by saying that I am not a project manager. However, I feel qualified to write on this topic because I interact with project managers on a daily basis. With anywhere from 5 to 20 active (not simultanious) projects in the pipeline at a time, there's a lot to juggle. I believe the trick to project management is simple to ask questions and then set deadlines, todos, or timelines. Without knowing the full story of a project, be it a web site, iphone app, or any other medium, it's tough to know how long it will take to complete, or how long a particular part of the project will take - let alone the effects one portion of the project may have on something else.

Often times we have clients that feel like it's their job to "manage" the project by adding features, making changes, and basically extending deadlines. These are not good practices for managing projects, OR people for that matter. It's like tasking someone with the job of putting out a fire, while the entire time you're adding more wood, gasoline, and tossing matches into the already blazing flames. Please don't get me wrong, I'm not saying clients shouldn't be envolved. I believe clients should be as envolved as is necessary... during the planning phase.

Perhaps I'm just jaded from working with so many clients that feel like it's their job to prolong the lifespan of a project by changing their mind 5 times and then going back to the first idea, but only after the other 4 have been fully developed. Sure, sometimes you see something and you just don't like it - but if it was what you asked for, then now it's what you've got. If you want to make changes, set a hard and fast breaking point - let's change this... not let's try this, no maybe this, or wait how about this. Keep elements of what you like, remove what you dislike, and work towards a better product - not a muddled mess of a project abomination.

Stepping down from my soap box now. Thanks for listening.

Google joins SOPA blackout

Tue, 17 Jan 2012 21:29:13 -0800

I was a little surprised, well - not surprised, but I just didn't expect exactly what I saw on google.com. What an awesome way for them to participate without leaving us all up a creek during the SOPA blackout. I definitely think it's awesome so many sites, I've heard something like 5000, are participating - but I worry it will have little impact at all. It almost seems like a joke at this point. Don't get me wrong, I truly hope the message is received. I just don't expect much. Statements like this often fall on deaf ears- not for a lack of trying, but for a lack of attention on the part of the receiving end... seriously, if they aware at all and not so blind/deaf and dumb would this really even be an issue?

I think it was Wiki founder, Jimmy Wales, that said something to the effect - "By this logic they should just ban all cars for fear that at some point they might be envolved in a bank robery". Well said Jimmy, if it was really you who said it - and I apologize for the misquote if not.

Jerry Yang Leaves Yahoo

Tue, 17 Jan 2012 21:26:57 -0800

So, one of Yahoo's (yes, the search engine, email client, entertainment, dating, etc etc etc site) co-founders, Jerry Yang, announced today that he's outta there! Apparently he's been a bit of a trouble maker for the company for some time now - funny how a "co-founder" becomes a trouble making / deal blocker - but hey I guess that's how it goes in the web biz. Noone can argue that he's had a good run, I mean, it's yahoo. Raise your hand if you ever had a yahoo email address? Yup, I know I did. Raise your hand if you can remember the last time you did a search at yahoo.com? Hmm... me neither.

Here are a few more articles in case you really want to read into this more:

How To: SilverStripe Controllers made easy

Mon, 16 Jan 2012 19:58:44 -0800

If you're like me, sometimes you just want to build out a quick action sort of link. You know, like, dropthenerd.com/action/update/$recordID, or dropthenerd.com/post/new. At first I found myself just tacking these on the Page_Controller, and spitting out links like dropthenerd.com/home/myaction/ID/OtherID... but I'm pretty specific in how I like my link structures to look - so I adopted the following approach.

_config.php:

Director::addRules(50, array(
    'action'    => 'Action_Controller',
));

mysite/code/Action_Controller.php

class Action_Controller extends Controller {
    static $allowed_actions = array('post');
   
     function index(){
       // do your worst
    }

    function post(){
      // post it
    }

}

That's about it - I know, it's pretty simplistic, but you can extend this to whatever you want. Don't forget to add, your action to your $allowed_actions if it's not the index. My favorite part about this approach is the flexibility to keep very specific actions in very specific controllers - and never having to worry about a cumbersom Page_Controller - also, when you just tuck these into Page_controller, if you're also setting up css/javascript includes, then it's loading a whole lot more than just directing you to the one controller you need. It's significantly faster. Just make sure you're not extending Page_Controller.

Learning PHP and web development

Mon, 16 Jan 2012 19:47:57 -0800

So, you want to learn how to build websites using php? It's a topic that's come up in several of my circles in the past few months. One fellow developer wanting to broaden his skill set, another entrepreneur that's just not satisfied letting someone else build his project out (and rightfully so) and another college age individual that just wasn't sure what they want to do "when they grow up." "You should", is what I tell them, and it's what I'll tell you too. You should learn php. You should learn css. You should learn to build a basic html structure page. You should familiarize yourself with xml. You should learn about mysql databases and the beauty and danger of javascript.

Everyone should learn at least the basics of what powers a website. The reason I feel so strongly about this is simple, it's the same reason you should know how to change a tire. We all use the internet these days, so it would be very helpful for you to at least know what's driving the sites you're interacting with on a daily basis. Most people don't know the difference between client side and server side, and it probably doesn't matter to them - but they are also the ones that will think Youtube is broken rather than realize that they just need to stop using Internet Explorer or update their flash plugin.

This really wasn't meant to be a rant, just my bit of encouragement and reasoning for advising everyone I know to at least go try out a "Hello World" tutorial. The absolute worst thing that could happen is that you might surprise yourself and learn something, or not... then you're right where you started.

How to create a RSS feed with SilverStripe

Fri, 16 Dec 2011 22:52:48 -0800

The greatest thing about creating RSS feeds with SilverStripe is that you can pretty much use any of your data, since all you really need is a DataObjectSet.

Here's my 2 second sample of an RSS feed:

function rss(){
        $articles = SiteTree::get('Page',"Status = 'Published'",'Created DESC');
        $rss = new RSSFeed($articles, '/rss', "Drop The Nerd :: RSS Feed", "", "Title", "Content", "DropTheNerd");
        return $rss->outputToBrowser();
    }

You can, of course, setup as many RSS feeds as you'd like. Just remember to add in an Auto Discovery meta tag:

<link rel=”alternate” type=”application/rss+xml” title=”Drop The Nerd RSS Feed” href=”http://dropthenerd.com/rss” />

Gamers and Nerds

Fri, 16 Dec 2011 22:11:36 -0800

So, this is really my first post in the Gaming section - because I've mainly focused on writing about web development and programming. Here goes nothing! I've been a gamer all of my life and really have no intention to stop. I was only 4 when I started playing Atari and then advanced to the Original NES (Nintendo Entertainment System if you had to ask). It's always been a part of who I am, gaming that is, and I've never tried to hide it. It's strange now that there are so many other self proclaimed "gamers" out there though, because for a short period of time, seemingly my entire college experience, there was a bit of a stigma. Perhaps there still is, but I've learned to embrace it.

How to setup aliases for Mac OSX

Fri, 09 Dec 2011 11:13:13 -0800

It's pretty simple! Just add them in ~/.bash_profile like so:

sudo nano ~/.bash_profile

And here are some I've setup in mine:

alias home='cd ~/'
alias flushdns='dscacheutil -flushcache'
alias hosts='sudo nano /private/etc/hosts'

Do you have any favorite aliases? If so, please share them below!

Close a fancybox when submitting a form

Thu, 08 Dec 2011 00:44:49 -0800

Today I was presented with something rather strange. A client wanted a delayed lightbox presenting their user with an incentive to register on their site. The user would be given 3 available options; Never, Later, or Sign Up Now. The lightbox needed to contain a form and “Sign Up Now” would submit the data… but the other two would both close the lightbox, one setting a cookie for 90 days and the other setting a cookie for 1 day. La la la, set everything up like usual… but wait, how do I get these stinking buttons to close the form? (I’m using fancybox and jQuery by the way)

Here’s my solution:

function fancybox_close(){
    $('#fancy_outer').hide();
    $('#fancy_overlay').hide();
    $('#fancy_title').hide();
    $('#fancy_loading').hide();
    $('#fancy_ajax').remove();
}

If you’ll notice in the source of your page fancybox loads your desired content (if using the ajax method) into the div #fancy_ajax. To ensure the form is not just hidden, we call $(‘#fancy_ajax’).remove(); The others just hide the fancybox, which enables it to be reused for any other instances on your page. Then, simply call this function when your buttons are clicked, as so:

$('.close_popup_never').live('click',function(){
    fancybox_close();  //closes the fancybox
    return false;
}

That’s it! It took a little figuring out, but it seems to do the trick.

Note: I’ve revisited this and settled on a new approach that plays well with the newer versions of Fancybox. Check it out here: Close Fancybox when you submit a form (revisited)

2d Skeletal Animation with Cocos2d

Wed, 07 Dec 2011 21:04:16 -0800

I’ve been toying around with several ideas for 2d side scroller games lately, but really don’t feel like creating tons of sprite sheets for all the animations. Having studied 3d modeling and animation in college, I decided, what I need is a skeletal structure – so then I can create my character pieces and just have some basic animation. This should effectively give me consistent animations across multiple characters, and also make the character creation process easier with templates for Head, Torso, Arms and Legs. Outside of that, it’s just a matter of customizing all of my animations with Cocos2d CCActions.

So, I just extend the CCNode class for my Skeleton, set it up with various Sockets (arms and legs), along with my Skeleton base -then add all of my bones hierarchically.

Here’s a bit of sample code from my method where I build the skeleton system.

-(void) setupSkeleton
{
    
    skeleton = [CCNode node];
    [self addChild:skeleton];
    
    torso = [CCNode node];
    [skeleton addChild:torso z:5];
    
    leftArmSocket = ccp(-5,20);
    rightArmSocket = ccp(5,20);
    leftLegSocket = ccp(-5, -25);
    rightLegSocket = ccp(5, -25);

    CCSprite * head = [CCSprite spriteWithFile:@"SkeletonHead.png"];
    [torso addChild:head z: 5];
    head.position = ccp(10,50);

    CCSprite * base = [CCSprite spriteWithFile:@"SkeletonBody.png"];
    [torso addChild:base z: 2];

    /* Left Arm */
    lArmSocket = [CCNode node];
    [torso addChild:lArmSocket z:3];
    lArmSocket.position = leftArmSocket;
    
    lArm = [CCSprite spriteWithFile:@"SkeletonArm.png"];
    [lArmSocket addChild:lArm];
    lArm.anchorPoint = ccp(0.5,1.0);
    
    /* Right Arm */
    rArmSocket = [CCNode node];
    [torso addChild:rArmSocket z:0];
    rArmSocket.position = rightArmSocket;
    rArmSocket.rotation = -55;

    rArm = [CCSprite spriteWithFile:@"SkeletonArm.png"];
    [rArmSocket addChild:rArm];
    rArm.anchorPoint = ccp(0.5,1.0);
    
    
    /* Left Leg */
    lLegSocket = [CCNode node];
    [skeleton addChild:lLegSocket z:1];
    lLegSocket.position = leftLegSocket;

    lLeg = [CCSprite spriteWithFile:@"SkeletonLeg.png"];
    [lLegSocket addChild:lLeg];
    lLeg.anchorPoint = ccp(0.5,1.0);
    
    
    /* Right Leg */
    rLegSocket = [CCNode node];
    [skeleton addChild:rLegSocket];
    rLegSocket.position = rightLegSocket;
    
    rLeg = [CCSprite spriteWithFile:@"SkeletonLeg.png"];
    [rLegSocket addChild:rLeg];
    rLeg.anchorPoint = ccp(0.5,1.0);

}

So, there’s that… hopefully I’ll build this out so that by extending the Skeleton class I can set all of my sprites first, and THEN setup the skeleton – but I’m just getting some of the basic mechanics out of the way first.

So, hopefully someone out there finds this interesting. I’ll try and post some updates when I’m able and maybe some sample video as I go.

Fun with Fancyboxes as custom lightboxes

Wed, 07 Dec 2011 21:03:28 -0800

Fancybox. Here we go again – but no matter how many other lightbox solutions I try, I always go back to the Fancybox. Why? Because it’s simple. It works in almost all applications where I need it t0 – and it offers everything you could possible need or want out of a fancybox. But wait, you don’t like the default styling of the fancybox? No problem, with a little creativity you should have no problem at all customizing the look and feel of your fancybox implementation.

Start by creating your own close button nestled inside your fancybox (you could just as easily override the close button’s styles, but this should also work for helping you setup multiple close button solutions).

.custom_fancybox_close {
    width: 22px;
    height: 22px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    background: url(http://dropthenerd.com/custom_fancybox_close.png) 0 0 no-repeat;
}

.some_container_class {
    background: #333;
}

Just grab a close button icon of your choice make sure you update the css (or resize/rename/reformat the graphic) and you’re all set to add the following html into your fancybox content:

<div></div>

Piece of cake.

Just a bit of jquery now to make sure your button always works:

    $('.custom_fancybox_close').live('click',function(){
        $.fancybox.close();
        return false;
    });

Side note: I like to use live to attach the click event just because you never know when you’ll be adding content dynamically and it helps you catch elements that aren’t caught by the regular .bind().

Oh yeah – here’s what my fancybox call looks like:

        $.fancybox({
            href: this.href,
            centerOnScroll: true,
            hideOnOverlayClick : false,
            showCloseButton : false,
            scrolling : false,
            padding: 0,
            margin: 0
         });

Here we go – this would be ideal for an alert style modal where you want to ensure that you get some user attention – disable click on the opaque backbground – disable the default close button (since we’re adding our own!) get rid of hideous scrolling (I like to add my own when applicable – but in this case we’re controlling the height of our fancybox) so we’re also using centerOnScroll to elegantly keep the fancybox vertically centered.

So there you have it. As long as you’re loading something similar to the following html, that’s it!

<div>
<div><!-- this is my custom close button --></div>
<div style="height: 150px; width: 300px; padding: 20px;">
<!-- just using inline styles to show you how we're controlling the height/width -->
Hey everyone!
</div>
</div>

View the working custom fancybox example here!

No, before you go assuming that I don’t like the default fancybox style – please understand that I like it just fine. It’s just that sometimes you need variety – and that’s all I’m providing here.

If you’ve got a creative Fancybox useage please feel free to share it by leaving a comment below! Thanks and happy coding!

Remove .svn files from directory recursively

Wed, 07 Dec 2011 21:02:39 -0800

Here’s another useful tip if you svn and often times copy entire directories from one project to another. You get all of those nasty little .svn files. Just open terminal, type cd and drag the directory in (after having copied it to your desktop) hit return, and run the following command. This will remove all .svn files recursively from directory you’re in.

find . -name ".svn" -type d -exec rm -rf {} \;

Hope it helps! Enjoy!

Custom FancyBox close button or link

Wed, 07 Dec 2011 21:01:58 -0800

Creating a custom close button for your FancyBox is really pretty simple. Sometimes we use the FancyBox and just need to style it differently, or to not display the default close button and add our own – or we just want to use it for notifications/alerts and provide a “Close” button of our own after our message. You can accomplish all of the above with the fallowing little bit of javascript.

$('.Custom_FancyBox_Close').live('click',function(){
    $.fancybox.close();
    return false;
});

Now you can add all of the pretty little close buttons inside your FancyBox – but just remember if you’re loading in iframes you may have to include this javascript within the loaded content, but utilizing the ‘live’ method should take care of content loaded via ajax or just hidden divs. Hope you enjoy, and happy coding!

Quick SVN Tips for ignore and externals

Wed, 07 Dec 2011 21:01:17 -0800

We work with SVN every day, but not every aspect of it. Some of the more commonly forgotten SVN features I always have to look up are ignore and externals – although they’re both pretty much the same to use. Here’s my preferred approach though – it enables you to use your favorite editor (vi, nano, etc etc etc). I prefer nano, but I’ve listed vi as well below.

Set your editor:

export SVN_EDITOR=nano
or
export SVN_EDITOR=vi

Move to the correct directory:

svn propedit svn:externals .
or
svn propedit svn:ignore .

The next part is easy, just enter the name of the local directory followed by the externals path, like so:

externals-folder http://myothersite.com/my-other-project/externals-folder/

And run svn up.

Or, if you’re doing svn ignore, same thing, but just the name of the folder or files to ignore.

file_to_ignore.ext
folder-to-ignore

Again, just run svn up.

Don’t forget though – these are not recursive, so if the directory you want to ignore is in /public/web/, then make sure to cd /public/web/ first. I hope that makes sense.

Alias local paths to remote images

Wed, 07 Dec 2011 21:00:32 -0800

Don’t you hate it when your local development environments just show you a bunch of broken images? This typically happens with sites hosting photo galleries, lots of product shots, etc. You don’t necessarily want to have all of your images on your local, but of course they need to be there on your live server, and rather than write out absolute paths this little trick will come in handy.

In your htaccess file just add the following:

RewriteEngine On
RewriteRule ^(product_images/.*) http://www.example.com/$1 [L]

So there you have it, hope it helps and have fun coding!

Close FancyBox ON form Submit but BEFORE processing via ajax

Wed, 07 Dec 2011 20:59:04 -0800

So, we’re revisiting closing Fancybox AGAIN. Hope you enjoy this one.

Rather than wait for your form to get processed – especially when you know it’s not a matter of if but when it succeeds – you may want to close your fancybox and let the user continue visiting your site or doing what they need to do. Here’s my a little snippet that you may find useful.

Click for a demo (it’s the one at the bottom)

Snipplr Code

How to use CCLabelBMFont as a CCMenuItem in a CCMenu

Wed, 07 Dec 2011 20:58:21 -0800

I’m finally getting around to setting up some stats/menus/labels in my app and hit a little bit of a hurdle that I wanted to document in case it helps anyone else out. How to use CCLabelBMFont as a CCMenuItem in a CCMenu.

First you’ll need your .fnt added to your Resources (I used hiero – the java based font creator to turn a .ttf into .fnt and .png). Then just use the code below to add your label label and point your menu item’s label to it. Works like a charm!

CCLabelBMFont *menuItemLabel = [CCLabelBMFont labelWithString:@"Play" fntFile:@"font.fnt"];
 CCMenuItemLabel *menuItem = [CCMenuItemLabel itemWithLabel:menuItemLabel target:self selector:@selector(playMethod:)];

CCMenu *menu = [CCMenu menuWithItems:menuItem, nil];
 [self addChild:menu];

Objective-C Method for getting random CGPoints

Wed, 07 Dec 2011 20:57:50 -0800

Here’s a pretty simple method for generating random CGPoints (great for using to randomize positions of enemies or obstacles on level load).

Just add this in your interface:

-(CGPoint) randomPoint;

And this in your implementation:

-(CGPoint) randomPoint
{
CGSize winSize = [CCDirector sharedDirector].winSize;

int maxY = winSize.height;
int maxX = winSize.width;

return ccp(arc4random() % maxX, arc4random() % maxY);
}

Enjoy!

Working on my first jQuery plugin – Scrollable

Wed, 07 Dec 2011 20:56:31 -0800

I started this one a while back, mainly to use for a specific site I was working on – got it to a usable state then had to divert my attention somewhere else. It’s called Scrollable and the idea is to truncate text strings to a user defined character length append it with … or &raquot;, etc… whatever you like; then on mouse over it scrolls the full text.

The hard part is that it’s almost impossible to account for 100% of situational text strings. For instance, if you have very specific styling on your links/titles/text strings this will jack it up. So, at that point, I’ll just recommend that you define some classes that will be added to your scrollable strings and correct the issues.

The other issue I’ve encountered is speed and jittering. Since the animation is done client side and javascript animations use system resources (cpu mainly) it can be much more significant on slower machines.

Just wanted to put something out there about it. I should have a beta script available for use soon, but it still needs a bit of tweaking.

Note: This is not in any way intended to be used as a scrolling marque. That is essentially the effect on mouse over, but only on mouse over. The whole point is that you can truncate text to a defined max character length – effective for inline lists when you want to show more individual items and save space at the same time.

jScrollPane updated – and amazing

Wed, 07 Dec 2011 20:55:11 -0800

So, I’ve always been a fan of custom scroll panes within your content area, because let’s face it – you can’t always fit all of your content in the space you have allotted for it. That’s where jScrollPane really becomes amazing – not to mention that the newest version is super simple and not image based like previous versions.

It’s cross browser compatible and can be completely styled with css – which makes it even more awesome.

So, check it out – and see what you think. Just don’t forget to change the default background color from red (my only complaint with the source files).

See jScrollPane – the only jquery scrollpane plugin you’ll need.

By the way, pair it with the mousewheel plugin for some really great user experience.

How to reorder sprites (CCSprite) zindex/zorder in Cocos2d

Wed, 07 Dec 2011 20:54:31 -0800

So I found myself with multiple sprites not knowing when they were stepping on top of each other. We don’t want that do we? Here’s a quick solution, and for a small project without a ton of sprites it seems to do the trick just fine without any noticeable performance hits.

Just put the following in your tick or update (or wherever you loop through all your sprites).

int newZ = (sprite.position.y * -1) + 1000;
[self reorderChild:sprite z:newZ];

A little explanation, all this does is set the sprites zOrder based on it’s position.y, we multiply it by -1 to make it negative and then add 1000 because the position.y is calculated from bottom to top and we want our lower positioned sprites to take on a greater zOrder value.

Hope that helps! If you have another solution please share it below!

Ajax: A simple approach that you will use and reuse

Wed, 07 Dec 2011 20:52:27 -0800

One great element of user interface and improving the customer’s experience on your site is providing them with helpful feedback during their experience. We most often see examples of this in form validation, whether it’s a sign up form with email validation or during the checkout process on an ecommerce site – it’s nice to let the user know that what they did was correct or quickly let them know they need to make changes so their time is not wasted and their patience are not tested. Here’s is a very simple, but very versatile, example utilzing jquery, php and ajax to provide instant feedback to your guest.

Note: my approach uses the jQuery.post() method, which is equivalent to jQuery.ajax(). Learn more about jQuery.post().

Snipplr Code

Here’s the accompanying php:

Snipplr Code

And here’s a little demo I threw together to show an example of this in action. (sorry the demo is currently unavailable while I'm rebuilding the site!)

Close Fancybox when you submit a form (revisited)

Wed, 07 Dec 2011 20:49:49 -0800

So a long time ago in another mindset I wrote about how you could close a fancybox when you submit a form by basically removing any trace of the fancybox on the page – I’ve decided that’s not a very good approach. So heres, my new approach.

Snipplr Code

As you can see, there’s not as much code, which is always nice, but it’s also much more direct.

To build on this, here’s an example of submitting the form via ajax and closing the fancybox on success.

Snipplr Code

Hope these help you out when you’re building your next user friendly experience and having fun with jquery and fancybox!

jQuery Plugins: Top 5 jQuery plugins I commonly use.

Wed, 07 Dec 2011 20:49:03 -0800

So, this started off as a “Top 10 jQuery plugins…” then I realized I don’t have 10 that I commonly use. I then decided to write, “Top 5 jQuery plugins I commonly use…”, but honestly – there are really only about 5 I frequently use!

1. ClearField

ClearField allows you to have default text in an input box and clear it on focus.

2. Fancybox

The well known Fancybox – lightbox alternative. Definitely my preferred lightbox of choice. You’re not limited to just images and it really offers you with a lot of flexibility.

3. jQuery Cycle

Another one I use regularly is the jQuery Cycle plugin. It provides you with a lot of options in terms of giving whatever element your working on a unique feel. You can create slideshows, slideshows with numbered controls or next/prev buttons, news tickers, banner rotations, manage areas of content and more. They also have a ton of demos for you to really get an idea of the variety of application.

4. jQuery Validation

Let’s not forget Validation. Custom form validation offers great feedback to your users and can help prevent them from getting frustrated and quitting the form submission process. jQuery Validation offers a lot of standard validations that actually validates against a set of rules – so it really takes most of the work out of treating each input with custom validation.

5. jquery Tabs

You can get jQuery Tabs on its own or as part of the jQuery Tools ui framework. It’s probably the simplest tab generator I’ve ever used. Another great feature is that the tabs are very easy to style with css. Some other tab creators are blotted with class names and you have to have a very specific structure – but jQuery Tabs is very straight forward.

How to see if a remote file exists (php)

Wed, 07 Dec 2011 20:47:49 -0800

I’ve been working on a website lately that’s been very heavily adding media into posts throughout their blog. We decided to move all of the new media over to Amazon’s S3 service, but they are also looking forward and know they’re going to be moving from their current system. That’s just a little bit of explanation about why I started using this little snippet, but the point is – I had to account for media that may or may not exists on Amazon’s servers. Basically, this is a quick check – without loading the entire file – just to see if the remote file exists or not, so you know whether or not you’re fine to link to that file.

Snipplr Code

Note: This will not work on an empty file.

iOS/Objective C Development Update

Wed, 07 Dec 2011 20:47:08 -0800

So, in all honesty – it’s going pretty slow. Partially because I have so many distractions going on right now, but also because there’s a good learning curve when learning Objective C when coming from PHP – mainly in the syntax. I do feel like I’ve made some great progress so far though. I’ve been learning a lot of the basics when setting up a game as well as just a general application. Hopefully I’ll have something to show for it soon. I’ve also had the realization that there aren’t enough tutorials – and the ones that are out there are usually just replications of other tutorials that exist.

Furthermore, I’ve been frustrated to find that a few books I would love to read reference deprecated methods (specifically thinking of cocos2d here). Have I mentioned I’m playing with cocos2d? Actually, I haven’t. Cocos2d is a 2d game engine for iPhone/iPad. It’s free to use and seems to have a great community of developers – though I haven’t gotten up the guts to post my questions yet for fear of ridicule at my newbness, haha.

Well, enough about that – hope to show off what I’ve been working on soon and have an app in the app store within the next 2 months. Thanks for reading!

Learning Objective-C

Wed, 07 Dec 2011 20:46:37 -0800

So, for a while now I’ve been itching to really dive into iPhone development. In the past I’ve only tinkered and played around, but I decided – it might be time to get serious. I’ve used Titanium Appcelorator enough to see that it’s amazing for jumping right into creating an iPhone app, but I always thought in the back of my mind that I really wanted to learn to use the iPhone SDK and to discover the full capabilities. The only drawback, I don’t have any experience with programming in C. So, after lots of google searches and running through a few tutorials I decided to give the iOS Reference Library a go – and I found a great article I’d like to share with you all. Learning Objective-C: A Primer. It starts of by explaining different extensions you’ll encounter and then moving right into Classes/Methods/Properties/Strings and Protocols/etc.

My first reading through already has me feeling as though I have a great foundational understanding of Objective-C and how it might be different from say, PHP. I’m great about starting new projects and losing interest or moving on to another project because I get excited about it, but I’m hoping to make enough progress with learning Objective-C that it will become yet another tool in my development toolbox.

Update:

Just wanted to say – Learn Objective-C at CocoaDevCentral.com is the best, clearest and most easy to follow tutorial I’ve read about Objective-C thus far.

How to show YouTube videos in a lightbox.

Wed, 07 Dec 2011 20:43:51 -0800

This week a client wanted a more elegant way to display video on their site and asked us to try and come up with the solution. I was already using Fancybox, the amazing jquery lightbox alternative plugin, so I set out the see if there was a recommended approach for this. I didn’t have to look far because on the Fancybox website, they have a great Tricks & Tips section! It had been a few months since I really looked around on the site, so I’m not sure when they added this (it may have already existed in some form or fashion). Anyways, I’ll cut to the chase.

Since our client has a YouTube channel and they are primarily going to be displaying those videos, I wanted to make it easy on them. This approach is just right, because they don’t have to remember much when they’re adding content in the WYSIWYG, they literally just have to set the href on any link to the youtube video they want to display in the lightbox. Using the following javascript (don’t forget to include your fancybox js and css files) any link including “youtube.com/watch” will be called in a lightbox! Pretty cool huh? Want to see some examples? Check out the demo I set up!

As you can see, there are several variables you can change and adjust – the size, whether to show the title and how it will transition in and out. So, like I said, I found the examples for this on Fancybox.net’s Tips & Tricks page. Check it out!

If you want to set this up, here’s all you need: FancyBox jQuery plugin

View the Demo

View Snipplr Code

jQuery Validate is my new best friend

Wed, 07 Dec 2011 20:42:58 -0800

I develop a lot of sites built on SilverStripe, but they use prototype for form validation. This causes issues since I primarily use jquery (a ton) throughout my sites. So, I was thrilled today when I discovered this little beauty of a plugin, jQuery Validate. I honestly can’t believe it took me this long to find it, but first I feel like I need to give credit where credit is due. Thanks to Aram Balakjian’s tutorial on SSBits.com for the bit of direction I needed. It really got me started and let me just say, jQuery Validate worked perfectly for what I needed.

Disable selecting text with Javascript & jQuery!

Wed, 07 Dec 2011 20:41:58 -0800

Today I had a client request the ability to prevent his customers from copying and pasting certain sections of text. Easy enough right? We’ll just toss a transparent div on top of that and call it a day… but what about when he wanted the ability to do it himself, and easily? He knows enough to add a class to an element, but not enough to add custom divs (and we shouldn’t expect him to remember the process everytime should we?) That’s when I started looking for an elegant solution with jQuery. Continue reading to see what I found…

With this nice little plugin, our client is able to simply add the class ‘noSelect’ to any element he wants to prevent select + copy and past on. Sure, this isn’t a fool proof method, and anyone that knows what they’re doing, even a little bit, with firebug can work around it. For this instance, it does the trick though.

Useage:

$(‘.noSelect’).disableTextSelect();

You can also re-enable it:

$(‘.noSelect’).enableTextSelect();

So, I hope that helps you out… it sure was useful for me!

<< download the jQuery plugin >>

*Remember: You must already have jQuery included. You can download the most recent version of jQuery at http://www.jquery.com.

Updated: Resizing fancybox height dynamically

Wed, 07 Dec 2011 20:39:54 -0800

Update: This tutorial is a little dated now that the newer fancybox resizes much better!

So, I know I’ve posted several times about my love for Fancybox… and this one is even better! It was for me at least. After great frustration with ajax content inside the fancybox changing and the height not adjusting correctly I’ve had to come up with several solutions, all of which were buggy. So, here’s what I’ve landed on… for now of course.

This is testing and working with Fancybox 1.3.1 (download now)

You will also need the jQuery resize event plugin.

Click here for a working example.

Our example fancybox:

$('.fancybox').fancybox({
'autoScale' : false,
'scrolling' : 'no'
});

And your link will look something like this:

<a href="/ajax.php">Show Ajax.php </a>

Inside Ajax.php you’ll want to make sure ALL of your content is inside the holder div #fancybox-content-holder (name it what you want, this is just for the example). For instance…

Ajax.php:

<div id="fancybox-content-holder">This is all my content.</div>

Please note that $.fn.fancybox.resize was tested but does not give the desired results. I hope this method helps you as much as it helped me. Please, if you have any thoughts on improvement or suggested other ways let me know as well. Thanks!
And lastly, make sure to put this inside Ajax.php. Don’t forget you need the jQuery resize event plugin.

	$('#fancybox-content-holder').bind('resize',function(){
		height = $('#fancybox-content-holder').height()+25;
		$('#fancybox-wrap').height(height);
	});

How to easily detect mobile devices

Wed, 07 Dec 2011 20:36:49 -0800

So this week I’ve been working on a pretty complex welcome video for a site that gets a decent amount of traffic (+100k visitors a month). We figured with all those visitors, there’s a good chance some of them are visiting on mobile devices. We checked the stats, and sure enough – we would need to provide content for them as well.

Since the iphone, ipod Touch and ipad, and possibly other mobile devices don’t allow flash, we decided to use Youtube for them… it’s non obtrusive and the videos will already be there as well… /shrug – why not? My favorite coding is done in php, so I was curious about the best way to detect a users browser server side, so we’re not sending extra code that may mess something up (things happen, ya know?) So here’s the approach I’ve adopted:

Click here to view the code on Snipplr.

A quick google search helped me find a full list of user agents on Wikipedia. So you might want to check that if you’re needing anything in addition to the 3 I’ve used above. Good luck, and happy coding!

iPhone SDK 3.1.3 Download for Leopard (if you don’t have Snow Leopard!)

Wed, 07 Dec 2011 20:35:32 -0800

I ran into a bit of an issue last night. I needed to upgrade from iPhones OS SDK 3.0 to 3.1.3 (I hadn't because I hadn't had a need in the past 8 months). Well, upon trying to use Appcelerator I discovered that it requires the iPhone SDK to be >3.0… alright, head on over to apple but alas… there’s no way to download 3.1.3! Doesn't it figure, I’m still running Leopard, and 3.2 is Snow Leopard ONLY. Pft. So, after much searching I finally managed to find a download link for the iPhone SDK 3.1.3.

Download iPhone SDK 3.1.3 and Xcode 3.1.4 – last verified 9-10-10

If this post helped you out, please leave a comment below. I love knowing that it's been so beneficial to everyone that found themselves in the same predicament I was in!

How to vertically align text in a div.

Wed, 07 Dec 2011 20:31:45 -0800

It's no big deal to vertically align images, but text often dances to the beat of it’s own drum. I've found myself using tables just to vertically align text to the middle of another element.

However, I just learned a nice method for achieving this (nothing new, just a great simplistic approach).

Set vertical-align: middle, just as you would with images – but you’ll also need to set the display to table-cell (which is what causes vertical alignment on tables, obviously).

div {vertical-align: middle;display: table-cell;}

I haven’t tested to see how positions effect this, but that might play a role in whether this works or not. I’ll work up an example page sometime soon too.

Variable variables - an unlimited number of "things" to think about.

Wed, 07 Dec 2011 20:24:53 -0800

One of my favorite things to do when writing code is to make functions that do more than one thing so instead of having 10 different functions I have 1, maybe 2, that can do the same. Part of the reason I code like this is for the challenge, and the other reason is so that when I make changes I don’t have to rely on find & replace but I can simple make my change once or twice (or add code) and not have to make sure I don't break 1 or 2 of the 10 functions.

That''s where variable variables come into play. Check out the write up for Variable Variables on php.net.

Design Vs Development

Wed, 07 Dec 2011 20:15:35 -0800

I consider myself a developer and often times correct people that call me a designer. Can I design a great looking website? Sure. Can I develop a functionally great website? Absolutely. I don’t want to wear two hats at the same time though. I consider design to be a tool in my box just like many other tools, but I prefer the development side of things.

Why do I prefer development? Simple. You set a goal and work towards it, just like design, but it is usually less objective. If a client says, “I need a custom web app and it has to do this.” then you know exactly what you have before you. However, you could present a client with 5 different design comps, all of which are excellent and achieve their original requests but none are just right. It’s not that I mind the client having their own opinion, it’s just that each client has a different idea of what makes a good design... and often times they pay more attention to that than they do the overall functionality. Please don’t misinterpret this as one being easier than the other, but just as my personal preference.