jQuery Mobile 1.3 Swipe to Reveal Panel with Demo

I wanted to make use of the new jQuery Mobile 1.3.0-beta1 feature called Panels, allowing you to overlay, push, or reveal a hidden panel of content on the left or right of the main window. This is most commonly used to provide extra navigation options. In my case, I wanted to show static content that is hyper relevant, but without crowding up the main window.

However, the docs recommend and demonstrate how to use a hyperlink to activate the panel, which is great in a header, footer, or in a button, but it seemed more natural to allow the user to swipe the screen either left or right to show the panel. Thus, I need to add the following code to the bottom of the page:

<script type='text/javascript'>
		$("#leftpanel").panel( "open");
		$("#rightpanel").panel( "open");

Continue reading

HTML5 and jQuery Mobile Shortcut and Tip Sheet

jQuery MobileI’ve been exploring jQuery Mobile lately and consequently, HTML5 and mobile HTML design. What I’ve come to realize is that the framework is incredibly powerful and looks fantastic! I first looked at it almost 2 years ago and was overwhelmed, so either it has gotten that much better, or I have. Either way, I’m incredibly satisfied.
Continue reading

Quick RSS Feed Access with Browser Bar Icon

Back in early versions of Firefox, a small icon was visible on the browser bar if the webpage you visited listed available RSS feeds in the source HTML:

Some time in the last few years, this has disappeared. Luckily, with the assistance of extension and add-on developers, this option is available for both Firefox and Chrome!

After installing either browser plugin, an icon will appear if the webpage includes HTML like the following:

<link rel="alternate" type="application/rss+xml" title="Mario Lurig RSS" href="http://mariolurig.com/feed/"/>

You can test it out by visiting this website after installing the extension/add-on.

Slowpreneur: The Patient Startup Idea

Slowpreneur <noun>:

  1. A person who organizes and operates a new business or businesses with a patient approach to profits and growth while taking a measured financial risk.
  2. A person who begins a new business or businesses as a side project until it becomes established, thus before operating the business in a full time capacity.

I stumbled upon this word by accident. I was sitting on the plane from Charlotte, NC to Orlando, FL and found myself sitting next to a psychologist, Tracy, reading some startup book on her tablet. We had been talking for the first third of the flight, but were currently on a break to do some reading. She nudges me and points to a word in the book: solopreneur. She says, “Ha, slowpreneur, that’s kind of like you!” I smile, read the word on the digital page, and reply kindly, “That says solopreneur.” Her embarrassment was palpable, so I quickly interjected, “But I do like the idea of a slowpreneur! I’m writing it down.”

I checked Google when we landed and, as of writing this article, when you search for slowpreneur Google suggests (and displays) the results for solopreneur. If you force it to use slowpreneur, there are a total of 3 results!
slowpreneur google search results 2012-08-30

Mind. Blown.

Is this really a phrase I could coin? Alright, I’m doing it (I’ve already bought the domain)! In this startup world of big money, explosive growth, the quick buck, and the desire to make a million dollars in a year (165,000,000 results), I want to do something different.

Slowpreneur Creed

I want to be patient. I want to grow within my means. I don’t want to incur debt. I will hold back the charging bull. I will continue to live my life. I will learn every day. I will let go of the reins when it’s ready. I will not be greedy. I will succeed.

So here’s to the slowpreneurs [raises glass in the air], who adventure into business with a slower pace, a balanced life, and the patience to see it through. Cheers.

HTML Headers for Social Media – Meta Information

It seems that markup is getting more and more important on the web today, especially if you want your pages to show up just right when your visitors click that magical share button. To that end, here is a quick sample of what I stick at the top of every HTML page before I ever get to the body tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>PAGE NAME | SITE NAME</title>
<meta itemprop="name" content="PAGE NAME | SITE NAME"/>
<meta property="og:title" content="PAGE NAME | SITE NAME"/>
<meta property="og:site_name" content="PAGE NAME | SITE NAME"/>
<meta name="keywords" content="LIST 5-8 KEYWORDS HERE" />
<meta name="description" content="THIS SHOULD BE YOUR DESCRIPTION; LESS THAN 160 CHARACTERS." />
<meta itemprop="description" content="THIS SHOULD BE YOUR DESCRIPTION; LESS THAN 160 CHARACTERS."/>
<meta property="og:description" content="THIS SHOULD BE YOUR DESCRIPTION; LESS THAN 160 CHARACTERS."/>
<meta property="og:url" content="http://www.WEBSITE.com/HTMLFILENAME.htm"/>
<meta property="og:image" content="http://www.WEBSITE.com/IMAGENAME.jpg"/>
<meta itemprop="image" content="http://www.WEBSITE.com/IMAGENAME.jpg"/>
<meta name='viewport' content='width=930, initial-scale=1, maximum-scale=1, user-scalable=1' />
<meta name="author" content="Mario Lurig - http://mariolurig.com/" />
<link rel='stylesheet' href='MYCSSFILE.css' type='text/css' />

The very first line is for IE9 compatibility, forcing it to display things properly (I believe any doctype declaration will work). The remaining lines are self-explanatory with one exception: the viewport option decides how your page will look in a mobile browser upon first load.

You can double-check what Facebook sees (or refresh the cache) using their debug tool.

Facebook Promoted Posts: A Casual Study and Review

Facebook now offers the ability to promote a post on a Facebook page to your audience for either $5 or $10. The main idea is to pay to increase exposure to the post. This is done by making sure it shows up in the news feed of individuals who ‘Like’ your page as well as increase exposure to their friends if they interact with your post. Pay a little, get a little more exposure to your existing fan base. Here’s what happened for me.

I ran two promoted posts with the exact same content on two pages I run: NovelRank and Dice Candies. They have 900+ and 400+ Likes, respectively. The latter has a very regular amount of user engagement and thus has a much higher exposure and interaction rate for posts. That being said, here were the results.

Since promoted posts are live for up to 72 hours and this was tested starting early Saturday morning, the promoted post was able to get the attention of a weekend Facebook audience, which is typically less active than during the week.

Continue reading

Faking a SmartPhone: iPod Touch, MiFi, and Virgin Mobile

apple-virgin_mobile-truconnectMaybe I’m cheap or maybe I’m frugal, but either way, I’ve found unique ways to keep my world connected for a lot less than most people pay for a monthly smartphone data plan. Granted, it usually involves me carrying more than one device and thus I lose convenience for monetary savings, but the numbers add up enough that it’s worth it. So, without further adieu, I give you the magical formula I use to save money and still stay connected on the go.

Let me be clear: this isn’t for everyone. There are a ton of valid arguments for why having an iPhone or Android smartphone and $60+/month plan is the right fit for you. However, judging by the popularity of Pay-As-You-Go plans, this may fit the bill for those sometimes techies.

Continue reading