I had initially interpreted the title of the article (‘Facebook and loneliness’) as referring to the loneliness caused or accentuated by Facebook, as opposed to the use of Facebook as a tool to reduce feelings of loneliness. While I think it can go some way to achieving the latter, the former is a much more prevalent effect of its (mis)use.

Anyway, here’s what I submitted:

Facebook can be a great communication tool, if that’s how it is viewed by those who use it. But in many cases, Facebook alienates its users from each other. Unfortunately for many it has become an addiction, where preening our online persona to be a mirage of the person we wish we were has become the priority over the much more difficult task of becoming that person in the real world. Why worry about your development as a human being when you can take a shortcut to perfection on your Facebook profile? The computer creates a buffer which allows us to consider everything we do before we do it, removing the risk inherent in being spontaneous and genuine around people in the physical world. But it is the results of taking that risk that opens us up to forming real connections with our fellow human beings.

 

The torrent of poised fakery that we’re exposed to when browsing Facebook comes at a price. I and many people I’ve spoken to have felt deeply dejected after a session, as the flow of witty banter, ‘fun’ photos in exciting places and lives which seem much more interesting than our own leave us questioning whether we’re any good at all.

 

The irony is that most of us are complicit in the Facebook charade — we all try to put forward only the best of ourselves on Facebook. The end result is an worryingly pervasive version of the school playground — but now instead of being judged on what trainers you wear, it’s your whole life that gets the X Factor treatment. Unfortunately with Facebook the shallowest and most destructive parts of being a teenager are kept alive and well in adulthood.

Since the word limit was 250, I’ve obviously condensed a lot of thoughts into a small space without elaborating on them fully. It’s important to emphasise the first sentence — Facebook, if treated as a tool for communication like email or SMS, can be a good thing. But observing the way that people use it in the real world shows that it has managed to latch onto an insecurity that, it appears, a huge number of people have. The need to be included and to feel accepted has become warped out of shape to the point where it’s not enough to be who we are, rather we need to obsessively filter and amplify the best parts of our lives while ignoring the worst.

We become invested in our own cult of personality, and the person on our profile becomes a perfectly manicured avatar of who we really are. Our Wall is a mechanism through which to publish our personal propaganda, where reality is sanitised and edited so our ‘friends’ see only those things that show us in a good light. Just look at the average profile photo and consider what probably went through that person’s mind when they chose it (and, in many cases, took it with the intention of using it as their profile pic).

Facebook gives that worst of human traits — narcissism — the platform it has always wanted. Not only can we tailor our presentation of ourselves, but we also get the delicious prospect of our perfected pseudo-self being beamed directly into the computers and phones of those around us with only minimal effort. Direct manipulation of our PR is just a witty quip or a strategic ‘like’ away. The price of all this is more fakery, less genuine self-belief, and ultimately a reduction in the quality of the relationships we have with other people.

So by no means am I disparaging the idea of frameworks – when done right they can be a great example of open source in action and can be genuinely useful. I’m always cheered by the work that people put into these things to prevent others from having to re-invent the wheel – the altruism/kudos incentive is a fascinating thing. I have a lot to thank them for, as do my clients, in saved time and cost and, of course, enhanced end results.

Lameworks (ho ho)

But there are downsides. Given the number of frameworks out there it’s quite easy to be overwhelmed and to worry that you’re using X when you should be using Y, or that if you only used Z your life would be Just Awesome™. My approach has been to proceed with caution – don’t assume you need something just because it’s new and shiny. Even when I have come across something that looks genuinely useful, my experience is that it takes time to overhaul my workflow to integrating new tools and practices, and attempting to do too much at once can be really confusing and ultimately counterproductive if those new tools or code conflict or create new and novel administrative burdens. I personally find it more effective to note down new tools/approaches/ideas as I find them (while reading blogs or web dev sites) and play with them outside first in a sandbox, outside of the real development context, to find out whether there would be real value in integrating them properly into my workflow.

A problem that didn’t need solving

I’ve lost count of how many web ‘apps’ I’ve signed up to which are supposed to enhance my productivity but which I’ve realised, on reflection, don’t actually solve any problem I’m experiencing. Web 2.0 is littered with these answers to problems that don’t exist – and as much as I admire the entrepreneurial zeal of the starry-eyed Zuckerbergs who create them, the vast majority do seem destined to fold sooner or later, and no amount of 1px white text shadow and noisy background textures is likely to change that.

Nagging doubts

Depending on where you rank on the perfectionist scale, frameworks can also have the welcome side-effect of making you constantly feel like there’s unfinished business with your past projects – a nagging desire to retrospectively inject some of the new whizzbang skills you’ve acquired to bring those oldies up to the cutting edge. It’s worth remembering that you were working with what you knew at the time, and if everything was and still is working, and the client was and is happy with it, then you did your job. Most clients have no interest in the gubbins anyway – if it looks like it works and it smells like it works, then (to them) it works.

It might sound like like I have a downer on frameworks but that’s not the case at all, and I’ll describe which ones I use in a later post. My problem isn’t with frameworks per se; I’m just wary that all the choice out there can create more problems than it solves. Bizarrely, the incredibly positive trend in the web community towards share techniques and code to make each others’ lives easier can, if we don’t step back a bit, confuse matters and distract us from concentrating on the core skills necessary to create websites, on both the code and organisational sides.

But wait, it seems that’s not quite how things have worked out. Apparently far from being consigned to history, poverty is still alive and kicking – indeed it’s creeping closer to home all the time. So where, therefore, have the arm bands gone? Surely ‘the message’ still needs to be got out there and awareness still needs to be ‘raised’?

Apparently not it seems.

I was never comfortable with the whole white arm band fad back in 2005/06, and I’ve never worn one. I did attend the march in Edinburgh though (and even put on a white shirt, gasp!), because it seemed good to be a part of a singular event which might actually have some kind of effect. The G8 was taking place in Gleneagles Hotel at the time so the eyes of the world, and the most powerful people in it, were likely to be on an event as big as the march.

Back to the arm bands though. Now that I reflect on them after more than 5 years, they annoy me as much as ever. Although the ‘movement’ (if you can call something so obviously transient a movement) was self-evidently a positive thing, and the organisers were just using those means available to them which were most likely to chime with the majority of their young audience, what it boiled down to for so many people was nothing more than a cynical and selfish fashion stunt. Putting on that little arm band meant you ‘cared’, you were ‘part of something bigger than yourself’, you sympathised with the plight of the tens of millions of people around the world whose lives are blighted by poverty. Yes, that’s really what it meant to so many.

No, in fact, what so many really cared about was jumping on a warm and fuzzy bandwagon, passively cosseted in the embrace of a Good Cause while requiring no self-sacrifice, critical thought or effort whatsoever, save for the epically meaningless act of pulling a bracelet onto your wrist. Debasing the positive and valuable charitable message that lay beneath the Make Poverty History campaign to satisfy some empty craving to belong was just contemptible. And the evidence that this is how so many treated it is plain to see – or not – on the naked wrists of those who supposedly cared.

Image by Neil T

I’ve been building the theme for a new concrete5 site, and the designers of the site specified a two-column, four-item news area on the homepage, showing news items in descending date order, in a Z shape. This is what the layout looks like:

concrete5′s pagelist block is the best thing for this job, but I wasn’t sure how to make it play such that (a) the news items would show in two columns, and (b) the items would be displayed in reverse chronological order, in a layout like this:

People tend to read text on a page in a F-pattern, moving across the top of the page (first row) before down the left-hand side. So it makes sense that news items should flow from top left to top right, down to bottom left then bottom right. More can be seen on Jakob Nielsen’s web usability site.

The problem is that in all the CSS implementations of columns that I know, the content in the vertical columns is set out one column at a time. In other words, items 1 and 3 in the table above are in one column, and 2 and 4 are in another. 1 and 3 must be pulled from the database and displayed before 2 and 4 are. Obviously that causes problems when you tell the pagelist block to order things by the most recent page, as for news items – it wants to spit out the pages in reverse chronological order (1,2,3,4), but to get the CSS and HTML to play ball you need the order to be 1,3,2,4. Here’s a depiction of the order vs layout problem:

How to get round this?

Well firstly, to get the columns working I’m using the code from Matthew James Taylor’s site. He has published numerous standards-compliant and cross-browser (phew) CSS-based layouts, and it’s fast becoming my defacto place to begin when trying to create anything but the most basic CSS layout. I used the 2 Column Double Page layout, but I think the principle will work whatever layout you choose – you just have to be methodical about the code that you insert into the layout to generate the page list.

Here is the (edited) CSS layout that I’m using. You can refer to the page over on Matthew James Taylor’s site for details on how to tweak his layouts (you have to be quite precise with pixel/percentage amounts in order to keep the layout looking right, so rather than detail that here I’ll leave that to him – he did create the layouts after all):

.colmask {
clear:both;
float:left;
width:100%;
overflow:hidden;
}
/* common column settings */
.colleft {
float:left;
width:100%;
position:relative;
}
/* 2 Column (double page) settings */
.doublepage { }
.doublepage .colleft {
right:50%;            /* right column width */
}
.doublepage .col1 {
width:46%;
left:50%;
}
.doublepage .col2 {
width:46%;
left:54%;
}

This is a simple liquid two-column layout, with a 4% space between the two columns. Nice and clean. The corresponding HTML looks like this:

<div class="colmask doublepage">
    <div class="colleft">
        <div class="col1">
          <!-- column 1 content -->
        </div>
    </div>
    <div class="col2">
          <!-- column 2 content -->
    </div>
</div>

Now for the interesting part. As mentioned above, the first CSS column has to be populated first, therefore we need concrete5 to spit out items 1 and 3. After that, the second CSS column needs populated with items 2 and 4.

The way to achieve this is to create a couple of loops, one displaying items 1 and 3 from the array of possible pages, and the other displaying items 2 and 4 from the array. It’s pretty basic PHP, but it works!

The code for column one looks like this:

		<?php
		for ($i = 0; $i < 3; $i+=2 ) {
		$cobj = $cArray[$i];
		$title = $cobj->getCollectionName();
		?>
			<h3><a href="<?php echo $nh->getLinkToCollection($cobj)?>"><?php echo $title?></a></h3>
			<div class="news_summary">
			<?php
			if(!$controller->truncateSummaries){
				echo $cobj->getCollectionDescription();
			}else{
				echo $textHelper->shorten($cobj->getCollectionDescription(),$controller->truncateChars) . ' <span class="newsmore"><a href="' . $nh->getLinkToCollection($cobj) . '">more</a></span>';
			}
			echo '<br /><div class="newsdate">Posted ' . $cobj->getCollectionDateAdded('j F Y');
			?>
			</div>
		<?php
		}
		?>

The crucial bit is the beginning of the for loop on line 2. $i equals 0 on the first iteration of the loop. PHP arrays by default begin at 0 instead of 1, so the first item in the array is item zero, the second is item one, the third is item two and so on. On loop iteration 1, therefore, we display the first item in the array (item 0, which corresponds to the first page which matches the page list rules set in the page list block interface). $i is then incremented by 2 ($i+=2 is shorthand for $i = $i + 2). So $i now equals 2 (0+2). The loop therefore spits out the third item in the array, which corresponds to the third page matching the block’s rules. Excellent. We therefore have the first and third pages appearing in our first CSS column. Note that because the loop will only execute while $i is less than 3, it means that it will never get beyond two iterations, because on the third iteration $i would equal more than three.

Here is the code for the second column:

<?php
		for ($i = 1; $i < 4; $i+=2 ) {
		$cobj = $cArray[$i];
		$title = $cobj->getCollectionName();
		?>
			<h3><a href="<?php echo $nh->getLinkToCollection($cobj)?>"><?php echo $title?></a></h3>
			<div class="news_summary">
			<?php
			if(!$controller->truncateSummaries){
				echo $cobj->getCollectionDescription();
			}else{
				echo $textHelper->shorten($cobj->getCollectionDescription(),$controller->truncateChars) . ' <span class="newsmore"><a href="' . $nh->getLinkToCollection($cobj) . '">more</a></span>';
			}
			echo '<br /><div class="newsdate">Posted ' . $cobj->getCollectionDateAdded('j F Y');
			?>
			</div>
		<?php
		}
		?>

Just a tiny tweak to the for loop here. Now we start with $i equalling 1, which refers to the second item in the array (remember the array’s items start at 0, therefore 1 is the second item – 0,1,2,3). Once that’s displayed, $i is again incremented by 2, so it now equals 3 (its original value of 1, plus 2). Item 3 in the array is in fact the fourth item in that array (0,1,2,3…), which corresponds to the fourth page. Again, because the loop will only execute while $i equals less than 4, it will only iterate twice, because on the third iteration $i would equal 6.

Stick the HTML and PHP together and you get this:

<div class="colmask doublepage">
	<div class="colleft">
		<div class="col1">
		<?php
		for ($i = 0; $i < 3; $i+=2 ) {
		$cobj = $cArray[$i];
		$title = $cobj->getCollectionName();
		?>
			<h3><a href="<?php echo $nh->getLinkToCollection($cobj)?>"><?php echo $title?></a></h3>
			<div class="news_summary">
			<?php
			if(!$controller->truncateSummaries){
				echo $cobj->getCollectionDescription();
			}else{
				echo $textHelper->shorten($cobj->getCollectionDescription(),$controller->truncateChars) . ' <span class="newsmore"><a href="' . $nh->getLinkToCollection($cobj) . '">more</a></span>';
			}
			echo '<br /><div class="newsdate">Posted ' . $cobj->getCollectionDateAdded('j F Y');
			?>
			</div> <!-- col1 end -->
		<?php
		}
		?>
		</div> <!-- colleft end -->
		<div class="col2">
		<?php
		for ($i = 1; $i < 4; $i+=2 ) {
		$cobj = $cArray[$i];
		$title = $cobj->getCollectionName();
		?>
			<h3><a href="<?php echo $nh->getLinkToCollection($cobj)?>"><?php echo $title?></a></h3>
			<div class="news_summary">
			<?php
			if(!$controller->truncateSummaries){
				echo $cobj->getCollectionDescription();
			}else{
				echo $textHelper->shorten($cobj->getCollectionDescription(),$controller->truncateChars) . ' <span class="newsmore"><a href="' . $nh->getLinkToCollection($cobj) . '">more</a></span>';
			}
			echo '<br /><div class="newsdate">Posted ' . $cobj->getCollectionDateAdded('j F Y');
			?>
			</div>
		<?php
		}
		?>
		</div>
</div>

Save the above into a new page list template in your /blocks/page_list/templates/ folder, then you can apply it using the Custom Templates option on the block menu (shown below). Add the css above into your theme’s css file and you should be good to go.

In the code above I’ve left in some cosmetic additions of my own, for example the date on which the item was posted, and a little ‘more’ link at the end of the truncated summary. Obviously you can tweak the css styles of h3 and news_summary to your heart’s content, or add in other styles to get the look you want.

I’ve just succeeded in adding Google Site Search to my concrete5 site and I thought I’d share how. This is for sites where you want a search box on every page (for example in the sidebar or header), and the results to display on their own page. Here”s an example:

Google site search is in many ways better than the c5 search, which isn’t really surprising given Google’s core business. Things like internal PDF/DOC/ODT searching and whatnot are helpful too, especially if you’re building a site with a lot of document downloads (as I am).

Here’s what I did:

1. First you need a Google site search account, which you can get here: www.google.com/cse.

When setting up the custom search engine, limit searching to only sites that you select, then add your domain to the text box. You can add more than one if necessary (maybe you’re building a site for a company has multiple product or service domains?)

Choose either the free or Site Search editions. The latter will remove ads for $100 a year, or if you’re building for a non-profit, government or university site you can choose the first one and there will be no ads once you’ve told them as such.

2. Select the ‘Iframe’ option at the top of the page, then design your form and results pages by choosing colours etc. Choosing the Iframe option means the results will be embedded into an existing c5 page. I’ll be using the /search/search-results page, because it is helpfully included in the default installation of c5, but you can use any page you like.

3. Get the code. Once you have designed your form and results on the ‘Look and feel’ page, click the Get Code… button. You will then be presented with three sections. One where you specify the URL of your search results page, one containing the code for your search form and another containing the code which will actually display the search results.

3.1 In the first box (‘Specify search results details’), enter the full URL of your results page – for example “http://www.mysite.com/searc/search-results” (without quotes). If you want your results to appear on a different page in your c5 hierarchy, put that here instead. It can be anything you like.

3.2 The code in the second block represents the search form which will appear on all your pages. You can paste it into your theme’s code directly and it will work fine. Applying CSS styles and layouts will allow you to integrate it properly into your site’s design.

Alternatively, you could go add an HTML block to concrete5′s Scrapbook, into which you’d paste that code. You’d then be able to add the search form wherever you liked on your site within c5′s WYSIWYG interface, clicking ‘Add From Scrapbook’ whenever you go to add a block. You could also use the Defaults button in Page Types in the Admin interface, which would allow you to place this block permanently in the place of your choice for a given page type. It depends how comfortable you feel with editing the HTML code directly, and with giving editors the chance to remove the search form from a given page (which they can do if you have it inserted as a default block, assuming there are no advanced permissions set up).

3.3 Once your form is in place, you then need to edit the page specified above at 3.1. Navigate to that page in c5, then go into edit mode. Add an HTML block to the page, then paste in the code from the ‘Search results code’ box on the Site Search control panel. Once you’ve done that, publish you search results page.

4. You should now be finished! Try searching for something in the form and see if the search results page appears with the correct results, like this:

Good luck!