Sunday, September 25, 2011

My Collection of Programming Podcasts

Podcasts are important information resources I have in the past years. I listen and watch for those audio and video podcasts during slices of my time, on the way to and from work, lunch time, weekends, and anytime available for me such rest time during camping.

Basically, I sync my Apple mobile devices at lest once a week through iTunes. Here are the collection of podcasts I have right now:

Audio/Video podcasts:


  • CNET: Buzz Out Loud (Tech news)
  • DailyAppShow (iOS device app reviews, videos)
  • GeekBeatTV (Tech video show)
  • Hanselminutes (.Net tech news/programming)
  • HerdingCode (.Net programming)
  • iPone/iPad/Android App Reviews by CrazyMikesapps (videos)
  • jQuery for Designers - screencasts and turotirals (videos)
  • CNET: Loaded (videos)
  • Mac Geek Gab
  • the Maccast for Mac Geeks by Mac Geeks
  • MacMost Now - Mac and iPhone Tips and Tutorials (videos)
  • MacTalk
  • Macworld podcasts
  • .Net Roks!
  • ScreenCastsOnline Free Version (videos)
  • Tech NightOwl
  • Today in iOS Podcast - The Unofficial iOS, iPhone, iPad and iPod Touch News and iPhone Apps Podcast
  • Typical Mac User Podcast
  • WebBeastTV(HD) (videos)
  • Wired's Garget Lab Video Podcast (videos)
iTunesU:

  • UCDavids University of California: Introduction to iPhone Application Development (fall 2009)
  • Stanford Univierty: Developing Apps for iOS (spring, fall 2010, summer 2009)
  • RWTHAACHEN University: iPhone Application Programming WS 09/10
  • Apple: iPhone Getting Started Videos (08)
  • University of Utah: iPhone Programming Association - Audio
  • Apple Developer Connection: iPhone Tech Talk World Tour (09)
  • Apple: iPhone Tech Talks (07)
  • WWDC 08, 09, 10, 11
Above list is only the one for my programming and tech news information and updates. In addition to that, I also have a wide range of other topics and areas I listen and watch on daily basis, as you can see in my screen snap-shots.

Read More...

Sunday, September 18, 2011

My iOS Development Status

I have not been back to my iOS development since my Beijing vacation back. May be I am just too lazy or too busy with something else as excuse. One of reasons is that I want to do it in Xcode 4.0 and iOS 5. I got my Xcode updated last month. iOS will be released anytime soon either this month or in October.

For sure when iOS is out, I'll be back to my iOS app development schedule. At lease I'll allocation some time a week. First thing I have to update my codes to iOS 5.0. Then I'll finish my app and continue my next project.

The good thing that I have been in touch with iOS and OS technology is that I finished WWDC 2011 videos. Now I find out some more back to WWDC2008 and other videos from iTunes U. I have kept my after work time, some of them, view those training materials. In this way, not only I am refreshed by the new materials, but also I learnt a lot about some of new concept I don't know before.

In addition to above activities, I have been kept writing my notes on WWDC2011 in my Chinese blogs, just a way to review and to share my iOS exploration and experience.

Read More...

Saturday, September 10, 2011

Add Zoom Image Feature to Blogger

Recently Google's BLogger has been redesigned with much more new features. The original openness features are still available. Still I don't like the way in Blogger to resize images in narrow width so that it is hard to see. I understand that exploded image would distract the whole blog layout. Therefore, I have been thinking about adding a feature to zoom images in Blogger.

Last weekend I spent about whole day to find a suitable solution and enhanced it with my updates.  The strategy is based on jQuery and CSS. I found it in a blog in CSS Globe. It is really easy to use. Add a CSS and two script links to Blogger HTML settings first. After that it is ready for use.

For example, to add zoom feature to an image in blog, add class called as "zoom" to the image's parent anchor HTML tag:

<a class="zoom" href="test.png">
  <img src="test2.png" border="0" width="300">
</a>

It works great; however, there is one thing I found not perfect. In case of an image with narrow height, there is a big gap on the top in its zoomed image. I would like to let the zoom image auto-adjust its height: either to the image height to at most the height defined in the CSS.

Here are the steps to add my enhanced zoom feature to Blogger.

Update Blogger HTML Settings

The first thing to do is to update your Blogger HTML settings. It is recommended to backup your HTML settings before any changes.

Step 1. In your Blogger Dashboard, click Template and then Edit HTML

Step 2. Find your blog CSS sections. Those CSS definitions should be ended by

]]></b:skin>

Step 3. Copy and post the following CSS codes into your CSS sections before ]]></b:skin>

/*  following css for zoom effect is copied from
http://www.spiceupyourblog.com/2011/05/amazing-jquery-image-zoom-effect-for.html
*/

#easy_zoom{
  /* default width and height, those settings can be optionally set in
     anchor element attribute: zoomboxwidth and zoomboxheight */
  width:500px;
  height:400px;
  border:5px solid #eee;
  background:#fff;
  color:#333;
  position:fixed;
  top:35px;
  left:50%;
  overflow:hidden;
  -moz-box-shadow:0 0 10px #555;
  -webkit-box-shadow:0 0 10px #555;
  box-shadow:0 0 10px #555;
  /* vertical and horizontal alignment used for preloader text */
  line-height:400px;
  text-align:center;
}

The top and left values are the position of zoom box.  You adjust above top and left values for your blogger template.  The width and height values are default zoom box size.   You may change them according to your needs.

Step 4. Find the following piece of codes in your HTML template:

<head>

This is the end of head tag in your HTML template.

Step 5. Before the head tag, copy the following codes:

<!-- the following scripts for zoom effect are copied from 
http://www.spiceupyourblog.com/2011/05/amazing-jquery-image-zoom-effect-for.html
add class="zoom" in image a tag and it will have zoom effect!
 -->

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://davidchu-javascript-libraries.googlecode.com/files/easyZoom1.1.js' type='text/javascript'/>
<script type='text/javascript'> 
$().ready(function() { 
  $(&#39;a.zoom&#39;).each(function(i) { 
    $(this).easyZoom();
  }); 
}); 
</script>

The above codes add links to jQuery library and my updated EasyZoom library to you blogger. The libraries contains a function easyZoom for any HTML anchor tag with class "zoom" to add mouse hover event, i.e., zoom effect to your images!

Step 6. Save your new HTML template.

You do this (6 steps) only once. Now it is ready for you add zoom feature to your blogs.

Edit Image in a Your Blog

Now you can add zoom effect to your images in your blog posts.  Normally, after your adding images to your posts, Blogger will add some HTML tags for your image.  You should simplify those tags like this:

<a class="zoom" href="test.png">
  <img src="test2.png" width="300" ...>
</a>

The key to enable zoom feature is to add "zoom" class in anchor or a HTML tag. Here ... are any other settings you may want to your image, for example, align to left, center or right, or border. The width attribute value is based on your blog layout, and you may change it for best result.

You only need to update your Blogger HTML once in above 6 steps.  To add zoom feature to your image, all you have to do is to enable HTML edit and to add "zoom" to your anchor tag for the image. Basic knowledge about HTML will be great help, but it is not required.  My recommendation is to learn some basic HTML and you will be able to enhance your blog with great self-satisfaction.

Examples


Here are some examples of images with zoomable feature. The first one is the log of jQuery without customized height. As you can see there is big gap in the zoom box:


<div class="separator" style="clear: both; text-align: center;">
  <a class="zoom"
    href="http://4.bp.blogspot.com/-4C4VY3x-nhA/TmvKvcQpcPI/AAAAAAAAA4c/NYP2tOcHILI/s1600/logo-jquery.jpg"
    target="_BLANK">
    <img src="http://4.bp.blogspot.com/-4C4VY3x-nhA/TmvKvcQpcPI/AAAAAAAAA4c/NYP2tOcHILI/s320/logo-jquery.jpg"
    width="150" />
  </a>
</div>

and again with customized height to remove the gap:


<div class="separator" style="clear: both; text-align: center;">
  <a class="zoom"
    zoomboxheight="143"
    href="http://4.bp.blogspot.com/-4C4VY3x-nhA/TmvKvcQpcPI/AAAAAAAAA4c/NYP2tOcHILI/s1600/logo-jquery.jpg"
    target="_BLANK">
    <img src="http://4.bp.blogspot.com/-4C4VY3x-nhA/TmvKvcQpcPI/AAAAAAAAA4c/NYP2tOcHILI/s320/logo-jquery.jpg"
    width="150" />
  </a>
</div>

John Resig is an application developer at Khan Aademy. He was a JavaScript tool developer for Modizlla Corporation. He is also the creator and lead developer of the jQuery JavaScript library.



jQuery is a crosse-brower JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 46% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.


Advanced Topics


This technique is based on jQuery library. jQuery is a great JavaScript library with a rich APIs to enhance HTML documents. One of great features is that jQuery let developers concentrate on codes without worrying various browsers. It just works.  Another feature is that jQuery is so tiny small. Developers can easily add features based this platform, just like this EasyZoom library.

In addition to jQuery library, you need to add this EasyZoom JavaScript library. I put my updated codes on Google Code Project.  It is an Open Source library. You can take it or modify for your needs. I'll keep my codes there forever, but if you concern its availability, you may move it to your site, your Google Code Project or any other places.

The logic of this zoom feature is based on JavaScript and CSS. JavaScript codes above will be loaded when your blog is opened first time. The codes will find all anchor HTML elements with class "zoom" and pass those elements to JavaScripts. The magic happens in the function call, where mouse hover event, a dynamic zoom box with image referenced in the anchor, and CSS style are created.

Another note about this is that this technique is based on two images in your blog. Blogger normally add them when you update an image. The image element is a smaller size image and it is displayed in your blog. Since the image is smaller, your blog loading process is faster. Anther image Blogger added is an image its parent anchor element, with large size image. It is only be loaded when the image is clicked. This image is used in the zoom box.

I may add additional features to this easy-zoom library. For example, add a caption for the zoomed image. The caption can be easily defined in your blog.

References

Read More...

Saturday, September 03, 2011

SQLPlus Debug and VIM Find/Replace

Yesterday I was asked to help to resolve some issues for a piece of PL/SQL codes, which was provided by our client support. I was working on only error issues, nothing related to its logic. I spent about 2 hours and finally almost got the script running OK (it was too late in the afternoon). Here are two notes about the work.

First, I needed to debug PL/SQL procedure codes. We were using SQL*Plus command console. For SQLPlus command codes; I saw that command prompt is used to print out messages, but I this command does not work in a block of procedure codes. Quickly I found the command which can be used for PL/SQL procedure debug. It is actually a very simple one, and I used this one long time ago. Here is my note on this again:

SET SERVEROUTPUT ON
dbms_sql.output.PUT_LINE('message');
...
SET SERVEROUTPUT OFF

The second note is about using VIM to add the about debug command dbms_sql.output.PUT_LINE in to codes. The reason I wanted to use VIM was that a block of similar codes are in a repeatedly pattern (the following codes are mock and simplified ones):

strDDL := 'create synonum ' || '&username' || '.AUsers for ' || '&newUser' || '.AUsers';
nCID := dbms_sql.open_cursor;
dbms_sql.parse(nCID, strDDL, dbms_sql.v7);
nCount := dbms_sql.execute(nCID);
dbms_sql.close_cursor(nCID);


strDDL := 'create synonum ' || '&username' || '.BUsers for ' || '&newUser' || '.BUsers';
nCID := dbms_sql.open_cursor;
dbms_sql.parse(nCID, strDDL, dbms_sql.v7);
nCount := dbms_sql.execute(nCID);
dbms_sql.close_cursor(nCID);

...

I did not want to manually type in the debug commands after the first one in each block. That's too tedious. I decided to use my gVIM (for Windows), using its power to get my codes just in one Find/Replace command. This can be done by grouping feature in Find/Replace command, since I wanted to use partial codes in the first line. I figured out the following VIM command:

:%s\(strDDL :=\)\(.*\);\n\(.*\n.*\n.*\n.*\)/\1\2;\rdbms_output.PUT_LINE(\2);\r\3/g

Notes on above command:


  • Replace command: %s/find/replace/g where g is for all.
  • In find section, use \(...\) to mark a group. In my above command, there are 3 groups and the 2nd ad 3rd groups will be reused in replacement section.
  • The group name used in replace section is reference by \#, such as \2 and \3.
  • The line break in find section is \n
  • The line break in replace section is \r


This is the result:

Read More...