I started up a development project today after upgrading to snow leopard, and none of the codeigniter links worked.  they all said “The URI you submitted has disallowed characters.”  Why?  This hadnt happened before, same project what changed?

Snow leopard upgraded my php dev environment to 5.3 from 5.2.6  And a few things have changed since then.  Namely php bug #47229 “preg_quote should escape “-” (minus) as well” was fixed. (technically in 5.2.8)  CodeIgniter checks uri for allowed characters to prevent some bad things.  But the use preg_quote to convert the allowed list of character to something usable in a regular expression.  Now the minus “-”, or I’d call it a dash (but I know there is a longer character for that)  gets escaped in preg_quote with a backslash “\”.  That cause the expression “a-z 0-9″ to be converted to “a\-z 0\-9″ which will not work in a regex.

How to fix it. (assuming codeigniter 1.7)

1) in codeigiter system/libraries open  URI.php  line 189 you’ll find

if ( ! preg_match("|^[".preg_quote($this->config->item('permitted_uri_chars'))."]+$|i", rawurlencode($str)))

Change that to:

if ( ! preg_match("|^[".($this->config->item('permitted_uri_chars'))."]+$|i", rawurlencode($str)))

Note we removed the preg_quote().  Now in your system/application/config/config.php file  look for line 126 (unless you’ve added a lot to you config will be around there somewhere)

Change the line

$config['permitted_uri_chars'] = 'a-z 0-9~%.:_-';

to:

$config['permitted_uri_chars'] = 'a-z 0-9~%\.\:_\-';

we’re now preparing our allowed character string in the config file and skipping preg_quote.  And that’s it.  Now your uri should work

A while back I was talking with some friends about how to find things about Los Alamos NM online.  What business are in town, when are they open, where should I go?  What is a good place to stay, eat, or shop?  Where should  I move, what is available?  What is there to do in the small town?  That is how Our Los Alamos was born.  

I’ve lived in Los Alamos, almost all my life.  I join the small town with the different feel.  I cant say that I’ve ever found another place like it.  So part of Our Los Alamos is about giving back to that lifestyle, to show others what it means to me, and help them connect with this area like I have.  

This is the first project that from conception to creation has been solely my doing.  The design, the logo, the brand, and the identity is all original and all very important to to me.  It like the project that is never quite good enough, because you want everyone to enjoy it as much as you have.  

I’ve recently started to let the word out, slowly to begin, about Our Los Alamos.  It is light on content, but more is being added every week.  Please take a look, and give me your feedback.

Twitpic is a great easy way to share photo via Twitter.  A lot of twitter clients including desktop and iPhone/any mobile client support uploading pictures to twitpic.  It has gained the largest market share of any twitter centric photo sharing site (according to TC)  

Why am I talking about Twitpic?  Well I thought it would be cool visualize all the photos being shared on twitter, in realtime.  To that end I’m polling twitter search every 3 secs for the term “twitpic”  and publishing them to a xmpp pubsub server.  I built a super simple web interface that subscribes to that pubsub node, and displays new images as soon as they are received. (Technically there is a 5sec delay to let the image load, which makes the display run smoother.)  That is the largest delay, 5secs.  Once anyone uploads a picture to twitpic there is <10sec delay.  

I also include retweets of twitpics, so yes you will see duplicates, sometimes many on the same page, if that image is very popular, and being commented on / retweeted via twitpic. (look out for Miley Cyrus pictures taking over at times)

Check it out, let me know what you think.  I’m thinking about either adding a feature to reply via twitter to the pictures, or to discuss them via group chat on the web page itself.  Suggestions?

http://twitpic.flarify.com

This came to my attention on Twitter yesterday thanks to @idesignstudios. The question is, how do you have a the link text and the page title different?  Perhaps the In the Menu it should say “About” but the Page title should say more, perhaps “Read All about our Company”.  You dont want the long title in the menu.  How can this be done in wordpress?

Selene (@idesignstudios)  found an answer to this here(cssglobe.com). The solution works, but it involves modifying core wordpress files.  Which I would strongly recommend avoiding.  Wordpress, as everyone knows, tends to release a lot of updates (Yes I have run into plenty of update fatigue myself). So dont make your update harder.  When you upgrade, all of the core files will be overwritten, and you will have to remember to apply the patched code again. Perhaps having to lookup the article again, find the right file, find the right line… Can you see that might be messy 6 months or a year after doing it the first time?

But I’m not here to complain.  In fact the code and idea on cssglobe.com handle the problem very well.  However let’s move that into a plugin so when we upgrade the code our changes wont be overwritten. Here is my plugin for just that: Page_Title_Changer.zip

Here is an example:

 With the plugin a metabox is added to the right hand side of the page edit/add admin screen, From there you can set the text for the page title (in the example: “Let us know what we can do for you”).  This is saved as metadata for the page, and a title filter handles choosing the correct title, by location.

I took 20mins to throw this together, so if you find something that doesnt work out as it should, send me an email, I’ll take a look.

Ok, I’m going do a series of this posts on “How do you interact with your clients?”, I’ll share what I do, what I like about it, and what I dont, and maybe some new tools to try.

In any project issue tracking becomes needed. You might be working alone on a project for a client, and they find things in the demo that they would like changed, those are issues.  You might be working on a large project with a team, and have QA personal when they find bugs, those are issues.  When the team or person working on the UX doesnt like the interaction, that is an issue.  Or maybe you just find an issue all on your own (maybe a few issues) track those!  Notes about resolutions can be useful, even more so when you are working on 5+ projects.

Where to track?  

Bugzilla – Open source, the de-facto bug tracking for open source projects, well at least at mozilla the creators of bugzilla as well as many other open source projects. Though I have seen less and less projects using Bugzilla lately.   Pros:  it can do just about anything, a million features, easy enough to add anything else you need / want.  Cons: you have to setup, you have to host it, too complex for most clients to use, too clicky. Update: look like there is a new version of bugzilla, 3.2.  I havent tried this one yet, but it does promise a greatly improved UI.  I hope so.

Email – I have done this.  And it can work with limited success.  It is better then nothing, but at the same time has a lot more time involved.  At least you get a history, though it might be in a less query-able format.  This seems like the place many projects start.  But as the spreadsheets that you start emailing back a forth get larger, this becomes far to hard to keep up to date.  Pros: easy to setup, everyone already knows how to use it. Cons: data will be out of sync quickly, it is harder to search and query, i.e.  what are my current open issues?

Basecamp – This is a nice project management tool.  Great interface, excellent workflow, and a simple set of features that is everything you need.  Issue track is missing a couple of things here though.  Mostly because Basecamp tracks todos.  You lose source control integration, issue states / statuses.  But I find that for many clients this is the simplest and easiest to use.  This is often the best choice for client interaction,  It sure beats email.  Pros: easy to learn, most people will understand right away.  Cons:  it might not have every feature you are looking for in issue tracking.

Lighthouseapp.com – These guys are newish, but have created issue tracking that makes sense.  It doesnt get cluttered by a million features that are never used, but it still has the features that count.  I’m using this for my startup.  We can track milestones, issues that need to be completed for each milestone, general issues, and even create some wiki like pages for easy information / idea sharing.  Their interface has a very good feel, easy to use even for your first time, and you are never left guessing how to do something, it is obvious.  Pros: great interface / UX for issue tracking.  easy to learn.  Cons: Might be more than a client wants to deal with.

Which method of issue tracking to use?

That depends on you and your client or team.  For a development team I heartily recommend lighthouseapp.com.  If you have a lot of client interaction in your issue tracking, it might be better to use basecamp.

Anyone like something else?  I know there are a lot of companies in this area and some really great services, so what else I’m I missing? 

Many websites take input from users.  If your website is going to take that input a redisplay it somewhere on the site, you really need to filter your html.  If you are lucky the requirements for your site will let you strip out all html code, if your not lucky you will have to filter it.  

Why Filter

First, why accept html at all?  because it is easy enough for users to work with, for a WYSIWYG editor to work with, and it is what you are going to be displaying, really it is best all around in terms of your site’s performance and your user experience.  

Ok, so why filter?  Well there are some hurtful people out there, and some people that dont know what they are doing, both can make you look bad.  First the people that dont know what they are doing will forget to close their tags(leaving a <b> tag so the rest of the page can be bold), and using other markup that will ruin your design.  Then the hurtful people will come in a add some javascript to destructive ends, compromising the security of your site.  And keep in mind that script doesnt have to live inside a <script> tag.  it can be in many attributes, such as onmouseover for example. combine that with some inline style that enlarges and positions text to cover the whole page, and boom!  the hacker just got their malicious script to run on your site without a script tag, not good for your users.

How to Filter

We understand the need, now how do we accomplish the task?  3 main points.

1) Whitelist tags and attributes.  Create a whitelist of allowed tags, and their allowed attributes.  Whitelists are better then blacklisting.  Cause they should be shorter,  they are easier to maintain, and more restrictive.  A comprehensive blacklist could take a long time to make, and whenever a browsers decide to add support for new tags, your blacklist requires updating.  If you use a whitelist, it is shorter, and wont break as new tags are supported.

2) Balance is needed.  Your page can be ruined if the user submitted code includes some </div></div>  Or what if the user opens a tag that they never close… maybe  <center>  What will your site look like then?  You need to add balance to your user submitted html.  Balance all tags.  Also keep in mind tags that self close, <img> or <br> for example.  and to be XHTML compliant make sure they include the self close <br />

3)  Proper Nesting.  Improper nesting in certain browsers can lead to trouble similar that that of unbalanced tags.  Check for <b><u>text</b></u>  

Here is the Code

So enough talk here is some links to helpful code to get this done:

• For sanitizing HTML by means of a whitelist: http://refactormycode.com/codes/333-sanitize-html
• and adding proper balance: http://refactormycode.com/codes/360-balance-html-tags
• I recommend Cal Henderson’s (Flickr Engineer)  book “Building Scalable Web Sites” Chapter 5 http://www.amazon.com/Building-Scalable-Web-Sites-applications/dp/0596102356

So long, and be safe…Filter your Html.