Posts about Development

AngularFire

Email & Password Auth with AngularFire

What would it be like if you could easily extend the two-way bindings from Angular to sync with your database all in your JavaScript? What would you call that? Three-way binding? Sounds almost too easy. Thankfully the wonderful folks over at Firebase have taken a special interest in making Angular development fast and painless, which…

photoshopdashedlines-thumb

Customizing Dashed and Dotted Borders in CSS3

I love seeings designs that push the boundaries of CSS. It’s a great feeling to think that a particular component just isn’t possible, only to come across a lovely, clean, cross-browser compatible solution. With CSS3 trail-blazing a new frontier for modern web design, some pretty incredible things are now possible. But there are still a few…

Untitled-1

A Reintroduction to the DevTools Console

If you’re a front-end developer, chances are you’re constantly using console.log(); to print to the console in Chrome. Here’s a quick overview of the most approachable time savers and headache preventers that the DevTools Console API provides, all of which you can start using immediately no matter what you’re working on. Open up your console to play…

thumb

Better CSS Sprites with Sass

Sass is a powerful and flexible CSS pre-processor that we use extensively at The Phuse. Using Sass features like nested selectors, mixins and extends has become second nature to us as front-end developers, but what if you want to get a little bit fancier? Some of the most powerful features of Sass are SassScript and…

screnshot

Photoshop for Web Developers: Screencast

Before I got into web development, I spent a lot of time playing around in Photoshop, teaching myself the basics of digital painting and photo manipulation. As a result, I’m pretty handy with Photoshop for a web developer: I know all the tools, keyboard shortcuts, and claws I need to spend the least amount of time…

thumbnails-screen

How to Use Inline-Block

I’ve been using display: inline-block more often in CSS lately. With the widely-accepted dropping of support for IE7 and below, we don’t have to worry about hacks to make it work properly anymore. display: inline-block is useful for: Buttons Vertically aligning content without using tables or display:table-cell Layout as opposed to floats As an example,…

1

Getting Set Up for Rails on OS X

Setting up a new Mac for working on Ruby on Rails projects can be a bit tedious, but there’s no reason to lose control of your development environment by using a one-size-fits-all executable file. Instead of taking all the fun out of installing new software, here’s a step-by-step guide to get you started. These tools aren’t all…

Screen-Shot-2013-08-28-at-6.22.15-PM

Short Circuits: Using Jade templates with Yeoman

Yeoman is a great toolset for front-end development, giving you acccess to a generator, front-end package management with Bower, and automation with Grunt. Though it’s primarily discussed as a tool for building web apps using frameworks like Backbone or Angular, for which you might not be dealing with a great deal of static HTML, it…

valign-screen

The Best Way to Vertically Align in CSS

“The best way to vertically align something in CSS is to close your laptop and head out to the bar.” (Or something to that effect, read in passing on Twitter.) Even in these days of CSS3 where styling has advanced so much, it’s still a pain to vertically center anything. Until there’s a better way,…

ghapp

Hosting Static Sites on Github for Beginners

Hosting a simple website on Github is easy, free, and fast, and is one of the most painless ways to get your project online quickly. If you want to learn more about web development, it’s definitely worth learning all about Git and Github, but if you just want to get your project online, you don’t…