Logo work for a website that will hopefully get itself off the ground someday! Drawn in Flash and put together in Photoshop.

Related Posts

• January 4, 2010 -- Droste Effect GIFs (0)
• September 19, 2009 -- Peanut Butter Jam Productions (0)
• April 27, 2009 -- Studio8.net (2)
• November 2, 2008 -- Nooks (0)

Courtesy of Bear Kid, who makes cool things you can buy.

Most Commented Posts

• July 23, 2009 -- WordPress Admin Toolbar Bookmarklet (57)
• March 29, 2009 -- WordPress: How to Sort Category Archive Posts by Subcategory (26)
• September 26, 2009 -- OneFileCMS (7)
• October 25, 2009 -- What Page of Google Am I On? (7)

(These demos and pictures use my Movie Monster gig, because the aforementioned project isn’t ready to be talked about.)

Keeping It Simple with CSS

Demo!

<div id="mockupoverlay_original">original</div>

<style type="text/css">
#mockupoverlay_original {
	background-color: rgba(0,0,0,.5);
	font-size: 12px;
	color: white;
	position: absolute;
	top: 5px;
	right: 5px;
	height: auto;
	font-weight: bold;
	padding: 5px 10px;
	cursor: pointer;
	z-index: 1000 !important;
}
#mockupoverlay_original:active {
	background: url("mockupoverlay_original.jpg") top center no-repeat;
	padding: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -5000px;
}
</style>

This affixes an “Original” button to the top right of the page that, when clicked, overlays the original mockup on top of everything, centered and at the top. Sweet and simple, it’s just a line of HTML and some CSS. Wowza!

Tip: If you realtime edit your CSS with Web Developer Extension like I do, you can change that :active pseudo-class to :hover and add something like opacity: .5; to it. That’s called onion skinning, an animation technique.

Making It Hot with jQuery UI

Demo!

<div id="mockupoverlay_slider"></div>
<div id="mockupoverlay_original"></div>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" media="screen" />
<style type="text/css">
#mockupoverlay_slider {
	z-index: 999;
	font-size: .75em;
	position: fixed;
	width: 50px;
	top: 15px;
	right: 15px;
	opacity: .33;
}
#mockupoverlay_slider:hover { opacity: .66; }
#mockupoverlay_original {
	z-index: 900;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("mockupoverlay_original.jpg") top center no-repeat;
	opacity: 1;
	display: none;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1");  google.load("jqueryui", "1");</script>
<script type="text/javascript">
$(function() {
	$("#mockupoverlay_slider").slider({ step: 10, change: function(event, ui) {
		$("#mockupoverlay_original").css("height", $(document).height());
		mockup_opacity = $('#mockupoverlay_slider').slider('value')/100;
		if (mockup_opacity == 0) {
			$("#mockupoverlay_original").hide();
		} else {
			$("#mockupoverlay_original").show().css("opacity", mockup_opacity);
		}
	} });
});
</script>

Here, instead of an “Original” button, there’s a slider, courtesy of jQuery UI, that controls the opacity of the overlay. All the way to the left, it’s hidden and you can interact with the page normally. All the way to the right, it’s fully opaque. Anywhere in the middle, it’s some fractional semi-transparency. The overlay also stretches to the entire height of the document, not just the first 100%, so you can scroll vertically.

You’ll notice that everything that can be is pulled in from Google’s CDN: jQuery, jQuery UI, and the base jQuery UI theme. Because why not?

Use It or Lose It

To use either of these approaches, copy its code and place it at the bottom of your HTML just before the closing </html> tag. Then either name your mockup image “mockupoverlay_original.jpg” and keep it in the same folder or modify the CSS to point to wherever/whatever it may be.

Make sense? Let me know if you find good use for it.

Related Posts

• June 14, 2010 -- My Name Is Tommy (1)
• June 9, 2010 -- Things We Do (0)
• May 23, 2010 -- Black People and White People Shaking Hands (dot com) (0)
• May 7, 2010 -- Movie Monster (0)

My Name Is Tommy is a fun little “one page” site I made to serve the following bulleted purposes:

• Make use of a seemingly valuable domain name I rashly purchased
• Allow me a linking portal to boss types or potential clients who could be thrown off by this site’s self-deprecating, hopefully ironic name
• Pay homage to my interest in the parallax scrolling of old school platform games
• Show off my sweet hill drawing skillz

Features

• Four background layers, drawn with a pen in a sketchbook and colored/drop-shadowed in Photoshop:
  • Front row hills
  • Middle row hills
  • Back row hills
  • Sky and sun which ease into solid colors (try zooming way out in your browser)
• Parallax scrolling done with jQuery animated background positions on those layers
• The hills are semi-transparent PNG8s, which, in case you didn’t know, support alpha transparency just like PNG24 but at a fraction of the filesize (You’ll need Fireworks…)
• Gracefully degrading, works without JavaScript
• #hash anchor support, generated URLs work just mostly as you’d expect
• PHP contact form with math captcha and a snazzy Google Voice widget
• Progressive Rockwell / Century Gothic font stack
• Fun opacity tricks
• Matching favicon
• A picture of me that’s, like, 5 years old but I’m pretty sure looks current but have been told does not

Link: http://mynameistommy.com/

Related Posts

• May 7, 2010 -- Movie Monster (0)
• April 13, 2010 -- Symposium Digital Posters (2)
• January 8, 2010 -- The Misunderstoods (0)
• September 26, 2009 -- OneFileCMS (7)

Things We Do is a visualized, folksonomy’d work task inventory. It allows for teams to list the things they do and see how these things interrelate, associate, and affect workload.

Confused? Just open it and click around. You’ll notice that when you click a tag, all things with that tag highlight… That’s the gist of it.

Anyway, It’s mostly useless but can be a sort of fun intranet-type-o-thing. If “work toy” is a coined term, consider it that.

Features and Plugin Credit

• Powered by PHP, populated by MySQL, prettified with CSS, and crazified with JavaScript/jQuery
• Iterate through tags with the left and right arrow keys
• Modal windows! Woah!!
• Uses jQuery’s masonry, autoResize, and tag suggestion plugins
• CSS3 drop shadows and wacky :hover margin pushes
• Uber minimal security

Mostly just for internal use, so not tested on a PC or any older browsers. Beware!

Link: http://thingswedo.emergingmediainitiative.com/

Download the Source

Internet, I release this unto you. It is entirely open source. Use it and modify it however you like… but attribution is cool and appreciated. Oh, it requires PHP5 (most probably, PHP4 untested) and MySQL, but you knew that, right?

Download: thingswedo.zip (12kb)

See the included “readme.txt” on how to set up the database and change the CSS to fit your project. I’m happy to answer any casual questions, but I don’t have the time to offer any complex support on this one. Use at your own risk, etc.

Related Posts

• April 22, 2010 -- JabberWordy (2)
• September 26, 2009 -- OneFileCMS (7)
• August 23, 2009 -- Sh-witter (1)
• July 31, 2009 -- Floyd (0)

Link: http://www.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/

[5/25/10] Another coder gent wrote a similarly titled but slightly different post on his blog, Latent Motion. A little confusing, but we’re cool and his article is worth a read too. The webdev community is interestingly smaller and closer than we might think it is.

Related Posts

• June 14, 2010 -- My Name Is Tommy (1)
• May 7, 2010 -- Movie Monster (0)
• April 13, 2010 -- Symposium Digital Posters (2)
• January 8, 2010 -- The Misunderstoods (0)

Uhhh

A satire* of corporate buzzword culture. Synergy. Blogosphere.

Tech

• jQuery-powered panel iteration
• Girlfriend-suggested interval acceleration and deceleration
• Blocky, capped Helvetica
• body:hover CSS pseudo-class to hide/show “WTF” explanatory blog post link
• Made on a Hackintoshed Dell Mini 9 in about half an hour

Moral

Never let a Twitter conversation dictate what domain names to buy.

*Not sure that’s the word I want…

Link: http://blackpeopleandwhitepeopleshakinghands.com/

Related Posts

• June 14, 2010 -- My Name Is Tommy (1)
• May 7, 2010 -- Movie Monster (0)
• April 22, 2010 -- JabberWordy (2)
• April 13, 2010 -- Symposium Digital Posters (2)

Movie Monster is the brainchild of Barry Holiday and is produced by Brock LaBorde of Studio8.net out in Hollwood somewhere. It is a semi-mostly-sorta-weekly review of recent movies, hosted by a monster with a garbly voice. So, you know, it’s pretty much, like, the perfect thing.

My work for them was a custom WordPress theme with video integration, not unlike a couple of the others I made.

An Unordered List of List Items

• Huge, rotating, background Movie Monster headshots on each of the main pages/categories with JavaScript to make sure they didn’t mess up the page’s width (without resorting to CSS overflow hiding)
• YouTube integration with dynamic embed, “Share” embed code, and thumbnails
• Subcategory-organized Videos category listing with jQuery “More!” and “Less” display
• Contest category and page with YouTube integration
• Multi-query front page with latest videos/blog posts and a jQuery sliding info panel behind the latest episode to conserve real estate
• Two widget areas in the sidebar, three in the footer
• CSS3 text and box shadows and gradient buttons
• Mid-page ad code via Theme Toolkit
• Movie Monster Favicon
• An Easter egg (Grrr!)

Some of these I may dedicate future posts to in my “How To” category… We’ll see. More on that later.

Link: http://www.ilovemoviemonster.com/

WAIT!

Before you go, watch this video Barry made sans monster costume.

I’ve watched that at least half a dozen times, and it’s still funny to me.

Related Posts

• January 8, 2010 -- The Misunderstoods (0)
• April 27, 2009 -- Studio8.net (2)
• June 14, 2009 -- The New Movement Theater (0)
• September 26, 2009 -- OneFileCMS (7)

These are often built into the CMS or template itself rather than the content, so it’s entirely possible for them to appear on pages too short to be useful.

Here’s a jQuery function I wrote to remove the “Back to top” link if the page’s content isn’t longer than the window.

jQuery.fn.autohidebacktotop = function() {
	if ($("html, body").height() <= $(window).height()) {
		$("#autohidebacktotop").remove();
	}
	this.bind("click", function() {
		$("html, body").animate({scrollTop:0});
		return false;
	});
}; 

The accompanying HTML:

<p id="autohidebacktotop"><a href="#">Back to top</a></p>

And then you can call it like so:

$(document).ready(function(){
	$("#autohidebacktotop").autohidebacktotop();
});

How is this better?

• Gracefully degrading, still works if JavaScript isn’t enabled
• #autohidebacktotop can be styled with CSS as normal
• Nifty scrolling animation

Related Posts

• October 13, 2009 -- Show a Message to AdBlock Users with jQuery / JavaScript (4)
• July 5, 2010 -- Semi-Transparent Mockup Overlays with CSS / jQuery UI (1)
• June 14, 2010 -- My Name Is Tommy (1)
• June 9, 2010 -- Things We Do (0)

Somewhat inspired by Lewis Carroll’s JabberWocky, JabberWordy is a “Nonsensical Domain Name Generator” that creates ten random, Web2.0-esque words and quickly (and mostly, mostly accurately) checks each for their availability as a .com, .net, or .org domain name.

Features

• Availability checked via jQueried AJAX so it doesn’t take the page 10 seconds to load each time
• Custom word generator with arrays for consonants, double consonants, diphthongs, etc, and mathy randomness to decide what versus what to pull from where and when
• Reverse engineered GoDaddy referral links
• Share! widget a la OneFileCMS, What Page of Google Am I ON?, and CSS Killswitch.
• “Buy me a coffee” button borrowed from What Page of Google Am I ON?

Built with PHP and a bit of jQuery. All done within the last three or four days, mostly while watching TV before bed, after working on client’s work, after working a 9 to 5.

Link: http://jabberwordy.com/

Related Posts

• September 26, 2009 -- OneFileCMS (7)
• May 7, 2010 -- Movie Monster (0)
• January 8, 2010 -- The Misunderstoods (0)
• August 23, 2009 -- Sh-witter (1)