Sully Syed

Using XDebug with Aptana Studio 3, nginx and PHP-FPM

Instructions on how to step through your PHP code with XDebug seem to be an unholy mess online. After an hour of tinkering in Ubuntu 12.04 to get it working, I’ve come up with the ten steps listed below to get the combination of Ubuntu, Nginx, PHP-FPM, XDebug and Aptana Studio 3 working together. Here’s hoping this helps someone else out there.

1. Install php5-xdebug:

sudo apt-get install php5-xdebug

2. Edit the xdebug configuration file /etc/php5/fpm/conf.d/xdebug.ini , most notably changing the default port to 9001 as PHP-FPM itself runs a daemon on port 9000. We also change the log file location to /var/log/xdebug (remember to create this folder):

xdebug.profiler_output_dir=/var/log/xdebug
xdebug.profiler_enable_trigger=1
xdebug.profiler_enable=0

xdebug.remote_enable=true
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9001
xdebug.remote_handler=dbgp
xdebug.remote_autostart=0

3. Restart PHP-FPM:

sudo /etc/init.d/php5-fpm reload

4. In Aptana Studio 3, we’ll start by ensuring that Aptana recognizes XDebug as being installed as a debugger on the system. Go to Window > Preferences > Aptana Studio > Editors > PHP > Debug. Ensure that under Installed Debuggers, XDebug is listed on port 9001.

5. While still in the Preferences window, go to General > Web Browser and change the option to Use external web browser. Leave Default system web browser marked.

6. Close the Preferences window and go to Run > Debug Configurations… Right-click PHP Web Page and select New.

7. Name your configuration whatever you’d like (localhost if you’re lacking ideas). Ensure that Server Debugger is set to XDebug. Create a new PHP Server by clicking the + button, and ensure that you set the Base URL and Document Root properly for the website you are trying to debug.

8. Almost done! We now need to Xdebug Helper in the Google Chrome browser. After it’s installed, enable it on your locally viewed web page by clicking the bug icon until it changes colour to green (if you hover over it, it will inform you that it has debugging enabled).

9. Let’s switch back to Aptana Studio 3. Under Window > Perspective, switch to Debug. We left the “Break on first line…” option under Window > Preferences > Aptana Studio > Editors > PHP > Debug, but you can just as easily double-click in the margin beside any line in your PHP script to add a breakpoint at that location. Navigate to a page that will execute that PHP script and watch as execution halts and your debugger steps in, giving you the ability to inspect variables or control execution at will.

10. Inspect the value of any variable quickly by adding the Expressions window while in Debug mode at Window > Show View > Expressions. Pop in a variable such as $page and press Enter to see the value immediately.

Need to switch back to regular coding view? Under Window > Perspective, switch to Web. Bear in mind that even outside of the Debug perspective your debugger will be active – click the bug icon in Chrome until it is grey to disable activating XDebug.

Sully Syed

Getting Aptana Studio 3 to ignore extremely large folders in your project

I’m in the midst of a website conversion to WordPress, and the resulting import of images to the uploads/ folder is somewhere north of 8 GB. My IDE, Aptana Studio 3, tries to scan the folder every time I refresh the project or do code completion. I was on the verge of ditching Aptana altogether when I hit upon the answer:

  1. Move the large folder you wish to have Aptana ignore out of your project and replace it with an empty folder.
  2. Refresh the project to ensure the empty folder appears in the project.
  3. Right-click on the empty folder and select Properties, and then Resource.
  4. Under Attributes, check Derived.
  5. Copy the contents of the folder back into place – Aptana should ignore it and keep UI responsiveness quick.

Sources:

Sully Syed

The skills gap myth: Survey reveals why companies can’t find “good people”

As a software developer I’m always bemused by the leaders of industry who lament the lack of skilled workers to fill open positions in my field. It seems that too many forget one of the most basic rules of capitalism: If demand is low, you’re not offering enough value. As it fits this scenario: If developers aren’t applying for your position, you’re not offering enough compensation.

This is rather cynical, but I imagine that these pronouncements aren’t for my ears anyways: They’re made to justify keeping “information technology professionals” on the overtime exempt list, or to raise immigration caps for technology workers. (Which is often well justified, but I wonder at the distortion it introduces to the domestic labour pool.)

TIME.com – The Skills Gap Myth: Why Companies Can’t Find Good People

…

The first thing that makes me wonder about the supposed “skill gap” is that, when pressed for more evidence, roughly 10% of employers admit that the problem is really that the candidates they want won’t accept the positions at the wage level being offered. That’s not a skill shortage, it’s simply being unwilling to pay the going price.

But the heart of the real story about employer difficulties in hiring can be seen in the Manpower data showing that only 15% of employers who say they see a skill shortage say that the issue is a lack of candidate knowledge, which is what we’d normally think of as skill. Instead, by far the most important shortfall they see in candidates is a lack of experience doing similar jobs.

Employers are not looking to hire entry-level applicants right out of school. They want experienced candidates who can contribute immediately with no training or start-up time. That’s certainly understandable, but the only people who can do that are those who have done virtually the same job before, and that often requires a skill set that, in a rapidly changing world, may die out soon after it is perfected.

Read More

Sully Syed

Heroku’s Adam Wiggins on how to scale a development team

Not much to say here; I think this is an excellent template for growing a software company and this is my way or preserving copy for when I need it.

Adam Wiggins – How To Scale a Development Team

As hackers, we’re familiar with the need to scale web servers, databases, and other software systems. An equally important challenge in a growing business is scaling your development team.

Most technology companies hit a wall with dev team scalability somewhere around ten developers. Having navigated this process fairly successfully over the last few years at Heroku, this post will present what I see as the stages of life in a development team, and the problems and potential solutions at each stage.

Stage 1: Homebrewing

In the beginning, your company is 2 – 4 guys/gals working in someone’s living room, a cafe, or a coworking space. Communication and coordination is easy: with just a few people sitting right next to each other, everyone knows what everyone else is working on. Founders and early employees tend to be very self-directed so the need for management is nearly non-existent. Everyone is a generalist and works on a little bit of everything. You have a single group chat channel and a single [email protected] mailing list. There’s no real need to track any tasks or even bugs. A full copy of the state of the entire company and your product is easily contained within everyone’s brain.

At this stage, you’re trying to create and vet your minimum viable product, which is a fancy way of saying that you’re trying to figure out what you’re even doing here. Any kind of structure or process at this point will be extremely detrimental. Everyone has to be a generalist and able to work on any kind of problem – specialists will be (at best) somewhat bored and (at worst) highly distracting because they want to steer product development into whatever realm they specialize in.

Read More

Sully Syed

Soliciting browser type, version, OS and cookie settings from your users

I lost track of this site and happily re-found it – tell your website customers to open http://supportdetails.com/ in a new tab when they have issues with your website and to use the form built in to e-mail you their information. Super handy.

Sully Syed

A Terms Of Service page done right (or at least better)

The 500px Terms of Service page strikes a great balance (a 50/50 balance, to be precise) between necessary legalese and something the layman can understand.


Sully Syed

Very basic JSONP

JSONP allows you to make HTTP requests outside of your own domain due to the SCRIPT tag not having the same-domain limitation XMLHttpRequest does. The basic form of this workaround is as follows:

var scr = document.createElement('script');
scr.src = 'http://openexchangerates.org/latest.json?callback=formatCurrency';
document.body.appendChild(scr);

function formatCurrency(data) {
	// Do stuff with the data that's been returned.
	1;
}

Lines 1 – 3 of the above create a SCRIPT tag in the DOM, defines the URL to retrieve data from and in line 3 makes the request. To continue the execution cycle, the script at openexchangerates.org must wrap its data in a function:

formatCurrency({ "hello" : "Hi, I'm JSON. Who are you?"})

This calls the locally defined function formatCurrency(), which does whatever it needs to do with the returned data. A quick hack to make your API (assuming you control it) work with JSONP would be as follows:

// assume $json holds the JSON response
if ($GET['callback'] != '') $json = $GET['callback']."( $json )";
return $json;

I have yet to test this, but I imagine you could also be much more daring and avoid having to get the following code uploaded to your API of choice. To do this, execute the first bit of JavaScript on this page, and then execute an eval() statement on the data in the manner of the below:

eval('formatCurrency(' + returned_data + ')');

Sully Syed

How to center text within a DIV element

This is one of those things I’m blogging about strictly so I can search it later and find the answer. Below, we use a DIV contained within a DIV to center text/images/anything on a page, which we’ve arbitrarily decided is 1024px in width.

<div style="width: 1024px;">
	<div style="width: 50%; margin: 0 auto;">
		Everything within this DIV element will be centered within the 1024px outer DIV element!
	</div>
</div>

Reference: StackOverflow – How to center DIV in DIV?

Sully Syed

Referring to a PHP object property using a variable

This is one of those really simple things that I use infrequently enough that I tend to forget: If you’ve tried using $object->$field_name to address a property of a PHP object, you’ll know that PHP isn’t happy with that syntax. Instead, use:

return $object->{$field_name};

Sully Syed

UX Movement – Why headlines attract more user attention than images

I feel obligated to repost this invaluable bit of knowledge from the excellent UX Movement website.

UX Movement – Why Headlines Attract More User Attention Than Images

When websites show content, they’ll usually use a headline and image. Headline and image quality is important in getting the user’s attention. However, the headline will always get the most attention no matter what. Here’s why.

Look at this image. How relevant is it to you? What is the context behind the image? One could make guesses all day, but the fact is that nobody knows for sure.

Now look at this headline. How relevant is it to you? What is the context behind the headline? You know what the context is immediately after reading it.

You can easily visualize the image with the headline alone. But you can’t make out the headline with the image alone. Users won’t understand the image without the headline. But users will still understand the headline without the image.

With the headline and image put together, users get the full picture. They get both the story context and the emotion.

When users see both together, they will naturally pay more attention to the headline because it has the context and details of a story that they can relate to. Users are looking for information, and a headline gives them more information than an image. However, the image can appeal to users’ emotions more. And that can reinforce the headline and give users the extra boost to click-through. Both are important, but the headline is most important.

Placement & Visual Weight

How can you apply this newfound insight to the way you design content? Since headlines attract more attention than images, you’ll want to place your headline before your image. This way users can immediately get to the headline without having to go through the image.

Putting the image first wastes an extra visual fixation that doesn’t give users any useful information.

The image is more meaningful to users after they understand the context from the headline first.

Another thing is to make sure that your image doesn’t have more visual weight than your headline. When an image is too large, users can easily get distracted. This slows them down from their task of getting information. To avoid this, balance the weight between your headlines and images, and let your headline do most of the talking.

When your image is louder than your headline, users waste their time staring at the image.

Replicated Research

If you’re still not convinced of the claim through objective reasoning, take a look at Jakob Nielson and the Poynter Institute’s research. Their studies “used different methodologies, tested different users and different sites, had different goals, and were conducted at very different stages of the growth of the Web” and they all concluded the same results. In Jakob’s own words:

When different people keep finding the same results year by year, it is time to take the findings seriously and to base Web design on the data and not on wishful thinking.

The results are in and the time to treat headlines with more respect is now. You may love looking at your image, but the user is looking at your headline.