Ryu Narujima
Dynamika, technika, taktyka i psychika. Nic dodać nic ująć.
Miałem okazję brać udział w treningu prowadzonym przez Narujime (Obóz Letni Kraków - Karate Kyokushin). Robi wrażenie, niezapomniane.
Index¶
vim - cheat sheet
Jak już jestem przy tym temacie do podobny zestaw dla fanów VIM'a (m.in. mnie ;) )
Konsola jak w Quake
Czy zdaża Wam się szukać jakiejś wolnej konsoli, na którymś pulpicie ? Można też do paska w Gnome lub KDE przypiąć minikonsole (brr).
Wygodnym rozwiązaniem byłaby podręczna konsola, pojawiająca się kiedy jest potrzebna - podobnie jak w grach typu Quake.
Osobiście znam trzy tego typu rozwiązania:
- yakuake - konsola z KDE (działa we fluxboxie, więc inne WM pewnie też dadzą radę
- kuake - także konsola z KDE
- tilda - samodzielna konsola
Mi osobiście najmniej podobała się tilda, zaś na biurku ciągle używam yakuake. Domyślny skrót klawiszowy dla yakuake to F12, który szybko zamieniłem na CTRL+~. Do tego kolory zwykłej konsoli, mniejsze fonty i gotowe. Jak to w KDE możliwe jest uruchamianie w ramach Yakuake kilku zakładek. Konsola ładnie się chowa gdy na pulpicie wyskoczy na okienko, lub wystąpi inna akcja pragnąca focusa.
Teoria względności
Znalezione w stopce:
Pracownik jest zbędny w firmie gdy prosi o podwyżkę, lecz niezastąpiony gdy prosi o urlop
Tworzenie strony internetowej.
Po co tworzymy stronę ? By pisać blog. Umieszczać informacje o sobie, o naszych zainteresowaniach, itp. Co by to nie było, strona nasza będzie zawierać treść i z jej uwzględnieniem powinna zostać ona zbudowana. Ukierunkowanie na treść oznacza prawidłowe stosowanie znaczników <h1>, <h2> dla odpowiednich nagłówków, <ul>, <ol> dla list w tym także menu, <p> dla naszej treści oraz <div> dla podziału logicznego strony (np. budowy layout). Oczywiście znaczniki te nie wyczerpują listy możliwych i potrzebnych do zastosowania w naszym przypadku. Na stronie http://www.latenightrabbit.com/ znajduje się proste i skuteczne wprowadzenie do prawidłowej budowy strony internetowej przy pomocy oczywiście HTML oraz CSS i PHP Polecam tą lekturę każdemu. Materiał jest napisany w języku angielskim ale najważniejszy i tak jest kod. Więc jeśli widziałeś kiedyś HTML, CSS lub przypadkiem PHP to powinno wystarczyć.
Własna strona startowa
Popularne (choć chyba powoli) stają się serwisy oferujące osobiste strony startowe. Strona taka zawiera często newsy z interesujących nas serwisów, okienko logowanie się do naszego serwisu pocztowego, pogodę, kursy walut, notatki i wiele innych.
Z polskich serwisów kojarzę jedynie startowy.com. Ostatnio dużo słychać także o witrynie Microsoftu live.com. Wczoraj natomiast wpadł mi do Firefox'a taki adres jak www.netvibes.com/.
Cechą wspólną tych serwisów jest wygodna edycja swojej strony oraz wygodnie przemieszczanie jej elementów. Aby korzystać z startowy.com należy się zarejestrować. Otrzymujemy wtedy swój osobisty adres np. mojastrona.startowy.com, który możemy propagować wśród naszych znajomych (dokładając np. do niej własny blog). Serwis ten odbiega więc od funkcji tylko naszej osobistej strony startowej.
live.com oraz www.netvibes.com natomiast nie dają możliwości stworzenia własnego zewnętrznego adresu. Zapamiętują Twoje ustawienia za pomocą ciasteczek (cookies) lub po zarejestrowaniu swojego adresu email i ustawieniu hasła, możemy uzyskać dostęp do swojej strony z dowolnego komputera i przeglądarki.
Pod względem różnorodności box'ów (funkcji) www.netvibes.com pozostaje na topie, natomiast live.com umożliwia nam dodatkowo sterowanie layoutem (ilość kolumn, język strony).
Oczywiście live.com (domyślnie) oraz www.netvibes.com są serwisami anglojęzycznymi.
słownik wyrazów obcych
Do strony z wyszukiwarkami dla Firefox'a dodałem wyszukiwarkę do Słownika Wyrazów Obcych Kopalińskiego
Wystarczy kliknąć na dodaj obok opisu w tabelce, przełączyć w prawym górnym rogu Firefox'a wyszukiwarkę z Google na Kopaliński i szukać :D
skracanie formularzy + java script
Długie formularze, podzielone na kilka sekcji ciągnące się w dół strony, nie są zbyt czytelne. Formularz taki można zmodyfikować dzieląć go na klikalne etapy lub wizualne zakładki. Ale jeżeli mamy wiele takich formularzy napisanych na dodatek w samym HTML'u ?
Możemy to sobie uprościć za pomocą JavaScript. Odpowiednia funkcja wywołana po załadowaniu się strony [body onLoad="funkcja();"] może wyszukać sekcje naszego formularza i zwinąć je do ciekawszych wizualnie zakładek.
Żeby funkcja wiedziała co jest sekcją, należy je odpowiednio oznaczyć np. poprzez odpowiednią klasę CSS 'subpanel'
Druga ważna rzecz, skrypt musi wiedzieć jak nazwać zakładki. Do tego wykorzystałem atrybut title. Nasz kod wygląda teraz tak:
<div class="subpanel" title="zakładka 1">
<h2>sekcja 1</h2>
</div>
<div class="subpanel" title="zakładka 2">
<h2>sekcja 2</h2>
</div>
Teraz za pomocą JavaScript możemy odnaleźć wszystkie znaczniki DIV.
if (!document.getElementsByTagName
|| !document.createElement
|| !document.appendChild) return;
/* pobieramy wszystkie div'y */
var divs = document.getElementsByTagName("div");
Następnie przygotowywujemy dodatkowy element DIV, w którym umieścimy stworzone zakładki.
/* nr. pierwszego div'a z klasą subpanel */
var firstDiv = -1;
/* tworzymy div na nasze menu */
var menu = document.createElement("div");
menu.className = "panels_menu";
menu.setAttribute("id","panels_menu");
Pozostaje nam przejść się pętlą po wszystkich znalezionych DIV'ach i wybrać te, które posiadają klasę 'subpanel'. Z każdego z nich pobieramy wartość atrybutu title i naszym 'menu' tworzymy odpowiedni odnośnik:
var source = divs[i].getAttribute("title");
if (!source) continue;
var link = document.createElement("a");
link.setAttribute("href","#"+source);
link.setAttribute("onclick","activMenu(this); ");
link.onclick = new Function('activMenu(this);'); // dla IE
link.setAttribute("id","menu_"+divs[i].id); // dla wywołań zewnętrznych
link.appendChild(document.createTextNode(source));
Aktywujemy pierwszą naszą zakładkę i dodajemy je do naszego nowego menu:
if(firstDiv == -1) firstDiv = i;
if(i == firstDiv) {
divs[i].style.display='block';
link.setAttribute('class','active');
}
/* dodajemy odnośnik do menu */
menu.appendChild(link);
link.className = "active"; // dla IE
A po zakończeniu całej pętli wklejamy nasze zakładki przed pierwszego DIV'a z klasą 'subpanel':
/* wklejamy stworzone menu nad pierwszym div'em */
divs[firstDiv].parentNode.insertBefore(menu,divs[firstDiv]);
Tyle w temacie stworzenia zakładek. Pozostaje nam stworzyć funkcję activeMenu(this), którą wywołujemy po kliknięciu w odpowiednią zakładkę.
function activMenu(menu) {
menubox = document.getElementById('panels_menu');
links = menubox.childNodes;
/* ustalamy clasę 'active' dla naszego
odnośnika, a reszcie null */
for(x=0;x<links.length x if links menu.classname="active" menu.blur var divs='document.getElementsByTagName("div");' chowamy wszystkie div pr aktualnego for i="0;" menu.innerhtml else return false ca zwie drobny>CSS:
.panels_menu a {
color: #eee;
text-decoration: none;
background: #666;
padding: 0px 5px;
margin: 0px 2px;
border: solid 1px #333;
}
.panels_menu a:hover {
background: #ccc;
color: #f33;
border-bottom: solid 1px #ccc;
}
.panels_menu a.active {
background: #eee;
color: #333;
border-bottom: solid 1px #eee;
}
.subpanel {
border: solid 1px #333;
padding: 10px;
margin: 0 0 10px;
}
Wystarczy teraz do <body> dodać onLoad="preparePanels()" i to już wszystko.
Poniżej jest pełen kod funkcji preparePanels():
function preparePanels() {
if (!document.getElementsByTagName
|| !document.createElement
|| !document.appendChild) return;
/* pobieramy wszystkie div'y */
var divs = document.getElementsByTagName("div");
/* nr. pierwsze div'a z klasą subpanel */
var firstDiv = -1;
/* tworzymy div na nasze menu */
var menu = document.createElement("div");
menu.className = "panels_menu";
menu.setAttribute("id","panels_menu");
for (var i=0; i<divs.length i je klasa div to subpanel to:
if firstdiv="i;" sprawdzamy istnienie atrybutu
var source='divs[i].getAttribute("title");'
continue chowamy divs tworzymi odno do w naszym menu link='document.createElement("a");' link.setattribute link.appendchild jest pierwszym go aktywujemy dodajemy menu.appendchild wklejamy stworzone nad dzia przyk znajduje si href="http://onjin.net/misc/opanels/menu.php">tutaj. Odnośniki w lewym górnym rogu strony uruchamiają wersję kolejno z i bez preparePanels().