smackblast.com

Yesterday, I’m sitting at work when I get a call on my work number from a recruiter. For some reason, there are recruiters brazen enough to simply call the receptionist and ask to speak to a developer…those calls always get routed to me.

In any case, I’ve been through this a few times and they’re always looking for .NET guys. This dude was no different. Our conversation went (more or less) like this:

Recruiter: So, I have an opportunity for a .NET developer that you might be interested in.

Me: Sounds wonderful, but I’m a PHP developer and this is an Open Source shop.

Recruiter: Really? You don’t use any .NET at all?

Me: Nope. None. I’m sitting in front of a Linux box, our servers run FreeBSD and even this conversation is being handled through an open-source VOIP system.

Recruiter: Wow. (in a condescending tone) Well, you guys realize you’re 1 out of 100 companies.

Me: Really? Great! We must have the advantage then.

(short silence)

Recruiter: Okaaaaaaay, well have a nice day.

Next week I begin classes towards my MBA.

That’s about all that’s fit to print at the moment. God, I’m busy.

I have to say, Wolfram Alpha is pretty amazing. What I like most about it is that searching for something like “speed of sound” correctly (and instantly) shows you that the speed of sound is affected by altitude and temperature. With a Google search, that would have required another click to get to a page containing that content, and even then it is likely to be buried within other text.

I seem to spend a lot of my time scanning pages I’ve searched in Google for the specific words I searched for. I’ve become very well-acquainted with Ctrl+F in Firefox as a result of this.

Of course, it is designed for a different sort of use than Google in the first place. As an example, with Wolfram Alpha, searching for “Scala” showed a map of Scala, Italy. Google knows my browsing history and correctly assumes I’m interested in the Scala Programming Language.

You know, when I started working where I am now, I had serious doubts about my ability. Obviously, they were a little unwarranted, but the root of the problem is that I just generally don’t feel like a programmer. I guess it’s fitting that I don’t really write like one either.

Over time, I’ve come to realize that the other programmers/developers I know can be broken down into two broad categories.

The first (and, seemingly, the largest) are those programmers that enjoy programming because they enjoy thinking logically. Computers make sense to this group. They tend to be a bit more stoic and reserved.

The second are those programmers that enjoy programming because it’s a creative process. They tend to be a little more enthusiastic about things even though the internal workings of some technologies are kind of a mystery to them.

Obviously, I fall squarely into the second group. It’s been an interesting experience and for a long time I thought my approach to programming made me less legitimate. Back when I was programming in BASIC on my IBM PCjr, it wasn’t really about making necessarily useful things. It was more about just exploring and seeing what I could do.

Now, the flip side of this is that I’m probably the least qualified person imaginable to explain the inner workings of a PC. But, honestly, it’s not something I really want to know…I actually want some of it to remain myserious so that I feel like I’m performing some kind of crazy voodoo when I make it do things. I love Linux. How it works? No idea.

The end result of my approach vs. the more common approach has boiled down to this situation at work: our development team is traditionally the team of “no” and I inherit those projects that they deem to be not worth their while (in addition to my regular workload), which amounts to a significant number of things. For example, recently we needed a system to post updates automatically via Twitter. Development, as expected, kicked it back and said they didn’t have time. When I heard about it I was all about it…working with the Twitter API? I’m down like 4 flat tires! Let’s see what we can do!

So, you know, these days I feel a little more self-assured. Certainly I know I have a different perspective than most others, but it seems to be working for me even if it means I end up doing those things others won’t or can’t. The craziest of crazy ideas are the most appealing to me.

Incidentally, speaking of crazy ideas, I have a feeling that multitouch is going to reinvent the web. You heard it here first. I am refreshing my Java while learning Groovy and Grails - I think the next iteration of web technologies are going to require technologies that are inherently multithreaded (unlike PHP). Scripting languages, as we know them, are going to have to evolve or perish. Everything about the web will change as gestural control takes over and the one-click-one-action paradigm gives way to true multi-tasking multi-user web applications.

But hey, what do I know? I’m a crazy person.

So, recently I began working on a project that was similar to the Network Solutions “Solutions Advisor”… except with a few changes.

The parameters were like this:

Starting from the initial question, there would always be two possible answers. Each time a radio button is selected, the next frame is loaded with the option to go back always available.

Some people may be inclined to think this is a perfect case for a nested set of if statements. Perhaps, but the backwards navigation makes that a bit of a maintenance nightmare (well, to me anyway because I am lazy).  So, I decided this is a fitting solution for a Tree. You can navigate from any depth back to the root easily using a Tree.

So, off I went. I wanted to see how other people were implementing trees in PHP. The results? Well, a little bit underwhelming. It seems to be that any time you look around on the internet for the ways others have accomplished a problem there are two general categories that solutions fall into: Solutions that are way more difficult than they need to be, and solutions that don’t work at all.

After some thought (and a little bit of perusal of my fav. data structures book - “Data Structures and Other Objects Using Java“), I came up with a solution that is fairly easy to code and implement.

A bit of thinking about the problem and looking at the way the data I was supposed to present was laid out, I realized that if this were a Tree, it would both be complete AND full. I could rearrange things so that any leaf was pushed as far right as possible…after all this tree isn’t too deep and isn’t very complex.

The classic way of coding trees is to implement a Node class with links to other nodes and methods such as getParent(), getLeftChild(), etc. This was a bit too much overkill for my needs - those were handy in college when I coded the Huffman coding algorithm, but alas, I am a corporate development slave and thus I am tasked to find the easiest solution that maximized profit by minimizing the amount of time I spent on it.

The answer? An array.

Keep in mind, a full and complete tree can be easily represented as an array. The root node is element 0. We will say that is X. The children of the root node are then (left)2X+1 and (right)2X+2. Let’s say the user loads up this page and selects the first option, which is the left node. They traverse the tree to depth 1. They then choose another first option, so that they are on a depth of two after two leftwards movements. Let’s say they want to go back one step to a depth of 1 and choose the other option.

At this point where they are at, they should be sitting at element number 3 in the array. This is because (2*0)+1 = 1 and then (2*1)+1 = 3. We will say this is now X. To navigate backwards, it’s just a matter of doing integer division with the formula ((X-1)/2). This will work regardless of what depth or node you are on.

Now, I admit, this is not very amazing. Indeed, if you have a CS degree you’re probably laughing at how insipid this seems. But a quick google search made me realize that many people out there didn’t know this worked like this. I saw one page implementing a multidimensional array to solve the same problem and the array would add (Depth * Num of Nodes) new dimensions for every level. This is just not practical.

Also, keep in mind it only works for trees that are full and complete. It’s better for small data sets, obviously

I attempted to work at a certain charity event this weekend. The story of what happened can easily be put together through the tweets I posted, but here’s the rundown…

Prelude:

I’m thinking to myself “Hey, a bunch of developers coding stuff for charities! Awesome! I bet there will be a lot of PHP in use since charities are probably interested in Open Source solutions!”

Act I:

I sign up for the event. I never receive a response, directions, or anything. I still have never heard anything. From anyone.

Like a detective, I put together enough disparate pieces of the puzzle to figure out a general time and place to be. I head home to get my laptop and then to the event.

Act II:

I’m at the event. It’s obvious immediately that this event, having been sponsored by Microsoft, is really about how to achieve complete overkill by using MS technologies to accomplish simple things. Teams are formed. Most teams have at least 3-4 people. Two super-groups exist (1 each for the two organizers) with more than that.

I am asked what I’m good at. I say, quite clearly, that I’m a backend web developer focusing on PHP/MySQL. I’m honest and I say I need one talented HTML/CSS implementer. I am teamed with a man in a turban - the only other guy nobody else knew what to do with who admits his exposure to HTML/CSS was to look at a page source once.

To recap: a team of two, one of whom (as far as I can tell) was there for free soda and pizza. Things look bleak.

Act III:

We meet the charity we are supposed to be working with. They are nice guys and their needs are definitely within reason…well, within reason if I had a “team”. After an argument with my only other team member who didn’t believe me when I was explaining how mod_rewrite works (keep in mind, he had to be told what Apache actually was and he chose to argue whether mod_rewrite actually exists), I realize I am totally and utterly alone.

With a new sense of resolve, I set out to try and complete this thing anyway.

While I am describing my proposed solution (PHP/MySQL/symfony) to the charity, some guy comes in, takes over, and starts pumping Wordpress to the charity. I begin packing my things. This guy then asks if I have the images for the Flash banner, which is not something I knew anything about. I said I preferred not to use Flash - I’d use jQuery for anything that needed it.

I asked the guy with a turban what editor he was using. He said he didn’t know and asked me to suggest one.

By this point, I’ve mentally checked out of this whole process. I wish the charity a good night, I get some pizza, and I leave the building, never to return.

Epilogue:

I have to admit, it makes for a pretty good story. I came away a little shocked at the sheer number of people that think PHP is only for running Wordpress installations.

Additionally and more importantly, as a guy that has built a couple of content management systems from the ground up, I can tell you it’s not that hard. These other “developers” worked 3 straight days contorting a CMS to fit their needs and I wonder…is this really the best approach? Would it not have been easier, in some cases, to have built what you needed from scratch? Isn’t that what makes us “developers” and not just “CMS modifiers”?

Final Thoughts:

I really was excited, initially, about what we could accomplish in a weekend. The event website and description clearly indicated several things that were inherently untrue for my situation: I never did get grouped with a “team” and the event did not run 24 hours. My excitement diminished rapidly as I realized I’d fallen through the cracks somehow.

I doubt I’ll try again next year. On Sunday, as I watched my dog play in the lake at Shawnee Mission Park, I realized I didn’t regret what I did because I’d managed to have a spectacular weekend that was surely eclipsed by what might have been had I stayed in a small room arguing about the existence of Apache modules with a man in a turban.

Sure, one camp will be all up in arms saying I was somehow dodging a responsibility (even though I volunteered), but my perspective is that I wasn’t given the tools I needed to complete the job to any sort of acceptable standard. Yeah, OK, I could’ve hacked something up by myself - but would I have really helped a charity at all?

Hey, I’m back doin’ the twitter thing…

http://twitter.com/iamjeffp

Anybody that was following my previous account can remove it - Twitter has been trying to delete/restore it since October. I just finally gave up on it and started over.

One of the bigger projects I’m working on is an all-inclusive site management app for symfony applications. I’ve already got a few of the pieces done and here’s a brief summary…

Rsync Manager

As I mentioned some time ago, symfony’s built-in rsync management kinda wasn’t cutting it for our needs. I don’t know about the environment that other people work in, but my situation is that I’m the only developer in a creative team consisting of dedicated designers and implementers. Obviously, I stay pretty busy so my goal is to automate as many processes as possible and make the administration of a larger corporate site easier. We have a dev server as a staging area where our projects and SVN repos reside and from here we launch rsyncs to update our live site.

One situation that kept popping up is that we often stage new product launches on the dev site while they’re going through the approval process. Meanwhile, we have to keep rsyncing other small updates and fixes. We accomplish this through a large list of excludes using a file with rsync’s –exclude-from parameter. That’s swell and everything, but this file resides on a Linux box, so it has to be edited through a shell. That’s no problem for me, but it’s a different story for a Mac-centric design team who get nervous at the mere mention of shells and commands.

The Rsync Manager is an AJAX-enabled app that allows web-based editing of this exclude file and provides instant feedback on exactly what files are being excluded using rsync dry runs. When you’re satisfied, it will rsync and (optionally) email you the stats via swiftmailer.

In the same vein, there’s…

Database Synchronization

This is a fairly automated system that assumes the dev server has the latest version of data loaded in your DB and you want to sync it to another server. It performs these steps:

• Performs a database dump (i.e. “symfony doctrine:data-dump”)
• Reloads this data dump on the dev server to check for the possibility of a corrupted datafile
• If no corruption is detected, it allows you to automatically:

1. Commit the dumped data file into SVN
2. Transfer the data file to the target server via scp
3. SSH into the target server
4. Build all the models and reload the data
5. Clear the cache
6. Email the results to you via swiftmailer

Meta Manager

For SEO reasons, we seem to spend a lot of time managing meta tags. symfony provides awesome support for meta tags defined in yml. Ahh, but there’s a catch. Opening up a yml file for editing by more than one person introduces a whole host of problems. All it takes is one person to edit it in rich-text mode and suddenly half your site is down. I learned that lesson the hard way early on, so I moved metas to actions. This had its own issues - imagine explaining how escaping characters works to someone with an art degree, and then imagine them remembering this on that one day when some meta tag just HAS to go up RIGHT NOW HURRY HURRY. See what I’m getting at?

(sidenote: No insult intended to peeps with an art degree. Respect.)

So, the Meta Manager lets you define all your meta tags across the site from a nice interface. It’s just a frontend for yml-file editing, so you can still keep symfony’s nice heirarchy.

Full Page Management w/ Richtext editing

This is the most beta of all these features. Without using a database to store page data, you can use FCKeditor to edit page content. You can add/delete new pages (actions are auto-added/removed when necessary). It’s obviously not the most useful system since anything really dynamic still requires you to get your hands dirty and get in the actions, but it’s a start.

That’s really it for the generic features at the moment.

Other things I’m working on are: improvements to my context-based layout switcher (switches layouts based on how it was accessed…for popups that may have a nav menu if they’re accessed directly by URL), a plugin for aformentioned canonical hints, a nav-menu builder. I may also work on a symfony plugin for Omniture SiteCatalyst…it’s just a huge mess right now.

If you have any interest in any of these things, please let me know.

Hi.

So, here’s the problem. I was given a specific static HTML page with several tables on it. My job was to add a form with inline editing of table cells. When the form is submitted, it is sent to a PHP page and broken into two parts, each of which is saved as its own complete HTML page.

Ready? Go!

Here are the assumptions I’m making for this:

1. You have php installed.
2. You know how to include the jQuery library on a page
3. You don’t need to be told where to put jQuery functions (mine are in ready())

Ok, so adding the form was simple, I simply added a <form> opening tag after the body declaration (with the requisite method, action, and id attributes) and then a closing </form> tag before the closing body tag. So, now the entire page is a form.

Next up was the inline editing. Yes, there are all kinds of inline editing plugins available for jQuery, but here’s the problem…at the end of the process, I just want HTML. I don’t really care about the submitted form data (with two important exceptions). So, here’s a breakdown of my hack…

Each piece of text you want to edit needs to be wrapped in a tag with the same class. You can use ID’s too if you want, but remember each ID should be unique for jQuery to select it; otherwise it just selects the first one. Using a class allows me to edit all the areas without having to write functions for each one. I used a class called edit, as you can see below…

<span class="edit">January 1, 2009</span>

Allrighty. So here’s the cool part.

We are going to modify this so that there’s a hidden input field after the span and before the closing td. The idea here is that we’ll use jQuery to catch clicks on the element in the span. When it’s clicked, the value inside the span is copied into the input and then the span is hidden and the input is shown. On blur (presumably, when someone is done editing it) we will do the reverse.

The HTML:

1

<td><span class="edit">January 1, 2009</span><input id="new1" class="new" name="edit1" style="display:none;" type="text" /></td>

The id, as mentioned earlier, is optional. Every single area you wanted to be able to be edited should have class=”edit” on the span and class=”new” on the input.

Here’s the jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$("span.edit").click(function()
	       {
            var k  = $(this).html();
            $(this).hide().next("input.new").show().val(k).focus().select();
			return false;
		});
        //disable enter key
        $('input.new').keydown(function(e){
        if(e.keyCode == 13) 
        {
           return false;
        }
        });
        $("input.new").blur(function(){
           var j = $(this).val();
           $(this).hide().prev("span.edit").html(j).show();
        });

Ok, so here you can see we’re using some tricks to make sure that the only DOM elements affected are within the scope of where we clicked. using next() and prev() makes sure we select the inputs and spans closest to the area where clicks and blurs take place.

I’m also disabling the Enter key here. You may or may not want to do this…I’m only doing it to prevent confusion with the assumption that the end-users of this form understand this.

Done correctly, you should now have editable text areas.

Now, onto the next step.

Upon a submit, we have to break the page into two parts and get post-DOM-modified HTML into PHP.

This is actually easy. The method I use is to add two inputs hidden via CSS at the bottom of the page, right before the submit button. These will receive the relevant HTML parts. It’s important to note that every other input is a descendant of a td tag, except these two. Upon a submit, I am going to remove all those hidden inputs I used and this makes it easy to select all of them without affecting the two inputs we need.

The HTML (at the end of my document near the closing form tag):

1
2
3
4

    <input id="html1" name="html1" value="" style="display:none;" type="text" />
    <input id="html2" name="html2" value="" style="display:none;" type="text" />
    <input type="submit" />
</form>

Now, to capture the two areas, I am just going to wrap the pieces of the page I want in span tags with a specific id. I used “infobox” and “tablebox” as these id’s.

Here’s the jQuery that fires upon clicking the submit button (my form has an id of form1)…

1
2
3
4
5
6
7
8
9

$("#form1").submit(function()
        {
            $("td input").remove();
            var n = $("#infobox").html();
            var o = $("#tablebox").html();
            $("#html1").val(n);
            $("#html2").val(o);
           return true;
        });

You can see what happens. All inputs are removed (except the two that are not descendants of td tags, as mentioned earlier). The html inside the two spans is then put into variables, and the two inputs at the bottom are loaded with those values. Then the submit fires.

Whatever page you use to process this form will get two elements in the $_POST global - ‘html1′ and ‘html2′. You can use these to manipulate it however you wish.

For myself, this is what mine looks like…

(process.php)

1
2
3
4
5
6
7

<?php
require_once('emptytemplate.php');
$infobox = $_POST['html1'];
$tablebox = $_POST['html2];
$page1 =  $begin.$infobox.$end;
$page2 = $begin.$tablebox.$end;
?>

(emptytemplate.php)

1
2
3
4
5
6
7
8
9
10
11
12

<?php
$begin = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>PHP and jQuery Demo</title>
    </head>
    <body style=" ">';
    $end = '</body>
</html>';
?>

At the end of it all, you will have two complete pages saved in the $page1 and $page2 variables. You can write these to a file or do whatever you like with them.

NOTE: There are all kinds of security considerations here with this since you’re allowing raw user input to become HTML and I don’t do sanitization of any sort. I’ll leave that to you - I just wanted to show the general process.

Enjoy!

I’m working on something big; it’s consuming my life.

It’s been a very good year so far. It’s so strange that 2009 has unofficially become the year where I get things together. I’ve been going through and eliminating those things which have no immediate value to me. 2009 is the year I’ve finally decided I can get rid of the Sams Teach Yourself HTML and XHTML in 21 Days book….because I know HTML and XHTML (and yes, I know the difference).  I guess that’s some kind of milestone. Of course, I’ve been programming for the web for a while now, but I guess I was just always assuming I was barely scraping by on a small bit of knowledge. I’m not saying I know everything….not by any stretch. In fact, I’d say that I’m overwhelmed when I think of how much I might not know. But I know enough to get rid of these things, so it’s good.