Tag Archives: FAQs Help and Tutorials

Marko Mrdjenovic: I’m POSH are you?

Here are my notes from lecture by Marko Mrdjenovic: Jaz sem POSH, pa ti? at @kiberpipa @wwwh.

What’s┬á POSH and a short history?

Nor your ordinary next door girl
Image by Cayce Newell via Flickr

Years and years ago (before 1999), we had “shinny happy tables”, everything in HTML that dealt with advanced layout had to be done in tables since they didn’t undrstand anything else. We had to use lots of spacer GIF‘s to make it look right.

Then one day Jeffy Z. started thinking about building layouts with CSS, so we had to burn our tables.

That’s how POSH got invented.

Then Microformats got invented and being pushed around at different conferences. People realized that until we can actually code HTML, microformats won’t do us any real justice

POSH – Plain Old Semantic HTML

5 Rules of POSH:

1/28/07 - POSH - Los Angeles, Ca #5933
Image by amayzun via Flickr
  • Validate your code. Until it validates it’s not proper HTML.
  • No tables. Unless it’s really tabular data, you don’t get to use it.
  • No bed and breakfast. A lot of HTML is done in <br>, <i>, <b> and other tags that are meant to make things look certain way. Get rid of it.
  • No anorexic anchors. Don’t use anchor placeholders for moving viewport around. New browsers can jump to an specific ID in page.
  • Semantic classes. Don’t name your classes “blue” and “green”, but rather tell what they mean.

Unfortunately, that’s not all:

  • <div> and <span> are almost most important elements if you take a look how fast they appear in HTML standard. They’re defined as “generic language style containers”

Wouldn’t it be great if we would get rid of them too? They really don’t tell us anything about the content that they hold.

There are some exercises you can do:

  • When you see a photo, you start thinking about the way you would express the image with HTML tags.

[long discussion about how to tag a number of different photos]

Gizmondo Babes
Image by TrojanDan via Flickr
  • In HTML5 you almost won’t need to use DIV and SPAN anymore as we get many new elements that give meaning to these things.
  • If you use more then 40% of <DIV> and <SPAN> tags on your page, you’re probably doing something wrong.
  • Lets use less elements. Instead of starting with elements, write content first.
Reblog this post [with Zemanta]

Graphication on OS X (with pycairo)

I’m working on some visualizations and I want to achieve the look of Last.fm visualization lastgraph3:

wavegraph

The great thing about this is that Andew Godwin, author of the site open sourced the underlying library – Graphication.

Since I’m an OS X user, I decided to make the whole thing work on my system – Leopard 10.5.6 at the time of this writing. Here are the notes, mostly for my reference and because it might be also useful to others:

Get free XCode from Apple: http://developer.apple.com/

First build and install pkg-config from: http://pkgconfig.freedesktop.org/releases/pkg-config-0.23.tar.gz

Then install libpng and libjpeg libraries: http://ethan.tira-thompson.com/Mac%20OS%20X%20Ports.html

Build and install pixman from: http://www.cairographics.org/releases/

Build and install cairo from: http://cairographics.org/releases/

Build and install pycairo from: http://cairographics.org/releases/

Patching:
– you’ll need to edit cairo/Makefile.in file by modifying parameter _cairo_la_LDFLAGS (around line 215) to remove ‘-export-symbols-regex init_cairo’
(thanks Michael Dales)

Build instructions:
– just follow INSTALL file. Essential running:
./configure –prefix=/System/Library/Frameworks/Python.framework/Versions/2.5 (sys.path for my system)
and then make && sudo make install

Now you can finally build and install Graphication package ­čÖé

All the installations steps are just ./configure && make && sudo make install and just work out of the box. I already have Python PIL installed from sources and I think you need this for one of the steps, but I’m not sure anymore for which one.

After you go through all the steps, you can start drawing something like that:

Simple visualization
Simple visualization

Now to figure out how to create something meaningful with it.

Reblog this post [with Zemanta]

Marko Samastur – Easy deployment of site-extensions with a browser plugin [firefox3 launch party notes]


Description unavailable

Image by ccmerino via Flickr

Marko Samastur – Easy deployment of site-extensions with a browser plugin.

Starting with Zemanta presentation, since it’s relevant for the presentation. Zemanta is a tool for contextual matching for blogging platforms and has to support a wide variety of platforms.

The limitations of XHR was a problem because of limitations of security-model that doesn’t allow cross-domain POST requests. In case of Zemanta, we can use custom-build JavaScript function.

When to use extension?

When web-site as such, doesn’t provide integration points (e.g., Blogger.com platform), the other reason is if you want to use functionality that is not available within the normal browser window.

Process

First thing that you need to do, is that you need to find a place for widget. In case of Zemanta, we used right side widget. In this case, we used CSS and made it a bit narrow.

Blog better using Zemanta
Creative Commons License photo credit: chucks

But wherever you go, CSS selectors that you use, will most probably match styles of the platform. So if you use a widget on different platforms.

You can conquer this within CSS by writing selectors that are more binding than the default way. The one that we did (and is not the best way), we use a platfora of id’s and classes and then we use these names and classes that get injected into web-page and are more binding than the platform ones. This one works great if you use two files: general one and platform specific one.

Second way is to use nesting and “id envelops” – encapsulation and while it’s ugly, it’s the best way:

#zem1 #zem2 #zem3 h3 {

}

the second thing that you should try to use is microformats. After you put your widget into the page, you usually want that widget to do something, and for that we normally use Javascript.

Javascript problems

The variety of problems is large, but a short selection:

Extending Object and Array – it sounds a good idea in a start, but it’s a major problem down the road. It’s usually a bad idea that many JavaScript libraries (like JQuery), use Objects as configuration buckets and if you extend it, it means that all objects will have this and bad things will happen.

The second thing is, that if you have a web-site and you want to have it “extendable”, it’s a good idea not to step all over their feet and potential code.

Private name-spaces – either through anonymous functions or through object hierarchy. The problem is that sometimes you want to change behaviour of methods that are hidden behind namespaces (e.g., changing how dragging boxes works in 2.3 WordPress).

One thread implication: what comes later can rely on what came before. It’s not always true, because JavaScript API’s like DOM functions doesn’t always run in the same thread.

While you can do is to test your JavaScript on slow browser and computers, and on different connections. But this is often not enough, so you should actively protect from this and check to make sure the code and functions are there before you call them.

Useful tools for extension creation

Firefox extension Wizard – http://ted.mielczarek.org/code/mozilla/extensionwiz/

FUEL – http://developer.mozilla.org/en/docs/FUEL

Besttoolbars – http://www.besttoolbars.net/

Zemanta Pixie