Archives for September 2013

Chrome Extension: User-Agent Switcher

If you don’t live close enough to MIGHTYminnow HQ to visit our device lab for testing, there’s a handy alternative: User Agent Switcher. With this nifty Chrome extension you can quickly and easily switch between user-agent strings, meaning you don’t have to have a mobile phone or tablet to do your device testing!

That said, remember: there is no substitute for real hands-on device testing, but User Agent Switcher is a close second.

Mm Plugin: HTML5 Placeholder Polyfill

Without placeholder support

Your form without the plugin (IE 7/8/9 & Opera Mini)

With placeholder support

After installing HTML5 Placeholder Plugin

MIGHTYminnow is proud to announce our new plugin: HTML5 Placeholder Polyfill!

The plugin adds placeholder support for older browsers like Internet Explorer 7/8/9 and Opera Mini which don’t support placeholders natively. We simply took Mathias Bynens’ amazing jQuery placeholder polyfill and bundled it as a WordPress Plugin – the jQuery itself is widely used and well-vetted. In case you’re wondering what a placeholder is, it’s that handy text inside a form input or text area that is often used to suggest what the user should enter (e.g. “Enter your email address”). This functionality can be super handy when it’s working, and can create a major mystery for your users when it’s missing (imagine a form without labels, in which the placeholder text is the only indicator of what the user should enter).

Our plugin guarantees that your users are never left in the dark. To learn more or download it, just visit the WordPress Plugin Page:

Visit the Plugin Page »

Free training for unemployed developers/designers

Thanks to Dave from Fire on the Bay, we recently learned of a new web-y, design-y program for those struggling in the current economy.

If you are unemployed and looking for ways to improve your skill set, Bay Area Video Coalition (BAVC) is offering a 16 week intensive training program to help improve your skills. BAVC is a Bay Area non profit that was asked by the city of San Francisco to head up their TechSF initiative to help technologists and multimedia artists back to work. If you qualify after filling out the application, the training is free.

The new training session, called Digital Directions, starts next week and offers 16 weeks of training of Adobe CS6 workflow in Illustrator and Photoshop as well as basic UX, typography, and more. The latter part of the training will be spend working for a client.

There are some eligibility requirements so be sure to read them before applying.

We thought this opportunity was worth passing on.

MIGHTYminnow: Web Studio, School, and now Sewing Lab!

Sarah's SewingWe are lucky to have lots of great space at MIGHTYminnow headquarters and we love letting our coworkers use that space for building their businesses as well as for fun side projects. This weekend, our coworker Sarah of Support Labs turned our classroom into a giant sewing lab for her t-shirt blanket!

tshirt quiltLet us know if you have a project you want to work on but need a larger space to complete it. We love accommodating projects of all sizes from projects like Sarah’s that take a few hours to the folks at Workshop Weekend that use our space for the weekend. We can’t wait to see the completed blanket!

How to Make a Custom jQuery WordPress Plugin

We love jQuery. A lot. And we use it a lot too. In fact, on pretty much every site we build, we utilize a common set of basic jQuery snippets that do some handy things (opening external links in a new window, adding helpful classes to list elements, labeling links based on there “href” attributes, etc). Sounds like the job for a simple plugin, right? No need to copy and paste all your snippets on each new project – you can create your own custom jQuery plugin in 4 easy steps:

1. Set Up Your Plugin

First thing you’ll want to do is create a new directory for your plugin. Name it something intuitive, like my-custom-jquery (typically all lowercase with hyphens).

In this new directory, create 2 new files:

  1. my-custom-jquery.php
    The file name should essentially match your plugin name.
  2. my-custom-jquery.js
    Similar naming scheme. We’ve chosen to name our file mightyminnow-custom-jquery.js in the code below.

Now you’re ready for the actual coding.

2. PHP (my-custom-jquery.php)

This is the guts of your plugin – your main PHP file.

This code does a few things:

  1. The first commented bit is a standard WordPress plugin information header. It contains important info about the plugin, such as author, URI’s, and a brief description.
  2. Further down, we have a basic function that does two things. First, it enqueues jQuery (notice the function wp_enqueue_script which is the safe and proper way to include jQuery in WordPress). Second, we enqueue our custom jQuery.
  3. Lastly, we add an action to run the whole shebang. We use the wp_enqueue_scripts hook, which is a good place to include all scripts.

3. jQuery (my-custom-jquery.js)

Now we just have to add our actual jQuery to the .js file we’ve made. Here is the code we’re using – feel free to add your own snippets as well.

As you can see, this jQuery does a number of things including:

  • Opens external links in a new window
  • Adds special classes to image, email, and pdf links (we often use these classes to add small background-image icons)
  • Add special classes to first, last, and parent list elements

This is where you can get creative and add whatever jQuery snippets you like to use on a regular basis. If you have any suggestions, definitely post them in the comments below!

4. Install Your Plugin

At this point, you’re ready to install your plugin. You’ve got two options. The first is just to upload your plugin folder directly to /wp-content/plugins. The second is to create a .zip of your plugin folder and use WordPress’ built-in plugin installer to upload it. Once it’s up and running, make sure to thoroughly test any jQuery snippets you’ve added, and definitely let us know what sorts of cool stuff you come up with.

Questions? Comments? Let us know below!

:hover Effects for Mobile

We recently completed a project in which we needed to popup a tooltip-like box when hovering over an element. The :hover CSS pseudo-class works fine in desktop, but not so well on mobile. What ends up happening on mobile is that tapping the target element does indeed pop up the tooltip, but tapping elsewhere on the screen fails to close it. Clicking another link or hoverable element does the job, but we needed to emulate proper lightbox/tooltip behavior, in which clicking anywhere else will trigger it closing.

What we ended up with is the following jQuery/CSS combo that seems to do the trick nicely.

Check out this Pen!