Firefox címkéhez tartozó bejegyzések

Firefox kontra UTF-8

Az Egyetem MSDNAA oldalának frissítésekor futottam bele egy érdekes jelenségbe: saját gépemen tesztelve az oldalak teljesen jól működtek, felmásolva a szerverre viszont nem egészen. Szinte az összes böngészőben rendben volt minden, kivéve Firefoxban, ahol zagyvaság jelent meg a magyar ékezetes karakterek helyett.

Ellenőriztem a fájlokat, korrektül UTF-8-ban voltak elmentve, még a byte-order-mark is ott volt az elején – amit mondjuk nem volt nehéz észrevenni, hiszen a Firefox lelkesen ki is rajzolta az oldal elejére: 

Mivel szép új HTML5 oldalakról van szó, ott virít bennük a <meta charset="utf-8" /> sor, sőt még a klasszikus Content-Type sort is beletettem, hiába.

A gyors ellenőrzések után vissza a kályhához, elő a Fiddlert, ahol már látszott is a hiba oka. Ez a fejléc sor jött a szervertől:

Content-Type: text/html; charset=iso-8859-1

Ezen a ponton megvilágosodtam és rájöttem, hogy a régi oldalak miért voltak UTF-8 helyett ISO-8859-1-ben elmentve: mert a webszerver ezt a charsetet kényszeríti rá! A fejlécben lévő információ pedig Firefox esetén felülírja az oldalban lévő beállítást.

Tekintve, hogy a site egy Apache szerveren fut shared hosting környezetben, ahol se ASP.NET, se PHP, se admin jogom, szerver oldali kódból nem tudtam felülírni a fejléc mezőt. A megoldás mégis egyszerű lett, csak ezt az egyetlen sort kellett a webhely gyökerében lévő .htaccess fájlba beleírni:

AddDefaultCharset UTF-8

A webhely gyökerében lévő beállítás szerencsére öröklődik az alkönyvtárakra is.

 

Technorati-címkék: ,,
Reklámok

JavaScript hibakeresés 1×1

Véleményem szerint ma már nem létezik “szerver oldali webprogramozó”, hiszen szinte minden weboldalhoz tartozik már szerver és kliens oldali logika is. A kliens oldali JavaScript és jQuery kódok debuggolása elsőre nagyon idegen feladatnak tűnhet, de valójában egyáltalán nem ördöngösség és szerencsére már kiváló eszközök is vannak hozzá. Az alábbi videóban a Firebug, a FireQuery és a Visual Studio 2010 JavaScript debuggolási lehetőségei közül a leggyakrabban használtak kerülnek terítékre:

Teljes képernyős nézet, 720p felbontás ajánlott.

 

__doPostBack is undefined

Éljenek a modern böngészők! Tényleg, én szeretem, hogy van változás, jönnek az újak, amelyek biztonságosak és a webes szabványokat is egyre jobban támogatják. Jobb a fejlesztőknek és jobb a felhasználóknak is. Néha azonban beüt a mennykő és egy-egy újabb böngésző alatt elhasal a korábban szépen működő webhelyünk. Például Internet Explorer 10 alatt egy ASP.NET-es alkalmazástól könnyen kaphatjuk ezt a hibaüzenetet:

‘__doPostBack’ is undefined

Az aláhúzás-aláhúzás kezdetű dolgokról tudjuk, hogy az ASP.NET belső működéséhez tartoznak, így ez már messziről komolynak tűnik. Pedig mindössze arról van szó, hogy az ASP.NET down-level böngészőként értelmezi a legújabb IE verziót, ami szerinte nem kezeli a JavaScriptet. Firefox 5+ alatt hasonló a helyzet, ugyanebből az okból kifolyólag ott a görgetősáv visszaállítással kapcsolatos MaintainScrollbackPositionOnPostBack tulajdonság hal meg. Mindkét hiba annak köszönhető, hogy egy hiba csúszott a .NET 2.0 és 4.0-hoz tartozó böngésző definíciós fájlokba.

A browser caps egy karbantartási rémálom. Az alapötlet jó (vagy talán egyszerűen nincs jobb), de rengeteg munka követni a változásokat. Bár Microsoft ad ki időnként frissített browsercaps fájlt, sajnos más források gyakrabban frissülnek, különösen a mobil eszközök és böngészők területén. Szerencsére a mechanizmus rugalmassága lehetővé tette, hogy a Microsoft most gyorsan javítsa ezt a hibát, amit mi NuGet csomag formájában tudunk alkalmazni a saját webalkalmazásunkban:

Jobb klikk a Solution Explorerben a projekten, majd Manage NuGet Packages…

Manage NuGet Packages

Az Online kategóriában keressünk arra, hogy app_browser:

Manage Packages - App_Browser

Két csomag fog megjelenni:

Telepítsük a kiválasztott csomagot, ami mindössze két .browser fájlt fog eredményezni az App_Browsers mappában:

App_BrowsersUpdate csomag telepítve

Ezzel természetesen csak egy alkalmazást javítottunk meg. Ha a szerveren lévő összes alkalmazásra szeretnénk alkalmazni a javítást, akkor az alábbi tudásbázis cikkek segíthetnek:

  • KB2600088 – .NET 4
  • KB2600100 – .NET 2.0 Windows 7 SP1, Windows Server 2008 R2 SP1, Windows Vista/Server 2008, Windows XP/Server 2003
  • KB2608565 – .NET 2.0 Windows 7 és Windows Server 2008 R2 RTM

A javítások be fognak kerülni a .NET Framework következő nagyobb javítócsomagjába, ami a következő év elejére várható.

 

Technorati-címkék: ,,,,

Böngészők egymás mellett (side-by-side)

Itt a tavasz, rügyeznek a böngészők! Tagadhatatlan, hogy a március a böngészők hónapja volt, szinte minden böngészőgyártó kijött egy verzióval. Ennek minden felhasználó örülhet, hiszen a kis kedvencük tipikusan szebb, jobb és biztonságosabb is lett. (Egyúttal itt az alkalom, hogy ismét kipróbáljuk a többi böngészőt, és végiggondoljuk, hogy maradunk-e a megszokottnál, vagy esetleg váltunk, mert a másik ezúttal jobban sikerült.) Akik viszont tipikusan nem örülnek ennek, azok a webfejlesztők, nekünk ugyanis mind a régi, mind pedig az új böngésző verziókon tesztelnünk kell a webhelyeinket. Fel is merül rögtön a kérdés: lehet-e egymás mellé telepíteni egy böngésző régi és új verzióját?

Internet Explorer

Az Internet Explorer továbbra is szorosan integrálódik az operációs rendszerrel, ezért nem lehet belőle két verziót egymás mellé telepíteni. Szerencsére azért vannak megoldási lehetőségek, hogy ne kelljen több gépet alkalmaznunk a teszteléshez.

Windows Virtual PC

A Windows Virtual PC ingyenesen letölthető a Microsoft honlapjáról, amivel gyakorlatilag egy virtuális gépet futtathatunk. Ez a szokásos mellett egy teljesen másik operációs rendszer lehet, amibe telepíthetünk más verziójú IE-t. A gazda és a vendég virtuális gép olyan szépen integrálódik egymással, hogy a vendég virtuális gépen futó böngészőnkre mutató parancsikon beépülhet a gazda operációs rendszer Start Menüjébe, így észre se vesszük, hogy a programmal együtt egy másik operációs rendszer is elindul a háttérben.

A módszer ingyenes, működik mindenféle böngészővel, tesztelésnél az a hátránya, hogy a böngésző ablakok nyitása-csukása bizony nem megy villámgyorsan.

Internet Explorer Developer Toolbar

Az Internet Explorer már nagyon régóta tartalmaz egy fejlesztői eszközsávot, amely az F12 billentyű lenyomásával hívható elő legkönnyebben (katt a nagyobb képért):

Más IE verzió szimulálása az IE Developer Toolbaron

Itt van egy olyan lehetőség, hogy meg lehet változtatni a böngésző belső működését, most már IE 7, 8 és 9 verziók közül lehet választani, sőt még a Document Mode-ot is át lehet állítani. Tapasztalataim szerint ez kiválóan működik, hiteles, a szépséghibája az, hogy mindig elfelejtem, hogy éppen mire állítottam be utoljára, és nagyon oda kell figyelnem, hogy éppen milyen verzión tesztelem az oldalt. Ez persze az én csökevényességem, ettől függetlenül a módszert merem ajánlani mindenkinek.

Microsoft Expression SuperPreview

A Microsoft Expression termékcsaládnak része a SuperPreview, ami arra képes, hogy az oldalunk elrendezését megmutassa különböző böngészőkben. A megjelenítés sajnos nem interaktív, főleg CSS-t és site buildinget tudunk vele jól tesztelni. Egymás mellett jeleníti meg az oldalt több böngészőben és össze tudjuk hasonlítani a megjelenést (katt a nagyobb képért):

Expression SuperPreview

Nagyon kiváló eszköz annak a kiderítésére, hogy milyen eltérések lehetnek az oldal megjelenítésével kapcsolatban az egyes böngészőkön. Bár van belőle ingyenes önálló verzió is, a teljes többet tud: nem csak az IE-t ismeri. Nálam például ezeket a böngészőket kínálta fel (bár nálam IE9, FF 3.6 és 4, Opera és Chrome van telepítve) (katt a nagyobb képért):

A SuperPreview által felismert böngészők

Kicsit elszomorodtam, hogy a Firefox 4 nem támogatott, az Operának pedig nyoma sincs. Örömteli viszont, hogy előkerült a Safari, miután feliratkoztam a még bétában lévő online szolgáltatásra. Ez ingyenes és azt tudja, hogy valahol a felhőben végzi el az oldal renderelését sokféle böngészőben. Hát az a “sok” most éppen ennyi (katt a nagyobb képért):

Expression SuperPreview online services

A kezdeményezés mindenképpen dicséretes, de nem érzem benne azt a dinamikus fejlődést, amitől elkezdeném nap mint nap használni.

IETester

Az IETester ingyenesen letölthető kis program, ami nem kis hekkeléssel eléri, hogy egy programon belül egymás mellett futtathassunk IE 5.5, 6, 7, 8 és 9 verziókat (katt a nagyobb képért):

Az MSDN Kompetencia Központ honlapja IE 6 alatt IETesterben

Ez azért nem kis feladat, le a kalappal a programozó előtt. Sajnos a megoldás nem tökéletes, a főbb dolgok működnek, de egyes apróságok nem és ráadásul néha el is száll a program. Gyors tesztelésre kiváló, de azért 100%-osan nem bízom benne.

Firefox

A Firefox szerencsére sokkal egyszerűbb eset, mint az IE, mert lehet két verziót egymás mellett egy gépen futtatni. Ez kell hozzá:

  1. Külön mappába kell telepíteni a régi és az új verziót, nem szabad engedni az upgrade-et.
  2. Célszerű létrehozni önálló user profile-okat a régi és az új verzióhoz, hogy még véletlenül se keveredjenek a beállítások.
    • Ehhez elindítottam a Firefox User Profile Managert: firefox.exe –p –no-remote
    • Készítettem két felhasználói profilt:
      Firefox felhasználói profilok
  3. Át kell írni a Start Menüben a parancsikonokat: firefox.exe –p profilnév -no-remote
    Célszerű átírni a Start Menüben a mappák neveit is, illetve Firefox 4 esetén is létrehozni a Safe Mode parancsikont, aminél a parancssor végére egy –safe-mode kapcsoló kell.

Ez hiba nélkül működik, annyi szépséghibája van, hogy a régi és az új verzió ikonja pontosan ugyanúgy néz ki a tálcán, figyelni kell, hogy hova kattint az ember fejlesztés közben.

Mivel a két verzió más-más beállításokat használ, ezért természetesen a plugineket külön kell telepíteni mindkettőhöz (Firebugból például más verziót is kell telepíteni). Ha esetleg valami annyira nem akar működni, hogy el sem indul a böngésző, akkor célszerű megnézni Safe Mode-ban a telepített plugineket (nálam például valahogy a telepítés után rögtön bekerült a Toshiba Automatic Password Input in Fx 1.0 pluginje, ami már elindulni sem engedte a böngészőt, ki kellett kapcsolnom).

Chrome

A Chrome az egyik legfájdalommentesebb a sok böngésző közül, mert a felhasználó profil mappájába települ és észrevétlenül frissíti magát. A frissítést a Windows Task Scheduler vezérli, óránként nézi meg, hogy van-e újabb verzió és automatikusan telepíti is azt. Így igazából még sosem akartam két Chrome verziót telepíteni egymás mellé, mert minden felhasználó gyorsan átáll az új verzióra.

Opera és Safari

Az Opera és a Safari side-by-side futtatásával nincsenek tapasztalataim, ha nektek van, kérlek írjátok meg ide hozzászólásként. Köszönöm!

JavaScript és jQuery szerszámosláda

Néhány szubjektívan válogatott eszköz, technológia és módszer, ami csillapíthatja a JavaScript fejlesztéskor fellépő kóros WTF tüneteket:

jQuery – http://jquery.com/

Alapvető függvénykönyvtár, ezzel van minden, nélküle csak a nagy büdös if(ie). Ettől lesz a JavaScript produktív és böngésző független. Már van belőle 1.5 verzió, ne higgy annak, amit a Studio új projekt létrehozásakor beletesz a projektbe.

Itt egy tömör bevezető hozzá: Vlad Azarkhin: The magic of jQuery

jQuery Code Snippets for Visual Studio 2010 – http://jquerysnippets.codeplex.com/

131 code snippet a VS 2010-hez, amivel a tipikus jQuery kódrészletek emberi idő alatt megírhatók. A lényeg mindössze 25 másodpercben: http://screencast.com/t/YjUyNDVjZD

jQueryUI – http://jqueryui.com/

Pár hasznos vezérlő [vezérlő JavaScriptben, na persze] (accordion, autocomplete, button, datepicker, dialog, progressbar, slider, tabs) interakciók (draggable, droppable, resizable, selectable, sortable) és animációk.

jQuery jGrowl plugin – http://stanlemon.net/projects/jgrowl.html

jQuery kiegészítő, segítségével egyszerűen lehet színes-szagos, ám szemet és orrot nem facsaró üzeneteket küldeni a felhasználónak.

jQuery Templates plugin – http://api.jquery.com/category/plugins/templates/

Bár még csak bétában van, ez üt rendesen: kliens oldali adatkötés. Megmondod az adat objektumot és a HTML template-et és ő renderel belőle DOM fát. Sőt, egy renderelt DOM objektumhoz meg tudja mondani, hogy milyen adat objektum tartozik hozzá!

A szintaktika még képlékeny, de a képességeiről ez egy jó bevezető:
http://stephenwalther.com/blog/archive/2010/11/30/an-introduction-to-jquery-templates.aspx

QUnit – http://docs.jquery.com/Qunit

Unit tesztelés JavaScriptben, mert persze azt is lehet. Nem kifejezetten puszipajtások a jsTestDriverrel, ami böngészők meghajtására és automatizált tesztfuttatásra használható, inkább Hacsek és Sajóként egészítik ki egymást: http://code.google.com/p/js-test-driver/

Rangy – http://code.google.com/p/rangy/

Hasznos kis osztályfüggvénykönyvtár, megoldja a kurzor mozgatás és kijelölések kezelésének böngészőfüggetlenítését. Még gyerekcipőben jár, de már nagy segítség, ha ilyen feladatokkal szembesülsz.

log4javascript – http://log4javascript.org/

Kliens oldali naplózásra használható függvénykönyvtár.

Íme, az 1 oldalnyi tudnivaló:
http://log4javascript.org/docs/quickstart.html

Objektum orientált JavaScript

Nos, a JS nem objektum orientált. Legalábbis nem klasszikus értelemben. Nincsenek benne igazi osztályok, viszont benne nagyjából minden függvény, objektum és tömb is egyben. Ha elég perverz vagy, akkor ennyiből le tudod vezetni az OOP mantrát.

A teljes OOP ritkán kell, viszont van pár haladóbb JS mumus, amivel praktikus megismerkedni, mielőtt kiugrik a szekrényből. Ez segíthet elindulni: http://www.slideshare.net/djsipe/object-oriented-javascript-presentation

JSON

Ha ismered a JavaScriptet, akkor a JSON nem fog újdonságot jelenteni: egyszerű objektum sorosítási szintaktikáról van szó. Ha érdekel az elmélet, itt a specifikáció ékes anyanyelvünkön: http://json.org/json-hu.html Talán egy fokkal egyszerűbb, ha rápillantasz erre a példára, magáért beszél: http://www.json.org/example.html

HTML 5 data- attributes

Ez egy elég bizarr rész a HTML 5 specifikációban, az egyetlen szerencséje, hogy visszafelé teljesen kompatibilis. Arról szól, hogyan pakoljunk HTML attribútumokba tetszőleges adatot.

Az 1 oldalas kötelező olvasmány: http://ejohn.org/blog/html-5-data-attributes/

És mindez a fotelból ülve, akarom mondani jQuery-vel: http://api.jquery.com/data

VS JS IntelliSense

Az IntelliSense nélkül megáll az élet a Visual Studioban. Ez egy olyan drog, amire aki egyszer rászokott, nem tud leszokni. Előre szólok, hogy JS fejlesztésnél garantáltan lesznek elvonási tünetek. Szerencsére lehet a JavaScript kódhoz is XML kommenteket írni, amit az IntelliSense támogat is. Itt írják le a használatukat tömören: http://weblogs.asp.net/bleroy/archive/2007/04/23/the-format-for-javascript-doc-comments.aspx

Amire vigyázni kell:

  • Nem tökéletes az XML kommentek feldolgozása és főleg nem hibatűrő. Ha elrontasz valamit, megszűnik a JS IntelliSense, mindenféle hibaüzenet nélkül. Persze néha akkor is leáll, ha mindent jól csinálsz Arc nagy mosollyal
  • Vannak bizonyos nyelvi elemek, amiket nem támogat, például a prototype-hoz írt XML kommentek többnyire nem jelennek meg.
  • Praktikus lenne, ha a visszatérési típust a returns blokkban megadva utána felkínálná az adott típus tulajdonságait. Na ez többnyire nem működik, sőt épp ellenkezőleg, ha a Studio ki tudná találni, hogy mi a visszatérési típusa egy függvénynek, a returns type=”akármi” elemmel el lehet venni az eszét. Ezt inkább kerüljük.

VS JScript Editor Extensions – http://visualstudiogallery.msdn.microsoft.com/872d27ee-38c7-4a97-98dc-0d8a431cc2ed/

Ez egy VS 2010 bővítmény, amiben hiszünk, hogy jobbá teszi az életünket. Kicsivel praktikusabb, mint egy tibeti imamalom. De csak kicsivel.

Apropó VS 2010 bővítmények: a Productivity Power Tools tényleg hasznos, van annyi funkciója, hogy éveken keresztül minden nap tanulhatsz valami újat: http://visualstudiogallery.msdn.microsoft.com/d0d33361-18e2-46c0-8ff2-4adea1e34fef

Firebug – http://getfirebug.com

A webfejlesztők svájcibicskája, minden kódtúró MacGyver zsebében ott a helye. Pontosabban a Firefoxában, ugyanis oda épül be. Amire a leggyakrabban szükséged lesz:

FireQuery – http://firequery.binaryage.com/#screencast

A Firefox pluginjének pluginje, kiegészítő a kiegészítőhöz, ugyanis a Firebug képességeit terjeszti ki. Például közvetlenül lehet vele az oldalon jQuery selectorokat futtatni, ami sokkal gyorsabb, mint alertekkel kísérletezni, hogy vajon ráhibáztál-e egy selector kifejezésre. A fenti URL-en lévő moziból minden kiderül.

 

Gombok kiszürkítése Firefoxban

Azt hiszem jogosan várjuk el egy szoftver felhasználói felületétől, hogy ha egy gombot nem lehet megnyomni, akkor ez messziről ordítson róla. Sajnos ez a Firefoxban megjelenített weboldalakon nem mindig van így.

Legyen két teljesen egyszerű gombunk, ám az egyik legyen disabled:

  <asp:Button runat="server" Text="Meg lehet nyomni" />
  <asp:Button runat="server" Text="Nem lehet megnyomni" Enabled="false" />

Ezek teljesen jól jelennek meg IE8-ban és FF 3.5-ben, a disabled gomb szép szürke:

Enabled és disabled gombok Firefoxban stílus nélkülA bajok akkor kezdődnek, ha elkezdünk virgonckodni és ráakasztunk a gombra valamilyen dizájnt, például ezt a CSS osztályt:

  .button
  {
    background-color: Orange;
    color: #940000; 
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 0.8em;
    border: solid 1px #afafaf;
    cursor: pointer;
    padding: 3px 5px;
    border: solid 1px #d5d5d5;
  }

Innentől kezdve a nyomorult Firefox nem törődik azzal, hogy a gomb enabled vagy disabled, mindegyik úgy fog kinézni, ahogy azt a CSS osztályban megadtuk: Enabled és disabled gombok Firefoxban egyedi stílussal, azonosanAz egyik megoldás nyilván az, hogy miközben szerver oldali kódból vagy JavaScriptből állítgatjuk az enabled állapotot, manuálisan gondoskodunk a gomb megjelenéséről is. Ennél egy nagyságrenddel jobb megoldás egy másik CSS osztály felvétele, ami csak akkor alkalmazódik, ha a gombot letiltottuk. Ehhez tudnunk kell, hogy a szerver oldali Enabled=”false” kliens oldalon disabled=”disabled” lesz:

  .button[disabled="disabled"] /* Firefox workaround */
  {
    background-color: LightGray;
    color: Gray;
  }    

Íme az eredmény:

Enabled és disabled gombok Firefoxban egyedi stílussal különbözően

Kiváló példa arra, hogy egy dizájner mivel tud hónapokig “szöszmötölni” egy projekten, illetve, hogy mennyire nem attól lesz valaki jó dizájner, hogy van grafikai érzéke és ismeri a CSS-t, hanem hogy mennyi tapasztalata van és mennyire figyel a részletekre.

Ráadás (2009.08.25.)

Úgy látszik ez sem tökéletes, ugyanis ha JavaScriptből állítom a disabled tulajdonságot, akkor FF-ban “”, “true” vagy “false” értéket vesz fel, amire persze a fenti disabled=”disabled” nem illeszkedik. Gincsai Gábor barátom szerint a .button:disabled { color: Gray; } osztály felvételével ez is kezelhető.

Technorati-címkék: ,,,

Firefoxban nem jön be az oldal

Webfejlesztés közben nagyon gyakran kerül elő az a probléma, hogy az alkalmazásunk Internet Explorer alól tökéletesen megy, Firefoxban viszont nem jelenik meg semmi. Olyan, mintha nem működne a névfeloldás, vagy a böngésző nem találná meg a szervert. Még ilyen üzenetet is kaphatunk:

Kapcsolat megszakítva

A kiszolgálóhoz való kapcsolat alaphelyzetbe állt az oldal letöltése közben.
A hálózati kapcsolat megszakadt a kapcsolatfelvétel közben. Próbálja meg újra.

Ez különösen Vistán gyakori, előfordulhat a Visual Studio fejlesztői webszerverével, vagy akár IIS-sel is.

Létezik egy Firefox cannot load web sites but other programs can című Mozilla tudásbázis cikk, ami több megoldási lehetőséget is felsorol, nálam eddig mindig az IPv6 kikapcsolása volt a megoldás:

  1. Irány az about:config oldal.
  2. Keressük ki a network.dns.disableIPv6 beállítást és az értékét állítsuk true-ra.
  3. Indítsuk újra a böngészőt.

IPv6 kikapcsolása Firefoxban

Ugyanezt el lehet érni, ha a hosts fájlból töröljük a ::1 sort, de az az összes alkalmazásunkat érinteni fogja, nem csak a Firefoxot.

Technorati Tags: ,,