First thing you need to know about me: I love people, hard. I gush on people, I rub beards with men, I hug entirely too much. I kiss people on the face. I have zero personal space bubble. I know, I know, I'm beginning to sound like your new best friend. But for serious, I will force my body on you in a friendship grind. When I grow close to people, its like duct tape. Ripping it away hurts real bad, so yeah, coming out of the post summer-camp fog has been a bit rough. It's just something about me — Affection, physical touch and emotional closeness is a part of my DNA and core to how I feel loved. Design, illustration and all that artsy fartsy stuff — those are nice, but people. It's the people. 

As co-emcee with one of the funniest, kindest, most neurotic native american men I know, Justin Mezzell, my perspective was a bit different than the average conference goer: amazing conversations speakers and attendees alike, but I still haven't heard any of the talks. Most of the experiences and lessons learned weren't from a quote on a slide, but through the love and light emanating from the people. Deep feels, y'all. I want to share the lessons that are still buzzing and knocking around in my head before they fade. I want to hold on to this loving feeling, whoa-oah-oh.

My ADHD...squirrel!... brain isn't an organized one, nor has it ever, been but bear with me while I whip out this big glob of love and creative goo. Let's talk about People and Witty Bits.  tl;dr: I love people, so I want to highlight what I saw in them. It's my damn blog, so I'll do it how I see fit. The Witty Bits are a bit more digestible and or slightly funny.

People

Shauna Panczyszyn

Photo credit, Alicja Colon

She's a super spirited, whimsical lettering artist with Passion for days. The kind of passion that just bubbles out and can't be contained. She's gotta ooze it out, all over the place. Not sure if this is an insult, but she reminds me of myself. She geeks hard over her family, her craft, ice-skating, and her inspirations as of late, like Blackletter typography forms and renowned Disney artist, Mary Blair. Her passion is infectious and she brings others along for the ride, willing or not, you're mobbing deep.

As much as she's giddy about her craft, she is about her family. We talked about vulnerable moments of near-loss and fear and how much her family means to her. I love dweebing hard over art, but I love hearing similar stories of vulnerability more. It tells you more about the caliber of person you're connecting with. Also, shes a fan of hunchback of Notre dame, which is some obscure shit. Maybe one day we'll co-art on some Disney stuff. 

Brian Manley

The mannish and I, talking about deep feels. Either that or our visit to Dinglewood.

First, I love this man. He's hilarious, brilliant, encouraging, and weird. My type of people. Brian's got a powerful message that will stick to your ribs: Find your weird and let your weakness become your uniqueness. It seems that at some point in my life, I became a zombie, working for the money and forgetting who I was in all of this. That turning point happened a few years ago, when I embraced the love I had for characters and story a few years ago. Oh thats not all folks, there's plenty more where that came from. But, I'll save it for another post. 

It's in finding your weird, that you embrace you. My promise/curse on all of you is that you're gonna see a bit more weird coming out. But in embracing my weird, I encourage you to find yours. To give yourself grace to just be you. The you you've always been, but perhaps repressed. Let's just all be kids again...remember that silly kid in the corner, eating paste, blissfully? Let's eat some paste.

Lenny Terenzi

Semi incriminating manlove.

Something drew me to this man, like a tractor beam. Sucked me right in. Keep in mind, I've not heard his talk yet, so most of the connection is happening behind the stage, in small talks. A huge lesson (yeah, this needs to be another post) I learned last year is embracing and sharing vulnerability. That instead of connecting with folks over how rad and put together and handsome you are, a much stronger and deeper connection is through weakness and failure. You see, we all fail and fail hard. But we're all so damn good at the facade. Shining, smiling, little rounded rectangle faces glowing from the screen, proclaiming perfect, happy things. 

Nobody wants to see your ugliness, but thats what I love about Lenny. He's ok with showing it, and he's a stronger man for it. People love and connect to Lenny because he wears his failures on his sleeve. He's incredibly encouraging and he makes people feel like they're his best friend when they're around him. What a beautiful man.

Shane Helm

The Creative by Design "Jesus Session" led by Shane (dude in the blue hoodie). Yeah, I need a higher quality photo. Get me one.

Shane is an incredible, earnest, thoughtful man. We had a bit to talk about life, issues and some of the hardship I've faced over the past year. We talked about his hardships too. I'm not quite sure I've ever met a man like Shane because it's just so obvious he cares and his love for humans is apparent and tangible. He also led the Creative by Design "Jesus session" that I was stoked to attend Sunday morning — more thoughts on that in another post.

At several occasions after we talked about my son's surgery (a week prior to the conference and he wasn't recovering well) and Shane repeatedly made an attempt to connect and let me know he was praying for my son. Shane may not have fit the typical conference goer stereotype: rather than wild, sporadic and knocking back a beer, he was calm, intentional, thoughtful and a self proclaimed "tee-totaler". Shane's quite a different cup of tea than the norm, but who wants a norm. I want a world with men like Shane in it. 

Laura and Dave Coleman (Towtes Adorbs Aussies)

The Colemans, winning over the crowd with wit, love and adorableness.

It takes a long time to travel the globe to find the most adorable, kind couple in the world, but we got a winner. Go figure, these two are insanely talented (I'm guessing earned through ridiculously hard work and persistence) as well. But thats the great thing about Creative South — people just aren't talking about their work. We've all got creativity in the veins, so there's this natural undercurrent running through conversations. I love that it's not about the work, but about life and relationship. But seriously, their work. Radness. 

Conversations with these two dikedds, rambled on about Australia, stereotypes, lads, lollies, bogans and dickedds. They're incredible sports to field all of my questions like "what's the most derogatory Australian term you can teach me". I'll limit my gushing here, but it's fair to say that the Colemans are good people. But, let me never fail to mention that Dave's pirouetting was a thing of epic beauty.

Jeff Finley and Alicja Colon

Full-freak with Alicja and Jeff.

My people dance. They dance. They're my people. I didn't have too many opportunities to connect with these two in conversation, but they were a force to be reckoned with on the dance floor. Finley's a bit more refined, and, no offense to Alicja, but yeah you sort of dance like me: Full-freak. But really, its a thing of beauty.

In college, I let loose and danced like a wrecking ball. No, seriously, I remember on several occasions I wiped people out. I claim the whole floor. I use the space. It's been a long time since I let that freak out of the bag and I want to thank these two: also, hat tip to Ismael Burciaga and Jill Bragdon for encouraging this in me too. I think, if I remember correctly, I did some sort of Napoleon Dynamite like bird flapping dance and I'm 62% certain it was nothing short of dancing Gold. Thank you Jeff and Alicja for helping find my way back to me.

Aside from dancing, these two sparked off two thoughts in separate encounters. Jeff is rebirthing and re-finding himself and its encouraging to watch: his journey so far has to have been hard, but I didn't see him focusing on the hardship, but embracing life...and the art of dance...and oh boy is he good. Alicja has a heart for people and wants to reach out to women and be a light. She's bold, intentional and goes after what she wants. She's shockingly direct and I love that about her. Both Jeff and Alicja wear their vulnerability on their sleeve and I heart them, hard.

Mike and Karen Jones

Probably one of my more photogenic shots. Karen is a goober. I am wearing an UP shirt.

First let me say that Mike is Creative South. It's his heart and spirit that reverberates throughout. From the overabundance of hugging #hugnecks to the motto of the conference "Come as Friends, Leave as Family", I've never quite seen the undercurrent of a single person's life philosophy sweep so many people up in its tempest. Mike's true, real and just himself.   

Karen was hovering around the conference for quite some time, until we connected on the last day. First, I know why Mike married her. Girl is awesome. She's incredibly dedicated to what her husband is building in Creative South, to the point where she lived and breathed his mission, until it's become her own. Something I've learned about conferences is that you never stop going all chips in on relationships. Sure, you may have found your posse, but there's another member to add to your mob just around the corner. Karen and I instantly connected on choosing songs for the Creative South dance off. 

Tad Carpenter

The Tadpole.

To say this man is gorgeous is a truth. You know, like one of those universal truths like Bud Light is undrinkable swine urine. Tad is arguably one of the most successful illustrators/designers out there with accolades galore. You should have seen his merch booth. Tad had to hire underage laborers to man his booth due to demand and sheer quality and quantity of his works. 

This isn't about how awesome Tad's work is though. It's about his kindness, excitement and embracing of others, regardless their skill level. We all felt valued and loved on by the Tad. Dare I say the Tadpole? I dare not. He broke a kid's nose in the third grade for calling him that. So yeah, I dare not. I guess simply put: Creative South is a place where the ground is level. Students hang out with the accomplished elite. It's not about elitism and Tad embodies that well. Also, he embodies a great body. Man, he must work out.

Jason Craig

Once again, a designer far too humble for his own good, Jason bought some of my merch. I draw cute shit and he bought it. That makes me feel so good. But seriously, what a great dude. This guy has skillz for dayz and the personality of a lion. He's also helping me choose my first tattoos. Seriously, dude has a Black Panther tattoo that is amazing. His reasons for getting it are even more amazing: His wife told him whatever tattoo he got, just don't get a black tattoo. He got one.

Holly Sutherland

Holly is one of the volunteer hands for Creative South. You probably don't know her, and she probably doesn't care if you don't. She's an amazing, humble, genuine and encouraging person. She consistently told the speakers and my co-emcee Justin and I "y'all are amazing", "y'all are doing a fantastic job". She laughed at our behind stage jokes and she's got a servants heard of gold. 

In a world full of people wanting to be noticed, wanting attention, she wasn't that. She loved others selflessly to help them shine. That is one of the coolest qualities a person can every have — That they elevate those around them. Sure love you, Holly. hashtag hugnecks

Rocky Roark

Coolest name in the world, Rocky Roark.

Rocky's a wierdo. Sorry, dude, but you are. And I love it. I've bumped into Rocky on several occasions and he's solid. Solid freak. I'm mostly jealous of his smeagol/gollum impressions, 90% due to fact that he destroyed me in a gollum voice competition. I love that he's always pushing to better himself: from great leaps in weight loss and a healthier lifestyle, to his fantastic sketches and illustration work thats consistently improving. Rocky's a keeper and watch out for him as an upcoming force in the illustration world. Dude's gots chops.

Justin Mezzell

Poorly lit selfie of Meg, Justin and I. Closely knit like a sweater. I look rather psycho.

Not sure what to say about this guy without crying. He's been a close friend for years. He and I have hashed out some deep, vulnerable issues, attempting growth together. We've shared moments of fear and doubt as we push through life together. He's opened up his life, his family and his home to me. He's also shared some of his better bourbons with me, so yeah, basically, he da bess. He's real, intentional and he calls you out on shit if he sees you can improve. 

Justin was asked to emcee this event, and I was the tagalong he invited to get a taste of the glory. Go figure, the dude is amazingly witty, I mean he's scary fast at coming up with hilarious stuff on the fly. He's perfect for emceeing, but hell, he's also just great at talking in front of humans. Conference organizers, do what ever you can to get him in any capacity. 

Justin and I hashed out lots of ways to tackle this event, but ultimately our goals were the same: be earnest, honor others. This event was never about us. It's about story and those taking part of the narrative. We wanted both the speakers to feel honored, welcomed as well as the audience to feel like they were special. Hell, we have quite a few ideas that never got implemented to bring more glory to the audience. Justin was the perfect man for the job, well, aside from ditching me for nearly an hour to take a dump at the hotel...who knew it? He's some sort of germaphobe and literally has to take a dump in private. Not to mention, the time spent in the bathroom is of epic, half hour long proportions. Me, 29 seconds. I got the plumbing of a warrior.

Meg Robichaud 

Meg tries vegemite, thanks to Dave and Laura Coleman.

In every conference or camp, there's someone your heart knits to and you don't know why. The connection is magnetic and after a few days, you're left with a friend for life. Meg definitely isn't one of those, she's lame. Sike. I kid. She's one of those. I'm not sure if it's that she just fits like one of the fellas, or maybe its her similar, pale skin canadian sun deficiencies, her lack of tact, or the fact that you can literally be yourself and say anything around her and she just gets it. That sounds insulting, I know. She's amazing. 

Meg was attached at the hip to Justin and/or I at any given moment. But it wasn't all about the fun, conversations, radonk jokes or general carousing. I have yet to hear her talk, but for a moment, I caught a slide and I'm not sure if I'm butchering the quote, but it hit me:

"Let go of who you think you should be, to make room for who you are."

That lesson has hit me hard for the last year, so maybe its the reason for the connection, but no matter why or how, it's the lesson I'm breathing in life. I'm letting go of what the design world thinks I should be, I'm gutting the perfection, I'm dropping the facade, to be who I am. Thanks, Meg, love you.

Witty Bits

• Bourbon is your friend. Beer is to be used sparingly, as a source of hydration. Watch out for hopsecutioner.
• The double birdie is a great way to both start and stop conversations. Especially when paired with a pelvic thrust.
• Always remember there might be kids present. Yet again, remember.
• Hug everyone. All the time. No worries if you have no words.
• Conferences are like Vegas. Bring a ton of money and leave with none. 
• Buy people drinks more than they buy you drinks. Make sure that ratio goes untouched. Never dip below. Belittle people that try to buy you drinks and then buy for them instead. Keep Karma levels high.
• Only like 1% of people are good dancers. We're not that lucky. Yes, you're going to look like a moron. Embrace that fact and gyrate.
•  There's a rhythm of talking about deep feels, getting vulnerable and tossing out the occasional Fuck Dreamweaver comment. Use wisely.
• Talk to strangers a lot. They become besties if you talk to them more often.
• Theres an invisible line where you stop meeting new people because you think you've found your posse. Push further and talk to more dorks — you might find a dorkier friend in the next 5 minutes. Collect dorks like Pokemon. Lather rinse, repeat.
• It's not about what you make or how good you are. It's about relationships and going all chips in. You'd be amazed at how little people are talking about their jobs. 
• Do not try to fit 30 people in one hotel room. Ok, do, but be prepared for the cleanup and loss of booze and gaining of friends. Heck, you never needed the booze anyway. Hat tip to Andy Keil.
• Always add new people to your group.
• Don't ditch people to hang out with "cooler" people. Just love the ones you're with.
• Say hello to as many people as you can. Or a smack on the ass. Just do something to establish connection.
• Look people in the eye, and give them the time of day. If they're wasting their time on talking to you, they're worth wasting your time on talking to them. 
• Be approachable. Be friendly.
• Everybody is "cool". No seriously, they all are. Take the time to mine them and find it. They're out there like a school of salmon, waiting to be fished. Cast a line.

If we met and I didn't mention you, I still have more love in my tanks for you. Don't leave! Let's hug. Peace and love, guise.

Hey folks, I made this Adventure Time/Gameboy mashup for my two sons — both of them different but both awesome — my little Homies!

I'm putting in an order and figured I'd open up my order to any of y'all that want to hang this on your walls. There's three sizes available and I'm giclee printing them on 290 gsm, 21.5 mil, using archival inks.

PRE-ORDER NOW

My pal, Ed has always had a passion for games. In college together, we dreamed about writing code for game ideas. He's always loved gaming and his infectious passion has passed throughout his family — they're a clan of sci-fi nerds and gamers, much alike all of us designers. So, when he came to me with his card game idea, I'll admit, I was a bit surprised that he was going the table-top gaming route instead of a videogame, but it was a natural fit. The perfect, nerdy game to play with his little clan of 5 kids.

And it was born — Little Dungeon: Turtle Rock. Yeah, you may have seen me tweet-storming this up on Twitter because I believe in this game — the beginning of many as Ed's first foray into the game-development scene.

I've watched this game from its very inception — playing it on printouts with placeholder images instead of designs with my sons. Even with the lack of visuals on the cards and paper-thin  cards, my sons loved playing this game and kept asking to play again. It's easy to catch on to and was fun even for my four year old. 

So, I'm writing to ask you to check out his game and give it a backing to support Ed's first (of hopefully many) tabletop game, Little Dungeon: Turtle Rock. Cheers.

Check out Little Dungeon: Turtle Rock

Join Sean McCabe, Justin Mezzell, Cory Staudacher, and I on Wednesday, April 2, 2014 at 8:00pm CST as we talk about the "Like" drug — a transparent talk about struggles with the social currency of likes, retweets and notoriety in our online world.

RSVP to the Event

• Simple class interface that I can instantiate with new Classname
• Public functions/members
• Private functions/members
• Priveleged functions/members
• Static functions/members

Lately I’ve been using JavaScript functions as class objects and utilizing private, priveleged and static members and functions to my hearts content. JavaScript++ provides all of these class features in its JavaScript class system. However, if you’re using plain JavaScript, let me share how to create classes.

A Basic Class Instance

function MyClass() {
   //...
}
var oClass = new MyClass();

Public Members

Public functions and variables are available to access on an instance of a class.

function MyClass() {
   //..
}

//public member variable
MyClass.prototype.publicVar = "My Public Variable";

//public member function
MyClass.prototype.publicFunction = function() {
    alert( this.publicVar );
}

//create an instance
var oClass = new MyClass();

//run a member function
oClass.publicFunction();    //Alert: "My Public Variable"

Private Members

Private member functions and variables are hidden to outside code. Only public functions can access them.

function MyClass() {

   //reference to this
   var self = this;

   //private member variable
   var privateVar = "My Private Variable";

   //public member variable
   this.publicVar = "My Public Variable";

   //private member function
   var privateFunction = function() {
      self.publicVar += " Modified By A Private Fucntion";
      alert( self.publicVar );
   }
}

//create an instance
var oClass = new MyClass();

//run a private member function
oClass.privateFunction();   //private function is undefined

//get a private member var
alert( oClass.privateVar );   //private var is undefined

Static Members

A static function or variable is available on the base class (or JavaScript) function, but is not available to the class instance.

function MyClass() {
   //...
}

//declare a static member
MyClass.staticVar = "My static variable";

//declare a static function
MyClass.staticFunction = function ( pInput ) {
   return new MyClass( MyClass.staticVar , pInput );
}

//create an instance
var oClass = new MyClass();

//run a static function (NO access to private or public)
oClass.staticFunction( 9 );  //staticFunction is undefined on an instance

//run a privileged member function on the class
MyClass.privilegedFunction();   //The function runs

Priveleged Members

A privileged member function has access to private variables, but is available publicly.

function MyClass() {

   //private member variable
   var privateVar = "My Private Variable";

   //privileged member function
   this.privilegedFunction = function () {
      alert( privateVar );
   }
}

//create an instance
var oClass = new MyClass();

//run a privileged member function
oClass.privilegedFunction();   //Output: alerts the value of the private var

These classes may come as news to you…or maybe you’ve known about them since you were a fetus. In either circumstance, they’ve been a big help to me.

I wrote this script because I wanted a dead-simple way to show my dribbble shots on my site. I wanted to be able to customize the markup with a custom template and have the content client side cache. I wanted to do the same with Pinterest inspiration that I was finding for illustrations that I love. Instead of having dedicated scripts for every service, why not just have one very small raw script (~200 lines) to do it all?

Dug.js Setup

Enough windbaggery, let me show you how to use it. Because Dug.js is on my site, I can run the code in this blog post. Let's talk about that Dribbble implementation first. So, I want to pull in my latest Dribbble shots. Scanning the Dribbble api, I see that they do support JSONP and that you can pull in all player shots with the following url: http://api.dribbble.com/players/:id/shots

Rad! With Dug.js, we're nearly there. In it's simplest form, you really only need two things.

1. An api endpoint (jsonp callbacks supported)
2. An HTML template to display the data

With that in mind, let's setup dug.js to pull dribbble shots from an awesome illustrator's account:

<script>
  dug({
      endpoint: 'http://api.dribbble.com/players/justinmezzell/shots',
      template: '{{#shots}}<img src="{{image_400_url}}">{{/shots}}'
  });
</script>

If you're familiar with mustache or similar templating, the {{#shots}}...{{/shots}} section apply the html within it over every shot, in this case, emitting an image for each shot. Hint: you can also supply a CSS selector to target a template script, and Dug.js will pull the content from it.

That's a pretty simple example, but what if you want each shot linking to it's detail page? Here ya go:

<script>
  dug({
      endpoint: 'http://api.dribbble.com/players/justinmezzell/shots',
      template: '<ul>\
          {{#shots}}\
            <li>\
                <a href="{{url}}" title="{{title}}">\
                    <img src="{{image_400_url}}" alt="Image of {{title}}">\
                </a>\
            </li>\
        {{/shots}}\
      </ul>'
  });
</script>

Here's an actual demo of the above code, running:

That's it! Pretty simple huh? Yeah, thats why I dig it too!

Dug.js Parameters

For those that are curious, here's a few parameters (as json name-value pairs) that you can pass into dug to do some additional schnazzy things:

• target — the id of an existing DOM element to put the html results in.
• cacheExpire — # of milliseconds to cache data on the client side (using localstorage). 0 for no caching.
• callbackParam — the name of the query variable a JSONP service will use for a callback function. Most services just use 'callback=functionName', but sometimes a service will use a different query variable name.
• success — a function to call when JSONP data is successfully retrieved.
• error — a function to call when JSONP data is not successfully retrieved.
• beforeRender @param data — a function called before Dug.js renders the template. Helpful for trimming/changing the data before it renders.
• afterRender @param data — a function called after Dug.js renders the template.

Download Dug.js

Dug.js is completely free! Although, if you're diggin' this script hard and want to help fund my graphic tablet purchase (for art like Dug the dog above. Yay!), feel free to donate.

Dug.js is for everyone!

Name your price! Any donations go toward funding my graphic tablet purchase (for making more art like Dug). It also allows me to drink coffee or microbrews so I can have the sanity to support Dug.js, but, if you're low on the dough, enter a zero and off you go!

Download

Download Dug.js

License

Dug.js is 100% free under the WTFPL — no link backs or anything needed.

Shapes

It's all about the shapes. If you don't have good lines and shapes, no amount of texture,color or effects is gonna save you. Obsess and stress over your shapes. This means drawing, then re-drawing then drawing again. It's okay to make a drawing with bad shapes. Find the lines you like, use them, and move on.

DRY

Don't repeat yourself and clone and flip objects to save time. People can tell that your stuff was made by a computer and in the fastest time possible. Take the time to make your stuff human — it's one of the few differences we have from the machines.

I'm now learning just to sketch more. Our hands emit more human lines than a computer ever will. Go figure. Genius, right?

Iterate

Do lots of iterations to come up with clever color combos after you build your shapes. Colors/technique are so important. Just like bad shapes can ruin great textures and colors, bad colors, textures and technique can ruin great shapes. Be picky. Wait for the right iteration.

It's Not a Sprint

Folks, this ain't a sprint. This is a marathon. Get settled in and comfy for the long haul. Take time each day to practice. Oh, you don't have 30 minutes a day to practice? What are you doing right now? Yup, reading this damn blog. Stop reading and start doing. I'll be willing to bet a naked mole rat that all the time you waste Pinning, Tweeting, Dribbbling, Facebooking, Videogaming, and watching re-runs of Star Trek: The Next Generation are the actual issue.

KISS

Keep it simple stupid. If you're struggling with all sorts of techniques and post-processing, it's often best to just choose the simpler route/colors/styling. Maybe just stick with sketches as an even simpler form. Often I found myself never moving on to another project because I was intimidated by the size of the piece of art I conjured up in my head. Sometimes it's best for your growth to KISS — for pete's sake you ain't making the sistine chapel.

Don't Be Afraid

Don't be afraid to make something you love, but nobody else seems to love. Pouring your passion into something is more important than robotically churning out something the masses will love. At the end of the day, if you hate it but you've somehow stumbled onto something everyone else loves, you've settled into a pattern that simply won't stand the test of time — you'll eventually lose interest. Also, the proof is in the long-haul, not the instant. Keep at your craft and you'll grow and find your own audience.

Stop Comparing

We're surrounded by it more than ever — the simply fantastic work of others. It's great to learn from the greats but there's a fine line between worship and studying. Study their work sure, but never let it let you lose sight of the fact that there's greatness lurking in you too. Also, too much comparing has you trying to mimick them as if they are doing it the only right way and you can't find a different way of expressing a shape, character, etc. One of the most significant things you can't afford to lose in your art is your originality, your eye.

No Such Thing as an Overnight Success

If there's any lie you can believe its that people are just granted this insane skill and you are just behind. They're all overnight successes and you actually have to work to get there. Lies. They all had to work to get there. All of the "overnight successes" you see are missing one key component. The backstory. The history. The failures and iteration. I heard somewhere that Rovio, the makers of Angry Birds had something like 20 flopped apps before the success of Angry Birds — I believe it and so should you. Now go out there and fail!

Save Your Mistakes

Don't erase. Sketch, draw, design and make mistakes. Then do it again. Yeah, your work looks like a steaming pile of dung right now, but I'll bet all of a sudden that funky nose you drew starts growing on you. You'll never make a mistake of a whole drawing, but rather in parts. That means that some of the parts are good parts. With each step forward, look back at your previous drawing and use the good stuff in your bad drawings and make it better. With time, something you like will begin to emerge.

Rarely Share

The important thing here is growth for you, not for you to show off your work and that you are da bess. Stop sharing every moment of your life. Draws a line *snaps a picture*, *posts it to Instagram*, *talks about how amazing it is that I am drawing*, *admires that people care that I am drawing and that I have 10 likes on my post*, *draws another line*, *snaps another picture*...repeat. Seriously, we all know this is getting really ridiculous. Let's pull on the wisdom of the sages and spend some quiet time to ourselves, growing. To heck with sharing.

Cheers my fellow creators. Now go create!

Just recently, I ran across a radial gradient bug found only in Chrome 13.0x. Good luck searching for a CSS filter to apply a style purely for that browser. Good luck trying to use Modernizr to detect the glitch in gradient rendering. This was a specific bug to a specific version of a specific browser. What I wanted was a Modernizr-ish way of using CSS to swap out an image for a radial gradient, but only for that version of Chrome. I'm sure you're feeling me here. I'm sure you've hit some similar snags.

The thing is, some of all the old hacks work just fine on older browsers: IE6/7 hacks. I found it harder to find hacks for the newer browsers because, yes, you guessed it, they typically are better — so less vulnerabilities, less hacks. I came up with this snippet of code to help me with newer browsers.

<html>
    <head> … </head>    
    <body>
        <script>
            var b = document.documentElement;
              b.setAttribute('data-useragent',  navigator.userAgent);
              b.setAttribute('data-platform', navigator.platform );
              b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
        </script>
        …
    </body>
</html>

Enter the code. What you need to know about the snippet of code is that it produces output like this:

<html 
    data-useragent='Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.112 Safari/535.1' 
    data-platform='MacIntel'>

Or for IE9, code like this:

<html 
    data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
    data-platform='Win32'>
    ...
</html>

Oh, but it gets more interesting. Now we can target iPads easily. How so?

<html 
    data-useragent='Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10'
    data-platform='iPad'>
    ...
</html>

Now, voila! I have an attribute. And guess what? I can use CSS attribute selectors to style something. Let's look at a snippet of CSS that will fix that Chrome issue I had.

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Using the *= wildcard attribute selector, I can now match any portion of the string, in this case, I wanted to target the useragent of Chrome 13.0x. If I wanted to apply the fix only to Chrome 13.0x browsers on Windows, I'd simply use a rule like html[data-useragent*='Chrome/13.0'][data-platform='Win32']. Want to target iPad? Easy business, friend. Just use html[data-platform='iPad'].

Last, you may have noticed the "touch" class. Yup, you can use that class to target touch devices. For instance, let's say you wanted to make an action appear on :hover in your application. You might have some CSS like this:

li .action{
    opacity:0;
}
li:hover .action{ 
    opacity: 1;
}

But, touch devices don't have :hover. Using the boilerplate addon, with one line of CSS, you'll be covered:

.touch li .action{
    opacity:1;
}

And that's it! Feel free to use this code however you see fit. Let me know if you see a better way this could be implemented :)

Ok, now enter the scenario. Imagine you've got some CSS like so, only you'd like to use the standard unicode for the arrow character:

a.next{
    ... //styles for this link
}
a.next:after{
    content: "➜";
}

First, use a browser console and run the following snippet:

'➜'.charCodeAt(0).toString(16);//outputs '279c'

The hexadecimal output for the arrow glyph using Chrome's console (my console of choice) is: 279c. I'll simply insert that unicode into the CSS content, with a backslash before it, like so:

a.next{
    ... //styles for this link
}
a.next:after{
    content: "\279c"; //Hexadecimal unicode output
}

If you'd like to find the unicode for any other character, simply swap the character you want for the arrow above, like so:

'⌘'.charCodeAt(0).toString(16);
//outputs '2318' (in a browser console)

That's it. Now you've taken a character and converted it to unicode. Easy peezy. Here's a bookmarklet so you never have to use your console.

Convert to Unicode

I wondered after all these years (it's been like 7 years!) since I wrote that tutorial, how I would attack the same problem. In my mind, there were two failures from my previous experiments. I felt the star rating should use a radio form control (also, a progress bar might be semantically appropriate too) instead of links. Also, to keep up with the insane resolution game these days, it would need to be scalable ala SVG.

Rather than bore you with the walkthrough, I'd prefer to let you tinker with it on codepen:  

See the Pen CSS/SVG Star Rater by Rogie (@rogie) on CodePen

You might be asking the question, why not just utf-8 encode rather than base64 encoding the SVG? Seems a fair question — my answer? Some modern browsers seem to choke on utf-8 encoded data-uri SVGs. But, if you'd like to tinker with the data-uri with utf-8 encoding, here's the codepen for that.

Also, you may have noticed that it's not only retina-proof, but it is scalable — try editing it on Codepen and changing width to 500px and height to 100px. What follows, you will witness, is nothing short of wizardry.

The Nitty Gritty

Supported in: IE9+, Firefox 10+, Safari 5+, Chrome 14+, Opera 10+, iOS6 Safari, iOS6 Chrome 

It was the dawning of social media as we now know it. Blogging had established its right as a citizen of the web and websites like Twitter and Dribbble were just coming out of the woodwork. The excitement and the thrill of seeing all of your friends using them was overwhelming. Getting followers, retweeting, having your shots liked and the like was addictive and fun. I was blogging regularly, but something about microblogging felt more like me. Heck, with my ADOS...err...ADD, it was a natural fit. 

When I entered the web scene, I was green. I knew nothing of social currency like followers, likes, retweets, comments and visits. I viewed the web for what it was. What I loved about the social web when I first encountered it was something pure and something really great. A platform to have a voice and to share — to share what I'd learned. After all, I had learned much of my skill-set in all things web due to the kindness of people teaching on the web. My first love for the social web was pure and filled with good intent. 

The First Things

I've been thinking a lot lately about the first things. Like when you first fall in love with someone or something and innocence and the purity wrapped up into those things. For me, it's like a good beer. If you love good beer, you'll know what I'm talking about. It's amazing savoring those delicious sips. The mellow buzz and subtle euphoria associated with its flavor and substance. For those that might have struggled with taking it too far, there's a huge difference between the first beer and the eighth. By the eighth, that substance has been stripped of its redeeming qualities and reduced to an addictive tool. 

This isn't a rant against alcohol. Alcohol represents a metaphor for how we can take something innocent and pure; be it a romantic relationship, appreciation of a great beer, a delicious meal, a word of encouragement from an admirer of your work and twist it into something addictive and ugly.

With alcohol, it's easier for some to understand when your tendency has changed to an addictive one. With other addictive things in life, however, it can take some serious heart surgery to unveil the source of the poison.    

Social Poison

Words of affirmation can make your heart soar. They can encourage you to reach deeper and do more — to do better on that next project. Especially for creatives that can be overly self-critical, affirmation for a job well done can be the catalyst for calling out greatness from within them. 

For me, receiving praise for my work was just that: a catalyst for pushing me further. At first. For those that were kind, that uplifted me, that gave me a thumbs up, I thank you.

I remember a question that a close friend of mine, Jesse Gardner once asked:

Do you feel like your social popularity has hurt your growth as a person and designer?

That was a fantastic question that I gave serious thought to. Had I achieved no "status" at all, would I be better off today? The answer, I believe, for me, was yes. It was that question among many like it I had asked myself earlier that led me down a road of self-discovery and freedom.

Social Addiction

I hope that you, the reader, can see me with a bit of grace and see yourself in my failures. The reason I chose to be vulnerable about my own failures is because I view social addiction as such a large issue facing us, that it needs to be brought to light. For many of us, it's hard to understand that we are addicted until its run its destructive path. 

To be honest, I realized my issues with social addiction over two years ago, but I didn't experience it's destructive nature until nearly a year ago. I noticed a correlation between my perceived happiness and online social interactions. When I'd tweet and get a large response or post a shot to Dribbble and get "like" fame — I couldn't help but feel euphoric from that perception of "fame." A childish, puny version of fame, but it still deceived me. I found I always wanted more.  More fame, more likes — more of the limelight. And you over there wagging your head at what was my addiction, yeah, you — close your live stats view or stop manically refreshing that post you're looking for the next comment on. It's all addictive.

The more you layer on the compliments, it feels fantastic, but what you don't realize, well, at least I didn't realize was what it is preparing your heart for — what your mind and heart believe is normal. It's a lot like running. Remember that first run? That first day is rough, but each time you train, your body adapts. It begins to welcome this new routine as "normal".  Before you know it, you're running 5 miles a day and your body has adapted. It's become a part of you.

It's like that with the social web. You eat the "like" drug and boy does it taste good. You keep consuming it, but you want more. You don't realize that your mind and heart are now accustomed to this new "drug". Worse, what will happen when you take the "drug" away? Sadly, I'm not sure all of us will find that out.

Social Withdrawals

When I discovered my addiction, it seemed mild. What I didn't know was what I would find out later — my true condition. When I realized that I kept returning, kept yearning for more of the "like" drug, I knew it was unhealthy, and so I began to pull back. To withhold posting tweets, shots, posts — I'd turn down speaking opportunities because I knew that if successful, they could enable the addiction within me. I'd play this little game every time I felt the urge to post anything. I'd ask myself "Rogie, what's your intent with this?" Most often that would result in not posting anything because I knew my heart's intent was wrong. What I learned later was a surprise.

I began to work on projects that I didn't think I would get a lot of praise for — sharing things that I felt to be truly altruistic, like guides or sharing my process in work. Things that would help others, not myself. This was a great move for me. When we are faced with issues of pride or self-centered behavior, often, the best thing is to do the opposite. To intentionally seek out things focused on selflessness and uplifting of others. Sharing, charity work, giving, a kind thoughtful word or focusing on others pain or needs.

The "drug"  was removed from my system, and with most addictions, withdrawals happened. I'd fiend for attention. I'd be jealous of others for it. I'd notice others receiving the praise that I lusted for and I'd crave it too. But, this newfound knowledge was my ally. I knew that this "drug" was destructive, so I didn't return to it.

But what followed was an emptiness that taught me a very valuable lesson in life. You see, after removing the drug, it unveiled my true nature. My true nature was very human indeed — the need for affection, to be of worth and valuable to people's lives. To make a difference with my puny existence. To have "friends", but, I was doing it all wrong. 

After removing the like "drug", I realized I hadn't truly invested myself in real, valuable, balanced relationships. Not these fake, smiling shiny faces, masked by a 50 pixel rounded rectangle talking about their next big achievement while privately hurting and dying inside. Online interactions are great, but they're no substitute for the raw, honest grit that you'll get with a real friend. A real friend will call you on your shit and tell you if you're slipping up. An online friend will publicly declare your "awesomeness" to the world trying to scream above the noise to be heard. I learned that my addiction had pulled a switcheroo. I traded deep, real, personal relationships for shallow likes, tweets and visits. No wonder my heart was broken. I'd been feeding it a substitute and an unbalanced one at that. 

Unbalanced

All these years, I'd been working so hard, to earn money for my family. I'd made the internet my throne — I'd wake up to this little glowing black box and hook up the feeding tubes again, never realizing that what I needed was a balanced meal, a balanced life.  My "friendships" weren't balanced. They were one-sided 140 character statements on a screen, declaring how awesome I was. I didn't need to hear that. Nobody needs to hear how great they are all the time, because, the truth is...we're not "great". But, our connection to others and the beauty of a real friend challenging you in truth and love is.

What I needed to hear was how shitty I was doing, but nobody shares their emptiness online — it's too ugly. I needed to have a friend say, Rogie, you're screwing up in your life. Here, take my hand and let me help you fix it. If you only have shallow, positive relationships online, there's no-one to catch you when you fall.

This newfound realization was everything to me. I began seeing a counselor and finding how having false relationships through a glowing screen had hurt me. I began to return to real relationships, local relationships where you can look a dude in the eyes and laugh over a movie or a beer. I began to intentionally think about my friends and what they were going through. To put myself on the pro-active giving end of kind and thoughtful words, not just the receiving end. 

And this return was hard. I found myself going back to the old ways, trying to milk a relationship of what it could return for my praise, for my benefit.  But this real, beautiful return to balanced relationships was key.

Derailed

Social addictions can be some of the most deceptive hurdles to overcome in our lives. When are we feeding our egos with false, shallow compliments from near-strangers? Are we basing our concept of our own success off of the compliments of well-intentioned, yet false online personas? Had I continued to believe the deception of social addiction, I wonder what growth I would have missed out on? Would my course be derailed? Has it already? Had I caught on earlier, I guarantee I'd be twice the designer I am today. 

A passage in Proverbs sticks with me:

Walk with the wise and become wise; associate with fools and get in trouble.

In my experience, "associating with fools" in this narrative, represents an addiction to comments, likes and feedback that only builds and inflates our view of ourselves. Walking with the wise is to associate with those people that know when you need building up and when you need a swift punt of critique of your work or character. In other words, if faced with an endless sea of compliments or a road of critiques, I'll take the critical path — the path to growth.

Included in the download are these variants:

• Circle
• Rounded Square
• Square
• Symbol (just the logo) 
• Monochrome 

Simple & Styleable

I kept them simple intentionally, but with a little know-how and a sprinkling of pixie dust, you can pull off some pretty sweet styles, like these:

License

This icon set is 100% free under the WTFPL — no link backs or anything needed. All I ask is that you check out my other efforts, Fine Goods and NeonMob.

Cheers! 

Download Social Media Icons

For starters, a face-lift. In researching to rebrand myself as something more intentional than a jungle island based theme (no worries, I still love jungles), I unearthed a brand that was a bit more...me. My new digs, rog.ie hosts a style and brand thats a bit more me: winsome, quirky, cheerful, positive, a dash of retro-flair and red. Yeah, I pulled a 5-year-old and designed a site using my favorite color. 

My previous business website, playground, and blog, Komodo Media will eventually be folded into this site. Never fear, the downloads section will pop up here soon and a more comprehensive portfolio. I'll make sure all the greatest immature blog posts make it here. Scratch that. Let's let those die.

Sure theres more to come. After all, isn't this just a blog right now? I'll spare talking about what I'll add and focus on what I'm adding: content. Ages of posting content in the form of thoughts and designs to Twitter and Dribbble have left me wondering where my voice had gone: a voice I had, but lost track of. It's interesting how sometimes the first things that are the best things. So, back to basics. Back to blogging, giving away things I create and discussing what I am learning in life and in the work of my hands: the kind of content I enjoy creating.

Many of you have been kind enough to follow me and take interest in the things that delight me over the years, be it Jesus, Dubstep, Illustrating, Disney or Micro-brews and for that, I thank you.

Here's to something new.  Cheers.