7 Excellent Treehouse Blog Posts
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.
