luq techblog

o tworzeniu słów kilka…

Inne spojrzenie na style CSS 4 stycznia 2011

Filed under: CSS,Web,Webmastering — Łukasz @ 19:07
Tags: ,

Wstęp


Ostatnio coraz częściej zdarza mi się pracować na frontend-zie. W sumie zawsze myślałem, że to nie może być ciekawe, ale przyznaje – myliłem się… W dobie, cały czas tworzonego jeszcze, HTML5 oraz wdrażanego CSS3 można naprawdę fajnie się pobawić tymi nowymi mechanizmami. Oczywiście największym problemem w tej warstwie aplikacji webowej jest integracja ze wszystkimi popularnymi przeglądarkami które nie zawsze interpretują nasz kod tak jak trzeba, natomiast można też przyczepić się do ograniczeń płynących z samego CSS-a.

 

Jeśli się zastanowić nad tym to dojdziemy do wniosku, że jedyne zmiany dokonywane są przez dodawanie nowych właściwości (rzadziej selektorów czy pseudoklas) Oczywiście, to bardzo duże zmiany – opacity, border-radius, box-shadow etc. otwierają nam drogę ku naprawdę fajnym rozwiązaniom. Natomiast brak zmian w tzw. warstwie core. W sumie to logiczne, bo z tym co mamy możemy zrobić wszystko, tyle, że nie zawsze jest to takie łatwe, proste i czytelne.

 

Czego brakuje

Zapewne zastanawiasz się teraz o czym mowa. Chodzi np. o przekazywanie zmiennych do arkusza styli, dzięki czemu możemy uzyskać efekt personalizacji strony. Obojętnie czy to będzie kolor tła na podstawie pogody/pory roku/pory dnia czy inny styl zależny od miejsca aktualnie zalogowanego użytkownika w rankingu. Z tym co dziś mamy da się to zrobić w całkiem prosty, lecz nie do końca elegancki sposób.

 
(more…)

 

Canvas & Sprites 2 lipca 2010

Filed under: GameDev,GameMap,JS,Web — Łukasz @ 19:19
Tags: , ,

Mapa

Tak jakoś wyszło, że postanowiłem napisać własny system poruszania się po mapie w widoku od góry. Mam teraz trochę czasu więc co mi tam… a skrobnę se… a co?! Całość ma działać tak jak dużo gier na GameBoy`a tzn. mamy bohatera który pozostaje zawsze na środku ekranu, oraz ma ograniczony widok ma mapę (widzi tylko to co jest najbliżej niego). Idąc przesuwa się mapa tj. widzi to czego wcześniej nie widział…

 

Zresztą chyba każdy wie o co chodzi :)

 

Całość będzie oparte o canvas (HTML5), JS + jQuery + Ajax + JSON, MySQL i PHP.

 

Grafika została pobrane z jakiegoś ogromnego obrazka-mapy i nie należy do mnie, jest użyta jedynie w celu pokazowym. Jeśli jesteś autorem i nie podoba Ci się to, że prezentuję kod wraz z Twoją grafiką, proszę o kontakt via email

 

W tym wpisie chcę opisać jak generować mapę.

 

(more…)

 

CSS idealny cross-browser 4 czerwca 2010

Filed under: CSS,JS,PHP,Web — Łukasz @ 23:06
Tags: , , ,

Jako nie-frontendowiec zawsze przeraża mnie pisanie styli cross-browser, nie znam na tyle co jaka przeglądarka interpretuje, co gdzie nie działa i jakim sprytnym sposobem to rozwiązać, żeby na reszcie przeglądarek się nie posypało. Idealnym wyjściem byłoby chyba pisanie css`a dla każdej przeglądarki z osobna, no może nie tak całkiem tak dla każdej z osobna…

 
(more…)

 

Ukrywanie plików dla innych serwerów… 7 Maj 2010

Filed under: Ajax,JS,PHP,Security,Web — Łukasz @ 09:31
Tags: ,

Wczoraj, na forum.php.pl pojawiło się pytanie dotyczące tego jak ukryć dane z pliku *.js, tak żeby user nie mógł ich podejrzeć. Oczywiście odpowiedzią na te pytanie, jest krótkie „nie da się”, ale można zrobić kilka rzeczy aby utrudnić podejrzenie pliku czy uniemożliwić użycie go na innym serwerze, w sposób:

 

<script type="text/javascript" src="http://www.example.com/file.js"></script>

 

O tym właśnie jest ten wpis.

 

(more…)

 

Konferencja w ramach projektu GNU/Politechnika 5 Maj 2010

Filed under: Web — Łukasz @ 19:03
Tags:

Dziś krótki wpis.

 

Chciałem w ramach mojego bloga zareklamować trochę konferencję organizowaną przez Studenckie Koło Naukowe Linuksa i Wolnego Oprogramowania przy Politechnice Śląskiej (SKNLiWO) oraz PLUG Oddział Śląsk. Prelekcji można będzie posłuchać 7 maja (13:00 – 20:30) na Wydziale Automatyki, Elektroniki i Informatyki przy ulicy Akademickiej 16 w Gliwicach. Wstęp oczywiście wolny ;)

 

Agenda prezentuję się całkiem ciekawie jak dla mnie:

 

* 13:00-14:30 – Django – pythonowy framework webowy – Damian Kusnik
* 14:30-16:00 – Budowa systemu telefonii z wykorzystaniem serwerów Asterisk i Kamailio – Andrzej Nowrot
* 16:00-17:30 – Wirtualizacja Linuksa – czyli komputer w komputerze dla początkujących – Bartosz Lenar
* 17:30-19:00 – Ekosystem Perla – Witold Rękawek
* 19:00-20:30 – Python – Atlanta, Chicago, Birmingham i Ustroń – Piotr Kasprzyk

 

Jeśli się nic nie zmieni to będzie można mnie tam spotkać.

 

Więcej informacji na http://osnews.pl/konferencja-w-ramach-projektu-gnupolitechnika/

 

Catch the block 22 kwietnia 2010

Filed under: GameDev,JS,Web — Łukasz @ 23:00
Tags: , , ,

Catch the block
Dziś chciałem przedstawić napisaną przeze mnie grę, właściwie mini gierkę, która została specjalnie stworzona na targi edukacyjne szkół z regionu tarnogórskiego w celu oczywiście promocji mojej szkoły (oczywiście jakże pięknej i wspaniałej!). To od razu rzucę linkiem.

 

GRAJ
Sterowanie: mysz + klawisze [strzałka lewo], [strzałka prawo]
(dla Chrome, [a], [d])

 

Na początku przeważnie pada pytanie „To jest Flash?”, oczywiście klikając prawym klawiszem myszy na tym ustrojstwie nie pojawia się kontekstowe menu Flash`a, a więc odpowiedź brzmi „Nie, to JavaScript ;)”. W tym wpisie nie znajdzie się miejsce na opis techniczny, możliwe że zrobię to później a może nigdy. Chciałem się tutaj skupić na zasadach gry i informacjach przydatnych dla chcących sobie złapać klocka.

 

W czym grać

Jeśli masz i używasz na codzień IE, to raczej sobie nie pograsz. Znaczy, teoretycznie gra chodzi i działa, ale z powodu tego, że IE jest strasznie wolny, wolno interpretuje JavaScript`a, a do wersji 7 (bo taką mam u siebie zainstalowaną) nie zaimpletowano obsługi właściwości rodem z CSS 3 (opacity [zamiast tego korzysta się z filter] oraz border-radius) to odradzam zupełnie granie w grę pod IE. Polecam Chroma, bo najszybciej interpretuje JavaScripta, w Firefox`ie działa równie dobrze, pod Operą słyszałem, że też, chodź tego nie testowałem. Grałem też pod Safari i jest całkiem okej.

Jak grać

Bardzo zdziwiło mnie, że duża cześć osób którym nie tłumaczyłem zasad in live ma problem z pojęciem zasad które są tak naprawdę proste. Głównym celem gry jest zebranie jak największej ilości punktów. Nie oszukuj się, zawszę kiedyś przegrasz ;) Punkty zdobywamy zbierając klocki aktualnego koloru, czyli tego widocznego w kółku u dołu ekrany gry. Nie trzeba klikać! Wystarczy najechać. Za każdy zebrany w ten sposób klocek dostajemy 3 pkt. To mało, i jeśli chcemy zajść daleko trzeba się skupić na combosach. W prawym dolnym rogu widzimy kolory klocków z kolejności jakiej mamy je zebrać (wykluczając pierwszy level, oczywiście z powodów logicznych). Dla przykładu, widzimy (od lewej) zielony, czerwony. Jeśli zbierzemy zielony a następnie czerwony klocek to poza 6 pkt. dostaniemy dodatkowo 20pkt. Punkty za combo są liczone wg. wzoru:

ilość_klocków_w_combo * 10

Oczywiście aktualny kolor zmieniamy klawiszami strzałek (w Chromie jest to [a], [d]). Pamiętaj, że jeśli aktualny kolor to np. czerwony, a Ty zbierzesz niebieski to tracisz życie. Grę przegrywasz jeśli stracisz wszystkie życia lub skończy Ci się czas, do którego z każdym przejściem do nowego levela zostają dodane kolejne cenne sekundy (zdefiniowane różnie od każdego poziomu). To chyba tyle.

 

Zdefiniowanych jest 8 poziomów. Nigdy nie udało mi się przejść do ostatniego. Mój najlepszy wynik oscyluje gdzieś między 1200 a 1300, dokładnie niestety nie pamiętam. Jeśli ktoś miał podobny lub większy piszcie w komentarzach :)

 

Ajax md5() 28 marca 2010

Filed under: Ajax,JS,Security,Web — Łukasz @ 11:19
Tags: , , , , ,

Dziś coś na temat bezpieczeństwa. Pomysł na ten wpis zrodził się dziś rano, gdy wchodząc na forum.php.pl zobaczyłem temat w którym, ktoś potrzebował użyć PHP`owej funkcji pack() po stronie klienta. W odpowiedzi rzucono mu linka http://phpjs.org/functions/pack:880. Szczerze powiedziawszy spotkałem się z tą stroną pierwszy raz i się miło zaskoczyłem. Strona phpjs.org to próba przeportowania funkcji występujących w PHP na język JS. Aktualnie progres tego zadania liczony jest na 81.7% czyli sporo… Dobra ale ja nie o tym chciałem, może kiedy indziej napiszę coś o phpjs… Jakiś czas temu widziałem także, na czyimś blogu, pomysł na liczenie md5 po stronie klienta (szkoda, że nie mam linka a jednak znalazłem http://necro.nomicon.pl/2009/01/24/making-of-javascript-botnet). Ogólnie chodzi o to, aby potencjalny user czytając wpis na blogu, liczył hashe md5() z kolejnych niewyliczonych stringów, następnie wynik zapisywał z powrotem do bazy,wszystko działało oczywiście w oparciu o technologie Ajax, bez świadomości czytającego co jego komputer właśnie robi. W ten sposób obciążamy liczeniem maszyny osób serfujących po internacie, natomiast nam pozostaje jedynie magazynowanie wyników tych operacji. Ten wpis jest próbą skonstruowania czegoś podobnego. Czy się udało? Co z tego wyszło? Czytaj dalej :)

 
(more…)