John Wang » tutorials https://www.johntwang.com Tue, 09 Nov 2010 08:01:33 +0000 en hourly 1 https://wordpress.org/?v=3.0.2 How to change com.yourcompany in Xcode for iPhone Applicationshttps://www.johntwang.com/blog/2009/03/10/how-to-change-comyourcompany-in-xcode-for-iphone-applications/ https://www.johntwang.com/blog/2009/03/10/how-to-change-comyourcompany-in-xcode-for-iphone-applications/#comments Wed, 11 Mar 2009 04:13:58 +0000 john https://www.johntwang.com/?p=598 Having been doing some iPhone App development lately, I’ve run into one of the little issues abound. In order to test your application on an iPhone and also deploy it to the Apple iTunes App Store, you need to properly configure your application’s Bundle Identifier in your Info.plist file. All the books tell you this. And Apple makes it a point to tell you how to do this before you try to deploy on the App Store.

After creating App after App though, it becomes a very tedious task. I’ve searched far and wide online and couldn’t find anything that pointed me to how to change it. I did manage to find information on how to change it for developing Mac Desktop Applications. Didn’t really help my case too much.

In any case, what you’re looking for is in the directory path:
/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Project Templates/Application

In there, you’ll find directories for each type of iPhone Application template that you can create from Xcode.

  • Navigation-Based Application
  • OpenGL ES Application
  • Tab Bar Application
  • Utility Application
  • View-Based Application
  • Window-Based Application

In each directory, there is a file called: Info.plist
Here you can change your default Bundle Identifier by finding the Key String pair.

	<key>CFBundleIdentifier</key>
	<string>com.yourcompany.${PRODUCT_NAME:identifier}</string>

Simply change yourcompany to your new default save. Once you’ve done that. Any new iPhone App you create from Xcode’s iPhone Application templates will be pre-filled with your new identifier.

Much easier than fixing it for each new iPhone App you make. Hope this helps!

Share the Love:Digg del.icio.us Facebook StumbleUpon Design Float Reddit DZone FriendFeed Twitter email Print

]]>
https://www.johntwang.com/blog/2009/03/10/how-to-change-comyourcompany-in-xcode-for-iphone-applications/feed/ 6
How To: Add an external link image via CSShttps://www.johntwang.com/blog/2009/01/30/how-to-add-an-external-link-image-via-css/ https://www.johntwang.com/blog/2009/01/30/how-to-add-an-external-link-image-via-css/#comments Fri, 30 Jan 2009 19:45:49 +0000 john https://www.johntwang.com/?p=517 Pop up links suck. The twitterverse also responded when asked: Should Links Open in a New Window? Twitter Web Designers Voice In. But sometimes you need to use them. Sometimes you are required by your clients to use them. Or sometimes it is best to use them. It would be nice to at least let the person know that clicking on the link will open a new window/tab. Here’s an easy way to add a little image to the external links using CSS.

The CSS

a[rel="external"], a.external {
white-space: nowrap;
padding-right: 15px;
background: url(/images/external.gif) no-repeat 100% 50%;
zoom: 1;
}

The HTML
To use the CSS, you would add the rel="external" to your html link like so:

<a href="https://www.google.com" rel="external" target="_blank">External link</a>

The Result
Here’s what the final result looks like after using the CSS and HTML. (This is an image! Not a real link.)
External Link CSS Example

Do you do this differently? Have a better solution? Please feel free share thoughts, feedback and comments.

Share the Love:Digg del.icio.us Facebook StumbleUpon Design Float Reddit DZone FriendFeed Twitter email Print

]]>
https://www.johntwang.com/blog/2009/01/30/how-to-add-an-external-link-image-via-css/feed/ 14
Disqus Custom Author CSS WordPress Hackhttps://www.johntwang.com/blog/2009/01/21/disqus-custom-author-css-wordpress-hack/ https://www.johntwang.com/blog/2009/01/21/disqus-custom-author-css-wordpress-hack/#comments Wed, 21 Jan 2009 19:03:20 +0000 john https://www.johntwang.com/?p=407 wordpress-disqus
Custom CSS Styling for Post Authors are really nice. It’s a great way to differentiate the author’s comments from other readers’ comments, in addition to threaded comments. The problem with the threaded comments, is that other readers may also write response comments which should be threaded to maintain conversational aspect. So styling helps much more.

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.
Disqus

Download the complete modified plug-in..

Further Reading:

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; }
  • Share the Love:Digg del.icio.us Facebook StumbleUpon Design Float Reddit DZone FriendFeed Twitter email Print

    ]]>
    https://www.johntwang.com/blog/2009/01/21/disqus-custom-author-css-wordpress-hack/feed/ 39
    How to Add DesignBump, Vot.eti.me, and FriendFeed to WordPress plugin Sociablehttps://www.johntwang.com/blog/2009/01/14/how-to-add-designbump-votetime-and-friendfeed-to-wordpress-plugin-sociable/ https://www.johntwang.com/blog/2009/01/14/how-to-add-designbump-votetime-and-friendfeed-to-wordpress-plugin-sociable/#comments Wed, 14 Jan 2009 18:00:34 +0000 john https://www.johntwang.com/?p=330 wplogo-stacked-rgb
    Since I tend to write mostly about web design and development, sometimes people like to “bump” or “vote” for articles. Sociable currently only has the DZone and DesignFloat links by default. So here’s how you can add DesignBump, Vot.eti.me, and FriendFeed links and icons to Sociable.

    DesignBump

    1. Save the icon: design bump 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&amp;amp;title=TITLE',
      ),
    5. Save the file.

    Vot.eti.me

    1. Save the icon: votetime 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&amp;amp;title=TITLE',
      ), 
    5. Save the file.

    FriendFeed

    1. Save the icon: friendfeed 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&amp;amp;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.
    sociable bump and vote
    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

    Share the Love:Digg del.icio.us Facebook StumbleUpon Design Float Reddit DZone FriendFeed Twitter email Print

    ]]>
    https://www.johntwang.com/blog/2009/01/14/how-to-add-designbump-votetime-and-friendfeed-to-wordpress-plugin-sociable/feed/ 4