Na wypadek gdyby ktoś miał konto na www.hosteurope.de lub u ich resellerów (np. hosting w eHost.pl.
Traf chciał, że przypadkiem skasowałem, zamiast przesunąć ważny folder - mały, bo mały, 300mb z 15gb serwera. Po pierwszych sekundach paniki przyszło opamiętanie - mam backup! Backup z przed 10 dni, akurat nic nie było zmieniane!
Niestety, backup zrobiłem z poziomu Virtuozzo i jak się okazuje, jest to obraz dysku. Po konsultacji z eHost, dowiedziałem się, że uprzejmi panowie z Niemiec jasne, że są w stanie odzyskać ten jeden folder za mnie. Za jedyne 25EUR za każde rozpoczęte 15 min pracy.
Zostaje jeszcze druga opcja - backup z teraz, restore starej kopii, zgranie plików, restore nowej kopii. Zgadnijcie, którą opcję wybrałem. Podpowiedzią może być godzina dodania notki ;-)
Małe podsumowanie:
- zrobienie backupu 15gb - 1:20h
- restore starego backupu - 1:13h
- zgranie plików - 0:15h
- restore nowego backupu - 1:13h
Czyli jestem jakieś4 godziny w plecy, ale jeżeli panowie w Niemczech mieli by to robić, to zakładam, że zajęło by to im z 2 godziny, czyli 200EUR. Odeśpię kiedy indziej ;-)
Notka nie ku przestrodze (F6! F6! To zawsze jest F6 w mc, nie F8!) i dla potomnych, bo niestety Virtuozzo nie ma informacji ile jeszcze zajmie operacja, a Google nie pomogło. Uwaga - podczas restore w panelu będzie pokazana zajętość dysku - skacze od 0% do 10% (1% co ~10 minut) a potem już skacze na tyle, ile de-facto zajmuje i trzeba ponownie uruchomić VPS!
URL Trackback
Po raz kolejny w pracy padło ciekawe pytanie - czy da się zrobić tak, by kolor przekreślenia tekstu był inny niż sam tekst - była to cena w sklepie i tak lepiej wyglądało grafikowi. Dać się da, ale jeden haczyk - wszystko powinno dać się edytować za pomocą edytora WYSIWYG i klient nie ma nigdzie widzieć HTML. Oczywiście im mniej roboty dla Java Script / preg_replace tym lepiej.
Pierwszy pomysł jaki przyszedł mi do głowy ("Podejście 2") to zmniejszenie wysokości kontenera tekstu i zastosowanie overflow: visible. Oczywiście, o ile problem rozwiązany w 5 sekund w Firefox i innych nowych przeglądarkach, o tyle w Internet Explorer 6 dalej nic. Postanowiłem pójść dalej tym tropem - kilka expression w CSS później i rozwiązanie działa też w IE6. Niestety - poza zwiększeniem wykorzystania CPU przez przeglądarkę - ma też inne błędy (opisane w przykładach).
Kolejne rozwiązanie ("Podejście 1") - mogło by wydawać się oczywiste - to osadzenie w tagu <del> dodatkowego <span>, nadanie odpowiednich kolorów odpowiednim znacznikom i gotowe. Niestety, jak już wspomniałem, klient nie będzie oglądał HTML a jedynie wprowadzał go poprzez FCK Editor - więc zostaje albo JS (który można wyłączyć) albo przepisywanie HTML przed wyświetleniem (a wtedy w czasie edycji nie będzie widać przekreślenia).
W ten sposób doszliśmy do kolejnego podejścia ("Podejście 3") - tym razem satysfakcjonującego moje potrzeby - mały GIF w tle. Proste? Można jeszcze prościej - zamiast GIFa w tle dajmy obrazek 1 pixelowy w CSS za pomocą zapisu data (ok, ok - nie działa pod IE6 więc zastajemy przy GIFie ;-))
Tok myślenia oraz ostateczne rozwiązanie można podejrzeć tutaj. Starałem się sprawdzić pod wszystkim co mam pod ręką (IE6, IE8, FF3, Opera 9, Chrome 2 i Safari 4) i wygląda, że działa poprawnie. Czego to Ci graficy nie wymyślą ;-)
URL Trackback
Kilka lat temu z potrzeby chwili napisałem skrypt do sprawdzania formularzy HTML za pomocą JavaScript przed ich wysłaniem - miał on z założenia być prosty i służyć do weryfikowania formularzy kontaktowych, składających się głównie z pól tekstowych tj. "imię i nazwisko", "adres e-mail" oraz "treść wiadomości".
Z czasem skrypt ewoluował, został dodany do firmowego CMSu i zaczął być szerzej używany. Postanowiłem nieco odświeżyć kod - wzbogacić go o parę opcji i przerobić na obiektowy. W ten sposób vForm przekształcił się w cValidate i dorobił numerka 1.1
Sam skrypt można zobaczyć w akcji i przetestować on-line. Będę wdzięczny za uwagi, jeżeli komuś coś nie działa lub działa nie poprawnie.
Instalacja skryptu jest banalnie prosta - wystarczy dołączyć do strony bibliotekę, do pól, które chcemy sprawdzić dodać odpowiednie klasy (więcej na ten temat na stronie demonstracyjnej oraz w samym źródle skryptu) i przed wysłaniem formularza wywołać metodę cValidate.validate(obj) (gdzie obj to Obiekt formularza do sprawdzenia).
P.S. Proszę wziąć pod uwagę, że nie ma to być rozbudowany skrypt opierający się na rozbudowanych bibliotekach pokroju jQuery czy MooTools więc jego możliwości są ograniczone - przypominam, że ma służyć on raczej do weryfikacji prostych formularzy kontaktowych oraz być łatwy i szybki do implementacji.
URL Trackback
Na oficjalnym blogu Google pojawił się właśnie wpis o tym, że gigant planuje wydanie własnego systemu operacyjnego czerpiącego dużo z boomu na Cloud Computing.
Oczywiście Google nie ma zamiaru pisać od zera całego systemu -Google Chrome OS to tak naprawdę zestaw narzędzi działających na firmowym menadżerze okien pod kontrolą systemu GNU/Linux. Wg. zapewnień autorów notki system ma być lekki, pracować na procesorach x86 oraz ARM, co nie jest wielką niespodzianką biorąc pod uwagę podwaliny Linuxowe.
System przeznaczony ma być dla użytkowników wykorzystujących komputer głównie do pracy oraz do przeglądania internetu. Dzięki zastosowaniu w/w Cloud Computing nasze dane będą dostępne dla nas z wielu różnych urządzeń - po prostu większość informacji przechowywana będzie na zasobnych serwerach Google.
Planowana data wydania systemu to druga połowa 2010 roku - zostaje nam tylko czekać na wczesne bety ;-)
URL Trackback
Problem
Ostatnio zdarzyło mi się, że klient uparcie chciał by na stronie wyświetlał się dokładnie 4 linijki z wpisanego testu i by na końcu pojawiało się "więcej" prowadzące do rozwinięcia artykułu.
Ile razy tłumaczyłem klientowi, że niestety nie mamy kontroli nad tym ile tekstu się wyświetli, ponieważ nawet jeżeli ograniczę, że ma pojawiać się tylko 250 znaków, to i tak literka "W" zajmuje więcej niż "I" i wpis składający się z samych "szerokich" liter i tak znów nie wpasuje się w szablon.
Od razu nasuwa się jedno rozwiązanie - użyć czcionki o stałej szerokości znaków np. Courier New. Niestety, czcionka ta nie grzeszy szczególną pięknością.
Ziell na swoim blogu poruszył temat opisując własność CSS "text-overflow". Jednak rozwiązanie to ma swoje (wypunktowane w w/w poście) minusy, które skreślały je dla tego konkretnego zastosowania.
Tekst, który miał być wyświetlony nie zawierał żadnych znaczników HTML - żadnych akapitów, nowych linijek - pisany "ciurkiem" i w 100% przypadków zajmował ponad 4 linijki - dlatego rozwiązanie, które zastosowałem jest dla tego konkretnego przypadku idealne.
Rozwiązanie
Rozwiązanie może jest mało eleganckie - ale ma dwie niewątpliwe zalety:
- działa pod każdą z testowanych przeglądarek
- wyświetla się (chociaż "niepoprawnie") w przeglądarkach nie obsługujących CSS
- jest wygodne dla SEO, chociaż jak się Google połapie, to może dać po łapach ;-)
Poniżej efekt zabiegu, jaki poczyniłem, u niektórych już na pierwszy rzut oka można będzie dowiedzieć się, co i jak działa:
Ten akapit powinien zawierać tylko dwie linijki tekstu. Jeżeli zawiera więcej, oznacza to, że jednak nie wszystko działa tak jak powinno :-) A teraz trochę lorem: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur enim erat, dignissim nec vehicula eget, hendrerit pretium dolor. Sed lacinia arcu ut elit luctus pellentesque tempus justo scelerisque. Morbi congue tempus venenatis. Duis et nibh id ante tempor condimentum non non nulla. Phasellus in dui ac eros vehicula tempus vel eget turpis. Aenean venenatis neque ac turpis mattis nec vulputate mauris gravida. ... więcej
Jak widać (mam nadzieję) zamierzony efekt został osiągnięty - cały przykład tak na prawdę jest dużo dłuższy i składa się z dwóch tagów:
p {
width: 600px;
height: 40px;
border: 1px solid #D3D3D3;
overflow: hidden;
position: relative;
}
Powyższy kod ustala wymiary kontenera (akapitu), dodaje ramkę i ustala pozycjonowanie na relatywne. Dodatkowo parametr overflow gwarantuje nam, że tekst nie "wyleje" się z elementu tylko zostanie przycięty do odpowiednich rozmiarów.
a {
position: absolute;
bottom: 5px;
right: 3px
display: block;
padding-left: 5px;
background: white;
}
Tu dla odmiany dodajemy link do pełnej treści wiadomości, który ustawiamy używając position: absolute w dolnym prawym rogu kontenera, nadajemy mu wyświetlanie jako element blokowy (by padding działał poprawnie) i ustalamy białe tło by przesłonił znajdujący się pod nim tekst.
Przeglądarki, które obsługują CSS wyświetlą ładne dwie linijki i link "więcej", pozostałe wyświetlą pełen tekst a następnie link.
Jak już zaznaczyłem, rozwiązanie to działa tylko wtedy, gdy mamy pewność, że tekst na 100% wypełni nasz kontener, w innym wypadku efekt może być następujący:
Ten akapit dla odmiany ma nie więcej tekstu niż dwie linijki i wygląda trochę mało elegancko - chociaż też można go stosować. ... więcej
URL Trackback
