Adventure Time’s BMO, Made in 3D Entirely with CSS

BMO made with CSS in 3D

Oh my Glob! BMO in the Web Thingey. All the visuals are done entirely with CSS. The buttons also do some mysterious things when you press them. The making of 3D BMO grew out of following a tutorial creating an old Macintosh Plus in 3D with CSS. I wanted to better understand the CSS properties that were being used for 3D, and create something myself. In doing so, I ended up figuring out some math to create some beveled/rounded edges.

Adding a “Rate” Button to your Cordova-based Mobile App (Android, iOS, etc)

Stars Rating, App

High ratings in the Google Play Store or iOS App Store are critical to an app’s success. And they’re beneficial to find out what the problems are when an app needs improvement. So, it’s very common to have a simple link/button that allows the end user to submit their review from inside the app. The less hoops to […]

Opening YouTube Links Dynamically in a Twitter Bootstrap Modal Window

Bootstrap Modal Dynamic Youtube Embed, JavaScript

Using Twitter Bootstrap 3.0, I wanted to use its modal window to open YouTube videos. Rather than manually placing the HTML for each video's modal, or creating a line of JavaScript for each separate video, I wanted any YouTube link to pop up embedded in a modal window, without extra code. The modal is a progressive enhancement. The link should work normally without any JavaScript. You could also disable the modal functionality for small devices on a responsive design.

Common .htaccess Rules for SEO and Rackspace Cloud Sites

Every site we build on the Rackspace Cloud ends up needing a lot of similar rules in the htaccess file. On my local PC I've collected them in a text file, that I copy paste sections from almost every day. Most of the below examples will work on your average Linux-based server with Apache and mod_rewrite enabled. A few are RS Cloud Sites specific (as noted). In case you've never messed with this stuff before, note that this isn't a single file to copy in its entirety. Each section has a different purpose.

Yii: How to Search a HAS_MANY relation using CDbCriteria Compare()

Using Yii's implementation of ActiveRecord makes querying a database much easier for simple queries. For more complex situations, you will still find yourself having to write some straight SQL on occasion. In this case, using a custom query was not necessary. I was trying to add another search parameter, using the AR compare() method, to search a relation with a HAS_MANY relationship, and it was displaying an "unknown column" error. Without a proper example, it wasn't clear at first how to get this work...

Huge Email Delays on Rackspace Cloud Sites – Don’t Use PHP Mail()

Starting last month, Rackspace Cloud Sites has not been delivering mail sent through PHP's mail() function in a timely matter, and sometimes not at all. The company I work at has been using RS Cloud Sites for a few years now, and while mail delivery has always been slower than average, emails tended to arrive within 20 minutes. Now we have emails showing up 3 days late, and there were some tests that I never received. Why is there no uproar about this? And why has Rackspace failed to notify its customers of this ongoing issue? Most websites rely critically on scripts that send email for their contact forms and web applications. For any brochure-type website, the main goal is to get the visitor to contact them. Call to actions point to a contact form. The contact form submits to a script that either sends mail via PHP's mail() (sendmail) or via SMTP.

Using Different JavaScript / jQuery on Old Versions of Internet Explorer

I was adding a nice hover overlay to some images, which faded in and out nicely with jQuery, in FireFox. Unfortunately, the effect in IE7 and IE8 was not looking too good. The text was either not fading correctly, or text was popping and looking shoddy. This had to do with some transparent elements and handling of transparent PNGs. Rather than fighting with it or degrading it for everyone, I realized it'd be simple to do a little progressive dehancement by doing a simpler show/hide for IE versions less than 9.

CSS Print Media Query

Using the @media rule in your CSS allows you to target different media types, and screen sizes, from a single stylesheet. Using media queries with max-widths is integral to the current push towards responsive design. This can also be used to create your print styles using @media print. You'll notice this used on modern base-templates such as the HTML5 BoilerPlate:

Add a Subscribe to MailChimp Newsletter Option on Your Contact Form in 5 Minutes

Adding a “Subscribe to Newsletter” checkbox or radio button to an existing contact form is incredibly painless using the MailChimp API. Include one library file, and you’ll have access to all functions the API has to offer. In this example, I added a Yes/No radio selection. You could easily change this to be a checkbox. When "Yes" is selected, and the form is submitted, the contact form does its thing, and then the user is added to a MailChimp List.

Quick and Simple CSS Percentage Bar using PHP

If you have some PHP numbers you need to work with, creating a percentage bar is incredibly simple. Calculate the percentage, and then set a width on a DIV that can then be styled. To set this up quickly, I set the percentage bar to 100 pixels wide. For posting this, I've added a scale factor in case you want to make the percent bar wider.

Check if Email Username Exists with CodeIgniter and jQuery Validation Plugin

A common feature of most new user registration forms is a message telling you whether your chosen username or e-mail is already taken. The check is done through an AJAX request. Using the jQuery Validation plugin, the remote option can be used to request a URL that returns JSON data. Using CodeIgniter, this URL is a new function in the controller used for registration. In this example, the register_email_exists() function returns true or false, after checking the entered form value against the database. See the following example code for the basic PHP and JavaScript you'll need to make this work.

jQuery One-Liners and Reuseable Code Snippets for Common Tasks

For the last few weeks I've been collecting tiny morsels of jQuery and straight JavaScript that I've needed for building sites. I had found myself needing the same small scripts over and over. Rather than rewriting and checking an API/plugin reference, now I can just copy from this list. Most of these snippets are a few lines each. Some are simple. Some aren't.

Create a New WordPress Admin User from PHP

If you're locked out of WordPress and can't reset your password, the official docs list several options that allow you to access your administrator account again. But what if you want to create an entirely new admin user? For blogs that I have FTP access to, but no working WordPress password, I threw together the following script to create admin users.

Using Custom Post Types for Repeated Content/Includes in WordPress

Most sites contain areas of text and HTML that are repeated throughout the site. Links in the footer, copyright information, a button or phone number in the header, or some other static content. If you're a developer working on your own site, then you may just keep this in an include file and edit the code manually. If you're using Wordpress as a CMS for a client, then it's a good idea to make these areas of text/images editable, so that they can have full control of their site.