All Posts in The Programming Mechanism

April 14, 2009 - Comments Off on NY Web Standards Meetup—Typography for the Web

NY Web Standards Meetup—Typography for the Web

The New York Web Standards Meetup Group will meet this Thursday (16 April 2009) at theMechanism at 7:00 pm.

Christy Gurga (theMechanism) will present different perspectives on formatting type online and demonstrate methods you can use right away. While only basic CSS knowledge is required, Christy will cover advanced techniques that are applicable for front-end developers of any level.

You'll learn how to establish the CSS foundation for your type using relative font sizes and ems, implement text replacement practices for specially formatted headers and polish your typography with extra detail.

16 April 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please note—This meetup is currently full and the waiting list is quite long. If you know you won't be able to make it, please update your RSVP.

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

March 19, 2009 - 8 comments

SXSWi Resources Roundup

Whew! It's been quite a time at South By Southwest Interactive--lots of panels, parties, and good eating! Since there are a multitude of people who have taken amazing notes during the panels and core conversations, I'll spare you those details, but just as important as what's said during the panels is what you can take away from it! Here is a list of the "take-aways:" the twitter usernames, the Web sites and the books. Here are some ideas and resources you can use right away!

Overarching Themes:

  • Collaboration within companies, collaboration between client & web team, collaboration between web teams
  • Openness with coworkers and with clients
  • Don't do work for the sake of doing work; create deliverables that have applicable value
  • Some clients (and even workers) respond better to many lo-fidelity steps (sketching, collage, mood boards) to buy into the design process before seeing a polished design
  • Agile development! Working in quick phases to roll out a product. Everyone's talking about it, but it may not be good for every team or every client

Web Typography: Quit Bitchin' and Get Your Glyph On

See the slides at SXSW Typography

Links:


Being a UX Team of One

  • Leah Buley - Adaptive Path - @ugleah

Highlights:

  • Ditch the concept of the "singular genius designer." The designer is the person who takes everyone's ideas and creates a cohesive solution to the problem
  • Always sketch out at least six layout ideas!
  • Get as many people (developers, clients, shareholders) involved as early as possible

Links:

Books:


How to Create a Great Company Culture

Highlights:

  • A good fit is achieved by every team member having the same core values
  • Always remain passionate about what you're doing. Even if you find yourself in a situation you don't like, find a small thing to focus on and remain passionate

Books:


How MacGyver Would Do Design Research

  • M Jackson Wilkinson - Viget Labs - @whafro

Highlights:

  • Do as much dual-work as possible (creating wireframes in CSS/HTML, reusing documentation, etc)
  • Know what not to research; pay attention to what's already been done
  • Do user testing with fewer people, have them each do more tasks

Links:


Wireframes for the Wicked

Highlights:

  • Choose your wireframe type based on the audience; you may do different wireframes for the client vs the developer
  • Feel free to mix hi- and lo-fidelity methods to achieve the appropriate type of wireframe
  • Sketching-style wireframes may make clients feel more comfortable with sharing ideas and adding input
  • Michael Angeles has the coolest notebooks! Sketching the User Experience

Links:


Designers and Developers: Why Can't We All Just Get Along?

Highlights:

  • Speak in terms of problem/solution instead of specific features--the developer may have a better way to solve the problem
  • Include a developer in early meetings to avoid promises of unrealistic features and to help brainstorming
  • Designers should make the effort to learn as much as they can

Links:


Collaboration or Collision: Achieving Design Studio Bliss

Highlights:

  • Bring your clients into the brainstorming session
  • Show your clients a variety of mood board concepts; This is the stage for back-and-forth conversations and for feedback. Take this knowledge and deliver one cohesive design mock-up. Delivering several designs diminishes your expertise in finding the right solution.
  • Educate your clients on the value of your product; don't work to meet unreasonable deadlines
  • Don't let a single designer get too involved in the "ownership" of his/her design. Take it away and let someone else work on it.
  • Don't design behind closed doors, open up the conversation!

Books:

March 11, 2009 - 6 comments

Quest for the Right jQuery Lightbox

Lightbox, the technique of displaying large images in modal windows, has become a familiar UI element across the web. Since Lokesh Dhakar released it in 2006, many variations on Lightbox have popped up, each claiming their own strength: optimized code, easier implementation and/or slicker transitions. The current Lightbox 2 uses the Prototype and script.aculo.us JavaScript libraries, but I was looking for a jQuery version to fit my needs. Additionally, I was looking for something I could quickly implement out-of-the-box (so that I could better spend my time writing a blog post!). Here's how my decision was made:

thickbox
Thickbox
Thickbox, recommended to me by @kcdunstan is a very popular jQuery Lightbox and is even hosted on the jQuery website.

Pros: Can be used with images, inline content, iFrames (people still use iFrames?) and Ajax. Seems to have a good support community behind it; John Resig is known to respond to some support issues.
Why I didn't choose it: The out-of-the-box look doesn't have nice buttons and transitions.

jqmodal
jqModal
jqModal, recommended to me by @sstrudeau, is very much a bad-ass developer tool.

Pros: Very lightweight and customizable for the person who knows what he/she is doing. Can be used with images, inline content, iFrames and Ajax, and specializes in dialog alert boxes.
Why I didn't choose it: Way too complex for the specific project I'm working on. I'd want to use this on a highly-branded site where I've crafted a unique interface element instead of the familiar Lightbox we know and love. Also, I couldn't determine if there is an easy way to use this in "gallery" mode where I want Previous/Next buttons to go between a set of images.

prettyphoto2
prettyPhoto
I found prettyPhoto via a forum I found through a Google search. As the name states, it's a really nice looking Lightbox.

Pros: Really nice out-of-the-box styling options, and supports single or gallery photos. Good Web 2.0 rounded corners, and I like the buttons.
Why I didn't choose it: This was nearly my final choice, but I don't like the tab-like box above the photo for the title. The project I'm using will have a longer description for the title, and I want it below the picture. I would definitely use this for a gallery where the photos either have no title or short titles, though.

jquerylightboxplugin
jQuery lightBox plugin
The winner! jQuery lightBox plugin was the first one I researched, and then it was also recommended to me by @thetristan and @twenty3x. It's the closest match I've seen to the official Lightbox 2.

Why I chose it: Familiar Lightbox styling, nice transitions, gallery support; it's got what I want right out of the box.

In short, the requirements of your project will dictate which jQuery Lightbox you should use. jQuery lightBox plugin seems to behave the closest to Lightbox2, and jqModal is the most customizable and developer-centric. I would love to hear about any other jQuery Lightbox recommendations in the comments or respond to me on Twitter, @christyyyjoy.

EDIT: @pdenya sent along the Lightbox Clones Matrix which compares Lightboxes by library, size and features. Nice!

Published by: christygurga in The Programming Mechanism
Tags: ,

February 26, 2009 - Comments Off on Two for Web developers

Two for Web developers

I wrote a couple of posts recently that might be of interest to Web developers. The first was on canonical URLs and the second was on the Fileinfo extension for PHP.

Google, Yahoo and Microsoft now support a new value for the rel attribute of the link tag that allows one to publicly specify their preferred version of a URL. The value is "canonical" and it's simple to use: <link rel="canonical" href="http://your-site.com/preferred/url/" />. Read my post

The PHP Fileinfo extension is useful for determining the MIME types of files. The returned type is not based on a file's extension, but rather on certain byte sequences at specific positions within the file.

The first post I wrote describes how to compile and install Fileinfo on a Media Temple dedicated virtual server. The second talks about how to use Fileinfo and includes a wrapper class that might be helpful.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

February 17, 2009 - Comments Off on NY Web Standards Meetup—Advanced Google Maps API

NY Web Standards Meetup—Advanced Google Maps API

Please note—The NY Web Standards Meetup: Advanced Google Maps API has been rescheduled from 19 February 2009 to 26 February 2009.

The New York Web Standards Meetup Group will meet next Thursday (26 February 2009) at theMechanism at 7:00 pm.

After a brief intro to/review of the Google Maps API, Jeffrey Barke (theMechanism) will cover some advanced Google Maps API topics, including server- and client-side clustering, creating custom base maps and some GIS-like functions.

Attendees should have some experience with JavaScript and familiarity with the Google Maps API.

26 February 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

January 19, 2009 - Comments Off on NY Web Standards Meetup—Cloud computing: 10gen’s Mongo DB

NY Web Standards Meetup—Cloud computing: 10gen’s Mongo DB

The New York Web Standards Meetup Group will meet this Thursday (22 January 2009) at theMechanism at 7:00 pm.

Geir Magnusson (10gen) will talk about 10gen's MongoDB, an object-oriented DBMS. It is neither a relational database nor even "table oriented" like Amazon SimpleDB or Google's BigTable

22 January 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism

December 30, 2008 - Comments Off on Support OneWebDay on Change.org

Support OneWebDay on Change.org

Change.org is a citizen-driven effort to identify the best ideas to effect the change the Obama Administration has promised. Anyone can go to http://change.org/ideas and submit a policy idea, discuss with others and vote on the best ideas from around the country.

OneWebDay, the Earth Day of the internet, has submitted a proposal to make OneWebDay a national day. Please review their full proposal below, and, if you support it, vote for it at Change.org.

The idea behind OneWebDay is to focus attention on a key Internet value (universal access and digital literacy in 2009), focus attention on local Internet concerns (connectivity, censorship, individual skills) and create a global constituency that cares about protecting and defending the Internet. OneWebDay is like an Earth Day for the Internet, celebrated every September 22 since 2006! We are building an organization that works like the Web: an open platform that supports collaboration on annual projects that educate and activate a broad range of communities about issues that are important for the Internet's future.

In recognition of President-elect Obama's deep understanding of the power of the Internet and his stated pledge to bring "true broadband to every community in America," we hope that the new Administration will recognize OneWebDay and partner with us in 2009 to organize a week of national (and global) service to bring more access and skills to communities that are still left behind in the new digital world.

Tomorrow is the deadline! Please take action and vote at Change.org now!

Published by: jeffreybarke in Non-Profits, The Programming Mechanism

December 3, 2008 - 6 comments

Quick guide to Apache, Subversion and SvnX on Mac OS X

theMechanism has been using Subversion for just over a month now. The following is a quick guide to installing and working with Apache, Subversion and SvnX on Mac OS X:

Apache, Subversion and SvnX on Mac OS X

Apache is the local web server (used to view and test files in the working copy), Subversion is the version control software and SvnX is a GUI-client for Subversion.

Before we can use Apache, Subversion and SvnX, we need to check:

  1. Is Apache running?
  2. Is Subversion installed?
  3. Is SvnX installed?

Apache

To test Apache, fire up the browser of your choice and enter http://localhost/ into the address bar. If you do not see an "Unable to connect," "Can’t connect to server," or "Error! Connection closed by remote server" screen, Apache is running.

If it is not running, open System Preferences. Under "Internet & Network," choose "Sharing." Make sure "Web Sharing" is checked ("Personal Web Sharing" in Tiger).

Mac OS X Internet & Network Sharing window screen grab

Note that localhost is pointed at /Library/WebServer/Documents/.

Subversion

To see if Subversion is installed, launch Terminal (Applications | Utilities | Terminal). At the prompt, type:

svn --version

Some information on the version and build should appear. If not, Subversion is not installed.

Mac OS X Terminal screen grab showing results of running svn --version.

If Subversion is not installed, download and install the latest version from http://www.collab.net/downloads/community/

SvnX

To see if SvnX is installed, check for svnX.app in the Applications directory.

If it is not there, download and install the latest version from
http://www.lachoseinteractive.net/en/community/subversion/svnx/download/

Working with Subversion via SvnX

Standard Subversion workflow:

  1. Check out a working copy
  2. Make edits to the working copy
  3. Commit the edits to the repository

Checking out a repository

Screen grab of SvnX's Repositories window.

Launch SvnX and set the focus on the "Repositories" window.

Click the "+" button to add a repository.

  • Change the name to something descriptive.
  • Enter the path to the repository.
  • If required, enter your user name and password for the repository.

Once a repository has been added, it will appear in the top half of SvnX's Repositories window. Double-click on the repository to open it:

An open repository in SvnX.

Click the "svn checkout" button at the top of the window and navigate to a directory below /Library/WebServer/Documents. Click the open button and SvnX will download the repository to your local machine.

Close the current window and the SvnX "Repositories" window.

The Working Copy

Set the focus on the SvnX "Working Copies" window. Note that SvnX has added a working copy after check out. Change the name to match the descriptive name in the previous step.

Screen grab of the SvnX Working Copies window.

Double-click on the working copy in the top half of the "Working Copies" window. The main thing to be aware of here is the "Update" button. Click this to refresh your local working copy with any changes made to the repository by any other team member.

In Finder, navigate to the working copy, open index.html in your favorite HTML editor, make some small change and save index.html.

Switch back to the active working copy window and click the "Refresh" button at the top of the window. You’ll see that index.html is added with a "M" (modified).

Screen grab of an open working copy in SvnX.

If you're happy with the change and have previewed it to make sure everything is working, press the "Commit" button on the right side of the screen.

Add a meaningful commit message and press commit.

Version control principles

  1. Update often!
    1. Keep your working copy up-to-date by updating often.
  2. Commit early and often!
    1. Early and often means make atomic changes. Change one thing, test and then commit with comments.
  3. Never commit broken code!
  4. Jeffrey Barke is senior developer and information architect at theMechanism, a multimedia firm with offices in New York, London and Durban, South Africa.

    Published by: jeffreybarke in The Programming Mechanism
    Tags: , ,

December 2, 2008 - Comments Off on NY Web Standards Meetup—Small Web Team Collaboration with Subversion

NY Web Standards Meetup—Small Web Team Collaboration with Subversion

The New York Web Standards Meetup Group will meet this Thursday (4 December 2008) at theMechanism at 7:00 pm.

Scott Trudeau (Apartment Therapy Media) will demo using Subversion, MAMP/XAMPP, TortoiseSVN and SvnX and show some tricks for managing dev/staging/production versions.

4 December 2008 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact us if you'd like to present at the March or April 2009 meetup.

Published by: jeffreybarke in The Programming Mechanism
Tags: , ,