The Phraseology Project was originally setup by Drew Melton as a way for him to hone his typography skills. The idea is that people submit words or phrases and Drew, or a guest contributor, creates a typographic treatment of the submissions.

The list of contributors include designers such as Ray Brown, Luke Ritchie, Simon Ålander and Joshua Bullock, all of whom have created some beautiful pieces of work.

Here’s a collection of some of our favourites:

Which of these treatments is your favourite? Do you have a similar side project? Let us know in the comments.

Magnolia: 150+ Professional Infographic Elements – only $9!

The Phraseology Project was originally setup by Drew Melton as a way for him to hone his typography skills. The idea is that people submit words or phrases and Drew, or a guest contributor, creates a typographic treatment of the submissions.

The list of contributors include designers such as Ray Brown, Luke Ritchie, Simon Ålander and Joshua Bullock, all of whom have created some beautiful pieces of work.

Here’s a collection of some of our favourites:

Which of these treatments is your favourite? Do you have a similar side project? Let us know in the comments.

Magnolia: 150+ Professional Infographic Elements – only $9!

Is an open-source app modeled after CodeKit. Prepros runs on Windows where CodeKit is Mac only. From people who have tried it, it seems good.

Direct Link to Article — Permalink

Need a new look for your portfolio? Check out the Snap WordPress theme from The Theme Foundry. Sass files and Compass config are included!

Prepros is a post from CSS-Tricks

Auto-filling forms is nice because it saves time and is less prone to user error. Even better is not even needing to see a form in the first place.

Direct Link to Article — Permalink

Chrome’s requestAutocomplete() is a post from CSS-Tricks

When I started learning to program back in February 2012 in order to build Uncover, I simply wanted to be able to see my ideas through to a solid prototype that customers could use. Nothing else mattered. I’d watch tutorials, read books, practice exercises, deploy code, fail and repeat–until I collapsed on my keyboard. Every day I’d wake up with a strong sense of accomplishment.

But no matter how much progress I made, I still knew I’d need to find a talented technical co-founder to work with. I’ve been around the block enough times to know that a year of programming wouldn’t make me a CTO. But what I couldn’t have anticipated was that learning to program up to the level I’ve achieved would make finding a technical co-founder ten times easier. Sure, it’s sort of a kick in the face knowing that one day, with any product success, you’ll have to pass the lead to someone more capable than you. But again, the huge consolation is that it’s a lot easier to find someone once you’ve learned to code.

For me, with a prototype in September 2012 and happy customers already in place, that time had come.

Because I’ve asked Mike (my Uncover co-founder) to be candid about it, I can say without a doubt that we’d never have teamed up if I hadn’t spent 2012 learning to code. Mike and I had known each other for five years before we decided to work together. It wasn’t until I was months into learning to code, when he saw my dedication and saw that I’d successfully built a prototype, that he began to entertain the idea.

Even during the first few months of coding, I’d badger Mike about working together over frequent afternoon coffees, but he’d shrug off the idea. He wasn’t looking to be someone’s code monkey. He wanted to work with someone who understood programming, who could contribute, and who had proven that he really wanted to push himself ahead technically. The person Mike would be willing to work with had to build something first.

For Mike it was more than me being able to contribute code to our product. It was about the psychological connection we’d have. There’s a special bond that exists between developers. People who can build product look at what’s built in a different way. “You can code? Welcome to the club.”

Mike welcomed me. He then pushed me. He taught me. He made me a better developer than I could ever have been on my own. And ultimately he agreed to join Uncover as a co-founder because I had proven myself and managed to get into the club.

The post How Learning to Program Got Me A Technical Co-Founder appeared first on Treehouse Blog.

The following is a guest post by Marcel Shields. Marcel in a difficult place where he needed to change the image on a page but didn't have access to the HTML. Rare, but I'm sure we've all be in weird situations like this. He explains how he managed to replace that image without needing to access the HTML or JavaScript. Also turns out to be a pretty good way to replace anything with an image.

I just wanted to share something I found really cool about using CSS box-sizing. Chris wrote a really good introduction a few years back if you're not familiar with the property. It makes things a lot more sane when thinking about layout. People love it so much, they put it on everything like hot sauce. I wanted to share how I found it useful as (yet) another image replacement technique.

A few days ago at work, I was asked to replace an <img> on our site with another image hosted elsewhere. Simple right? But the catch was I would not be able to replace the markup as it was already deployed to production, but could inject CSS or JS through our CMS. For whichever technology I chose, it would be inserted on all site pages. I only needed on one specific page, and the attributes of parent containers were non-specific to the desired page.

<head>
      <title>Really Cool Page</title>
    </head>
    <body>
      <!-- .header would be across site on other pages with different children, so no background image adding -->
      <div class="header">
        <img class="banner" src="http://notrealdomain1.com/banner.png"&gt;
      </div>
    </body>

This is simple to do with JavaScript, but I wanted to see if there was another, even simpler, way. After a few iterations in Chrome Dev Tools, I thought to use the box-sizing property to keep dimensions strict, add the new image as a background image, and just push the inline image out of the way with padding and see what happened.

/* All in one selector */
    .banner {
      display: block;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
      width: 180px; /* Width of new image */
      height: 236px; /* Height of new image */
      padding-left: 180px; /* Equal to width of new image */
    }

It worked beautifully. Here's what's cool:

• It works on just about any element, even empty ones like <img> or <hr>
• Browser support is excellent (Chrome, Firefox, Opera, Safari, IE8+) http://caniuse.com/#feat=css3-boxsizing
• Refrains from using SEO unfriendly display: none or other properties

That last point seemed important, as it works really well for text replacement too without any adjustment. Check it out!

Check out this Pen!

Replace the Image in an <img> with CSS is a post from CSS-Tricks