IOS Safari Bookmark Icon for Blogger

Not sure why but once I started sharing idea on Blogger, I also love to browse around Blogger to see other people Blog and idea. Most of the time, I will do that at night time on my IPad and I really like the experience on IPad. I can tell the default settings for Blogger is really nice on IPad. Sometime, I run into some Blogs which are really good and I will bookmark it and save it on the IPad homepage. However, the bookmark icon on the IPad doesn't look good.

When I was playing around the Dashcode, I remembered there is a link reference which you can add to the HTML so that when people try to add the bookmark to the homepage, it will give them a nice icon. Actually, this setting works with Blogger.

Before we change the setting in Blogger, we need to prepare a nice icon PNG file. I'm not really good with Photoshop so I ended up just "google" around and download a nice PNG file. (Actually, I went to iconspedia and download from there.)

Once you have the nice icon, upload it on your host server and you are ready to edit the Blogger template. Log into your Blogger -> Go to Design -> Edit HTML, and you should see the HTML editor. Add the following line just below <header>.

<!-- Add the following code below Header -->
<link href='http://yourhostserver/youricon.png' rel='apple-touch-icon'/>
<!-- End Comment -->

Once you finish editing the template, save it and preview it.

When other people browsing your blog, this addition reference doesn't add or remove anything functionality. However, if the person is browsing your blog on IOS device and try to add bookmark to the home screen, it will use your icon instead of use the screenshot.

I have updated my blog to include a nice icon and you can try it if you have any IOS device.

(ScreenShot)

Syntax Highlighter for Blogger

When I decided to put some source on Blogger, I was always thinking how other people are able to put their source code on their blog with some great highlighter. After I did some research, I found out most people are using a Javascript called "Syntax Hightlighter". The tool is really good and works great with Blogger. I know there are few other people already did post the instruction on other blog but I still want to share what I have done on Blogger and what it looks like if it works.

First, you need to download the zip file from the official site of "Syntax Hightligher" (Click HERE to download it. The version I have is 3.0.83). Extract it and host the files somewhere so that blogger can access it. Before we continue to configure Blogger, it is great to test the Javascript from your host server. The package comes with a great test file called "index.html". If nothing go wrong, you should able to see something like following when you try to access it:

Now, we need to edit the template to include the Javascript. Log into your Blogger and we need to design your template by the HTML Editor. Once you are in HTML Editor, find the line "</header>" and paste the following lines above it:

<link href='http://yourhostserver/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://yourhostserver/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://yourhostserver/scripts/shCore.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://yourhostserver/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://yourhostserver/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

After you finish editing the template, don't forgot get to save the template and try to preview it before you post any new blog. The official website has a lot of documents to help you understand on how to use it and I personally like to use it with "<pre>" tag. In order to use it, you need to edit your blog in HTML and put the "<pre>" tag into your blog.

For example, putting the following code into your blog:

<pre class="brush: c-sharp;"> 
/* Comments*/
// Hello1.cs
public class Hello1
{
   public static void Main()
   {
      System.Console.WriteLine("Hello, World!");
   }
}
</pre> 

it results as:

 
/* Comments*/
// Hello1.cs
public class Hello1
{
   public static void Main()
   {
      System.Console.WriteLine("Hello, World!");
   }
}

There is one more thing I would like to share with others is the "Brush aliases". Here is a list of what I feel like most people will use:

Brush	Brush aliases
ActionScript3	actionscript3
C#	csharp
JavaScript	js
SQL	sql
XML	xml

Dashcode: RSS Reader for IPhone

My wife bought me a Macbook 3 yrs ago. Since that time, I was putting a lot of my personal time with the Mac OSX, XCode, Dashcode, and iLife tools. Currently, I just bought her a new iMac with i3 CPU and she loves it a lot and start using iWeb (From the iLife) for blog.

Try to following her blog on my IPhone 4 is a easy task. For some reasons, she picked a template with a lot of pictures and it took a long time to load on my IPhone 4 through the 3G network. (If anyone wants to take a look her blog, you can click HERE to give it a try. Beware this is a chinese web site.)

Currently, I just noticed the blog template from iWeb has RSS feed to return the lastest 5 blogs and I was thinking, hmmm, I can have some RSS reader on my IPhone 4 to review the documents.

Before we continue on the RSS reader, let us take a look the RSS feed. The RSS feed returns a single XML contains all the information we need for our reader. (Again, if you want to see what is that XML looks like, you can click HERE and take a look. Same as last time, it is coming from my wife's blog site and it contains chinese characters)

Beside buying a RSS reader through App Store, I remember Dashcode has a RSS reader template as well. Because I wanted to go cheap so I ended up to use Dashcode to generate the RSS reader.

Surprisingly, it is really a easy task. Assume you have XCode and Dashcode installed on your Mac, open Dahscode and select "Safari" -> "RSS" with "Mobile Safari" option only:

Click "Choose" to open a new project. Once it opens the new project, you should see something like the following:

The nice thing about this template is that it has most of the functionality already built into it. We don't have to do much if we are happy with the out-of-the-box functionality. In order to make this RSS reader works, there is 1 mandatory thing to do which is telling the RSS reader where to get the XML (which means we need to provide the URL address of the XML).

Now goto the "Application Attributes", you can put the URL address into "Feed URL" and test the RSS Reader on the IPhone Simulator. If nothing goes wrong, the RSS Reader should work without any issue and return the list of blog titles.

There is a minor problem with this approach. The final solution cannot be deployed on any web server and it has to be deployed on the web server where it hosts the blog. (In order word, the domain has to be the same for the RSS Feed and the Web App) Assume your blog is hosted on a domain "www.mydomain.com" and the RSS Feed URL is "www.mydomain.com/blogtitle/blog/rss.xml", the final solution must be also hosted on "www.mydomain.com" domain as well in order to make it work properly.

If you want to try my RSS Reader, you can click HERE to give it a try. (This is the third time to remind you that the RSS Reader contains chinese characters!)

SharePoint 2010 - custom web part not show on the list.

Today, my workmate asked me a question:

Q: "I created a new custom web part on my PC by using Visual Studio 2010. I putted the WSP and all other files on the SharePoint 2010 server. I added and installed my new custom web part successfully but I can't find my custom web part from the web part gallery. What did I do wrong?"

After I heard about that, I was thinking the same thing, what was wrong on the server?

Before we troubleshoot the issue, let us review how to add and install a custom web part on the server.

Assume you have a custom web part called "HeloWorld" built by Visual Studio 2010 and it does thing like this:



In order to add and install the custom web part to the SharePoint server, I usually save the WSP file and all other files from the source directory and copy them to the SharePoint server. Once it is done, we can use the tool SharePoint 2010 Management Shell and run the SPSolution commands to add and install the custom web part.

The command to add the custom web part is:

Add-SPSolution C:\WSP_FILE_PATH\HeloWorld.wsp

The command to install the custom web part is:

Install-SPSolution –Identity HeloWorld.wsp –WebApplication http://localhost -GACDeployment

If everything goes well, run a command SPSolution and it should return a list like the following:

By looking at the list, everyone assume the custom web part should be installed properly and it should shows up under the Web Part Gallery or under the Document Editor

However, this is not the case and this is why my workmate came to me with his question. After I played around on the server, I found out even the custom web part is installed properly, I need to go to the Library Tools -> Library -> New Document -> select the new custom web part from the pop-up window and click the Populate Gallery button. By doing so, the new custom web part shows up on the previous list and from now on it should be selectable from the Document Editor.