7 Excellent Treehouse Blog Posts

By  on  
Treehouse Free

My sponsor Treehouse has not only an excellent video tutorial service, but also an insightful blog. I wanted to feature a few of the posts I found most useful -- hopefully you get something out of them!

Extending Placeholder Selectors with Sass

I recently wrote an article on creating a themable button set with Sass where I used a mixin to define all base styles, then a color value was passed as an argument when included in each theme.

Accessing the Device Camera with getUserMedia

In this blog post you are going to learn how to access the device camera using getUserMedia and stream this input into a <video> element. To finish up you will play around with using CSS3 filters to add cool effects to the video.

Dynamic jQuery Image Avatar Cropping Effect

After toying with Jcrop I have come to really support this plugin. The codes are very small and do not require a whole lot of setup (although there are plenty of optional settings). My demo example will include dynamic avatar updating in real-time, along with a PHP rendering script. I think the amount of new social networks and websites offering user profiles should definitely take this UX technique into consideration.

Create an Absolute Basic Mobile CSS Responsive Navigation Menu

In this tutorial we will go over the process in coding a very basic CSS responsive navigation menu. We will transform a basic non-list style navigation to a drop down menu using media queries in our stylesheet. There's no need for javascript in this tutorial. We will walk through the build in this order HTML > CSS > Media Queries.

Take Control of the Box Model with box-sizing

In this article, we'll go over a few important things to know about the box model, like how it affects defining accurate fixed and fluid sizes, then learn how to tame it with the new box-sizing feature.

Quick Tip: Saving SVG Files in Adobe Illustrator

What's an SVG, and why do I have to use it? SVG, or Scalable Vector Graphics, are very small in file size and are great for retina displays. Vector graphics have an advantage over pixel formats like .gif or .jpg as they don't deal with resolution. SVGs can scale to any size and not lose clarity. All SVGs are usually smaller in file size than raster graphics.

Building a Syntax-Highlighted Input Box with JavaScript

In this article I want to present a JavaScript library called ACE. It is completely open source and free to download for use on any website project. This script allows developers to create input boxes which support syntax highlighting. Then you may pull this code to embed into other parts of your layout, or to process in the backend. The ACE library is my first choice to implement code highlighting and it is a breeze to install.

Recent Features

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Image Manipulation with PHP and the GD Library

    Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once. ...OK I'm rubbish when it comes to Photoshop.

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!