Blog | The Working Group » Tech

JSONimal – Elegant DOM construction with jQuery

jamie — Fri, 16 Jul 2010 16:04:34 +0000

As part of my co-op term here at TWG, I’ve had the opportunity to try out new technology, approach interesting technical problems, and develop useful bits of code outside of client work. JSONimal was created on one of my ‘lab days’ focused on innovation and experimentation.

The purpose of JSONimal is to take the pain out of constructing HTML using Javascript.

What’s it do? This example should demonstrate my goal fairly well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function() {

    $.mktag("#demo").jsonimal([

        ["h1", {text: "JSONimal!"}],

        ["table",{style: 'border: 1px solid black'},[

            ["thead",[

                ["tr",{style: 'text-transform: uppercase'},[

                    ["th", {text: "one"}],

                    ["th", {text: "two"}],

                    ["th", {text: "three"}]

                ]]

            ]],

            ["tbody", [

                ["tr",[

                    ["td", {html: "a"}],

                    ["td", {text: "b"}],

                    ["td", {text: "c"}]

                ]],

                ["tr",[

                    ["td",[

                        ["a", {href: "http://www.google.ca", text: "Google"}]

                    ]],

                    ["td", {text: "b"}],

                    ["td", {text: "c"}]

                ]],

                ["tr",[

                    ["td", {text: "a"}],

                    ["td", {text: "b"}],

                    ["td", {text: "c"}]

                ]]

            ]]

        ]]

    ]).appendTo("body");

});

Which will add this to the body:

JSONimal!

one	two	three
a	b	c
Google	b	c
a	b	c

For more information and examples, check out the github page: JSONimal @ github.

I also posted it as on the jQuery plugins page – but that just points to the github page anyway. JSONimal @ plugins.jquery.com

Rails Web Developer Quiz

Dominic — Tue, 13 Jul 2010 20:43:53 +0000

Here’s a quiz we ran last year, at Employment.nil, Toronto first Ruby job fair.

See if you can get them all, I’ll post the answers in a couple weeks, and if you have your own favorite trick questions, post them here.

Javascript

1. An external JavaScript must contain the

TWG Kicks Off 2010 with Scrum!

todd — Thu, 18 Feb 2010 15:47:17 +0000

TWG would like to formally welcome you to 2010 and talk a little bit about something we’ve decided to kick off the new year with: Scrum!

Scrum is an agile framework that allows teams to become self organizing and focus on delivering high business value.

In 2010, TWG is committed to delivering working, high business value, high quality software, faster. This is something Scrum enables us to do.

Why Change?

While TWG has previously used plenty of agile practices, the time has come to formalize the process so that we can get all the benefits of being an agile organization.

How Is Agile Different?

Many agencies and web development companies typically insist on gathering every single requirement up front, locking them down, forcing the client to sign off, swearing that these requirements will never change. We now know better. Requirements will change, we learn as we go, and we will inevitably discover new and more valuable features as the project comes together. TWG is using Scrum to build partnering relationships with our clients, so that we can see and adapt to requirements as they emerge, and deliver better and more useful websites and software.

Build Less Software…

So how do you build high value, high quality software, quickly? Build less, but build it better!

This may seem unusual, but remember, when you start a project, application or a web site, you don’t really know what you or your users want until you get your hands on it and start playing with it. This is normal. So instead of trying to plan it all up front, we’re going to be working on building the things you know right now, and get them done, Done, DONE!

Nothing gets feedback better than working software, so why wait until the end of your project to see it? Once you’ve seen it and learned from it, you can add to it, change it or even scrap it!

At TWG, we’re starting Scrum with 1 week sprints. These are time boxed working periods where at the end, our goal is to deliver working software, as opposed to things like documents, mock-ups or in-progress features. This is a tough, aggressive process that we’re working on, but we feel in the end it will enable us to deliver better, more valuable software, faster.

…Get more value (rather than a laundry list).

Many web development companies will work with you to look around at all the sites that are out there, collect a large laundry lists of possible features that you might want your system to do, and then give a quote on building that. You sign off, and the work gets started. You wait potentially months until all the features are built, the schedule might slip two or three times, and when you finally get it, you discover you really didn’t end up with the software you really hoped for or needed.

Not only that, but while the software was being built, the market changed and some features became irrelevant or new features became more critical. Too late to change now. I guess you’re stuck.

What if you had your list of features prioritized in order of importance/ROI and what if you got the most important features first each iteration – say every week? Maybe you’d find out you didn’t need to build those last few features since they weren’t all that valuable anyway, or maybe you’d find you could swap some of those less valuable ones out for new ones. Who wouldn’t want that kind of flexibility?

What Comes Next?

This transition is a work in progress and we’re going to give you regular updates and insights into our experiences with Scrum. You’ll get to see some of the nitty-gritty details like our task board, and burn up charts, as well as some of the struggles and discoveries we make as we go down this road. We hope you’ll keep your eye on our blog and provide us with any feedback or experiences you’ve had.

Remember Rcov?

Oleg — Wed, 16 Dec 2009 21:31:21 +0000

Rcov helps to identify code that is not being being hit by your tests (or maybe some functions left behind after refactoring). It’s very easy to get it running as well:

$ sudo gem install rcov

Plug this rake task into /lib/tasks/rcov.rake

require 'rcov/rcovtask'

namespace :rcov do
desc 'Measures test coverage using rcov'
Rcov::RcovTask.new(:test) do |rcov|
rcov.pattern = %w(test/unit/**/*_test.rb test/functional/**/*_test.rb test/integration/**/*_test.rb)
rcov.output_dir = 'rcov'
rcov.verbose = true
rcov.rcov_opts << '--exclude "gems/*"'
rcov.rcov_opts << '--rails'
end
end

And finally run it:

$ rake rcov:test

It’s so easy you have no excuse not to have it.

Harnessing Ruby Enumerable

Scott Tadman — Tue, 08 Dec 2009 21:53:16 +0000

You’re probably afraid to ask about some of the methods in the Ruby Enumerable mixin. Not only are there a whole bunch of them, 41 in Ruby 1.9 to be exact, but selecting the right one for the problem can be an exercise in frustration. Part of the problem is there’s no easy way to identify what method might suit your requirements. While the names are usually self-explanatory, it can be tricky to remember block arguments or if they return an Array or a particular element.

Any toolbox needs to be organized, so it’s probably best to sort the various Enumerable methods into groups based on the kind of result you want to get. Grouped together like this, the methodology within Ruby becomes more apparent.

Conventions

In this description, “true / false” refers to values that are equivalent to true, or equivalent to false. In practical terms this means that nil and false are both considered false, and everything else is non-false, (or in general terms, true). Note: things that evaluate as true include what might be considered false in other languages such as 0, empty strings, and empty Array or Hash structures.

When describing the blocks, e refers to an element in the set. For an Array, this is simply the element at a particular index. For a Hash this is a key/value pair, so the block semantics should be expanded to { |(k,v)| } or e.first and e.last will need to be used within the block.

Assessment

One of the simplest features of Enumerable is the methods that provide a quick true/false assessment based on the content involved. Often these will be used to decide how to handle an Array or Hash, or if its in a condition that can be utilized.

Method	Block Definition	Return
all?	{ \|e\| … } => true / false * Optional	true / false
Runs each element through the given block with and returns true if all of the block results evaluate true, otherwise false. Without a block returns true if all the elements evaluate as true, otherwise false.
any?	{ \|e\| … } => true / false * Optional	true / false
Runs each element through the given block with and returns true if any of the block results evaluate true, otherwise false. Without a block returns true if any the elements evaluate as true, otherwise false.
none?	{ \|e\| … } => true / false * Optional	true / false
Runs each element through the given block with and returns true if none of the block results evaluate true, otherwise false. Without a block returns true if none the elements evaluate as true, otherwise false.
one?	{ \|e\| … } => true / false * Optional	true / false
Runs each element through the given block with and returns true if one of the block results evaluate true, otherwise false. Without a block returns true if one the elements evaluate as true, otherwise false.

Single Element

Often you’ll want to extract a single element from a set. In this case there are many ways to get what you want, each with their particular quirks.

Method	Arguments	Block Definition	Return
detect	ifnone = nil	{ \|e\| … } => true / false	element / nil
Runs each element through the given block with and returns the first element for which the block result is true. If all return false, the result is nil.
find	ifnone = nil	{ \|e\| … } => true / false	element / nil
The same as detect, this runs each element through the given block with and returns the first element for which the block result is true. If all return false, the result is nil.
first			element / nil
Returns the first element in the set, of if the set is empty then nil.
max		{ \|a,b\| … } => -1 / 0 / 1 * Optional	element / nil
Returns the largest element in the set, of if the set is empty then nil. The result of the optional block should be compatible with Comparable and return -1, 0, or 1.
max_by		{ \|e\| … }	element / nil
Returns the largest element in the set where comparisons are performed on the result of the block, of if the set is empty then nil. Anything returned by the block must be compatible with Comparable.
min		{ \|a,b\| … } => -1 / 0 / 1 * Optional	element / nil
Returns the smallest element in the set, of if the set is empty then nil. The result of the optional block should be compatible with Comparable and return -1, 0, or 1.
min_by		{ \|e\| … }	element / nil
Returns the smallest element in the set where comparisons are performed on the result of the block, of if the set is empty then nil. Anything returned by the block must be compatible with Comparable.

Filtering

Method	Arguments	Block Definition	Return
grep	regexp	{ \|e\| … } * Optional	Array
Matches each element against the supplied regexp and returns all that match in an Array. If a block is supplied, all matching elements are transformed by the block before being inserted into the result Array, which avoids having to chain the result through a map call.
reject		{ \|e\| … } => true / false	Array
Runs all elements through the supplied block and excludes those from the result array where the block evaluates as true.
select		{ \|e\| … } => true / false	Array
The inverse of , this runs all elements through the supplied block and includes those from the result array where the block evaluates as true.
select		{ \|e\| … } => true / false	Array
The inverse of , this runs all elements through the supplied block and includes those from the result array where the block evaluates as true.

Transformation

There are a few powerful methods for transforming the content of one set into an Array.

Method	Arguments	Block Definition	Return
collect		{ \|e\| … }	Array
Runs each element through the provided block and puts each block result in the Array that is returned.
map		{ \|e\| … }	Array
The same as collect, runs each element through the provided block and puts each block result in the Array that is returned.
inject	memo = first	{ \|memo, e\| … }	last block result / nil
This is perhaps the most understood and under-utilized method in the Enumerable toolkit. In general terms, this method takes a seed “memo” value, and runs that through the block in conjunction with each element. The result of the first block call is supplied to the second, and so on, which leaves the door wide open as to what this method can do. For instance, every other Enumerable method can be expressed as a form of inject.

Active state for link_to == active_link_to. A solution for building navigation systems in Rails.

Oleg — Fri, 27 Nov 2009 18:07:45 +0000

I have a question for you. How do you deal with the logic of setting links as active in your navs?

Actually, I don’t want to know. It’s probably awful. I might have a pretty good solution for you. Let’s take a look at a very simple nav. These examples all use HAML:

%ul
%li= link_to 'Home', home_path
%li= link_to 'Puppies', puppies_path
%li= link_to 'Kittens', kittens_path
%li= link_to 'Froggies', froggies_path

Right, that’s great. But how do I insert logic as to what link gets marked as active? To begin, let’s quickly install this random gem:

sudo gem install active_link_to

And then change our nav a bit:

%ul
%li= active_link_to 'Home', home_path
%li= active_link_to 'Puppies', puppies_path
%li= active_link_to 'Kittens', kittens_path
%li= active_link_to 'Froggies', froggies_path

And that’s pretty much it.

So, for example, if you navigate to /kittens/1-my-fluffy-kitten navigation link for ‘Kittens’ will have ‘active’ class attached to it. It’s almost like magic.

You probably noticed that ‘Home’ is highlighted as well. It happened because whatever URL you are currently on is a child of the home_path. I guess we want to mark it as active only if we find ourselves on the home page and not anywhere else. We can fix this:

%ul
%li= active_link_to 'Home', home_path, :active => {:when => :self_only}
%li= active_link_to 'Puppies', puppies_path
%li= active_link_to 'Kittens', kittens_path
%li= active_link_to 'Froggies', froggies_path

Hey, wanna render a sub nav when you find yourself browsing /puppies or any page under that URL? It’s just sooo easy:

%ul
%li= active_link_to 'Home', home_path, :active => {:when => :self_only}
%li
= active_link_to 'Puppies', puppies_path
- if is_active_link?(puppies_path)
%ul
%li= active_link_to 'Big', big_puppies_path
%li= active_link_to 'Small', small_puppies_path
%li= active_link_to 'Kittens', kittens_path
%li= active_link_to 'Froggies', froggies_path

And that’s the skinny of what active_link_to is for.

For more documentation on more functionality checkout project on GitHub: http://github.com/theworkinggroup/active_link_to

Making a world of difference with 0.05em

Vivian — Tue, 03 Nov 2009 18:28:09 +0000

Typographic sensibility can make or break a design, both in print pieces and online. In web design, attention to typography is especially important since the majority of online content is written information. It is often said that the strength of a web designer can be judged through their ability to create an engaging UI with just text.

There are many tools and tricks available to web designers when it comes to styling type: size, colour, alignment, line-height (leading), word-spacing (don’t do it), but an important one I find most often ignored by developers is letter-spacing (tracking). Letter-spacing is literally the space between the letters… and it can make a big difference in terms of legibility and the overall feel of a site.

“Don’t blame me; you forgot the letter-spacing…”

As a designer, it feels like I am often getting flack from developers for type that is “too small”. Ninety-nine percent of the time after I hand off an Illustrator file or PSD of a design, the coded page comes back to me without any letter-spacing included in the CSS. Letter-spacing is like air: you don’t really notice it, but it makes a difference whether it is there or not.

It’s easy, just do it.

I’m really bad at math, but the other day it dawned on me how to figure out the CSS letter-spacing measurement from my AI (or PSD) file. Tracking in Adobe programs is measured in 1/1000em so when the design file specifies “50″ or “100″ in the tracking character palette, it is 100/1000 = 0.1em. That 0.1em can take a 10px all caps style from “too small” to “completely awesome”. See below:

EXAMPLE WITHOUT ANY LETTER-SPACING, OMG SO TIGHT, NOT IN A GOOD/SEXY WAY.

ADDED 0.1EM OF LETTER-SPACING. LOOK HOW AMAZING IT IS NOW.

2PX OF LETTER-SPACING? CRAZYTOWN! GET THE EFF OUT OF HERE!

Of course there are issues…

Like in many cases, basically Firefox is the only browser that does letter-spacing right. Depending on your product/audience, this may not be an issue, but it is definitely something to keep in mind when specifying sub-pixel measurements that may be rounded up or down in browsers other than Firefox.

Negative letter-spacing: it’s just a fad, right?

This is so tight, yo! I can’t even read it!

Over the last couple years a big web typography trend has been the bold sans type with negative letter-spacing, “all the cool kids are doing it.” While I can see the appeal (in that it speaks to the whole web 2.0 design aesthetic), I expect that this trend will soon remedy itself. Letter-spacing is meant to be applied with a gentle touch, and when heavy-handed negative (or positive) tracking occurs, it can definitely affect the legibility, as some of those examples clearly show.

The bottom line

Always use letter-spacing to your advantage and not to your own detriment, just because it’s “in”. Yell at developers when they omit it from the CSS and then decide to blame you, the designer. And if that doesn’t work, do what I had to do: get the keys to the site or app, then tweak to your heart’s content.

geeks + beer + friday = ?

Georges — Fri, 16 Oct 2009 21:50:28 +0000

Every so often a text editor war will flare up in the office. We all have our favourites, but no one likes vi the way Scott likes vi.

Here’s the first in Dr. Tadman‘s twelve part lecture series on how vi will make your life better:

Click For Full-Size Image

Rails mass mailing – it shouldn’t be this complicated

Jack — Thu, 24 Sep 2009 21:16:32 +0000

The requests we get from our clients for “social networking” type tools and features has grown exponentially over the past two years. To make a user experience relevant, easy, secure, means that an application will need to send email notifications to that user (to register, to tell them of friend’s messages, to send them newsletters or updates, to send tickets, calendar bookings .. the list goes on).

Why is this a problem? Because sending an email is not an instantaneous action. The more emails you try to send, the longer you may have to wait as the application sends them. Imagine an app that lets you invite 300 friends to an event. Multiply this with 300 people sending the same invite to their friends.

While Rails was kind enough to provide a simple way to send emails, it left out one important detail. You can only send one at a time!

If you find yourself in the unfortunate position where you need to mass mail then you’re on your own. So what do you do? You Google around of course. Someone is bound to have figured this one out.

It looks like there are 3 ways to solve this:

1. Use existing email marketing services

You can go with this option. There are plenty out there: Mail Chimp, Constant Contact, Thin Data, Campaign Monitor, Campaigner and others. All you need to do is generate some kind of mailing list and import it into one of these systems and then keep it up to date. But that’s not always practical. Not if you want your users to be able to initiate the mass mailing by themselves. Don’t get me wrong, these services are great at what they do, but what we really want to do is to send mass emails from our own app.

2. Use existing code

If you really want your Rails app to be able to send mass mails at a click of a button you can try using Eric Hodel’s ar_mailer which is on version 1.4.0 as of June 2009. This has the advantage of letting you use the email addresses that you already have on your system (no exporting and importing to a different system) but before you get to that you still have to integrate it with whatever version of Rails you happen to be using. Assuming you get it working properly, now you have a brand new background process to take care of.

Ar_mailer is great but leaves you half way there.

* The queue is not smart enough to prioritize emails. If one user sends 5000 invitations and after that another user wants to recover his password, he’ll have to wait until all 5000 emails are sent before he gets his password back. The users receiving the invitation won’t notice if it takes a bit longer to reach them, but the guy that is trying to recover his password will be upset if he doesn’t get it right away. This is obviously not good enough.
* How do you monitor if an email has been sent or failed?
* If you have an email template and your client wants to change it all the time, what do you do?

3. Build it all from scratch

Even if you decide to do it yourself from scratch you’ll still need a queue to store the emails that will be sent at some time in the near future by another process running in the background. From there on, it depends on what you really need. Be prepared to put aside some extra time because it ain’t simple.

So what would be the perfect solution? Simply put: I don’t want to have to worry about it. I want to be able to say: “Here’s my email, here’s the list of people I want it sent to. Go and do it … please”.

Wouldn’t that be great? Sure it would! We’ve encountered this problem enough times to make us want to solve it for good.

And so we’ve set out to build it and this is what we think a mass mailing solution:

I want to be able to use it independently of the language I’m coding in – it needs to have an API
I want to be able to use the same code I have right now (layouts, email templates, etc.) – it needs to integrate easily
I want to know if a specific email was sent, failed or if it hasn’t been sent yet and I want to know why – it needs reporting
If a client complains that the emails aren’t rendering correctly I want to be able to see what they are receiving – it needs to let me look at the emails sent
I want to be able to easily resend any email – it needs to let me act on it
I want to create and manage email templates so that my client can edit them without asking me every time and without forcing me to change the code and to deploy my app all over again – it needs an optional template management system.
I want the queue system to be smart enough to distinguish between a single email and a batch of 5000 emails and prioritize them accordingly – it needs a smart queue system.
And most importantly, how can all of this be done with minimal effort to set it up each time I create a new app. – it needs a plugin.

Postage App!

We are currently developing this system which will help us build better apps. We’re building it according to our needs and we think that these might also be the needs of other developers out there. Check it out and sign up for an update on the developer free release!

4 Fears of @font-face

Vivian — Tue, 08 Sep 2009 14:27:29 +0000

The future of web typography seems to be almost here with Firefox 3.5 supporting @font-face, making web-safe fonts a thing of the past. Through CSS3′s linking/embedding of any font file, @font-face opens the floodgates to the millions of font options available to designers. The design possibilities are extremely exciting, but in the coming @font-face infancy, we can likely expect a dark period of uglification.

Bad typography is too easy
Illegible and annoying sites
@font-face + CSS3 effects = disaster
Pirates and the shipwrecked

Bad typography is too easy

A lot of bad or amateur-looking print design is victim of poor type decisions paired with improper typographic finesse. With all the choice out there, why pick Papyrus or Hobo for a menu or brochure? It happens far too often in print and now it can happen easily online with @font-face. For every beautifully crafted typeface, there are probably 10 mediocre ones, and 25 really fugly ones; the odds are stacked against us, but hopefully designers will exercise restraint and common sense.

Illegible and annoying sites

@font-face has the potential to marry beautiful typography with usable, accessible, and indexable content, but there are also foreseeable legibility disasters in this free-for-all. One of the best things about web-safe fonts, such as Verdana and Georgia, is that they are fairly cross-platform reliable, and have proven legibility. With its large x-height, giant counters, and distinctly varied characters, Verdana was designed to be read easily on-screen at small sizes. However when used in print, it sometimes falls comically flat – look at how IKEA just screwed their print branding by using this traditionally web typeface.

Techniques like Cufón and sIFR are technologically hefty, often limiting use just to headline text. Since @font-face is lightweight enough to use throughout an entire site, paragraph text styled poorly in an awkward font can easily impede legibility and annoy users. It’s not worth sacrificing access to the content just to make something look nicer.

CSS3 effects + @font-face = the internet circa 1995

Pair a little cheesy text-shadowing with a “funky” typeface and the internet has been set back 15 years. There is probably never an online situation that calls for drop-shadowed, glowing, or flaming type; we’re talking web design, not cereal boxes. Like crappy flash intros, just because it exists, doesn’t mean it should be used. Let’s hope that clients don’t get a whiff of this one and start requesting it for home page headlines.

Pirates and the shipwrecked

Though it can be argued that pirates will always find a way to get what they want for free, why make it any easier to steal fonts? If used incorrectly, @font-face can offer up copyrighted font files for free. Solutions like Typekit are taking steps in the right direction, but there are bound to be inexperienced slip-ups at first. Browser compatibility issues with @font-face may also end up leaving users on older browsers behind, viewing (in theory) less typographically rich content. It will be fun watching the online typographic revolution unfold once copyright issues are resolved, and cross-browser support is ready. Hopefully @font-face will make the internet a more beautiful place, and not like a bunch of designers got drunk on the punch and barfed typefaces everywhere.