WebLinc Labs

Who’s Darren Hill?

Kristin Hodgson — Fri, 26 Apr 2013 18:00:22 +0000

Perhaps you’d like to get to know a little bit more about Darren Hill, co-Founder and CEO of WebLinc, the eCommerce platform provider for Nasty Gal and Free People, one of URBN’s well-known brands. Well, you can, in a Philadelphia Business Journal article published on April 19, 2013, where Darren reveals some little known facts about himself including his first job, his yardstick of success, his life motto, and some true confessions. Check it out! Don’t have a subscription? No problem, just email us at pr@weblinc.com and we’ll be happy to email it to you.

World Wide WebLinc

Kristin Hodgson — Thu, 25 Apr 2013 21:00:13 +0000

In between dreaming up visions for the future of retail, Darren and WebLinc have been busy making their way around the globe, sometimes without even leaving Philadelphia. If you plan to fly Southwest Airlines before the end of April, look for a picture of Darren cleaning the sand from his briefcase in the airline’s Spirit Magazine. You’ll also see a photo of WebLinc’s headquarters kicking off a fantastic article about Philadelphia in the March 2013 edition of the US Airways Magazine.

Technically, It’s Philly Tech Week

Kristin Hodgson — Wed, 24 Apr 2013 20:34:57 +0000

This is a very eventful week for the tech community in Philadelphia and WebLinc is excited to be part of it! Come see us on April 26th at the Mobile, Marketing, and eCommerce Trends event hosted by URBN at 3 p.m. Darren Hill, co-Founder and CEO of WebLinc eCommerce will share his vision for the future of retail during a 3-5 minute “lightning” talk presentation – One-Retail – Consolidating the Multi-Channel Retail Experience. He wants to enable and inspire retailers to create and manage a single shopping experience by bringing all points of sale together on a single platform. The benefit? A fully integrated customer experience and a dramatically enhanced merchant’s view of the customer regardless of whether they’re using a smart phone, iPad, or shopping in-store. It will be an enlightening conversation (no pun intended). Be sure to stay for the panel discussion afterwards. If you plan to attend the Signature event from 6-9 p.m., we’ll see you there!

Front end SPOF in the wild

Chris Cressman — Mon, 22 Apr 2013 15:13:46 +0000

Prologue

The sun had long since disappeared behind the tall church steeple outside my office window. The office was dark, and it was a long walk over to that light switch on the other side of the room. Knowing I would soon be overcome by eye strain, I made the difficult decision to go home.

The train station is a mile away by foot. I’d have to time it perfectly. So I opened my guide, the SEPTA home page, and waited.

And waited…

Alas, nothing… Nothing but a blank white page.

Chapter 1: Disenchantment

This is the first time as a web user that I had experienced a front end single point of failure, or SPOF. The point of failure this time was a script tag trying to load jQuery from Google’s CDN:

This script element was inserted in the of the document. When the request to this 3rd party domain failed (or was delayed longer than I was willing to wait), everything below it (including the entire ) was left patiently waiting, and I was left with a blank screen.

The problem, of course, is that script tags generally block the browser’s HTML parser. This situation could be improved by moving all scripts to the end of the . In that case, the DOM could have at least rendered, but all JavaScript would have still been blocked, waiting for jQuery to show up. jQuery could also be loaded asynchronously to avoid blocking the rest of the page, but any scripts that depend on jQuery would still be left waiting until it arrives.

Chapter 2: Burlesque

The irony here is that something done to improve performance ended up crippling the site. Many developers choose to load jQuery from a CDN because, anecdotally, it makes sense. Other users will already have that file cached and will therefore have fewer bytes to download. However, we have data that suggests otherwise. SEPTA is using jQuery 1.7.2 and according to Steve Souders’ latest analysis in March 2012, only 1.1% of sites in his sample were loading that version of jQuery from the Google CDN. Loading JavaScript libraries from a CDN is a performance gamble that rarely pays off.

When you store blocking assets like JavaScript on a 3rd party server, your uptime now depends on that 3rd party server. Unless you have evidence that a JavaScript CDN is right for your app, consider bundling jQuery or other dependencies with your own JavaScript code and loading them from your own server.

Furthermore, JavaScript CDNs are not the only form of front end SPOF. Review the many kinds of SPOF for a look at others to be aware of.

jQuery Big Image – A plugin for image zooming

Jenn Voss — Mon, 18 Mar 2013 13:10:56 +0000

Overview

jQuery Big Image is a plugin for image zooming that displays an enlarged image as the user hovers over the corresponding area of an existing image. It works well cross browser (even as far back as IE6) and has built in methods to init, change, and destroy the zoomed image for easy manipulation.

Installation & Setup

Minimum requirements include an image tag wrapped in an anchor that points to the url of the enlarged image. Then simply include references to jQuery and Big Image, and call bigImage() on the anchor tag.

Options

Name	Default Value	Description
autostyle	true	Adds position:relative and z-index values to affected DOM elements as well as a 2px border around the maskElement. Set this to ‘false’ if you prefer to keep all style information in your CSS files.

Zoom options

Name	Default Value	Description
width	500	Sets the width of the maskElement.
height	500	Sets the height of the maskElement.
maskElement		Returns the element that contains the zoomed in image, which gets appended to the tag.

Lens options

Name	Default Value	Description
element		Returns the element that serves as a visual indicator of the zoomed in area by highlighting the corresponding portion of the smaller image. It gets appended to the element that bigImage() is called on.
loadingElement	Loading…	Returns the loadingElement which appears after the user has hovered over the image. It gets appended to the element that bigImage() is called on and is removed from the DOM once the zoomed image has loaded.

Extended options example

$('a.zoom').bigImage({
    autostyle: true,
    zoom: {
        width: 600,
        height: 400,
        maskElement: function() {
            return $('', { 'class': 'zoom-mask' });
        }
    },
    lens: {
        element: '',
        loadingElement: ''
    }
});

Methods

init

init bigImage

$('a.zoom').bigImage('init');

destroy

Destroys bigImage and unbinds all events

$('a.zoom').bigImage('destroy');

changeImage

Updates the image urls that bigImage was originally called on

$('a.zoom').bigImage('changeImage', {
	smallImageUrl: $(this).find('img').attr('src'),
	largeImageUrl: $(this).attr('href')
});

Demo & Screenshot

http://weblinc.github.com/jquery-big-image/

Chrome dev tools updates

Chris Cressman — Mon, 18 Mar 2013 13:05:41 +0000

A while back, The Chromium Blog covered new features in Chrome 25 Beta, including some improvements to Chrome Developer Tools. Chrome 25 has since been pushed into the stable channel, so let’s take a closer look at some of the dev tools updates.

Console API

Firebug’s console API has become a de facto standard supported by most modern browsers. However, Chrome has not supported the console.clear() method until now.

Debugging your code with console.log() can be a mess if a disrespectful 3rd party script is logging its entire life story to the console. For these instances, clear the console before logging your own data.

// Clear out that 3rd party mess
console.clear();

// Log your own data
console.log(...);

Another way to make your log statements stand out is to color them. Coloring console.log() statements has been around for a while, but now Chrome supports multiple colors within a single log statement.

console.log(
    "%c PapayaWhip on Black %c LavenderBlush on DimGray ",
    "color: papayawhip; background-color: black",
    "color: lavenderblush; background-color: dimgray"
)

Top toolbar

Moving above the console, you may have noticed the dev tools icons are gone from the top toolbar.

If you love and miss these icons, bringing them back is a checkbox away.

Use the settings cog in the lower right corner to access dev tools settings.

Docking toggle

In addition to toggling the icons on and off, you can toggle the position of the dev tools using the docking toggle icon in the lower left corner. Clicking the button toggles the dev tools pane between 2 positions. By default those positions are (1) the bottom of the main browser window and (2) the right of the main browser window. Click and hold the dock toggle button to open the dev tools in a separate window. Clicking the button again brings the dev tools back into the main window.

The three states of the docking toggle:

Emulate CSS media types

Returning to the dev tools settings, under “Overrides”, you will now find an option to emulate CSS media types. This can save a lot of time when writing CSS for alternate media types, particularly print.

Console API docs, screen media:

Console API docs, print media:

Note, however, emulating print media produces a different result than print preview.

Print preview hides background colors and images and may change the color of text to produce contrast where needed. Most print stylesheets depend on the browser to make these changes. However, by emulating the print media type, you can make those changes explicitly in your stylesheet and not depend on the assumption that the browser will do it for you.

Sources editor

Lastly, the CodeMirror editor, replacing the default DevTools editor in the Sources Panel, was updated to version 3.

To see this editor in action, view a short screencast from Remy Sharp.

Availability

Chrome 25 is now stable, so these updates are available to everyone. To get dev tools updates sooner, run Chrome Canary, or even better, run Chrome and Canary side by side.

Lint JavaScript while you type with SublimeLinter for Sublime Text 2

Chris Cressman — Tue, 15 Jan 2013 15:46:21 +0000

SublimeLinter is a package for Sublime Text 2 that applies lint tools to your code while you type. SublimeLinter provides lint tools for many languages, but in this article I will look at JavaScript linting only.

Why use a lint tool?

You should use a lint tool to check your code for errors and conformance to a style guide. This is particularly important when working on teams, since code will be maintained by multiple developers over time. See my Introduction to JSLint for a closer look at one JavaScript linter.

Why SublimeLinter?

There are several JavaScript linters for Sublime Text 2. Why SublimeLinter? In brief:

It runs as you type. There’s no need to use the mouse or an extra key binding to trigger the linting. However, if you prefer to trigger the linting manually, there is an option to do so.
Inline highlighting shows you exactly where the errors are. Focus on one error at a time by clicking into a highlighted region and reading the message displayed in the status bar. If you find the outlining obtrusive, you can use margin highlighting instead.
Messages are displayed in the status bar–an existing space. The plugin does not open any new windows or panels to display its output.

Installation and configuration are also simple, as outlined below:

Install a JavaScript engine on your OS

To use SublimeLinter’s JavaScript linting tools, you must have a JavaScript engine installed on your OS. Mac OS X includes a JavaScript engine, but Windows generally does not. I’m writing this on a Windows machine, so I went to the Node.js website, clicked “Install”, and ran the MSI file to install Node.js. Linux users can generally install Node.js through your OS package manager. You do not need to install any additional Node.js packages–SublimeLinter bundles the other code it needs for JavaScript linting.

Install the Package Control package for Sublime Text 2

As a Sublime Text 2 user, you likely have Package Control installed already. If not, follow the instructions on the Package Control installation page. Restart Sublime Text 2 after installing.

Although Package Control isn’t required to install SublimeLinter, installing with Package Control is fast and easy, and Package Control keeps your packages up to date.

Install the SublimeLinter package for Sublime Text 2

Open the Sublime Text 2 command palette (Command+Shift+P on Mac OS X, Control+Shift+P on Windows and Linux) and select Package Control: Install Package. Then, from the list of available packages, select SublimeLinter.

Watch it work

Restart Sublime Text 2 and open a JavaScript file. Type some code with an obvious error (like putting a dash in a variable name). SublimeLinter lints your code whenever you stop typing or save the file. The erroneous code you typed should now be outlined. Click into the outlined code to see a message from the lint tool in the Sublime Text status bar at the bottom of the editor.

Configuration

To configure which lint tool or which options are used, open the default settings (Preferences->Package Settings->SublimeLinter->Settings – Default) and your user settings (Preferences->Package Settings->SublimeLinter->Settings – User). You must make all changes in the user settings file, since changes to the default settings will be reverted if the package is ever updated. Using the default settings as a template, add any customizations you require to your user settings file. Remember to use valid JSON when working within Sublime Text 2 settings files.

JSHint

By default, JavaScript linting is handled by JSHint. To pass options to JSHint, add the jshint_options setting in your user settings file and pass in your desired options. See the JSHint documentation for a list of options.

JSLint

If you’d prefer to use JSLint, change the javascript_linter setting to “jslint”. Use jslint_options to pass options to JSLint. See the JSLint documentation for a list of options.

Wrap up

And there you have it–fast and easy JavaScript linting while you type. Happy linting!

Thanks to Matt Wicks for his contributions to this article.

Introduction to JSLint

Chris Cressman — Mon, 14 Jan 2013 15:19:21 +0000

What is JSLint?

JSLint is an open source JavaScript code quality tool. It is designed to catch a variety of errors and enforces a particular style that removes parts of the language that are problematic or error prone when used by non-expert JavaScript developers. Code that passes JSLint is less likely to contain errors and more likely to be readable and maintainable by JavaScript developers of varying skill levels.

Style

JSLint is opinionated software written by Douglas Crockford. JSLint expects your code to be error free and to conform to Code conventions for the JavaScript programming language, a style guide written by Crockford. You don’t necessarily need to study this style guide because JSLint will tell you when you’ve failed to conform to its guidelines. In my reading, however, I discovered two rules that are anachronistic and not checked by JSLint.

First:

It is preferred that each variable be given its own line and comment. They should be listed in alphabetical order.

This style has gone out of favor and JSLint now enforces a single var statement, which differs from the code examples shown in the style guide which use multiple var statements.

Also:

Do not use $ (dollar sign) … in names.

The ECMAScript specification reserves $ for particular uses in names, but due to the popularity of libraries like jQuery and Prototype that use the dollar sign, this recommendation has fallen out of favor as well.

Additionally, Crockford’s style guide suggests limiting all lines to a length of 80 characters. You must pass maxlen: 80 as an option to JSLint in order for JSLint to enforce this convention. See below for more on JSLint options.

Expectations

JSLint parses your code to look for specific syntax and idioms. It expects and does not expect certain things. Many of those expectations are described on the JSLint documentation page. JSLint provides a message and approximate line and column numbers for each potential error or style violation it reports. Many of JSLint’s messages correspond to expectations listed on the JSLint documentation page, while others do not. If you don’t understand the messages provided by JSLint, a search on Google or Stack Overflow will usually provide an explanation. JSLint has been around for a long time and is used by many people, so its expectations are well documented, just not necessarily in one place.

Image: JSLint expects only one var statement per function:

Options & directives

JSLint allows a certain amount of customization through options and directives. JSLint provides a variety of options to configure JSLint’s expectations. How you pass options to JSLint depends on how you are running JSLint (more on running JSLint below). You may end up passing an options hash to the JSLint function or editing a JSON file to set options. However, a method that works across all implementations is to add directives within the code you are linting. This is done in the form of comments that begin with global, properties, or jslint.

JSLint directives follow one of two formats:

/*directive name, name, name */

Or:

/*directive name: value, name: value, name: value */

Global directive

Use the global directive to allow one or more global variables in your code. This is useful when working with libraries that depend on a global variable such as jQuery or Underscore:

/*global $, _ */

Add a value of true if you expect to modify the value of a global variable. By default, JSLint sets this option to false for each global:

/*global myGlobal: true */

Properties directive

Use the properties directive to allow JSLint to check the spelling of your object properties. See the documentation for further explanation.

JSLint directive

Use the jslint directive to configure JSLint options. For example, you may want to use web browser host objects such as window, document, and alert in your code. You could pass these in as globals using the global directive, or add them all at once using the browser environment option:

/*jslint browser: true */

A jslint directive can be placed at the top of a file to apply the options to the entire file or at the top of a function to apply the options to that function only. Multiple jslint directives can be used.

To know what options are available, refer to the options section of the documentation, or toggle options on and off using the JSLint web app. As you toggle options in the web GUI, the JSLint directive at the bottom of the screen is updated to match. This is a convenient way to access JSLint’s most commonly used options.

Image: The JSLint options GUI and directive output:

Running JSLint

JSLint is written entirely in JavaScript and can therefore be used anywhere JavaScript can run. For this article, I’ll simply mention some of the possibilities:

Use the web app.
Install a plugin in your code editor.
Run a command line script on your machine.
Add JSLint to a build script.

I use the SublimeLinter plugin for Sublime Text 2. I describe the benefits of this plugin and how to install and configure it in another article.

Alternatives

We’ve determined that JSLint is the right tool for our client side team at WebLinc, but other lint tools are available, and one may be a better fit for your team. Perhaps in a future post I’ll compare these popular lint tools:

Maintain your chain with jQuery .tap()

Chris Cressman — Mon, 14 Jan 2013 15:14:23 +0000

Method chains are commonplace in jQuery. A typical jQuery pattern is to chain several method calls onto a jQuery object representing a selection from the DOM:

$('#nav li')
    .removeClass('selected')
    .filter(':first')
    .addClass('selected');

In order to continue a chain, each method must return an object to be the subject of the next method call. If you want to execute a function that doesn’t return an object, you have to break your chain. Tap is a method that lets you interrupt the chain to execute a callback, but always returns the object you started with to allow the chain to continue.

UI example

Consider the following requirements for a user interface:

Make a dialog from a string of HTML.
Run code to init some UI widgets, but only those inside the dialog. This affects the dialog’s size.
Reposition the dialog since its size has changed.

Let’s assume we have a jQuery plugin to handle the dialog functionality, and we are using another library to init the widgets.

Without tap, the jQuery code for this feature could look something like this:

var myDialog = $(htmlString).dialog({action: makeDialog});
initWidgets({scope: myDialog});
myDialog.dialog({action: centerDialog});

Our initWidgets library method does not return an object, so we need three separate expression statements and a variable to cache the jQuery object we are working with.

With tap, we could do something like this:

$(htmlString)
    .dialog({action: makeDialog})
    .tap(function () {
        initWidgets({scope: this})
    })
    .dialog({action: centerDialog});

Tap provides the the context—the this value—of our original jQuery object to initWidgets, but it also returns the jQuery object so we can continue chaining. In my opinion, this example is easier to read and feels more jQuery-like than the previous example.

Debugging example

Tap could also be used when debugging. In the following (contrived) example we log data without breaking out of a method chain:

$('#main')
    .children()
    .first()
    // insert tap method here to see what we've selected so far
    .tap(function () {
        console.log(this);
    })
    .nextUntil('ul')
    .children()
    // and so on

Implementation

Tap is not part of the jQuery API, so you’ll need to add this method to every jQuery object. Here is a minimal implementation:

$.fn.tap = function (callback) {
    callback.apply(this);
    return this;
};

Also refer to tap as implemented in Underscore.js and Ruby 1.9.3. Add your preferred implementation as a jQuery plugin and tap those chains!

Your Team Needs an Internal Blog

James Van Arsdale III — Thu, 20 Dec 2012 14:19:15 +0000

Whether you build software, websites, Mack trucks, or Acme Widgets – your team of employees need an internal blog. For the sake of clarity, here is how I define the term “blog” in this context: a centralized repository of content that is able to be searched, categorized and historically archived. Modern blogging software (WordPress, Blogger, etc) is often the best tool for this job.

The features of a blog allow team members to write down their ideas, talk about important changes, as well as post interesting articles that are relevant to the team. A lot of companies handle this by holding meetings or composing emails, but if you’re not invited – you’re not privy to the information. By creating a centralized place where your employees can share their thoughts with their team members, you’re empowering them to build a better product. Not only are you helping existing team members, but when demand spikes, and you need to add additional resources to the team, you now have a repository of information to help the new resource get up to speed. Often times, adding a resource will help you identify additional topics that need to be covered on the blog.

Here at WebLinc, we utilize an internal blog (per team) to post interesting articles, techniques, and new technology. This allows us to stay on top of ever-changing web technologies. Some members end up participating more than others, but even if a team member isn’t posting to the blog, they’re still consuming its content and participating in the team.

The blog is a starting point to help your team communicate and share knowledge. There are plenty of other hurdles to building a better end product, but this will help the discussion get started.