Alfa Jango Blog Engineering, Software, and Entrepreneurship

Communication is about winning. Whenever you engage someone in communication, it is a competition. Who has the better story? Who can talk/write more? Who has the better code? And if you don’t win, you lose.

False.

Fact: if you win a conversation, then you also lose. This is especially true when your conversation must accomplish some achievable goal.

Actionable discussion

Let’s first define “actionable conversation” as that in which we are trying to achieve some explicit goal, whether to persuade someone of something or to find a solution to some problem.

Now, let’s divide actionable conversation topics as one of two types:

Opinion vs opinion

The majority of the time, there is no right or wrong, only opinion and differing opinion. To consider yourself right here is to disregard the differing opinion as decidedly wrong. Be careful, doing this makes it difficult to ever grow and learn.

Fact (true vs false)

Then there are topics for which there is a right and wrong. Let’s say you and I are arguing the solution to 1 + 1 = 2. You say it’s 2, but I say it’s 3. In a technical sense, you are right and I am wrong.

(more…)

The jQuery EasyTabs plugin has recently hit v2.3 (well, v2.3.3 by the time I got this published). New for EasyTabs this release:

• Load tabs via AJAX
• Nest tab-set inside another tab-set
• Use non-standard markup for panels (for example, fieldsets inside a form)

See demos for each new feature below

AJAX tab content

It’s been a long-time coming, and it’s finally here. EasyTabs now supports loading content into panels via ajax.

EasyTabs has always placed emphasis on semantic, meaningful markup. Traditionally, markup for a tab/panel pair would look something like this:

Notice that in the above example, if JavaScript is disabled, we’re left with a normal anchor and anchor link in the page, which browsers understand by default.

(more…)

Just 6 weeks after the announcement of v0.4, I’m pleased to announce the release of Remotipart v1.0. With this release, AJAX file uploads in Rails 3.0 and 3.1 (building off the standard jquery-ujs driver) are as easy as humanly conceivable. This was possible thanks to a large push from Adam Kerr.

The two major changes for v1.0 are:

• New jQuery 1.6 iframe-transport instead of dependency on form.js
• New rack middleware does away with configuration

With the release of v1.0, the new officially maintained repo for Remotipart has moved from here to the JangoSteve fork on Github.

There is also now a more robust test suite. Read more about that in the Remotipart docs.

New jQuery iframe-transport

Previously, the process of submitting files via an ad-hoc iframe element and inserting the response back into the page (described here) was done by the form.js. For those who aren’t familiar, form.js is an awesome plugin that does a lot of really useful things. However, we weren’t really doing it justice by requiring it as a dependency for only one small part of its capabilities.

(more…)

In my last article, we discussed the difficulties of file-uploads via AJAX, and how the iFrame method works around the issues to provide an AJAX-like interface for uploading files to the server.

So how does this relate to Rails?

Rails 3 uses Unobtrusive JavaScript for remote links and forms (and comes packaged with the jquery-ujs driver via the jquery-rails gem as of Rails 3.1!). However, because jquery-ujs relies on jQuery’s standard .ajax() function, it is incapable of doing AJAX file uploads.

The Remotipart gem

Remotipart to the rescue! The Remotipart gem does two things:

(more…)

The jQuery EasyTabs plugin is now at version 2.1.0 2.1.2 (I managed to bump the version number twice before publishing this post). This release adds three four new features:

• uiTabs option
• collapsible option
• Cancel tab-change in ‘easytabs:before’ hook
• Useful parameters in callback hooks

• 
  View demo with new features
• 
  View plugin homepage
• 
  View changelog

uiTabs option

Perhaps my favorite addition to the EasyTabs options, when uiTabs: true, EasyTabs will automatically add and use the same class names used by the jQuery UI tabs. This feature opens the doorway to making EasyTabs a drop-in replacement for jQuery UI tabs once you’ve outgrown UI’s out-of-the-box theming and structure.

If you are currently using UI tabs with this:

Simply replace the above line with this:

And your tabs will still look and function the same as before. Now you can start customizing the CSS and HTML markup with the flexibility of EasyTabs.

(more…)

CSS3 is great and there is no shortage of amazing showcases highlighting what you can do with a little CSS3 and a lot of time. One popular theme for showing off the capabilities of CSS3 has been creating pure-CSS icons that you’d swear are images (like these or these).

Why other pure-CSS icons are not practical

Complex pure-CSS icons are not practical for use in production websites. They are difficult to maintain and are often only possible with an un-semantic mess of markup. Not to mention, we already have the perfect tool for graphic representations: images. (For more on this, see Faruk Ateş’s post on the subject.)

Why pure-CSS emoticons ARE practical

Think about it, the great thing about emoticons is that they are textual representations that are inherently and immediately recognizable as faces expressing the emotions they represent.

Traditionally, if you wanted to display emoticons graphically on a web page, you used a script (typically javascript) to find and replace text-emoticons with small smiley-faced images that correspond to each emoticon. But if textual emoticons already resemble these faces, isn’t it overkill to completely replace them with images that resemble these faces just slightly more?

Further, inserting images now breaks the ability for visitors to copy and paste the text elsewhere. Well, technically they can still copy and paste, but it completely skips the emoticon images, instead of allowing them to simply copy the original text as written. I.e. The following text:

gets copied and pasted as this:

Notice, the smiley is omitted, potentially altering the context of the original text.

UPDATE: Many browsers will copy the alt attribute text of the image if it is set properly. However, webkit-based browsers, such as Safari and Chrome, do not do this. Thanks for the tip, Faruk Ateş (via email).

Enter our new jQuery plugin / stylesheet. It keeps the text emoticons completely intact, and just gives them a little anthropomorphic nudge with CSS. Now, using pure-CSS emoticons, this:

gets copied and pasted as this:

Benefits of pure-CSS emoticons

There are several reasons to use pure-CSS emoticons over the traditional image-replacement method:

• Keeps text markup semantic (plugin only wraps textual emoticons in a single <span> element).
• Retains original text, as typed, for copy/paste and page indexing.
• Automatically sizes to fit the text. No need for multiple emoticon image sets of varying sizes.
• Does not break the line-height of paragraphs like most of the image-replacement methods.

Check it out

I recently wrote a lightweight jQuery plugin called EasyTabs, and it is now released on the official jQuery plugin website. Most front-end developers are familiar with the jQuery-UI tab plugin. However, it is a very magical plugin with a complex structure, which completely styles your tabs for you, and limits your options when deciding how to structure the tabbed content.

For instance, it is very difficult to place your tabs below the tabbed content with jQuery-UI tabs.. You must perform some crazy CSS trickery, because jQuery-UI tabs forces you to place your <ul> before your content <div>s. Not to mention all of the jQuery-UI styling it does to your tabs by default, making it difficult to override and apply custom stylization to your tabs.

This new plugin, jQuery EasyTabs, is very flexible for the required markup and structure of your tabs and content. Also, it handles only the functionality of creating in-page tabs, leaving all of the styling up to you and your own CSS.

To check it out, see our documentation and demos. Then when you’re ready, you can download it from the jQuery plugins website.