Magyar Opera

Címkék » javascript


Adblock Plus Operában - harmadik felvonás

Ez az írás nem lesz olyan hosszú, mint a korábbiak és részben a 11.10 által bevezetett display:none módosítás kapcsán jött létre.

Akik követték az eseményeket, tudják miről van szó, akik nem, azoknak pár mondatban: Az Opera a kompatibilitás növelése érdekében a 11.10-ben megváltoztatta a működését a CSS display tulajdonság esetében.

Az ajánlás nem tér ki minden részletre, mint például arra, hogy be kell-e tölteni az elrejtett tartalmakat addig, amíg azok meg nem jelennek az oldalon. A többi böngésző fejlesztői úgy gondolták, hogy igen. Ez azt okozta az évek során, hogy sokan kényelemből, sokan JS tudás hiányában olyan esetekben alkalmazták a display:none szabályt, amikor nem kellett volna.

A probléma inkább esztétikai jelentőségű volt, vagyis ilyenkor az Operában, az egyetlen olyan böngészőben, ami nem töltötte be a display:none tulajdonsággal ellátott tartalmakat, elkezdtek villogni, mivel akkor töltötte be, amikor az adott eseményre (például mouseover) megváltozott az elem display tulajdonsága.

A két legszembetűnőbb példája, hogy mikor egy menü fölé vittük az egeret az vagy 1-2 másodperc késéssel jelenítette meg az animációt az első alkalommal, illetve áttűnős diavetítést tartalmazó oldalakon az első alkalommal a képrenderelést (felülről lefelé) láttuk a képváltáshoz társított effektus helyett.

Az előnye viszont a csökkent adatforgalom és ennél fogva csökkent betöltési időn túl az volt, hogy CSS szabályokkal el lehetett rejteni a reklámokat, így bizonyos esetekben sokkal egyszerűbb volt a dolgunk, habár a megbízható tartalomblokkolás továbbra is az urlfilter.ini maradt.

Ezt a lehetőséget kezdetben (8.x verziók körül) még csak UserCSS-vel lehetett kihasználni, utána Lex1 készített egy hibrid megoldást, végül pedig a Local Storage bevezetésével megszületett a NoAds, először userJS, később kiegészítő formájában.

Azóta megjelent a sokkal hatékonyabb URL Filter API is és az arra épülő megoldások, mint az Opera Adblock De sajnos az URL Filter korlátai megmaradtak, vagyis a RegExp hiánya és a element alapú blokkolás hiánya.

Viszont itt jön képbe Dither, aki elkészítette a NoAds Advanced 1.2.1b-t, ami nem pótolja az elveszett display:none-t, de az URL Filter API-nak köszönhetően legalább egy részét visszakapjuk a korábbi lehetőségeinknek.

Változások, a NoAds óta:

  • URL Filter API támogatás a hatékonyabb Adblock Filterlista integrációért.
  • widgets storage-nak köszönhetően exportálási lehetőség
  • Átdolgozott beállítások
  • MagicFunction/MagicVariable alapú blokkolás

MagicFunction/MagicVariable példák:

##var GTracking
##var NO_msnads
##function poker_pp
##function print_download_ads
##function trackEvent 
##function trackPageView
##function trackPageViewCustom
##function wmx_counter
##function wmx_track
##function wtslog

Sitepatching: Google Maps javítva!

Hozzáadott patch-ek:

  • PATCH-393, Google Maps térképet nem lehetett függőlegesen húzni. Ahogy sokan észrevették (rengeteg bugreport futott be a fejlesztőkhöz hétvégén) a Google Maps nem működött (a stabil változatban sem). Egy Google-oldali frissítés miatt volt, ami pár ECMAScript újdonságot vezetett be, amit a Carakan hibásan értelmezett. Ez a patch egy csúnya folt, amíg nem lesz normális Core javítás a problémára. A feladat magas prioritást kapott.
  • PATCH-391, BestBuy menü javítva.

Megváltozott patch-ek:

  • PATCH-387, Apple menü újra látható a Store-ban.
  • PATCH-385, Apple.com-on az Opera CSS vendor prefix-ét JavaScriptes O tulajdonságnak értelmezi, ami a slideshow-ban problémát okoz.

Konvertáljunk videót JavaScripttel ASCII kóddá

A következő postban már jó ideje gyűjtögetem azon oldalak címeit, ahol nem csak száraz szintetikus tesztek vannak, hanem valódi aktív tartalom. Ezeken az oldalakon ki lehet próbálni a HTML5, JavaScript és Canvas sokrétűségét.

Az egyik legismertebb ilyen oldal, amely Operával is működik, ellentétben az Apple hasonló oldalával a Chrome Experiments oldala.

Van még néhány hasonló gyűjtő oldal, az egyik a Canvas Demos ahol mindenféle Canvasban és JavaScriptben írt játékok vannak a memóriától a Super Mario-ig és a HTML5Games.com.

Ezen az oldalon például egy 3D-s, 360 fokban forgatható mobiltelefon van. Természetesen HTML-ben, ehhez sem szükséges semmilyen beépülő.

Itt a renderelési sebességet lehet tesztelni.

Itt egy Tetris játék van HTML alapokon, de régi, klasszikus FPS játékaink sem maradhattak ki a sorból. Bár ezek az FPS-ek még nem teljes játékok, de készült már Wolfenstein és Doom is JavaScript+Canvas-ban.

A következő oldal már kicsit jövőbe mutató, ahol valós időben konvertálhatjuk a HTML5 videót ASCII kóddá.

A HTMLRocks oldalán van egy több részből álló bemutató.

Amint a fenti példák is mutatják, ötletben nincs hiány, már csak az erőforrásigényt kell még a jelenleginél is lejjebb dolgozni és végre búcsút mondhatunk a zárt és harmadik féltől származó megoldásoknak és az ehhez szorosan kapcsolódó biztonsági réseknek, instabilitásnak és memóriaszivárgásoknak.

Az Opera és a JavaScript kompatibilitás

Az utóbbi 1-2 évben - legújabban éppen az Opera 10.5 kapcsán - ha szóba került a JavaScript, akkor túlnyomórészt a milliszekundumok játsszák a főszerepet, azaz a különféle sebességtesztek. Tulajdonképpen mindenki alapnak veszi, hogy JavaScript terén csak ez lehet a különbség a böngészők között.

Pedig a nyelv elég összetett ahhoz. hogy az egyes böngészők a szabványt ne mindenhol kövessék megfelelőképpen. Sőt, ahogy a Chromium blog bejegyzése fogalmaz: a net (a "való világ") akár meg is követelheti a szabvány megkerülését.

Persze elsősorban nem ez a követendő példa. A nevezett cikkben szereplő Sputnik tesztnek például éppen az a célja, hogy a szabványkövetést ellenőrizze különböző tesztesetek futtatásával. Jelenleg az ECMA-262 3. kiadása alapján ellenőrzi több, mint 5000 rövid teszt futtatásával, de várható a mostanában bemutatkozó ECMAScript 5 folyamatos beépítése is.

Bár a kezdeményezés tavaly júniusra datálódik, mostanra készült el az a tesztsorozat, ami képes az összes tesztet gyors egymásutánban lefuttatni a böngészőkben. Persze a lap készítői mindjárt meg is ragadták az alkalmat, hogy leteszteljék a legnépszerűbb böngészőket, íme az eredmények:

Némi magyarázat persze szükséges. Minél több tesztet teljesít sikerrel egy böngésző, annál közelebb van a középponthoz. Az Opera a 10.5 a jelenleg elérhető 5245 tesztből 5167-et sikerrel teljesít, azaz mindössze 78 hiba fűződik a nevéhez. Ezzel szemben a Safari 159, a Chrome 218 a Firefox 256, az Internet Explorer pedig 463 hibát vét. Ezek alapján tehát az Opera teljesít legjobban ebben a kimerítő tesztben!

Az sem mindegy, hogy hol helyezkednek el a körön belül: minél közelebb van egymáshoz két böngésző, annál több a "közös hiba". Látható, hogy az Explorer számos hibája egyben meglehetősen egyedi is. Ezzel szemben a többiek nagyjából együtt vannak, megtartva persze a tisztes távolságot.

A tesztoldalon bárki letesztelheti a saját böngészőjét. Arra azért figyeljünk, hogy meglehetősen gépigényes, főleg régebbi böngészőt és lassabb gépet használók számítsanak lassulásokra, esetleg a teszt megszakadására. Egy leállítás és újraindítás segíthet az ügyön.

NoScript az Operában

Update:10.5-höz már Unite alkalmazás formájában is elérhető. Ez már nem cookie-kat használ, hanem az új Local Storage-t.

Irónikus módon épp egy userJS lesz a segítségünkre, amit shoust készített. Bár a felülete kicsit szokatlan lehet, még túl is szárnyalja, ugyanis képes képeket és iframeket is blokkolni. Egyetlen hátránya, hogy cookie-kat használ, így ha azt minden kilépésnél ürítjük, akkor a végleges engedélyezés/blokkolás nem lesz végleges.

Itt az eredeti dokumentáció képekkel illusztrálva.

NoScript 01

Erre a kis lebegő gombra kell kattintanunk a vezérlőpult előcsalogatásához és bezárásához.

NoScript 02

Jelmagyarázat:

  • A kék nyíl - Itt választható ki a blokkolni/engedélyezni kívánt tartalom típusa. A baloldali szám a blokkolható, a jobboldali pedig az oldalon lévő összes scriptet/képet/iframe-t mutatja.

  • A világoszöld nyíl - Megmutatja az elemek listáját és viszonylagos címüket. A "#X# azokat az elemeket mutatja, amik blokkolva vannak az oldalon.

  • A sárga nyíl - Ezzel a gombbal váltogathatunk az "Unblock" és a "Block" között. Hozzáadhatjuk az adott elemet a fehérlistához, ha az "Unblock"-ra klikkelünk és eltávolíthatjuk onnan, ha a "Block"-ra klikkelünk. Mikor blokkolunk, bármi, az oldalon látható tartalom, ami megjelenik piros kerettel az blokkolva lesz. Unblock esetén ugyanez, csak narancssárga lesz a keret.

  • A narancssárga nyíl - Ezzel a gombbal blokkolhatunk/engedélyezhetünk minden elemet az adott típusban (script/iframe vagy kép). Csak akkor érdemes használni, ha az oldal helyes működéséhez minden blokkolt elem szükséges.

  • A sötétzöld nyíl - Ezzel a gombbal ideiglenesen engedélyezhetjük a scripteket az adott tabon. Tehát ha meglátogatsz egy oldalt és meg akarod nézni, helyesen működik-e, használd ezt a gombot.

  • A lila nyíl - Ezzel a gombbal blokkolhatsz/engedélyezhetsz minden elemet a szerver név alapján, vagyis ha minden scriptet engedélyezni akarsz egy adott oldalról, de a többiről nem, ezt a gombot használd. Például ha a blog.hu-n engedélyezed, de az összes blog.hu-s blogon nem akarod.

  • A piros nyíl - Ezzel megnézheted az adott képet/scriptet/iframe-et új fülön, hogy tudd, mit blokkolsz/engedélyezel.