Writing with Markdown for WordPress (on Windows)

I’ve just written a blog post for my DevExpress work blog using only the Markdown syntax. Woohoo! I’m proud of this because it’s been on my todo list.

This wasn’t my first attempt at learning/using Markdown but it was the first post that I wrote using only Markdown. And without using the excellent Windows Live Writer tool.

Ok, I know I’m late to the Markdown party. So what?

Great, wtf is Markdown?

Markdown is a plain text formatting syntax[5] designed so that it can optionally be converted to HTML using a tool by the same name. –Wikipedia

John Gruber first released Markdown in March 2004.

Since then, it’s appeared on popular sites like stackoverflow and Github.

Learning Markdown

The syntax, imho, is very easy to learn. John Gruber’s site has the original documentation on Markdown and I recommend it:

http://daringfireball.net/projects/markdown/syntax

The best way to learn is to start writing using Markdown asap. Below, I list a couple of the tools that I like.

If you prefer to watch a video:

And there’s a plethora of google search results that help you find just about anything. For example, this page shows how to add YouTube links:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Tools

Scribefire can be used directly from your browser to create blog posts. You can write using Markdown. I use the Chrome extension but I’ve also used the Firefox version. Both are great and free.

MarkdownPad 2
This is a desktop application that similar to Sublime Text or Microsoft Word. The main view is split from the Markdown syntax and a preview window on the right. Here’s what I like about it:

• Split View for editing and preview.
• Shortcuts for inserting links. Love the Ctrl-L for links specifically. Yes, I can use autohotkey for it but I just didn’t want to. 🙂
• The editor helps you to learn Markdown because you’re forced to write in Markdown. It also helps to learn because of the built-in shortcuts.
• There’s a free and pro version. Free version works great. But support your local dev and buy a license.

It does not support publishing to a blog engine. At least, not the free version. So what, it’s still awesome.

The only odd thing I’ve found is that cut/paste has an odd pause for some weird reason.

What about images?

The one big thing I do miss from Windows Live Writer (WLW) is it’s ability to insert, upload, and manipulate images. And I’m sure I’ll likely use WLW again for those image heavy posts.

For now, I have to manually upload an image and then link to it.

Plaintext snob?

My friend Drew had this to share about my Markdown adventure:

Thanks Julian, for the nudge to get me to write on my personal blog again.

How I used Yahoo Pipes to filter CodeRush videos

Alex Skorkin from the DevExpress CodeRush team is on a mission to bring you all sorts of interesting news about CodeRush. And he’s working on bringing you a new CodeRush Facebook page.

Since I created and now help maintain the DevExpress Facebook page, he asked me how we could add a feed for CodeRush only videos from the DevExpress YouTube channel.

Now the best approach is if I could just add a query parameter to this YouTube RSS feed:

http://gdata.youtube.com/feeds/base/users/DeveloperExpress/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile

 

Sadly I could not add the query parameter. Either that or I don’t know the specific parameter for it.

So to solve this problem quickly, I decided to take a look at Yahoo Pipes which allows you to "aggregate, manipulate and mashup content from around the web".

Since Yahoo Pipes has been around since 2007, there are a ton of existing pipes which you can either use or copy and modify to suit your needs.

After a little searching, I found this "YouTube filter user’s video by title" pipe which allows me to send 2 parameters:

1. YouTube User
2. What do you want to keep? (Keyword to search title, description, etc.)

 

So after a quick clone to make a custom tweak, I had the optimal RSS feed that only grabbed CodeRush videos from the DevExpress YouTube channel.

Yahoo pipes is simple, fun and powerful.

What about IFTTT?

There’s a new service called "If this then that" (IFTTT.com). Unfortunately, I’m not that familiar with it but if you know how to do something similar with IFTTT.com then please leave a comment below, thanks.

Windows Hand Cursor: How to show a pointing finger for mobile demos

Wouldn’t it be cool to turn the Windows cursor into realistic finger for touch software demos and general fun?

That’s what I thought to myself while I was preparing for my latest webinar presentation. I’m not sure if I dreamed the idea or I saw someone do it on a Mac but I thought it would make the demo more interesting if I could pull it off.

CursorAttention to the rescue

Luckily, there is a great piece of free and open-source .NET software called PenAttention.

PenAttention is a free Windows program that displays a highlight, pencil, or pointer at the location of the pen. It’s intended for use in presentations on a Tablet PC so your audience can see what you’re pointing at on the screen, since most programs show the pen’s location with an eensy-weenie-teenie-tiny dot that is almost impossible to see on a projector screen. For a demo, see the overview video.

However, since Tablet PC are no longer the norm, you likely want to get CursorAttention:

The sister program, CursorAttention, is designed to run on Windows machines that are not Tablet PC’s. This may be useful if you wish to highlight the mouse location or use a non-active digitizer (e.g. an external tablet).

CursorAttention is not exactly like PhoneFinger because it was created for a different purpose. However, by adding one file, we can get the same functionality as PhoneFinger to demo mobile apps on a Microsoft Windows machine.

Steps

1. Download CursorAttention and install it.
2. In the CursorAttention install folder, add a file called CustomPen.png.
   1. The folder on a Windows 7 machine is typically located here:
      C:\Program Files (x86)\CursorAttention
   2. What is CustomPen.png? This is a custom image that is attached to the mouse cursor. In our case, we’ll want a PNG image of a hand with a pointing finger.
   3. I took a diagonal picture of my own hand:
      
      It didn’t actually look like that. The picture above is the final product after my friend Drew used his mad Photoshop skillz to create a transparent background and clean up the image.
   4. I simply took that image above and dropped it into the CursorAttention folder and renamed the image CustomPen.png.
3. That’s it. Now, run CursorAttention.
   1. Right click on the system tray menu.
   2. Select ‘Show Pencil’ and enjoy

      

Of course, the CustomPen.png image can be anything, a lolcat or bunny but it makes sense to use a hand for mobile device demos. In fact, I used this technique in a recent webinar to show the slick DevExpress ASP.NET solution to developing apps for the iPad.  Watch the webinar video below:

Mehul Harry DevExpress ASP.NET iPad Apps Webinar

 

I had a lot of fun using CursorAttention and found that the hand cursor really helped the viewers to better visualize iPad touch apps when demoed from Microsoft Windows.

Level Up

The CursorAttention solution with a custom hand image works really well except for one small problem:

At the tip of the finger, it kept the native Windows cursor too which ended up overlapping on top of the finger.

Here’s an easy workaround, use these free “Small Dot” cursors. They are small enough not to overlap. Simply download and install them. Unfortunately, you have to manually set each cursor in windows. However, once that is done, you have a tiny dot that is hardly noticeable with the main finger cursor.

Try this solution the next time you have demo mobile app on Windows and would like to use a hand/finger cursor. Then leave me a comment below with your thoughts. Thanks.

iPhone Slow To Respond When Playing A Song?

My iPhone 4 has this annoying issue when playing a song. It freezes and locks up the iPhone while the song continues to play. The iPhone would not respond to ANY of the buttons for a good 30 seconds or so.

With the help a good friend, we investigated the issue and found something very unusual. (Btw, when I say we, he did 99% of the work).

Mashups, FTW!

First, let’s take a look at the specific songs and album. It’s a great mashup  album from the one-man band called Girl Talk.

Check out this great website that gives you a visualization of the many tracks that are used in the mashups. And, you can listen online too:

You can download it for free here (click on the image):

Album Art – The Culprit

Turns out the problem is not the mp3 but the album art that somehow got embedded in it. A few of the tracks had a JPEG album art file with embedded information from the original TIFF file. That’s not so much the problem. The problem was that the image size was 3744×3744. The image was taken with a Canon EOS 5D Mark II and the TIFF was created from Adobe Photoshop CS4 Mac.

How did we find all this info?

1. Using a different MP3 player (MediaMonkey) loaded the mp3s and viewed their properties.
2. Then saved the artwork to hard drive.
3. Viewed that artwork in an image viewer.

The Fix

Fix, is very simple.

Remove all embedded images in the mp3. Then, add a new image, with a smaller size.

I’m not sure whether the original mp3s had the large image issue or perhaps I accidentally added the large album art myself.

Lesson here, check your mp3s if your iPhone is slow to respond when playing certain songs.

Google Photos Screensaver on Windows 7 x64

I really like the Google Photos Screensaver because of it’s excellent visual effects options like the “Ken Burns effect” aka “Pan and Zoom“:

And it works great on dual monitors too by showing different pictures on both. As you can see from the settings image above, it can load images from the web, rss, or your local machine.

Oh and it’s free! Get the screensaver by installing Picasa, Google’s awesome photo manager: http://picasa.google.com/ (The Google Photos screensaver used to be part of the now defunct “Google Pack”.)

Unfortunately, the Google Photos screensaver has an annoying issue if you run it on a Windows 7 64 bit machine. It will cause screen flickering and not show any of the images you asked for!

Why? Because of the “On resume, display logon screen” option:

The solution is to uncheck that the “On resume…” box. This sucks if you like to have your machine auto-locked when the screensaver kicks in. Not a big deal for me since I’m used to using the “Window+L” keys to lock my machine.

Sadly, Google has known about this bug for almost 3 year now and it’s still not fixed. Since they’ve started focusing more on their profitable products (right move, imho), it’s unlikely that we’ll see bugs like this get fixed. Oh well. Google Photos Screensaver is still fantastic. Better than the Windows Live Photo Gallery screensaver, imho.

How To Resize A VirtualBox VM In 3 Easy Steps

VirtualBox does not make resizing a VM easy. Luckily, I’ve collected the 3 necessary steps that you’ll need to resize your VDI files:

Step 1 – Create a New and Bigger VDI file

Use the VirtualBox ‘Virtual Media Manager’ GUI to create a new VDI file that is larger in size.

Step 2 – Use the ‘VBoxManage CloneHD’ Command

This command will copy the original to the New and larger VDI. Open a command window and call this command from the VirtualBox directory. Be sure you properly reference the correct files, for example, here the command I used:

C:\Program Files\Oracle\VirtualBox>vboxmanage clonehd –existing E:\virtualboxORIGINAL.vdi C:\Users\Mehul\.VirtualBoxHardDisksNEW_BIGGER.vdi

Sun VirtualBox Command Line Management Interface Version 3.1.8

(C) 2005-2010 Sun Microsystems, Inc. All rights reserved.

0%…10%…20%…30%…40%…50%…60%…70%…80%…90%…100%

Clone hard disk created in format ‘VDI’. UUID: 7099c645-15c2-4656-bf90-27a444444444444

Step 2 (optional) – Call ‘setvdiuuid’ in case of an issue

Try to start your VM now that points to the NEW_BIGGER.vdi file. If you get an unusual error like this one:

Cannot register the hard disk ‘PATH’ with UUID {id goes here} because a hard disk ‘PATH2’ with UUID {same id goes here} already exists in the media registry (‘PATH to XML file’).

Then use the following command on your NEW_BIGGER.vdi:

C:\Users\Mehul\.VirtualBoxHardDisks>”C:\Program Files\Sun\VirtualBoxVBoxManage.exe”
internalcommands setvdiuuid MHDXDT1_Laptop.vdi

Sun VirtualBox Command Line Management Interface Version 3.1.8
(C) 2005-2010 Sun Microsystems, Inc. All rights reserved.

UUID changed to: d4c86bf9-3739-4894-9fee-0ec8342432a

Take note that I ran that command from the directory location of the NEW_BIGGER.vdi file. For a good explanation of this command, check out this post.

Step 3 – Resize the local drive in the VM

Your NEW_BIGGER.vdi is larger than before. However, as a final step, you need to increase the local drive in the VM. Windows 7 makes it easy with the disk management.

• From control panel, bring up ‘Disk Management’.
• Right click on your local C: drive (Disk 0 usually)
• Select ‘Extend Volume’

The process is pretty easy to figure out. If you need more info and images then check out this post for a more detail.

And that’s it! You’re done. You now have a bigger drive.

Easy, wasn’t it?

Thanks to this post for majority of the initial guidance.

AutoHotKey – Easily Create An HTML Link

I’m huge fan of AutoHotKey which saves me a ton of time in not having to type repetitive keystrokes. Basically, it helps me be a better keyboard ninja.

Often for blog posts, I need to encapsulate a link with a HTML anchor tag. So that http://Mehul.net becomes http://Mehul.net

So I’ve hacked up the following AutoHotKey script which allows you to highlight a link and press Control+Shift+L and it automagically converts into an HTML anchor tag.

Copy this script into a autohotkey script. Load the script. Select an HTML link and press Control+Shift+L.

;————————————————————-
; Create A Link — Ctrl+Shift+L
;————————————————————-

^+l::
{
Send, ^c
Sleep 50
var=% “” . clipboard . “”
clipboard=% var
Send, ^v
Return
}

To learn more about AutoHotKey, check out these LifeHacker posts:

Turn Any Action into a Keyboard Shortcut

Hack Attack: Knock down repetitive email with AutoHotKey

Improve iPhone Safari Readability

I like to catch up on my blog reading using my iPhone. However, many sites don’t have a mobile version that formats the page for a smaller device.

Instatpaper to the resuce!

Instapaper.com is known for allowing you to bookmark a web page and ‘Read It Later’ using either their website or iPhone app. What’s also great is they format the bookmarked web page so that it is readable on mobile devices. They also offer their ‘mobilizer engine’ to use as a separate service:

If you go to this site on your mobile browser: http://instapaper.com/m 

Then Enter a url of blog you like to read: For example: http://community.devexpress.com/blogs/aspnet/default.aspx

Hit Go and watch as all the formatting is removed and you see big text that only scrolls vertically. Beautiful and perfect for mobile browsers.

I’ve taken it a step further by creating a bookmarklet that will automatically call the ‘Instapaper mobilizer’ site for you when you’re reading a blog on your mobile browser. Here’s the steps to add it to an iPhone:

1. From Safari, add a new bookmark and call it something like ‘Instapaper Mobilizer’.
2. Edit the Bookmark you just added.
3. javascript:var d=document,w=window,f=’http://www.instapaper.com/m’,l=d.location,e=encodeURIComponent,p=’?u=’+e(l.href),u=f+p;if(!w.open(u,’t’,’toolbar=0,resizable=0,status=1,width=250,height=150′))l.href=u;   Replace the url with the JavaScript code in this box.
4. Now, while reading a blog, open the bookmark you just added.

And that’s it. Enjoy.

RoboForm is very good

I remember the first time I heard of this tool was many years ago when I was still skeptical of browser plugins. Especially ones that kept my passwords. So I’ve used password safe for many years now. But there is no browser integration which makes things a headache to open pwsafe and manually enter those details. This is where RoboForm shines. It does a great job to manage my passwords and also to show me only those that pertain to the website. For example, I have several gmail accounts and RoboForm shows me only these when I’m on the gmail login page. Brilliant. Then I select the account I want to login with and presto, I’m logged in.

So, I recommend you give RoboForm a try. I don’t have any qualms about its integration or password storing as its been around a while and gotten many other good reviews as well.

The only issue I have is that in IE8 Beta, the popup doesn’t work. However, it works great in Firefox and this is probably an IE8 beta issue.

Sync your Facebook contacts with Outlook & Windows Mobile

Just tried this and the outlook integration is pretty cool. I don’t have a windows mobile phone but I’ll try to see if it works with the Treo. In my case the app did crash but it does work in importing the pics to outlook. Check out the demo from the developer here:

Sync your Facebook contacts with Outlook (and Windows Mobile)