Testing Simplified: Page Objects

Testing is hard. Maintaining tests is even harder.

When we first started using Selenium WebDriver, writing a test meant creating a one-off function that performed the given task, but duplicated a bunch of code, and used hard-coded elements if any HTML/CSS got involved. Trying to get coverage on something as large as the Behance Network (be.net) became bloated and unmaintainable.

Without an easy way to create and improve tests as features changed, QA + testing became the last priority in development.

Read more →

How We Used Sass to Build 17 Websites in Five Days

On Wednesday, April 4 we launched 17 websites all at once. They were our 17 Served sites, which included 12 previously existing ones and 5 brand new ones, all with a fresh new makeover. Development was completed two days prior to launch, and started five days prior to that, with a team of only three front-end developers.

Five days to build 17 websites?! You heard right! With heavy utilization of some advanced Sass’ techniques, we built 17 websites in 5 days, a feat we almost definitely could not have accomplished without the power of Sass variables, partials, logic and imports.

Read more →

The New Behance: Better, Faster, Stronger with Sass

The new Behance features a multitude of new ways to explore and discover creative work. But what about the code that powers everything you see and interact with? What’s making everything look so good and feel so smooth?

A big part of the answer is CSS. There have been a lot of advancements in web development recently, not only in terms of the HTML5 and CSS specs but also in the multitude of tools that have been created to assist in CSS development. We can build cooler websites in less time, and the rapid release schedules of popular browsers like Firefox and Chrome mean that web developers can deliver more awesome faster than ever before.

Read more →

Developer’s Toolkit: Alex Lee

This post is part of a series where Behance developers talk about the various tools they use to get things done and make ideas happen.

1. Who are you and what do you do at Behance?

Greetings all! I’m Alex Lee and I joined the team at Behance to do crazy JavaScript for our various web apps. Before I joined, only Dave Stein was doing the heavy JavaScripting. That at least partially contributes to his creeping madness. Since day 1 of working here, I have been charting the great tumultuous seas of JavaScript, building the new Action Method Online, which I can assure everybody is at least 17 times better than the current one.

Read more →

Developer’s Toolkit: Jess Lissy

This post is part of a series where Behance developers talk about the various tools they use to get things done and make ideas happen.

1. Who are you, and what do you do at Behance?

Oh hey! My name is Jessica Nicole Lissy, but most people call me Jess. I’m a professional mouse clicker, code stalker, Apple lover, and style enthusiast. I’m originally from New Jersey, but I spent most of my life in Charleston, South Carolina and Orlando, Florida. I’ve also lived in California, Arizona, and Colorado. I like to surf, wakeboard, snowboard, and sport the latest kicks.

Basically what I do at Behance is CSS the “bleep” out of Behance’s Custom Creative Networks (such as Student Show, among others), and all of our Served sites.
Read more →

What SOPA Means for Creatives

The Stop Online Piracy Act, better known as SOPA, is a bill that grants power to the federal government and copyright holders to take actions against sites that promote copyright infringement. The problem with the bill is its murky definition of what makes a site in violation. A site is in violation of the act if it  operates with the “object of promoting, or has promoted, its use to carry out acts that constitute a violation” of copyright. Unfortunately, this includes any site that allows users to post text, images, audio or videos. There is no additional process for determining if a site actually infringes on this criteria.

At Behance, we take copyright very seriously. As an online platform for Creative Professionals, one of our goals is to help you get the exposure you deserve while at the same time protecting your work with copyright settings. Currently, we allow an assortment of copyright options via Creative Commons licensing, which is what most major photo-sharing sites use. We believe this affords a great balance of protecting your work and allowing it to get the exposure it deserves.

Read more →

Emulate Backbone Events with jQuery 1.7 $.Callbacks

I just started the fun upgrade process from jQuery 1.6 to 1.7 across our apps. One of the things that’s been missing from jQuery for a long time are non-DOM based events. In places where I needed them, I took the bind/unbind/trigger methods from Backbone.js.

Now $.Callbacks enters the room with a standing ovation. It lets developers control lists of callbacks that will all fire at once. For example you can create

// Register list
var cartUpdated= $.callbacks();

// Add callback1 to list
cartUpdated.add( callback1 );

// Add callback2 to list
cartUpdated.add( callback2 );

// Fire so both callbacks run
cartUpdated.fire( "quantity", "price" );

What I find is that this syntax is very powerful in most basic cases with one file. It becomes too coupled once more than one file is introduced though. To alleviate the coupling problem, I have created a small singleton, Events. The full singleton code is a gist here. The idea is that Events wraps fire/add/remove with trigger/bind/unbind to get the power of traditional DOM-related events. For instance I can trigger any event on an element at any point, without worrying if anything was bound or created beforehand. $.Callbacks doesn’t natively allow that. As you saw above, you need a reference to “cartUpdated.” This singleton allows for that blind firing that proves useful in many cases.

Read more →

Developer’s Toolkit: Matt LeBrun

This post is part of a series where Behance developers talk about the various tools they use to get things done and make ideas happen.

1. Who are you, and what do you do at Behance?

Hey everybody! My name is Matt LeBrun and I’m the latest addition to the Dev Team over here at @Behance. I graduated school in 2008 and have been building things for the web ever since. Here at Behance, I’ve gotten my hands dirty in a wide range of projects including the new Art Center Gallery, some Network Javascripting, creating some internal documentation, as well as a distributed logging application. Some current side projects are a personal management tool built off Codeigniter and a mobile app for an invoicing service.

As I define my role here, I think my major role is helping out where another developer is needed. I’m very flexible with my range of skills and can hop on most projects with little explanation. With such a great team and great products, I love bouncing around project to project because it keeps everything fresh for me.

Read more →

Developer’s Toolkit: Dan Chan

This post is part of a series where Behance developers talk about the various tools they use to get things done and make ideas happen.

1. Who are you, and what do you do at Behance?

Hey there, Dan Chan here. I am the lead QA engineer at Behance. Last summer, I started off as an intern developing features for our web applications. After graduating from Binghamton University, I became a fulltime employee and am currently spearheading the automated testing effort (with the help of Bryan and the rest of the dev crew.) Did I mention that I’m also the youngest person on the dev team? I’m also the youngest person at Behance, but don’t count me out.
Read more →

Developer’s Toolkit: Jackie Balzer

This post is part of a series where Behance developers talk about the various tools they use to get things done and make ideas happen.

1. Who are you, and what do you do at Behance?
Hello Internet! I’m Jackie and I’m Behance’s resident web gradient maker/CSS wizard/semantic HTML evangelist/front-end developer. The short description of my role is that I make things pretty; primarily, I’m the one responsible for taking designs and building the HTML/CSS that you see when you browse our sites. The long description on top of that is being responsible for keeping our HTML and CSS standards compliant, clean, organized and efficient (for example, so that all of our websites and all of your ProSites look good, work correctly and are snappy-quick in every browser) as well as building out entire new features for ProSite, such as cover loading effects and implementing Typekit, among others.
Read more →