Friday, July 27, 2007

above the fold (above the scroll, above the crease)

“Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. Thus, an item that is “above the fold” may be one that the editors feel will entice people to buy the paper. Alternatively, it reflects a decision, on the part of the editors, that the article is one of the day’s most important.

The term can be used more generally to refer to anything that is prominently displayed.

Above the scroll, a concept in web design referring to location of an item near the top of a web page, which can thus be viewed in a browser without scrolling. Some web marketers have called this “above the crease” referring to way in which newspapers of yesteryear were folded and creased.

tag soup

Tag soup is HTML code written without regard for the rules of HTML structure and semantics (HTML is the markup language which composes Web pages). Generally, tag soup is created when the author is using HTML for a presentational document rather than a semantic document. Because web browsers have always treated HTML errors leniently, tag soup is also used by browser implementers to refer to all HTML. HTML must be treated by web browsers as tag soup in comparison to XML where errors need not, and should not, be corrected according to the specification.

web bug (a.k.a. tracking image, clear gif, 1-by-1 gif, invisible gif)

What exactly is a Web Bug?

A Web Bug is a graphics on a Web page or in an Email message that is designed to monitor who is reading the Web page or Email message. Web Bugs are often invisible because they are typically only 1-by-1 pixel in size. They are represented as HTML IMG tags.

What information is sent to a server when a Web Bug is viewed?

  • The IP address of the computer that fetched the Web Bug
  • The URL of the page that the Web Bug is located on
  • The URL of the Web Bug image
  • The time the Web Bug was viewed
  • The type of browser that fetched the Web Bug image
  • A previously set cookie value

What kinds of uses does a Web Bug have in an Email message?

  • A Web Bug can be used to find out if a particular Email message has been read by someone and if so, when the message was read.
  • A Web Bug can provide the IP address of the recipient if the recipient is attempt to remain anonymous.
  • Within an organization, A Web Bug can give an idea how often a message is being forwarded and read.

Firefoxban a noscript extension az 1.1.6.11-es verziotol letilthatova teszi (about:config > noscript.blockNSWB)

Thursday, July 26, 2007

Tenni Theurer: Maximizing Parallel Downloads in the Carpool Lane

Itt van az egesz, de lenyeg, hogy a HTTP/1.1 specifikacioban leirt ajanlas szerint az IE es a Firefox is max 2 dolgot tolt le parhuzamosan ugyanarrol a hostrol (IP cimet nem nez). Ezt meg lehet valtoztani kliens oldalon.

Az IE-nel a registy manipulalasaval:

  1. Start Registry Editor (Regedt32.exe).
  2. Locate the following key in the registry:
    HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings
  3. On the Edit menu, point to New click DWORD Value, and then add the following registry values:
    Value name: MaxConnectionsPer1_0Server
    Value data: 10
    Base: DecimalValue Name: MaxConnectionsPerServer
    Value data: 10
    Base: Decimal
  4. Quit Registry Editor.

Firefoxban pedig az about:config oldalon a
network.http.max-persistent-connections-per-server atallitasaval.

Kimertek, hogy mennyit huz a sebessegen, ha tobb hostname aliast hasznalnak amivel arra szorithatjak a browsert, hogy egyszerre tobb elemet toltson le, de az jott ki, hogy 2 aliasnal tobbet nem erdemes hasznalni, mert csak meglassabb lehet az egesz, de gyorsitani biztos nem fog.

Ryan Bran merese szerint viszont siman megeri 3 kulonbozo subdomaint hasznalni.

Wednesday, July 25, 2007

Reload IE-ben a cahce kiiktatasaval.

Ha ugy akarunk ujratolteni egy oldalt IE-ben, hogy ne hasznalja a cache-t, akkor nyomni kell kozben a controlt es a shiftet.

Thirteen Simple Rules for Speeding Up Your Web Site by Yahoo! Developer Network

Itt van az egesz, de idemasolom a tartalomjegyzeket:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags

Monday, July 23, 2007

palindromic pangram

A palindrome is a word, phrase, number or other sequence of units that has the property of reading the same in either direction.

A pangram or holoalphabetic sentence, is a sentence which uses every letter of the alphabet at least once.

A palindromic pangram is a multi-word palindrome that includes all 26 letters of the alphabet.

Tuesday, July 17, 2007

Fritz Onion: Beware trailing comma in JavaScript prototypes

Itt van, de rovid ugyhogy be is masolom:

When defining a number of functions in a prototype in JavaScript, do not include a trailing comma after the last

MyType.prototype = {
foo : function() {
// ...
},

bar : function() {
//...
}, //<- fails in IE!
}

function:What was especially tricky about tracking this problem down was that FireFox works with or without the trailing comma, so it only fails in IE!

Aza Raskin: Never Use a Warning When you Mean Undo

Itt van az egesz, de lenyeg, hogy webalkalmazasokban mondjuk ha torlunk valamit akkor jo lenne a warning helyett (amit sokszor automatiksuan leokezunk, majd a fejunkhoz kapunk) egy undo megoldas. Peldanak a Gmail leveltorleset hozza fel, ami nem figyelmeztet, de rogton utana egy mozdulattal vissza tudjuk vonni, ha tevedesbol tettuk.

Row Swan: Conflicting Absolute Positions

Ez a problema:

“On two separate occasions this month, I’ve been required to produce a layout in which a fixed-width scrolling side “pane” and flexible scrolling main “pane” must resize to fill all available space in a browser window.”

Vegigjarja a dolgot es vegul Div-ekkel es CSS-sel oldja meg. Persze most is az IE bonyolitja a megoldast.

Monday, July 16, 2007

Peter-Paul Koch: The this keyword (in javascript)

Itt van az egesz, de a lenyeg:

What does this refer to in the function doSomething()?

function doSomething() {
this.style.color = '#cc0000';
}

If you want to use this for accessing the HTML element that is handling the event, you must make sure that the this keyword is actually written into the onclick property. Only in that case does it refer to the HTML element the event handler is registered to. So if you do

element.onclick = doSomething;
alert(element.onclick)

you get

function doSomething()
{
this.style.color = '#cc0000';
}

As you can see, the this keyword is present in the onclick method. Therefore it refers to the HTML element.

But if you do

alert(element.onclick)
you get

function onclick()
{
doSomething()
}

Examples - copying

this is written into the onclick method in the following cases:
element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}

Examples - referring

In the following cases this refers to the window:

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)

Sunday, July 15, 2007

Ackermann fuggveny

A:N x N -> N

A(m,n) =

  • n+1, ha m=0
  • A(m-1,1), ha n=0
  • A(m-1, A(m, n-1)), ha m>0, n>0
    Ahogy a wikipediaban irtak:
    “A(4, 2) nagyobb, mint az Univerzum részecskéinek száma a 200. hatványon. A(5, 2) tízes számrendszerben írva nem férne el a fizikai Univerzumban…Ha megtehetnénk, hogy a mostani Univerzum minden részecskéjét egy csettintéssel egy univerzummá tágítsuk, utána ugyanezt a megjelent univerzumok részecskéivel, és ezt sokszor megtennénk, meghalnánk végelgyengülésben mielőtt a részecskék száma elérné a A(4, 3)-t.”

Tuesday, July 10, 2007

Miert ne hasznaljunk with-et javascriptben

Crockford nem ajanlja, mert peldaul a


with (o) {
foo = null;
}

jelentheti azt is, hogy az o.foo lesz null meg azt is, hogy a globalis foo valtozo lesz null vagy akar mindketto.

throw a javascriptben

A sima throw new Error(reason); mellett lehet object literalt is hasznalni.

Pelda a Crockford videobol:


throw {
name: exceptionName,
message: reason
}

for..in buktato javascriptben

Vegig lehet menni egy object minden member-en igy:


for (var name in object) {...}

de ilyenkor vegigmegyunk azoknak az object-eknek is minden elemen amibol a mi objectunk szarmaztatva volt. Ezert Crocford szerint jobb igy megszokni meg ha csunya is:


for (var name in object) {
if (object.hasOwnProeprty(name)) {..}
}

laballed break a javascriptben

Crockford video (00:23) slide 40
  • Statements can have labels.
  • Break statements can refer to those labels.


loop: for (;;) {
...
if (...) {
break loop;
}
...
}

Egymasba agyazott ciklusoknal is mukodik.

Friday, July 06, 2007

Honnan tudjuk, hogy az utolag include-olt javascript mar betoltodott. [2]

Az elozo problemara a codingforums.com-on callback-es megoldast javasolnak a firefoxban az element.addEventListener, IE-ben pedig a onreadystatechange event segitsegevel:


function loadScript(src, callback) {
var node = document.createElement("script");
if (node.addEventListener)
node.addEventListener("load", callback, false);
else
node.onreadystatechange = function() {
if (this.readyState == "complete") callback.call(this);
}
node.src = src;
document.getElementsByTagName("head").item(0).appendChild(node);
node = null;
}


// load 30k script.
// Listener.cleanUp is defined at the bottom of drag.js
callback = function() {
var self = this;
alert("Loaded: " + this.src + "\nListener.cleanUp (nested):" + Listener.cleanUp);
};
loadScript("http://dhtmlkitchen.com/editor/js/drag.js", callback);

[Update]
Ahogy Jan Volter is emliti jobb vigyazni ezzel a readyState propertyvel es onreadystatechange eventtel, mert:
The “this.readyState == ‘complete’” test doesn’t actually entirely work. The readyState theoretically goes through a series of states:

0 uninitialized
1 loading
2 loaded
3 interactive
4 complete

But in fact, states may be skipped. In my experience with IE 7, you get either a loaded event or a completed event, but not both. It may have something to do with whether you are loading from cache or not but there seem to be other factors that influence which events you get. Sometimes I get loading or interactive events too, and sometimes I don’t. It’s possible the test should be “this.readyState == ‘loaded’ || this.readyState == ‘complete’“, but that risks triggering twice.

Honnan tudjuk, hogy az utolag include-olt javascript mar betoltodott.

Viszonylag egyszeru utolag hozzaadni egy js filet az oldalunkhoz (1, 2), de ha rogton ezutan valamit hasznalni szeretnenk belole akkor az nem biztos, hogy menni fog, mert lehet, hogy meg nem toltodott be teljesen.

Stoyan (mar torolt) irasa szerint egy 1998-as MSDN cikkben talalkozott a readyState property-vel es azt hasznalva ez a kodreszlet IE-ben (csak ott!!) mukodik:

The idea is that after a new DOM element (a script tag) is created, you can have access to the readyState property of the element. If it says “complete”, then the new script is included and it’s OK to call functions from it. If you want to “listen” when the script download will be completed, you can attach an listener to the onreadystatechange event, just like with XMLHttpRequests.

Here’s an example:


var js;
function include_js(file) {
var html_doc = document.getElementsByTagName('head').item(0);
js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
html_doc.appendChild(js);

// alert state change
js.onreadystatechange = function () {
alert(js.readyState);


if (js.readyState == 'complete') {
// safe to call a function
// found in the new script
imready();
}
}
return false;
}

A commentek kozott Aaron Bassett egy masik megoldast javasolt, amihez modositani kell egy kicsit a betoltendo scripten (mar ha ez lehetseges), de szerinte minden browserben mukodik (bar nem probalta):

This untested but I dont see any reason why it wouldnt work, and should work across all browsers.

Right at the end of the external js file set a variable like:

var externalScriptLoaded = true;

Then in your main code you could use:


function checkScriptLoaded() {
if(!externalScriptLoaded) {
setTimout("checkScriptLoaded", 500);
} else {
// script loaded and ready to use
}
}

If you have multiple external files you want to check just make sure each has a unique variable name being set and check them accordingly.

This polling every half-second isnt perfect but it will work.

Your other option would be to create a function/method in your main script which inits the actions to perform when the external script is loaded.
Then as the very last thing in your external script you could just call that function/method

externalScripts.myScriptLoaded();

As this call would be at the end of your file it wont be run until the rest of the file ahead of it has been downloaded.

Once again this method is untested but am 99% sure will work and will be cross browser.

Saturday, June 30, 2007

Nicholas C. Zakas: dynamically inserting CSS into your page

Itt van az egesz, de a lenyeg:

Safari requires dynamically created <style/> elements to be inserted into the for the rules to be applied

…

When IE encounters style.appendChild() it throws the rather obtuse and not-very-helpful error message, “unexpected call to method or property access”. Try replacing that with a call to set innerHTML, and you’ll get an equally useless error message of “unknown runtime error”. What’s going on here? It turns out that IE won’t let you manipulate <style/> elements in this way. There is, however, a different way to do the same thing. IE supports a styleSheet property on each style element that allows for the manipulation of the style sheet and the rules contained within. The styleSheet property has a property called cssText, which can be used to set and retrieve the CSS text for the style sheet.

…

This code now works in all A-grade browsers:

function addCss(cssCode) {
var styleElement = document.createElement(”style”);
styleElement.type = “text/css”;
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName(”head”)[0].appendChild(styleElement);
}

A warning: IE only allows writing to styleSheet.cssText one time per <style> element. If you try to do it more than one time, it can crash the browser. For this reason, it’s best not to reuse <style> elements on your page. Instead, remove them or just add new ones.

…

A commentek kozul:

According to the HTML 4.01 spec section 14.2.3, style tags must be contained in the head element: “HTML permits any number of STYLE elements in the HEAD section of a document.”

Link to the spec:
http://www.w3.org/TR/html401/present/styles.html#edef-STYLE

browser csoportositas a YUI-nel

Azt irjak, hogy tobb mint 10.000 fele browser marka, verzio es konfiguracio van ezert ok teszteles szempontjabol 3 csoportba bontottak oket:

C-grade

C-grade is the base level of support, providing core content and functionality. It is sometimes called core support. Delivered via nothing more than semantic HTML, the content and experience is highly accessible, unenhanced by decoration or advanced functionality, and forward and backward compatible. Layers of style and behavior are omitted.

C-grade browsers are identified on a blacklist. Approximately 3% of our audience receives a C-grade experience.

Summary: C-grade browsers are identified, incapable, antiquated and rare. QA tests a sampling of C-grade browsers, and bugs are addressed with high priority.

A-grade

A-grade support is the highest support level. By taking full advantage of the powerful capabilities of modern web standards, the A-grade experience provides advanced functionality and visual fidelity.

A-grade browsers are identified on a whitelist. Approximately 96% of our audience enjoys an A-grade experience.

Summary: A-grade browsers are identified, capable, modern and common. QA tests all A-grade browsers, and bugs are addressed with high priority.

X-grade

X-grade provides support for unknown, fringe or rare browsers. Browsers receiving X-grade support are assumed to be capable. (If a browser is shown to be incapable — if it chokes on modern methodologies and its user would be better served without decoration or functionality — then it is considered a C-grade browser.)

X-grade browsers include all browsers not on the C-grade blacklist or the A-grade whitelist. Approximately 1% of our audience receives the X-grade experience.

Summary: X-grade browsers are generally unknown, assumed to be capable, modern, and rare or fringe. QA does not test, and bugs are not opened against X-grade browsers.

The Relationship Between A- and X-grade Support

A bit more on the relationship between A and X grade browsers: One unexpected instance of X-grade is a newly-released version of an A-grade browser. Since thorough QA testing is an A-grade requirement, a brand-new (and therefore untested) browser does not qualify as an A-grade browser. This example highlights a strength of the Graded Browser Support approach. The only practical difference between A and X-grade browsers is that QA actively tests against A-grade browsers.

Unlike the C-grade, which receives only HTML, X-grade receives everything that A-grade does. Though a brand-new browser might be characterized initially as a X-grade browser, we give its users every chance to have the same experience as A-grade browsers.

javascriptben lassuak a bitwise operatorok

Crockford video (30:10)

Mert eloszor atkonvertaljak a 64 bites floating point-ban tarolt szamot 32 bites signed integerre, aztan shiftelik es utana visszakonvertaljak az eredmenyt 64 bites floating point-ba.

Tehat a shiftelgetes itt lassabb lesz mintha siman megszoroznank mondjuk kettovel az erteket.

&& es || operatorok javascriptben

Crockford video (28:20)

&& operator

  • The guard operator, aka logical and
  • If first operand is truthy
    then result is second operand
    else result is first operand
  • It can be used to avoid null references
    if (a) {
    return a.member;
    } else {
    return a;
    }
  • can be written as
    return a && a.member;

|| operator

  • The default operator, aka logical or
  • If first operand is truthy
    then result is first operand
    else result is second operand
  • It can be used to fill in default values.
    var last = input || nr_items;
  • (If input is truthy, then last is input, otherwise set last to nr_items.)

Friday, June 29, 2007

== es != operatorok tipust castolhatnak javascriptben

Ezert jobb a === es a !== operatorokat hasznalni mert azok a tipusellenorzest is elvegzik

var a = 5
var b = “5″

Print(a == b) //True
Print(a === b) //False

Crockford video (27:25)

falsy - truthy values in javascript

Crockford video (20:40)

Falsy values:

  • false
  • null
  • undefinded
  • “” (empty string)
  • 0
  • NaN

All other values (including all Objects) are truthy “0″, “false”

NaN != NaN

Javascriptben a NaN nem egyenlo semmivel, meg onmagaval sem.

Es azzal egyutt, hogy a NaN azt jelenti, hogy Not a Number, a tipusa megis number:

Print(typeof(NaN)) // number

Numbres in javascript

Douglas Crockford video (13:40)
  • Only one number type (No integers)
  • 64-bit floating point
  • IEEE-754 (aka “Double”)
  • Does not map well to common understanding of arithmetic:
  • 0.1 + 0.2 = 0.30000000000000004

Tehat az Crackford tanacsa, hogy ha penzzel szamolunk akkor szorozzuk fel szazzal az operandusokat, vegezzuk el a szamitast majd az eredmenyt osszuk vissza szazzal.

Wednesday, June 27, 2007

Brad Abrams: Silent install of the .NET Framework

Itt van az eredeti, de inkabb bemasolom az egeszet:

When I talked to ISV, they often just want to use the .NET Framework as an implementation detail of their applications.. they don’t want their users to have to go to windows update or MSDN to download the framework, and they don’t want to have some Microsoft setup UI popping up during the install experience of their application.

For this scenario, we have a little known feature of setup where you can install it the .NET Framework silently.. that is with no-UI popping up at all. This allows you to have full control of the experience…

For .NET FX 3.0: the magic command line is: Dotnetfx3.exe /q
See this white paper for more details.

Oh, and if you are still on .NET Fx 2.0, the command is: Dotnetfx.exe /q:a /c:”install /q”
And you can find more out here.

lifted function

Eric Lippert irt rola a C# 2.0 Standard-ban tortent teves hasznalat kapcsan:

Precisely what mathematicians mean by “lifted”.

Suppose we’ve got a function f which maps values from a set A into a set B. That is f:A→B.

Suppose further that null is not a member of either A or B.

Now consider the sets A’ = A ∪ { null } and B’ = B ∪ { null }

We define the “lifted function” f’ as

f’:A’→B’ such that f’(x) = f(x) for all x ∈ A and f’(null) = null

Similarly, if we had a two-argument function f: A × B → C, we would define f’: A’ × B’ → C’ as f’(x,y) = f(x,y) for all (x,y) ∈ A × B and null if either x or y is null.

What we’re getting at here is that “lifted” means “takes nulls, always agrees with the unlifted version when arguments are not null, maps everything else onto null”.

ubiquitous, mature

ubiquitous: mindenutt jelenlevo, szeles korben hasznalt

mature: megfontolt, atgondolt, erett

Tuesday, June 26, 2007

parseInt radix attibutuma

A javascript-ben a parseInt igy nez ki:

parseInt(string[, radix])

A radix-et tehat el lehet hagyni csak nem erdemes, mert ha nem adjuk meg akkor a string alapjan probalja megallapitani es ha “0″-val kezdodik akkor 8-as alapunak veszi es peldaul a “011″-bol decimalis 9 lesz, a “08″-bol pedig 0, mert ugye 8 nincs okatlis szamrendszerben.