It’s also available in my dotfiles Github repository.

I imagine these work for Subversion and Mercurial as well. Let me know if I missed anything.

Image from Thoughtbot

Luckily for me, almost all of my apps are a combination of Ruby on Rails3 web apps and iOS apps. This makes it easy to see all of the reports for a bug in one place for both the Rails and iOS errors.

Hopefully Android support is on the way for Hoptoad as well.

So far it’s been pretty to look at. There’s 2 tabs instead of YSlow’s 1 tab. You can also Record Activity and measure page loading speed as well.

The one thing I do not like right now is that Page Speed creates 2 folders in my home directory on the Mac OSX. I’m not sure where the folders go in Windows systems yet. These folders just hold some cached items when you run the Page Speed to analyze performance.

Google’s Page Speed results are a bit different than Yahoo! YSlow. YSlow gives you “grades” and Page Speed just gives you green, red, or yellow signs. It also gives you an explanation of what you can do to make your pages load faster. Page Speed also does not give you the little icon next to Firebug that tells you how long it took to load the initial page. Something I actually like to know even if I’m not performance tuning my own website.

So far, Page Speed is a welcomed addition to the Firebug arsenal. Also check out SitePoint’s CodeBurner Firebug plug-in. It’s a great little reference for HTML and CSS. And Robert Nyman’s FireFinder for Firebug is handy search for Firebug.

What are your thoughts on Google Page Speed? Are you using both Yahoo! YSlow and Google Page Speed?

Introducing Page Speed – Google Code Blog

Kindle vs Print

I used 2 separate books for comparing Print to Kindle formatted books. Jeffrey Zeldman’s Designing with Web Standards and Andy Budd’s CSS Mastery. They are both available on the Kindle Store and in Print format. The Kindle version of the book compared very well to the Print version. The only real difference I noticed was the loss of color pages if the Print version had them. Other than that, reading was very easy and comfortable. Images were the only concern, and Amazon managed to do a pretty good job at having it scale properly. You can change the size of the images that show up throughout the book if you want to see it bigger. The text formatting was interesting, as it’s fixed-width font and center-aligned. So every now and then you may only see 3-4 words per line depending on your font size choice. Overall, I am enjoying the experience so far.

[Show as slideshow]

Print vs PDF Converted

The book used for this comparison is Jason Baird’s The Principles of Beautiful Web Design. The book is published by Sitepoint and available in Print and PDF eBook format. I converted the PDF version of the book using Mobipocket Creator 4.2 Publisher Edition. It’s a free Windows ONLY application. The process is quite simple. Select the PDF, import it, fill out the required metadata, build the PRC file and copy it over to the Kindle via the USB cable. Once that’s done, you can begin reading your book.
Comparing the 2. The converted PDF did have some issues with images and their sizes. Not really all too surprising. The main part where it seemed to have issues, was with text inside of a box. The converted software takes the text out of the text box and creates an image for the text box. As for regular images. It’s mostly random. The screenshot of the Website in the book converted fairly well. However, as you will see in the next section, some images were not resized as expected. It doesn’t cause too much of a problem for reading the actual text though.

[Show as slideshow]

Kindle vs PDF Converted

For this comparison, I chose to use Jeff Croft’s Pro CSS Techniques book. It’s published by Apress and available on the Amazon.com Kindle Store. The Converted PDF actually reads very well. As I said before, the images sometimes tend to have resizing/scaling issues. One thing that the converted PDF does have issues with, is sidebar-type quotes or text. It tends to incorporate them into the book based on it’s location on the page instead of keeping them separate. So, that does take some getting used to. For standard plain text PDF books, it works wonderfully. I have not yet tried sending Amazon a PDF to convert and see if their results match up. I also haven’t tested other means of converting the PDF such as using Stanza. For the Apress books, since every one that I’ve gotten from them are all in grayscale anyways, there isn’t any issue of loss of color. For Sitepoint books though, I can see loss of color as an issue. If there is color-coded code in the books, I can see it become an issue. Since most of the Web Development books I found available are Apress books, I haven’t run into that issue.

[Show as slideshow]

iPhone App

The Kindle iPhone App is freely available on the Apple iTunes App Store. You can only read the books you purchase through the Kindle Store. As of right now, converting PDF files to Kindle format cannot be read on the iPhone. Here are some screenshots of CSS Mastery and Designing with Web Standards on the Kindle iPhone App.

[Show as slideshow]

[Show as slideshow]

A Small sampling of books available in the Kindle Store

• CSS Mastery: Advanced Web Standards Solutions (Kindle Edition) by Andy Budd
• Designing the Obvious (Kindle Edition) by Robert Hoekman
• Communicating Design: Developing Web Site Documentation for Design and Planning (Kindle Edition) by Dan Brow
• Beginning CSS Web Development: From Novice to Professional (Kindle Edition) by Simon Collison
• Beginning Google Maps Applications with PHP and Ajax: From Novice to Professional (Kindle Edition)
  by Michael Purvis (Author), Jeffrey Sambells (Author), Cameron Turner (Author)
• Pro CSS Techniques (Kindle Edition) by Jeff Croft (Author), Ian Lloyd (Author), Dan Rubin (Author)
• Pro JavaScript Techniques (Kindle Edition) by John Resig (Author)
• Bulletproof Ajax (Kindle Edition) by Jeremy Keith
• Designing with Web Standards, Second Edition (Kindle Edition) by Jeffrey Zeldman

Conclusion

Overall, I am enjoying using the Kindle as a reference material for Web Design books and Web Development books. I have converted all of the Sitepoint PDF eBooks that I have bought and also the vast majority of the Apress eBooks as well. Having them all readily available and search-able is really convenient. Also, the note-taking and highlighting capabilities of the Kindle are very easy-to-use and helpful.

[Show as slideshow]

Your Thoughts and Comments?

What do you think of the Kindle as a viable replacement for Print books, Textbooks or reference books?

Flickr photo from kimberlyfaye

Environmentally Friendly thinking can apply to Programming. We’re not talking about your programming environments here. What we are talking about is using the 3 R’s, Reduce, Reuse, and Recycle as part of your Coding Practices. These principles are taught at most schools. At least it was at mine. However, when you start off on your own with no formal education, you can run into some problems. Let’s take a look at these basic principles.

Reduce

Reducing code is fairly simple. Quite frequently used as part of defining “Beautiful Code,” using the least amount of code to accomplish the task at hand. Since that’s the case, it’s also usually the hardest to accomplish. Minimizing processing time and file loading size. You can do even some small things to reduce your coding efforts. Such as using CMS plugins already written instead of writing your own, or even modifying existing plugins to do your bidding. Here’s a very simple C example in reducing lines of code via initialization.

void foo() {
    Complex c;
    c = (Complex)5;
}

void foo_optimized() {
    Complex c = 5;
}

Reuse

How do we reuse code? Very simply, we use functions. Instead of copying the same code in various places, functions allow us to reuse the same code again. Similarly, using a global Debug boolean to turn on/off debugging is another way to save some time. Here is a small piece of code not performing reuse.

unsigned int random_number1;
unsigned int random_number2;
rand_seed = rand_seed * 1103515245 +12345;
random_number1 = (unsigned int)(rand_seed / 65536) % 32768;

And the same performing reuse.

int rand()
{
rand_seed = rand_seed * 1103515245 +12345;
return (unsigned int)(rand_seed / 65536) % 32768;
}
int main() {
random_number1 = rand();
random_number2 = rand();
return 0;
}

Simple and elegant. This also allows us to make changes to the function and having it take effect in all the places the function is called. Whereas, the opposite, would require us to go and make the changes in all of the places we used the same code.

Recycle

Recycling code can be fairly easy. Creating code clips/snippets that you frequently use and having them readily accessible is a great way to recycle code. Panic’s Coda helps you do this via their “Clips” tool. Another way is to create general use codes such as reset.css, typography.css, etc. A sandbox starter theme for your CMS of choice is yet another way to recycle code. Recycling can cut down on the development time you need to do things significantly.

How do you use the 3R’s in your programming practices?

Evernote – a note capturing application that uses a cloud. Your notes everywhere. The desktop application allows you to easily take both full and partial screenshots, text notes, and even some OCR. On the iPhone app, you can take a photo note using the iPhone camera or manually type out some text notes. Everything syncs up to the cloud and is available to you online at any internet accessible computer, your phones or desktop app.

Things – Things is a task management program from CulturedCode. Providing a beautiful and easy to use interface, Things has elements of David Allen’s Getting Things Done, but does not force you to use the system. The Desktop Application has a quick entry form that is easy and simple to fill out. You can have recurring/scheduled tasks, tags, and even sync with your iCal to-dos. The Things iPhone app has a similar interface to the Desktop App, making it easy to use both. Providing sync capabilities with the Desktop App allows you to add/complete/delete your tasks on either platform and have everything sync up. The iPhone App currently does not allow you to add recurring/scheduled tasks, but the folks over at CulturedCode have been working hard at it.

Omnifocus – Omnifocus is another task management application. This one comes from the Omni Group. Omnifocus is a complete Getting Things Done system. This is not just a to do list of any sort. The Desktop Application very flexible and fast. Omnifocus does expect you to use the GTD system. It is a bit harder to get started if you’re not familiar with GTD. Omnifocus is a great application for those using GTD. I’ve found it to be a little bit too involved and require a bit too many steps. The iPhone App for Omnifocus adds Sync supports for tasks, task creation/editing, and organization. One feature that Omnifocus has that Things does not, is Location-Aware. The Omnifocus iPhone App will use the GPS of the iPhone and tell you which tasks you have to complete in the nearby area.

1Password – 1Password is a Password Manager from Agile Web Solutions. 1Password does much more than just Password Management. The Desktop App has integration with Safari, Firefox, Flock, Camino, OmniWeb, DEVONagent, Fluid, and NetNewsWire. It can auto-fill usernames/passwords, Credit Card info and Demographic Info such as addresses. 1Password can also significantly shrink your wallet with their Wallet group where you can save information like credit cards, bank accounts, memberships and reward programs, etc. And of course, this all syncs with the free iPhone App. Although, I haven’t tried this myself, 1Password on the iPhone also has the ability to auto-login from the app if you tap a saved login.

Keynote Remote – Keynote Remote is a remote control app for Apple’s Keynote 09. It does require you to have Keynote 09. Does not work with Keynote 08. The App costs $0.99 on the App Store. The Keynote Remote lets you use your iPhone or iPod touch to control your presentation from anywhere in the room using Wi-Fi. See your slide with notes or both the current slide and the next slide in the palm of your hand. Just swipe to advance.

Apple iTunes Remote – The iTunes Remote App from Apple allows you to control your iTunes/AppleTV/AirTunes library from your iPhone. You can edit playlists, search, and of course play, pause and volume control. It does require iTunes 8.0 and iTunes to be actively running. Also does work with the Windows version of iTunes 8.

Disqus is a wonderful commenting system. I was introduced to it by reading Louis Gray’s blog from FriendFeed. Since using Disqus, I have found it to be a very great network. Disqus provides many features including:

• Threaded comments and comment ratings
• moderation and admin tools
• spam filters

There are tons of WordPress comment hacks to do custom CSS styling for Author’s comments. I have listed some at the bottom of the post. There’s even plug-ins that will style author comments. Unfortunately, Disqus does not offer up any solution to this. And after posting on the Disqus forums, I got no response for this feature. But, Disqus does offer some Custom CSS for comments.

Out of the Box

Disqus actually does give us quite a bit of customization options. We are able to customize:

• The box where a post is typed into
• The form elements (Name, Email, Website).
• The submit button “Post”.
• The main wrapper for the comment system.
• “Add New Comment” and “# Comments” are enclosed in <h3> tags.
• The toggle button for the thread options.
• The links within the thread Options
• The entire comment thread list.
• A single comment in the thread.
• The comment rating arrows for posts.
• The header at the top of comment posts.
• The avatar image for the registered user.
• This is the meta information about the post (time stamp and points).
• The message body of a single comment post.
• The footer contains the link to “reply.”
• This contains and determines the style for the pagination links.

The Problem

As you can see, this is a lot of customizing power. Unfortunately, none of them is related to the blog post’s author.

The Solution: Hack the Planet!

We are going to modify the official Disqus WordPress Plug-in. The files being modified are: comments.php and disqus.php Note: We are also making the assumption that authors will use the same e-mail address to write posts and comments. This is generally true for most users.

Identifying the Post Author

First we need to find the post’s author. We could just hardcode the email address, but this does not help multi-author websites. To find the author’s email address we need to go into diqus.php

Inside disqus.php there is a function called: dsq_comments_template
Here we are going to add a global variable called $author_email and set it to $author_email = get_the_author_email();

Here’s the full function code:

function dsq_comments_template($value) {
global $dsq_response;
global $dsq_sort;
global $dsq_api;
global $post;
global $author_email; // Added by John Wang

if ( ! (is_single() || is_page() || $withcomments) ) {
return;
}

if ( !dsq_can_replace() ) {
return $value;
}

if ( dsq_legacy_mode() ) {
return dirname(__FILE__) . '/comments-legacy.php';
}

$author_email = get_the_author_email(); // Added by John Wang

$permalink = get_permalink();
$title = get_the_title();
$excerpt = get_the_excerpt();

$dsq_sort = get_option('disqus_sort');
if ( is_numeric($_COOKIE['disqus_sort']) ) {
$dsq_sort = $_COOKIE['disqus_sort'];
}
if ( is_numeric($_GET['dsq_sort']) ) {
setcookie('disqus_sort', $_GET['dsq_sort']);
$dsq_sort = $_GET['dsq_sort'];
}

// Call "get_thread" API method.
$dsq_response = $dsq_api->get_thread($post, $permalink, $title, $excerpt);
if( $dsq_response < 0 ) {
return false;
}
// Sync comments with database.
dsq_sync_comments($post, $dsq_response['posts']);

// TODO: If a disqus-comments.php is found in the current template's
// path, use that instead of the default bundled comments.php
//return TEMPLATEPATH . '/disqus-comments.php';

return dirname(__FILE__) . '/comments.php';

}

Identifying the Author’s Comments

Now we know the blog post’s author. Off to comments.php
Inside of comments.php, the first thing we need to do is add $author_email to the list of globals.

<?phpglobal $dsq_response, $dsq_sort,$author_email; // Added author_email variable!
$site_url = get_option('siteurl');
?>

Once that’s done, we need to find the comments and figure out if any of the comments were written by the post author. To do this, we’ll be using the Disqus array $comment['user']['email']. This gives us the current comment’s author’s email address. We’ll be comparing that to our global variable $author_email.  On line 131 of comments.php we add the PHP if condition: if ($comment['user']['email'] == $author_email ).The complete line now looks like this:

<div class="dsq-comment-body <?php if ($comment['user']['email'] == $author_email ) echo ("-author\"")?> ">

The same change can be made for the class dsq-comment-header on line 82, dsq-header-avatar on line 83, and dsq-comment-footer on line 154.

It’s Styling Time!

Styling author’s comments

Here’s the easy part. All you need to do now is add the CSS code to your WordPress Theme for the appropriate classes. For example. This would change the background color for the author’s comment.

/*    Disqus CSS for Author Comments. Margin and Padding is set to be the same as other comments    */
#dsq-content #dsq-comments .dsq-comment-body-author {
	margin-left: 20px;
	padding-top: 5px;
	background: #e2fddc;

The Results

Here’s what an author’s comment would look like now with a reader’s comment.

Download the complete modified plug-in..

Further Reading:

• Weekend Tip: Author Comment Styling In WordPress – NETTUTS
• How-to style WordPress author comments – Derek Punsalan – 5ThirtyOne
• WordPress How-To: Styling Author Comments | Spoonfed Design
• DISQUS | Custom CSS

Do you style your author’s comments? Do you use something other than Disqus? Any feedback?

Update from Disqus.com

• 

Daniel Ha (danielha)

@jwang392 Cool writeup – we also have a special class for authors as .special or .dsq-moderator that you can do this with

Daniel Ha (danielha)

@jwang392 so you can do: .dsq-comment.special .dsq-comment-body { background: #e2fddc; }

Programming Ruby 1.9: The Pragmatic Programmers’ Guide by Dave Thomas, with Chad Fowler and Andy Hunt
Available March 2009
This is the Pickaxe book, named for the tool on the cover. The original PickAxe was the first English-language book on Ruby. Each edition of the book tracks the latest Ruby release, and each is the definitive reference to Ruby. This time we’ve broken with tradition. This isn’t a third edition. It’s technically a separate book. That’s because it reflects all the new features of Ruby 1.9, and we want both it and the second edition (which covers 1.8) to be available at the same time.

Agile Web Development with Rails, Third Edition by Sam Ruby, Dave Thomas, David Heinemeier Hansson
Available March 2009
The Third Edition of the Jolt Award winning book that shows you a new approach to web development, updated for Rails 2. Sam Ruby joins the team to add his world-class knowledge of web application development, making this the most up-to-date and authoritative Rails book out there.

iPhone SDK Development by Bill Dudney, Chris Adamson, and Marcel Molina
Available April 2009
Jump into application development for today’s most remarkable mobile communications platform, the Pragmatic way, with iPhone SDK Development. This Pragmatic guide takes you through the tools and APIs, the same ones Apple uses for its applications, that you can use to create your own software for the iPhone and iPod touch. Packed with useful examples, this book will give you both the big-picture concepts and the everyday “gotcha” details that developers need to make the most of the beauty and power of the iPhone OS platform.

Website Owner’s Manual by Paul Boag of Boagworld.
Available March 2009
Website Owner’s Manual helps you form a vision for your site, guides you through the process of selecting a web design agency, and gives you enough background information to make intelligent decisions throughout the development process. This book provides a jargon-free overview of web design, including accessibility, usability, online marketing, and web development techniques. You’ll gain a practical understanding of the technologies, processes, and ideas that drive a successful site.

Web Design for Developers: A Programmer’s Guide to Design Tools and Techniques by Brian Hogan
Available May 2009
Web Design for Developers will show you how to make your web-based application look professionally designed. We’ll help you learn how to pick the right colors and fonts, avoid costly interface and accessibility mistakes—your application will really come alive. We’ll also walk you through some common Photoshop and CSS techniques and work through a web site redesign, taking a new design from concept all the way to implementation.

What’s on your to read list? Any suggestions for our readers on upcoming books to read?

DesignBump

1. Save the icon: and copy it to sociable/images/directory.
2. Open sociable.php.
3. Find the array called $sociable_known_sites.
4. Copy / paste the code below

    'Design Bump' => Array(
   'favicon' => 'designbump.png',
   'url' => 'https://designbump.com/node/add/drigg?url=PERMALINK&title=TITLE',
   ),

5. Save the file.

Vot.eti.me

1. Save the icon: and copy it to sociable/images/directory.
2. Open sociable.php.
3. Find the array called $sociable_known_sites.
4. Copy / paste the code below:

    'Votetime' => Array(
   'favicon' => 'votetime.gif',
   'url' => 'https://vot.eti.me/login.php?return=/submit.php?url=PERMALINK&title=TITLE',
   ), 

5. Save the file.

FriendFeed

1. Save the icon: and copy it to sociable/images/directory.
2. Open sociable.php.
3. Find the array called $sociable_known_sites.
4. Copy / paste the code below:

    'FriendFeed' => Array(
   'favicon' => 'friendfeed.png',
   'url' => 'https://friendfeed.com/?url=PERMALINK&title=TITLE',
   ), 

5. Save the file and reactivate the plug-in.

Results

This is what the finished version looks like with the 2 services enabled through Sociable Options.

And working version of the icons are used in this website. See below for an example.

Final Thoughts

I have also submitted the code to Joost de Valk,the author of the Sociable Plug-in, in hopes that he adds them for everyone’s use.

Download the complete code here

One of the tips is regarding security measures. These tips come from head of Google’s Webspam team, Matt Cutts. Matt talks about securing your wp-admin directory, creating a wp-content/plugins/index.html, and subscribing to the WordPress development blog.

The one tip I have for securing your WordPress instance is:

Don’t use the admin account

Using the default admin account normally leaves you open to Dictionary attacks depending on your password. Instead, create a very strong password for the admin account and create a separate administrator account of your own. See UX Booth‘s How To Pick Passwords That Protect Your Online Experience. You can also downgrade the authority level of the admin account if you so chose.

I would also recommend regularly using an author or editor account if you don’t need any of the administrative power.

Got any WordPress security tips? Please share them in the comments.