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
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    WordPress-Style Comment Controls Using MooTools or jQuery

    WordPress has a nice little effect on the Admin Dashboard where it shows and hides the comment control links when you mouseover and mouseout of the record's container. Here's how to achieve that effect using MooTools or jQuery. The XHTML Notice that we place the links into...

  • By
    Create a Brilliant Sprited, CSS-Powered Firefox Animation

    Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The...

Discussion

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