Properties vs Attributes

A DOM element is an object, a thing in memory. Like most objects in OOP, it has properties. It also, separately, has a map of the attributes defined on the element (usually coming from the markup that the browser read to create the element). Some of the element's properties get their initial values from attributes with the same or similar names (value gets its initial value from the «value» attribute; href gets its initial value from the «href» attribute, but it's not exactly the same value; className from the «class» attribute). Other properties get their initial values in other ways: For instance, the parentNode property gets its value based on what its parent element is; an element always has a style property, whether it has a «style» attribute or not.

Let's consider this anchor in a page at

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

Some gratuitous ASCII art (and leaving out a lot of stuff):

| a                                         |
| href:       "" |
| name:       "fooAnchor"                   |
| id:         "fooAnchor"                   |
| className:  "test one"                    |
| attributes:                               |
|    href:  "foo.html"                      |
|    name:  "fooAnchor"                     |
|    id:    "fooAnchor"                     |
|    class: "test one"                      |

Note that the properties and attributes are distinct.

Now, although they are distinct, because all of this evolved rather than being designed from the ground up, a number of properties write back to the attribute they derived from if you set them. But not all do, and as you can see from href above, the mapping is not always a straight «pass the value on», sometimes there's interpretation involved.

When I talk about properties being properties of an object, I'm not speaking in the abstract. Here's some non-jQuery code:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts ""
alert(link.getAttribute("href")); // alerts "foo.html"

(Those values are as per most browsers; there's some variation.)

The link object is a real thing, and you can see there's a real distinction between accessing a property on it, and accessing an attribute.

The vast majority of the time, we want to be working with properties. Partially that's because their values (even their names) tend to be more consistent across browsers. We mostly only want to work with attributes when there is no property related to it (custom attributes), or when we know that for that particular attribute, the attribute and the property are not 1:1 (as with href and «href» above).

The standard properties are laid out in the various DOM specs:

DOM2 Core
DOM3 Core

These specs have excellent indexes and I recommend keeping links to them handy; I use them all the time.

Custom attributes would include, for instance, any data-xyz attributes you might put on elements to provide meta-data to your code (now that that's valid as of HTML5, as long as you stick to the data- prefix). (Recent versions of jQuery give you access to data-xyz elements via the data function, but that function does more than that and if you're just dealing with a data-xyz attribute, I'd actually use the attr function to interact with it.)

The attr function used to have some convoluted logic around getting what they thought you wanted, rather than literally getting the attribute. It conflated the concepts. Moving to prop and attr is meant to de-conflate them. There will be some brief confusion, but hopefully a better understanding of what's really going on going forward.

Via (stackoverflow)

Add "Recent Applications" icon to the dock, and disable windows animation

1) To add Recent Applications icon to the dock, open Terminal and copy paste following:

defaults write persistent-others -array-add '{ "tile-data" = { "list-type" = 1; }; "tile-type" = "recents-tile"; }' && killall Dock

Don't forget to check recent Items settings in System Preferences>General

2) To disable windows animation, open Terminal and copy paste following:
defaults write NSGlobalDomain NSAutomaticWindowAnimationsEnabled -bool NO

How to get md5 hash of files in current directory

The following command pretty useful when you need to get a md5 of specific files e.g. only video files in the current dir.

find * -iname '*.mp4' -exec md5 '{}' \; >output.txt

Does anybody know what '{}' \; means?

How to hide a folder in Finder

In order to hide a folder in Finder, open Terminal and write following:

setfile -a V /path/to/folder


chflags hidden /path/to/folder

To unhide:

setfile -a v /path/to/folder


chflags nohidden /path/to/folder

Truncating text using only CSS

Here's how you can truncate text using only CSS. It works in IE 6+, Safari 4+, Firefox 7+, Opera 11+ and Chrome 10+:

.link_truncated {
    text-overflow: ellipsis;
    display: inline-block;
    width: 275px;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;

P.S. from here

Controlling fan speed on Macbook Air (handling noisy fan, by decreasing the fan speed)

Hello all!

Recently I've purchased Macbook Air mid 2011, I very like it so far.
However, I've noticed when I'm watching movies or YouTube videos, the fan is spinning really fast, iStats shows me something like about 6400 (!) RPM.
I've tried to use fan controlling apps like smcFanSpeed or Fan Control.
However, both of those apps doesn't allow you to decrease fan speed (probably it's designed that way in order not to burn the laptop in inexperienced user hands)

I'm kinda experienced user, so I took a risk and wrote simple script that allows you to set fan speed manually.
The instructions are pretty easy:
1) Download it setFanSpeed2011.tgz
2) Open the Terminal, go to folder where the file was downloaded
3) Extract it: tar xf setFanSpeed2011.tgz
4) Go to inside extracted folder: cd setFanSpeed2011
5) Run it: sudo ./setFanSpeed XXXX (Where XXXX should be needed RPM)

P.S. When I'm gaming or watching movies, I found that 3600 RPM work for me pretty well, the CPU stays on ~174F (~79C) temperature.
The same temperature as when fan was spinning at 6200 (!) RPM, but now it's not such noisy!
P.P.S Created and tested on OSX Lion 10.7.1

Note, I'm not taking any responsibilities if you will burn your laptop by using my tool! Decreasing the fan speed is very dangerous!
Since, if you don't watch the CPU temperature it might be overheated!

install telnet client on windiws 7 using console

IT may be useful when you need telnet.exe on win7 machine and for some reason want install/enable it using .bat files

pkgmgr /iu:"TelnetClient"

cross-browsed text-overflow

What is text-overflow?

How to implement it nowadays for the most popular browsers?

Here is a solution:


    .wrapper span


    <?xml version="1.0"?>
    <bindings xmlns="" xmlns:xbl="" xmlns:xul="">
        <binding id="ellipsis">
                    <xul:description crop="end" xbl:inherits="value=xbl:text">

Funny comments in source codes ;)

//When I wrote this, only God and I understood what I was doing
//Now, God only knows 

_margin: 40px; /* hack for IE browser (assuming that IE is a browser) */

( Read more )

CSS file that resets browser defaults

CSS file that resets browser defaults:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
body {
	line-height: 1;
ol, ul {
	list-style: none;
blockquote, q {
	quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;

/* remember to define focus styles! */
:focus {
	outline: 0;

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
del {
	text-decoration: line-through;

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;

Via Meyerweb