September 11, 2013

Never Forget

Never Forget - Firefighter bows his head in front of WTC wreckage

Reflections by Jim Nedelak

I used to think that Americans were a little overly obsessed with September 11th—I simply didn't get it.

I'm not sure when the change began, but somewhere in the last 6 years my heart softened, and I became empathetic to my new countrymen. I started to see the deep sacrifice and courage that has been offered up by the many heroes who have worked to make a difference.

To all those who gave their lives, to those who gave their sweat, and to those who shed countless tears—I salute you.

Teaching Others to Believe

I’m currently gearing up to teach a course on skillshare. As I’ve shared what I’m doing with family, friends, and strangers, I’ve been surprised at the common thread weaved between all their reactions.

They don’t believe.

So many people are nervous, scared, worried at the thought of not being able to do something new. Honestly, I am too. I’ve never taught a class like this before. Can I do it? Will anyone care? Will people feel like they got their money’s worth out of it? These are a few of the questions that are haunting me right now.

I’m choosing to believe.

For now, I’m setting my fears aside, I’m moving forward. I’m believing.

My hope is that the product of my class is not simply that folks will learn a bit about HTML+CSS, but that they’ll learn to believe in themselves…even if it’s just a tiny bit more.

Anyone Can Code

I know what it's like to learn from scratch. Just six years ago I knew pretty much nothing about how to create a website, but I worked hard, practiced a lot, and learned a ton of stuff along the way—including that (there's a better way to learn to code than just reading books and scouring the internet for tutorials.

You don't have to spend a ton of time or money to get started with the web. You just need the right information delivered in digestible bits, and someone to lean on when you get a bit flustered or stuck. Enter...

YOU can CODE Part I: Learn HTML + CSS Basics in One Week!

I've created a straightforward and brief getting started course for folks who want to learn how to create on the web. You can check out my announcement, and get a 25% discount code on my YOU can CODE website.

On the horizon I also have two progressive follow-up courses that I plan to release after the completion of the first course.

  • YOU can CODE Part II: Create a Marketing Site in 3 Weeks
  • YOU can CODE Part III: Create a Rails App in 4 Weeks

Checkout a sample of one of the brief lessons on HTML:

March 25, 2013

Textured Icons With Icon Stacks

A couple days ago I posted a brief article on what I call Icon Stacks--an easy way to create complex multi-color icons using icon fonts. Today I wanted to share another interesting use for Icon Stacks that I came up with: Textured Icons.

So historically if you wanted to create a textured icon, you were most certainly relegated to using some sort of image for your icons. This often meant recreating existing icons in photoshop and then applying texture brushes, etc. to get the look you were going for. If you wanted to use these icons at different sizes you, you'd have to rinse and repeat for each individual size...lame.

I Want Scalable Texture

No worries, Icon Stacks can help with that too, just create a couple of texture icons and add them to your icon font:

Now pair those with your expected .icon-base and you've just created a distressed or stamped feeling Icon Stack without having to write any extra code. This is where Icon Stacks start to yield dividends, when you can easily re-use the markup pattern to create interesting combinations.

<i class="icon-stack icon-size-64">
    <i class="icon icon-smile icon-stack-base"></i>
    <i class="icon icon-texture-1"></i>
</i>

March 23, 2013

Icon Stacks

Combining icon font glyphs to create complex mega-icons.

If you've recently joined the ranks of designers and devs using icon fonts, you're likely still in the honeymoon phase. I know for me it was a god-send when I first starting using these sweet scalable glyphs in my app. Ahhh…goodbye messy sprites, farewell PNGs, GIFs, and JPGs, no more will I torture myself with the pains of nudging my background positioning to -1384px—or was it -1385?

In my quest to delete all the sprites and images from my repo, I hit a brick wall, the multi-colored icon. That's right, with icon fonts I could only create flat, boring, single-color, icons…but I needed more! So I came up with the idea of Icon Stacks™. The premise is simple, split apart the components of your multi-color vector, add each element to your icon font, and then stack them to create a mega-icon. Let's look at an example.

I Want Scalable Weather

With a typical icon-font implementation you'd have to use an icon like: . Using an Icon Stack you can have an icon more like:

The HTML

<i class="icon-stack">
    <i class="icon icon-upper-sun"></i>
    <i class="icon icon-cloud-w-upper icon-stack-base"></i>
</i>

The CSS

.icon,
.icon-stack {
    font-family: 'conorcc';
    font-size: inherit; // So icon adapts to the size of its parent
    position: relative; // To allow for nudging icons up and down for vertical alignment
    display: inline-block; // So we get the crispest icons possible at all times
    line-height: 0.9; // Without this the line-height can screw up the height of containers in FF
    *line-height: 1; // Old IE needs a slightly different value =)
}

.icon-stack .icon {
    position: absolute; // Icons within the stack are positioned one on top of the other
    top: 0;
    left: 0;
}

.icon-stack .icon-stack-base {
    position: relative; // One of the icons needs to be identified as a base so it won't be positioned absolutely
}

.icon-cloud-w-upper {
    color: #AFD2EB;
}

.icon-upper-sun {
    color: #e7be00;
}

So that gets us an improvement over the monochrome icons, but wouldn't it be nice if we could add a little more depth.

.backgroundcliptext .icon-cloud-w-upper {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0.95)), color-stop(50%, rgba(250, 250, 250, 0.95)), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    background: -moz-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    background: -o-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    background: linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}

And here's a more complete set for our weather:

Update: I posted a follow-up article on how you can use Icon Stacks to create textured vector icons.