Becoming Mavenous

CSS3 and Javascript Planetary System

2010-06-01T23:54:59Z

After seeing neography.com's CSS3 transition galaxy I couldn't help but rewrite it using javascript so that it would work in browsers other than Chrome or Safari. Eventually Firefox (maybe IE?!) will support CSS3 transitions and animations as well, but for now, we need a javascript implementation.

I still have work to do on the satellites (moons, rings, etc) so it's a work in progress for now.

CSS3 and Javascript Planetary System

CSS3 Example updates

2010-05-18T02:15:01Z

After the disaster I mentioned in the last article, I figured the least I could do, for now, is redo some of the CSS3 examples, and get them completed. Over the next week or so, I plan to get all of them up and completed. For now the following have been updated:

Enjoy! More coming as often as I can muster!

Fool me once again, shame on me…

2010-06-05T04:37:34Z

So for the past month and a half I've been working on an update for the labs, the CSS3 and HTML5 examples, and a nice little wordpress plugin for reading in github projects, and creating code examples and displays so long as they were formatted according to the mootools structural format.

Now... it's all gone. For what ever reason, Zend Studio decided I didn't need any of my project files anymore, and it ate them. That's the only explanation I've got. They're just gone. I was pretty sure I had a backup, and guess what? Yea... I'm dumb. I'm feeling pretty devastated right now; it's very, very disheartening. The worse part is that I had just completed more than half of the CSS3/HTML5 demos, and now they're gone.

The saddest part of this whole sob story? I have a perfectly good subversion sever setup that I use for all my other sites. Why wasn't maveno.us in there? Fuck if I know... Anyway, this wasn't the post I had planned for this weekend, but here it is.

*sigh*

Feeding Those Social Critters

2010-03-29T16:29:43Z

Feeding the Animals

A friend of mine was asking about the effect I use for the social media icons in the sidebar here. I told him that's personal and I would prefer he not bring up such iniquitous filth in the polite company of my daughter. When I realized he was talking about my website, I figured I would apologize by writing up a quick article about it and some of the caveats I ran into.

There's actually not really much to the effect. I've made use of sprites, a small amount of CSS, and just a simple Javascript function aptly named socialCritters to achieve a nice UI element effect. There are a few things to keep in mind, however, so let's get to it, yea?

The Sprite

As you can see, a very simple image with each of the icons I use (and a few I am not yet using), evenly spaced for easy access via background-position.

Unfortunately I no longer have the name of the artist that designed these icons (which I usually keep in the directory with the icons themselves). If anyone does know, please contact me so I may give proper attribution.

The HTML

<a href="#" class="global-social" style="background-position: -106px 13px;">RSS 2.0</a>
<a href="#" class="global-social" style="background-position: -70px 13px;">FaceBook</a>
<a href="#" class="global-social" style="background-position: 2px 13px;">Delicious Bookmarks</a>
<a href="#" class="global-social" style="background-position: -34px 13px;">Digg Profile</a>
<a href="#" class="global-social" style="background-position: -214px 13px;">Follow me on Twitter</a>

Herein lies the caveat. It would seem as though Internet Explorer has issues with certain styles retrieved via MooTools' getStyle() method, background-position being one of them. Luckily there's an easy fix, specify the style inline. Normally I would completely advise against this, but as it is crucial to the functionality of this code, and not something likely to be effected by a global stylesheet change, it should be okay this once.

The CSS

.global-social {
	width: 36px;
	height: 32px;
	cursor: pointer;
	font-size: 0.0em;
	background: url(/library/media/icons/social/social_bar_icos.png) no-repeat;
	padding-bottom: 6px;
	border-bottom: 1px solid #111;
	border-bottom-color: rgba(155,155,155,0.2);
	margin-left: 10px;
	display: block;
	float: right;
	text-indent: -10000em;
	-moz-box-shadow: 0 2px 0 -1px #151515, 0 5px 0 -3px #393939, 0 5px 2px -3px rgba(57,57,57,0.7);
	-webkit-box-shadow: 0 2px 0 #151515, 0 5px 0 -3px #393939, 0 5px 2px rgba(57,57,57,0.7);
	box-shadow: 0 3px 4px -4px rgba(230,230,230,0.6);
}

Simple enough, right? Creates a block level element with the proper width and height, sets the background image and applies a few effects with the border and box shadow css attributes.

The Javascript

This code requires Mootools, of course. Make sure you grab 1.2.4 or 1.2.1-3 and grab the getSiblings element method from David Walsh's site.

function socialCritters() {
	$$('a.global-social').each(function(_el) {
		var bpX = $(_el).getStyle('background-position').split(" ")[0];
		_el.set('morph', {'duration':200,'link':'cancel'})
		.store('bpx', bpX)
		.addEvents({
			'mouseenter': function() {
				// Call FX.Morph and change background-position keeping the correct X offset
				this.morph({'opacity':1, 'background-position': this.retrieve('bpx') + ' 9px'});

				// Get this element's siblings and set their background-position to their defaults
				// also tone down their opacity for a more dramatic effect.
				$each(this.getSiblings('a'), function(_elem) {
					_elem.morph({'opacity':0.3, 'background-position': _elem.retrieve('bpx') + ' 13px'});
				});
			},
			'mouseleave': function() {
				// Same as mouseenter, 'cept backwards.
				this.morph({'opacity':1, 'background-position': this.retrieve('bpx') + ' 13px'});

				// make sure all elements are returned to their default positions.
				$each(this.getSiblings('a'), function(_elem) {
					_elem.morph({'opacity':1, 'background-position': _elem.retrieve('bpx') + ' 13px'});
				});
			}
		});
	});
}
window.addEvent('domready', function() { socialCritters(); });

So what's going on here? First we use the Mootools $$ function to get an array of the HTMLElements we want to work with. We use the CSS selector a.global-social to easily grab just the appropriate elements. Next we set a few default values, one for the element's Fx.Morph attribute, and the other we get the default background-position X coordinate and store it in the element storage with the key of bpx.

After that we've only to set the mouseenter and mouseleave events to trigger the animation and opacity changes required for each event.

That's all there is to it! Remember to call the socialCritters() function in an window domready event with a
window.addEvent('domready', function(){ socialCritters(); });
statement and your golden. Have fun with it and if you modify it or come up with any cool alternatives, please feel free to let me know here!

Smashing Magazine Needs our Help

2010-03-26T00:39:56Z

Smashing Darling, How Are You?

Most anyone who's been a web designer has at the very least heard of Smashing Magazine. If you happen to be an avid reader of theirs, I'm sure you are aware of the dire situation they currently face. I am among those of you who have read the amazing, and informative articles they post on a near daily (if not daily) basis. They spend a lot of money, and have invested a lot of time to bring us content that consistently helps us, as a community, to hone our skills, and become better designers.

I'm Bringing Giving Back, Back.

It's time we give back. Smashing may be in a situation where they are forced to reduce the number of articles they write, a travesty for us in the community as far as I am concerned, or consider other alternatives; none of which I believe will be all that beneficial to any of us. So how can we best help, you ask? From their article on the topic:

What happened here today, on the Smashing Magazine’s website? Well, here is the thing: we need your help. Only sound financial conditions can guarantee the steady stream of high quality content which you are used to on Smashing Magazine. Today we need your financial support. Please help us by buying our new eBook "Professional Web Design".

An eBook for Us All

The eBook is a selection of the best articles from Smashing's amazing archive written on the topic of professional web design. The book includes different guidelines for professional web development from communicating with clients, creating a successful portfolio, to tips on designing user interfaces for business web applications. I've secure my copy, and I suggest you do the same to help preserve a wonderful resource that I'm sure many of us have used at one time or another. This doesn't just help Smashing Magazine itself, but the countless authors in our industry as well that rely on websites such as Smashing to provide a venue such as they have.

Thank you.

Sticky Note Utilizing CSS3, Sans Images

2010-03-26T00:35:20Z

Hey, can you take a note?

We've all seen the sticky notes on websites used for notices, call to actions, and normal UI type information. Usually these sticky notes are composed of images, and maybe even a simple CSS3 rotate transform. But we can achieve a quite similar looking sticky note sans images all together.

It took quite a bit of playing around with transform and gradients, and it doesn't quite look as good as it could, but I believe I've come up with something that could easily be incorporated into a Mootools or JQuery class to generate just such an effect on the fly. Lets have a look, shall we?

View Demo Download Code

Stick it to me, note-boy.

First, lets see a few examples for inspiration, just to get an idea of what sort of result we're looking for, yea?

PSTut.com Brown Battery Studios Stock.xchng

What now, sticky-stickerton?

So what characteristics are we looking for? To make the sticky note realistic, we need to give hints of being 3D. We need to create gradients and perspective for a sense of depth, and a shadow. Easy enough, right? We'll start with a plain HTML div element and some text to see how it looks.

The HTML

<div class="sticky-box">
  <div class="sticky-note">
    <p style="margin-bottom:0.8em;font-size:1.4em">Dear Milky-Tits,</p>
    <p style="margin-bottom:1.2em">Please remember to pick up the milk from the corner supermarket, sunshine-butt!</p>
    <em>Thanks,<br>Mr. The Milk Requester</em>
  </div>
  <div class="sticky-shadow"></div>
</div>

The CSS

.sticky-note {
	position: absolute;
	left: 0;
	top: 0;
	font: 25px/1.3em JournalRegular,sans-serif;
	color: #333;
	letter-spacing: 0.1em;
	font-weight: bold;
	z-index: 2;
	margin: 0;
	width: 290px;
	height: 290px;
	padding: 60px 30px 0 40px;

	-moz-border-radius-topleft: 155px 2px;
	-moz-border-radius-topright: 5px 11px;
	-moz-border-radius-bottomleft: 85px 10px;
	-moz-border-radius-bottomright: 75px 5px;
	-webkit-border-top-left-radius: 9px 81px;
	-webkit-border-top-right-radius: 5px 11px;
	-webkit-border-bottom-left-radius: 85px 10px;
	-webkit-border-bottom-right-radius: 75px 5px;

	-moz-transform: skew(5deg, -5deg) rotate(14deg) translate(-30px);
	-webkit-transform: skew(5deg, -5deg) rotate(14deg) translate(-30px);

	background-color: #fff;
	background-image:
	-moz-linear-gradient(100% 0 235deg, rgba(10,10,10,0.3), rgba(70,70,70,0.1), rgba(255,255,255,0) 65px),
	-moz-linear-gradient(0 0 -45deg, rgba(255,255,255,1), rgba(255,255,255,0) 65px),
	-moz-linear-gradient(100% 100% -235deg, rgba(10,10,10,0.3), rgba(70,70,70,0.1), rgba(255,255,255,0) 55px),
	-moz-linear-gradient(0 100% 40deg, rgba(10,10,10,0.3), rgba(70,70,70,0.1), rgba(255,255,255,0) 65px),
	-moz-linear-gradient(top, #f1f1f1, #ccc 100px, #bbb);

	-moz-box-shadow:
	-5px 5px 2px -1px rgba(30,30,30,0.2),
	5px 5px 2px -1px rgba(30,30,30,0.5),
	0 0 95px 4px rgba(255,255,255,0.4);

	-webkit-box-shadow:
	-5px 5px 2px rgba(30,30,30,0.2),
	5px 5px 2px rgba(30,30,30,0.5),
	0 0 95px rgba(255,255,255,0.4);

	border-top: 1px solid rgba(200,200,200,0.8);
	border-left: 1px solid rgba(255,255,255,0.7);
	border-bottom: 2px solid rgba(100,100,100,0.5);
	border-right: 2px solid rgba(145,145,145,0.6);
}
  
.sticky-shadow {
	position: absolute;
	left: 0;
	top: 3px;
	width: 362px;
	height: 353px;
	-moz-transform: skew(5deg, -5deg) rotate(14deg) translate(-30px);
	-webkit-transform: skew(5deg, -5deg) rotate(14deg) translate(-30px);
	-moz-box-shadow: 0 0 6px rgba(0,0,0,1);
	background: #000;
	opacity: 0.5;
	z-index: 1;
}
  
.sticky-box {
	position: relative;
	width: 300px;
	margin: 120px auto;
}

SprinklePenny and Mootools Integration

2010-03-26T00:32:39Z

Sprinkle My What?!

You may have noticed the little "Support Us" image off in the right-hand navigation over there. Yea, right over there... go ahead and take a look. See it? Great. Now you may have just asked yourself, WTF is that anyway, and how can I support my favorite authors whom provide me with the quality content I enjoy reading on a near daily basis? After you've pondered that a moment, you may then drift off and ask yourself "And who was the frickin' genius who came up with the coloring code for milk jugs, and why doesn't skim milk have those pretty lil' pink tops anymore?".

Of course, I would then have to pontificate; Yea, what the hell did happen to the pink caps, and are you sure they were the skim milks? And why does Canada have to be so retarded * about the whole deal?

But I digress. SprinklePenny provides an extremely easy to use service that allows us to support the sites we love by way of what they call tiny payments *cough* Micro-Payments *cough*. When you register with them, you decide how much you want to spend, and you decide how much goes to which sites that you want to support, and distribution is handled automatically simply by visiting said sites. It's a brilliant frickin' idea, really!

So far I've seen only one issue with the service... no Mootools integration. Well now, we can fix that quite easily.

SprinklePenny Integration

SprinklePenny integration is really quite simple for content providers, simply place a small bit of html code on the page, a little bit of JQuery code, and make sure you have the JQuery library included as well. Short and sweet, eh? The same can just as easily be done in Mootools.

HTML Code

<div id="sprinklepenny">
	
</div>

Easy enough, yea? Simply replace the /images/ajax-loader.gif with your own Ajax animated loading image, and that part's done.

Javascript Code

First make sure you have the Mootools library loaded on your page, you can even load it from Google's sweet-ass API CDN.

<script 
	type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js">
</script>

Sorry about the weird line breaks, still trying to flesh out my code highlighter. Grrrrr.

Then include this little bit of code either directly in the page (not recommended) or in a Javascript file of your own (Very recommended).

var publisherId = YOUR_PUBLISHER_ID;
window.addEvent('load', function() {
	var element = document.id('sprinklepenny');
	var jsnp = new Request.JSONP({
		callbackKey: 'jsoncallback',
		url: 'http://www.sprinklepenny.com/visits/add',
		data: {
			publisher: publisherId,
			articleTitle: encodeURIComponent(document.title)
		},
		onComplete: function(data) {
			var fx = new Fx.Tween(element, {
				'property': 'opacity',
				'link':'chain'
			})
			.start(0)
			.chain(function() { element.set('html', data.link); fx.start(1); })
		}
	}).send();
});

Raw Javascript

You will, of course, want to replace the var publisherId = 500; with the publisher ID given to you by SprinklePenny after signing up! Whala, done. Pretty Painless, right? Make sure you tell all your friends, and their friends too!

*I'm just funnin' ya, Canada. You guys are welcome to come share my cheese with me anytime. ^_^

Becoming Mavenous Part 1: Why so Drab, bub -OR- Choosing a Color Scheme

2010-03-26T00:27:34Z

A Forward

It's been quite some time since last I blogged on a regular basis, and I'm quite rusty. You'll just have to bear with me as I get my bearings back again. Heheh, bear, bear.... get it? Nevermind.

How this is gonna work.

This article marks the introduction to my Becoming Mavenous series. A narrative chronicling the progression of maveno.us throughout its development. Here's the lowdown on the first few articles.

Becoming Mavenous Series

Part 1 Why So Drab, bub? -OR- Choosing a color scheme.
Part 2 A stroke off Kilter. -OR- Typography and grid alignment.
Part 3 Tag, You're Inadequate. -OR- A more contextual display for tags.
Part 4 I Demo, You Demo, We all Demo! -OR- A useful wordpress plugin for code demos and downloads.
Part 5 Whoa, I Really Like Your Style. -OR- Organizing your stylesheets for easy reference.

So yea, that's what I've got put together thus far, and to be honest, I'm not to sure on the order yet, that may change as different sections are needed more than others... we'll see. Each article will reflect the state of the site as it was prior to my meddling, which should make for easier reference. Hell, if that works out, maybe I'll even do an article on how to set a different wordpress theme for individual articles.

Anyway, on with the show.

Why so drab?

Lets take a look at the current color scheme as it is now. It would seem as though I wasn't really paying attention to the consistency or the contrast of colors as I developed each section. That's proof-positive that you shouldn't do design work at four in the morning whilst somewhat sleep-deprived, nearly asleep, and mostly drunk. Okay, I wasn't nearly asleep; that would just be silly.

I usually like to create an element chart which has every type of element I plan on using within the site. Headers, buttons, feature boxes, form elements, etc. I didn't do that this time (obviously), so a word to the wise, try and do that, okay? A beautiful example of what I mean can be found at Fluid 960 Grid System at designinfluences.com. Very well done indeed.

We're going to start with selecting a color scheme. I've chosen to go with a dark color scheme this time, primary because I'm uncomfortable designing dark websites, so I believe this will make for an interesting good exercise. I have an affection for blues, so I'll stick with that for my secondary colors, but the rest will consist of shades of gray.

After hours of frantically arguing with myself, and a several strange looks from my wife for having done so, here's what I've settled on.

I couldn't bring myself to use a dark color as the primary content area background color, hence the white. More often than not, it is better to stick with a contrast of dark gray on white for your content, with some exceptions, of course. Some of these shades are only in the gradients; such as those in the header, the top portion of the content area, and in the footer.

I've decided to utilize a lot of new HTML5 and CSS3 conventions (such as CSS gradients, border-radius, rgba colors, etc), both for my own practice, and to ensure future compatibility (bwahahaha) when each specification is finalized.

I'm not the best person to teach anyone about color schemes, I can never seem to decide on a scheme that I'm completely happy with. There are tools out there much better equipped to help in this area than I.

Color Scheme Tools

Color Schemer

ColorSchemer Studio 2 is a professional color matching application for anyone from hobbyists to advanced professionals.

Adobe Kuler

Explore, create and share color themes

Discover Adobe Kuler — the web-hosted application for generating color themes that can inspire any project. No matter what you're creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.

Colour Lovers

COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love.

This is quite a change from the old color scheme, as you can tell. There are still a few change to be made here and there, and some testing to be done on a few different platforms, so you may notice some minor changes here and there in the coming days. That's it for this article though, folks. I know this article may not be nearly as informative as I had hoped, but as stated in the beginning, I'm just getting back into writing, and I'll be more coherent from here on out, promise.

Next article topic will be typography and grid alignment. Since I'm not doing a whole lot of redesign for this article, I'll be able to focus more on the message, and (hopefully) able to provide more information!

A somewhat different Lexical Presence

2010-03-26T00:23:51Z

The Apology

Well now, this is different, yea? For those of you coming here expecting to see the Mavenous online dictionary, my sincerest apologies. I've decided to take Maveno.us on a new journey. I have kept a backup of the old dictionary site, and, with enough requests/threats, I will put it back up in a different capacity. Again, my deepest apologies.

The Idea

For those of you that know me as a programmer, this is probably what you expected to see if ever you've ventured onto this site. I've felt like the mechanic who's car is always broke down due to there only being 19 hours in the day I'm allowed to remain awake. I've gone through literally 20+ designs for this site, and finally realized that my OCD will never allow me to be completely happy with any design I come up with, so I need to go a different route.

I've decided to make a compromise and put up what I have, and create a series of articles which chronicles the progression of this site.

The Catalyst

I figure you can't get any closer to providing real world examples, than to show the incremental process of a site live-time. I want this site to not only be a repository for reference and knowledge, but even more so, a catalyst that provides an all encompassing platform from which to fully understand the lessons I'll (hopefully) be able to provide.

Throughout the eleven years I've been learning web design, I've soaked up all the knowledge I could, from any source I was able to find. Historically, I've been able to retain information that was gained from in-depth examples that allowed you to get your hands covered in the guts of the code. Sometimes it's messy, but after you've showered off, and had time to digest what you just disassembled, it seems that is what stuck with me the most.

Anyhow, that is what I hope to bring to the party. I want to provide the type of information that I was privy to back in the late 90's when I was first jumping in the deep end of the pool. We didn't even have lifeguards back then. Okay enough with the damn grandpa jokes.

No seriously, knock it off; it's already bad enough coping with the fact that I'm nearly thirty years-old, I don't need you harping on me too.

The Deal

Here's the thing, I don't believe in censorship. I will never censor any of you, so long as what you have to say is productive to the task at hand, and of at least some minute amount of merit. I will never delete or edit a post simply because you said fuck, goddamnit, or cowabunga. I care more about what it is that you have to say, rather than how you say it. I'm more than willing to help those that are willing to help themselves, and I will do so with at least a modicum of respect.

I'm still trying to work out a good format for which to accomplish all this, and hopefully it'll be one that is conducive to learning, and of value to at least someone. I guess what I'm trying to say is, it may be a bit sporadic around here for a while, but that's how I roll.