So, now that Flickr removed the pretty link from their source, I have to grab it myself. The shortened URI is base58 encoding based on the ID of the photograph. To make it easier, I wanted to write a quick javascript snippet to do the calculation and spit back the shortened URI.

The Javascript Code

Let’s skip a bunch of chatter and go straight to the meat and potatoes. The javascript is pretty straight forward. I wanted to output the shortened URI to my window if I was looking at a Flickr photograph and if I wasn’t, prompt me for the ID of the photo so I could manually add it. The javascript ended up as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function() {
var m=window.location.href.match(/^https?:\/\/[^/]*\bflickr\.com\/(photos\/[^/]+\/(\d+))/i);
 
if(m.length&&m[2])
  prompt('flic.kr for\n'+m[1]+':','http://flic.kr/p/'+(
    function(num)
    {
        if(typeof num!=='number')
        num=parseInt(num);
        var enc='';
        var alpha='123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ';
        var div=num;
 
        while(num>=58) {
          div=num/58;
          var mod=(num-(58*Math.floor(div)));
          enc=''+alpha.substr(mod,1)+enc;
          num=Math.floor(div);
        }
 
      return(div)?''+alpha.substr(div,1)+enc:enc;
    }
  )
  (m[2]));
}

Next steps

So, now you have this functional piece of javascript and you need it to be as easy as clicking a button. That is where Bookmarklets come into action. Creating a bookmarklet is very simple. Actually, its basically putting javascript: in front of your snippet and calling it through an action as you normally would. In my case, I am just going to make it a href and drag it to my bookmark menu in the browser window. This will allow it to be used in any window within the corresponding browser. Another great aspect of bookmarklets is they can be used in every browser: IE, Opera, Chrome, Firefox, Safari, etc. Javascript doesn’t discriminate behavior.

The bookmarklet, done.

The final step is actually turning the javascript into our bookmarklet:

javascript:void((function(){var m=window.location.href.match(/^https?:\/\/[^/]*\bflickr\.com\/(photos\/[^/]+\/(\d+))/i);if(m.length&&m[2])prompt('flic.kr for\n'+m[1]+':','http://flic.kr/p/'+(function(num)
{if(typeof num!=='number')num=parseInt(num);var enc='';var alpha='123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ';var div=num;while(num>=58){div=num/58;var mod=(num-(58*Math.floor(div)));enc=''+alpha.substr(mod,1)+enc;num=Math.floor(div);}
return(div)?''+alpha.substr(div,1)+enc:enc;})(m[2]));})())

If you would like to use this flickr bookmarklet, please visit the page I have setup for it on my lab Flickr Bookmarklet on lab.justinshattuck.com

During my initial redesign one of the questions I received from my early previewers was, “How did you go about displaying the related-posts that way?” So, I thought I would do more than explain it and just give you a quick template you can use on your own blog. Now, I in know way shape or form guarantee this will work for absolutely everyone. I tested it with WordPress 2.9.2 and YARPP 3.1.4 and it works fine. I’m not including any “simple instructions” to get this rocking.

I’m sorry, but I like to make people work a little to get things going. I’ll give you the ground-work, but you have to exert a little effort yourself.

YARPP Template: The Idea

I wanted to display five related posts including: post title, published date, author’s name, and the categories it was published to. I wanted to display an image associated with each post and have the information associated with each post display on hover.

Designing the Concept

YARPP Template: Bringing it to life

The overall template is pretty simple. A bit of markup to build the segments of information. The only technical part of this piece is passing the category, title, author and pubDate and grabbing them. Another factor is keeping the categories from running off the side of the overlay graphic when you mouseOver.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<div class="related-posts">
	<h3>So, what would you like to read now?</h3>
	<div class="right">Congratulations, you made it to the end of this article! Maybe you'll be interested in some of these related articles.</div>
	<div class="clear"></div>
	<ul id="related-posts-list">
 
		<?php if ($related_query->have_posts()):?>
		<?php while ($related_query->have_posts()) : $related_query->the_post();
 
			$limit_string = 25;					
			$cats = array();
			$categories = '';
			$count = 0;
 
			/**
			Loop through our categories and put them into array
			**/
			foreach (get_the_category() as $category) {
				$cats[] = $category->cat_name;
			}
 
			/**
			We don't want the list of categories to run off the side
			**/
			while ( !empty($cats[$count]) && (strlen($categories.', '.$cats[$count]) <= $limit_string) ) {
				$categories .= $cats[$count];
				$count++;
			}					
		?>
		<li>
			<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rp:description="<?php the_date('m.d.Y'); ?> in <?php echo $categories; ?>" rp:author="<?php the_author(); ?>">
				<img src="<?php echo get_post_meta($post->ID, "image", true); ?>" alt="<?php the_title(); ?>" />
			</a>
		</li>
		<?php endwhile; ?>
	</ul>
</div>
<?php endif; ?>

Of course, none of this would be useful without a bit of styling and JS to make it all come together.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.related-posts { font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; padding: 20px 0px 0px 10px; width: 550px; }
.related-posts h3 { color: #08a2e6; float: left; font-size: 20px; margin: 0; width: 210px; }
.related-posts .right { float: right; font-size: 10px; color: #9d9d9d; margin-top: 8px; width: 230px; }
 
.clear { clear: both; }
 
#related-posts-list { margin: 20px 0 0 5px; padding: 0; }
#related-posts-list li {  float: left; list-style: none; padding-right: 15px; }
#related-posts-list li a img { border: 4px solid #a6a6a6; }
 
#related-posts-hover { background: url('img/overlay.png') no-repeat; color: #9d9d9d; font-family: Verdana, Helvetica, sans-serif; font-size: 10px; height: 83px; letter-spacing: -1px; padding: 30px 8px; position: absolute; width: 215px;   }
#related-posts-hover .title { color: #52bceb; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-size: 13px;  letter-spacing: normal;  }
#related-posts-hover .description { display: block; }
#related-posts-hover .author { display: block; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(document).ready( function() {
	$('#related-posts-list li a').each(function() {
		$(this).attr('rp:title',$(this).attr('title'));
		$(this).removeAttr('title');
	});
	$('#related-posts-list li a').hover( function(e) {
		// hover on
		var title = $(this).attr('rp:title');
		var author = $(this).attr('rp:author');
		var description = $(this).attr('rp:description');
 
		$(this).parent('li').append('<div id="related-posts-hover"><span class="title">'+title+'</span><span class="description">'+description+'</span><span class="author">by '+author+'</span></div>');
		$('#related-posts-hover').css('top',e.pageY);
	}, function(e) {
		$('#related-posts-hover').remove();
	});
	$('#related-posts-list li a').mousemove( function(e) {
		$('#related-posts-hover').css('top',e.pageY+3);
		$('#related-posts-hover').css('left',e.pageX+1);
	});
});

This does utilize jQuery so make sure you are using it. If you have any questions you can direct them to me using the comments on this thread. I cannot guarantee I will get to absolutely every single question, but I will try! When it comes to integrating this into your WordPress blog, make sure you name the file yarpp-template-whatever.php so that the plugin recognizes it. Additionally, you’ll want to put the overlay image, stylesheet, and javascript into the proper directories and include them in your header. That’s all for now!

YARPP Template: What you are really after

Download yarpp_template.zip, which contains the source psd, javascript, stylesheet and template file.
View the Demo to see this bad boy in action, but without WordPress.

Thanks to Jordan Hatch for helping me get this goody ready for you people to eat up. He’s a great asset to Just the Web and definitely someone you should check out on twitter too @1jh.

In an average week at Just the Web we get a dozen or so inquiries from new clients. Additionally, during an average week we bill a massive amount of hours for existing clients. You hear people tell you that keeping a client is cheaper than finding a new one. Even better, existing clients make the best fans!

We are pretty fortunate at Just the Web because we lay down all the ground rules and fundamentals for how we operate before we even tell a customer how much we charge. Granted this is either because I am always excited for how we operate or because I think it is more important for them to know. Either way, it just works for us and we will likely never change it.

If I made an attempt at going after each of our prospective clients each week, I would spend upwards of 40 hours trying to capture them. My process for getting a new client is pretty straight-forward. I evaluate each of the inquiries we receive and find the individuals that best meets our criteria for a well-rounded client.

This criteria ranges from how detailed their initial email to how much information they are willing to divulge on first contact. Personally, I look for a few important elements in an inquiry: a proper invitation to contact them back via telephone, a decent amount of information about what they’re wanting to accomplish (not what they want done*), and if they seem like the type of client who will just annoy me.

Now, it sounds like I have it all worked out and I pretty much do. Overall it is a time consuming process to go through this over and over. So, during 2009 I really ironed out a process and a mindset that allows Just the Web to retain its existing clients and to turn them into fanatical people who always want to share our story.

Who better to tell your story?

Clients who have been through the process with you are perfect for this job. Now, it isn’t really a job. For them, it is their way of giving back and bragging to their other business acquaintances about how awesome of a job you did. Nothing burns more than another business owner saying, “Our web crew got it done,” while most others are complaining about how their agency of choice never returns a phone call.

Clients know you. Let me re-phrase, your clients should know you. They should know what is going on in the shop, who is up to what and that crazy flood that left two inches of water in your office. They need to know when you are sick, when you are well, how you speak and when you are kidding. When your clients cross into this personal zone, you know they are becoming fans. Getting personable with a client is the first -right choice you can make when trying to make them a fan.

Having the right people working together and getting it done is one thing, but having those people get it done while the client is out recruiting new clients is all the better. Make sure you pay attention to more than just what your clients’ checks look like. Be personable and ask them questions. How did they get started? What hurdles did they face? Can you relate to them? Make sure you don’t take control over the conversation. One thing that will annoy a client is you taking control of the conversation to tell them how you new baby boy just crapped his diaper.

Building up a loyal fan base is just as important as building up your brand’s image. Your fans are going to ultimately have a bit of equity in your agency or freelance business. Arm them with the weapons and tools they will need.

Give them printed materials to give out to their friends and colleagues that might want to contact you. This could be as simple as shipping them some business cards and brochures; fliers and cards; or any other assortment of goods. We like to be a bit different and create customized cards and post-cards for our fan-boys and -girls to hand out. “Hey! Rebecca said you were cool, so we might think so too! Call 1-877-HIRE-JTW and let’s get creative.”

The goal is to connect with people. It is more affordable to connect through a silly 3″ x 2″ piece of 383gsm paper than it is to pick-up the telephone and speak to every prospective client you might get. So, think about that one. Stew over it while you’re talking to your associates and come up with a clever way to weed out the worthy clients from the less than admirable ones.

This article is really just a base for what I am going to give out on this topic. Make sure to check back often and see what other tips I give you to be more like me. Kudos!

After pondering about the whole process of making ice-cream, sorbet, sherbets and frozen delicious desserts, I decided to start making my own. I wanted to create some yummy eats that weren’t going to completely kill me. I’m not sure what kind of nonsense those people from Braums Dairy, Blue Bell and Ben & Jerry’s are placing in their tubs, but in my tub I don’t want to load up with Chocolate and Cookie Dough! I wanted to make the basic ice creams and the occasional berry-base sorbet. So, I made the leap and purchased an ice cream maker!

Currently, I am producing a wonderful Cherry Limeade sherbet in the kitchen. It has about ten more minutes before it is finished, but I can’t wait to give it a try! Compared to the store bought products, mine is sitting at about 97 calories per serving versus 250 plus of the competition. Now, I’m not trying to justify and say mine is healthy, but hey it is definitely more healthy than the store purchased products.

Over the weekend, I made up Pistachio Ice Cream, a thick cream-based loveliness with 2 cups or so of fine pistachio nuts. I served it up at a dinner party on Saturday evening and a few individuals who don’t even like pistachios said that it was delicious! I also made an attempt at strawberry, cherry and almond cream. The strawberry was fair at best, the fruit was a little too frozen before I used it and the cherry was well, plain. However, to my surprise and the four people who got to try the Almond-Cream ice cream, two said, “This is the best ice-cream I’ve ever had!” Someone else followed up with a request for what was in it and how I made it.

I do intend on releasing the recipes, but for now I am going to perfect them. Let it be known that I am using raw cream, raw milk and all natural flavors and extracts. I used Almond oil on the almond cream, but it as well is natural.

I’m looking forward to experimenting with my process, recipes and results. Until next time, enjoy!

Numerous crazies thought I was making a killing off the article itself. Just to put it out there, I received no financial compensation, advertising revenue or monies for writing my opinion. In fact, I guess you could say I was out money, considering hosting fees and such. However, I did learn a great deal about search engine optimization for my future articles. The ultimate fact is that Partylite Candle Company Consultants are like crazy members of a cult!

On more than one occasion I sat down in my office and opened up my email to find threats from single mothers. These single mothers of however-many children were upset that I was giving their company a bad name. Fact of that matter is the company itself gave themselves a bad name. I simply wrote about an experience and these ladies just couldn’t handle that I have rights too. Despite the comments being ridiculous, I always let them through. I talked to a few ladies on the telephone, via email and through comment replies.

Cult pejoratively refers to a group whose beliefs or practices could be, reasonably or unreasonably, considered strange. All I can testify to from my experience with the partylite consultants comment on my thread is that they have some crazy beliefs. They are more than strange! I did however get excited to read that so many people in the world do agree with what I am saying and more so those that disagree. I am all for confrontation, so let me re-state my thoughts.

Blyth’s Partylite Candle Company is a complete joke of a business. They are just like the other pyramid schemes and MLM companies who prey on the individuals sense of obligation. There are so many mlm and pyramid companies in our society it is sick. Honestly, I bet there is a pyramid mlm company for just about every niche industry. Need a can opener? Hit up pampered chef and all their crazy women. Need a candle, hit up a non-supportive, ignorant consultant from Partylite that Blyth trusts in. Blyth likely does not care about any more than its financial numbers at the end of the day. If these consultants of theirs can keep them in the black and potential turn a major profit, who’s to tell them to stop, right?

Move forward Partylite, just do not ever expect me to jump on board. I know you could care less if I am on board. But, remember, when people search for Party Lite Candle Company or Partylite Candle Company on google, they get this article. They get my previous article. They ultimately get to see my opinions above all the other subjective opinions saying that Blyth is a great company.

I guess I should begin preparations for the large amount of comments I could receive from this article. Kudos! Tell me how you feel.

I surfed the web and found some solutions saying that I needed to make sure I removed all the leading whitespace lines before and after my <?php ?> throughout my template and WordPress core files. I realized that I have feeds working on a dozen other sites using WordPress without any problems. Therefore, I chalked it up to a boo-boo on my end and I as unable to find it.

The exact error I was having is:

XML Parsing Error: XML or text declaration not at start of entity
Location: http://justinshattuck.com/feed/
Line Number 4, Column 1:<?xml version="1.0" encoding="UTF-8"?>
^

I decided to write up a quick script to munch the information coming out of my feed, parse it, eat the white space and call it quits. So, with a bit of ob_start love I was able to come up with the following script. Please note this will require PHP5 as some of the functions used will not work on any previous version of PHP.


function killwhitespace($stuff) {
$good = false;
/* does our heading have legit content? */
$exist = false;
/* tear it apart and return clear text*/
foreach (headers_list() as $heading) {
if (preg_match("/^content-type:\\s+(text\\/|application\\/((xhtml|atom|rss)\\+xml|xml))/i", $heading)) {
$good = true;
}
if (preg_match("/^content-type:\\s+/i", $heading)) {
$exist = true;
}
}
/* work nom nom nom */
if ($good || !$exist) {
return preg_replace("/\\A\\s*/m", "", $stuff);
} else {
return $stuff;
}
}
/* time to send 'er back */
ob_start("killwhitespace");
?>


Copy and paste that code into a new document named fixwhitespace.php

Getting this bad boy to work is pretty simple. Just goto your root WordPress directory and upload the file. Next, open up index.php and insert include("fixwhitespace.php"); in above the line that says define('WP_USE_THEMES', true);. The final file should look something like this:


include("fixwhitespace.php");
define('WP_USE_THEMES', true);
require('./site/wp-blog-header.php');
?>

Now, the next time you try to visit yourdomainusingwordpress.com/feed/ it should validate, at least if the only problem you were having is the same issue I had, where the white space was being generated from some beast you couldn’t find within your code.

Kudos!

Additionally, I don’t want any bugs on my site. I’ve stumbled across a few and I’ve been informed about a few more. But, I know there are likely to be many more out there that I am unaware of. So, please do us all a favor (you and I), and contact me with any bugs or hiccups you find during your surfing experience. I need to know. They need to be resolved. Come on, tell me!

Next, I need a bit of input. What do you think is too slow or too fast for the slider on the home page? I had it set to 8 seconds and many people complained that it was too long. Then, I set it to five seconds and I had a few people say it wasn’t long enough. My solution might just be to embed a pause/play feature that will allow visitors to stop the rotation and read whatever mumbo-jumbo I have on my images. But, I need to know what you clowns think. So, comment here, send me an email, or whatever means you have to reach out to me. Reach out and let me know!

Most of my friends, colleagues and readership knows I am a bit of a black sheep when it comes to trends on the internet. I critique often and always have honest feedback when it comes to ideas. I’m sometimes a touch too blatant and border-line rude, but I owe no apologies. You don’t know Shat, is entirely true on the play on words. Many don’t know a whole heck of a lot about me and even more so a whole heck of a lot about the web.

You read various websites giving you tips and tricks, but there is not a lot breaking down why these tips or tricks are good and bad. I intend to change that with my new site. Moving forward you can count on me to give you some constructive criticism on all the junk flowing through the internet pipes. I am Justin Shattuck, a mid-twenties entrepreneur and junkie when it comes to the web. The title of this article means just about nothing, I just stole it from Emenim’s song lyrics. But, it sits true with my new brand. YOU DO NOT KNOW SHAT. So let’s fix it, be prepared to learn some shat!

If you have something you would like for me to break down, deconstruct or sort, let me know. I’m all ears and fingers.. typing.. relentlessly..

As a whole, the majority of the public, when asked, believes integrity to be a quality encapsulating a sense of honesty, truthfulness and strict moral ethics. You dig my play on words there? Integrity comes from a latin word meaning, whole! Back on topic. People are hypocrites, heck, I’m sure we all have said or done something that we previous criticized something else for. What really gets under my skin is people sacrificing what is truly necessary to succeed because they’re too afraid of the outcome. Maybe I am not talking about Integrity at all, but more less fear itself.

I discovered that an individual was thinking its better to, “not ask a question you may not want to know the answer to,” and I have believed in this motto for some areas of my life. But, when it comes to clients depending on my brain to work for their well-being.. I feel it is far better to do everything I can to make sure its all correct. The exact circumstances I am thinking of I will keep to myself, but basically I was informed I should not have attempted to figure out a problem by the means I took. Essentially, I acted and asked questions until I reached the top of an organization and found my answers. I think its correct to ask questions, explain details and better serve my clients. But, I guess when I explained this to someone else I know, they felt it was improper as I should have moved forward and played stupid.

So, it seems people are willing to give up their integrity, their wholeness of honesty and truthfulness, their personal values which obviously are not consistent, when they can advance in time or money. Want to save time and get a project completed? Simple, just don’t ask the questions to the proper parties at any cost to determine a solution, which causes horrible back-lash in the end.

My rant is simple. If you’re operating a small business, make sure your integrity is in fact integrity. Your value system, honor code, and ethical values must stand tall against those standing in your way. Use them to your advantage. The fact that someone just told me my integrity is a problem, makes me think that person is a complete jack-ass.

End of rant.