New Books Network recently interviewed Carlo DiClemente, presidential research professor and professor of psychology, about his co-authored book Substance Abuse Treatment and the Stages of Change: Selecting and Planning Interventions (Guilford Press, 2013).

The network, a consortium of author-interview podcasts designed to enhance public conversation on given topics, interviewed DiClemente as part of its “New Books in Alcohol, Drugs and Intoxicants” series.

In a comprehensive interview, DiClemente discussed the stages of change model as it relates to substance abuse and drug addiction treatment, as well the need for careful consideration of stage status and the complexities surrounding substance abuse.

“The message in the book is tailor your treatments to your clients, to the client’s motivation, to the client’s characteristics, to the client’s context, how they live and where they live, and if you’re doing that, then you are at least helping them engage in this process of change,” DiClemente said.

You can listen to the full interview on the New Books Network website here.

This goes out to all those C++ geeks who have a Kinect for Windows v2 device, read on…

froglogic GmbH today announced its release of Squish Coco 3.0, a complete C, C++, C# and Tcl code coverage tool chain for Windows, Linux, Mac OS X, Unix and embedded systems.

A roundup of the most interesting stories from other sites, collected by the staff at MIT Technology Review.

Elevating Crop Disease Resistance with Cloned Genes
Why GM blight-resistant potatoes could be important.
—David Rotman, editor

Incentives

• If we have 36 people who help us walk the 12 hours, those who walk for at least one hour will join us for a pizza party!
• The top fundraiser on our team will receive a Periodic Table Blanket
• Every $50 you raise is one ticket into a drawing for the following items:

               Beaker Mug

               $25 Starbucks gift card

               Basket of ACS-related items

               Other items TBA

The drawing will be during the pizza party, and you must be present to win.

JOIN OUR TEAM!

http://main.acsevents.org/site/TR?fr_id=60281&pg=team&team_id=1517944

The following is a guest post by by Parker Bennett. While icon fonts are efficient and easy to use and scaleable and all that, one of the classic "strikes" against them is that the icon can only be one color. Parker has a brand new project that solves that issue in a simple and clever way. I'll let him introduce it for you.

Even though the future of icons will likely be SVG, here in the present, icon fonts still offer a compelling alternative — with super easy styling of color, size, text-shadows, hover effects and more using just CSS. Icon fonts are still awesome.

One big advantage SVG has over icon fonts is full color. But icon fonts don’t have to be limited to just a single color. By overlapping two or more elements we can create unique “multi-color” icons with a contemporary flat look. If you’ve ever done any two-color or screen printing, it’s a similar idea.

I call them Stackicons.

For each color, we use a separate pseudo element, then use absolute positioning to stack them on top of each other. (If you want more than two colors, it will cost you a non-semantic span.)

/* @font-face to load icon font... */
    
    /* horizontal button row: inline-block vs float makes positioning easier using text-align */
    
    /* any class that starts with "st-icon-" */
    [class^="st-icon-"] {
      display: inline-block;
      vertical-align: top;
      white-space: nowrap;
      /* child elements absolute */
      position: relative;
      /* remove inline-block white-space */
      margin-right: -.16em; /* 5px */
      /* if not already universally applied */
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      /* padding here for text, icons replicate this using size and position:absolute - padding makes touch-target bigger */
      padding: 0.143em;
      /* units used in font: 1em = 2048, icons 2400 wide, so icons are 1.171875em (2400/2048). Add padding x2 to get size: */
      height: 1.45788em;
      width: 1.45788em;
      font-size: 1.815em;
      /* text hidden old-school */
      text-align: left;
      text-indent: -9999px; }
    
    /* position:absolute stacks pseudo elements - extra <span> in markup = 2 extra pseudo elements */
    [class^="st-icon-"]:before,
    [class^="st-icon-"]:after,
    [class^="st-icon-"] span:before,
    [class^="st-icon-"] span:after {
      display: block;
      position: absolute;
      white-space: normal;
      /* match padding above */
      top: 0.143em;
      left: 0.143em;
      /* undo text hidden */
      text-indent: 0;
      /* inherits size from parent, ems cascade */
      font-size: 1em;
      font-family: "Stackicons-Social";
      font-weight: 400 !important;
      font-style: normal !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-smoothing: antialiased;
      /* screenreaders */
      speak: none;
      /* transitions here */ }
    
    .st-icon-amazon:before {
      /* character code - unicode private use area */
      content: "\e079"; /* black "a" */
      color: black; }
    
    .st-icon-amazon:hover:before {
      color: #626262; }
    
    .st-icon-amazon:after {
      content: "\e080"; /* orange smile */
      color: #ff9900; }
    
    .st-icon-amazon:hover:after {
      color: #ffbd59; }

Using rgba values, we can even do some color mixing to give us more colors. If we really want to push the limits, we can use -webkit-background-clip: text to give icons a -webkit-linear-gradient background.

Yes, it’s a bit on the hacky side: It takes some design forethought, and the ability to generate an icon font. There are more moving parts to manage. But it also offers a lot of flexibility, especially using Sass variables.

Stackicons-Social

To show how it works, I made a free, open source icon font, Stackicons-Social, and created a Sass “Construction Kit” to generate the CSS for both single color icons and “multi-color” versions of over 60 social brands.

Stackicons-Social

View Stackicons-Social

I also created a range of button shapes in the font, from square to circle (plus icon-only), and have classes that override the shape on the fly. Want circular icons? Just add the .st-shape-circle class. iOS style? .st-shape-rounded3.

Try it on CodePen

Putting It Together with Sass

Behind the scenes, there is a group of .scss _partial files that Sass compiles. If you’re comfortable using Sass you can customize things extensively just by changing variables in this "construction kit":

• fonts-stackicons-social - Path to stackicons-social font.
• colors-social–2014 - Color variables for social brands.
• unicodes-stackicons-social - Font unicode characters abstracted into variables.
• construction-kit-stackicons-social - This is where we generate default values for icon size, margin, padding, shape, color, hover-style, etc. (Play here.)
• css-defaults-stackicons-social - This does the CSS grunt work to create each .st-icon-($brand) class.*
• override-shapes-stackicons-social - Let’s you override the button shape on single-color icons using classes: st-shape-square to st-shape-circle, plus st-shape-icon.*
• override-colors-stackicons-social - Some examples of “color-styles” for single-color icons to demo different options. Lots of extra CSS, so it’s commented out by default.*
• multi-color-kit-stackicons-social.scss - Like “construction-kit” above, but for the .st-multi-color class: generates default shape, color-style, etc.
• multi-color-css-stackicons-social.scss - Like “css-defaults” above, this does the CSS grunt work to generate each multi-color .st-icon-($brand) class.*
• multi-color-override-shapes-stackicons-social - This allows you to change icon shapes using classes on multi-color icons.*

* Because Sass doesn’t allow us to use variables within variables, this uses a lot of @if statements to generate the .st-icon-($brand) classes. Ugly, but marginally maintainable. There are several @each statements, listing the brands to output. Ideally, you would go through and edit these lists to limit the CSS output to only the brands you need.

Rolling Your Own

There are some great free resources for creating icon fonts, including icomoon.io and fontello.com. I use Adobe Illustrator and Glyphs on the Mac. (Glyphs Mini is a lower cost option that limits the units per em to 1000. They also offer student pricing.) To generate the web font versions, I recommend FontPrep, which Brian Gonzalez just made open source. FontSquirrel is another good free option. (If you’re interested in more workflow details, let me know in the comments.)

You should also check out some random dude (P.J. Onori) and his iconic project. He also has some helpful tips on using icon fonts.

As always, if you have any questions, comments, or corrections you can email me at parker@parkerbennett.com.

Stackicons: Doing More with Icon Fonts is a post from CSS-Tricks