After seeing the post on Slashdot about the Regular Expressions crossword, I was inspired. I also wanted a puzzle that was easier and more approachable for the beginners or intermittent RegEx users.
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:
I’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.
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.
<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.
- Put the cursor (focus) in the form’s first input field (if multiple forms on the page, be smart enough to use only the first form).
- Detect all forms and automatically generate the code to POST all of the form elements, via AJAX, to the script defined in the form’s action. Furthermore, use the name of each form field as the key in the POST data.
- Load the results into a div with the id of ‘output’.
- Work for forms that are generated and returned as part of the output (not originally part of the page)
If you are a Dreamhost customer, you may have popular enough websites that you switched from their stellar shared hosting to a Virtual Private Server (VPS). They offer both your main Apache/PHP server as well as a MySQL VPS. I switched to these shortly after it became available, to ensure maximum control over restarting my servers, troubleshooting problems, and scalable resources. The latter option is a real perk: You can change the memory/CPU allocation for your VPS as activity grows on your websites. On the down side, once those resources are used up, specifically memory, your server will determine that memory was exceeded and all processes will be killed.
Update 8/30/12: For those interested in simply writing an ePub file from scratch in a clean editor, Check out the free project Sigil. While it creates a fantastic ePub file, the Table of Contents does not carry over when Amazon converts it. However, Sigil simply creates HTML and this tutorial will give you some additional information regarding how to manually create a Kindle ready version.
I recently wrote up a case study for the audience at NovelRank.com on converting blog posts into an ePub e-book, and the experience helped me immensely. It was a bit of refresher course, as I had gone through the process to create my second book, 50 Conversation Starters for the Modern Age. Once it was built using the sample HTML code below, I used a fantastic and free program called Calibre, which is available for all operating systems, to convert the file to both ePub and Mobi (Kindle) formats. Finally, for editing the HTML, I used Notepad++, especially for its ability to do Find and Replace based upon Regular Expressions.