Gyakran használt Regexp-ek

Gyakran van szükség a felhasználók által bevitt adatok (pl. html form) ellenőrzésére. Erre rengeteg féle hatékony és kevésbé hatékony függvény áll rendelkezésre az egyes programozási nyelveken. Ezek használatától és hibáitól kímélnek meg minket a regular expression-ök, melyeket szinte minden nyelv értelmezni tud. Az alábbiakban pár általam gyakran használt regexp-et osztok meg veletek:

Magyar dátum formátum

(19[0-9]{2}|[2][0-9][0-9]{2})[/ -.](0?[1-9]|1[12])[/ -.](0?[1-9]|[12][0-9]|3[01])

Idő formátum

^([0-1][0-9]|[2][0-3]):([0-5][0-9])$

E-mail cím

^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+.([a-zA-Z]{2,4})$

Jelszó

[0-9a-zA-Z]{6,32}

Javascript IE vs. domready Mootools

Megint egy kis IE-s szívás, hátha másnak is lesz/volt:

Ha HTML oldalunkon elhelyezünk bármilyen elemet id=”loaded”-al, akkor nem fog menni a Mootools-os domready event:

window.addEvent('domready', function() {});

TinyMCE+AJAX Miért csak másodszorra..

A tinymce kedves kis what you see that you suck editorát integráltam egy admin felületbe, ami nagy részt ajax alapú.. A request során csak második alkalommal küldi el a maga által generált kódot.. (más böngészőket nem próbáltam, mert nem érdekel :), na jó nem, csak mert lusta voltam..)
Ennek az az oka, hogy a TinyMCE egy page unload eseményt használ a kód visszírására az eredeti textarea-ba.. A TinyMCE ugyanis valójában egy rakat gomb meg egy iframe-amiben a szerkesztendő kód generálódik. Ajaxos kérés esetén ez az esemény nem következik be, ezért nekünk kell meghívnunk a megfelelő függvényt (neve: triggerSave)!

tinyMCE.triggerSave(false,true);
// ide jön a send();

PHP Ékezetes karakterek eltávolítása UTF8 alatt.

Ha UTF-8 kódolást használunk (én mással nem is bajlódok), belefuthatunk abba a hibába, hogy az strstr() php függvény nem működik helyesen. A függvény feladata az lenne, hogy a felsorolt ékezetes karaktereket ékezet nélkülire konvertálja. Ennek az az oka, hogy utf8 alatt az egyes karakterek hossza nem egyezik meg a lecserélendőével. A függvény pedig pontosan ott keresi a felsorolásban a helyettesítő karaktert, ahol a lecserélendőkben találta. Sajnos ez a fv. alkalmatlan ezek után utf 8 szövegek konvertálására.

Használjuk helyette az str_repleace() függvényt!! 2db tömbbel párosítva (az egyszerűség kedvéért egy vesszővel elválasztott karaktersorozatot adunk meg, melyet explode()-függvénnyel tömbbé alakítunk) a következő képpen:

$szoveg="árvíztűrő tükörfúrógép"
$mit = explode(",","á,é,í,ő,ő,ó,ü,ű,ú");
$mire = explode(",","a,e,i,o,o,o,u,u,u");
$szoveg = str_replace($mit, $mire, $szoveg);

Ezzel a módszerrel nem fogunk hibás karaktreláncokat kapni UTF-8 kódolású oldalak esetén sem.

PHP mod rewrite IP cím szűréssel

Akadt egy olyan munkám, amit elég nehézkes lett volna autentikáció mellett tesztelni, és gyakran előfordult, hogy le kellett állítani a szolgáltatást és kicsit bütykölni rajta. A pár órás kiesés nem jelentett gondot, de mégsem szerettem volna, ha mások is látják a siteot amíg javítgatok, ezért egy IP cím alapú mod rewrite mellett döntöttem:

# MOD REWRITE INDITASA
Options -MultiViews +FollowSymLinks
RewriteEngine On

# MINDENKIT ATIRANYIT A FEJLESZTESALATT.HTML-RE HA NEM EZ AZ IP CIME
RewriteCond %{REMOTE_ADDR} !89.133.252.253 [NC]
RewriteRule !fejlesztesalatt.html$ fejlesztesalatt.html [R=307,L]

Ez az egész kód nem egy nagy dobás, de gyakran szükség lehet rá, gondoltam megosztom veletek Érdemes a .htaccess fájlunk elejére rakni és kikommentelni a második részt, ha azt akarjuk, hogy mások is elérjék az oldalt.

IE6 Mootools Accordion bug

Ha IE6 alatt hibásan/nem adjuk meg a DOCTYPE-ot, akkor az Accordion plugin error mentesen, de hibásan fog működni. Konkrétan egymás alá helyeződnek el az element panelok és nem csúsznak egymás fölé.. Nah ezt jól megmondtam, mindegy, akinek ilyen baja van, úgyis tudja, miről beszélek..

A megoldás tehát a helyes doctype! Aki nem tudja mi az, sürgősen kattintson a linkre és nézzen szét a W3C (The World Wide Web Consortium) weboldalán!

CSS Reset - alapértelmezett formázások eltűntetése

Akik sokat foglalkoznak html+css oldalakkal és nem csak ie alá optimalizálnak(?), és azoknak akik szeretik tiszta lappal kezdeni..

Az alábbi css kód segítségével az összes alapértelmezett html tag default style-ját el lehet tűntetni..

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}

Ajax vs SEO - 1. rész

Kedves gyerekek! Ma arrol fogok mesélni nektek, hogy hogyan lehet a HTML király legkisebb fiát, AJAXocskát végre férfivá nevelni, hogy megküzdhessen a nagy Google sárkánnyal. Jól van, jól van.. tudom, idióta képzavarok sokasága az előző mondat. De kellett valami bevezető és ma ilyen elborult napom van. A továbbiakban megpróbálok tárgyilagos lenni.. Előre bocsátom, hogy nem fogok ide kódrészeteket másolgatni, csak leírok egy ötletet! Legyen mindenki kreatív

Adva van:
1 db. .htaccess amivel rewriteolunk
1 db. index.php amin az ajax-os tartalom megjelenik
1 db. ajax.php ami felfolgozza az adatokat
1 db. mysql adatbázis sok sok adattal
1 db. ajax.js ami az ajax kommunikációt biztosítja
1 db. sportszelet amit miközben írom a cikket megeszek

Probléma:
Gugli barátunk mint olyan nem ismeri a javascriptet. Nem kicsit, nagyon! (Hál’ Istennek!) Mivel a guglirobot ami végigkarmolja oldalunkat, nem futtaja le a scriptecskénket ami az ajax response tartalmát kihánnya az index.php valamely div-jébe. Magyarán szólva a Gugli semmit nem fog föl abból, amit mi ajaxal tárunk a világ elé.

Ötlet!
Csináljunk úgy, mintha az ajaxos tartalom egy különálló oldal lenne.

Hogyan?
Induljunk ki abból, hogy a Google hogyan karmolássza az oldalainkat.. Tudja valaki a kulcsszót? Nos? Igen, igen ott a hátsó sorban! Az az! Igen, pontosan! Linkek a helyes válasz! De mi a fenét kezdjünk mi egy linkkel. Egy “virtuális hidat” fogunk képezni az ajaxos és a normál tartalmunk közt. egyetlen linkre van szükségünk az oldalon, ami elvezeti Gugli bácsit a mi ajaxos kis motyónkhoz. Tehát írunk valami ilyesmit:

xhref="http://www.enoldalam.com/ajaxos_motyo/" mce_href="http://www.enoldalam.com/ajaxos_motyo/"

De mi van az ajaxos_motyo mappában, kérdezi az avatatlan webprogrammer. Nos semmi, ugyanis nincs ilyen mappa..
Itt lép be a képbe a mi jó öreg mod_rewrite barátunk!. Hogy hogy is működik mindez, arról itt! (nem olvashatsz )! Hogy tiszta legyen a kép, meg lehetne oldani mod rewrite nélkül is a dolgot, de ha már SEO akkor legyen SEO, nem igaz?

http://www.enoldalam.com/ajaxos_motyo/hulyesegek/a_legnagyobb_huyleseg.html
http://www.enoldalam.com/ajaxos_motyo/okossagok/a_legbolcsebb_dolog.html

Próbáljuk ilyen vagy ehez hasonló formába rendezni a mysql-ből kinyert adatainkat.. Így jóval nagyobb lesz majd a találati arány..
De most akkor pontosan mivé is rivrájtoljuk ezeket a kéréseket? A site bonyolultságától függően lehet például az index.php vagy az ajax.php egy html, body head ésatöbbivel tunningolt változata is! A lényeg, hogy a kérésekre egy szabványos html oldal érkezzen a mi kis googlink számára, és onnét minél több linken keresztül tudjon tovább karmolászni a siteunk tartalmában, természetesen úgy, hogy az ajaxos_motyo tartomáynban maradjon.

Aztán persze meg kell oldani, hogy a szörfölők, akik a google találati oldalról jönnek, ne az ajaxos motyót nézegessék, hanem az igazi oldalt.. Erről a következő részben fogok csak szót ejteni, mert elfogyott a sportszelet..

getElementsByClass() megoldás

Bizonyára sokan szívnak azzal, hogy csak ID vagy TAG szerint tudnak megtaláln dolgokat a DOM fában.. Hát van erre egy megoldás:

function getElementsByClass(classnev,node,tag) {
var classtalalat = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\s)"+ classnev +"(\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classtalalat[j] = els[i];
j++;
}
}
return classtalalat;
}

A node és tag elemekkel szűkítheted a keresést..

Xhtml Strict és _blank

A napokban fejeztem be egy oldalt, ami css+xhtml technikával készült. Az utóbbi időben figyelek a validálásra, tehát ellenőrzöm az (x)html és css kódot is. Nagy meglepetésemra a linkekben ahol a target=”_blank” szerepelt, errort kaptam. Ennek oka, hogy az xhtml 1.0 strict szabványa nem támogatja az új ablakban megnyíló (_blank, _top, stb..) linkeket. Ezt azzal magyarázzák - és én maximálisan egyet értek vele - , hogy a felhasználó inteligens, és ha rákattint egy linkre, akkor tudja, hogy az tovább viszi egy másik címre, és azt azért teszi, mert annak rövid nevében eszenciált további információkra kíváncsi. Egy szóval nem egy véglény, aki össze-vissza kattogat. Meg egyébként is.. ez az egyik olyan eleme az egész webesdinek, ami rengeteg bizonytalanságot rejt magában.. Mi fog történni ha rákattintok? Új ablak? Csak egy popup? 100 hirdetés? Letölt valamit? Ugye, ugye, nap mint nap aggódik az átlagember (mac felhasználó ott hátul, nem mosolyog!!! , hogy az adott link bevágja a kapásjelzőt (vírusirtót) vagy feltelepít valamilyen free porno plugint, ami majd Pistikének ugrik elő, mikor a Cartoon Network siteját nézegeti.
Egy szó mint száz, nem támogatják a _blankot. Na akkor mit csináljunk?? Maradt a javascript. Alábbiakban közlöm a kódot, ami klasszul megoldja a problémánkat:

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i

FIGYELEM!! Ez a sz@ros code highliter rosszul jeleníti meg az & karaktert!!
Sokat szerintem nem kell magyarázni.. Az oldal betöltődésekor cserél, ezért egyetlen hibája van.. Ha lassan töltődik be a site/ sok a kép rajta, és közben a szörföző kattogat, még nem futott le a script.. Jobbat nem nagyon tudok ennél, de más sem. Lehet próbálkozni!

Mivel a target=”" teljesen kiesik, ezért egy rel=”" paraméterrel helyettesítjük, amelybe a js-ben megadott kulcsszót írjuk.