Egyperces: Több soros stringek JavaScriptben
Mivel a JavaScript automatikusan zárja a sorokat ; jellel, így a PHP-ban megszokott több soros stringek nem fognak működni.
Ha egy hosszú stringet az olvashatóság kedvéért több sorba szeretnénk törni, PHP-ban simán nyomunk egy entert:
<?php
$string='Ez itt egy
nagyon hosszú
string';
JavaScriptben ez nem működik:
var str='Ez itt egy
nagyon hosszú
string';
Hiba. Mivel a JS minden sor végét automatikusan zárja.
Teljes bejegyzés
Gyorsítsunk az oldal betöltésen
A közösségi portálok gyors és egyszerű kódokkal segítik a szolgáltatásaik beágyazását weboldalunkba. Egyszerű copy-paste (másolás-beillesztés) az egész. De ezzel van egy aprócska probléma. Minden ilyen közösségi oldal JavaScript kódot használ, ennek a "gördülékeny" megoldásához. Persze van lehetőség iframeben beilleszteni vagy egyéb finomságokkal játszani, de vegyük az átlagos esetet, mikor egyszerűen a Facebook HTML5 kódját használjuk. Tehát ehhez mindenképp kelleni fog egy JS kód is.
A JavaScript használata egyetlen gondot fog nekünk okozni, mégpedig, újabb lekéréseket fog indítani a céloldal felé. Ezzel növeli a betöltési időt, még több HTTP lekérést indít. Tehát egyetlen szóval: rossz.
Mi a jó megoldás? Használjuk helyette a megosztás linkeket.
Miért jó ez nekem? Most persze szintén a Facebookból indulok ki, és a saját megfigyeléseimből. Tehát, ha megosztasz valamit a Facere, akkor az a hírfolyamodban egyből megjelenik, hogy "XY shared a link". Végig görgetem a hírfolyamot és sehol sem látok olyat, hogy "XY liked a link", ez persze a chat felett jelenik meg a Tickerben. Arra nagyjából hetente 1x nézek rá, amikor az online ismerőseim között keresem azt, akire rá szeretnék írni.
Teljes bejegyzés
Egyperces: CSS - object-fit
Elég sokat gondolkodtam rajta, hogy mikor mondjuk csinálok egy képgalériát, vagy csak simán egy webshop termék oldalát, meg tudom-e oldani valahogy, hogy a programnak ne kelljen 1000 különböző képet létrehoznia.
Volt egy oldal, ahol a grafikai tervek miatt 16 különböző méretarányú képet kellett használni. Tehát írtam egy php scriptet, ami mindig legenerálja - ha nem létezik - a megfelelő méretű képet. Ezzel eddig nincs is gond, mert a képek a méretezés miatt csak néhány KB helyet foglalnak, de azért sok kicsi sokra megy.
Most találtam rá nemrég a CSS egyik szolgáltatására az object-fitre.
Teljes bejegyzés
Egyperces: I am The Fold
Pont múltkor beszélgettem egyik ismerősömmel, aki olyan megrendelést kapott, hogy az oldal tetején és alján is maradjon egy sáv, de a teljes szélesség ki legyen töltve.
Már akkor ráztam a fejem, hogy ez egy nagy baromság. Az emberek ész nélkül nyomkodják a Windowsos telepítéskor a Next gombot, feltelepítve ezzel 2000 toolbart és 42000 vírust. Nem is ezzel van a baj.
A fő kérdés inkább az, hogy ezt szépen, hogyan lehet megoldani? Egy tapasztalatlan, Next-nyomkodó felhasználónál egy csík marad az oldalból? Hogy fog ez egyáltalán jól működni?
Ha belegondolunk abba, hogy a monitorok sem ugyanakkorák, sőt a régi CRT-ket lehetett orrba-szájba állítgatni. Ha nem zavart a 60Hz, akkor egy 14colosból ki lehetett hozni 1280×1024-es felbontást is, holott a normális működés, 85Hz-n 1024×768 volt.
Teljes bejegyzés
Egyperces: Bevezetés
Mivel sokszor van, hogy csak 1-2 mintakóddal vagy néhány sorral le lehet írni egy problémát, így most úgy döntöttem indítok egy "Egyperces" sorozatot is.
Miről fog szólni az "Egyperces" sorozat?Rövid, tömör, gyorsan olvasható, kis problémákra megoldást nyújtó leírásokról. Nem fogok kilométereket írni, a legtöbb bejegyzés csak néhány soros lesz, maximum néhány sornyi, rövid mintakóddal.
Teljes bejegyzés
Egyperces: CSS mértékegységek
Már írtam hosszabban néhány relatív mértékegységről, mint például a vh és vw használatáról vagy a rem-ről.
Sokan bele sem gondolunk szerintem, hogy hány különböző méretezési lehetőség van a CSS-ben. Én is a napokban futottam bele egy érdekes oldalba, ahol összeszedték és vizuálisan ábrázolták is mindegyiket.
A CSS Ruler névre keresztelt oldalon megtaláljuk ábrázolva az összes relatív, abszolút és látótérhez százalékos mértékben számolt értékeket és akár játszhatunk is vele:
Teljes bejegyzés
Bezár a DicsakBuksi
Hivatalosan is bezárom a DicsakBuksit. Sajnos nem tudtam teljesíteni vele azt a szintet, amit régen kitűztem. Persze, tudom, hogy a semmiből nem lehet várat építeni. Emiatt is hoztam meg a döntést, hogy a Buksinak sajnos mennie kell.
Miért döntöttem így?Nulla háttérfinanszírozással indult az oldal. Egyedül a domain került pénzbe. Ezt az oldalt azért csináltam, hogy kipróbáljam magam ebben a műfajban is. Sajnos így is későn léptem a csatatérre. Már akkor, mikor el kezdtem gondolkodni azon, hogy megcsinálom, működött a NemKutya, akkor élte fénykorát a Napiszar.
Ezután mindenki nyitotta sorra a viccoldalait. Sajnos ez megváltoztatta a teljes "műfajt". Már az volt a lényeg, hogy minél több reklámot, megosztást generáljanak az oldalak. Jöttek a rejtett like-gombok, a kötelező megosztás, a kötelező like. A pofátlan oldalak 1-2 nap alatt több ezres követői tábort szereztek maguknak.
Teljes bejegyzés
Mercurial: Auto Commit
Mivel legtöbb helyen kérik, hogy ismerj legalább egy verziókövető rendszert, így én is próbálkozom vele. Az egyetlen gondom az, hogy itthon nem sok értelme van a verziókezelésnek, kivéve az, hogy látom, milyen irányba halad a programom.
A verziókezelést főleg nagyobb projektekben, több programozó esetén érdemes kihasználni. Régen mindenki CVS-t, SVN-t használt, amit jelenleg felváltott a Git vagy a Mercurial. Nyílt forrású (open-source) projektekben kifejezetten a Git nyer. A Github megszületésével pedig mondhatjuk, hogy teljesen átvette a hatalmat. Tehát, kérik is, hogy tudd használni, főleg a projektek fejlesztésénél.
Teljes bejegyzés
Bootstrap vs. Foundation
A Bootstrap és a Foundation talán mondhatjuk, hogy a legelterjedtebb CSS-keretrendszerek a weben. Személy szerint eddig a Bootstrapet támogattam, mivel már a 2.3.2 idején, vagy még lehet előtte, megismerkedtünk. Aztán, mikor kijött a 3-as, első körben baromira nem jött be. Még a Google+ fiókoman is hangot adtam ennek, pedig ritkán szoktam bármit is posztolni.
Persze, csak a már megszokott 2.3.2 miatti kirohanás része volt. Egyszerűen nem láttam át az új gridet. De még utána max 1-2 oldal készült 2-ben. Szépen lassan megszoktam a 3-at, sőt...
Tehát, elkezdtem tanulmányozgatni a 3-as Bootstrapet, de valahogy mindig kevésnek bizonyult. Akárhogy designolod, mindig megvan az a tipikus, 1-2 kattintás után érezhető Bootstrap-feeling. Elkezdtem vadászni a neten és ekkor találtam rá a Foundation-re. A ZURB által készített keretrendszer első ránézésre kicsit többet adott, mint a konkurencia. Tehát akkor kicsit összefoglalom, hogy melyik rendszer pontosan mit ad hozzá az élményhez. Persze, mint mindennek ezeknek is megvan a saját előnye és hátránya. Egyik rendszerhez sem húzok igazán, így talán reálisabb képet tudok felállítani.
Teljes bejegyzés
Kérések feldolgozása - avagy a Router Class
Egy dinamikus oldalnál elengedhetetlen, hogy valahogyan feldolgozzuk a kéréseket. Bevett szokás, hogy a .htaccess fileban a nem létező mappákra és file-okra csinálunk egy átirányítást az index.php-ra. Ezután millió és egy különböző megoldás van arra, hogyan dolgozzuk fel a kapott információt.
Jelenlegi módszerAmit most használok, full egyszerű, amit már leírtam a Harc a cache-sel 1. részben. Ennek lényege, hogy adatbázisban a menüpontoknak 3 különböző értéke lehet: type, file és link. Tehát bejön a kérés a szerverhez, majd egy függvény mindenképpen kiveszi a linkből a nem oda illő karaktereket, ékezetmentesít, és minden nem megfelelő karaktert --re cserél. Ezután feldarabolja az URL-t a / jelek mentén. Az első mindig a feldolgozó egység neve. Ezt keresi meg az adatbázisban.
Teljes bejegyzés