Category Archives: Coding

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:

Continue reading →

HTML5 and jQuery Mobile Shortcut and Tip Sheet

HTML Headers for Social Media – Meta Information

1 Reply

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.

Automatic Form Detection and Post with jQuery

1 Reply

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:

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)

Continue reading →

Dreamhost VPS Root Access and System Monitoring

5 Replies

SUDO has long since been removed from Dreamhost making this invalid

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 →

Building an E-Book from HTML: Sample Code

10 Replies

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 →

Tips for PHP Developers on the PayPal API

11 Replies

I recently had a large amount of frustration and work trying to get an integration going with the PayPal Express Checkout for Digital Goods API. The steps to just get an account were tricky, but then weeding through all of the API documentation was hard. Mind you, I had just come off of building integrations with both SendGrid and Twilio, which have fantastic RESTful APIs. In all, the entire process was 8 hours. After that much trouble, I wanted to put online a few of the tips, tricks, code, and documentation links to help others out.
Continue reading →