About the book

The tag line of the book “Create a powerful and dynamic social networking website in PHP by building a flexible framework” sums up pretty well the main aims of the book. It starts off by giving an introduction to social networks: the definitions, existing services and software-solutions as well as why and when you might want to develop your own (Chapter 1).

Assuming you need your own solution it then goes on with planning and designing the framework which will serve as the platform for the further development of your social network site (Chapter 2). The next chapters (Chapter 3 through 10) goes systematically through how to implement features such as registration, relationships, status stream, events, groups, API etc.

It then finishes off with discussions around deployment, security and maintenance (Chapter 12), marketing and monetizing (Chapter 13) and finally a chapter about performance – Chapter 14: Planning for growth.

My thoughts

The short version: I like the book. It’s a recommended read for people wanting to learn more about extensible application frameworks suited for the web as well as examples of developing and implementing social features.

The slightly longer version: I like the fact that Michael (Peacock, I do not speak about my self in third person… usually) follows a systematic approach the whole way through and focuses on well known best practices. These includes data sanitation, MVC, design patterns and encourages the reader to  just use the exapmles as inspiration and a starting point.

I would like the chapter about performance (Chapter 14: Planning for growth) to be a little more comprehensive though, but it’s really more suited for several books of it own and Michael does give a nice overview of some of the options and techniques available which in turn can point the reader in possible directions for further reading.

The nitpicking: The editors should also have done a better job with the typography related to the code examples as they can be a little hard to read sometimes with lot’s of linewraps etc, as well as some minor typos which sometimes can cause a little confusion.

The HTML-purist in me do feel a little bad about some of the HTML/CSS-examples though, but that’s not the focus of the book.

Who it’s for

The author assumes the reader knows the basics of PHP 5, OOP and preferably some knowledge regarding software design patterns but that’s not required.

Sidenote: The techniques listed in this book is not limited to social networks so there are a lot of good information here about how to develop a framework in general. The “Social”-bit is just for the buzz

Useful information

Title: PHP 5 Social Networking

Author: Michael Peacock

ISBN: 1849512388

ISBN: 13 : 978-1-849512-38-1

Related posts:

• New job, quadcopter and more

One of these things are regarding how to format a URL.

This post isn’t really server-technically focused, as it is more a discussion of an idea. I’ll none the less assume that the reader has some familiarity with mime-types, basic webserver-settings (like handlers and URL-rewrite-techniques).

Why

As far as I’m concerned, any URL should give a hint of what you will find there, and by stripping the file-extension and just sitting left with something that’ll look like a directory, or using the scripting-language’s extension, I believe that we works against this. File-extensions gives an important hint regarding what the content is. What do you expect when you see “.jpg”, “.gif” or “.png”? Yes, images. Then what about “.html”, “.txt” and “.odf”? It’s most likely some kind of text, perhaps formatted. So what does “.php”, “.py” and “.aspx” tell us? Not much – it mostly a directive to the webserver, telling it to use some kind of parser to compile/process the contents before outputting it. And it might output html, xml or pdf as well as anything else.

A couple of years ago it had a “coolism” about it, saying that “I know how to develop fancy websites”, but nowadays people mostly expect some kind of interactivity anyway.

How

All relevant webservers today have to possibility to map any kind of extensions to any kind of (supported) language-parsers. I.e. with Apache you can use the AddType-directive like this:

addhandler php5-script html xml json

- to parse all .html-, .xml and .json-files in the given directory as PHP 5.

Now, let’s say you have an API which allows you (or perhaps other users), to query a service for information – and allows it to be delivered in xml, json and html. This is usually solved by adding some parameter like “of” (output-format) or something like that in the request to tell which format you’d like. I prefer to keep everything as logical and reducing the need to look up in manuals as far as reasonably possible, so instead of sending GET-requests like this:

http://example.com/gateway.php?id=15&key=11341&of=xml

http://example.com/gateway.php?id=15&key=11341&of=json

http://example.com/gateway.php?id=15&key=11341&of=html

I’d rather prefer:

http://example.com/gateway.xml?id=15&key=11341

http://example.com/gateway.json?id=15&key=11341

http://example.com/gateway.html?id=15&key=11341

This applies just as much for those sexy search-friendly URLs – just append .html to that pretty URL. Google says that it atleast won’t affect negatively on your ranking – so why not?

Possible problems

There are some obvious problem to this approach:

1: What if you want different parsers (let’s say php and python) for different files but which will serve the same kind of output? How do we tell the server which to use when?

- Possible solutions to this is to either separate them in different folders (the cleanest approach), or expand the extension to ie. .php.html and .py.html. Perhaps in combination with some mod_rewrite-kind of tricks.

2: What about the overhead for static files, which still is sent through an interpreter although nothing is changed?

- If you are running a service which is sensitive to these kind of margins, you should just use dedicated servers or CDN’s to deliver the static content no matter what.

3: How far shall we take it? Should we use extensions like .html5 and .xhtml etc?

-  I do believe that these differences are mostly relevant to the software parsing them, so in these cases it may suffice with keeping with i.e. .html, and use the MIME-type to send further details.

Summary

Although all my examples might not pinpoint all the benefits I do believe that there is an idea in keeping the file-extension, both to assist external users as well as might reduce some clutter.

What are the pros and cons of an approach like this? I’ve barely touched a few in this post, but I hope I was able to mention some of the most essential ones.

No related posts.

See the original blogpost – for information of the concept – or go straight to the demo-page or jquery-demo-page to watch it in action. jQuery has turned out to be the tool of choice for many developers out there, both because of it ease of use and it’s powerful features.  Although jQ might be a little overkill for some applications, it has the sleakest way of packaging a lot of functionality and allowing for modularity through plugins as I’ve experienced so far. Feel free to contribute if you’d like , i.e. adapting it to other frameworks or suggest new neat features.

Please give it a try and let me know what you think!

Download

• jquery.trh-0.3.js (4.5kB)
• jquery.trh-0.3.min.js (1.8kB)

Activation

$(document).ready(function() {
  var params = {}; // See the jquery-demo-page for available parameters
  $("table").highlighter(params);
});

Known limitations

You should avoid activating it at more than one table on each page for now – the next version will have fixed this with several activation-modes. The next version will also include dynamic column-selection as well, allowing i.e. to let the users press any column to match against.

Possibly related

• 10 Table Plugin For jQuery Must To Be Learned

Related posts:

• table-row-highlighter.js
• Usability-tips for your application (Part I)

2009-06-06: Update

Now also as a jQuery-plugin. Blog-post.

This article is about my solution to an issue/request mentioned in my “Usability-tips for your application (Part I)” regarding highlighting corresponding table-rows when keys are pressed.

Take a look at the demo-page and play a little around.

Download the script.

Usage

<style type="text/css">
table tr.highlight td { background-color: yellow; }
</style>
<script type="text/javascript" src="table-row-highlighter_0.2.js"></script>
<script type="text/javascript"><!--
// Should be substituted with your own play-nice-by-adding-events-method
window.onload = function() {
	MIO.highlighter.init(
		document.getElementById("mytable"), // Reference to table-node
		0 // Which column to check against, defaults to 0.
	);
}
// --></script>

More details can be found on the demo-page as referenced above.

What do you think?

There are a couple of improvements just around the corner, but thought I’d just share the idea and an example. Feedback are welcome, and if you improve it, please send me the changes so I can update the code.

Related posts:

• table-row-highlighter.js – now as jQuery-plugin
• Usability-tips for your application (Part I)

<table border="0" width="100%">
  <tr>
    <td class="h1" align="center">Page-header<td>
  </tr>
</table>

Just gotta love it!

No related posts.

Some of those are pretty logical – like an empty array compared to 0 or false, returns true – but others not quite that logical.

Example

// returns true
"string" == 0;

// returns false, as probably expected of the above as well
"string" === 0;

I assume this is because the string is typecasted to integer, and (int) “string” will give 0. So as we know how PHP’s typecasting is working, it’s easy to understand why “123string” == 123 will return true as well.

Related reading

• PHP type comparison tables

No related posts.

Keep in mind that, as I’m kind of an web-guy, I’ll mostly keep things related to the web, but much of what I’m going to write about is easy transferable to the desktop-applications. And I will also encourage you to mention issues you’ve encountered as a comment and help me finish my list.

In this post I’ll go through:

• Make tables sortable
• Make sure “Skip-intro”-links are visible at once, even before the flash is loaded.
• When working with tables, make sure a key-press highlights the first, closest matching row.

Making tables sortable

In short – what is the use of organizing tabular data in tables, when you don’t/won’t enjoy the full power of it? When coming to using tables on the web, it should really be up to the UA’s to implement such features, but until then you’ll have to do it yourself. There are mainly two solutions to this case (on the web, that is):

Backend processing

Your table-headers are links, with parameters to be sent to the web-server, where your script than sorts the listenings (assuming you have your data in a database-table or an array/hash-table), and then output the correct result. The query-string sent to the server will probably look something like this: “field=name&dir=desc”. The script will then sort the results while taking the parameters into account, and then return a nice dataset ready to be rendered in html. The downside of this approach is the extra requests to the server and the loading time, which in turn will make the user have to wait. We all know that that’s not good you bad boy!

Frontend processing

This is easily done, if you have used correct markup for your table (thead and th’s for defining the header-area, and tbody td etc to define the content-part. Check out this for more info). There are a great amount of javascript-scripts dealing with this issue, although they have their shortcomings. The main functionality of these are to attach javascript-events to the text in the table-headers, and make them sort the table on the corresponding column – pretty straight-forward and as expected.

The problem, though, is best imagined through an example: Let us say you have a search-form, which search through an database of articles. The result is in return displayed in a table, with columns for title and creation-date. The searchresults are also grouped in pages of 20 rows each, so to view the next 20 results you’ll have to click on the neat little “page 2″-link. Let us now stay on page one, and click on the “creation-date”-header to sort the results after date of creation. The problem here is that your javascript will (usually) only sort the current page, because – of course – it doesn’t know about the remaining pages. This issue is avoided using backend-processing. It is obviously also possible to work around this, but as a default behaviour – this is usually the result.

“Skip-intro”-links

While this is an issue I come across quite often, this is also the the situation with one of the easiest solutions. The situation: There is this super-fancy site, with an even more super-fancy intro (usually in Flash), to really show off how cool this site really is. And – as this super-fancy-site-intro-flash is quite heavy with regards to loading images, animations and sound-effects – they also have to have a status bar to indicate the progress of loading the intro. All in all fair enough, and the solution for those of use who doesn’t feel like watching this intro and really just want to get on with the real content, is to give us an “Skip intro”-link which in turn will send us (hopefully) directly to the main-site.

So the followup-question is “Where do I place this link?“, which basically has two answers (and only one of them are actually good): Inside the flash-animation (usually with s a getURL-call), or as an HTML-link located somewhere around the intro (above, underneath, left, right, or even diretly onto it (behold the the magic of CSS) ). The good solution here is to locate it in the HTML as an anchor. This is for several reasons: It’s fetchable for search-engines (allthough some SE’s by now know how to read swf’s), and it’s in reach already before the flash is loaded. On the other side, the worst solution was by someone who had the link inside the flash, and only visible after the progress bar was finished. Great!

In short: place the “skip intro”-link in the HTML-code, and keep it visible as long as the intro is running.

Highlight corresponding cell/row on key press

This is another tip related to tabular data, and are often directly related to the sortable-part. When working with tabular data, and selecting/sorting a certain column, and pressing a key, ie. the letter “B”, please jump directly to the closest matching row.

In short: If the user presses a key, make sure to highlight the corresponding row, depending on which column is highlighted/sorted on. If the user presses “B” and the table is sorted on surname, jump to the first row with a surname which starts on “B”. If there are no rows with matching surname, then highlight the closest matching one. I.e. the first starting with “C” etc.

Perhaps not exceptionally relevant for websites yet, but I do think that as more and more content-heavy applications are being developed for the web, it is something to look into. I’m working on a JavaScript-solution to this and will post about it a little later. Keep following

Related links

• Sorttable.js – Making HTML-tables sortable via JavaScript
• tablesorter – a jQuery plugin
• table-row-highlighter.js – My prototype of abovementioned functionality

More to come

I’ve got plenty more to come in upcoming posts,  and would also very much like your input on especially the discussed issues as well as proporsitions for coming cases.

• Does entry-highlightning on tables after key-press have anything to do with the web?
• How can this be implemented in a good fashion?
• What other magic is reasonably to accomplish with neatly marked up tables?

Related posts:

• The whys, hows and whens of pagination
• table-row-highlighter.js

Now, this doesn’t mean that every single page on the web should be 100% identical for everyone, but more like: Relevant information ought to be available and easily accessible by those who need and/or want it, regardless of disabilities. So in my view, it is important to separate the thought of content and functionality on the web.  And as well, in these days of the ever-increasing amount of web-applications this has got to be taken into account. As I’ll discuss further in a soon-to-come post there are some things to take into consideration whether the “website” actually is a website, or a web-application. In short: every web-application doesn’t necessarily have to be accessible to everyone, regardless of platform, disability etc, while most of the websites does have to be so.

There is a common misunderstanding that idea of the open web mean that every piece of content, associated with every bit of fancy functionality ought to be done in such a way that everyone – regardless if they’re using IE 5, some old Netscape or even Lynx -should be able to enjoy both the content and the functionality.

How I/to do it

When I create a website for any company, I do make sure that all of their public content is accessible – this mean that the webpages are neatly marked up in as meaningful markup as possible, as while as making sure my stylesheets as looking fancy for the waste majority of users, and using javascript just to enchance the experience for those of them who support/enable it. This way it will be accessible for those using supporting UA’s (ie. those with reduced sight) and also degrades nicely for those with older browsers – or for some other reasons doesn’t fully support CSS and/or JavaScript).

This is not anything new for anyone who’ve heard for web-standards, semantic markup and progressive enhancement – which in turn will make sure of graceful degradation.

I know there are those out there who will shoot me for not saying that 100% ought to be accessible to everyone, but as we live in a real world – we have to make real decisions to make real business.

Related posts:

• Usability-tips for your application (Part I)

http://en.wikipedia.org/wiki/Www

Related posts:

• My look on the web

In general this is how I treat IE6:

I’ll create my site, and while developing I’ll test it in Opera, Firefox, Safari, IE7 etc.  So, after the HTML, CSS and eventually Javascript is finished, then I’ll check it in IE6. If the content is easily readable/reachable, the menu is usable and the different parts of the layout is generally in the right places then I won’t bother at all. If, on the other hand things actually doesn’t work (although, after quite some years developing for IE6, I do manage to avoid most of the traps) then I’ll obviously fix until the above requirements are met.

I _won’t_ patch for min-width, max-width and the other missing features, I’ll perhaps have to add a little fix for some margin-related bugs (like the double-margin-on-float-bug), and with some designs I’ll have to add a little rule to fix png-transparency, that’s it.

Note: Pixel-perfectionism is something I don’t believe belong to web at all, being the flexible medium it is.

So – I do not develop _for_ IE6, but I do add support for it.

No related posts.