Noah Stokes | Es Bueno

Industry Conf – A Recap

Tue, 07 May 2013 21:34:00 PDT

I was incredibly privileged to speak at the first ever Industry Conference. Gavin put on an incredible conference with a stellar line up. There are several great write-up about the conference itself here, here and here. For me personally, it was an honor to share the stage with incredible speakers and a great pleasure to make new friendships with others I had never met before.

It was my first time in the UK and I must say that Newcastle was the perfect setting. The venue was an old turbine building which has immense character and a great vibe to it. The photo above is of the Millennium Bridge which we crossed each day to get from our hotel to the venue. I love how they lit it at night.

I really do hope that Gavin continues Industry Conference for many years to come.

The Gently Mad

Fri, 12 Apr 2013 15:38:06 PDT

The Gently Mad:

Adam was kind enough to have me on his wonderful podcast, The Gently Mad. Listen along as I talk my way into your heart.

Issue with Respond.js, IE8 and Your Media Queries

Mon, 18 Mar 2013 13:52:00 PDT

Edit: The fantastic folks behind Respond.js have squashed this bug. So this entire post is now pointless. Thanks guys!

Edit: Matthew Irish pointed out that this is not an IE8 issue, rather an issue with Respond.js itself. He noted that the regular expression used in Respond.js looks for no space. I’ve updated the post title to reflect that.

I’m documenting this here for my own good as well as in hopes to save others countless hours when troubleshooting media queries in IE8.

If you don’t know already, media queries don’t play nice with IE8 and below. So you need to use this wonderful script by Scott Jehl called Respond. Respond makes IE8 play nice. I had used it on several sites before with much success, but today was different. I was unable to get IE8 to recognize any of my media queries. After much troubleshooting, this is what I discovered. My media queries looked like this:

@media only screen and (max-width : 767px)

Looks normal enough right? Well, you see that space before the colon? That little space was causing IE8 to choke on the media query and ignore it altogether. This is the correct way it should be written for IE8 to play nice:

@media only screen and (max-width: 767px)

Hopefully this little tip will serve to help others, and remind myself in the future!

Ideas of March

Fri, 15 Mar 2013 08:30:09 PDT

All around great guy, Chris Shiflett, has been doing this thing he calls Ideas of March for the past couple of years. The premise is to remind us why blogs are great and what it is that we like about them by doing our best to blog more on our own blogs. This is my contribution to that idea.

A few weeks ago I blurted out a thing about design being soulless. It got a little out of control. Jay started a Branch about it, As of this writing, it has over 10,000 views and a truck load of comments. Others responded in kind on their own blogs, or on their publications web sites.

I’ll be honest with you, I was in the middle of an IM conversation with Phil Coffman when I tweeted that. We were talking about a particular website and while Phil thought I was paying attention to his thoughtful critic, I was busy jotting down a tweet. I hit the Tweet button. Whoosh.

3,2,1… Twitter overload.

54 retweets, 37 favorites, and enough replies to keep me busy for a few hours. Mixed responses on both sides of my comments. Hmm, maybe I could have written that a little better. I would have if I realized it would have struck such a chord. So in an effort to make my original off-the-cuff statement more clear, I turned to my blog.

When I think about what the Ideas of March is all about, it reminds of the days when I was coming up as a designer and developer. As a newbie, I looked to blogs for everything. Blogs were how I learned CSS. Blogs were how I learned design. Blogs were all we had and blogs were all we needed. Blogs were then, and blogs are now our voice, our place to be heard. The other day, my blog was my place to clarify my comments and to encourage others in theirs. That is why I love blogs.

If you want to participate in the Ideas of March, here is how:

Write a post called Ideas of March.
List some of the reasons you like blogs.
Pledge to blog more the rest of the month.
Share your thoughts on Twitter with the #ideasofmarch hashtag.

Fort Knox

Thu, 14 Mar 2013 15:35:00 PDT

My three year old hates my one year old. Ok, maybe that’s a little strong. My three year old thinks that my one year old is going to gum all his toys and leave them drenched in saliva in a pile on the floor. Because of this, my three year old is really into closing doors. If he spots the enemy anywhere within a half a mile range, he’s closing doors. Yesterday he closed the bathroom door, but not before he locked it. I’m sure the satisfaction gained by keeping his younger brother out of the bathroom was worth the look that I delivered to him when I came home to discover the locked bathroom door.

I need to preface the rest of the story with this little blurb:

This particular lock is one of those twist locks not a push button lock, ok. The thing was built like a tank. Think about it this way: you could buy a safe to keep all your valuable goods, or you could just put them behind a door with this exact lock on it. This isn’t your typical lock people. No no, this is a much more complicated specimen than your eyes would give it credit, which ultimately is what makes it so powerful—it’s deceptive.

So all that to say, I try to pop open the lock with a nail, and as I suspected, that didn’t work. I quickly see that the challenge set before me is one of great magnitude. People don’t just stop pooping because the bathroom door is locked. I have options, the most obvious being a simple phone call to my father-in-law. He’s been in construction for decades and if anyone could give me direction on how to break into the Fort Knox that my bathroom has now become, it would be him.

I dial him up and explain the situation. (He stays calm, which I really appreciated because it kept me from completely losing it.) He explains that it’s likely a lock that needs a teeny tiny screw driver that can slip in there and turn the lock from the other side. I shake my fist in the air and mouth the words “Newman”. He suggests I grab a flash light and try to look inside the little hole on the front to see exactly what type of tool I would be looking for. I thank him for his service to his grandchildren and head off to find a flashlight.

In the meantime, my wife grabs a teeny tiny screwdriver that she had in a drawer and walks over to the locked door puts in the screwdriver and pops the lock open. As I rush into the room with my flashlight, yelling at the kids to do their best to stave off the panic, she mic drops the teeny tiny screwdriver and says something like “How you like me now?”.

To be honest I’m not sure those were her exact words, it was really all a blur… it just happened so fast.

Where has all the soul gone?

Tue, 26 Feb 2013 14:06:00 PST

First off, I think I read that term somewhere, soulless design. I know that I’m not the originator of it, but I liked it enough to remember it.

I mentioned it today in a tweet:
“I feel like responsive design has sucked the soul out of website design. Everything is boxes and grids. Where has the creativity gone?”

I got a ton of responses, some in agreement, some in disagreement, but an over-arching theme did present itself, and that is, we are just getting started with responsive web design. I agree, 100%.

I did however want to elaborate a bit more on my thoughts, as I think they are not about RWD as a methodology but more about the visual trends/aesthetics that are dominating our industry right now which I do think is tied to RWD because of it’s technical challenges.

If you’ve ever developed responsive site, you know that it is a different beast altogether. In most cases it is a significant amount of work. Sometimes this extra time is due to technical challenges, which are usually met with clever solutions like FitVids and FitText and sometimes it’s just the learning curve behind a new practice. Developers are astutely aware of all of these things, and I think that designers are too.

If I may go out on a limb here, I would say that as designers we are considering those technical challenges of RWD in our designs, and it is there that we are finding ourselves forgoing a detailed (what I would call “full of soul”) design for a simpler one; perhaps one that fits in to the many excellent RWD patterns that exist today. I wouldn’t go so far as to call it settling, but I do think that we are letting what we know about the technical aspects of RWD limit our creativity on the visual side of RWD.

Yes, responsive web design is brand new. Yes, we are all still learning what we can do with it, and exactly how to do it. Yes, there is a trend towards flat/clean design that plays nicely within RWD patterns. All of these things are quite true, but perhaps the most important of that bunch is that this is brand new, and we are shaping the future of it.

If I were to present a call to arms it wouldn’t be to bash the current RWD trends, but rather to push them. Push yourself to bring “soul” back to your designs, and then push your developers to come up with clever solutions to bring those soulful sites to life.

How You Like Me Now? Or Stopping a Credit Card Thief

Wed, 20 Feb 2013 14:43:00 PST

At @bold we run several projects for NFP organizations. These tend to be a target for credit card thieves as they can quickly make a low figure transaction to test if the card is still active. If the transaction is successful, they head on over to a larger online store and make a big purchase. If you’ve had your card or card number stolen before you may recognize this behavior. My wifes card number was stolen a year or so ago, and American Express called to let us know they suspected it had been lifted. When I asked how they knew, they basically told me what I just told you.

All that to say, one of our sites in particular has been the favorite of some asshole out there. I know this because I get emails with IP addresses and error messages in bulk when this guy is checking out his stash of stolen cards. My usual line of defense is to quickly paste his IP into an .htaccess file and deny him access to the donation section of the site. This works for a few minutes until he switches IP’s and runs another batch of cards through. It’s a game of cat and mouse that I’m sure both of us are sick of playing.

Then today, I noticed something. This guy was using the same email address in all of his submissions. He must be using a script to populate the form for faster submission. So today I added this bit of code to my payment processing page:

if($email == ‘assholes_email@email.com’) {
header(‘Location: http://fbi.gov’);
exit;
}

I haven’t seen any action from him since. How you like me now?

Test Your Local Web Sites On Your iPad Or iPhone Using MAMP

Tue, 12 Feb 2013 08:48:00 PST

With the rise of “all the devices” it’s important that you test your web sites in as many pertinent devices as possible. This can easily be done via a development or staging server, or via the iOS Simulator that comes with Xcode which is the way that we used to do it at Bold, that is until I learned this little trick that allowed me to test our projects right from my local machine on my iPad or iPhone (or any other device).

A note: the steps I’ll outline below involve using MAMP, so if you’re not using MAMP to serve your files locally, then this specific way won’t work for you, but I’m sure there are other ways to achieve the same effect.

All of your devices must be on the same network, usually a given, but worth pointing out. The idea here is that we setup the localhost on our desktop with the web site we’d like to view on our iPad or iPhone and then we point our iPad or iPhone to look at our computer. Below are the steps you can use to test your local sites on any mobile device.

Setup MAMP to point your localhost to your web site

If you are familiar with MAMP this is as easy selecting the directory where your web site lives on your machine.

Find our your local IP address

Go into your system preferences and under the Network option, see what your local IP address is. In this screenshot, you can see that mine is 192.168.55.135.

Point your iPad or iPhone web browser to your IP address

Type in the IP address that you got from step 2 into your mobile devices web browser.

You should now see your local project served up on your mobile device. While this is a handy little trick, it’s not entirely foolproof. If your web site or web app has absolute paths for example, you will discover that those pages won’t load because they will no longer be looking at your IP address, but instead the URL of the web site. Still, I’ve been using this trick now for a bit to test layouts and break points for which it works quite well.

Update: Tyler Hall who builds Virtual Host X posted a link on his blog how to achieve the same effects using his fantastic software.

Advice for Up and Coming Front-End Developers

Fri, 08 Feb 2013 10:23:00 PST

I got an email the other day from an up and coming front-end developer asking for advice on how to expand their skill set and really learn to master their craft as well as how I stay current on new technologies and trends. Below is an except of my response which I thought might be interesting to some of you.

How to expand your skill set

The easy answer to this is to just do more work. Take on as many projects as you can. The more work you do, the more you’ll learn as you arrive at different problems and challenges with each project. How you solve those problems is how you build your skill set. To be a great front-end dev, you need to be a master of the fundamentals. I consider the fundamentals to be layout, specifically the ‘position’ property and the ‘float’ property. I wrote a few 101 articles on those a while back that you can find here: (CSS Positioning 101 · An A List Apart Article and CSS Floats 101 · An A List Apart Article) I truly believe that if you UNDERSTAND how these work, you can mark up any design thrown your way.

If you feel like you have these concepts mastered, I would start to think about how you can mark up a site with a little elements as possible. For example, would it be possible to reduce this “module” of content from 3 divs down to 2? Things like that. I always like to think optimally when I’m marking up a site. It can be so easy to add more elements to the markup when we get stuck, but I would challenge you to try to keep it as minimal as possible. If you use a framework like Bootstrap, these sometimes have extra markup to accommodate a more flexible approach, but I would recommend staying away from frameworks until you really have a grasp on what you are doing. Learn it on your own before you rely on someone else’s code to do your work for you.

If you don’t have a lot of work coming your way, I would try to replicate designs/layouts that you see online. I used to find a site that looked like a challenge and then try to build it myself. Not copying the design per se, but just using div’s with a background color to try to nail the layout. That kind of stuff really helped to expand my skill set as well.

Lastly, I would try to set some goals to learn new languages. As an example, set the goal that you want to learn and master jQuery and how it can be used in front-end development. Whether it’s AJAX or traversing the DOM, learn some of the basics and progress from there.

How do you stay current on new technologies and trends?

This is a good question. My answer is, I don’t. I simply don’t have time to stay up on all the new tech and trends when I’m busy building sites with the tech that we have right now. I usually give trends a year before I start to embrace them and check them out. This does a couple of things: ensures that a trend is not simply a trend, but an emerging “best practice” — responsive web design for instance, and it also spares me a rough learning curve as by the time I look into it several articles/blog posts/github repositories have been published to help deal with edge cases/issues that always occur with new tech/trends. Because I’m self taught, learning them isn’t the challenge as much as deciding if I should learn them.

Any other advice I would offer?

Strive to do good work. Don’t settle for hacks if you can’t get a particular layout to work. Step back and rethink it. Good work gets noticed and that’s how you grow your “brand”, if you will.
Find a stellar designer to work with and offer to markup their designs at a reduced rate. It’s always rewarding to be working on a project that looks fantastic. It also doesn’t hurt when prospective clients review your portfolio.
Go to conferences and start meeting peers. People are more likely to hire someone they’ve met face to face than a stranger off the internet.

On Grok

Wed, 06 Feb 2013 10:05:51 PST

There are a plethora of conferences for the web designer/developer these days. If you’ve never been to one, they are a great way to make connections, and you know how I feel about connections: they are everything. That said, I want to petition you to consider attending Grok this year.

Grok is a conference similar in nature to Brooklyn Beta. If you’ve never had the chance to attend Brooklyn Beta, I can tell you that it is unlike any other conference I have ever attended. Where most conferences focus on talks from incredibly smart and talented individuals about techniques or processes or new ideas such as RWD, Brooklyn Beta and Grok like it take a different route. These conferences focus on connections, peer interactions, brainstorms sessions, real time problem solving and hearing from individuals who may be in an entirely different industry talk about their work and how they do it. There is so much to learn from so many different angles. One of my favorite “features” if you will of Grok is the fact that there is no disconnect between speaker and attendee. It is both inspirational and refreshing to be on the same level with everyone in the room.

I know there are many, many options out there. Speaking from experience, I implore you to consider Grok as a conference to attend this year.

I should also note, that I am speaking at Industry Conf. later this year. It is Industry Conf’s first year, but from what I know about it, this too will be a conference you won’t want to miss.

An Interview

Wed, 06 Feb 2013 09:53:59 PST

An Interview:

Gavin over at Industry Conf was kind enough to interview me. If you’re curious about my background or my current work/setup, give it a read. Thanks to Gavin for the opportunity!

Responsive Web Design Leaves Me Wanting

Mon, 21 Jan 2013 14:32:20 PST

Today I asked on Twitter:

Can someone point me to a RWD site that isn’t a flat design?
— Noah Stokes (@motherfuton) January 21, 2013

I wasn’t trying to troll or anything like that. I was seriously curious about seeing RWD sites weren’t flat. A flat design, in my opinion, is a design with very little background element(s), no gradient/shadow/skeumorphisism (sp?), usually strong typographically and almost always clean and crisp. Exactly like this site you’re reading right now.

Where are the RWD sites that have some sense of unique design that goes further than a clean/clear grid, beautiful imagery and nice typography? This isn’t a knock on flat design, because achieving a successful flat design is no small feat; the more you remove the more difficult a design gets. Some of my favorite designers have pulled off flat, responsive designs quite skillfully. It’s simply that there aren’t very many RWD sites that have shadows and gradients, textures and depth, more complex elements, from a front-end perspective.

Of course, the trend is towards flat design, and perhaps that is in nature due to RWD being just as trendy. You can much more easily code a responsive site that is flat in design than one that isn’t. Add to that, the fact that RWD is a (relatively) new technique that a lot of us are learning, and so starting with simpler designs (again, not as a knock, but from a front-end perspective) makes perfect sense.

There were a few sites that were suggested in response to my tweet that met what criteria I would consider as ‘not flat’. Those were disney.com and nike.com. Both of these sites utilize depth and texture quite nicely. They are both responsive to boot. So there are some, but not a lot of sites that aren’t flat and still responsive. However, in digging into Disney and Nike, I noticed a few blimps in the media query highway that bring up another area of RWD that leaves me wanting—pixel perfection.

The purist in me wants a pixel perfect design in the browser and responsive gives me that at certain break points, but the in betweens are what kill me. It’s like looking at an awkward love child of two designs. I don’t want to call any site out in particular, but with several of the sites listed in this excellent TNW article, there are several areas that simply look bad at certain viewport dimensions. It’s not for a lack of talent on the front-end side, it’s simply because it’s extremely difficult to get pixel perfection in every viewport—and that pains me. I would much rather see sites done adaptively for their most popular viewport dimensions where pixel perfection could be achieved because let’s be honest, we’re the only ones resizing our browser windows like mad.

Bottom line: I’m a perfectionist and a design junkie. I want to see beautiful, immersive sites executed with perfection in every browser and responsive web design doesn’t play to either of those tendencies very well, thus leaving me wanting.

Thirty Six

Fri, 11 Jan 2013 09:44:00 PST

In a birthday tradition another year has passed and another list has arrived. Be sure to check out the others: Thirty Five and Thirty Four. For this year, here are thirty six things I’ve learned in thirty six years.

Confidence is all about perception.
When you meet new people, pay attention to their name. Later, use it in a sentence.
In a guitar duel, I’d take Prince and John Mayer over Slash and Satriani any day of the week.
Raising children is hard. Raising children right is hard¹⁰.
There is a formula to great pop music. I call it #pForm.
Sometimes the better Christian is the non-Christian.
When learning new languages, learn the fundamentals. It makes troubleshooting so much easier.
Find four or five people to really invest in life with. Those friends will carry your coffin.
Using your best analytical skills, take what you think will happen, now think the opposite. That is the stock market.
Craftsmanship is long, hard work. If you didn’t spend very much time building it, it’s probably not very good.
There is a limit to how much cologne one can put on. The same does not hold true for humility.
Driving a Ferrari is nothing short of epic. Driving a 550HP RUF makes a Ferrari feel like a minivan.
Build something tangible, with your hands.
Rarely does music move me more than when I’m behind a guitar.
Cancel your cable television. Say hello to an additional 2 hours of your day.
There are so many good TV shows on right now. I wish I had cable.
Business is all about relationships. Relate well and stay busy.
The best solo in the history of rock was performed on Sweet Child O’ Mine.
95% of Dribbble work never sees the light of day.
The clients don’t pick you, you pick them.
Find friends that don’t care what you do or how you do it.
The Seahawks are my new Lakers.
If you’ve mastered something, move on and learn to master something else. Look at Dave Grohl.
I like going to the movies by myself. It’s not anti-social, it’s called knowing what I like.
Roasting your own coffee, grinding your own beans and pulling a shot for an Americano is living.
There is like six feet of tube that is used during a colonoscopy. That’s a lot of tube.
Discovery is the next great challenge for the internet.
Don’t pay your estimated taxes. You can make more money investing than Uncle Sam will fine you for not paying your estimated taxes.
Happiness is cheap. It’s all about perspective.
Boys love to wrestle. Don’t be a douche, teach them how to properly pile drive their brothers. We don’t want anyone getting hurt.
Douche is still a funny word.
I’m more interested in the process than I am the end product.
Don’t respond to work email after 5:30pm. It sets a bad precedent.
Not everyone thinks like you do.
People who rarely tweet or blog do so because they’re busy. Busy making stuff.
I could never have a boss again. I don’t think we’d get along.

Copy/Paste Screenshots Directly Into Photoshop

Tue, 08 Jan 2013 14:03:15 PST

If you’re as particular as I am about my front-end markup looking exactly like the Photoshop comp, then you’ve likely taken a screenshot of your work in a browser and overlaid it onto your design in Photoshop. The process usually goes something like this:

Use built in Mac OS screenshot tool (Command + Shift + 4)
Drag selection over browser
Grabbed generated PNG and open in Photoshop
Copy contents and paste into design comp
Adjust opacity and compare two files

That’s a lot of work and can get tedious if you’re doing it a lot. Thankfully, there is a better way. This is Mac only, sorry Windows folks. In Mac OS there is a command similar to the screenshot tool but instead of generating a PNG file, it copies the screenshot to your clipboard for easy access in other apps. The new process is as simple as this:

Use built in Mac OS screenshot tool (Command + Control + Shift +4)
Drag selection over browser
Paste into a new layer in Photoshop
Adjust opacity and compare two files

That’s it. I hope you find it as useful as I have.

2012 Highlights

Wed, 02 Jan 2013 11:22:00 PST

What a year. On New Year’s Eve I had a conversation with Tim Cook as he was shopping in downtown SLO. What a way to top off a year. Here are a few other highlights from my year:

We adopted a little boy, Beck.
I moved my family to San Luis Obispo.
I spoke at Circles Conference and EECI 2012.
I got profiled in .NET magazine.
I finally got the Tony Hawk deck I’d be wanting since I was 11.
I had a chance to write for Offscreen Magazine and Medium.
I had the chance to work with some of the best talent out there.

2012 was an amazing year for Bold as well. Here are a few highlights:

We launched 29 projects.
We hired a second designer.
We pushed 5 open source repos to Github.
We launched a beta to the new FRVNT.
We worked with some incredible clients.
We never updated our site.

What’s in store for 2013?

More writing here and over at Medium.
Read more books.
Start surfing regularly.
Learn a new framework.
Tweet less.
Speak more, share my knowledge and help others succeed.

Be Cool

Sun, 30 Dec 2012 21:25:10 PST

Be Cool:

I was lucky enough to get an invite to Medium. My first post is a story I’ve told before about every guitar players dream, but it was fun to re-live it in a fresh light for Medium. I hope you enjoy it.

Great Tedx talk by skate legend, Rodney Mullen about creativity.

Thu, 27 Dec 2012 10:50:31 PST

Great Tedx talk by skate legend, Rodney Mullen about creativity.

Photoshop Shortcut to Copy Color Hex Value

Wed, 19 Dec 2012 13:19:00 PST

I had asked on Twitter if there was a shortcut to copy the hex value of a color selected within Photoshop with the eye dropper tool. Sean McCabe replied with the handy tip that you can set a keyboard shortcut to copy a colors hex value. I quickly assigned this to my handy F Keys which I used exclusively for Photoshop shortcuts.

The workflow is as follows: select a color with the eye dropper, switch to Sublime Text and paste into my CSS.

Edit: Dries Delaey also noted that you can simply right click on a color with the Eye Dropper and copy the colors hex value.

"Brody is going to reveal that he actually has 6 fingers. At that point Saul will say: Hello. My..."

Fri, 14 Dec 2012 11:04:41 PST

“Brody is going to reveal that he actually has 6 fingers. At that point Saul will say:

Hello. My name is Inigo Montoya. You killed my father. Prepare to die.

Then Saul will kill Brody. Show ends.

The End.

Fade to black.”

- My friend Todd’s prediction for the Season 2 Finale of Homeland

"Oh man. It is hard to bury a goat. Have you ever had to bury a goat? It’s like a four-to-five foot..."

Tue, 04 Dec 2012 09:37:00 PST

“Oh man. It is hard to bury a goat. Have you ever had to bury a goat? It’s like a four-to-five foot deep hole that you have to dig. You can’t just type

git --dig --hole --4

and have your computer do it for you; you need to get a real tool, a shovel, and dig. With your arms. And the entire time, this dead goat is just looking at you. Not really looking, because it’s dead, but you know, it’s still kinda dead-looking at you and you’re digging, sweating, thinking, if I stop now, will this goat fit into here? Because the last thing you want is the dead goat too close to the surface and have some scavenger like a raccoon come and dig it up. Because you know what that means, right? You’d have to dig the hole all over again.”

- Me, when asked about how difficult it is to bury a goat in the Dec. issue of .Net magazine.