Jak w jQuery dodawać opcje do listy.

Czasami chcemy dynamicznie dodać opcje np.

<option>Dodatkowa opcja</option>

do wysuwanej listy <select>

Można zrobić to tak:

$.each(selectValues, function(key, value){
    $('#mySelect').
    append($("").
    attr("value",key).
    text(value));
});

albo lepiej:

var thisValue = 12;
var thisText = 'December';
var thisOpt = document.createElement('option');
thisOpt.value = thisValue;
thisOpt.appendChild(document.createTextNode(thisText));
$("#name_select_field").append(thisOpt);

Zmienne globalne w CodeIgniter

Ten sposób podobał mi się najbardziej:

$data['user_name'] = "John Doe";
$this->load->vars($data);

//somewhere in the view

Hello <?php echo $user_name; ?>  

Tak też można używać właściwości gdy w głównym kontrolerze zdefiniuje się:

$CI =get_instance();
$CI->foo = 12;

System do rejestracji i edycji makro w Windows

Nie dość, że Open Source, to jeszcze bardzo rozbudowany:
http://www.autohotkey.com/

Polskie litery w Ruby i Qt

wystarczy za deklaracją aplikacji wpisać:

$KCODE = 'UTF8'

ot i wszystko :-)

Centrowanie pojemników w poziomie (CSS)

Niestety standardowy znacznik:

text-align: center; 

nie działa. Działa tylko dla elementów liniowych, a nam chodzi o elementy blokowe.
Zadziała zaś:

div {
  margin-left: auto;
  margin-right: auto;
}

No prawie zadziała... Wiadomo, że elementy blokowe w standardzie panoszą się na całą szerokość strony. Zapis powyższy nie ma więc czego tak naprawdę centrować, jeśli zaś wstawimy na przykład:

div {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

to już na pewno (hmm) zadziała.

Warte zapamiętania komendy edytora Vim

Podobno informatycy dzielą się na tych co używają Emacs'a, na tych co używają Vim'a, oraz na tych, którzy jeszcze nie poznali dobrego edytora tekstów, przez co używają kompletnie nieprzydatnych "rozwiązań" buraków z Richmond. Ten, kto nie wie o czym mowa niech nie czyta dalej. To nie dla niego.

Osobiście preferuję Vim'a. Prędkość edycji tekstu w tym edytorze oszałamia. Jest kilka komend, które znacząco przyspieszają pracę. Wybrałem najczęściej używane przeze mnie.

Rejestry
"ay zapis (yank) zaznaczonego tekstu do rejestru a (zamiast "a" można użyć dowolnej litery)
"Ay dopisanie do rejestru a zaznaczonego tekstu. Doładowanie go.
"ap wstawienie tekstu na miejsce kursora z rejestru a (zamiast "a" można użyć dowolnej litery)
"* register (rejestr) zawierający clipboard
"*y zapis zaznaczonego tekstu do clipboardu
"*p wklejenie z clipboardu w miejsce kursora

Makra
qa start rejestracji makra w rejestrze a (zamiast "a" można użyć dowolnej litery)
q stop rejestracji makra (oczywiście nie w modzie edycji tylko w modzie komend)
@a uruchomienie makra z rejestru a (zamiast "a" można użyć dowolnej litery)

Marki - rzecz zawodowa
`` dwa apostrofki (pod tyldą) powrót do ostatniego postoju kursora
ma markuje miejsce kursora znacznikiem "a" (zamiast "a" może być dowolna litera)
`a skok z miejsca aktualnego kursora da zamarkowanego wcześniej miejsca "a"
`[ początek ostatnio edytowanego tekstu
`] koniec ostatnio edytowanego tekstu
:marks pokazuje wszystkie zamarkowane miejsca

% jeśli się stoi na nawiasach to skacze z początku na koniec i odwrotnie
* zaznacza słowo, na którym się stoi i wrzuca to do szukania (cudowne)

fajne są komendy z literką "z" do poruszania ekranu:
z linia z kursorem znajdzie się na górze
z. na środku
z- na dole
analogicznie działają:
zt top
zz środek
zb bottom

:nohlsearch jeśli Cię wkurzaja podświetlenia ostatniego wyszukiwania (następne wyszukiwanie elegancko powraca do podświetlania)

Gdy się jest w modzie Visual (literka "v") to literki "o" i "O" skaczą na początek i na koniec zaznaczenia. Łatwo dzięki temu poszerzać zaznaczenie.

Zmiana wielkości liter:
~ (tylda) zamienia małe na duże i odwrotnie
U na duże (tylko w zaznaczeniu)
u na małe (tylko w zaznaczeniu)
gu na małe np. guw zmieni na małe całe słowo
gU na duże np. gUw zmieni na DUŻE całe słowo
guu na małe całą linię
gUU na duże całą linię

> wcinka dla całego bloku tekstu (tylko w Block Visual "Ctrl-V")
< likwidacja wcinki dla całego bloku tekstu (tylko w Block Visual "Ctrl-V") 

Zmiana tekstu w całym pliku:
%s/stary_tekst/nowy_tekst/g 

Obsługa nie po polsku brzmiących foldów czyli składania i rozkładania kodu, żeby nie przeszkadzał w poruszaniu się po tekście 
zf utworzenie folda z zaznaczonego tekstu 
zj skok do następnego folda (jak ruch kursorem) 
zk skok do poprzedniego folda (jak ruch kursorem) 
zo otwiera (open) fold pod kursorem 
zO otwiera wszystkie zaznaczone foldy 
zc zamyka (close) fold 
zd kasuje fold pod kursorem 
:mkview zapisanie swoich foldów dotyczących tego pliku 
:loadview odtworzenie zapisanych foldów 

Arcyirytujące było dla mnie to, że kiedy wchodziłem w tryb edytora Ex (dla niewtajemniczonych dodam, że jest to mod po naciśnięciu ":" dwukropka) to nie mogłem użyć zawartości bufora czyli wkleić tego co tam sobie siedziało. 
Oczywiście jest to możliwe: 
Ctrl-R-" wklejenie z domyślnego bufora 
Ctrl-R-a wklejenie z bufora o nazwie a do linijki Ex 
Kontynuując ten wątek to wszystkie problemy rozwiązuje wejście w tryb Command-line: 
Ctrl-F - z trybu Command czyli juz po naciśnięciu: 
q: - z trybu Normal (szczegóły na :help q:) 
:tabnew nazwa_pliku otwarcie pliku w nowej zakładce 
:tabn następna zakładka 
:tabp poprzednia zakładka 

Reformatowanie kodu: 
V zaznaczenie tekstu do reformatowania 
= reformatowanie (znaczek "równa się" :)

Zaznaczanie blokowe:

Super sprawa. Wciskam Ctrl-V i zaznaczam prostokątny fragment tekstu. Teraz można już z tym zrobić wszystko tak, jak w trybie Visual.
Ale najfajniejsze jest wcisnąć Shift-i, wpisać coś i nacisnąć Esc. Wpisany tekst pokazuje się w każdej zaznaczonej linijce.

Lekki opis dla ludzi już coś wiedzących znajduje się na http://pl.wikibooks.org/wiki/Vim/Więcej_niż_edytor

Cieniowanie pojemników w CSS

Od wersji 3.0 pojawiła się możliwość cieniowania pojemników (nareszcie!). No i co? No i nie działa! Mówi się, że na razie. Pożyjemy, zobaczymy. Na razie stosujemy więc durne sztuczki (jak zwykle!).

Zakładam, że mamy pojemnik:

<div class="shadow">Tra ta ta!</div>

Powinien dać się podcieniować przy pomocy:

.shadow {
  box-shadow: 2px 3px 5px gray;
}

Oczywiście nigdzie to nie działa, mimo, że specyfikacja określa to w sposób jasny. Trzeba stosować sztuczki:

.shadow {
   -moz-box-shadow: 2px 3px 5px gray;
  -webkit-box-shadow: 2px 3px 5px gray;
  box-shadow: 2px 3px 5px gray;
}

Bóg mi światkiem, że nie rozumiem dlaczego w Firefxie działa

   -moz-box-shadow: 2px 3px 5px gray;

a nie działa

  box-shadow: 2px 3px 5px gray;

Co za różnica we wpisywanych literkach? W każdym razie to zadziała.

Jeszcze znaczenie poszczególnych pozycji:
2px - przesunięcie w poziomie
3px - przesunięcie w pionie
5px - rozmycie
gray - kolor cienia

No i jeszcze uwaga. Głupi Internet Explorer nie obsługuje niczego! Należy zapomnieć o naturalnym cieniowaniu. Nadal trzeba rysować szczątki cieni w Photoshopie, czy czymś takim...

Automatyczne rozbudowywanie kodu poprzez JavaScript

Pisząc kod stron, a szczególnie formularzy często pojawiają się standardowe elementy strony np.

<input type="submit" value="Zatwierdź"/>

Nic wielkiego, ale grafik sobie zażyczył takiego:

<div class="bt_submit">
        <img src="images/bckg_submit_left.png" alt=""/>
        <span>Zatwierdź</span>
        <img src="images/bckg_submit_right.png" alt=""/>
</div>

Nie ma rady. Trzeba tak pisać. Po trzecim razie miałem dość. Bo gdzie jest zasada DRY (Dont Repeat Yurself?).
Wymyśliłem tak: tam gdzie będzie potrzebny przycisk "Zatwierdź" w kodzie strony napiszę:

<div class="bt">Zatwierdź</div>

a do tego napisałem trochę prostego kodu w JavaScripcie.
Korzystam z frameworka jQuery więc by to wyglądało tak:

jQuery(document).ready(function() {
    var bt=jQuery('div.bt');
    makeBtSubmit(bt);
});

function makeBtSubmit(bt) {
    var btText=bt.html();
    var initialBtClassName='bt'; //umowna
    var targetBtClassName='bt_submit'; //umowna, ale posiadająca swój CSS
    bt.removeClass(initialBtClassName);
    bt.addClass(targetBtClassName);
    var imageLeft='<img src="images/bckg_submit_left.png" alt=""/>';
    var imageRight='<img src="images/bckg_submit_right.png" alt=""/>';
    var spanInside='<span>'+btText+'</span>';
    var htmlInside=imageLeft+spanInside+imageRight;
    bt.html(htmlInside);
}

Teraz więc wszędzie gdzie wystapi mój kod

<div class="bt">Zatwierdź</div>

zostanie automatycznie zamieniony na kod wymagany przez grafika.

Wyśrodkowanie tekstu w pionie (CSS)

W specyfikacji CSS (jak na razie) nie ma bardzo ważnego zapisu dotyczącego środkowania tekstu  w pionie. Trudno to jakoś silnie uzasadnić. Trudno to w ogóle uzasadnić. Ostatnio w modzie jest używanie CSS. Uważany jest on jako panaceum na wszystko włącznie z modnym pisaniem kodu. Wystarczy jednak do niego siąść i gołym okiem widać kompletny bezsens tego potworka. Opisywany tutaj problem to zaledwie jeden z wielu. Wystarczy spróbować wycentrować jakiś blok, zrobić menu itp. itd. Potworek siedzi na karku potworka, a wszystko to ziejący ogniem potwór pogania. Składnia wygląda trochę jak kawałkowana Java z amputowaną logiką. Trochę tu dziedziczenia. Jedne elementy po sobie coś dziedziczą, inne zaś nie. Oczywiście bez żadnej logiki. Brak zmiennych przyprawia o ból głowy. Jeśli stosuję zaledwie kilka kolorów na stronie to bywa, że skaczę po pliku jak wariat, żeby sobie przypomnieć, gdzie ostatnio użyłem jasnozielonego i kopiuję, a potem odszukuję gdzie ostatnio pisałem i wklejam skopiowany kod. Trochę w tym pomaga IDE, ale to nie znaczy, że problem przestaje istnieć.
Arcyirytującym oślarstwem jest zmiana znaczenia znaczników html przez CSS. Czytam cudzy kod strony w html'u i nic z niego nie da się zrozumieć. Wszędzie pełno <span> i <div>, znaczenia których nie można się w żadnym wypadku domyślić bez wertowania plików CSS i zgadywania co też autor miał na myśli w chwili artystycznego szału. Mickiewiczowskie "czterdzieści i cztery" to pestka przy tej zgaduj-zgaduli. Zwolennicy, czy wręcz prorocy i kapłani CSS jako główny atut przedstawiają czystość kodu przy stosowaniu CSS. O matyldo! Wczoraj czytałem kod strony, gdzie menu, przyciski, a nawet (winszuję) formularze oparte były o elementy <ul> i <li>. Kod był przemieszany zaangażowaniem kucharza z adhd mieszającego sałatkę warzywną. Twórca htmla by się, przysłowiowo, w grobie przewrócił.

Przytaczam tu artykuł:
http://phrogz.net/css/vertical-align/index.html
który dość pełnie opisuje idiotyzmy i łapanie się prawą nogą za lewe ucho aby wyśrodkować element w pojemniku w pionie.
Dowiadujemy się z niego UWAGA!, że aby wyśrodkować jedną linijkę w pionie należy linię tekstu pogrubić do rozmiaru pojemnika, w którym się ta linia znajduje. Innymi słowy jeśli pojemnik ma wysokość 500 pikseli, to i linia powinna mieć wysokość 500 pikseli, czyli line-height: 500px;. Oczywiście o ile znamy wysokość pojemnika. Przy pojemnikach o zmiennej wysokości to już nie działa. Czy to nie idiotyzm? Prorocy CSS co wy na to? Duże oczka? Zaskoczeni? A nie ma czym! Należy się nauczyć takich sztuczek jeśli inaczej się nie da. Musimy umieć stosować takie potworki bo twórcy CSS nie przewidzieli tego... tamtego... jeszcze tamtego... i jeszcze... i jeszcze... i trzy kropki. A pomyśleć, że dla komórki w tabeli się dało! Tam jest atrybut valign. Wystarczy wpisać valign=middle i gotowe! Jak widać w jednym miejscu się da, a w innym już nie.

Oddzielnie opiszę centrowanie pojemników w poziomie, bo oczywiście tego też się nie dało. Jednak, jak w poprzednim przypadku, w tabelach się dało i to działa.