Program do prostych screencastów

Nie potrzeba nic instalować. Usługa już z hostingiem. Dla prostych, szybkich screencastów dla klienta wymarzony:
http://www.screenr.com/

Góra tutoriali dla webdesignerów

Tutoriale, tutoriale, tutriale...
Niektóre całkiem ciekawe:
http://www.tutorialshock.com/

Zawodowy button maker, czyli jak wizualnie tworzyć przyciski na stronę

Dla mnie bomba:
http://css-tricks.com/examples/ButtonMaker/

System do próbowania html/css/javascript

Na dodatek wspierający frameworki Mootools, jQuery, Prototype, YUI, Dojo, ExtJS i kilka innych.
Wskocz na http://jsfiddle.net/

Piszesz po prostu kod html okraszasz go css'em i uaktywniasz Javascriptem w dowolnej konfiguracji. Efekt po naciśnięciu klawisza "Run".

Sposób na ukrycie swojego emaila na stronie

Wejdź na stronkę:
http://www.vincentcheung.ca/jsencryption/

W żółtym polu "Key" wpisz dowolny klucz. Na przykład taki jak adres tej strony:  "http://pomoceprogramisty.blogspot.com/"
W polu zielonym zapisz swój email i naciśnij przycisk "Encrypt". W polu czerwonym "Clipher text" zobaczysz wygenerowany klucz.
W niebieskim polu "HTML Code" otrzymasz kod do wklejenia na swoją stronę.
Każdy, kto będzie chciał zobaczyć twój email będzie musiał podać klucz, który w naszym przypadku jest adresem tej strony.

Roboty zbierające emaile się nabiedzą :-)

Pozycja myszy w JavaScript i dynamiczne ustawianie pojemnika

Czasami zachodzi potrzeba aby pojemnik z wygenerowaną zawartością (na przykład Ajaxową) pojawił się w okolicach kursora myszy. Można to wykonać na różny sposób, ale że dużo piszę Ruby on Rails, które używa biblioteki Prototype, to opiszę na tej właśnie drodze.
Aby zapoznać się z działaniem mechanizmów można wypróbować ten kod:

<script type="text/javascript" >
  function getcords(e){
    mouseX = Event.pointerX(e);
    mouseY = Event.pointerY(e);
    //dla celów testowych
    $('debug').innerHTML = 'mouseX:' + mouseX + '-- mouseY:' + mouseY;
  }
  Event.observe(document, 'mousemove', getcords);
</script>
<div id="debug">
  tu za chwilę pojawią się koordynaty kursora myszy
</div> 

Kluczowym jest tu obserwator (albo donosiciel) zdarzeń Event.observe, który w tym przypadku obserwuje cały dokument i śledząc położenie myszy "donosi" do kontenera <div id="debug">.
Jak wcześniej wspomniałem, opisuję to jedynie aby pokazać mechanizm. Nam chodzi o coś innego.
Potrzeba była taka: po prawej stronie ekranu jest lista pytań skróconych $('question_list'). Zajmuje ona całą wysokość ekranu. Klikniesz sobie na pytanie skrócone, a Rails przeszuka bazę i dostarczy pełną treść pytania. Treść tę umieści w kontenerze $('question_long'). Kontener ten wisi sobie spokojnie w jednym miejscu strony, a nam chodziło o to, aby pokazywał się na wysokości klikniętego pytanka na liście, i aby wszystko było pod ręką i przed oczami.
No to trzask:

<script type="text/javascript">
  function getcords(e) {
    mouseY = Event.pointerY(e);
    $('question_long').setStyle('top: ' + mouseY + 'px;');
  }
  Event.observe($('question_list'), 'click', getcords);
</script>

czary mary i działa!

Krótki opis:

Linijka 4:
Element.setStyle nadaje styl CSS wybranemu elementowi na stronie. W naszym przypadku kontenerowi z wygenerowaną pełną treścią pytania. Ustawiamy mu pozycję patrząc od góry strony. Uwaga nie zapomnij mu nadać odpowiedniego pozycjonowania:

#question_long {
  position: fixed;
  right: 200px;
  width: 300px;
  /* tra ta ta, kolory, zaokrąglenia rogów itp. */
}

Linijka 6:
Obserwujemy teraz nie cały dokument, a jedynie listę z pytaniami skróconymi. Nie interesują nas też oczywiście wszystkie ruchy myszy w zakresie tej listy, ale konkretne kliknięcia.

Oczywiście można to wszystko zrobić bez Prototype, ale skoro już jest... to dlaczego nie użyć?

Prosta konfiguracja autocomplete w Ruby on Rails

Znowu walczyłem z autocomplete w Rails. Walczyłem, bo inaczej tego nie można określić.

Twórcą tego pluginu jest osobnik o swojsko brzmiącym nicku dhh. Na stronie poświęconej temu pluginowi można nawet (sic!) natknąć się na przykład jego wykorzystania. Przeglądając tę stronkę trudno coś o niej powiedzieć innego niż "łomatulu!". Wyjaśniać to ona niczego nie wyjaśnia, a tylko denerwuje niedziałającymi linkami scriptacoulosa.

Aby zainstalować z konsoli zawołaj:

ruby script/plugin install auto_complete

oczywiście zazwyczaj nie działa :-(
Można więc ręcznie. Ściągnij zatem plugin i rozpakuj do

/vendor/plugins/auto_complete

zazwyczaj pomaga.

Aby użyć tej kontrolki w widoku wpisz:

<%= text_field_with_auto_complete :model_name, 
                                  :field_in_model_to_search, 
                                  {:value => ""}, {:min_chars => 3, :after_update_element => 'approveForm'} %>

gdzie approveForm jest nazwą funkcji JavaScript, która zostanie wywołana po wybraniu elementu z listy.

Aby rozwikłać pozostałe zawiłości złapałem się po raz kolejny za google i gugłam. Czytam, czytam... i nadziwić się nie mogę. Zerknij tylko (albo raczej nie zerkaj) na railsforum, albo nawet na railscasts. To jakaś masakra jest!

Chodziło mi o prostą rzecz. Chciałem sam zapanować nad zapytaniem do bazy i nad tym co ona zwróci do użytkownika.
Najbardziej zdziwił mnie fakt, że to poniżej działa!!!

class CustomersController < ApplicationController
  auto_complete_for :customer, :name, :conditions => ["gender = ?", "female"]
  .
  .
  .

Zadziałało! Uradowany, nigdzie tego nie wyczytałem, tylko wykombinowałem "na macanta".  Fajno jest. I tak zostało na jakiś czas.
Gdy w następnym miejscu aplikacji znów musiałem czegoś podobnego użyć, miałem prawie gotowe rozwiązanie:

class ProductsController < ApplicationController
  # Nie stosuj tego, to nie działa!
  auto_complete_for :product, :name, :conditions => ["group_id = ?", @group_id]
  .
  .
  .

ale to nie działa. Zmienna egzemplarza pojawia się za wcześnie. Trick z tą zmienną @group_id odpowiadał mi, więc nie chciałem stosować trzymania się prawą ręką za lewe ucho i zacząłem drążyć temat. Po jakimś czasie okazało się, że notacja:

auto_complete_for :product, :name, :conditions => ["group_id = ?", @group_id]

tworzy dynamicznie metodę:

def auto_complete_for_product_name
  .
  .
  .
def

Co wiec stało na przeszkodzie aby taka metodę samemu napisać? Nic, więc napisałem:

def auto_complete_for_product_name
  product_name=params[:product][:name]
  conditions=["name = ? AND group_id = ?", product_name, @group_id]
  @products=Product.all(:conditions => conditions)
end

Sprawdzam... prawie działa.
Prawie bo Rails krzyczy, że brak mu pliku widoku auto_complete_for_product_name.erb
Znów "na macanta" poleciałem. Utworzyłem plik widoku i... zadziałało:

<ul> 
  <% @products.each do |product| %>
    <li><%= h product.name %></li> 
  <% end %> 
</ul> 

Rozwiązanie proste, łatwe i przyjemne.
W kontrolerze panuje się nad każdym przejawem tworzonej listy. Można zrobić dosłownie wszystko czego się tylko zapragnie. Nie trzeba z niczym kombinować jak to pokazywali w sreencaście i proponowali na liście. Moje rozwiązanie jest całkowicie naturalne i w duchu Rails.

Pozostała jeszcze sprawa pozostałych opcji.
Opcje są, a jakże. Żywcem je tu przytaczam:
# Required +options+ are:
# :url:: URL to call for autocompletion results
# in url_for format.
#
# Addtional +options+ are:
# :update:: Specifies the DOM ID of the element whose
# innerHTML should be updated with the autocomplete
# entries returned by the AJAX request.
# Defaults to field_id + '_auto_complete'
# :with:: A JavaScript expression specifying the
# parameters for the XMLHttpRequest. This defaults
# to 'fieldname=value'.
# :frequency:: Determines the time to wait after the last keystroke
# for the AJAX request to be initiated.
# :indicator:: Specifies the DOM ID of an element which will be
# displayed while autocomplete is running.
# :tokens:: A string or an array of strings containing
# separator tokens for tokenized incremental
# autocompletion. Example: :tokens => ',' would
# allow multiple autocompletion entries, separated
# by commas.
# :min_chars:: The minimum number of characters that should be
# in the input field before an Ajax call is made
# to the server.
# :on_hide:: A Javascript expression that is called when the
# autocompletion div is hidden. The expression
# should take two variables: element and update.
# Element is a DOM element for the field, update
# is a DOM element for the div from which the
# innerHTML is replaced.
# :on_show:: Like on_hide, only now the expression is called
# then the div is shown.
# :after_update_element:: A Javascript expression that is called when the
# user has selected one of the proposed values.
# The expression should take two variables: element and value.
# Element is a DOM element for the field, value
# is the value selected by the user.
# :select:: Pick the class of the element from which the value for
# insertion should be extracted. If this is not specified,
# the entire element is used.
# :method:: Specifies the HTTP verb to use when the autocompletion
# request is made. Defaults to POST.

Ogólna notacja kontrolki w widoku jest taka:

.
<%= text_field_with_auto_complete(object, method, tag_options = {}, completion_options = {})  %>
.

Aby na przykład zacząć wyszukiwanie od wpisanych trzech liter kontrolkę skomponuj tak:

.
<%= text_field_with_auto_complete :employee, :name, {}, {:min_chars => 3} %>
.