It turns out that virtually none of the LG phones are supported in iSync. So I ended up using an application called BitPim to pull the contacts, then I imported them into my Mac’s address book. When I plugged the iPhone into the laptop, they all were magically synced. Cool.

So the more detailed steps are as follows:

• Download BitPim and drag it into the application folder.
• Turn on laptop bluetooth (strange icon on apple bar next to the wireless icon).
• On the VX8350, go to Menu -> Settings & Tools -> Bluetooth Menu and turn on the bluetooth
• Go through steps on laptop and phone to get the two connected.
• Open BitPim; have the phone auto-recognized.
• Click the Cellphone-with-arrow-to-the-right icon in BitPim to load the phone’s phonebook data.
• Wait
• Eat some oatmeal
• Wait
• Select the contact names I want to keep and click the File -> Export -> vCards… menu item.
• In the save dialog, I selected ‘Apple’ in the ‘dialect’ list box and saved my new vcard with LG contacts
• Ate more oatmeal
• Open Address Book application and import my new vCard
• Plugged in iPhone

I hope this helps someone avoid entering them by hand.

I’ve recently come up with a simple way to make a decent looking, css colorable progress bar/meter out of a couple divs and an image. This is what mine looks like:

Basically, you have three divs: a container for the grey, non ‘populated’ section, a div for the colored value, and a div for the text. Both the container and the value div have your image as a background. This image uses mad awesome png transparency to show some of the div’s background color through.

HTML

The HTML is simple:

<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 40%;">
        <div class="meter-text">
            Text Here!
        </div>
    </div>
</div>

Notice the style attribute in the .meter-value div. The background color is the color of the progress bar, and the width is set to the percentage of progress. Easy peasy.

CSS

Oh yes, in all of its glory:

.meter-wrap{
    position: relative;
}

.meter-wrap, .meter-value, .meter-text {
    /* The width and height of your image */
    width: 155px; height: 30px;
}

.meter-wrap, .meter-value {
    background: #bdbdbd url(/path/to/your-image.png) top left no-repeat;
}
            
.meter-text {
    position: absolute;
    top:0; left:0;

    padding-top: 5px;
                
    color: #fff;
    text-align: center;
    width: 100%;
}

The Image

Here is my image. I’ve placed it on a colored background so you can see the corners. It simply has completely opaque white corners, and uses a gradient for the center that goes from transparent white to completely transparent. An image like this is very easy to construct in a vector drawing application such as Inkscape .

Examples with JavaScript!

Now, so you can see what it can do, I’ve put together a couple of super rad jQuery examples.

Click the bar below to see the it go from 0% to 100%! Coooooool!

Or maybe this one that runs through a range of colors.

Here he is approving of my choice to develop in FireFox.

And here he is wading through the 2 feet of snow we got in less than 24 hours in December.

Poor kitty. He made it to about a year.

There are textile to HTML converter libraries for just about every language including C#. Much to my disappointment, however, there seems to be no C#/.net library going the other way: html-2-textile. I was able to find libraries in various states for other languages such as ruby, python, and php, but no love from the .netters. After I found SGMLReader, I decided to write my own.

What I ended up with will hopefully serve as a framework for those six people who need this functionality in the .net world. I say framework because HTML2Markup is built with extension in mind. By writing a new class defining your markup language (markdown, wiki syntax, etc) and plugging it in to HTML2Markup, you can make this library work for your markup language of choice.

HTML2Markup Textile Conversion Features

• Handles i, em, b, strong, s, del, strike, sub, sup, cite, code, h#, p, blockquote, a, img, and br tags.
• Handles lists including nested lists
• Handles tables
• Handles style attributes
• Ignores style attributes like float, position, attributes with expression, etc.
• Ignores all tags it doesn’t recognize which is nice for sanitization
• Gets the newlines right producing very elegant, readable textile. Yeah!

Ok, so how do you use it? It is pretty simple. To use our textile definition:

using HTML2Markup;

void SomeFunct(string html)
{
    string textile = MarkupConverter.HTML2Textile(html);
}

Or using the object:

using HTML2Markup;

void SomeFunct(string html)
{
    Parser p = new TextileParser();
    string textile = p.HTML2Markup(html);
}

Extending HTML2Markup

You can use HTML2Markup for any HTML-to-something-else conversion. For this post, I will just tell you to checkout the TextileParser.cs file and mod as necessary. If there is a little interest, I will write a more in-depth post on extending HTML2Markup.

HTML2Markup is under the MIT license.

Download

The project is on GitHub: http://github.com/benogle/html2markup. It contains three Visual Studio 2008 projects: HTML2Markup, HTML2Markup.Test, and SGMLReader 1.8.2.
You will need NUnit to run the tests.

Form there, you can download just the binaries if you’d like.

Round corners. Something that should be easy, right? Not so much. It seems they were left out of the CSS (less than 3) specification. No matter, there are a couple of ways to hack them out and make them look good. Basically there are two techniques: layering a few empty tags, and using images. There are some ways to do it with javascript as well, but I wont cover them because javascript is unnecessary. The layering technique is the most concise and clean, IMO, so that’s what this post will focus on.

Err… No images? No javascript?

The line-layering technique uses no images and no javascript, only display: block bold tags layered on top of each other. We simply create lines with decreasing side margins, stick them on top of each other and we have a well-emulated round corner. First I’ll show, then explain.

And the code

.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
    <div class="contentf">
        <div>Round FILL!!</div>
    </div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>

You notice that there are four b#f definitions. Each one represents a single 1px tall line. Element b1f is shorter than all the other lines, b2f is a little longer, b3f is longer still, and b4f is almost the size of the main content element. This is easy to see if we change the color of each line.

.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#F00; margin:0 5px;}
.b2f {height:1px; background:#0F0; margin:0 3px;}
.b3f {height:1px; background:#00F; margin:0 2px;}
.b4f {height:2px; background:#F0F; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

Now that we have the basics down, this technique is easy to extend. Maybe you want a block with a border. Thats pretty easy too. We just add 1 pixel side borders to the b2f, b3f, b4f, and content definitions.

.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888; margin:0 5px;}
.b2 {height:1px; background:#ddd; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
.b3 {height:1px; background:#ddd; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
.b4 {height:2px; background:#ddd; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
.contentb {background: #ddd; border-right:1px solid #888; border-left:1px solid #888;}
.contentb div {margin-left: 5px;}

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="contentb">
        <div>Round Border!!</div>
    </div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

Can we go further? I think so. It could be that you want a box with a special color for the header. Well, it turns out thats not very difficult, either.

.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}

<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
    <div class="headh">
        <h3>Here is your Header!</h3>
    </div>
    <div class="contenth">
        <div>Look ma, no images!</div>
    </div>
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>

There are some drawbacks to this technique, however. If you want a box with big radii on the corners, you will be creating a lot of bold elements for each box. As the radius gets bigger, it also becomes harder to figure out the margin for each line. Another drawback is the ’sharpness’ of the corners. Images will produce smoother, anti-aliased corners. If the corner radius is small, its hardly noticeable, though.

Images

Images are the more versatile alternative. They are a bit more difficult to use and are much more clunky code-wise unless your boxes are a fixed size. The general approach for variable size boxes using my favorite technique, the thrashbox, is about as follows: make an over-sized image of the complete box, anchor one corner of the image, then overlay the other three corners in their respective places.

No sense in explaining it in depth as its been hashed out many times. I will, however, point you to the most awesome site regarding the technique. The site is called SpiffyBox. Not only does it show you how to do it, it has a little app that creates images for you based on your criteria! Cooool. The image creator was the selling point for me.

Another image technique is to use four separate images. This post outlines how its done very nicely.

CSS3

There is a border-radius property in CSS3. Check out this post for more information.

I am happy to say that I have finally found a solution: Django. While I am sure it excels in building large-scale apps, it has been a completely perfect tool for creating a simple website such as benogle.com. I am surprised that, despite having never used Django before, it took a little over 6 hours (spread over several days) to construct, plus a couple hours for writing content. Wow! It took longer to build the theme for this WordPress blog! I recently built a site with about the same complexity for a family member with textpattern. I have four to five times more time and effort in it.

Why does it fit so well? Three reasons:

• My web dev skills transfer in that I don’t have to learn a really complex plugin/theme architecture. Django’s template language is simple. I make templates. My views call them. Yessss.
• I add only the stuff I need. With the blog and CMS packages, I spend soooo much time tying to figure out how to hide data I don’t care about or add a little extra data I do. With Django, I just create a model with the data I need. syncdb. Done.
• The instant admin interface. Oh, it knows about my foreign keys and presents choices in a dropdown? Epic. Cruft? None.

The best part it is that there is soooo little code. I’ve made a public git repo containing said code. Included is a Django app called simplesite which has all the ‘business code’ goodness.

The site has multiple pages (no, really), and those pages may have a different header image, left-hand fluff image, and sidebar. So I needed a Sidebar table, an Image table, and a Page table. Here are the models:

class Sidebar(models.Model):
    name = models.CharField(max_length=30)
    content = models.TextField()
    
    def __unicode__(self):
        return self.name
    
    def gethtml(self):
        return textile.textile(self.content)
    
class Image(models.Model):
    name = models.CharField(max_length=30)
    filename = models.CharField(max_length=50)
    
    def __unicode__(self):
        return self.name
        
    def geturl(self):
        return '%s%s' % (settings.IMAGE_URL, self.filename)
    
class Page(models.Model):
    title = models.CharField(max_length=30)
    slug = models.CharField(max_length=100)
    header_image = models.ForeignKey(Image, related_name="headers")
    accent_image = models.ForeignKey(Image, related_name="accents")
    sidebar = models.ForeignKey(Sidebar)
    meta_description = models.CharField(max_length=256)
    meta_keywords = models.CharField(max_length=100)
    content = models.TextField()
    
    def __unicode__(self):
        return self.title
        
    def gethtml(self):
        return textile.textile(self.content)

Cool. Now we need code to display pages from model. This is the really easy part.

def index(req):
    page = Page.objects.get(id=settings.INDEX_PAGE_ID)
    return render_to_response('index.html', {'page': page})
    
def page(req, page_slug):
    page = get_object_or_404(Page, slug=page_slug)
    return render_to_response('page.html', {'page': page})

And the template that displays a regular page:

{% block content %}
<div class="entry-page">
	<div class="entry-image">
		<img src="{{ page.accent_image.geturl }}" alt="fluff image"/>
	</div>

	<div class="entry">
		<h2 class="entry-title">{{ page.title }}</h2>
		<div class="entry-content">
			{{ page.gethtml|safe }}
		</div>

	</div>
</div>
{% endblock %}

Done! Ok, well, I’ve left out the contact form handling code and the url map list. The rest of the work was in translating my static HTML template to a Django template. Oh man, do I like their template language. The inheritance makes for clean HTML, and the filters keep the garbage out of the templates.

What can I say, I am loving Django. I will be using the simplesite app, or some clone of it, for any more simple sites I build from now on. I have even started writing another, more complicated, application with Django just to try an explore the power and awesomeness. It feels so great to find a library that just ‘clicks.’

I wanted to release something that would take the ‘web 2.0′ world by storm. Something that any jQuery jockey could include in his/her app and boost productivity at least by 20%. So I thought, “dude, new-school thought believes downtime, R&R, and even games increase productivity.” Then I pondered. And I pondered. And while I was pondering, I totally made jquery pong (ok, so I retrofitted gameplay from one I found).

Here is one with all the defaults:

The code:

$(document).ready(function(){
    $('#pong1').pong('circle.gif');
});

And here is one in which you will lose:

The code:

$(document).ready(function(){
    $('#pong2').pong('circle.gif',{
        ballSpeed: 10,
        compSpeed: 10,
        playerSpeed: 2,
        paddleHeight: 20
    });
});

Here are all the options:

{
    targetSpeed: 30,  //ms
    ballAngle: 45,    //degrees
    ballSpeed: 8,     //pixels per update
    compSpeed: 5,     //speed of your opponent!!
    playerSpeed: 5,   //pixels per update
    difficulty: 5,
    width: 400,       //px
    height: 300,      //px
    paddleWidth: 10,  //px
    paddleHeight: 40, //px
    paddleBuffer: 1,  //px from the edge of the play area
    ballWidth: 14,    //px
    ballHeight: 14,   //px
    playTo: 10        //points
}

Download it and you’ll need the ball too. Have fun!

<meta name="description" content="<?php if(get_post_meta($post->ID, "description", true) !='' ) echo get_post_meta($post->ID, "description", true); else bloginfo('description');?>" />
<meta name="keywords" content="<?php if(get_post_meta($post->ID, "keywords", true) != '') echo get_post_meta($post->ID, "keywords", true); else echo strtolower(get_bloginfo('name'));?>" />

It works on the single post page, but it does not properly display the default on aggregation pages like the front page. This is fixed by adding the is_single() function to the if statements:

<meta name="description" content="<?php if(is_single() && get_post_meta($post->ID, "description", true) !='' ) echo get_post_meta($post->ID, "description", true); else echo 'My description';?>" />
<meta name="keywords" content="<?php if(is_single() && get_post_meta($post->ID, "keywords", true) != '') echo get_post_meta($post->ID, "keywords", true); else echo 'my, keywords, here';?>" />

Yay.

The real problem is that I am really tired of getting off my booty, walking alllll the way to the laptop, sitting awkwardly on the edge of the coffee table, and hunching over to find something. Ugh! There must be a better way. I want to control the stereo laptop via some other machine on the network, dammit! Ideally WinAMP would be able to run as a server on the stereo machine, then the WinAMP instance on another machine would have some ‘run as client’ setting that points to the stereo laptop. Then I could just use WinAMP like normal, but have the awesomeness of it running on my stereo. I got all excited when I heard about WinAMP remote, thinking it was this functionality. But no, my enthusiasm was curbed when I found out it basically does what sockso does for me. No good.

So I hunted for a plugin to do something similar and I actually found quite a few. Unfortunately, most looked pretty cheesy or were dead. I eventually settled on AjaxAMP. It is pretty cool in that it is a webapp that is basically a stripped down version of winamp. But it doesn’t totally fit the bill because it is basically a stripped down version of winamp in a browser. It has no support for importing playlists, I can’t browse the internet radio stations, and there is, of course, no sockso integration. I just cant win, man.

The good part is that it is all Ajax-y so each time I, say, add a song to the playlist, some javascript makes a request to the server running on the stereo machine and says “hey stereo, add this song.” Yay. And his JS is not compressed so I was easily able to figure out how to use the params for each command. Double yay. All I needed to do was write a little library that makes the same requests for playlists from sockso and my beloved somafm.com.

My creation is a python script called rempl (remote playlist). You call it by specifying your AjaxAMP server and the playlist to push (pls or m3u) as params. It will then play or enqueue the playlist. Example:

python rempl.py myplaylist.pls

Ok, so now I could add a local playlist to the remote WinAMP instance, but it was too cumbersome. From sockso, I’d have to download the playlist, then run the script on the playlist. The easiest fix I could think of was to run the script as a helper app in the browser for m3u and pls files. Firefox errors out when just running a py script as the helper app in windows, so I wrapped it in a batch file. The only problem is that firefox starts the batch file in the firefox dir, so the path to the python script must be absolute. It sucks, but you’ll get over it.

How to use it

Install AjaxAMP on your stereo machine, then download rempl (project page).

You can use it from the command line:

python rempl.py -s http://192.168.1.101:5151 myplaylist.pls

add the ‘-e’ param to just enqueue:

python rempl.py -e -s http://192.168.1.101:5151 myplaylist.pls

Or you can use it with a browser:

If your client machine runs windows, open up the rempl.bat file from the download and edit AJAXAMP_ADDR to the url of your AjaxAMP machine, and edit REMPL_PATH to whereever you put the python script. Then in firefox, open a playlist (eg. somafm.com/play/indiepop for pls), click the Browse button, and find the rempl.bat file you edited. The file dialog ignores bat files, so you will need to find the dir that holds rempl.bat, then type rempl.bat into the filename box. Check the ‘do this from now on’ checkbox, click ok, and listen to the awesomeness of your stereo changing.

If you are using linux or a mac, first set the DEFAULT_SERVER var in rempl.py to your AjaxAMP server. Make the .py file executable (chmod u+x rempl.py), then in your browser, browse to a playlist file (eg. somafm.com/play/groovesalad), then open it with rempl.py and check the ‘Do this automatically from now on’ box.

The rest of the website is in the works. Django is my new buddy.

Hopefully I can get a post up a week, minimum. Yeah. This week will have two. So to that one guy who might stumble here on accident, you’re getting a treat. :p

Here is some obligitory code so I can get the junk to look right:

def parsem3u(f):
    
    lines = getlines(f)

    files = []
    
    for i in range(len(lines)):
        if not lines[i].startswith('#'):
            
            fileinfo = {'filename': lines[i]}
            
            #previous line has title info
            if lines[i-1].startswith('#EXTINF:'):
                fileinfo['title'] = getm3utitle(lines[i-1])
            
            files.append(fileinfo)
    
    return files

Ben