Zomie.com - Clean Renewable Webovation Blog

I made some speakers out a water bottle case a while back and posted an instructable:
http://www.instructables.com/id/Water_Bottle_Mobile_Speakers/

Now I am published in Popular Science October 2009 pg 75:

On Gizmodo:

and on MAKE:

It definally is providing some positive reinforcement to continue my hacking ways :P

A colleague of mine (Son) gave me a bunch of these things used for supports in dancing shoes so I had to figure out something to do with them.   Well it didn’t take me long to figure out they would make a nice crossbow and of course this was born:

Now it has over 7000 views on flickr and has been picked up by…

Make:

and Gizmodo:

I have been working on another blog about Macro Photography.  Specifically in regards to reverse lens macro photography where with an adapter ring you reverse an existing lens to giving you a macro lens.

I have found photography a very relaxing hobby and figured it was time to write about this niche.  Please feel free to check out the site at: http://www.macroreverse.com.  There are a lot of how to articles, macro photography samples, and hopefully in the future a few products relating.

Son and I developed a tool to allow users to create a richer blog writing experience.  It seemed to do pretty well at hack day this Spring.  We won the “Work from the Beach” award and David Filo presented the hack award to me (Son was working from Santa Monica and couldn’t make it up to Hack Day). We won brown hack day shirts instead of the red ones typically given out…but it wasn’t the award as much of sharing a great idea that made the event worthwhile.

If you would like to see some more photos from hack day please visit: http://www.flickr.com/photos/14261072@N08/tags/springhackday09/

I don’t know about you, but I really do not like building out crazy drop down boxes something about doing a minutes dropdown of 1-60 really annoys me.  It got me to thinking how easy would be to write a simple function to do this thinking for me…  Now I admit the calendar drop down has pretty much rendered this useless, but think about the progressive enhancement, for the love of no javascript’s sake.

I wanted to make something reusable that can be called across a site to build them out and increment dates/time whenever needed.
The function goes as follows:

1. public function createDateTimeDropDowns ($params=array()) {
2. $start = isset($params['start']) ? $params['start'] : '00:00:00';
3. $datetime = new DateTime($start);
4. $outputHTML = '<option value=""></option>';
5. for ($i = 0; $i <= $params['limit']; $i ++) {
6. $selected='';
7. $value=$datetime->format($params['formatValue']);
8. if($params['preselected'] == $value){
9. $selected = 'selected';
10. }
11. $outputHTML .= '<option value="'.$value.'" '.$selected.'>'.$datetime->format($params['formatSelect']).'</option>';
12. $datetime->modify($params['steps']);
13. }
14. return $outputHTML;
15. }

You can call the function to make you pretty dropdowns like this:

1. $selYear=self::createDateTimeDropDowns(array('start'=>date("Y"),'steps'=>
'+1 year','limit'=>1,'formatValue'=>'Y','formatSelect'=>'Y','
preselected'=>$scheduledYear));
2. $selMonth=self::createDateTimeDropDowns(array('start'=>'January','steps'=>
'+1 month','limit'=>11,'formatValue'=>'n','formatSelect'=>'M','
preselected'=>
$scheduledMonth));
3. $selDay=self::createDateTimeDropDowns(array('start'=>'March 1','steps'=>
'+1 day','limit'=>30,'formatValue'=>'j','formatSelect'=>'j','
preselected'=>$scheduledDay));
5. $outputHTML = <<< HTML
6. <div id="scheduler">
7. <label for="scheduler">Time</label>
8. <select id="scheduledMonth" name="selMonth">$selMonth</select>
9. <select name="scheduledDay" id="scheduledDay">$selDay</select>
10. <select name="scheduledYear" id="selYear">$selYear</select>
11. </div>
12. HTML;

You can view this live here.

So lets talk about tags…If you are an editor of a blog, photos, or even bookmarks these days you know all about tagging.  Incase you don’t what they are you should read up on them because you are missing a great thing on the internet (http://en.wikipedia.org/wiki/Tag_(metadata)).

It got me to thinking (scary I know) that perhaps it is a pain in the ass as a content developer to figure out what your tags are.  I mean common how do I know what people are searching for?  Isn’t there a better way?  Well perhaps there is.  Perhaps we can tie into some kind of a powerful open search api like what Yahoo has to tell us what the popular terms are in my article and to build me some tags off of it.

Hmm that seems to easy right?  Well guess what it is! Just look for yourself:

Test out the autotagger for yourself

So how the heck do you do that? Well simple just follow along:

The first thing you need to do is go out to http://developer.yahoo.com and register an appid this will allow you 5000 searches a day on their open ids’ which is more then enough for personal use.  You then need to look over Yahoo’s Term Extraction service at: http://developer.yahoo.com/search/content/V2/termExtraction.html to see what is required.

Also for fun lets put in a rich text editor because well lets be user friendly and realistic about an environment.  You can view what is required for that at: http://developer.yahoo.com/yui/editor/

So lets write some code for our Front End:

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <html>
3. <head>
4. <title>RTE Autotagger</title>
5. <!-- Skin CSS file -->
6. <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/skin.css">
7. </head>
8. <body class="yui-skin-sam">
9. <h2>RTE Autotagger</h2>
10. <form id="rtepost" method="post">
11. <br>
12. <textarea id="editor" name="testrte"></textarea>
13. <br>
14. Tags:
15. <input type="text" id="mytags" size="50">
16. <input type="button" value="Guess My Tags" id="mytagbtn">
17. <img src="http://l.yimg.com/jn/images/20081008192436/ajax-loader2.gif" height="20" width="20" id="loading" style="display:none;">
18. <!--<input type="submit" />-->
19. </form>
20. <!-- Utility Dependencies -->
21. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
22. <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
23. <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
24. <script src="http://yui.yahooapis.com/2.6.0/build/container/container_core-min.js"></script>
25. <script src="http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js"></script>
26. <script src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
27. <!-- Source file for Rich Text Editor-->
28. <script src="http://yui.yahooapis.com/2.6.0/build/editor/editor-min.js"></script>
29. <!-- scouce for connection manager -->
30. <script src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
31. <script>
32. (function() {
33. var Dom = YAHOO.util.Dom,
34. Event = YAHOO.util.Event,
35. Lang = YAHOO.lang,
36. Connect = YAHOO.util.Connect;
37. var myEditor = new YAHOO.widget.Editor('editor', {
38. height: '300px',
39. width: '522px',
40. dompath: true, //Turns on the bar at the bottom
41. animate: true //Animates the opening, closing and moving of Editor windows
42. });
43. myEditor.render();
45. var generateTags = function(o){
46. var mydata = eval('(' + o.responseText + ')');
47. //drop in tags from json object
48. Dom.get('mytags').value=mydata;
49. //repace all spaces, this is where you do could other filtering or you could drop in a dash between tags
50. Dom.get('mytags').value=Dom.get('mytags').value.replace(/ /g,'');
51. //turn off progress spinner
52. Dom.get('loading').setAttribute('style','display:none;');
53. }
54. //add event to tags button
55. Event.on('mytagbtn','click', function(){
56. //turn on progress spinner
57. Dom.get('loading').setAttribute('style','');
58. //grab content of the rte window and strip out html
59. myContent='myContent='+myEditor._getDoc().body.innerHTML.replace(/(<([^>]+)>)/ig,"");
60. //make ajax call to our simple proxy
61. myTagsCnt=Connect.asyncRequest('POST', 'make_tags_api.php', {
62. success: generateTags,
63. failure: function() {},
64. scope: this
65. }, myContent);
66. });
69. })();
71. </script>
72. </body>
73. </html>

Now lets write our simple proxy api:

1. <?php
2. //might want to add some security here to make sure only you are hitting your api ;)
3. //set your type as doctype as json
4. header("Content-Type:application/json");
5. //create curl function to do a simple proxy for yahoo search
6. function getContextResource($url){
7. $ch = curl_init();
8. curl_setopt($ch, CURLOPT_URL, $url);
9. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
10. $result = curl_exec($ch);
11. curl_close($ch);
12. return $result;
13. }
14. //pull your posted content from Post
15. $myContent=$_POST['myContent'];
16. //create url to curl, add in your appid, output, content to check and then urlencode and utf8encode your content
17. $contextUrl = 'http://search.yahooapis.com/ContentAnalysisService/V1/termExtraction?appid=yourapid&output=json&context='.urlencode(utf8_encode($myContent));
18. //create curl call from our url
19. $feed = getContextResource($contextUrl);
20. //convert to array so we can cut out the things we don't need
21. $convertToArray = json_decode($feed, true);
22. //only report back the values we need
23. $cleanedArray = $convertToArray['ResultSet']['Result'];
24. //return back a json encoded copy of the array we just cleaned up
25. echo json_encode($cleanedArray);
26. ?>

Wow after all of that what do we get?  Well if I copy a well written article from Yahoo Finance such as:
http://biz.yahoo.com/ap/081022/financial_meltdown.html

I get the following tags back:
treasurysecretaryhenrypaulson,apeconomics,henrypaulson,martincrutsinger, aggressivesteps,bushadministration,ysm,financialcrisis,recession,infinity, advertisement,economy,yahoo

Hmm some those are really not bad at all for just a simple search api huh.

I got the opportunity to speak at the Yahoo F2E Summit this year to discuss Shine’s User Generated Gallery Tool. I presented with Gamaiel Zavala a colleague of mine who I worked with to create the tool. He spoke about the prototype and how to extend YUI and I spoke in regards to extending the prototype in a production environment.

You can check out the tool at:

http://shine.yahoo.com/write (click the gallery button)

I hope everyone enjoyed the presentation and I believe we all had a great laugh at the expense of my colleagues’ uploaded photographs:

You can see my pictures of the Summit at:

http://flickr.com/photos/14261072@N08/tags/f2esummit08/

You can see everyone’s at:

http://flickr.com/photos/tags/f2esummit08/

The lectures ranged, but I found the best to be Zakas’ talk on JS error handling, and the talk on JavaScript bubbling. Everyone did a great job and it was a wonderful Front End community event within Yahoo!

I was one of the top 3 out of 27 (no places, just top 3) hacks with in the yahoo media group for Q3.  I developed an SEO deeplinker to be spread across yahoo media to improve click through rates.

Perhaps I will publish a blog about how to build one. I need to check on terms of use from Yahoo! first.

More Pictures:
http://flickr.com/photos/14261072@N08/tags/yahoomediahackday/

I was thinking about how to go about building the image noting service built into flickr as seen above when I ran across the YUI Image Cropper Tool, which contained most of the functionality I wanted. You can view a functional example on YUI’s page at: http://developer.yahoo.com/yui/examples/imagecropper/feedback_crop.html

We are going to base our example from this, and contunie to build onto it throughout many articles.  In this article we will focus on creating the form that moves with the crop tool.

The first step that comes to mind is attaching a form to the selection tool. The first thing to do was to check to see if the crop too is rendered. You can check this by checking to see if the crop tools onready event has fired:

crop.on('contentReady', yourClosure(){});

The second step is fairly straight forward and to create the div with an id and insert the related html:

var tempnod=document.createElement('div');
tempnod.id='vote';
tempnoeinnerHTML='<input type="text" id="comment" value="Comment Here!!">
<br><button id="save" type="button">Save</button>
<button id="cancel" type="button">Cancel</button>';
Dom.get('yui_img_wrap').appendChild(tempnod);

The Third step is to add the event listeners for the save and cancel buttons:

Event.on('save','click',saveFun);
Event.on('cancel','click',cancelFun);

The forth step set the style dynamically in the image cropper’s move event in order to position the form with the crop tool.  Please note the additon of 10 pixels as a bit of buffer space.:

Dom.setStyle('vote','left',region.left+'px');
Dom.setStyle('vote','top',(region.top+region.height+10)+'px');

Don’t forget to set up your styles to reflect your changes and set the orginal cordinates of your comment box:

#vote {
position: absolute;
 left:20px;
 top:125px;
}
#comment{
 margin:2px;
 width:200px;
 background: #FFFFD3;
 text-align:center;
}
#save{
 background: #0063DC;
 color:#fff;
 font-weight:bold;
}
#cancel{
 background: #DDD;
 color:#666;
 font-weight:bold;
}

Feel free to check out a working example at: http://www.zomie.com/examples/imagecomment.html

Later on I will come up with something for the save and cancel functions…

My colleagues and I from shine.yahoo.com were asked to give a presentation about the technologies that went into Shine for the Yahoo Media Group. The presentation was titled “The Good, The Bad, and The internalsystemnottobementioned”. My part of the presentation was in regards to the Rich Text Editor used on Shine. Since it was my baby throughout the development of the site. My presentation was titled “How the Text was Won”.  I am sure you can see a theme here…

I have cut up a simple version of the presentation that can be viewed here if you are interested:
http://www.zomie.com/examples/shinerte_simple.pdf

Also feel free to see a few pictures from the tech talk:
http://flickr.com/photos/14261072@N08/tags/ymgtalk/

I will work to publish a few articles about customizing the Rich Text Editor in upcoming months.