Dziś, zgodnie z zapowiedzią, kilka informacji na temat mojego najnowszego projektu, który, mam nadzieje i w co bardzo wierzę, przyda się wszystkim z nas.
Update: Już wkrótce podam nazwę projektu. Obecnie pozostaje skończyć pewne 3 opcje i zoptymalizować kod. Premiera jutro bądź w środę. Więcej informacji wkrótce.
Na początek 2 screeny, gdzie nie gdzie celowo zmieniłem nazwę projektu, którą podam w kolejnych postach na jego temat.
W miarę upływu czasu będę aktualizował tę notkę, podając następne informacje.
-
Projekt
February 26, 2008 by admin
-
Drawter.com
by adminPo wielu dniach intensywnych prac wreszcze jest - Drawter! Od teraz budowanie stron internetowych stało się szalenie łatwe!
Aby wprowadzić Was do świata Drawtera, przygotowałem mały, nieoficjalny screencast. Nie pokazuje on wszystkiego, choć zapewne w miarę postępu czasu nauczycie się innych opcji. Oficjalny film powstanie już wkrótce i będzie okraszony głosem lektora.
Przeczytaj również powstające FAQ&HelpPomysł
Idea Drawter‘a powstała po wielogodzinnych rozmowach dwójki webmasterów - Damiana ferrante Wielgosika i Kuby Dez Uczciwka. Stwierdziliśmy, że brakuje na rynku narzędzia, które w ogólnodostępny sposób oferowałoby szybkie i niezawodne rysowanie szkieletu stron internetowych. Pomysł zrodził się z irytacji, którą sprawiało żmudne wpisywanie tagów naszych stron internetowych. Wcieliłem się więc w programistę projektu, a Kuba w grafika. Po kilkumiesięcznych pracach, przerywanych często przez zdarzenia losowe, możemy pochwalić się spełnieniem naszych snów o edytorze idealnym - Drawterem w wersji beta, choć bardzo sprawnie działającej, trzeba dodać.
Co to Drawter?
Drawter (www.drawter.com) to narzędzie uruchamiane z poziomu przeglądarki internetowej, w całości oparte o JavaScript i bibliotekę jQuery. Zamiast wpisywać kod HTML, np. taki:
<div></div>
po prostu rysujemy w nim specjalną warstwę, która odwzorowuje element blokowy div. Po narysowaniu całej strony, otrzymujemy w szybki sposób jej kompleksowy kod HTML. Dzięki temu, po 5 minutach możliwe jest otrzymanie kodu złożonych witryn internetowych!
Drawter umożliwia również dodawanie dla narysowanych warstw stylów, identyfikatorów, klas i innych atrybutów.
Minimalne wymagania
Jako że Drawter korzysta z pełni możliwości przeglądarki internetowej, należy udostępnić jej jak najwięcej zasobów. I tak, absolutnym minimum jest 256MB pamięci RAM i 800Mhz taktowania procesora.
Obsługiwane przeglądarki
Drawter działa na Firefox 2.0.11, Operze 9.24, IE 7, i Safari 3.
Inne
Drawter to, może się wydawać na początku, skomplikowane narzędzie o dużych możliwościach - można w nim tworzyć szablony koncepcyjne dla grafików, jak i pełnoprawne strony internetowe. Wkrótce powstanie oficjalny blog projektu, zmieni się strona główna. Potrzebny jest też samouczek i dokumentacja wszystkich opcji. To już wkrótce, wiedzcie bowiem, że jako pierwsi słyszycie o tym projekcie, jeszcze przed jego całkowitym wdrożeniem. Proszę więc o konstruktywne opinie, zgłaszanie błędów (najlepiej na maila podanego obok!) i pochwalenie się swoimi narysowanymi stronami
Auto float
Warto powiedzieć o dostępnych opcjach generowania kodu. Jedną z nich jest Auto float (Preferences->Auto float). Uruchomiona (czyli aktywna, pokolorowana na czarno) sprawia, że podczas generowania kodu strony, skrypt znajduje elementy, które mieszczą się obok siebie i nadaje im pływanie - czyli float.
Auto sizes
Drugą jest Auto sizes (Preferences->Auto sizes). Ta z kolei pomaga nam odwzorować identyczny układ warstw, jak na rysunku, dzięki stylom position: absolute; left, top, width i height.
Przyszłość
Obecna wersja to Drawter.pro, co oznacza, że do jego obsługi wymagana jest znajomość HTML’a. Na szczęście dla użytkowników, którzy nie mają pojęcia o tej technologii, przygotowywana jest wersja Amateur. Umożliwi ona nawet największemu laikowi stworzenie strony internetowej, jaką sobie narysował i zapisanie jej na serwerze… W drodze jest już natomiast polska wersja Drawtera.pro.
Cały czas szlifuje też kod - proszę więc być w tej kwestii wyrozumiałym - jeśli chodzi o HTML, jak i CSS. Nie zdziwcie się, kiedy ujrzycie różne mało profesjonalne konstrukcje.
Podsumowując, w Drawterze tkwi duża gama możliwości, którą postaram się wykorzystać w dalszych wersjach programu.
-
Drawter Beta 1
by adminPrzed chwilą wypuściłem wersję beta1 - zawiera ona część poprawek, zasugerowanych przez Was, jak i kilka innych usprawnień, które chodziły mi po głowie. Wkrótce druga wersja bety, porządkująca sprawy stylów, atrybutów, dodająca możliwość zmiany tła w postaci koloru czy też obrazka i wiele więcej.
-
Drawter Beta 2
by adminMam przyjemność ogłosić wydanie drugiej wersji Drawtera Pro Beta. Obecna z pewnością ucieszy tych, którzy chcieliby mieć jeszcze większą kontrolę nad wyglądem strony.
Lista zmian:
- dodane skróty klawiszowe:ctrl+1 - Draw Mode
ctrl+2 - Edit Mode- dodana możliwość ustawienia tła dla pola rysowniczego (obrazek z adresu http, kolor w hexach)
- dodana możliwość ustawienia właściwości background-repeat dla pola rysowniczego
- dodana możliwość ustawienia tła dla dowolnej warstwy (obrazek z adresu http, kolor w hexach)
- dodana możliwość ustawienia właściwości background-repeat dla dowolnej warstwy
- dodana możliwość ustawienia właściwości color dla dowolnej warstwy
- dodana możliwość ustawienia właściwości font-size dla dowolnej warstwy
- dodana legenda dla linijki pomocniczej (odległości mierzone w pikselach)
- dodana możliwość przesuwania pomocniczych prowadnic
- dodane automatyczne dokowanie przesuwanych warstw do istniejących prowadnic
- dodana możliwość przesuwania dowolnej belki toolbara pomocniczego
- dodane nowe języki dla strony (Page language)
- zamiana nowych linii na widoczne przerwy podczas wpisywania treści warstwy (Content)
- kosmetyczne zmiany w interfejsie (m.in. inna prezentacja linijki pomocniczej vide Photoshop)
- przyspieszenie działania narzędzia o ponad 500%
Więcej o Drawter Beta 2 w czwartek (w tym nowy screencast). Zapraszam do testowania i zgłaszania błedów oraz uwag.
-
Drawter - FAQ&Help
by adminCzym jest Drawter?
Drawter to narzędzie napisane w JavaScript, oparte o bilbiotekę jQuery. Umożliwia ono rysowanie kodu stron internetowych. Jest uruchamiane w przeglądarce internetowej, co czyni go nieprawdopodobnie użytecznym. W programie każdy tag strony przedstawiony jest w postaci warstwy, którą naszkicowaliśmy.
Obecnie Drawter występuje w wersji Pro beta1. Pro oznacza, że jest przeznaczony dla typowego webmastera, który zna HTML i CSS, i któremu Drawter ma znacznie ułatwić pracę. Nie jest to, na razie, narzędzie dla typowych laików. Warto jednak podkreślić, że takowe powstaje i nosić będzie nazwę Amateur. Jego premiera wkrótce.
Jak działa Drawter?
Drawter obsługuje dwa tryby - tryb rysowania (Draw mode) i tryb edycji (Edit mode). W trybie Draw mode możemy tylko rysować nowe warstwy w specjalnie przeznaczonym do tego polu (którego wielkość możemy zmienić tylko przed rozpoczęciem pracy!), natomiast w Edit mode dowolnie je edytować - przesuwać, zmnieniać wielkość, identyfikator, klasę. Ponadto możemy w nim dodawać inne atrybuty tagów (Node attributes) i właściwości stylów (Node styles). Co więcej, w Node details, możemy ustawić treść (Content) warstwy czy też zmienić typ tagu, jaki warstwa reprezentuje (Edit tagname). I tak, rysując element div, i dodając mu treść Jakaś treść otrzymamy w kodzie
<div>Jakaś treść</div>
Rysowanie jest banalnie proste - w polu rysowania przytrzymujemy lewy klawisz myszy i zmieniając jej położenie otrzymujemy wybrane kształty. Tag, jaki ma reprezentować dana warstwa, wskazujemy w menu bocznym, a konkretnie w rozwijanym polu w Drawing options. Drzewo rysowanej strony jest na bieżąco generowane w menu bocznym pod belką Markup tree.
Warto też pamiętać, że kiedy narysujemy jakąś warstwę wewnątrz innej, skrypt ropoznaje, że narysowana warstwa jest dzieckiem tej, w której się mieści. Znajduje to reprezentacje w wygenerowanym kodzie.
Dodajmy, że jeśli skopiujemy jakąś warstwę w Markup tree, nowa nie może być dzieckiem ani rodzicem tej, z której ją skopiowaliśmy.
Czy strona Drawter.com zmieni swoją postać?
Tak, trwają intensywne prace nad lekką i użyteczną stroną oficjalną projektu. Znajdą się tam newsy, faq&help, przykładowe screencasty oraz oczywiście odnośnik do narzędzia. Wszystko w kilku wersjach językowych.
Kiedy wersja Pro wyjdzie z fazy beta?
Jak najszybciej - na pewno do końca roku, choć prawie pewne jest, że będzie to znacznie wcześniej.
Pasek menu - Code
Menu to dzieli się na dwie opcje - Generate code i Show code. Generate code, jak można wywnioskować, generuje kod HTML i CSS na podstawie narysowanych warstw w polu rysowania. Po wybraniu tej opcji pojawia się specjalne okienko, skąd możemy skopiować interesujący nas kod (HTML bądź CSS).
Pasek menu - View
Tzw. “widok” - możemy tutaj schować bądź wyświetlić konkretne belki menu bocznego.
Pasek menu - Preferences
Dzieli się on na dwie opcje - Auto float i Auto sizes. Domyślnie włączona jest ta pierwsza.
Auto float, na podstawie naszego rysunku kodu, rozpoznaje, które warstwy sąsiadują ze sobą, po czym w wygenerowanym kodzie nadaje im pływanie (float: left; width: Xpx).
Auto sizes natomiast kopiuje wartości stylów position: absolute, width, height, left, top z narysowanych warstw i dodaje je do wygenerowanego kodu CSS. Dzięki temu, spoglądając na stronę w przeglądarce, zachowany jest identyczny układ, jak na naszym rysunku w Drawterze. Jest to użyteczna opcja, dzięki której zamiast stron, mogą powstawać także wireframe’y!
Wymagania
Najnowsza przeglądarka Firefox, Opera, IE lub Safari. 256MB pamięci RAM i 800Mhz taktowania procesora.
Drawter - to nie edytor WYSIWYG, to nowa kategoria edytorów kodu HTML!
Drawter to nowy typ edytora HTML - nie wpisujemy w nim ręcznie tagów, a zastępujemy tę czynność rysowaniem. Istotny jest też fakt, że robimy to za pomocą przeglądarki, a więc niezależnie od systemu operacyjnego!
Poza tym nie należy go kojarzyć z typowym edytorem WYSIWYG - rysowane warstwy są tylko reprezentacją tagów, a nie ich prawdziwym obrazem. Idąc tym tropem, rysując tabelkę, nie wyświetla się nam typowa tabelka, tylko prezentująca ją (<table>) warstwa. Fakt ten sprawia, że mamy pełną kontrolę nad tym, co rysujemy i jak to będzie wyświetlane w przeglądarce (możemy przecież dodać dowolne style CSS!). Kod przedstawiony w postaci warstw jest dzięki temu niezwykle czytelny!
Ważne jest również to, że narzędzie nie generuje, jak tradycyjne programy WYSIWYG, żadnych niepoprawnych konstrukcji i uciążliwych potworków. Otrzymujemy kod, który jest 100% odbiciem tego, co narysowaliśmy!
-
Większe aplikacje JavaScript przez samą swoją złożoność wymagają, aby oprzeć ich kod na frameworku - dla wygody, kompleksowości rozwiązań, supportu, ale przede wszystkim szybkości. Czy wszystkie frameworki się do tego nadają?
Nie zadaje tego pytania przypadkowo - ostatnie miesiące to dla mnie rozwijanie Drawtera - dużej i złożonej webaplikacji, która możliwościami i wygodą przerasta niejedną aplikację offline. Postawiłem tutaj na framework jQuery, początkowo oczarowany jego prostotą i wygodą tworzenia kodu. Powstał na tym blogu nawet czteroodcinkowy (na razie) kurs tego narzędzia. Z dzisiejszej perspektywy uważam, że bezgraniczne ufanie jQuery jest zwyczajnym głupstwem.
Możliwości to nie wszystko
Nie ganie tutaj w żadnym razie małych możliwości tego frameworka - są one wystarczające, by zrobić z nimi, co się nam żywnie podoba. Gdyby było inaczej, wyrzuciłbym go z pamięci po kilku minutach. To jasne. W zasadzie jQuery oferuje w większości to, co jest dzisiaj standardem, ugruntowanym przez Prototype. Trzeba przyznać, że to ciekawe zjawisko - framework, który w większości wytyczył ścieżki, jeśli chodzi o frameworki JS, zostaje wyparty w słupkach popularności przez oferujący to samo, a może nawet mniej, jQuery. Nie trzeba znać obu frameworków bardzo dobrze, by stwierdzić, że główną tego przyczyną była prostota jQuery.
Podsumowując wątek, kierując się możliwościami, stawiam jQuery na podium. To bardzo dobry framework, szczególnie dla małych rozwiązań. Sedno sprawy rozbija się jednak nieco o inne kryteria. O szybkość działania.
Need for speed
W ostatnim półroczu modna była dyskusja na temat szybkości najpopularniejszych frameworków JS. Powstał nawet test prędkości (opierający się na pobraniu elementów DOM, kierując się selektorami, XPath itd.), w którym jQuery musiało w wielu przypadkach uznać wyższość konkurentów: MooTools i Prototype. Potem światło dzienne ujrzała poprawiona wersja jQuery (1.21) i znów zaczął się pusty lament - o wiele szybsze, czy tylko szybsze?
Szczerze mówiąc, tego typu testy są fajne, bo dają jakiś tam - mniej lub bardziej zachwiany, obraz danego frameworka. Chyba nie muszę udowadniać, jak sukces w speed teście napędza popularność narzędzia. I nawet nie chce myśleć, co stałoby się, gdyby jutro wyszedł na świat framework XXX i pobił konkurencję w każdej kategorii o 1 milisekundę…
Testy szybkości do lamusa
Z drugiej strony, SlickSpeed jest zbyt banalny, aby brać go na poważnie. Jestem daleki od uznania, że programiści na świecie dostali olśnienia i zaczęli masowo przenosić przyzwyczajenia z kodowania CSS na swoje skrypty JS. W związku z tym chętnie poznam kogoś, kto swoje projekty opiera na używaniu podobnych selektorów: div div div czy #id .klasa #id.klasa. Webdeveloperzy to w większości (tym bardziej, jeśli są świadomi korzyści płynących z używania frameworka) logicznie myślący ludzie, którzy szukają jak najbardziej optymalnych rozwiązań. Śmiem zaryzykować więc, że najczęściej używanymi selektorami, które sprawiają dość “dużo” kłopotów frameworkom będą np. takie: div .dialog czy div > div. A teraz popatrzcie sobie na szybkość frameworków w tych kategoriach. Jest duża!
Było nie było, nie chodzi nawet o złożoność selektorów. Nie zawsze kod JS produkują rasowi programiści, a w zamian robią to ludzie od CSS i XHTML, używający tego, co im wygodne. A niech sobie robią, bo naprawdę trzeba “umieć” zahamować skrypt samymi selektorami… W większości bowiem, to nie dostęp do elementów drzewa DOM odgrywa najważniejszą rolę w szybkości działania naszych skryptów.
Szybkość, a najczęstsze zadania
Jak wiemy, nie pobieramy elementów drzewa DOM dla sztuki. Często zmieniamy ich treść, rodziców, style CSS, przypisujemy im zdarzenia. I to jest tak naprawdę kwestia pierwszorzędna. Co z tego, że framework pobierze 300 divów w mgnieniu oka, skoro potem weźmie przykład ze zwycięzcy wyścigu żółwi i doda zdarzenia onmouseover w czasie, kiedy strona powinna być dawno gotowa do użycia. Jest to szczególnie ważne, kiedy tworzymy interfejsy użytkownika, webaplikacje oparte o zdarzenia, czy też efekty wizualne na naszych stronach. Zazwyczaj staramy się optymalizować takie skrypty (działając w ogromnej większości na identyfikatorach, a nie rozbudowanych selektorach).
Wracając do autopsji, początkowo wszelkie operacje na stylach i selektorach #id oparłem na jQuery. Do czasu, kiedy przyszło mi przetestować prędkość działania narzędzia. Niestety, wyniki, jakie ujrzałem spowodowały, że miałem niemały orzech do zgryzienia. Rysowanie choćby jednego diva zajmowało od 70 do 100ms, że nie wspomnę o innych operacjach. W czasie mojej konsternacji na szczęście trafiłem na początkową wersję Drawtera, wykorzystującą tylko czysty JavaScript. Jakież było moje zdziwienie, kiedy zobaczyłem naprawdę szybko działającą aplikację! Kolejne moje kroki były automatyczne - tam, gdzie było to wskazane, zmieniałem kod na czysty JS. Najczęściej używane konstrukcje miały podobną postać:
var element = $(”#node1″);
element.css(”left”, e.pageX);
element.css(”width”, width);
element2 = $(”<div></div>”);
element.append(element2);
Bez chwili zastanowienia zamieniłem wszystkie:
var element = document.getElementById(”node1″);
element.style[’left’] = e.pageX+”px”;
element.style[’width’] = width+”px”;
element2 = document.createElement(”div”);
element.appendChild(element2);
Wyobraźcie sobie teraz, że większość konstrukcji była uruchamiana podczas zdarzenia onmousemove, czyli podczas każdego ruchu kursorem myszki. W efekcie, zmiany dały skok wydajnościowy na poziomie 50%.
Wkrótce potem zacząłem zastanawiać się, dlaczego operacje na stylach tak bardzo obciążają skrypt. Oczywiście kluczem do uzyskania odpowiedzi było zajrzenie w kod źródłowy jQuery. Funkcja, która odpowiada tutaj za ustawienie styli nazywa się attr i ma taką postać:
attr: function(elem, name, value){
var fix = jQuery.isXMLDoc(elem) ? {} : jQuery.props;// Safari mis-reports the default selected property of a hidden option
// Accessing the parent’s selectedIndex property fixes it
if ( name == “selected” && jQuery.browser.safari )
elem.parentNode.selectedIndex;// Certain attributes only work when accessed via the old DOM 0 way
if ( fix[name] ) {
if ( value != undefined ) elem[fix[name]] = value;
return elem[fix[name]];
} else if ( jQuery.browser.msie && name == “style” )
return jQuery.attr( elem.style, “cssText”, value );else if ( value == undefined && jQuery.browser.msie && jQuery.nodeName(elem, “form”) && (name == “action” || name == “method”) )
return elem.getAttributeNode(name).nodeValue;// IE elem.getAttribute passes even for style
else if ( elem.tagName ) {if ( value != undefined ) {
if ( name == “type” && jQuery.nodeName(elem,”input”) && elem.parentNode )
throw “type property can’t be changed”;
elem.setAttribute( name, value );
}if ( jQuery.browser.msie && /href|src/.test(name) && !jQuery.isXMLDoc(elem) )
return elem.getAttribute( name, 2 );return elem.getAttribute( name );
// elem is actually elem.style … set the style
} else {// IE actually uses filters for opacity
if ( name == “opacity” && jQuery.browser.msie ) {
if ( value != undefined ) {
// IE has trouble with opacity if it does not have layout
// Force it by setting the zoom level
elem.zoom = 1;// Set the alpha filter to set the opacity
elem.filter = (elem.filter || “”).replace(/alpha([^)]*)/,”") +
(parseFloat(value).toString() == “NaN” ? “” : “alpha(opacity=” + value * 100 + “)”);
}return elem.filter ?
(parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100).toString() : “”;
}
name = name.replace(/-([a-z])/ig,function(z,b){return b.toUpperCase();});
if ( value != undefined ) elem[name] = value;
return elem[name];
}
},
Nie trzeba wiele, by stwierdzić, że jQuery wykonuje znacznie więcej operacji, niż ustawienie odpowiedniego stylu. Z ciekawości przyjrzałem się MooTools, który wg zwolenników chwali się bardzo dobrą implementacją najprostszych instrukcji (jak np. ustawianie stylów).
setStyle: function(property, value){
switch(property){
case ‘opacity’: return this.setOpacity(parseFloat(value));
case ‘float’: property = (window.ie) ? ’styleFloat’ : ‘cssFloat’;
}
property = property.camelCase();
switch($type(value)){
case ‘number’: if (![’zIndex’, ‘zoom’].contains(property)) value += ‘px’; break;
case ‘array’: value = ‘rgb(’ + value.join(’,') + ‘)’;
}
this.style[property] = value;
return this;
},
Powiedzmy, że tutaj sprawa przedstawia się lepiej, kod jest znacznie przejrzystszy, a instrukcja switch jest o wiele lepszym rozwiązaniem od if. Co ważne, funkcja ta wykonuje to, co ma wykonywać, nie ma tutaj zbędnych rzeczy do sprawdzenia!
Pojedyncza funkcja jednak wiosny nie czyni, przeanalizujmy więc, jak w powyższych frameworkach wyglądałaby implementacja JSowego:
document.getElementById(’node’).style[’margin’] = ‘2px’;
jQuery:
$(”#node”).css(”margin”, “2px”);
Moo Tools:
$(”node”).setStyle(”margin”, “2px”);
Sprawa wygląda bliźniaczo podobnie. Przyjrzyjmy się teraz krok po kroku, co musi zrobić jQuery by ustawić margin równy 2 piksele. Najpierw uruchamiana jest funkcja $(), która pełni rolę nakładki na funkcję init(), a ta wygląda tak:
init: function(selector, context) {
// Make sure that a selection was provided
selector = selector || document;// Handle HTML strings
if ( typeof selector == “string” ) {
var m = quickExpr.exec(selector);
if ( m && (m[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( m[1] )
selector = jQuery.clean( [ m[1] ], context );// HANDLE: $(”#id”)
else {
var tmp = document.getElementById( m[3] );
if ( tmp )
// Handle the case where IE and Opera return items
// by name instead of ID
if ( tmp.id != m[3] )
return jQuery().find( selector );
else {
this[0] = tmp;
this.length = 1;
return this;
}
else
selector = [];
}// HANDLE: $(expr)
} else
return new jQuery( context ).find( selector );// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction(selector) )
return new jQuery(document)[ jQuery.fn.ready ? “ready” : “load” ]( selector );return this.setArray(
// HANDLE: $(array)
selector.constructor == Array && selector ||// HANDLE: $(arraylike)
// Watch for when an array-like object is passed as the selector
(selector.jquery || selector.length && selector != window && !selector.nodeType && selector[0] != undefined && selector[0].nodeType) && jQuery.makeArray( selector ) ||// HANDLE: $(*)
[ selector ] );
},
Skrypt rozpoznaje, jaki argument podaliśmy (var m = quickExpr.exec(selector);) i podstawia go do funkcji document.getElementById. Następnie uruchamiamy funkcję css:
css: function( key, value ) {
return this.attr( key, value, “curCSS” );
},
Ta radośnie przekierowuje nas do funkcji attr, gdzie czeka nas kolejne kilka warunków if i finałowe ustawienie stylów.
MooTools również uruchamia funkcję $(), która wygląda tak:
function $(el){
if (!el) return null;
if (el.htmlElement) return Garbage.collect(el);
if ([window, document].contains(el)) return el;
var type = $type(el);
if (type == ’string’){
el = document.getElementById(el);
type = (el) ? ‘element’ : false;
}
if (type != ‘element’) return null;
if (el.htmlElement) return Garbage.collect(el);
if ([’object’, ‘embed’].contains(el.tagName.toLowerCase())) return el;
$extend(el, Element.prototype);
el.htmlElement = function(){};
return Garbage.collect(el);
};
Następny znany nam setStyle i po obiedzie.
Podane przykłady nasuwają kilka wniosków i przemyśleń.
Stawiaj na czysty JS, gdy wiesz, czego oczekujesz
Frameworki zapewniają nam szybkość tworzenia kodu, a więc mniej pisania i więcej czasu na nasze pomysły, kosztem większej ilości dołączonego kodu frameworka. Czy jednak zawsze należy korzystać z funkcji, oferowanych przez framework? Moja odpowiedź brzmi przecząco, o ile mamy do czynienia z rozbudowanymi skryptami (które robią nieco więcej, niż pokazywanie i ukrywanie boksów). Jak zobaczyliśmy, uruchamianie funkcji css w jQuery, podczas każdego ruchu kursora myszki to dość nierozważne posunięcie, szczególnie, jeśli mamy na myśli szybkość działania. Dawałoby to przecież kilkaset wywołań trzech, dość obfitych w kod funkcji. Czy tego chce ambitny developer? W przypadku MooTools jest trochę lepiej, choć nic nie zastąpi funkcji, którą moglibyśmy sami sobie napisać, a która byłaby wydajna w 100%, bo robiłaby to, co chcemy:
function $(id) {
return document.getElementById(id); }
Używając powyższej, otrzymalibyśmy analogicznie do przykładu z poprzednich akapitów:
$(”node”).style[’margin’] = “2px”;
Jeśli nie podoba nam się nazwa funkcji $() (np. ze względu kolidowania z jQuery), możemy przecież znaleźć inną, bądź użyć metody wbudowanej we framework - noConflict(). Jej użycie powoduje, że wolna zostaje funkcja $(), a zastępuje ją defaultowo jQuery(). Przykładowe wywołanie wyglądałoby wtedy tak:
jQuery.noConflict();
jQuery(document).ready(function() {});
Oczywiście, jeśli uznalibyśmy, że jQuery to za długi zwrot, możliwe jest jego zastąpienie, np.:
jQuery.noConflict();
$j = jQuery;
$j(document).ready(function() {});
Mootools, ani Prototype niestety nie posiadają takiej metody…
Czyste funkcje DOM potrafią znacznie przyspieszyć skrypt!
Drawter korzystał kilka razy, w dość krytycznych momentach, z funkcji children().each(). Wyszukiwałem w ten sposób pewne elementy, a następnie sprawdzałem ich właściwości. Funkcja ta była uruchamiana często i w testach wydajnościowych zajmowała pierwsze lokaty od końca. Rozwiązanie było tylko jedno: getElementsByTagName. Dość powiedzieć, że skrypt z 500ms zjechał do 100ms. Podobnie jest z append() i kilkoma innymi, “zapchanymi kodem” funkcjami frameworka.
Framework nie dla każdego
Nie chcę, mimo wszystko, tworzyć mitu nieprzydatnych frameworków. Z moich doświadczeń wynika, że frameworki nadają się idealnie do rozwiązań wymagających natychmiastowego, nieskomplikowanego działania. Używając frameworka mamy pewność, że kod był testowany wcześniej przez grupę doświadczonych programistów, dodatkowo przepuszczony był przez wielu testerów. Framework to dana jakość i ułatwienie, które nie przekraczają pewnego poziomu. Ciekawe są natomiast refleksje, płynące z używania ich, gdzie się da.
Bum, jaki towarzyszy jQuery jest dość charakterystyczny. Słyszy się tu i ówdzie coraz częściej, że w jQuery napiszemy wszystko i wszyscy. Framework ten jest porównywany do zbawcy świata JS - napiszemy w nim szybko i łatwo, zrobimy wiele więcej, niż zakładaliśmy ;-). Diabeł tkwi jednak w szczegółach. Fakt jest taki, że do skomplikowanych rozwiązań nie powstał jeszcze framework, który pozwoliłby ominąć czysty JS, oferując gamę w pełni wystarczających funkcji. I długo, bądź wcale nie będzie nim Ext. Bo?
Ponieważ nie frameworki, a właśnie JavaScript jest bardzo wolny. Aplikacje oparte na frameworkach, chyba w żadnym innym nie odbiegają tak wydajnością od czystego kodu, jak w JavaScript. W obecnym kształcie trudno jest podążać w stronę choćby JAVY, która jest wręcz wzorowym przykładem korelacji framework - język. Widoczny jest w światku JavaScript trend, by myśleć i pisać frameworkowo, jednak dopóki zdani jesteśmy na powolną ECMAScript 1.7, platforma (framework) i wydajny sposób jej użycia to nadal główny problem w budowaniu aplikacji JavaScript.
Duża też w tym wszystkim rola developerów przeglądarek. Ta jedyna w swoim rodzaju zależność języka od czynników zewnętrznych (programiści przeglądarki) skazuje JavaScript na dość powolny i niejednostajny rozwój. Pozornie specyfikacja jest taka sama dla wszystkich, jednak szybkość działania diametralnie różna. Jak na razie kierunek wyznacza Safari, z niewiarygodnie szybką implementacją DOM i ECMA. Takiej, a nawet większej prędkości brakuje innym, by mówić JS, myśleć Framework.
Warto odpowiedzieć więc na pytania - co robić z JavaScript? Po co nam frameworki, skoro sam język nie potrafi sprostać temu zagadnieniu? Czy budowanie złożonych aplikacji w JS ma sens? Wreszcie, czy JS musi przegrać walkę z mało lubianymi przez Internautów AIR i Flashem? Byłoby to pyrussowe zwycięstwo oponenta, bo cały czas wydaje mi się, że JS - ze względu na historię i taką, a nie inną postać języka, jest skazany na web, a web jest skazany na JS.
-
Nasza-klasa.pl to ostatnio najpopularniejszy serwis w Polsce. W portalu zarejestrowanych jest już pewnie 5 6 milionów Polaków. Serwis jest ceniony przez gwiazdy polskiego showbiznesu - kilkanaście kont postanowił założyć Paweł Małaszyński, a w kuluarach mówi się, że Taniec z Gwiazdami przeprowadzi rekrutację do nowej edycji wśród użytkowników portalu. Co więcej, również znany, piłkarski gwiazdor Ronaldinho postanowił odszukać swoich kolegów ze szkolnej ławy. - Znaleść ja już Kakę i nauczyciel WueFo - pana Piechniczyeuek. - mówi zawodnik. Nasha class okej, kliko ja tam tak dusho, że czasem nie mogie zdąshyć na treningo i treneiro mówi, że not allołd tu plej tudej. - dodaje. Niestety wierne grono użytkowników Naszej klasy ma też wiele powodów do narzekania - Czasem to chodzi, jak mój szwagier po imieninach - no nie najlepiej, nie? - wzdycha anonimowy użytkownik NK. Poza powolnością, modne są zarzuty o słabe technologie, niezoptymalizowany kod (np. tabelki zamiast divów) i inne mało istotne elementy, na które głównie Microsoft (!), a teraz Nasza klasa (!) zdają się nie zwracać uwagi. Jako blog, który chce budować lepszą Polskę bez podziałów, by żyło się lepiej, postanowiłem pomóc Naszej klasie. Sporządziłem listę wszystkich leniwych blogerów i ikon polskiej myśli technicznej, którzy mogą, a jeszcze Naszej klasie nie pomogli. Poznajcie, czym, my, obywatele, możemy zasłużyć się naszemu wspólnemu dobru, Naszej klasie!
Zacznijmy od tych, którzy już pomagają, a jeszcze o tym nie wiedzą, co za tym idzie, nie są dostatecznie dobrze ukształtowani ideologicznie. I tak, Antyweb zwiększy do trzech, liczbę dziennych informacji o Naszej klasie. Promowane będą szczególnie donosy o planowanej beatyfikacji twórców NK i wdrażanym systemie ogrzewania podłogowego w siedzibie portalu. To samo uczynić powinna Gazeta.pl, która nieoczekiwanie, pomimo początkowej pomocy, zaczęła okazywać swoją niechęć do serwisu - sprawa rozbija się ponoć o cenę za jedno wejście z portalu. O2.pl może natomiast stworzyć nowy wortal z plotkami zasłyszanymi na stronach NK.
Następnie swoją aktywność i odpowiedzialność obywatelską okazać powinni blogerzy. I tak, Riddle napisze około 10 expressions dla IE, w związku z zasłyszanymi problemami od 10 tysięcy użytkowników z bibliotek uniwersyteckich, używających IE 5.0. Ponadto portal wzbogaci się o anglojęzyczny blog i konto na twiterze.
W związku z amatorszczyzną, jeśli chodzi o wdrażanie nowych serwerów, swoją wiedzą, jak i znajomościami powinien wykazać się Patrys. 60% analityków wskazuje bowiem, że niezbędna może się okazać tutaj współpraca z Synem PrezesaTM - znanym fachowcem z prawie każdej dziedziny informatyki. “Na oko” wydaje się też, że NK potrzebny jest prawdziwy CMS w Pythonie, więc dlaczego by nie pomóc?
Jesteśmy w web 2.0, a jak web 2.0 to Krzysztof Urbanowicz, znany, polski specjalista od tego zagadnienia, autor wielu artykułów “jak być 2.0″. W tym wypadku bezcenna wyda się ekspertyza, czy NK jest wystarczająco web 2.0. Z pewnością pomoże to twórcom stworzyć jeszcze lepszą społeczność. Niezbędne wydaje się również skorzystanie z AJAXa, co wynika zresztą z wnikliwej analizy tekstów Pana Krzysztofa.
W związku z budowaniem pewnych części serwisu na tabelkach (zapewne związanego z tym, że twórcy NK nie mają czasu robić na divach), korzystne byłoby wyjaśnienie zagadnienia przez początkującego webmastera, Pawła Wimmera. - w końcu udostępnia on kurs HTML. Co prawda małe doświadczenie autora może być tutaj przeszkodą w dogadaniu się ze specjalistami Naszej klasy, aczkolwiek w ostatecznym rozrachunku współpraca ta powinna wyjść wszystkim na dobre.
Dobre SEO nigdy nie jest złe - mówi znane przysłowie. Poza tym każdy, szanujący się portal powinien być dobrze wypozycjonowany w wyszukiwarkach, a szczególnie w Google - tym bardziej, jeśli mamy do czynienia z serwisem o małym zasięgu lokalnym, jak na przykład Nasza klasa (plus minus 30 osób z klasy). Uliczna sonda, sporządzona przed napisaniem artykułu wykazała, że jedynym człowiekiem, który może pomóc w tej dziedzinie jest Piko - czyli Piotr Konieczny:
- Ziom Konieczny, bankowo, man! - brzmiała jedna z wypowiedzi na Nowym Świecie.
- Chodziłem z nim do podstawówki. Wszyscy zazdrościliśmy mu koszulki z napisem Google - soon.
- SEO? Nie mam jeszcze tego Eriksona. - i tak dalej.
Następnie, oczywiste jest, że Nasza klasa potrzebuje redesignu, ale nawet nie musimy wchodzić na blog Rafiego, by dojść do tego, ze design jest przeciętny, a graficy powinni związać swoją przyszłość z układaniem kostki chodnikowej.
Liczni specjaliści prorokują, że po odnowieniu wszystkich szkolnych znajomości, użytkownicy przestaną korzystać z portalu. Tym problemem powinni zająć się fachowcy z Grona. Na Naszej klasie nie ma przecież choćby Blimpa, a ostatnio dodany system szkół w Gronie, prezentuje, jak powinno się tworzyć innowacyjne, nowe opcje dla serwisów społecznościowych. No i jeszcze Blog IT by się przydał.
Aby jeszcze bardziej zintegrować społeczność, ludzie z yashke.com powinni zorganizować jakieś Classcampy. Po co umawiać się, mobilizować, skoro mamy już ludzi od piwka w gronie serdecznych osób? Nawet nie mówię o tym, co by się stało, gdyby na campie zjawił się Ronaldinho czy popularny Małasz…
Mając tak zgraną i zmobilizowaną ekipę fachowców, Nasza klasa powinna szybko nadrobić swoje braki i poprawić niedociągnięcia. A Ty? Co Ty zrobiłeś dla Naszej klasy?Wszelkie podobieństwo do prawdziwych osób i zdarzeń jest zupełnie przypadkowe. Artykuł ma charakter satyryczny.
-
Dziennikarstwo growe w Polsce jest takie, jak każdy widzi - chmara młodzieży tytułuje się dziennikarzami, a ostatni bastion profesjonalizmu i niezależności broni uzbrojona w klawiatury garstka zapaleńców, jak np. gamehot.pl, czy valhalla.pl. Temat jest mi szczególnie bliski, ponieważ w swojej młodości pisywałem często o grach w legendarnej Załodze G. Niestety, od tamtej pory nic nie zmieniło się w kwestii branżowej “rzetelności” dziennikarskiej.
UPDATE: Omawiana niżej sprawa wyjaśniła się, a GOL zachował resztki twarzy swoim profesjonalnym zachowaniem w tej sytuacji.
Nigdy nie ceniłem sobie recenzji pisywanych na dużych portalach z prostego powodu - w druzgocącej większości redakcję stanowi tam kilka osób zarządzających, a kontent kupowany jest od byle kogo, kto potrafi posługiwać się językiem polskim (choć i tutaj jest wiele od tej zasady wyjątków). Opinie anonimowych “gadających głów” są, chcąc nie chcąc, mało wartościowe. A gdy dodamy do tego presję wydawców (czemu oczywiście większość zaprzecza), robi się mało optymistycznie.
Kiedy zajmowałem się grami na poważnie, w otoczeniu panował stereotyp przereklamowanego i słabego tekstowo GOLa (gry-online.pl), bełkoczącego Imperium Gier (gry.wp.pl) i amatorskiego gry.o2.pl. Było w tych opiniach trochę zazdrości, ale trzeba oddać, że znajdowało się w nich także maleńkie ziarenko prawdy. Wyniki matur i stan polskiej edukacji dowodzi, że nie każdy wymaga mickiewiczowskiej precyzji w dobieraniu słów, więc warsztat 15-letniej redakcji jest w znaczącej mierze wystarczający, by dogodzić wcale nie starszej widowni tych portali. Nie jest to zbyt wymagający rynek, który nawet psa z kulawą nogą kupi. Niestety coraz odważniej dochodzę do wniosku, że najlepiej kierować się zdaniem przyjaciół o podobnych zainteresowaniach, względnie przetestować dany produkt samemu. Recenzowanie, zamiast sacrum, stało się przereklamowanym, trendy profanum dla mas.
Pomijając już wątpliwy warsztat “dziennikarzy” growych w Polsce, jeszcze gorszą rzeczą, jaka charakteryzuje to małe, rodzime bagienko, jest plagiatowanie i powszechna inspiracja tekstami konkurencji. Jest to stary problem, aczkolwiek niezmiennie irytujący.
Ostatnio dotknął on mojego byłego kolegi redakcyjnego - Macieja “Troublemana” Bauera, współtwórcy blogo-serwisu o grach przygodowych AdventureGamer.pl. Zamieszczona tam recenzja gry Nostradamus: The Last Prophecy stała się łupem amoralnych, bezczelnych grabieżców z Gry-online.pl. Po lekturze ich recenzji, nie mam wątpliwości, że prawdziwa jest jedna z dwóch tez: Łukasz “Lookasso” Balowski (Adventure Gamer) to alter ego Bartosza “bartek” Sidziny (GOL), bądź Bartosz „bartek” Sidzina to zwyczajny manipulant, który przekształcił tekst na swoje potrzeby, zgarnął wierszówkę i śmieje się w żywe oczy twórcom Adventure Gamer. Jakimś oto cudem oba teksty zawierają te same informacje o grze, wyliczenia (np. dotyczące czynności związanych z rozwiązywaniem zagadek w grze), nawiązania i porównania (choćby do gry “Da Vinci”) - a to tylko wierzchołek góry lodowej, co dla inteligentnego czytelnika trudne do rozgryzienia nie jest. Moje ulubione:
AG: Możemy więc pobawić się w pewnego rodzaju starodawne CSI.
GOL: CSI to nie jest, ale nie zapominajmy że mamy XVI wiek.
Panie Bartku, a może tak CBŚ lepiej?
I właśnie dlatego kieruję się własnym nosem, bądź czułkami przyjaciół ;-). A teraz idę kupić nową płytę zespołu “Muchy” - poleciło mi ją kilku dobrych znajomych, a to, co usłyszałem na teledyskach w pełni mnie usatysfakcjonowało.
-
Drawter - kilka faktów
by adminDawno nie było nic o Drawterze, pora więc nadrobić zaległości.
Trwają wzmożone prace nad wersją Ameteur. Myślę, że bedzie to ważne wydarzenie w dziedzinie social networkingu, a także blogowania i wyrażania siebie w Internecie. Więcej informacji będę zdradzał co jakiś czas. Warto natomiast dodać, że Drawter w tej wersji przechodzi prawdopodobnie na Moo Tools - szybsze, lepsze i wydajniejsze, a także posiadające kilka pluginów, których jQuery nie ma (lub nie zdołałem ich odszukać), a które niewątpliwie się przydadzą. Ponadto, do ekipy doszedł Adam Babik - Dreamer - który wspomoże Drawtera od strony graficznej. Obecnie trwają bardzo, ale to bardzo intensywne prace. Efekt części z nich ujrzycie już wkrótce w postaci bloga i prostej strony głównej.
Warto też wspomnieć o reakcji mediów na Drawtera - projekt niedawno znalazł się w Best of January w Smashing Magazine, a polska prasa, w postaci Internet Makera dostrzegła Drawtera zdaje się, że po raz pierwszy:
-
1. urodziny ferrante.pl
by adminTo już rok od premiery mojego bloga. W tym czasie powstało 58 notek, a Czytelnicy napisali mniej więcej 460 komentarzy (vide Spam Karma). Co dalej?
Przeszłość
Przed pojawieniem się bloga w sieci uznałem, że powinienem w głównej mierze skupić się w nim na kursach i poradach dotyczących programowania. Jak zapowiedziałem w pierwszej notce, miało być o JS, PHP, a także czasem o Ruby i Pythonie. Plany te zrealizowałem w 1/4. Powstało bowiem spore, 20-sto odcinkowe Wprowadzenie do JavaScript, a o pozostałych językach napisałem niewiele.
Także ogólna liczba postów nie zachwyca. 71 notek to stanowczo za mało, jak na 12 miesięcy bytu w Internecie. Przyczyny tego stanu rzeczy są dwie, jak najbardziej ludzkie: dużo pracy i wszędobylskie lenistwo. O ile z nadmiarem roboty można wygrać, tak z lenistwem? W trakcie ostatnich 12 miesięcy blog trafił trzy razy na Wykop - przy okazji kursu JS, jQuery oraz premiery Drawtera. Jest to zadowalający fakt, za co dziękuje Czytelnikom.
Korespondując z blogiem powstał właśnie Drawter. Jak na projekt bez sztucznego wywoływania buzzu, zyskał jakąś tam popularność. Smuci jednak fakt, że tak naprawdę polskie blogi i media nie dostrzegły tego, jakby nie było, przydatnego dla webmasterów narzędzia. Fakt jest też taki, że nie zrobiono wiele w tę stronę, co powinno się lada moment zmienić. Nie zasypuje gruszek w popiele, bo wiem, że przed projektem stoi świetlana przyszłość. Drawter Amateur przecież już wkrótce.
Przy okazji tekstów o programowaniu, powstało kilka okołotematycznych. Było trochę sarkazmu, ironii i humoru. O ile z tekstów oceniających inne strony nie jestem do końca zadowolony (krytyczna forma to według mnie domena krzykaczy, której teraz żałuje), tak z tekstów humorystycznych jak najbardziej.
Przyszłość
Powracając do pytania zadanego wcześniej, co dalej? Chciałbym podziękować wszystkim, którzy mnie przez ten czas wspierali i komentowali treść tego bloga. Mimo to sprawy zaszły ciut za daleko:Takich komentarzy dostaje ostatnio coraz więcej – na mailu, w komentarzach. Przeważnie je usuwam. Dlaczego? Otóż, o ironio, po porównaniu IP z innymi komentarzami jasno wynika, że pisze je bardzo znany tech-blogger.
Cóż, Polska. W każdym miejscu doszukują się wpadki i słabości człowieka. I jeszcze muszę moderować te zgryźliwe komentarze, bo ktoś sobie zażyczył mnie kompromitować. Zamykam więc bloga. Co potem? Wybywam do Mountain View (dostałem dość fajną ofertę), krzewić jedyną słuszną “W3C way” wraz z moją piękną ukochaną.Dawno nie było JavaScriptu prawda?
Więc.. nim jednak odbije mi kompletnie, a powyższe, spreparowane akcje będą na porządku dziennym, postaram się poprowadzić ferrante.pl do drugich urodzin. Założenia programowe są ambitne:Redesign - w zasadzie gotowy, czeka na kod HTML. Kompletna zmiana kolorystyki, osobiście bardzo mi się podoba. Warto czekać.
Możliwe, że blog wzbogaci się w kilka bajerów JavaScript. Zmiany uproszczą poruszanie się po blogu.
Podział na notki tech/life.
Więcej prywaty. Dobra publicystyka.
Wydanie PDF z kursem JS (20 odcinków z bloga, uzupełniona przeze mnie nie opisanymi w nich pozostałymi zagadnieniami), triki JS dla zaawansowanych.
Więcej o PHP (”budujemy frameworka!”, wzorce projektowe, jak zacząć z PHP itd.).
Spojrzenie na Ruby i Pythona oczami laika - seria tekstów.
Więcej o kompleksowym budowaniu stron od zera, notatki z przebiegu moich prac nad projektami.
Szukamy pracy w IT. Raport.
Więcej grafik w tekstach.
I kilka innych niespodzianek.Zobaczymy co z tego tak naprawdę wyjdzie. Powiem też szczerze, że liczę na Wasze ożywione komentarze. Nie ukrywajmy tego - każdemu autorowi duża liczba komentarzy sprawia ogromną radość. Chciałbym więc Was zmobilizować do pisania, szykując także kilka udogodnień w tym kierunku, aby stało się to bardzo przyjemne.
Podsumowując, wchodzimy w nową erę, w której, mam nadzieję, znajdą się duże pokłady weny i Waszego komentatorskiego entuzjazmu.
Buty Nike Adidas
kompresory Rihanna Kopiarki