Pseudo-klasy i pseudo-elementy w CSS

CSS pozwala na definiowanie wyglądu strony i radzi sobie z tym całkiem nieźle. Pozwala na „uchwycenie” za pomocą odpowiedniego selektora elementu (lub zbioru elementów) i przypisanie do niego odpowiedniej reguły CSS. Są jednak takie elementy na stronie, których na próżno szukać w kodzie – choćby łącze (znacznik <a/>) nad którym znajduje się kursor. Element ten w kodzie HTML nie zmienił się, a często jego wygląd uległ zmianie. Jak to się stało? Tu w grę wchodzą pseudo-klasy oraz pseudo-elementy.

Pseudo-klasy

Najbardziej popularnymi pseudo-klasami są te związane z obsługą hiperłączy. Pewnie nie raz widziałeś, gdy link do podstrony, którą już przeczytałeś zmieniał swój wygląd. Choćby na tym blogu po najechaniu na linki po prawej stronie kolor tekstu stanie się jaśniejszy.

Selektory pseudo-klas pozwalają na określanie stylów dla elementów, których nie da się znaleźć w kodzie HTML wprost. Ich „istnienie” wynika z pewnych konkretnych chwilowo zaistniałych warunków – jak choćby wspomniane najechanie na łączę. Czytaj dalej Pseudo-klasy i pseudo-elementy w CSS

Drugi meet.js w Gdańsku

Kolejne spotkanie z cyklu meet.js miało wczoraj miejsce „tradycyjnie” w Inkubatorze Starter w Gdańsku. Po raz kolejny trójmiejscy front-endowcy pokazali, że są chętni dzielenia sie wiedzą dotyczącą JavaScript. Na widowni zasiadło znowu ponad 100 osób (dokładnych statystyk nie znam, ale chyba było odrobinę mniej osób niż zeszłym razem).

Jeśli chodzi o prezentacje to myślę, że także można być usatysfakcjonowanym – Node.js, MongoDB, łańcuchy prototypów oraz asm.js. Z pewnością dało to niezły obraz aktualnych trendów w JS i technologiach pobocznych.

Moim zdaniem najciekawsze było wystąpienie Błażeja Krysiaka – „MongoDB – NoSQL’owa baza danych w JS”. Prezentacja niezwykle przejrzysta, techniczna, ale z doskonale zachowaną proporcją między kodem, a poziomem abstracji pozwalającym wynieść wiele osobom, które pierwszy raz słyszały o nierelacyjnych bazach danych. Brawo!

Ponoć przez wakacje czeka nas przerwa w spotkaniach meet.js. Mam nadzieję, że po letniej przerwie wracamy z nowymi, ciekawymi prelekcjami.

Specyficzność selektorów CSS

Każda większa strona internetowa posiada duży (lub bardzo duży) zbiór reguł CSS, czasem umieszczonych w kilku plikach. Do tego nierzadko znaleźć można dodatkowe reguły wklejone w znaczniku <style />, a także wstrzyknięte inline definicje przez atrybut `style’ znaczników HTML (styl wewnętrzny).

Nie jest niczym dziwnym, że do jednego elementu w takich ogromie kodu zostanie przypasowana więcej niż jedna reguła. Może się zdarzyć, że reguły będą definiować te same właściwości wyglądu elementu w różny sposób. Jak w takiej sytuacji dojść do tego jak powinien wyglądać dany element? Odpowiedzią jest specyficzność (ang. specificity) każdego z selektorów. Można się także spotkać z określeniem „precyzja selektorów”. W przypadku kilku deklaracji będących ze sobą w konflikcie (np. 3-krotnej definicji koloru tekstu) wybrana zostaje ta definicja tego selektora, który ma najwyższą specyficzność. Czytaj dalej Specyficzność selektorów CSS

Książka: „HTML5. Zaawansowane programowanie”

HTML5. Zaawansowane programowanieHTML5. Zaawansowane programowanie

HTML5 zawitał na dobre pod strzechy wraz z najnowszymi wersjami popularnych przeglądarek. Oczywiście, nie wszystko jest już wspierane (na to WHATWG daje światu czas do 2022 r.), jednak nawet tylko część aktualnie zaimplementowana w najważniejszych przeglądarkach na rynku daje niesamowite możliwości.

Chciałbyś rysować na stronie (wektorowo czy też bitmapy?), chciałbyś mieć lepszą komunikację między zakładkami? Między stronami? Między sesjami (bez użycia ciasteczek)? Chcesz używać WebSocketów? A może policzyć coś w osobnym wątku bez blokowania interfejsu?

Tak, nadal mówię o programowaniu za pomocą natywnego JavaScript. Bez wtyczek. Bez kompilatorów. Bez problemów. Z użyciem nowych API dostarczanych przez specyfikacje HTML5.

Starczy reklamy technologii. O tym, że HTML5 będzie przyszłością sieci już chyba nie trzeba nikogo przekonywać. Natomiast na pewno warto zareklamować książkę „HTML5. Zaawansowane programowanie” autorstwa Petera Lubbersa, Briana Albersa i Franka Salima. Nie jest to książka, z której początkujący nie-programista nauczy się programować. Nie ta pozycja, nie taki cel postawili sobie autorzy. Natomiast każdy webdeveloper dobrze radzący sobie z programowaniem dostanie bardzo czytelny i przyjemny w lekturze przegląd nowych możliwości JavaScriptu. Każdy rozdział dotyczy innego API (m. in. canvas, websocket, web workers itp.). Nie jest to jedynie lista dostępnych pól nowych obiektów, ale konkretne „żywe” przykłady. Bardzo podobały mi się także ramki z dodatkowymi uwagami autorów – przestrogi przed możliwymi pułapkami, rady i pomocne uwagi. Czytaj dalej Książka: „HTML5. Zaawansowane programowanie”

Spotkanie z Mariuszem Chrapko – polskim guru Scruma

W czwartek 23 maja na wydziałe Zarządzania i Ekonomii PG odbyło się spotkanie autorskie z Mariuszem Chrapko (autorem książki „Scrum. O zwinnym zarządzaniu projektami„).

Po lekturze książki miałem kilka nierozwianych wątpliwości, choćby – czy za wszelką cenę należy trzymać się scruma, czy też ważniejsza jest organizacja w firmie (np. w duży koncernie). Ciekawą odpowiedzią jaką otrzymałem na to pytanie była analogia do piłki nożnej: istnieją odgórnie określone zasady gry w piłkę – 10 zawodników w polu, jeden bramkarz. Wiadomo, czego nie wolno robić, wiadomo co punktujemy (bramki). Jednak cała gra, ustalona taktyka, sposób jej wykonania czy też konkretne akcje wynikają z kreatywności drużyny.

Miałem nadzieję na odpowiedź trochę łatwiejszą do zastosowania w praktyce – co, jeśli przyjdzie mi grać przeciwko Barcelonie?! (lub aktualnie gorzej – Bayernowi :P). Muszę jednak przyznać, że spodziewałem się podobnej odpowiedzi. W końcu wszystko zawsze „zależy”.

Choć wydana nakładem Helionu pozycja napisana była językiem (jak to określił Autor) „pop kulturowym” prezentacja w trakcie wystąpienia miała bardziej charakter naukowy. Przyznam, że zaskoczyło mnie to bardzo pozytywnie. Choć temat był dość dobrze mi znany, treść nie była żadnym wielkim zaskoczeniem, to całość uważam za bardzo ciekawą i wartą wysłuchania (tu szczególnie podpowiedź dla mieszkańców okolic Krakowa, gdzie ma się odbyć kolejne spotkanie). O czym w skrócie można posłuchać? Prezentacja była o tym, dlaczego nie można dzisiaj wykorzystać XIX-wiecznych metod zarządzania.

Dlaczego? „Nie da się wynająć rąk do pracy, bo z rękoma przychodzi pracownik” 😉

Zrzuty ekranu za pomocą JavaScript (HTML5 – canvas)

Wraz z nadejściem HTML5 i jego wielu rewolucyjnych API nastała era rzeczy, które dawniej wydawały się trudne / bardzo trudne / niewykonalne (niepotrzebne skreślić).

Jedną z takich funkcji jest możliwość rysowania za pomocą JavaScriptu na płótnie (ang canvas). Służy do tego znacznik <canvas /> oraz odpowiednie API przypominające podobne rozwiązania z innych języków programowania.

Rysowanie ekranu na płótnie

Nie, nie miałem aż tak wiele czasu, aby napisać to samemu. Miałem jednak trochę, aby wygoogle’ować ciekawą bibliotekę. Padło na bardzo przyjemną w użyciu html2canvas. Kod tej biblioteki przed spakowaniem ma prawie 3k linii, co trochę zniechęca do pisania tego własnoręcznie.

Do zastosowania biblioteki zachęca także przyjazna licencja (MIT) oraz kilka bardzo przydatnych funkcji. Zobaczmy jednak prosty przykład zastosowania:

[javascript]html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});[/javascript]

demo online Czytaj dalej Zrzuty ekranu za pomocą JavaScript (HTML5 – canvas)