Thursday, February 4, 2010

Over time Tweets have acquired a language all their own. Some of these have been around a long time (like @username at the beginning of a Tweet) and some of these are relatively recent (such as lists) but all of them make the language of Tweets unique. Extracting these Tweet-specific components from a Tweet is relatively simple for the majority of Tweets, but like most text parsing issues the devil is in the details.

We've extracted the code we use to handle Tweet-specific elements and released it as an open source library. This first version is available in Ruby and Java but in the Twitter spirit of openness we've also released a conformance test suite so any other implementations can verify they meet the same standards.

Tweet-specific Language

It all started with the @reply … and then it got complicated. Twitter users started the use of @username at the beginning of a Tweet to indicate a reply, but you're not here to read about history. In order to talk about the new Twitter Text libraries one needs to understand the Tweet-specific elements we're interested in. Much of this will be a review of what you already know but a shared vocabulary will help later on. While the Tweet-specific language is always expanding the current elements consist of:

@reply – This is a Tweet which begins with @username. This is distinct from the presence of @username elsewhere in the Tweet (more on that in a moment). An @reply Tweet is considered directly addressed to the @username and only some of your followers will see the Tweets (notably, those who follow both you and the @username).

@mention – This is a Tweet which contains one or more @usernames anywhere in the Tweet. Technically an @reply is a type of @mention, which is important from a parsing perspective. An @mention Tweets will be delivered to all of your followers regardless of is the follow the @mentioned user or not.

@username/list-name – Twitter lists are referenced using the syntax @username/list-name where the list-name portion has to meet some specific rules.

#hashtag – As long has there has been a way to search Tweets* people have been adding information to make the easy to find. The #hashtag syntax has become the standard for attaching a succinct tag to Tweets.

URLs – While URLs are not Tweet-specific they are an important part of Tweets and require some special handling. There is a vast array of services based on the URLs in Tweets. In addition to services that extract the URLs most people expect URLs to be automatically converted to links when viewing a Tweet.

Twitter Text Libraries

For this first version of the Twitter Text libraries we've released both Ruby and Java versions. We certainly expect more languages in the future and we're looking forward to the patches and feedback we'll get on these first versions.

For each library we've provided functions for extracting the various Tweet-specific elements. Displaying Tweets in HTML is a very common use case so we've also included HTML auto-linking functions. The individual language interfaces differ so they can feel as natural as possible for each individual language.

Ruby Library

The Ruby library is available as a gem via gemcutter or the source code can be found on github. You can also peruse the rdoc hosted on github. The Ruby library is provided as a set of Ruby modules so they can be included in your own classes and modules. The rdoc is a more complete reference but for a quick taste check out this short example:

class MyClass include Twitter::Extractor usernames = extract_mentioned_screen_names("Mentioning @twitter and @jack") # usernames = ["twitter", "jack"]end

The interface makes this all seems quite simple but there are some very complicated edge cases. I'll talk more about that in the next section, Conformance Testing.

Java Library

The source code for the Java library can be found on github. The library provides an ant file for buildinf the twitter-text.jar file. You can also peruse the javadocs hosted on github. The Java library provides Extractor and Autolink classes that provide object-oriented methods for extraction and auto-linking. The javadoc is a more complete reference but for a quick taste check out this short example:

import java.util.List;import com.twitter.Extractor;

public class Check {
public static void main(String[] args) {
List names;
Extractor extractor = new Extractor();

names = extractor.extractMentionedScreennames("Mentioning @twitter and @jack");
for (String name : names) {
System.out.println("Mentioned @" + name);
}
}
}

The library makes this all seems quite simple but there are some very complicated edge cases.

Conformance Testing

While working on the Ruby and Java version of the Twitter Text libraries it became pretty clear that porting tests to each language individually wasn't going to be sustainable. To help keep things in sync we created that Twitter Text Conformance project. This project provides some simple yaml files that define the expected before and after states for testing. The per-language implementation of these tests can vary along with the per-language interface, making it intuitive for programmers in any language.

The basic extraction and auto-link test cases are easy to understand but the edge cases about. Many of the largest complications come from handling Tweets written in Japanese and other languages that don't use spaces. We also try to be lenient with the allowed URL characters, which creates some more headaches.

Posted by @mzsanford at 3:31 PM

About

A simple jQuery plugin that uses OEmbed API to help displaying embedded content (such as photos or videos) in your website.

Quick explicit example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>        <title>jquery-oembed explicit insert example</title>        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>          <script type="text/javascript" src="jquery.oembed.js"></script></head><body><script type="text/javascript">        $(document).ready(function() {                $("#container").oembed("http://www.flickr.com/photos/14516334@N00/345009210/");        });</script><div id="container"></div></body></html>

In this example the div#container will display the photo from flickr.

Quick implicit example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>        <title>jquery-oembed link replace example</title>        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>           <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>          <script type="text/javascript" src="jquery.oembed.js"></script></head><body><script type="text/javascript">        $(document).ready(function() {                $("a.oembed").oembed();        });</script><div>Flickr Image</div><div>Vimeo Video</div></body></html>

In this example the jquery plugin will embed the flickr photo and the vimeo video inside the links.

Supported OEmbed providers

• 5min
• Amazon Product Images
• Flickr
• Google Video
• Hulu
• Imdb
• Metacafe
• Qik
• Revision3
• Slideshare
• Twitpic
• Viddler
• Vimeo
• Wikipedia
• WordPress
• YouTube

This javascript plugin relays in 'jsonp', so only oEmbed providers that support callback methods are directly implemented.

Any other oEmbed provider uses oohembed.com service. Thank you oohembed.com!

This is my first public jQuery plugin. Any comments or improvements are really welcome.

Richard Chamorro

Avanzis

http://www.avanzis.com

Beautiful CSS: Organizing Your Stylesheets

January 7th, 2009 in Design Tips & Tutorials

by: Matthew Griffin

When I first took the plunge into CSS several years ago, one of my biggest frustrations was stylesheet organization. I scoured source code from popular sites trying to figure how they accomplished various layout effects. But tracking back and forth from stylesheets to HTML proved to be a difficult task. Unfortunately , that separation of style and content that makes CSS so awesome can also make it difficult to understand. Adding to that difficulty is the fact that each designer may have a different way of organizing stylesheets. If you inherit someone else's site, this can cause some problems. In a perfect world everyone's CSS would be well-organized, easy to scale, and easy to understand. We may not be able to attain such CSS Nirvana but we can at least make it easier on ourselves and those we work with by following this set of guidelines.

Basic Organization

A stylesheet should be separated into four main sections: (1) Universal Styles (body, p, a, etc.),  (2) library styles, (3) template layout styles, and (4) individual page styles. In order to make it easier to locate the four sections discussed here make sure that you put a descriptive comment above each one along plenty of space above and below. Even with well organized CSS, it can be easy to get lost. The bulk of your CSS should go in the template layout section and should be formatted to match the hierarchy and indentation of the corresponding HTML markup. We'll get to that in a moment, but for now let's start with universal styles.

Universal Styles

Starting with universal styles is pretty typical. You want to set the stage by specifying the background, font size, link color, etc. for the website. The universal style section usually only takes up a small portion of the overall CSS code. You should only include HTML tag selectors in this section of your CSS file. This part of the stylesheet is meant to describe what the norm will be for commonly used HTML tags. Body, a, p, and blockquote are examples of the selectors that should be cited here.

Library Styles

The next section in your stylesheet should be library styles. Library styles use classes to style elements that are used over and over again in your website. For example, I usually have a library style called .photo_right. I use this library selector to float images to the right in my website. Here's what it looks like:

<!--HTML-->
<img src="myimage.jpg" class="photo_right" />

/*CSS*/
.photo_right{ float: right; margin-left: 10px; }

You should only use library selectors on element that appear in various places on the site but need a consistent look regardless of their location. You wouldn't use a library selector, for example, on your main navigation bar.

Template Layouts

As I mentioned above, the template layout section is where the bulk of your CSS will go. I find it easiest to format and space this section of my CSS to match the order and indentation of my HTML. For example, if you have a page with HTML that looks like this:

<div id="container">
    <div id="header">
        <div id="navigation"></div>
    </div>
</div>

Then your CSS in the template layout section of your stylesheet should look like this:

#container { }
    #container #header { }
        #container #header #navigation { }

Formatting CSS in this way makes it easy to find which selector goes with which HTML tag.

It's important to distinguish in your HTML between unique template elements and other elements that change from page to page. Template elements are tags that wrap the content of the site and appear on every page (with few exception). For these template elements, it's best to use unique IDs for styling rather than classes. For example, if I have a two column page layout with a header on top, my HTML and CSS would look something like this:

<!-- HTML -->
<div id="container">
    <h1 id="header">Here Is My Header</h1>
    <div id="column_one">Here is column one.</div>
    <div id="column_two">Here is column two.</div>
</div>

/*CSS*/
#container {
    width: 780px;
}
    #header{
        width: 100%;
    }
    #column_one{
        width: 600px;
        float: left;
    }
    #column_two{
        width: 180px;
        float: right;
    }

Using IDs for template elements makes it easy to identify the important selectors in your CSS and HTML. Major layout changes become easier because you know exactly what to look for.

Classes should be used for elements that aren't unique. For example, if you have an unordered list (<ul>) element that is a list of links, you would put that into a class. Unless the list of links is your main unique navigation bar, chances are you will have lists of links all over your site on various pages and in various sections of the layout. Let's look at an example of one such link list wrapped in a template layout column.

<!--HTML-->
<div id="column_one">
    <p>This is the first column</p>
    <ul class="link_list">
        <li>link one</li>
        <li>link two</li>
    </ul>
</div>

/*CSS*/
#column_one{
    width: 180px;
}
    #column_one ul.link_list li { background-color: #ccc; }

In this example, only link_lists within the #column_one <div> will have the background color #ccc. These types of classes should appear in the main layout section of your stylesheet. Any class that is dependent on certain ID selector should be grouped below that ID selector and indented exactly the way your HTML is indented.

Individual Page Styles

The last section in your stylesheet should be a section for classes that only pertain to certain pages or certain types of pages. Grouping these selectors together will make it easy to navigate the quirks of the individual pages on your site. Many times you will run into situations where there is a particular style you need to use on a particular page but the style has no relevance to the rest of the pages on the site. That's when you move the selector into the individual page section of your stylesheet.

For a complete example with all the sections described above you can take a look at this site I recently did a CSS overhaul for. No, I didn't design the graphics so don't give me a hard time about that. The HTML and CSS are what you should look at.

Tags: css, layout, styles, organize, order, html,

• Share This
• 49 Comments
• 28038 Views

Comments

Posted By: John V. on 01/07/09

This is a very nice methodology to keep stylesheets organised. Navigating code like this is indeed much easier - it's very clear what belongs to what. Though - looking through stylesheets to try and find a particular style is something I rarely do any more. If I ever need to find the style for something, it's a quick trip to Firebug to see which line of the stylesheet I'm going to have to look at.

Posted By: Matthew Griffin on 01/07/09

Good point, John. Firebug makes life that much easier.

Posted By: Brooke on 01/07/09

Thanks for this. I'm in the process of building a new site and learning CSS as I go. It gets messy at times, and I'll definitely be referring back to this post.

Posted By: Matthew Grffin on 01/08/09

Great, Brooke. I hope it helps you avoid some of the frustration I dealt with.

Posted By: Khayyam Wakil on 01/08/09

Just when I needed a good reference for clean CSS organization... you come to the rescue. Definitely keeping this one for referencing! Best.

Posted By: Alif Rachmawadi on 01/08/09

Organizing stylesheets is simple task, but many people think that organizing is less important than design itself. This post is a good reference for many people to help organizing their stylesheets. Good design is not all about design itself, it is also about how to managing markup, entities, and markup. Good managements will prevents frustations in the future. Thanks for your post.

Posted By: joyoge designers' bookmark on 01/08/09

nice point thanks..

Posted By: tiso on 01/08/09

I use this method for years, it is very simple to learn and use. And it respects the "from generic to specific" principle of cascade

Posted By: Amber Weinberg on 01/08/09

I agree CSS organization is so important when I'm coding but I noticed it's not something done by many coders. I can't tell you how much time I've wasted because I had to search endlessy through unorganized and filthy CSS and HTML code.

Posted By: Gopal on 01/09/09

Nice tips. http://www.productivedreams.com http://www.twitter.com/gopalraju

Posted By: Juan Gotti on 01/10/09

It's always a great idea to have your own system of organization when it comes to CSS. IMO I find this way a not that practical, not for separating things into sections, but the indenting of the selectors. Even without firebug, you only need to know the "find" shortcut to look for any specific selector.

Posted By: Matthew Griffin on 01/10/09

Thanks for the comments, everyone. Juan, I understand what you're saying but practically speaking it's much easier to be able to see the CSS and the HTML in a parallel structure. The "find" method works fine for hunting down one selector but when you have to go back and do extensive work in your CSS file, you'll wish you'd organized it correctly.

Posted By: Ofer on 01/13/09

Hi, Thanks for that nice post. We have to remember css goes better with <div>, lets quit the table overusing

Posted By: CraZy675 on 02/06/09

Thanks for the awesome article, I referred all my junior developers to this post. I'd like to add to this strategy if I may. I always include a reset css file before the above. Also sometimes my styles require php so I create a process.php file (which changes the header to css). I used to embed php in every style sheet but found others working on the site would complain their dreamweaver or (insert other crappy editors here) wouldn't display the css formating correctly. Actually before I read this article I would keep my universal and library in the same file, and I called it base (loosely based on yahoo's css base). With your above strategy it is easier to create base css sheets you can use over again for rapid development. Thanks again.

Posted By: CraZy675 on 02/06/09

Also you might want to mention that the order of the style sheets is important as page styles should overwrite template styles, template overwrite global etc. You and I are familiar with cascading but some juniors are not.

Posted By: Matthew Grffin on 02/06/09

Thanks for the comments, CraZy675. You make some great points.

Posted By: CraZy675 on 02/10/09

Also using multiple css files reduces download time so you should be using some sort of compressor like minify: http://code.google.com/p/minify/ (you could write a whole separate article on this topic though)

Posted By: Clubturk.net-2. Seo Yarismasi on 04/27/09

Thanks for that nice post.

Posted By: Propecia Online on 06/01/09

interesting post.. thanks!!

Posted By: Nick Yeoman on 07/06/09

Hey, since I read this I've done a lot of research on this subject. http://www.nickyeoman.com/blog/css/49-organizing-your-css Let me know what you think. I started off with your concept and build around it eliminating the problems listed in the above coments

Posted By: Trevor Saint on 07/14/09

I love this post. Thanks.

Posted By: effexor en ligne on 07/21/09

Interesting way to look at it. For the most part, I agree with you.

Posted By: Russell on 08/28/09

I'm a coder; I typically I organize the stylesheets into separate .css files. It's easiest to start by working on a stylesheet for an individual page. When working on a second page, any styles that apply to both pages get 'refactored' into another, separate .css file (which would be a library or template stylesheet). My group at work uses a component-based web framework, so individual components (a date-picker widget, or the main content section of a templated page, for example) can also have their own stylesheet files. The widget's stylesheets get incorporated automatically when the widget is added to the page.

Posted By: Jasmin Halkic on 09/12/09

Very nice post.

Posted By: Shaunak on 09/12/09

The CSS I write is so messed up that I myself find it hard to follow! Your methodology is very interesting. It works well while incorporating ready made layouts like Bluprint etc.

Posted By: Mike Grace on 09/12/09

Rockin!!!! I am going to start organizing my CSS like this from now on. ; )

Posted By: Dobromir Raynov on 09/15/09

Nice. But I find such selectors #container #header #navigation { } rather longer than needed and inefficient. Check this tool http://code.google.com/speed/page-speed/

Posted By: John Barnes on 11/18/09

Hi there, liking the post, and have implemented it on my recent projects. Was just wondering....if I had divs that only appear on individual pages...but have specified IDs....would the css for them be placed in the individual page styles section...or is that only reserved for classes..thanks

Posted By: Matthew Griffin on 11/18/09

If you have a unique id for a div that only appears on one page, put that in the section for that page. The only exception I make is for page titles where I'm using the image replacement method. In that case, I usually group them all together in the library section.

Posted By: john barnes on 11/18/09

Hi matt.. So if I have a unique id for a div that only appears on one page that should go under the "individual page styles section", not the "template layout" section? Thanks

Posted By: Matthew Griffin on 11/18/09

Yeah, that's right.

Posted By: john barnes on 11/23/09

Thanks for your help

Posted By: Mohammad Koubeissi on 01/20/10

For development, I always use comments, index menu and make sure that if somebody else decides to look at my files, they'll know exactly where everything is. Once the site is live, I'll compress everything.

Posted By: webdesign rosenheim on 01/20/10

Nice post thanks! I recently worked my way through website optimizations for optimizing load times. Allover this field css compression can be found. That means for example removing all unnecessary spaces and newlines... Whilst this reduces the size of the files dramatically, the readability is not existent anymore. So what would one do about that? If you want to have fast loading sites but a readable css file too??

Post Your Comment

40 Valuable Tools and Resources For Web Designers - Noupe

jQuery Before/After Plugin

Jun 25th, 2009 by admin | 105 Comments »

About a month ago I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference  in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Here’s the result:

Pretty slick no? The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

Download

Download jquery.beforeafter.zip (version 1.1.0  – January 12, 2010)

What’s So Great About this Plugin?

• Slick effect, no Flash needed
• It’s just 7K (4K compressed)
• Reusable on multiple containers
• Degradable. If the visitor doesn’t have JavaScript they will still see both images.

How to Use

First, your before and after images must be the same size.  Each image must be inside its own div, and both of those within a containing div which must have an ID.  See this example.

<div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers.

To use the plugin you’ll need to have a copy of  jQuery and the jQuery UI, or point to jquery on Google and jqueryui on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
        $('#container').beforeAfter();
});
</script>

That’s it! You can apply the before/after plugin to any number of elements on a page.

Options

The following options are configurable:

• animateIntro  – whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default  false)
• introDelay – if animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image (default  1000)
• introDuration – if animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image (default 1000)
• showFullLinks – whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image (default true)
• imagePath – the path (absolute or relative) to where you store the navigation images (default ‘/js/beforeAfter/’)

Options are added when calling the script:

$('#container').beforeAfter({
        animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});

Enjoy!

Demos

• Example 1
• Example 2

Note that the plugin uses several images which are kept in the same folder as the plugin. If you store the plugin in another folder on your server, update the path to these images.

Posted in JavaScript