Archive for December, 2010

Reflex Feedback widget

I worked on a small AJAX widget for user feedback built atop jQuery UI: Reflex Feedback. It’s inspired by the widgets you see from services like Get Satisfaction and UserVoice, but much simpler and it’s a frontend-only widget, how you handle the feedback info on the backend is up to you.

Here’s what it looks like.

reflex feedback widget dialog

And here’s what the tag that opens the dialog looks like:

reflex feedback widget tag

To use it, download or clone the ReflexFeedback repo from bitbucket

Place the .js file wherever you’d like but the /reflex.content folder should a subdirectory in the same folder as the page loading the .js file. Load reflex.js as you would any other javascript file:

<script type="text/javascript" src="js/reflex.js"></script>

Call Reflex.init() to add the widget to the page. The first argument is the DOM element to attach the additional HTML/CSS code to. The seconds argument is the server-side script to call when the user clicks Send Feedback.

Reflex.init($('body'), 'controller/post_feedback.php');

That’s it for the frontend. You should see the tag show up in the right-hand corner and when clicked the dialog open.

For the backend, the AJAX call to send the feedback info will send a POST request with 2 fields: feedback_type, feedback_txt.

Reflex expects an XML reply from the server:

<reflex>
<result>ok</result>
</reflex>

ok indicates a successful result, any other reply is considered an error.

A successful result will close the dialog and show another with a thank you message.

reflex feedback thank you dialog

For an error, a message is shown below the Send Feedback button, informing the user that an error has occurred and to try again.

reflex feedback send fail

As for what to actually do with the feedback, that’s up to you, but what I’m doing is sending myself an email with the feedback info. I’ve posted my PHP script below; feel free to use it, modify it, etc. If you do use this code, be sure to fill in your mail server credentials and a from address; you’ll also need PEAR’s Mail package installed.

<?php

require_once "Mail.php";
require_once "Mail/mime.php";

header('Content-type: application/xml; charset=utf-8');
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n";

if(!isset($_POST['feedback_type']) || !isset($_POST['feedback_txt']))
{
echo "<reflex><result>error:missing-arguments</result></reflex>";
}
else
{
$from = "...";
$to = "...";
$subject = "Feedback from user...";

$feedback_type = $_POST['feedback_type'];
$feedback_txt = $_POST['feedback_txt'];

$bodyHtml = "<html><body>";
$bodyHtml .= "<p>Type: {$feedback_type}</p>";
$bodyHtml .= "<p>Feedback: {$feedback_txt}</p>";
$bodyHtml .= "</body></html>";
$body = $bodyHtml;

$host = "...";
$port = "...";
$username = "...";
$password = "...";

$headers = array('MIME-Version' => '1.0rn',
'Content-type' => 'text/html; charset=utf-8',
'From' => $from, 'To' => $to, 'Subject' => $subject);


$smtp = Mail::factory('smtp',
array ('host' => $host,
'port' => $port,
'auth' => true,
'username' => $username,
'password' => $password));

$mail = $smtp->send($to, $headers, $body);

if (PEAR::isError($mail))
{
$err_details = $mail->getMessage();
echo "<reflex><result>error:send-failure</result><details>{$err_details}</details></reflex>";
}
else
{
echo "<reflex><result>ok</result></reflex>";
}
}

?>

That’s all for now. I’ll work on more features and options for customization in the future. You can see the widget in action over at dotspott.com

Spott map

Something pretty cool in MSSQL Server Management Studio: for columns with the geography data type, Management Studio will plot the points on a map. Here’s a map of all locations tagged from all dotspott users.

spott map

Specifying blank string in MSSQL Server Managment Studio

If you want a specify a blank string in the Column Properties table (instead of writing a query) for something like the Default Value or Binding property, enter (”)

MSSQL Server Management Studio

Just having will not work as that will actually insert 2 apostrophes.

h/t to Dhowe from this thread on bigresource.com

AltaVista

Everyone’s mourning the death (perhaps prematurely) of delicious but it’s worth nothing that the search engine AltaVista is going to be shut down as well; its time has come, but it’s still somewhat sad to see it go.

altavista logo

Steven Vaughan-Nichols @ ZDNet echoed my sentiments perfectly,

“AltaVista was Google before there was Google.”

If you remember web search in the 90s you, of course, remember Yahoo, but Yahoo along with all of its contemporaries snubbed search in favor of navigating and drilling-down into specific categories. If what you were looking for didn’t fit nicely into a category, it was like finding a needle in a haystack, assuming you were able to find the needle at all. Another not-so-fond memory of web search in the 90s is the continual intrusion of more and more invasive ads. Yahoo was cleaner than most, but sites like Excite peppered their sites with popups and banners; I distinctly remember by system freezing simply from going to excite.com.

AltaVista was revolutionary: sleek, minimal design focusing on text input (though, there was categories at a certain point), good results, and no annoying ads.

So, goodbye AltaVista, and thanks for all the fish.

Linux threading model

Like many (I’m guessing) I was under the assumption that processes incurred a higher cost on performance compared to threads. On Linux, at least, this appears to not be the case,

Linux uses a 1-1 threading model, with (to the kernel) no distinction between processes and threads — everything is simply a runnable task…

More details in the comment on stackoverflow.

Local search on dotspott

Local search is now available on the dotspott web client; allowing you to search for local venues and add them to your list of spotts.

dotspott local search for cocoa bar

The Google Maps API v3, which is used by dotspott, doesn’t really allow for local search and the Local Search API itself is deprecated (however, as per Google’s deprecation policy, it should be available until Nov. 2013). What I did was use gmaps-api-v3-googlebar, which allows adding a google-bar like control to the map.

One interesting thing I needed to do that wasn’t directly possible with gmaps-api-v3-googlebar update a few other things after one of the search results were selected. I wanted to avoid touching the gmaps-api-v3-googlebar code, so I did this by getting a reference to the existing event handler, then overwriting it with a new function, which called the previous event handler function.

Here’s an example where we grab the reference to the existing selectResult event handler (searchResultPre), overwrite with a new event handler, call the previous handler (binding to window.gbar, the instance of window.jeremy.jGoogleBar; binding is necessary b/c the event handler references this internally), then add some new functionality where we modify a paragraph element in the DOM (id = map_position) to show the position of the local marker that is selected.

selectResultPre = window.jeremy.jGoogleBar.prototype['selectResult'];
window.jeremy.jGoogleBar.prototype[
'selectResult'] = function (result)
{
selectResultPre.call(window.gbar, result);

    
var searcher = window.jeremy.gLocalSearch.searchers[0];
    
var results = searcher['results'];
    
var lmarker = result['marker'];

    $(
'#map_position').text(lmarker.getPosition().toString());
}

oh, and yes, this is using jQuery; $(‘#map_position’) should have given it away.

@font-face

I’ve always played it safe with fonts when it comes to web design, sticking to fonts commonly available across operating systems such as Verdana, Tahoma, Trebuchet MS, etc. However, I’m pretty psyched to see how well the CSS @font-face attribute is supported. Format support is somewhat of a mess: EOT for Internet Explorer and TTF/OTF for WebKit-based browsers (Chrome, Safari). However, Firefox 3.6+ supports the new Web Open Font Format, which is poised to become the new standard and will, hopefully, quickly find it’s way into the other browsers.

If your in Firefox, Safari, or Chrome, here’s a font I’ve loved for a while, Titillium:

TitilliumText999wt

I’ve never really had problems finding fonts for free or even commercial use, but Font Squirrel now makes the whole search process dead simple and super easy. They also seem to have a pretty awesome converter; though I used this oft2woff converter for my little demo above.

Code at 7th

Snapped someone’s HTML graffiti on this pole at the 7th Avenue subway in Park Slope:

HTML code @ 7th avenue subway