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.
So, I found a great base puzzle generator (javascript) and after a few hours, some graph paper, and some tweaks to the code, I created a RegEx crossword puzzle for others to check out. If people enjoy it, let me know in the comments. I’m thinking of putting out a physical workbook of these for fun.
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'> $(document).on('pageinit',function(){ $("#content").on("swiperight",function(){ $("#leftpanel").panel( "open"); }); $("#content").on("swipeleft",function(){ $("#rightpanel").panel( "open"); }); }); </script> |
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.
Continue reading
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>
<head>
<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' />
</head>
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.
After building custom jQuery on multiple websites to POST form data to a secondary PHP file for processing, I decided there has to be another way. I wanted to build a JavaScript (jQuery) chunk of code that executes when the document is ready and automatically performs the following functions:
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.
Continue reading
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.
Continue reading