Just Grin and Barrett

Down the Barrel: A short story of found appreciation.

Tue, 10 Apr 2012 17:17:52 -0400

Down the Barrel: A short story of found appreciation.:

Some things tend to change the way you live your life. Not everybody gets to experience these things. Some people live everyday on a routine that goes on and on, never evolving. But, every once and a while something happens that can force your priorities into an order previously unseen.

Some inspiring words from a coworker of mine, Tim Holzemer.

Steve Jobs

Sun, 09 Oct 2011 23:27:36 -0400

Steve Jobs:

lilly:

Like many of us, I’ve been thinking a lot about Steve Jobs the last few days — thinking about the man and his legacy. I’ve been having some trouble even understanding the way I feel, let alone being able to put it into words. Lots of folks have asked me what I think, and have been surprised that I…

Some great thoughts on the recent events from John Lilly.

"…sooner or later, things start wearing off on you if you’re in proximity to them for long..."

Wed, 31 Aug 2011 00:15:00 -0400

“…sooner or later, things start wearing off on you if you’re in proximity to them for long enough.”

- - Joshua Blankenship, The Influence of Proximity

Funny that I came across this tonight, I actually had heard this in a meeting as a takeaway and to read it again. Great imagery that Joshua brings up in the first few paragraphs.

"Because users can change the size and shape of their web browser windows, you should check your page..."

Sun, 21 Aug 2011 01:09:14 -0400

“Because users can change the size and shape of their web browser windows, you should check your page layout in different configurations to be sure that it works well however the user views it.”

- The Apple Web Design Guide - Circa 1996 -

In a Word: PERSIST.

Wed, 13 Jul 2011 23:00:21 -0400

In a Word: PERSIST.:

Some great advice to get through your day.

cameronmoll:

This morning I tweeted about a lack of inspiration and having to trudge through it. In response, @brainhofj tweeted about the following:

This handwritten letter is by Austin Madison, Pixar animator of Rex, the green dinosaur in the Toy Story series (among other characters he’s…

Thoughts On Subconscious Information Processing

Fri, 08 Jul 2011 12:45:46 -0400

A good quote and great start of an idea from Fred Wilson:

He explained that once your brain starts working on a problem, it doesn’t stop. If you get your mind wrapped around a problem with a fair bit of time left to solve it, the brain will solve the problem subconsciously over time and one day you’ll sit down to do some more work on it and the answer will be right in front of you.

This isn’t the first time I’ve come across this article but I came to it again and I definitely believe in this idea of chipping away at a problem. I know there have been times in the past where I’ve either crammed in a problem or design or studying and really felt like maybe it wasn’t the best effort I could have put forth. Or that you end up finding a better solution the day (or week) after.

It’s one thing that I’m striving to do more often. Even if it’s just taking down thoughts everyday.

"Creativity is applying ordinary tools of thought to existing materials."

Fri, 08 Jul 2011 12:32:10 -0400

“Creativity is applying ordinary tools of thought to existing materials.”

- Kerby Ferguson - Everything is a Remix

Everything is a remix. Great series based on creativity and the...

Fri, 08 Jul 2011 12:29:20 -0400

Everything is a remix.

Great series based on creativity and the notion of everything is not new, a remix of sorts. Creating something new is a transformation.

I’m thoroughly enjoying this series and you should check out part 1 and part 2 also.

Beautiful Hard Graft Phone Wallet

Tue, 14 Jun 2011 01:24:00 -0400

Beautiful Hard Graft Phone Wallet:

A beautifully hand made phone wallet from Hard Graft. It’s been added to my wishlist.

A few CSS rounded tooltips

Tue, 14 Jun 2011 00:46:00 -0400

Some interesting tidbits I’ve been meaning to post. A couple weeks back I ran into a couple Dribbble posts that were looking at some ways to create the designs with CSS. Being that I was more interested myself to see what the outcomes would be for my own sake, I dove in trying to see if they could be done differently than anyone else had posted.

Rounded Point Tooltip

The first was this design by Davy Kestens. The key to it was having the rounded point on the left hand side and also creating a seamless gradient from top to bottom also. I quickly threw out this fiddle - http://jsfiddle.net/T4Jg4/6/ which is basically using a rotated square as an :after element with gradients applied:

Seamless Border + Transparency

The second was a bigger task, creating this design by Jeff Broderick into as much CSS possible. Though the animations are there and lots of psuedo :after and :before elements (including the big shadow), I feel the biggest take away from this is the triangle with the continuous border and transparency seen here:

On the left is the photoshop mockup, the right is the in-browser snapshot (Safari 5).

As you can see it’s really close and as a whole, I believe it’s not as noticeable either. You can view the whole CSS in action here: http://grinnbarrett.net/stratus/

It comes with the same premise, a rotated square with gradients applied, but this time to make the border not come behind the transparency of the triangle(and even having the inner glow too), I made a gradient that is the same background gray from 47% to 53%. If you look really close you can recognize it, but for the most part I actually feel like I accomplished something that could be implemented for real designs in the future to stay away from a bloated PNG as a background. I didn’t spend as much time perfecting it, as there are some loose ends to tie up on it along with cross browser compatibility testing (though I tested across Chrome, Safari and Firefox). It still could be useful. Here’s a fiddle to dink around with if you want: http://jsfiddle.net/3arrett/cfdNS/1/

"One’s dreams are constantly evolving, rising and falling, changing course."

Tue, 14 Jun 2011 00:12:00 -0400

“One’s dreams are constantly evolving, rising and falling, changing course.”

- Conan O’Brien, 2011 Dartmouth College Commencement Address

Preserve-3d and List Items with a Column Count

Thu, 26 May 2011 00:14:00 -0400

So in working on our new site for Gaslight, I’ve run into a little quirk dealing with * {-webkit-transform-style: preserve-3d;} and and unordered list with a -webkit-column-count: n;.

The idea behind using preserve-3d came from an article I came across by Juan over at Cuban Council. The premise comes from using 3D to have Webkit browsers smooth out animations on both mobile and desktop and while using it on the universal selector, saves me from writing -webkit-transform-style: preserve-3d; all over my stylesheet because I have multiple animations throughout the site. I saw major improvements across the board on my iPhone and desktop Webkit browsers when using it, though I don’t know if there’s any true downside to using it on a universal selector.

I did run into a bug that I’ve replicated here on jsFiddle. If you look at it in Chrome, it renders as expected, but Safari seems to be fudging this up though it wants to respect the flow of using multiple columns (height collapsing down with the <hr> following), but the <li>'s don’t. I’m calling it a bug, well because it seems to work right in Chrome and also was coming out right on mobile Safari.

The fix I used was to declare li {-webkit-transform-style: flat;} for the offending element and it slides into expected place. There was also a slight blip on a psuedo :before element I used. Now being that those were the only 2 conflicts I had, I’d still be open to suggestions of improvement over not using the *, even though the only performance issues I’ve ever read about deal with resets, and I’m using * to improve my performance in browser with one line of code.

I’d like to post more about using 3d in the realm of CSS and performance factors, and even some of the parts that I’m working on currently. The site should be launching in about a week or so, and then you’ll be able to play with a few of the ideas that use 3d.

Responsive Web Design by Ethan Marcotte

Thu, 19 May 2011 00:24:33 -0400

Responsive Web Design by Ethan Marcotte:

Having just finished some of these, I’m hoping to get my hands on a copy.

cameronmoll:

I have an advance copy in hand, and I can’t wait for this to be released to the general public on June 7. Ten bucks says it outsells the first A Book Apart title, HTML5 for Web Designers, which I’m fairly certain did extremely well.

Pure CSS3 Animated Chat Icon

Sun, 08 May 2011 02:28:00 -0400

Today I’d like to share with you the code that I had set up for my chat icon for my social navigation. My ideas were to bring a little more context to the icons on hover and I wanted to come up with an animated version for each one. After coming up with the chat icon, I had used some images to create it and figured that there could be an way to do it without using any images for fun. You can view the demo here - CSS3 Chat Icon Demo

The HTML

First we build our foundation of the chat bubble:

	
<div class="chat">
	<span class="line"></span>
	<span class="line"></span>
	<span class="line"></span>
	<span class="dot"></span>
	<span class="dot"></span>
	<span class="dot"></span>
</div>

This is all the HTML that is needed to do the bubble. I’ve purposely left them as empty spans as they aren’t necessary to any of the page markup and have no semantic meaning to a user/bot/alien.

The CSS

Now that we have our markup, let’s make it look like an actual conversation. We’ll start out with the bubble shape:

	
.chat {
	position: relative;
	height: 30px; 
	width: 43px; 
	
	-moz-border-radius: 26px / 18px;
	-webkit-border-radius: 26px 18px;
	border-radius: 26px / 18px;
	
	//Background gradient created with the help of http://www.colorzilla.com/gradient-editor/
	background: #f2c718; /* Old browsers */
	background: -moz-linear-gradient(left, #f2c718 0%, #e7980e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f2c718), color-stop(100%,#e7980e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #f2c718 0%,#e7980e 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(left, #f2c718 0%,#e7980e 100%); /* W3C */
}

.chat:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	
	//Shaping the triangle with borders
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #eeb614;
	
	position: absolute;
	left: 0; 
	bottom: -3px;
	
	//Turning a right triangle into an isosceles triangle with scaleX() since it was too wide
	-webkit-transform: rotate(30deg) scaleX(.4);
	-moz-transform: rotate(30deg) scaleX(.5);
}

In order to take our oval shape, the first number is the horizontal radii (26px) and controls all 4 corners. The second is the vertical radii (18px). Depending on the height and width of your chat bubble, your radii will follow - For the oval, a radius of just over half the width has seemed to work best.

Instead of creating more markup within the document itself, we’re rendering our chat bubble tail with the psuedo-element :before (triangles thanks to CSS Tricks). Positioning and rotating the triangle into place while also scaling the x-axis to squeeze it together finishes off the look of the chat bubble.

Now we’ll set up the lines and circles that make up the dialog. A simple 1px white line and the 4px circles to accommodate them and positioned into place:


.line {
	width: 20px; 
	height: 1px;
	 
	position: absolute; 
	top: 9px; 
	left: 13px;
	
	background: #fff;
	-webkit-box-shadow: 0px 1px 0px #e58e39; 
	-moz-box-shadow: 0px 1px 0px #e58e39; 
	box-shadow: 0px 1px 0px #e58e39; 
}
.line:nth-of-type(1n) {top: 9px; left: 13px;}
.line:nth-of-type(2n) {top: 14px; left: 8px;}
.line:nth-of-type(3n) {top: 19px; left: 13px;}
.dot {
	width: 4px; 
	height: 4px; 
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	background: #4b503f; 
	
	position: absolute;
	top: 7px; 
	left: 8px;
}
.dot:nth-of-type(1n) {top: 7px; left: 8px;}
.dot:nth-of-type(2n) {top: 12px; left: 29px; background: #fffd18;}
.dot:nth-of-type(3n) {top: 18px; left: 8px; background: #4b503f;}

You should now be seeing the final chat bubble all created out of CSS3. This is what non-webkit browsers should be viewing with the exception of <IE8 which will see a magnificent box. It gets the job done, but doesn’t create the same impact as what some simple animation can do to it. The first thing we’ll attack is animating the dots and controlling their delay within the animation keyframes:


.dot:nth-of-type(1n) {
	-webkit-animation-name: dot1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.4s;
}
@-webkit-keyframes dot1 {
    0%,95% { opacity: 1; }
    100% { opacity: 0; }
}
.dot:nth-of-type(2n) {
	-webkit-animation-name: dot2;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.4s;
}
@-webkit-keyframes dot2 {
    0%,31% { opacity: 0; }
    33%,100% { opacity: 1; }
}
.dot:nth-of-type(3n) {
	-webkit-animation-name: dot3;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.4s;
}
@-webkit-keyframes dot3 {
    0%,65% { opacity: 0; }
    67%,100% { opacity: 1; }
}

As you can see I have 3 separate animated keyframes for each dot, essentially broken down into viewing thirds - dot1 is showing all the time, dot2 is hidden the first third, and dot3 is hidden the first two-thirds of the animation-duration. The reason I chose the route of 3 separate keyframe sets and forgo an animation-delay with 1 keyframe set, is that I wanted this to be on an infinite loop and only the first iteration of the keyframe set is delayed when using the property. Also, the animation-duration is your end time of the loop, so if you want to slow it down a bit, all you need to do is lengthen the time.

When it comes to the line animations, I set it all up the same except for we’re animating the width property instead of the opacity:


.line:nth-of-type(1n) {
	-webkit-animation-name: line1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.4s;
}
@-webkit-keyframes line1 {
    0% { width: 0; }
    33%,100% { width: 20px; }
}
.line:nth-of-type(2n) {
	-webkit-animation-name: line2;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.4s;
}
@-webkit-keyframes line2 {
    0%,33% { width: 0px; }
    67%,100% { width: 20px; }
}
.line:nth-of-type(3n) {
	-webkit-animation-name: line3;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.4s;
}
@-webkit-keyframes line3 {
    0%,67% { width: 0px; }
    100% { width: 20px; }
}

This completes the chat bubble animation. The final product. The only thing left would be to implement it how you want to, I put it on a simple :hover event:


.bubble {
	-webkit-transition: all ease-in-out 400ms; 
	-webkit-transform: scale(0); 
	-webkit-transform-origin: bottom left;
	
	-moz-transition: all ease-in-out 400ms; 
	-moz-transform: scale(0); 
	-moz-transform-origin: bottom left;
}
a:hover .bubble {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
}

The possibilities are endless, I just hope this can spark an idea in your head of what you can do with creating your own shapes and animating them within the browser.

If you had any questions or comments feel free to hit me up on Twitter.

Follow me on Twitter, Dribbble and Tumblr

Dribbble

Sat, 07 May 2011 00:02:36 -0400

I’d like to thank Kyle Meyer (@kylemeyer) for drafting me to Dribbble. I hope I rep MN well and have a lot of exciting things that I’m working towards that I’ll be sharing on there. Be sure to follow me for what’s to come down the line.

High five to Kyle!

The Golden Circle and Why

Wed, 04 May 2011 23:23:16 -0400

A great video about some of the greatest leaders and the power of why. One of the biggest take away is “People don’t buy what you do, they buy why you do it.” I think it rings very true and think you should take 20 minutes of your time to watch, well worth it.

How great leaders inspire action - Simon Sinek

Also: startwithwhy.com/

"Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative..."

Mon, 02 May 2011 01:47:20 -0400

“Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you. A lot of people never get past this phase, they quit. Most people I know who do interesting, creative work went through years of this. We know our work doesn’t have this special thing that we want it to have. We all go through this. And if you are just starting out or you are still in this phase, you gotta know its normal and the most important thing you can do is do a lot of work. Put yourself on a deadline so that every week you will finish one story. It is only by going through a volume of work that you will close that gap, and your work will be as good as your ambitions. And I took longer to figure out how to do this than anyone I’ve ever met. It’s gonna take awhile. It’s normal to take awhile. You’ve just gotta fight your way through.”

- Ira Glass (via nefffy)