• curl or wget the file URL
• clone the repo, extract single file, move it on file system
• create the file, open an editor, and paste in the content
• save as

Here’s a terminal command I like. From your project directory, run:

pbpaste | cat >> foo.js

If you’re on linux, replace pbpaste with your terminal paste utility. If you’re on windows, g-d help you and install a linux vm

Been over a year since last blog post! Some updates follow.

Career

A year ago, like January 2011, I had just started working as a UI Engineer at a daily deals website called, BuyWithMe. RIP BuyWithMe! That was a great adventure and I met great people and we built awesome shiny stuff!

After BuyWithMe ended in October, 2011, I did some contract work. It was mostly WordPress development. In December 2011, I made the decision to take a hiatus from contract work. In February 2012, I started a new FT gig! Yes, acronyms, everyone knows they are the shit, so deal with it.

Over the past year I’ve done quite a bit less server-side programming and focused more on UI roles. Learned a lot about JavaScript and some about UX. It’s such an exciting time to be Front-end developer! I still sometimes write Ruby or PHP or read about Python. And now I work at a .NET shop. But for the most I’m evolving into a UI developer who has a decent knowledge of server-side programming and databases.

Personal

The past year and a half since I moved back to New Jersey has been nuts. Soooo much working. When I started at BuyWithMe as FT, I kept doing contract work on the side. So in 2011, I had my day job and a night and weekend job! Turns out that’s a bit much. I barely ever saw my friends. I was the worst person. Not worst like indecent, just like, annoyingly busy and absorbed in my own shit.

It got weird/I got weird … haha maybe weird-er? My friends would likely say I’ve always been weird. Now, I’ve sort of grew into like full blown nerd/geek-dom. Seriously, most of my weekends in 2011 were spent in front of a computer, working on … possibly trivial things. It was more common to find me indoors near a computer, than outside, being social, enjoying life. Sometimes I enjoyed the contracts and the learning. Other times, my heart wasn’t in it.

So all that, coupled with my general proclivity for not getting in line with the rest of society, I think made some people think that I was super weird haha.

They were like, “So, you’re not married, you spend all of your time working, you moved back in with your parents … that’s uhhhh, interesting?”.

And I was like, “I know right!? I’m so busy working and doing stuff that isn’t actually important to me. I don’t even have time to move out of my parents’ house! No, seriously, I really have to do this work … b/c I said I would. No, I can’t hang out this weekend. So … basically see you in 2012? Siiiiiiick”.

But now I’m back.All official like.I do social stuff again.I see my friends.I’m moving into my own place again.And all that adult shit. Fucking innnntresting.

Social Media

That’s the update for now … hoping to blog more often. Been doing more micro blogging lately with Twitter, Tumblr and Path since that’s what all the cool kids are doing, right? Also working on updating and revamping my web Portfolio with my latest work.

Maybe moving this blog to a different domain and platform. You know … probably use Octopress or some other hip fancy platform, nbd. Some complex platform that is more time consuming than WordPress haha.

curl -d "foo=bar&test=true" https://www.yourapiurl.com

Many WordPress functions allow you to pass parameters using query strings. What does that mean exactly? Key/pair values, just like you often see in a URL query string, e.g.

page=5&lang=en

Below I will show a few examples of options for passing params to functions. Then I will provide a “parse_args()” function that lets me process the query string params in my functions.

Option 1: Ordered parameters

/** ordered parameters */

function get_tweets($var1,$var2,$var3){
    // validate the params and make use of them.
    // Order matters when you pass them in.
}

/** calling it */

get_tweets("arg1","arg2","arg3");

/** OR */

$arg1 = "barackobama";
$arg2 = "10";
$arg3 = "false";

get_tweets($arg1,$arg2,$arg3);

You can spice up ordered parameters a bit by using the native PHP functions:

func_get_args() // get array of all args
func_num_args() // get length of args 
func_get_arg() // get specific argument from arguments array

Option 2: Pass an array and extract from within

Advantages: Unlike ordered params, you don’t need to worry about the order of your arguments. You also can have a varying number of arguments.

/**Setup an array of parameters and extract them from inside function.*/

function get_tweets($array){
    extract($array)
    // array keys are exposed now as variables
};

/** Setup */

$array=array(
    "twitter_user" => "barackobama",
    "number_of_tweets"=>"10",
    "date" => "2010-11-01"
);

/** Calling it */

get_tweets($array);

Note: If one of your params is an array of data, you need to use the above approach. After passing the associative array of params to your function, you can use the php function extract() to get turn the array keys into variables. The query string params approach below will not work if you are passing an array of data. **Unless you serialize() your array before concatenating the final query string and passing the params to your function. Then inside the parse_args(), you’d need to revise it to test whether any of the params can be unserialized().

Option 3: Query-string-style params

Advantages: Less typing and preparation before executing functions()
Using query string parameters gets you the advantages noted for using Arrays – variable length and order of argument list – and also allows you to shorten the preparation required to setup your function calls.

function get_tweets($args){

    extract( parse_args($args) );
    // array keys are exposed now as variables

};

/** Setup, store query string args in variable*/

$var = "twitter_user=barackobama&number_of_tweets=3&date=2010-11-01";

get_tweets($var);

/** OR pass directly */

get_tweets("user=zeldman&limit=3&date=2010-11-15");

Implementation: A parse_args() function

/** 
 *
 *  parse_args($args) parses query string style params
 *  and returns array.
 *  @param String Your params as a string.
 *  E.g. 'day=10&month=11'
 *  @uses explode() to separate query string into key/pair
 *  @description Call this function inside your own
 *  functions to get an array of args passed, even
 *  though you didn't pass an array or multiple params.
 *  @return Array
 *
 *
 */
function parse_args($args){

if( empty($args) ):            
    throw new Exception("\n\nfunction parse_args() expects you to pass a param\n\n");    
elseif( !is_string($args) ):
    throw new Exception("\n\nfunction parse_args() expects a string, ". gettype($args). " passed\n\n");
endif;

// array to store our parsed args
$parsed = array();

// confirm there is at least one param, in format we expect
if( !strpos($args,"=") ):
// if not, trigger exception
    $msg="\n\nfunction parse_args() expects query string params. \n\n";
    $msg.="String passed does not contain any assignments using = operator\n\n";
    throw new Exception($msg);
elseif( strpos($args,"&")  ):
// if str contains &, assume multiple params
    $parts = explode("&",$args);
    for( $i=0, $len=count($parts); $i<$len; $i++ ):
        $tmp = explode("=",$parts[$i]);
        $parsed[$tmp[0]] = $tmp[1];
    endfor;
else:
    $tmp = explode("=",$args);
    $parsed[$tmp[0]] = $tmp[1];
endif;

return $parsed;
}

Using parse_args($args)

function get_tweets($args){

/* parse our query string-style params & return 
an array to php's native extract() function */

    extract(parse_args($args) );

/** Now, after calling extract(), following items from this string -
"twitter_user=barackobama&number_of_tweets=3&date=2010-11-01"
- are now available to you as variables:


$user; // 'barackobama'
$number_of_tweets; // 3
$date; // 2010-11-01
*/

}

Modify parse_args() to return early if an array is passed

The next step I think would be to build in support for arrays, so you can call parse_args() on either query string params or an array of params. This wouldn’t take much work and would provide even more flexibility and wider application. Here’s an attempt, seems to work, which tests if an array has been passed in. If an array was passed, we return right away since there is no point in evaluating any more code.

function parse_args($args){

if( empty($args) ):       
     
    throw new Exception("\n\nfunction parse_args() expects you to pass a param\n\n");

elseif( is_array( func_get_arg(0) )  ):                 

/* return right away if param itself is an array */

    return func_get_args();        

elseif( !is_string($args) ):

    throw new Exception("\n\nfunction parse_args() expects a string, ". gettype($args). " passed\n\n");

endif;

// array to store our parsed args
$parsed = array();

// confirm there is at least one param, in format we expect
if( !strpos($args,"=") ):

// if not, trigger exception
    $msg="\n\nfunction parse_args() expects query string params. \n\n";
    $msg.="String passed does not contain any assignments using = operator\n\n";
    throw new Exception($msg);

elseif( strpos($args,"&")  ):

// if str contains &, assume multiple params
    $parts = explode("&",$args);

    for( $i=0, $len=count($parts); $i<$len; $i++ ):
        $tmp = explode("=",$parts[$i]);
        $parsed[$tmp[0]] = $tmp[1];
    endfor;

else:

    $tmp = explode("=",$args);
    $parsed[$tmp[0]] = $tmp[1];

endif;

return $parsed;
}

Thanks to Ryan Bagwell for helping me formulate this post. Find Ryan: @ryanbagwell, http://www.ryanbagwell.com/

Working demo code is here.

Before CSS3

Often the websites I build for clients include rounded corners in the design. Prior to CSS3, creating rounded corners ( without JavaScript ) in any browser required creating and slicing up images to be used with html elements and the css property, background-image. How many images need to be cut? How many elements do we need in our HTML mark-up to properly display the background-image? Other than background-image, what CSS properties are required to display the background-images? Those answers depends on whether you require the content to be able to expand and contract, or whether the height and width are fixed.

E.g., Rounded corners for the chrome of a webpage might need three background images and three HTML divs – div#top, div#center (repeating vertically), and div#bottom. Repeating the center background image allows for content of varying length. If you have a fixed height and width then you can cut a single background-image.

To boot, IE6 does not include native support for PNG images. So if your rounded corners required transparency, you needed separate background images and CSS rules to specify GIFs for IE6 and PNGs for IE7+ and other browsers. In order to apply rules specifically to IE6, you need detect the browser on the server side, use Microsoft proprietary conditional comments for Internet Explorer, or javascript. Alternatively, you can use the proprietary Microsoft filtering code to add support for transparent PNGs in IE6. Either way it requires adding browser specific CSS, which is generally undesirable but sometimes unavoidable. Below is an example of adding the conditional wrapper div for IE6, which is used primarily for targeting your CSS as well as using different background images between IE6 and > IE6. Also shown is the conditional div for generating the additional markup required for the background images.

Rounded Corners with background-images

Your CSS for IE browsers would be something like:

/* IE Browsers: #box_bottom */
.ie6 #box_bottom,
.ie7 #box_bottom,
.ie8 #box_bottom {
background:url("images/bottom.gif") no-repeat bottom left;
width:420px;
height:300px;
padding-bottom:18px;
}

/* For IE7 and IE8, height:auto */
/* IE7+ Use PNG */
.ie7 #box_bottom,
.ie8 #box_bottom {
height:auto;
background:url("images/bottom.png") no-repeat bottom left;
}

/* IE Browsers, #box */
.ie6 #box,
.ie7 #box,
.ie8 #box {
background:url("images/top.gif") no-repeat top left;
width:420px;
height:300px;
padding-top:18px;
}

/* IE7+ Use PNG */
.ie7 #box,
.ie8 #box {
background:url("images/top.png") no-repeat top left;
}

/* IE Browsers, #box textarea */
.ie6 #box textarea,
.ie7 #box textarea,
.ie8 #box textarea {
width:400px;
height:300px;
padding:0px 10px;
overflow:auto;
background-color:#FFF;
background:url("images/mid.gif") repeat-y;
text-align:justified;
}

/* IE7+ Use PNG. */
.ie7 #box textarea,
.ie8 #box textarea {
background:url("images/mid.png") repeat-y center center;
}

And that’s just the CSS for IE! You might need something different to get rounded corners with background-images working in Firefox, Safari, Chrome, and Opera.

Rounded Corners using CSS3 border-radius

To the rescue came the CSS3 property, border-radius. Border-radius allowed web developers and designers to easily create rounded corners simply by declaring the “border-radius:” property and specifying a value. *The property to be declared actually depends on your browser, and I will get into that later when I show you the code. Currently, the CSS3 border-radius property is supported by recent versions of major browsers such as Firefox (Gecko), Safari (Webkit), Google Chrome (Webkit), and Opera (Presto). However, Internet Explorer versions 6-8 do not support border-radius. For me, the decision on whether to support IE at all, and if so which versions, depends on the project.

/* styles for all browsers except the IEs, which won't support border radius until IE9 */
#box textarea {
padding:5px;
border:none;
color:#FFF;
width:420px;
min-height:300px;
background-color:#00bfff;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
/* For opera and hopefully other browsers in the future */
border-radius:5px 5px 5px 5px;
}

Using the border-radius property gives us rounded corners in almost all the popular browsers, while requiring less html mark-up and fewer CSS rules. If you need to support Internet Explorer, you can use the border-radius approach in combination with background-images. Working demo here.

Goal

Allow the client to easily specify a Twitter #hash tag when creating a new event. Get those tweets and render them on the events page, beneath the main event details and rsvp form. I found the WordPress TweetBlender plugin to fetch tweets by #hashtag. TweetBlender has a widget function that lets you pass params for the tweets in your WordPress theme code.

Problem 1 – How to store and pass the twitter topic

Typically if I wanted to pass along info such as a twitter hash tag, I would do so using the WP Custom Fields. But “Events Manager” does not use posts as events so this was not an option. I could have hacked the Events Manager plugin and added another field in the database tables, e.g., event_meta_values. But I always try to find a solution other than hacking plugins. I realized I could use the WP Shortcodes API to pass along the info about the twitter hash for each event. E.g.,

 [twitter_hash topic=primary_elections]

I was easily able to extract the info from the shortcode using WordPress’ shortcode API. Next, I wanted to feed this topic into the tweet blender widget function, which outputs a list of tweets based on the twitter hashtag or username you pass it.

Problem 2 – When to output the TweetBlender data

Normally, the value returned by a shortcode handler function is added as a filter to the WordPress function the_content(). But for my purposes, I wanted the tweets to be at the bottom of the page beneath the main event details and rsvp form. So the question was how to hook into the wordpress Actions API in order to render the tweet blender output in an appropriate place on the page. Reading the WP Actions API docs, I found an action called “loop_end“. As the name suggests, the docs stated that any function called at that time would run immediately after the_loop has ended.

Implementation

As is often the case when I code without planning, I went about coding this all the wrong way. Initially I was catching the twitter topic in the shortcode handler function. Then I passed the twitter topic to the TweetBlender Widget function. That function echoes the tweets immediately. And the return value from a shortcode handler function is added to the_content(). So the tweets were showing up in the center of the Events page.

My elaborate attempt to fix this was having the shortcode handler function return FALSE. Then I was capturing the output of TweetBlender using php functions like ob_start(), get_buffer_contents(), and ob_end_clean(). Here is what I ultimately ended up with. Would love some input on if there is an easier way.

function twitter_hash($atts, $content = null){
    global $topic;

    extract(shortcode_atts(array('topic' => '#voting',), $atts));

    return FALSE;
}

if (function_exists('twitter_hash')):

    add_shortcode('twitter_hash', 'twitter_hash');

endif;

function get_tw_data(){

    global $topic;

    if ( !empty($topic) || !empty($GLOBALS['topic']) ):

        if ( function_exists('tweet_blender_widget') ):

            $args = array(
                'unique_div_id' => 'tweetblender-t1',
                'sources' => $topic,
                'refresh_rate' => 60,
                'tweets_num' => 5,
                'view_more_url' => 'http://twitter.com/tweetblender'
                      );
            tweet_blender_widget($args);
            unset($GLOBALS['topic']);
            unset($topic);

        endif;
    else:
        return FALSE;
    endif;

}

if (function_exists('get_tw_data')):

    add_action('loop_end','get_tw_data');

endif;

WordPress gives us the category structure. We can use categories and permalinks to easily organize our posts. This means we can access our posts in the fictional category named “foo” by visiting the following URL:

http://yourdomain.com/category/foo

And if the number of posts in your category exceeds the number of posts allowed per page ( specified in Settings -> Reading ), the URL becomes

http://yourdomain.com/category/foo/page/2
Navigating multiple pages, each with multiple posts
Not all of your posts will fit on a single page if you have many posts in a category and your WordPress settings limit the number of posts per page. If you have ten posts in the press category, and you’re settings are two posts per page, the posts in the press category will be spread over 5 pages. To create the navigation links between pages of posts in a category, we can use posts_nav_link(),  or for more control you can use the individual previous_posts_link() and next_posts_link(). Each of these functions takes options to customize the text of the previous and next buttons, or you can call it with no arguments. e.g.,
<?php
/* File: archive.php */
posts_nav_link();
?>
The default function with no args will produce something like:
« Previous Page        Next Page »
Navigating between single posts
On a page that shows a single post, we can create previous and next buttons to get to the next single post. The previous and next buttons in this case will lead to the user to a full post, not a page with multiple posts. We can create these buttons using previous_post_link() and next_post_link(). e.g.,
<?php
/* Files: single.php, page.php */
previous_post_link('<span class="prev_post_link">%link</span>','Previous: %title',TRUE);
next_post_link('<span class="next_post_link">%link</span>','Next: %title',TRUE);
?>
Would produce:
Next: Post Title of your Post
Paginating a Single Post or Page
Have a really long page or blog post? WordPress also lets you spread a single page or blog post over several pages. The built in function called nextpage will automatically separate your content into pages where ever you place the tag. Nextpage is a WordPress Quicktag, similar to more. Unlike the more quicktag, nextpage is not available by default in WordPress version of TinyMCE. We can easily add a button for “next page” to the WordPress editor by using a plugin. I used NextPage Buttons. To get wordpress to properly display the pages and page numbers on single blog posts or pages, you need to use the wp_link_pages() function inside the loop on page.php or single.php, e.g.,
<?php
/* Files: single.php, page.php */
wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number'));
?>
]]>
			http://professionaldilettante.com/wordpress-built-in-category-and-single-post-navigation/2010.09.15/feed
		0
		
		
		
		http://professionaldilettante.com/mapstraction/2010.09.05
		http://professionaldilettante.com/mapstraction/2010.09.05#comments
		Sun, 05 Sep 2010 14:46:07 +0000
		admin
				
		
		
		

		http://professionaldilettante.com/?p=518
		
			Reading about Mapstraction, a wrapper for the mapping APIs of Google, Yahoo and ten other JavaScript mapping APIs. Looking forward to diving into some example code and posting more soon.

]]>
			http://professionaldilettante.com/mapstraction/2010.09.05/feed
		0
		
		
		
		http://professionaldilettante.com/gravity-forms-wordpress-plugin/2010.09.05
		http://professionaldilettante.com/gravity-forms-wordpress-plugin/2010.09.05#comments
		Sun, 05 Sep 2010 14:43:49 +0000
		admin
				
		
		
		
		

		http://professionaldilettante.com/?p=516
		
			For a WordPress project I’ve been getting my time sucked up by messing with the CForms plugin. Being one of several people who have worked on the project, I did not set up CForms. The Admin UI for CForms on this particular WordPress project is pretty messy. I’ve heard great things about the Gravity Forms plugin for WordPress, so I am giving it a shot.

So far I’m impressed by the ease with which Gravity Forms “just works”. For example, thus far, building a form with a drop down (<select> ) list and associating the <option> tag values with different e-mails has been fairly straightforward. Hopefully I’ll have a few more posts with updates on Gravity Forms’ features soon.
]]>
			http://professionaldilettante.com/gravity-forms-wordpress-plugin/2010.09.05/feed
		0
		
		
		
		http://professionaldilettante.com/adam-duvander-map-scripting-101-no-starch-press/2010.08.30
		http://professionaldilettante.com/adam-duvander-map-scripting-101-no-starch-press/2010.08.30#comments
		Mon, 30 Aug 2010 21:29:06 +0000
		admin
				
		
		
		
		
		
		
		
		
		

		http://professionaldilettante.com/?p=511
		
			Very excited to have a copy of Adam DuVander’s new book on mapscripting: Map Scripting 101. The book was published by No Starch Press, which has also published some of my favorite hands-on programming books, Wicked Cool Ruby Scripts, Wicked Cool PHP, and Ruby By Example.

I stumbled across Adam’s awesome post on geolocation for mobile safari while I was working on my geo blog project, located here: http://dev.zhannes.com/.
]]>
			http://professionaldilettante.com/adam-duvander-map-scripting-101-no-starch-press/2010.08.30/feed
		0