Skip navigation
Help

Philadelphia

Original author: 
(author unknown)

Great design is a product of care and attention applied to areas that matter, resulting in a useful, understandable, and hopefully beautiful user interface. But don’t be fooled into thinking that design is left only for designers.

There is a lot of design in code, and I don’t mean code that builds the user interface—I mean the design of code.

Well-designed code is much easier to maintain, optimize, and extend, making for more efficient developers. That means more focus and energy can be spent on building great things, which makes everyone happy—users, developers, and stakeholders.

There are three high-level, language-agnostic aspects to code design that are particularly important.

  1. System architecture—The basic layout of the codebase. Rules that govern how various components, such as models, views, and controllers, interact with each other.
  2. Maintainability—How well can the code be improved and extended?
  3. Reusability—How reusable are the application’s components? How easily can each implementation of a component be customized?

In looser languages, specifically JavaScript, it takes a bit of discipline to write well-designed code. The JavaScript environment is so forgiving that it’s easy to throw bits and pieces everywhere and still have things work. Establishing system architecture early (and sticking to it!) provides constraints to your codebase, ensuring consistency throughout.

One approach I’m fond of consists of a tried-and-true software design pattern, the module pattern, whose extensible structure lends itself to a solid system architecture and a maintainable codebase. I like building modules within a jQuery plugin, which makes for beautiful reusability, provides robust options, and exposes a well-crafted API.

Below, I’ll walk through how to craft your code into well-organized components that can be reused in projects to come.

The module pattern

There are a lot of design patterns out there, and equally as many resources on them. Addy Osmani wrote an amazing (free!) book on design patterns in JavaScript, which I highly recommend to developers of all levels.

The module pattern is a simple structural foundation that can help keep your code clean and organized. A “module” is just a standard object literal containing methods and properties, and that simplicity is the best thing about this pattern: even someone unfamiliar with traditional software design patterns would be able to look at the code and instantly understand how it works.

In applications that use this pattern, each component gets its own distinct module. For example, to build autocomplete functionality, you’d create a module for the textfield and a module for the results list. These two modules would work together, but the textfield code wouldn’t touch the results list code, and vice versa.

That decoupling of components is why the module pattern is great for building solid system architecture. Relationships within the application are well-defined; anything related to the textfield is managed by the textfield module, not strewn throughout the codebase—resulting in clear code.

Another benefit of module-based organization is that it is inherently maintainable. Modules can be improved and optimized independently without affecting any other part of the application.

I used the module pattern for the basic structure of jPanelMenu, the jQuery plugin I built for off-canvas menu systems. I’ll use that as an example to illustrate the process of building a module.

Building a module

To begin, I define three methods and a property that are used to manage the interactions of the menu system.

var jpm = {
    animated: true,
    openMenu: function( ) {
        …
        this.setMenuStyle( );
    },
    closeMenu: function( ) {
        …
        this.setMenuStyle( );
    },
    setMenuStyle: function( ) { … }
};

The idea is to break down code into the smallest, most reusable bits possible. I could have written just one toggleMenu( ) method, but creating distinct openMenu( ) and closeMenu( ) methods provides more control and reusability within the module.

Notice that calls to module methods and properties from within the module itself (such as the calls to setMenuStyle( )) are prefixed with the this keyword—that’s how modules access their own members.

That’s the basic structure of a module. You can continue to add methods and properties as needed, but it doesn’t get any more complex than that. After the structural foundations are in place, the reusability layer—options and an exposed API—can be built on top.

jQuery plugins

The third aspect of well-designed code is probably the most crucial: reusability. This section comes with a caveat. While there are obviously ways to build and implement reusable components in raw JavaScript (we’re about 90 percent of the way there with our module above), I prefer to build jQuery plugins for more complex things, for a few reasons.

Most importantly, it’s a form of unobtrusive communication. If you used jQuery to build a component, you should make that obvious to those implementing it. Building the component as a jQuery plugin is a great way to say that jQuery is required.

In addition, the implementation code will be consistent with the rest of the jQuery-based project code. That’s good for aesthetic reasons, but it also means (to an extent) that developers can predict how to interact with the plugin without too much research. Just one more way to build a better developer interface.

Before you begin building a jQuery plugin, ensure that the plugin does not conflict with other JavaScript libraries using the $ notation. That’s a lot simpler than it sounds—just wrap your plugin code like so:

(function($) {
    // jQuery plugin code here
})(jQuery);

Next, we set up our plugin and drop our previously built module code inside. A plugin is just a method defined on the jQuery ($) object.

(function($) {
    $.jPanelMenu = function( ) {
        var jpm = {
            animated: true,
            openMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            closeMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            setMenuStyle: function( ) { … }
        };
    };
})(jQuery);

All it takes to use the plugin is a call to the function you just created.

var jpm = $.jPanelMenu( );

Options

Options are essential to any truly reusable plugin because they allow for customizations to each implementation. Every project brings with it a slew of design styles, interaction types, and content structures. Customizable options help ensure that you can adapt the plugin to fit within those project constraints.

It’s best practice to provide good default values for your options. The easiest way to do that is to use jQuery’s $.extend( ) method, which accepts (at least) two arguments.

As the first argument of $.extend( ), define an object with all available options and their default values. As the second argument, pass through the passed-in options. This will merge the two objects, overriding the defaults with any passed-in options.

(function($) {
    $.jPanelMenu = function(options) {
        var jpm = {
            options: $.extend({
                'animated': true,
                'duration': 500,
                'direction': 'left'
            }, options),
            openMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            closeMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            setMenuStyle: function( ) { … }
        };
    };
})(jQuery);

Beyond providing good defaults, options become almost self-documenting—someone can look at the code and see all of the available options immediately.

Expose as many options as is feasible. The customization will help in future implementations, and flexibility never hurts.

API

Options are terrific ways to customize how a plugin works. An API, on the other hand, enables extensions to the plugin’s functionality by exposing methods and properties for the implementation code to take advantage of.

While it’s great to expose as much as possible through an API, the outside world shouldn’t have access to all internal methods and properties. Ideally, you should expose only the elements that will be used.

In our example, the exposed API should include calls to open and close the menu, but nothing else. The internal setMenuStyle( ) method runs when the menu opens and closes, but the public doesn’t need access to it.

To expose an API, return an object with any desired methods and properties at the end of the plugin code. You can even map returned methods and properties to those within the module code—this is where the beautiful organization of the module pattern really shines.

(function($) {
    $.jPanelMenu = function(options) {
        var jpm = {
            options: $.extend({
                'animated': true,
                'duration': 500,
                'direction': 'left'
            }, options),
            openMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            closeMenu: function( ) {
                …
                this.setMenuStyle( );
            },
            setMenuStyle: function( ) { … }
        };

        return {
            open: jpm.openMenu,
            close: jpm.closeMenu,
            someComplexMethod: function( ) { … }
        };
    };
})(jQuery);

API methods and properties will be available through the object returned from the plugin initialization.

var jpm = $.jPanelMenu({
    duration: 1000,
    …
});
jpm.open( );

Polishing developer interfaces

With just a few simple constructs and guidelines, we’ve built ourselves a reusable, extensible plugin that will help make our lives easier. Like any part of what we do, experiment with this structure to see if it works for you, your team, and your workflow.

Whenever I find myself building something with a potential for reuse, I break it out into a module-based jQuery plugin. The best part about this approach is that it forces you to use—and test—the code you write. By using something as you build it, you’ll quickly identify strengths, discover shortcomings, and plan changes.

This process leads to battle-tested code ready for open-source contributions, or to be sold and distributed. I’ve released my (mostly) polished plugins as open-source projects on GitHub.

Even if you aren’t building something to be released in the wild, it’s still important to think about the design of your code. Your future self will thank you.

0
Your rating: None
Original author: 
TEDxTalks


What if It's That Simple?: Jen Croneberger at TEDxGettysburgCollege

Jen Croneberger Croneberger was the CEO/Founder of Excellence Training Camps, Inc. and is currently the president of JLynne Consulting Group, LLC. She has he...
From:
TEDxTalks
Views:
52

6
ratings
Time:
16:29
More in
Education

0
Your rating: None

url

Today NPR is streaming the new Youth Lagoon album and tomorrow he does on tour, just going to keep it short, what a great record, enjoy.

TRACKLIST
Through Mind and Back
Mute
Attic Doctor
The Bath
Pelican Man
Dropla
Sleep Paralysis
Third Dystopia
Raspberry Cane
Daisyphobia

TOUR DATES
02-26 Missoula, MT – Badlander
02-27 Bozeman, MT – Filling Station
02-28 Salt Lake City, UT – Kilby Court
03-01 Denver, CO – Larimer Lounge
03-06 New York, NY – Bowery Ballroom
03-13-16 Austin, TX – SXSW
03-22 Boise, ID – Treefort Music Fest
04-12 Indio, CA – Coachella
04-19 Indio, CA – Coachella
04-21 Phoenix, AZ – Crescent Ballroom
04-22 Tucson, AZ – Club Congress
04-24 Austin, TX – Mohawk
04-25 Dallas, TX – The Loft
04-26 Houston, TX – Fitzgerald’s
04-27 New Orleans, LA – One Eyed Jacks
04-28 Birmingham, AL – The Bottletree
04-30 Orlando, FL – The Social
05-01 Atlanta, GA – Terminal West
05-02 Nashville, TN – Mercy Lounge
05-03 Asheville, NC – The Grey Eagle
05-04 Carrboro, NC – Cat’s Cradle
05-07 Northampton, MA – Pearl St.
05-10 Philadelphia, PA – Union Transfer
05-11 Columbia, MD – Sweet Life Festival
05-13 Toronto, Ontario – Great Hall
05-14 Columbus, OH – A&R Bar
05-15 Chicago, IL – Metro
05-16 Madison, WI – Majestic Theater
05-17 Minneapolis, MN – Fine Line
05-22 Portland, OR – Wonder Ballroom
05-23 Vancouver, British Columbia – Venue
05-24 Gorge, WA – Sasquatch! Fest
06-05 Brooklyn, NY – Barclays Center *
* with the National

Youth Lagoon’s second album, Wondrous Bughouse, is one of the most arresting headphone records you’ll hear this year. Trevor Powers, the band’s sole member, layers strange but alluring synth textures under quirky melodies and simple pop beats, in the process creating an expansive and endlessly engrossing world of sonic curiosities.

As with Youth Lagoon’s 2011 debut, The Year of Hibernation, the songs on Wondrous Bughouse are moody but not melancholy. Thematically, Powers finds himself in an existential spiral, as he asks grand questions about mortality, the spiritual world and his own mental state — which he describes as “hyperactive.” Weighty subjects ripe for pensive introspection, sure, but the music is uplifting, if a bit dysphoric, like an awkward hug for all that is light and beautiful.

Powers, who says he controls his busy mind with music, offers no illuminating epiphanies or profound discoveries on Wondrous Bughouse, out March 5; he says he hasn’t had any. But the songs allow him to assume the identity of Youth Lagoon and sort through all the emotional and mental baggage he, like so many, carries with him everywhere. The album opens a window into our odd little world, with the understanding that life is a baffling mystery, but also a wonderful ride.

via NPR

Permalink |
Comment On This Post (3) |
Tweet This Post | Add to
del.icio.us | Stumbleupon

Post tags:

0
Your rating: None

There’s always something interesting about history—it’s often just a matter of knowing where to find it.

That’s the idea behind Shorpy.com, an eye-popping collection of historical imagery that casts a modern light on an astonishing array of photographs long-hidden in the Library of Congress archives. Named after a 12-year-old coal miner in a picture by the great Lewis Hine, Shorpy.com offers new, high-definition life to old images, restoring the often-breathtaking detail found in the original negatives: the uneven, rutted cobbles on a 1908 Philadelphia street, or the slight hint of alarm in the eye of a test pilot about to fly an aircraft in 1911.

In the last decade, the Library began digitizing specific sets of images in their 13-million-photo strong collection. Soon after, Dave Hall, the co-founder of Shorpy.com, began exploring their archives. Previously a Style editor at the Washington Post, Hall wasn’t especially interested in historical images until late one night, when he discovered several photographs of early 20th-century child laborers. Taken by Lewis Hine on an 8×10 view camera, Hall was amazed at the pictures’ clarity — sparkling with far more detail than a standard 35mm frame. Wondering why he had never before seen such strikingly detailed historical imagery, Hall took it upon himself to post the photos online, in high-resolution — an endeavor simplified by the LOC’s public-domain image rights.

That was in 2007. Now, six years later, Hall has worked his magic on more than 10,000 historic photographs, ranging from early tintypes of Native Americans to medium-format color slides of 1950′s suburbia. Hall mostly sources the site’s new images from the LOC’s raw high-resolution scans, then restores them to their original grandeur.

The physical reality of turn-of-the-century America — its machines, factories, tenements and faces — emerge as if unearthed from a time capsule. Quirky cultural artifacts that have always been with us — locked in photosensitive chemicals in the glass plates and nitrate negatives of the LOC’s Prints & Photographs Division — feel as new and, in many cases, as unexpected, as they were on the day they were shot.

But the primary value of Shorpy.com isn’t just found in the hundreds upon hundreds of restored images of Americana, trains, bathing contests, accidents, war ephemera, portraits of royalty, and the occasional sharecropper. It’s in the details that Hall has meticulously restored within each photograph that the true power of these pictures is found. Every image republished on Shorpy has been color corrected, toned, and sharpened — restoring the brilliant texture and jaw-dropping sharpness found in the original negatives and glass plates. These negatives have a tremendous amount of detail, Hall explains, but the Library of Congress’ scans often don’t reflect this. The details exist in the original negatives, but are frequently hidden in blown-out highlights and muddied shadows. So, with each image, Hall balances the exposure, correcting for the wear of time upon negatives that record a narrow but deep slice of American history.

Hall doesn’t modify the content of the images, either — all of his adjustments are carefully limited to the standards of which the original photographers would likely pursue. He is, in effect, a master digital restorer, working as a darkroom printer of the time period would have done while preparing the images for public exhibition.

Most — if not all — of these pictures have never before been displayed with such clarity, and certainly have never been enjoyed, by an audience as vast as the web. This is where Shorpy’s strength as a historical and cultural tool comes into its own. Images that were once considered only as objects of history are made immediate and relevant once again, in part because we’re able to see that life in the past isn’t quite as different from our world as we perhaps imagined it to be. Shorpy lets us see in detail the faces of the past — and they look, in essence, exactly like the faces we’d see today on any American street.

Perhaps even more amazing than the photos themselves, however, are the comments on the site, often made anonymously, that help to flesh out the huge story behind the photos — and, in a sense, behind the Library of Congress itself. Users of the site closely inspect the images, pointing out a range of details — everything from specific styles of clothing to the facial expressions of passersby reflected in store windows.

For history to be relevant, it has to not only be accessible, but detailed enough that it feels alive. By embracing the immeasurable value of America’s vast, public photo library, Shorpy has found an elegant way to engage a generation for whom, and on whom, the power and personality of history is often lost.

Vaughn Wallace is the producer of LightBox. Follow him on Twitter @vaughnwallace.

0
Your rating: None


TEDxPhoenixville - Kristin Pedemonti - Release Your Inner Superhero

Once upon a time, in 2005, Kristin embarked on a journey and a new adventure. She sold her home and most of her possessions to live her dream as a full-time professional storyteller and to create/fund/facilitate a volunteer project, Literacy Outreach Belize, Central America. What began with one school expanded beyond her wildest expectations. Kristin traveled village to village and donated literacy programs for 33340 students and trained 800 teachers to use their own indigenous stories in the classroom. Her book, Building Bridge Between; Connecting Cultures, Classrooms and Communities, a collection of student and teacher stories from the workshops she conducted, will be published next year. The project has been invited to expand to Ghana, Kenya and India in 2013 where she will volunteer training teachers and librarians. Today Kristin travels the world connecting cultures and building bridges between people sharing joy and hope through storytelling. Kristin is the recipient of the National Storytelling Network 2011 International StoryBridge Oracle Award for her work bridging cultures through story. Kristin is also a finalist in the TED2013 talent search. Kristin enjoys sharing stories, Free Hugs, Bubbles on Expressways, and helping others release their Inner Superheroes. storytellerkp.com TEDxPhoenixville, the first TEDx event in the Philadelphia region, celebrates the creative, innovative and inspiring work happening right here and all around the world. Our objective is <b>...</b>
From:
TEDxTalks
Views:
3

6
ratings
Time:
17:07
More in
Nonprofits & Activism

0
Your rating: None