Mała rzecz a cieszy
14 Jun 2009
filtr
folksr
tagi
Kolejny dodatek do Folksr-a to filtr tagów. Działa ograniczająco (spójnik AND) – im więcej tagów zaznaczysz tym krótszą listę otrzymasz. Tak jak w Google.
Przy okazji zmiany przerobiłem również sposób sortowania. Teraz działa bez przeładowania strony, wykorzystując Ajax. Na marginesie, czy wspominałem już, że JavaScript to genialny język? ;-)
- Wasacz
Oh my lord, język jest genialny, ale twój kod jest po prostu paskudny… ;/
Wrzuciłeś kobylaste jQuery tylko po to, żeby wywołać jedną metodę, a do tego nie wykorzystałeś sposobu na podawanie argumentów dla wywołania, tylko bawiłeś się w str.replace.
Dalej, czemu ten kod jest w środku dokumentu? Wywoływanie funkcji inline, tego się tak od dawna nie robi! I wyrzuć te CDATA, są zupełnie niepotrzebne, bo wysyłasz MIME text/html.
A już ciarki mnie przechodzą na widok zmiennych globalnych, przypisywania zdarzeń historyczną metodą window.onload, a chyba najgorsza jest funkcja centerPage – o CSS zapomniałeś? ;/
No i ten PNG fix dla IE6 – selektor gwiazdki, na litość! Przecież zarżniesz tym IE6 po prostu, wywołujesz ten skrypt na *każdym* elemencie!
Wybacz, ale takie herezje, że musiałem to napisać.- stronger
Wasacz, dzięki za uwagi. Niech no ja się z nimi rozprawię.
Wrzuciłem kobylaste (?) jQuery tylko na jednej stronie dokładnie po to, by nie wrzucać mojego kobylastego Ajaksowego narzędzia. Popatrz także na nagłówki - wszystkie potrzebne elementy mają ustawione Expires. Twoja przeglądarka nawet nie poprosi o jQuery przy następnym odświeżeniu strony. Ładujesz ją tylko raz i nie pytasz o HTTP 304.
Jaką zbrodnię popełniam używając str.replace? Zgaduję, że taką samą jak podczas używania document.getElementByXX
Dalej, co jest nie tak z wywołaniami skryptu w środku dokumentu? O ile wiem jest to zupełnie poprawne. A wywołenie funkcji inline mogę zastąpić przypisaniem eventu, ale powyżej narzekałeś na obecność jQuery. Ręcznej funkcji do dołączania zdarzenia rzeźbić mi się po prostu nie chce. Poza tym, mamy 2009 rok.
window.onload jest wygodne i działa, gdy jest dokładnie jedna funkcja, którą chcę uruchomić po załadowaniu. Zgadzam się, że przy większej ilości callbacków to nie zadziała, ale spokojnie - to ja kontroluję cały kod i wiem kiedy przyjdzie potrzeba to zmienić.
pageCetner: Wasacz, stawiam ci browara, a nawet dużą flaszkę ulubionego trunku jak mi to przepiszesz w CSS tak, by pływającya kartka pozycjonowana absolutnie była przesunięta względem głównego kontenera o stałą wielkość, podczas dolny pasek równał do dołu strony gdy dokument kończy się przed clientHeight okna. Całość ma być odporna na zmianę wielkości okna.
Fix dla IE6 - fakt, tu oszukałem. Po prostu wziąłem to, co kiedyś koleżanka zastosowała w pracy. W domu nie mam żadnego z Internet Explorerów, żeby się z tym bawić.
Nie mogę również ukryć, że daleko bardziej niż puryzm W3C interesuje mnie zapewnienie odpowiedniego poziomu funkcjonalności po stronie serwera. Oczywiście, w granicach rozsądku, ale pewnie nikt nie używałby folksera, który waliduje się w 100% przeciwko temu, co ma w doctype, a brakuje połowy funkcji. XHTML nie jest dla mnie religią, a W3C kościołem. Przestrzegam ich wytycznych tylko do tego stopnia, do kiedy inne zadania z listy to do nie zaczynają być ważniejsze. Zazwyczaj zaczynają bardzo szybko. Sory, mając ograniczone zasoby coś trzeba poświęcić. Świadomie poświęcam kod klienta.- D4rky
odświeżenie, odświeżać, odśwież
Co do inline-JS - bo JS nie jest częścią semantyki dokumentu. To jak inline CSS, chodzi o to, żeby twoja strona po wywaleniu <head/> była czystą, łatwodostępną treścią.- rozie
Funkcja fajna, tylko teraz mam pojedynczą kolumnę na kilka ekranów. W pionie. FF 3.0.6 z Lenny'ego plus adblock (ale niczego nie blokuje). I nie mam takich ładnych podkreśleń.
Przydało by się sortowanie po ilości wystąpień taga. I jakieś clear selections by się przydało...- Wasacz
jQuery nawet, jeśli siedzi w keszu, to i tak musi się wykonać. Nie wspomniałeś o sekcji CDATA – wyjaśniam, że w text/html stosowanie tego nie ma najmniejszego sensu, bo nie ma parsera, który to odczytuje. Po prostu jest ignorowane. DOCTYPE też w zasadzie nie robi nic poza przełączaniem compatMode/box modelu, ale jego pozbycie się jest błędem. Brak CDATA – nie.
str.replace i latanie po DOM to nie zbrodnie. Ale skoro metoda pozwala podać parametr (data w formacie JSON), to po co sobie utrudniać życie? Podstawiasz zmienne do łańcucha, a możesz wygodnie podać je jako obiekt. W dokumentacji: <http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype>.
Po pierwsze jest to niewygodne (bo mamy 2009 rok). Zobacz też: <http://perfectionorvanity.com/2006/08/27/nieinwazyjny-javascript-dodawanie-zdarzen/>. Nic tu z rzeźbienia. I rozumiem, podpiąć jQuery i z niego korzystać, ale podpiąć i wywołać jedną metodę? Przecież to nie ma sensu… Nawet biblioteka AJAX nie jest u ciebie do niczego potrzebna, przecież jedno żądane GET to tylko proste sprawdzenie, czy obiektem XHR będzie ActiveX (dla IE) czy XMLHttpRequest (dla reszty z AJAX-em).
Wadą window.onload nie jest tylko ograniczenie do jednej funkcji. Ważniejsze jest (moim zdaniem) to, że odpala się dopiero po załadowaniu całej zawartości, wliczając w to obrazki itd. Trochę stare, ale działające nadal: <http://perfectionorvanity.com/2007/05/22/wykonywanie-skryptow-po-zaladowaniu-dom/>, albo $(document).ready(fn) z jQuery.
Kartka wewnątrz div#main, div#margin albo div#hdr, div z position: relative; (i overflow: visible;, jeśli przypadkiem było inne), wtedy kartka, czyli div#sidebar może być pozycjonowana absolutnie względem div, którego wycentrować można za pomocą marginesu (auto), albo w taki sposób wycentrować wrapper (u ciebie div#main).
Jeśli chodzi o IE6 i PNG fix, to dla teł w CSS i tak nie zadziała, bo z tego co pamiętam, on poprawia tylko obrazki IMG (nie pamiętam dokładnie, mogę się mylić). Najlepszym rozwiązaniem jest po prostu zastosowanie filtru. Pamiętaj o hasLayout.
Krytykowałem kod, a nie ciebie, żeby było jasne ;) Nie jestem purystą W3C, ani ich walidatora (co wiele osób uznaje za równoważne). Tak samo jak w innych językach, zresztą jak wszędzie, kod może być odpicowany, albo być zwykłą zupą (to już skrajności). Pisałeś kiedyś odnośnie PHP, że gardzisz programowaniem strukturalnym (czy którym tam konkretnie, whatever) – to analogiczny sposób postrzegania kodu. I nie sądzę, żebyś był purystą w negatywnym znaczeniu, jakiego użyłeś ;)
Czekam na dalszy rozwój Folksr (a właściwie proszę o ten mój wyśniony JSON/API) ;-)
EDIT: Nie napisałem nic o stopce chyba ;-) Miałem w zakładkach dwa ciekawe linki, ale gdzieś uciekły. W każdym razie Google podpowie (ziew) na „CSS sticky footer”.- Wasacz
I żeby mój komentarz był zrozumiały – odpowiadałem akapitem na akapit, w całości to dość dziwacznie brzmi ;>
- Jajcuś
Wasacz: do reszty nie będę się wypowiadał, ale jeśli dzięki CDATA kod jest well-formed XML, a bez by nie był, to bym zostawił. Nawet, jeśli przeglądarki go w użytym trybie ignorują. „Well-formedness” jest najprostszym testem tego, czy generowany kod XML się przypadkiem nie zjebał i fajnie to mieć jako default. Nie dla przeglądarki użytkownika –– dla siebie i różnych narzędzi.
- Wasacz
> jeśli dzięki CDATA kod jest well-formed XML, a bez by nie był, to bym zostawił
Jajcuś, kod nie jest XML-em ;-) Właściwie to tutaj wraca problem JavaScript wrzuconego bezpośrednio w kod – gdy jest w zewnętrznym pliku problem znika.
Oczekiwanie od SGML-a, że będzie well-formed XML-em przy parsowaniu jest trochę dziwne (pewnie i tak by się na tym odpaliło coś, co by poprawiło ewentualne nieścisłości – bo inaczej sobie tego nie wyobrażam), ale pomijając to wszystko o czym napisałem, to faktycznie – od tej strony bym na to pewnie nie spojrzał ;)
EDIT: Aczkolwiek przy XML-u przydałaby się jeszcze deklaracja XML, więc to i tak nie ma sensu.- Jajcuś
XML to podzbiór SGML, więc nie widzę sprzeczności. XML dodał lepsze uporządkowanie i prostszą weryfikację, więc czemu z tego nie skorzystać? Przeglądarce mówimy „daj se luz i traktuj to jako HTML”, a sami możemy korzystać z zalet XML, dla własnych potrzeb.
Już mniej czepiałbym się walidacji, bo oficjalne DTD od HTML czasem więc uprzykrzają życie (np. to, że <noscript> nie jest dozwolone wszędzie tam gdzie <script/> (i nie mam na myśli <head/>)).- stronger
D4rky, no masz, taki byk... Znam argumenty za stosowaniem czystego semantycznie XHTML-a, tyle że się z nimi nie zgadzam. Po prostu, łatwiej jest wygenerować stronę dla aplikacji WWW oraz API XMLowe w osobnym dokumencie, niż próbować połączyć te dwa odmienne światy w jedną całość. Takie łączenie ani nie uprzyjemnia pisania aplikacji, ani nie ułatwia Tobie dalszego wykorzystania wynikowego dokumentu.
Chcesz API? Powiedz tylko jakie, ja napiszę Ci. Tak jak napisałem eksport profili FOAF oraz XML-owej sitemapy.
Ze stwierdzeniem "semantyczny XHTML" też bym raczej zachowywał ostrożność. Jest on na tyle semantyczny, na ile ma dla Ciebie jakieś znaczenie. Nie jest on natomiast w najmniejszym stopniu semantyczny w sensie Sieci Semantycznej. Ja i Ty wiemy pewnie o co chodzi, ale czasem łatwo przypisać "semantyczności" zbytnią wagę.- stronger
rozie, przeładuj stronę (Ctrl+F5) bo pewnie CSS się skeszował. Sortowanie po ilości wystąpień taga to nie lada sztuczka dla tego, kto będzie projektował UI :-) Ponieważ filtr pozwala na łączenie tagów to nie potrafię wyobrazić sobie jak miałoby to wyglądać. Poza tym licznik tagów masz przy każdym elemencie filtra, więc łatwo sobie kliknąć i sprawdzić co zostało.
Czyszczenie selektora zaraz dopiszę.- D4rky
stronger - powiem tak - zdarzało mi się pisać userjs/usercss, a także boty i parsery. Dobrze napisany kod to zbawienie.
- rozie
Przeładowanie pomogło, dzięki. Resztę zostawiam fachowcom. ;-)
- stronger
Wasacz, dzięki za gaść przydatnych linków. Pewnie nie jedną rzecz można było lepiej zrobić. Patrząc jednak od strony praktycznej "done is far superior than better". Poprawię to i owo w pierwszej wolnej chwili.
Faktycznie nie potrzebuję czekać na zdarzenie onload gdy wystarczy domready. Co do CDATA, to choć nie widzę zastosowania w Folksrze, to muszę przyznać Jajcusiowi rację - sam kod może być traktowany przez przeglądarkę jako text/html, ale poza przeglądarką (np. w jakimś procesie powiązanym z commitem svn) da się znaleźć dla niego uzasadnienie. Parsowanie własnych źródeł nie jest takie rzadkie jak się zdaje.
Względem obejścia z centrowaniem strony - podtrzymuję swoją ofertę. Napisz mi zamienny arkusz i podaj numer ISBN^W^Wnazwę i rocznik a wyślę Ci kurierem prosto pod drzwi :-)
API JSON na razie jeszcze nie próbowałem, za to mierzyłem się z parseDOM. Nie działa jak należy, tj. wstawia do dokumentu, ale traktuje jako nieotagowany tekst. Myślę, że API JSON będzie prostsze.- Wasacz
Napisałem/przepisałem te regułki CSS, o które prosiłeś. Moja pierwsza koncepcja odnośnie stopki okazała się klapą – każda przeglądarka wyrenderowała po swojemu. Rozwiązałem to więc inaczej, korzystając z metody pozwalającej uzyskać kolumny równej wysokości (lol), aczkolwiek nigdy nie przepadałem za tą metodą. Wypozycjonowanie kartki jest banalnie proste, wrzuciłem ją tylko do głównego kontenera (jeśli faktycznie chcesz, aby była w kodzie powyżej nagłówka, to możesz ją przenieść). Sprawdzałem na IE7, IE8, Operze 9, Firefoksie 3 i Safari 4 – wygląda, że jest OK.
<http://stuff.wasacz.net/www/tmp/folksr/>
Natomiast odnośnie tego JSON-a/API/whatever – wystarczyłoby mi chociażby coś na kształt tego: <http://pastie.org/private/ftwdwmb1rc6kdx10dxjzyg>.
Mam nadzieję, że komentarz zostanie dodany, bo Jogger mi nie działa (;- stronger
No no, jestem pod sporym wrażeniem. Hack z anulowaniem paddingów całkiem niezły. Na razie potestuję i dam Ci znać o rezultatach.