Part 2 of this SAMGradientView tutorial covers how to make a good open source library. I cover writing a good readme, writing documentation, testing, and publishing a pod to CocoaPods. Check out Part 1 if you missed it before.

Links from the Video

• Part 1
• SAMBadgeView: github.com/soffes/SAMBadgeView
• MIT License: en.wikipedia.org/wiki/MIT_License
• CocoaPods: cocoapods.org
• SemVer: semver.org
• SSToolkit: github.com/soffes/sstoolkit

The post Setting Up Open Source and Live Coding with Sam Soffes – Part 2 appeared first on Treehouse Blog.

The following is a guest post by Hugo Giraudel. Hugo has written several times for CSS-Tricks including an article about a rather clever Pie Timer and several entries for the Almanac. I'm glad to have him back, this time explaining some pretty hardcore Sass stuff with a really practical application.

Hey guys! I'm glad to be able to write for CSS-Tricks again and share some cool tricks about Sass! In the past few weeks, I've been intensively experimenting with Sass lists. I have found a lot of things that likely most people don't know.

I recently built a @mixin to create stripes. The idea is to give the mixin a regular gradient and it will turn it into a striped one. Since it turned out to be a fairly complicated thing to do, I thought it could be a good idea to write up.

Let's begin with some reminders about how gradients work.

Striped Gradients

When you give a gradient two succesive color-stops with the same stop value, the transition between them two is abrupt instead of smooth. It is technically a gradient, but there is no smooth transition from one color to another. Consider the following code:

.el {
      /* This is smooth */
      background: linear-gradient(deepskyblue, tomato);
    
      /* This is striped */
      background: linear-gradient(deepskyblue 50%, tomato 50%);
    }

Check out this Pen!

You may put as many color-stops as you want as long as you remember to give each color-stop the same stop-value as the previous one (except for the first).

.french-flag {
      height: 10em;
      width: 15em;
      background: linear-gradient(
        to right, 
        blue 33.33%, white 33.33%, 
        white 66.66%, red 66.66%
      );
    }

Check out this Pen!

That's pretty much everything you need to know about gradients for this article. If you ever happen to be interested in digging deep into the gradients, Ana Tudor wrote a wonderful article about this.

Sass Lists

Let's take this from the very start. Lists in Sass are quite similar to arrays in JavaScript. To initialize a list: $list: ();.

Note you can also initialize it with $list: null; (or even $list: unquote("");) if you feel like it, but beware they are different. Anyway, here is a very simple Sass list:

$css-tricks-is: (#b4d455, 42, "awesome");

This gets a bit more complex, because the Sass syntax is very permissive when it comes to lists. You can do a ton of things, some of which you're not supposed to. Let's take them one by one.

You can ommit braces.

You are not forced to wrap your lists with braces and can totally ommit them if you feel like it. We often ommit them to be honest.

$css-tricks-is: #b4d455, 42, "awesome";

The first index is 1

Not 0 like arrays. This is unfortunate since it makes our upcoming example code more complicated. This is an important thing to know when you're manipulating indexes with the nth() function.

$item-1: nth($css-tricks-is, 1); // #b4d455

You can separate values with spaces or commas.

Both are perfectly valid. I'm pretty sure you'll prefer commas since it's the standard separator for array values (JS, PHP...) but you can totally use spaces if you feel like it.

$css-tricks-is: #b4d455 42 "awesome";

You can mix spaces and commas.

You can have the first-level list comma-separated and the nested one space separated in nested lists. In the following example, the 3rd value is a space-separated list.

$css-tricks-is: #b4d455, 42, "awesome" "interesting" "free";

You can ommit quotes around strings.

That's right, strings are not necessarily quoted in Sass. Don't ask me why.

$css-tricks-is: #b4d455, 42, awesome;

In any case, I highly recommand you:

• keep the braces
• use commas
• quote your strings

It will save you some time, trust me.

The Striping Function

Let's get to the point of the article: our striping function! The main idea is to take advantage of the fact Sass lists can be comma-separated, just like color-stops in gradients. To put it simply, a list like $list: red 20%, blue 55% could be used in a linear-gradient() function as is: linear-gradient($list) outputing linear-gradient(red 20%, blue 55%).

Because we're badasses, we want to make it as flexible as possible. So:

• we can define a collection of color-stops
• we can define a list of colors if we want all the stripes to have the same size
• we define a direction as a default so we can ommit it in some cases

Thus we need two things to turn a regular gradient into a striped one: the list of colors / color-stops (e.g. deepskyblue, tomato, lightgreen or deepskyblue 20%, tomato 35%, lightgreen 62%) and an optional direction. Let's start with the skeleton:

@function stripe($colors, $direction: "to bottom") { 
        /* Core */
    }

As of $colors, there are 3 different scenarios available:

• The user passes a comma-separated list of color-stops: (deepskyblue 20%, tomato 35%, lightgreen 62%),
• The user passes a comma or space-separated list of colors: (deepskyblue, tomato, lightgreen),
• The user passes a single color: deepskyblue or (deepskyblue).

Everything else will either dump out invalid output or throw a Sass error. The function is meant for informed developers in a development environment so it's really no big deal if we don't cover every single edge case.

The very first thing we have to find out is whether we are dealing with a list of colors or a list of color-stops. The easiest way to find out is to check the first item in the $color list (with type-of()). If it is a list, then we have to deal with color-stops else the user wants all stripes to have the same width and it's pretty easy for us.

Unfortunately, we cannot do $auto : !(type-of($first-item) == list) since Sass doesn't recognize this as valid syntax. So to check, we can use the if() Sass function which comes close to the var = condition ? true : false statement of other languages.

$auto: if( type-of(nth($colors, 1)) == list, false, true );

To sum up, if $auto is true, it means all stripes will have the same size so the calculations are handled by Sass. If it's false, it means we have to deal with custom stops. We still need two variables before looping through colors: one in case we are running in auto-mode to define the size of a stripe; and one to store our color-stops while looping (later returned in a linear-gradient function).

$stripe-width: 100% / length($colors); /* Only used in auto mode */
    $gradient: ();

Now we can loop through colors / color-stops and add things to our $gradient variable. To add a numeric component to our loop, we use a @for loop instead of a @each loop. It doesn't make things much harder though. We also declare 2 new variables inside the loop: one for the current item and one to store the current color-stop before appending it to $gradient.

@for $i from 1 through length($colors) {
        $item: nth($colors, $i);
        $dump: ();
    }

This is where things get complicated. First, we have to differenciate auto mode from hard mode: color-stops are not the same. In auto mode, they are calculated which means in the first loop run (when $i equals 1) the "previous color-stop" equals 0% ($stripe-width * ($i - 1)). In hard mode, we have to check whether we're in the first loop run or not because nth($colors, 0) isn't allowed; it throws a Sass error. Let's check the code:

@for $i from 1 through length($colors) {
        $item: nth($colors, $i);
        $dump: ();
    
        /* If we're in auto-mode,
         * $item equals a color,
         * color-stops are automatically calculated based on $i
         */
        @if $auto == true {
            $dump: $item $stripe-width * ($i - 1), $item $stripe-width * $i;
            /*      red   0%                      , red   50%
             * ^ This is what the first loop run would output with a 2 colors gradient
             */
        }
        
        /* If we're in hard-mode
         */
        @else {
            /* We check if it is the first run loop;
             * if it isn't, we add the current color with the previous stop
             */
            @if $i > 1 {
              $previous-item: nth($colors, $i - 1);
              $dump: $dump, nth($item, 1) nth($previous-item, 2);
            }
            /* No matter what, 
             * we add the new color stop
             */
            $dump: $dump, $item;   
       }
    
       /* And no matter what, 
        * we append $dump to $gradient using join(),
        * separating both with a comma by forcing it as a 3rd argument
        */
       $gradient: join($gradient, $dump, comma);
    }

At the end of the loop, we have a well formated list ready to be used in a linear-gradient. We only need to return it with the appropriate syntax:

@return "linear-gradient(" #{$direction} "," #{$gradient} ")"

Small problem: Sass is returning the quotes as well, so we need to tell it to return the whole line without the quotes. Easy enough, we simply wrap it with #{}. Here is the whole function now:

@function stripes($colors, $direction: "to bottom") {  
        $stripe-width: 100% / length($colors);
        $auto:         if( type-of(nth($colors, 1)) == list, false, true );
        $gradient:     ();
        
        @for $i from 1 through length($colors) {
            $item: nth($colors, $i);
            $dump: ();
          
            @if $auto == true {
                $dump: $item $stripe-width * ($i - 1), $item $stripe-width * $i;
            }
          
            @else {   
                @if $i > 1 {
                    $previous-item: nth($colors, $i - 1);
                    $dump: $dump, nth($item, 1) nth($previous-item, 2);
                }
                $dump: $dump, $item;
            }
    
            $gradient: join($gradient, $dump, comma);
        }		
        @return #{"linear-gradient(" #{$direction} "," #{$gradient} ")"};
    }

Demo

As a demo, I took the header of Treehouse's blog: a line made of about 50 colored stripes. It looks absolutely lovely. They currently use 50 spans. Ouch! They could use stripped gradients instead, and it's easy now with this function.

I made two versions: the first one is running in auto-mode, meaning all stripes have the same width; the second one use custom color-stops to reproduce Treehouse's effect.

/* Colors only (auto-mode) */
    $treehouse-auto: #fa9300, #66c9ee, #c9c9c9, #82b964, #d24d33, #fffbdb, #2e77bb, #6bd5b1, #f87aa0, #c9c9c9, #72664e, #ccd600, #fffbdb, #df620e, #993838, #ff9600, #d24d33, #8960a7, #82b964, #f87aa0, #d43f3f, #668000, #ff9600, #8960a7, #c9c9c9, #993838, #ccd600, #668000, #f4cc13, #72664e, #fa9300, #66c9ee, #c9c9c9, #82b964, #ccd600, #fffbdb, #2e77bb, #6bd5b1, #f87aa0, #c9c9c9, #fa9300, #66c9ee, #c9c9c9, #82b964, #ccd600, #fffbdb, #fa9300;
    
    /* Color-stops (hard-mode) */
    $treehouse-hard: #fa9300 2.61%, #66c9ee 4.35%, #c9c9c9 6.96%, #82b964 9.13%, #d24d33 11.3%, #fffbdb 13.91%, #2e77bb 16.52%, #6bd5b1 17.82%, #f87aa0 19.12%, #c9c9c9 21.29%, #72664e 23.9%, #ccd600 26.07%, #fffbdb 28.68%, #df620e 31.29%, #993838 33.03%, #ff9600 34.33%, #d24d33 36.94%, #8960a7 39.55%, #82b964 42.16%, #f87aa0 43.36%, #d43f3f 45.63%, #668000 47.8%, #ff9600 50.41%, #8960a7 51.71%, #c9c9c9 53.88%, #993838 55.18%, #ccd600 57.79%, #668000 59.53%, #f4cc13 60.83%, #72664e 63.44%, #fa9300 66.05%, #66c9ee 67.35%, #c9c9c9 69.96%, #82b964 71.7%, #ccd600 74.31%, #fffbdb 76.92%, #2e77bb 79.53%, #6bd5b1 80.4%, #f87aa0 81.7%, #c9c9c9 83.87%, #fa9300 86.04%, #66c9ee 87.78%, #c9c9c9 90.39%, #82b964 92.56%, #ccd600 95.17%, #fffbdb 97.34%, #fa9300 100%;
    
    /* Using a pseudo-element to display it, no extra markup */
    .header:after {    
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: .5em;
        // Auto
        background: stripes($treehouse-auto, to right);
        // Hard
        background: stripes($treehouse-hard, to right);
    }

As a result you can see the auto-mode at the top of the following pen and the hard-mode at the bottom. The later definitely looks better.

Check out this Pen!

Another use case could be helping out with the fluid width columns of equal height trick (see the Doug Neiner method).

Final words

I think we're done team. If you prefer a mixin to a function, it is fairly easy to edit: simply change @function to @mixin and the return line to something like background: linear-gradient(#{$gradient}, #{$linear}) then use it with @include stripes($colors). I personally prefer using a function for these things, but it's really up to you.

What do you think?

If you feel like you could make the code easier, please be sure to tell! Thanks for reading. :)

Create Striped Backgrounds With Gradients (and a Sass Function) is a post from CSS-Tricks

I’m asked regularly about books and online resources to get up to speed on JavaScript. Seems like everyone wants to get in on the JS action and with good reason; it’s a great language to know if you’re interested in exciting career opportunities. It’s also pretty fun to play with.

With JavaScript’s increased popularity, the number of books, blogs and tutorials about the language have grown exponentially and while I can’t possibly know all of them, I’ve found some gems which I really like and would like to share those with you.

Books

Note that I’m only listing books that I’ve read and can recommend. There are a ton of books out there that you may find equally great and that’s cool.

Professional JavaScript for Web Developers by Nicholas Zakas

This continues to be my most recommended book. It is the one that I tell any JavaScript developer (aspiring or expert) to get and keep on their shelves. Nicholas Zakas has written a fantastic book that does an excellent job of covering all major facets of the language. Want to know the basics? It’s in there. Want to get into OOP in JS? It’s in there. Want to know about the Document Object Model? Well you get the gist.

It’s a complete reference written in a very accessible way that guides you from the basics to advanced JavaScript features. Hence why I recommend it to developers of all levels.

JavaScript Patterns by Stoyan Stefanov

Understanding the most common and useful JavaScript patterns and how they work is critical to properly managing and organizing your code. The pattern you choose in many cases becomes the basis for the foundation of your application and plays an important role in deciding how you’ll architect your site.

Stoyan is one of the best JavaScript developers in the world, having worked on large-scale sites at Yahoo! and Facebook and was part of the team that managed the YUI framework. He knows his stuff and he’s distilled his understanding of the most common patterns into an easy-to-read book.

Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries by Stoyan Stefanov

Oh JavaScript OOP, how you taunt me with your prototypes. Since JS isn’t a traditional class-based object-oriented language, it can be a bit wonky to get your head around things like prototypal inheritance or mixins. Stoyan steps up again and does a great job of breaking the topic down. It starts off slow with some language basics to get your feet wet but quickly dives into how OOP works and how you should be taking advantage of the language’s features to build reusable objects.

High Performance JavaScript by Nicholas Zakas

We all want our code to run fast so we tweak and refactor constantly. Learning by the school of hard knocks is cool but I prefer to have a resource based on someone’s previous experiences to build from. This book aims to teach you about those tweaks that can help optimize the performance of your code. Whether it’s improving loop performance or working with timers to improve UI responsiveness, this book covers it.

Effective JavaScript by David Herman

When I first read about this book, I wasn’t 100% sure I wanted to get it. I figured it was a rehash of other books I’ve read but when I saw that Alex Russell of Dojo and Chrome Frame fame recommended it, I scooped it up. I’m really glad I did.

Dave is Mozilla’s TC39 rep and an expert in the language both at an academic and pragmatic level. The book is great because it’s not so much about the JS language as it is about using the language in the best way possible. It works to clarify how specific parts of the language work (e.g.: coercion, currying or automatic semicolon insertion) so that it doesn’t bite you later on. This is definitely a book for those wanting to take their level of JS understanding to the next level.

Secrets of the JavaScript Ninja by John Resig and Bear Bibeault

No matter what you think of jQuery, John Resig deserves mad respect and kudos for building the most popular JavaScript library ever and highlighting the power and flexibility of JavaScript. This book took 4 years to finish but it was well worth the wait.

Freebies

I realize that many of us are on a tight budget and free is always a great choice. Luckily I found a site that can point you to free resources. The site, JSbooks, was created by Revolunet and offers placeholders to several quality online references such as:

• The jQuery Fundamentals
• Addy Osmani’s Developing Backbone.js Applications
• Eloquent JavaScript

And a whole lot more. And no, these aren’t pilfered ebooks you find on scam sites. The icons simply point to established and publicly available resources acting as a directory instead of a host.

Blogs

There’s so many people sharing great content and it’s incredibly hard to filter out which ones to keep up with. As my experience has grown, I’ve worked to narrow down the blogs I read and I think these have really worked out well:

DailyJS

The name says it best. It’s a combination of news and tutorials focusing both on front-end and server-side JavaScript code. It has a regular roundup of jQuery plugins as well.

Nicholas Zakas

I think by now it’s obvious that I’m a fan of Nicholas. His blog is as great a resource as his books and tackles advanced JavaScript concepts that should be on every developer's mind.

David Walsh

I remember when he first hit the scene; a brash, in your face type of dude learning the ropes and building a name. Since then David has worked hard to become a great developer contributing to the MooTools and Dojo frameworks and now working at Mozilla. He produces great articles that are immediately usable.

Badass JavaScript

Another great news and tutorial site. Reminds me a lot of how Ajaxian used to be, in that it allows me to discover very cool libraries and new techniques to use.

JavaScript Weekly

This is the ONLY email newsletter that I keep in my inbox because every weekly issue is chock full of awesomeness. Seriously, I don’t know how Peter Cooper does it but he manages to find so many great articles to read. Just be careful because it’s a total productivity killer.

Addy Osmani

Addy is one of the most talented developers out there and in his blog he demonstrates his breadth of knowledge by covering everything from jQuery promises to AMD. His post on writing modular JavaScript is epic.

Peter van der Zee

He calls me old and says I use a cane but I still respect Peter’s incredible knowledge of JavaScript. He’s part of the younger generation that will be the future of web development. Get to know this guy.

Juriy Zaytsev AKA kangax

When you’re ready to learn from the big boys, start by subscribing to Juriy’s blog. He eats, drinks, and sleeps ECMAScript.

2ality

I’ve never met or spoken with Dr. Axel Rauschmayer but when I found his site I had a “holy crap this dude is sharp” moment. When you read his posts, you’ll see why. They’re DEEP, like into the bowels of ECMAScript deep. Really awesome stuff.

Nettuts

Yeah, yeah I’m biased but it seriously does have great stuff. You wouldn’t be reading this if you didn’t agree. :)

Taking a Class

When a book or blog won’t do and you want to get your hands dirty, you now have a ton of courses, both offline and online, to get you up-to-speed:

• Nettuts Premium JavaScript Course (Online)

  Not only will you find courses on JavaScript fundamentals but on frameworks like Backbone and topics such as OOP.

• The JavaScript Master Class (Online)

  I took this online course by Thomas Fuchs and Amy Hoy. So worth it, especially because the instructor is accessible for Q&A.

• appendTo’s Free JavaScript Training (Online)

  A free set of eight video lessons to help you ramp up on JavaScript.

• Bocoup Training (Online and Offline)

  Bocoup has a great training program. They offer some online videos but the real value comes from attending their numerous training classes in person.

Getting Help

One of the hardest parts of learning any new programming language is getting support. You have questions and hope to be able to get answers.

• JSMentors

  I started JSMentors with Asen Bozhilov with the intention of providing a safe and helpful place for developers to come and ask questions about JavaScript. It came out of my experiences in other less desirable, not to be mentioned parts of the Internet which weren’t exactly beginner friendly. We enlisted the help of a number of notable experts to help answer questions and the group is doing great.

• StackOverflow

  I personally think this is such a great resource. The site helps developers resolve their issues daily and it has sections for JavaScript and related libraries like jQuery.

Conclusion

Hopefully I didn’t overwhelm you with all of these listings. It’s really great that we have so many options to learn JavaScript and I’ve only scratched the surface. Remember, pick and choose what’s best for you and take your time. JavaScript is great language to use and it does take a little time to get all of the nuances. Thankfully, you have many methods for learning it and options to help you get your questions answered.

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Dev Tool secrets, JavaScript Statistics, and more.

Here are the links for the week:

Secrets of the Browser Developer Tools – Secrets
http://devtoolsecrets.com/

iOS7 GUI PSD | Teehan+Lax
http://www.teehanlax.com/tools/ios7/

JSDB.io – The Database of JavaScript Libraries
http://www.jsdb.io/?sort=trending

Ladda
http://lab.hakim.se/ladda/

philipwalton/html-inspector
http://github.com/philipwalton/html-inspector

simple statistics
http://macwright.org/simple-statistics/

magic css3 animations
http://www.minimamente.com/magic-css3-animations/

Creative Button Styles | Codrops
http://tympanus.net/codrops/2013/06/13/creative-button-styles/

The post Dev Tool Secrets – Treehouse Show Ep 47 appeared first on Treehouse Blog.

Flat design is all the rage, and trend-conscious clients are beginning to ask for redesigns to meet the current fad for all things flat.

Most commentators agree that ultimately, flat design will soften into something flatter than skeuomorphism, but less extreme than that which the current crop of flat-evangelists propose. One of the simplest ways to revamp the look of a site, without a full redesign, is to change the icons you’re using.

So we’re delighted to be able to bring you this set of free almost-flat social icons designed by Sylvain Guizard of PEPSized.com. Designed to embrace flat design without surrendering to it completely, the set is a great way to iron out your current design.

There are 90 different services represented, optimized to 15 different sizes. Each icon has a subtle gradient and border, lifting it off the page, without losing the underlying flat aesthetic.

The services represented are: 500px (2 versions); About Me; Amazon; Apple; Appstore; Baïdu; Basecamp; Bebo; Behance; Bing; Blogger; Buffer (2 versions); Chime In; Delicious; DesignFloat; DeviantART; Digg (2 versions + 2 alternate versions); Dribbble; Drupal; Etsy; Evernote; Facebook (+ Like on FB); Flickr; Forrst; Foursquare; Gdgt; Github; Google+; GrooveShark; Hi-5; Hyves; iCloud (2 versions); Identi.ca; Instagram; Kik; Last FM; Linkedin; Metacafe; Mister Wong; MSN; Myspace (2 versions); Netvibes; Newsvine; Path; PayPal; Photobucket; Picasa; Pinterest; Pixelapse; Qik; Quora; Reddit; Skype; SlashDot; SoundCloud; Spotify; StackOverFlow; Steam; StumbleUpon; Technorati; Tumblr; Twitter; Viadeo; Vimeo; Vine; Weibo; WordPress; Xing; Yahoo; Yelp; Youtube (2 versions); Zerply;  and Zynga. As well as some tools: Heart; Favorite; Mail (2 versions); RSS; and Share (2 versions).

The files are provided as a .png and .psd, with named layers for all vectors in the PSD. The icons are free for personal and commercial use.

Pay with a Tweet

Download now

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

I agree to receive exclusive deals from MightyDeals.com and monthly/weekly newsletters from WebdesignerDepot.com. Unsubscribe at any time. Your email will not be sold/rented.

1000+ Fun And Engaging Cartoon Illustrations – only $17!