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

Incredible Demos

  • By
    Introducing MooTools ScrollSide

    This post is a proof of concept post -- the functionality is yet to be perfected. Picture this: you've found yourself on a website that uses horizontal scrolling instead of vertical scrolling. It's an artistic site so you accept that the site scrolls left to right.

  • By
    External Site Link Favorite Icons Using MooTools and CSS

    I recently came upon an interesting jQuery article about how you can retrieve all external links within a page, build the address of the site's favorite icon, and place the favorite icon along side the link. I've chosen a different approach which...

Discussion

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