Hub:Krazov - Ostatnie zmiany [pl]

Before oraz after

2012-05-20T13:38:43Z

‎Wywołanie:

Kategoria:Frontend

2012-05-19T19:28:25Z

Before oraz after

2012-05-19T17:53:07Z

‎Przykład:

Strona główna

2012-05-19T17:48:32Z

Front walki z silnikiem wikipedii

2012-05-19T17:34:12Z

‎Tworzenie szablonu:

Strona główna

2012-05-19T17:32:30Z

‎Kategorie:

Before oraz after

2012-05-19T17:29:06Z

‎Bibliografia:

Kategoria:Frontend

2012-05-19T17:22:47Z

Utworzył nową stronę „Zawodowo zajmuję się frontendem. Czasem, kiedy nie znalazłem, żeby ktoś uczynił to przede mną, napiszę o jakimś zagadnieniu z tej dziedziny.”

Nowa strona

Zawodowo zajmuję się frontendem. Czasem, kiedy nie znalazłem, żeby ktoś uczynił to przede mną, napiszę o jakimś zagadnieniu z tej dziedziny.

Before oraz after

2012-05-19T17:21:19Z

Utworzył nową stronę „Skoro Internet Explorer 7 jest używany przez jakieś 2% użytkowników a popularność responsywnego podejścia do tworzenia stron rośnie, można pochylić się zn...”

Nowa strona

Skoro Internet Explorer 7 jest używany przez jakieś 2% użytkowników a popularność responsywnego podejścia do tworzenia stron rośnie, można pochylić się znacznie bardziej nad rozwiązaniami, które do tej pory odpadały, ''no bo IE7''. Jedną z ciekawszych rzeczy są selektory CSS <code>:before</code> oraz <code>:after</code>.

==Wywołanie==

Wyobraźmy sobie element —

<syntaxhighlight lang="html4strict">
<div class="dupa">Jakiś tekst.</div>
</syntaxhighlight>

któremu w arkuszu stylów nadajemy taką oto własność:

<syntaxhighlight lang="css">
.dupa:before {
content: "Wstęp. ";
}

.dupa:after {
content: " Jakiś dodatkowy tekst.";
}
</syntaxhighlight>

Efekt po przetworzeniu arkusza będzie taki ''jakbyśmy'' wpisali w HTML-u:

<syntaxhighlight lang="html4strict">
<div class="dupa"><span>Wstęp. </span>Jakiś tekst.<span> Jakiś dodatkowy tekst.</span></div>
</syntaxhighlight>

''(W powyższym kodzie jest <code>span</code>, ale dlatego, że jest to inline'owy element bez znaczenia semantycznego i temu odpowiada wygenerowany element. Nie jest to dosłownie span, np. Opera Dragonfly prezentuje ten element jako <code><:after></code>, Firebug czy inspektor z Chrome'a nie prezentują tego elementu w żaden sposób — pod Chromem nie można się nawet pobawić jego stylowaniem).''

Samo w sobie średnio przydatne. Wygenerowanego w ten sposób tekstu nie można zaznaczyć, więc jedyne, co przychodzi do głowy to jakiś trolling z umieszczeniem części tekstu w tak wygenerowanych elementach po to, żeby ktoś kopiując sobie tekst gdzieś tam stracił część słów. Wyobrażam sobie przepuścić teksty na Ściądze.pl przez taką maszynkę, a potem tylko móc oglądać miny uczniów, którzy piszą referaty metodą Kopiego N. Pasty, oraz nauczycieli sprawdzających później te prace. Na szczęście CSS to w dużej mierze gra wyobraźni i pomysłowości, nie prostego wykorzystywania zapisów specyfikacji.

===Przykład===

<div class="before-after-example-1">Jakiś tekst.</div>

<small>'''Zadanie 1.''' W powyższym akapicie zaznacz i skopiuj pierwsze oraz trzecie zdanie.</small>

==Wartości content==

Jako <code>content</code> można podać swój własny tekst (przykładowo, widziałem w sieci arkusz stylu, który w odpowiednio ostylowanych afterach pokazywał błędy struktury HTML, np. <code>li</code> '''nie''' umieszczone w <code>ul</code>), ale to nie jedyny typ treści. Wszystkie typy po kolei:

* dowolny tekst (przykład [[#Wywołanie|powyżej]]),
* obrazek: url(obrazek.png) — na podobnej zasadzie jak w przypadku ''list-style-image'',
* licznik: counter — którego nie stosowałem, ale można np. kazać numerować nagłówki, włącznie z zagnieżdżeniami (czyli zapis w stylu 2.3.4 dla trzeciego poziomu zagnieżdżenia),
* atrybut elementu (o którym [[#Atrybut elementu|poniżej]]).

Tematu obrazka oraz licznika nie rozwinę, a jedynie zasygnalizuję, ponieważ nie miałem przyjemności się bawić tymi własnościami. Na pewno są zajebiste w działaniu.

===Atrybut elementu===

Wartość tekstowa jest fajną rzeczą, ale zmusza nas do tego, żeby na sztywno w arkuszu umieścić jakiś tekst. W niektórych przypadkach nie stanowi to żadnego problemu, ale czasami taka statyka może ciążyć. W tym celu możemy przekazać do CSS-a wartość z HTML-a, a tam już możemy ją sobie generować znacznie łatwiej i nie zaśmiecać arkuszu stylu niepotrzebnymi wariantami.

====Przykład====

HTML:

<syntaxhighlight lang="html4strict">
<div class="dupa" data-text="Jakiś dodatkowy tekst.">Jakiś tekst.</div>
</syntaxhighlight>

CSS:

<syntaxhighlight lang="css">
.dupa:after {
content: " " attr(data-text);
}
</syntaxhighlight>

Wynik:

<div class="before-after-example-2" data-text="Jakiś dodatkowy tekst.">Jakiś tekst.</div>

<small>'''Zadanie 2.''' Bawiąc się Firebugiem lub podobnym narzędziem podmień tekst wyświetlany jako drugie zdanie.</small>

Przy okazji wykorzystaliśmy tutaj nową rzecz wprowadzoną przez HTML5, mianowicie własne atrybuty elementów. Jest jeden warunek — nasz atrybut musi zostać poprzedzony przez "data-". Bez tego oczywiście będzie działał, ponieważ przeglądarki są w większości przypadków mocno idiotoodporne (muszą być), ale walidator W3C nie będzie już tak łaskawy. A wszyscy przecież lubimy pokolorowaną na zielono informację, że spełniamy wszystkie standardy. Ponadto możemy przy pomocy JavaScriptu sterować treścią w łatwiejszy sposób.

Warto jeszcze zwrócić uwagę, że wartość atrybutu jest trimowana i spację przed tekstem musimy dodać w CSS-ie. (Lub bawić się jakimiś marginami lub paddingami).

==Podsumowanie części tekstowej==

Żartowałem wcześniej, że zabawy z czystem tekstem nadają się raczej do trollowania, ale należy pamiętać, że to nadal przede wszystkim wyzwanie dla kreatywności. Ostatnio natknąłem się na tekst dotyczący tego, jak stylować strony pod kątem druku (czyli co zrobić, kiedy użytkownik naciśnie ctrl+P), gdzie był podany taki oto przykład stylowania (dla <code>media="print"</code>):

<syntaxhighlight lang="css">
a:link:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

a[href^="/"]:after {<br>
content: " (http://krazov.com" attr(href) ") ";
font-size: 90%;
}
</syntaxhighlight>

Dzięki temu drukujący ujrzy wszystkie linki w druku. Myślę, że powyższe rozwiązanie pokazuje, jak daleko przydatne może być rodzeństwo before oraz after.

==Rozwiązania graficzne oraz pseudograficzne==

Wiele razy stawałem w życiu frontendowca przed sytuacją, że przydałby mi się jakiś dodatkowy element, by bezboleśnie sprostać wyzwaniu rzuconemu przez grafika. Nie lubię tworzyć pustych divów lub spanów tylko dlatego, że projektant w swych mokrych snach ujrzał dodatkowy dzyndzelek gdzieś tam. Super, ale nie kosztem kodu HTML. [http://www.youtube.com/watch?v=9pb7hk0nOCk ''This agression will not stand.''] Doświadczenie uczy mnie, że na ogół wystarczy jeden z dwójki elementów. To zresztą nie musi być wcale grafika ''sensu stricto''.

===Przykład nr 1: Dzyndzelek===

Grafik przewidział dymek komiksowy z rzeczonym wcześniej dzyndzelkiem. Dawniej robiło się trzy kontenery — jeden na górną część z zaokrąglonymi narożnikami, drugi na treść i boczne obramowania oraz trzeci na dolne zaokrąglenia plus dzyndzelek (co najprawdopodobniej będzie obudowane jeszcze czwartym kontenerem). Obecnie zaogrąglenia ramek można — co więcej, powinno się — robić za pomocą CSS-a, więc zostaje tylko problem dzyndzla, gdyby nie on, można by zredukować element do jednego tylko kontenera. Zamiast więc upychać kolanem nadmiarowego diva lub spana, można wywołać sobie afterka i ostylować go np. w taki sposób:

<syntaxhighlight lang="css">
.dupa:after {
background-image: url(dzyndzelek.png);
content: "";
display: block;
height: 10px;
width: 10px;
}
</syntaxhighlight>

Do tego jakieś pozycjonowanie (aftera absolutne, bazy dla aftera — relatywne).

'''Uwaga.''' Własność <code>content</code> jest wymagana, nawet jeśli pusta. Bez niej <code>:after</code> nie wygeneruje się.

===Przykład nr 2: Raquo===

Bardzo często stosuje się jakieś podwójne >> przy linkach o treści "więcej" czy "czytaj dalej". W zamierzchłych czasach umieszczało się w <code>a</code> znacznik <code>img</code>, teraz robi się coś w stylu:

<syntaxhighlight lang="css">
.dupa a {
background: url(raquo.png) no-repeat right center;
padding-right: 10px;
}
</syntaxhighlight>

Nie jest to złym rozwiązaniem (jeśli w niektórych sytuacjach olewamy IE7), ale podczas ostatniego projektu odkryłem nowego gracza — tablety, na których podawane wartości pikselowe nie mają takiego przełożenia. Więc możemy sobie ustawiać skrupulatnie różne wartości, ale przeglądarka musi sobie to przeskalować. A jak przeskalowuje, to mogą się zdarzyć różne rzeczy. W przypadku krótkich "więcejów" nie było problemów, ale był jeden element ("Wróć na stronę główną"), który był rozbity na trzy linie. I to nasze uwielbiane raquo powędrowało pod tekst, co nie wygldądało dobrze. Zamiast tego można było zastosować coś takiego:

<syntaxhighlight lang="css">
.dupa a:after {
background: url(raquo.png) no-repeat right center;
content: "";
display: inline-block;
height: 10px;
width: 10px;
}
</syntaxhighlight>

Taki element będzie się zachowywał jak <code>img</code>. Można wykorzystać <code>content: url()</code>, ale wtedy nie będziemy mogli zbić obrazków w jednego sprite'a, co stosuje się bardzo często w celach optymalizacyjnych.

W przypadku czegoś ''à la'' raquo (») można w ogóle zrobić tak:

<syntaxhighlight lang="css">
.dupa a:after {
content: " »";
}
</syntaxhighlight>

Jest to zamknięcie cudzysłowu w cudzysłowie i większość czcionek ekranowych udostępnia ten znak. Dodatkową zaletą tego rozwiązania jest pełna skalowalność elementu. Obrazki po sporym powiększeniu lubią się rozmazywać, tymczasem czcionka jest wyliczana przy najbardziej nawet niedorzecznym przybliżeniu.

===Przykład nr 3: Cytat===

I na koniec kod z przykładem, który zrobiłem dla jednego z przygotowywanych serwisów, żeby oszczędzić na grafice tam, gdzie nie jest niezbędna. Bo jest coraz mniej.

HTML:

<syntaxhighlight lang="html4strict">
<div class="dupa">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</div>
</syntaxhighlight>

CSS:

<syntaxhighlight lang="css">
.dupa:before {
color: #CFCFCF;
content: "“";
font-size: 100px;
left: -28px;
position: absolute;
text-shadow: 2px 0 #FFFFFF, -2px 0 #FFFFFF, 0 2px #FFFFFF, 0 -2px #FFFFFF;
top: -46px;
}

.dupa {
background-color: #FAFAFA;
border: 1px solid #CFCFCF;
border-radius: 5px;
box-shadow: 0 0 15px #CFCFCF inset;
box-sizing: border-box;
font-family: Georgia,serif;
font-size: 14px;
font-style: italic;
line-height: 1.5;
padding: 20px 12px;
position: relative;
text-indent: 30px;
width: 450px;
}

.dupa:after {
bottom: -100px;
color: #CFCFCF;
content: "”";
font-size: 100px;
position: absolute;
right: 17px;
text-shadow: 2px 0 #FFFFFF, -2px 0 #FFFFFF, 0 2px #FFFFFF, 0 -2px #FFFFFF;
}
</syntaxhighlight>

Efekt:

<div class="before-after-example-3">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</div>

I wszystko to skalowalne, lekkie i bez cienia dodatkowych zasobów. Wszystko robi za nas przeglądarka.

====Drukowanie i tła====

Krótko napomknę tylko, że zastosowanie afterowego tekstowego raquo ma tę zaletę, że w przeciwieństwie do elementów umieszczanych jako tło dla jakiegoś elementu na pewno się wydrukuje. Przeglądarki z oszczędności tuszu ignorują wszystkie tła (w Firefox można sobie zażyczyć drukowania również teł, ale np. Chrome już nie daje takiej możliwości), co ma sens, ponieważ ktoś mógłby ustawić jednolity, ciemny kolor, a wtedy żegnaj kartridżu. Przy okazji obrywa się również drobnym tełkom, które ''de fact'' tełkami nie są. Raquo może nie jest kluczową treścią, ale gdyby komuś zależało bardzo, to jest to jakiś dodatkowy argument.

==Ograniczenia==

Zarówno <code>:before</code>, jak i <code>:after</code> są obsługiwane przez wszystkie dostępne obecnie przeglądarki, a Internet Explorer radzi sobie z nimi od wersji 8. IE7 nie widzi, ale tutaj wychodzę z założenia, że jak ktoś używa takiej przeglądarki, to sam jest sobie winien. Póki co stosuje się to dla elementów dodatkowych, nie będących podstawową treścią, więc strata nie jest bolesna.

==Słowo końcowe==

Przedstawione w tekście przykłady mają być dokładnie tym — przykładami, którymi chciałem pokazać kilka trików na początek.

==Bibliografia==

# [http://www.w3.org/TR/CSS21/generate.html O treściach generowanych na W3.org]
# [http://www.quirksmode.org/css/contents.html Tabel zgodności na Quirksmode]
# [http://www.alistapart.com/articles/goingtoprint/ O stylowaniu treści pod druk]

[[Kategoria:Frontend]]

Internet kontra internet

2012-05-19T09:08:21Z

Blog

2012-05-19T09:07:14Z

‎Maj:

Nagi lunch

2012-05-19T09:07:05Z

Nagi lunch

2012-05-19T09:06:44Z

Utworzył nową stronę „Przedstawia Teatr Hermetyczność. ;JOAN :''(o widocznym na ekranie komputera Peterze Wellerze)'' Wygląda jak mój kolega z podstawówki. Mieszka na początku nasz...”

Nowa strona

Przedstawia Teatr Hermetyczność.

;JOAN
:''(o widocznym na ekranie komputera Peterze Wellerze)'' Wygląda jak mój kolega z podstawówki. Mieszka na początku naszej ulicy.
;KRAZOV
:Ten pies, co cię chciał pogryźć, jak ostatnio szłaś do autobusu?
;JOAN
:Nie, ten mieszka bardziej naprzeciwko tego zboczeńca ze sztucznymi drzewami.

Strona główna

2012-05-18T19:10:41Z

Kategoria:Lifehack

2012-05-18T18:34:21Z

Blog

2012-05-18T18:31:24Z

‎Maj:

Kategoria:Lifehack

2012-05-18T18:31:21Z

Utworzył nową stronę „Rzeczywistość jest jak program, też można ją hakować.”

Nowa strona

Rzeczywistość jest jak program, też można ją hakować.

Darmowy wzmacniacz

2012-05-18T18:29:40Z

Utworzył nową stronę „Jakiś czas temu przeglądając zdjęcia na Soup.ie znalazłem dwie sekwencje zdjęć z poradami ogólnożyciowymi, typu: ubieramy skarpetkę na rurę od odkurzacza ...”

Nowa strona

Jakiś czas temu przeglądając zdjęcia na Soup.ie znalazłem dwie sekwencje zdjęć z poradami ogólnożyciowymi, typu: ubieramy skarpetkę na rurę od odkurzacza i możemy wyssać jakiś mały przedmiot, który wpadł gdzieś za szafkę czy coś w tym stylu. Większość rzeczy była mi jednak znana lub nie przejawiała sobą aż tak urzekającej genialności, jak być może Amerykanom. Poza jednym.

Darmowy wzmacniacz dla iPhone'a. Być może to snobizm, że akurat telefon tej marki, a być może umiejscowienie głośnika na spodniej krawędzi obudowy. W każdym razie, telefon wsadzamy do miseczki. Zwykłej, ceramicznej miseczki, na tyle niedużej, żeby telefon nie wpadł całkiem. Tyle. Czysta fizyka. Oczywiście efekt nie jest nie wiadomo jaki i nie do każdej muzyki się to nadaje, ale wrażenie i tak jest niezłe. Ja wykorzystałem kamienny moździerz z Ikei, przynajmniej nie spadał przy mocniejszych bitach.

[[Kategoria:Lifehack]]

Blog

2012-05-15T18:35:58Z

‎Maj:

Fiksacje Kurta Wimmera

2012-05-15T18:34:20Z

Hub:O Hub:Krazov

2012-05-14T18:10:29Z

Kategoria:Temu państwu już podziękujemy

2012-05-14T17:34:23Z

Utworzył nową stronę „Miejsca, gdzie zagłosowałem portfelem.”

Nowa strona

Miejsca, gdzie zagłosowałem portfelem.

Kategoria:Muzyka

2012-05-14T17:33:28Z

Utworzył nową stronę „Muzyki na ogół słucham, ale z rzadka coś o niej napiszę.”

Nowa strona

Muzyki na ogół słucham, ale z rzadka coś o niej napiszę.

Kategoria:Dentystyczny horror

2012-05-14T17:32:43Z

Utworzył nową stronę „Jedni zbierają znaczki, ja miałem przejścia z zębami.”

Nowa strona

Jedni zbierają znaczki, ja miałem przejścia z zębami.

Kategoria:Fragmenty

2012-05-14T17:29:27Z

Utworzył nową stronę „Fragmenty mojej autobiografii. '''Motto serii:''' ''Fakty, nawet gdyby ułożono je jak ogniwa w łańcuchu, nie dały się uporządkować. Wydarzenia nie następ...”

Nowa strona

Fragmenty mojej autobiografii.

'''Motto serii:'''

''Fakty, nawet gdyby ułożono je jak ogniwa w łańcuchu, nie dały się uporządkować. Wydarzenia nie następowały jedne po drugich. Fakty — gdy się pojawiały — pozostawały nieuporządkowane, odrębne i przypadkowe, oderwane i epizodyczne, wyzute z ładu przyczynowości.''

— Tim O’Brien, "Szukając Cacciato"

Kategoria:Dramatyczne

2012-05-14T17:24:34Z

Utworzył nową stronę „Zapisane w dramatycznej formie literackiej. Z didaskalia i w ogóle.”

Nowa strona

Zapisane w dramatycznej formie literackiej. Z didaskalia i w ogóle.

Kategoria:Polo ni styka

2012-05-14T17:23:42Z

Utworzył nową stronę „Zagadnienia języka polskiego.”

Nowa strona

Zagadnienia języka polskiego.

Blog

2012-05-14T17:19:08Z

‎Maj:

Zesrani

2012-05-14T17:19:05Z

Utworzył nową stronę „Wyszedłem z Lidla i zmierzałem parkingiem do samochodu, kiedy minąłem dwóch mężczyzn. Ubrani skromnie i raczej w typie, których nie chciałoby się spotkać ...”

Nowa strona

Wyszedłem z Lidla i zmierzałem parkingiem do samochodu, kiedy minąłem dwóch mężczyzn. Ubrani skromnie i raczej w typie, których nie chciałoby się spotkać na mniej otwartej oraz gorzej oświetlonej przestrzeni. Podczas mijania ich usłyszałem, jak starszy zwraca się lekko wzburzonym głosem do drugiego:

— On jest bardziej zesrany od ciebie.

Bezpiecznie dotarłem do samochodu, ale dało mi to do myślenia — czy chciałbym usłyszeć, że jestem mniej zesrany od kogoś innego? Albo inaczej: jak miałbym się z tym poczuć?

Z przymiotnikami w drugim stopniu, myślałem jadąc już samochodem, jest zabawna sprawa. Jeżeli powiemy, że A jest niższy od B, to nie musi to oznaczać, że są niscy w ogóle. Mogą być, ale mogą nie być. Jedyne, co można powiedzieć na pewno, aczkolwiek tylko prawie, to że łapią się do tej samej grupy: albo są niscy, albo są wysocy; inaczej porównywanie ich nie ma sensu. Lecz czy pan sprzed Lidla o tym wie? Plus: stwierdzenie, że niski jest niższy od wysokiego może nie ma wiele sensu, ale nie jest błędem samo w sobie. Na pewno nie językowym, raczej logicznym.

A zatem: stojący na parkingu młodszy z mężczyzn był mniej zesrany od nieobecnego osobnika. To wiemy na pewno. Samozwańczo odrzucam wariant, że młodszy nie był zesrany, a nieobecny był. Zostają nam dwa warianty:

# Obydwaj nie są zesrani, ale wtedy to, który mniej, jest kwestią nieistotną i niegodną wspominania.
# Obydwaj są zesrani.

Skoro przetrwał jeden tylko wariant i obydwaj są zesrani, to doprawdy uważam, że fakt, że ktoś jest mniej, kiedy obydwaj są, nie jest tutaj wielkim pocieszeniem. Co zresztą oddawała twarz młodszego mężczyzny, który spoglądał na swego towarzysza zupełnie nieprzekonany. Być może nawet myślał sobie to samo, co ja.

[[Kategoria:Polo ni styka]]

Blog

2012-05-13T09:38:07Z

‎Maj:

Bunt

2012-05-13T09:35:42Z

Utworzył nową stronę „;JOAN :Pamiętam w przedszkolu jak podawali budyń, to polewali sokiem. Rozlewał się dookoła talerzyka. ;KRAZOV :Nie pamiętam tego. :''(namyśla się chwilę)''...”

Nowa strona

;JOAN
:Pamiętam w przedszkolu jak podawali budyń, to polewali sokiem. Rozlewał się dookoła talerzyka.
;KRAZOV
:Nie pamiętam tego.
:''(namyśla się chwilę)''
:Ogólnie niespecjalnie pamiętam przedszkolne jedzenie. Broniłem się przed nim rękami i nogami. Przedszkolanki w końcu musiały ustąpić za namową mamy.
;JOAN
:Zawsze z taką dumą o tym mówisz.
;KRAZOV
:Jedni siedzieli za komuny w więzieniu, ja odmawiałem przedszkolnego jedzenia. Przedszkole było instytucją państwową, przedszkolanki były więc przedstawicielkami aparatu państwowego. Na swój sposób walczyłem z systemem.

[[Kategoria:Blog klasyczny]]
[[Kategoria:Dramatyczne]]

@@ Linia 27: / Linia 27: @@
 </syntaxhighlight>
-''(W powyższym kodzie jest <code>span</code>, ale dlatego, że jest to inline'owy element bez znaczenia semantycznego i temu odpowiada wygenerowany element. Nie jest to dosłownie span, np. Opera Dragonfly prezentuje ten element jako <code><:after></code>, Firebug czy inspektor z Chrome'a nie prezentują tego elementu w żaden sposób &mdash; pod Chromem nie można się nawet pobawić jego stylowaniem).''
+''(W powyższym kodzie jest <code>span</code>, ale dlatego, że jest to inline'owy element bez znaczenia semantycznego i temu odpowiada wygenerowany element. Nie jest to dosłownie span, np. Opera Dragonfly prezentuje ten element jako <code><:after></code>, Firebug czy inspektor z Chrome'a nie prezentują tego elementu w żaden sposób).''
 Samo w sobie średnio przydatne. Wygenerowanego w ten sposób tekstu nie można zaznaczyć, więc jedyne, co przychodzi do głowy to jakiś trolling z umieszczeniem części tekstu w tak wygenerowanych elementach po to, żeby ktoś kopiując sobie tekst gdzieś tam stracił część słów. Wyobrażam sobie przepuścić teksty na Ściądze.pl przez taką maszynkę, a potem tylko móc oglądać miny uczniów, którzy piszą referaty metodą Kopiego N. Pasty, oraz nauczycieli sprawdzających później te prace. Na szczęście CSS to w dużej mierze gra wyobraźni i pomysłowości, nie prostego wykorzystywania zapisów specyfikacji.

← poprzednia wersja		Wersja z 19:28, 19 maj 2012
Linia 1:		Linia 1:
−	Zawodowo zajmuję się frontendem. Czasem, kiedy nie ~~znalazłem~~, żeby ktoś uczynił to przede mną, ~~napiszę~~ o jakimś zagadnieniu z tej dziedziny.	+	Zawodowo zajmuję się frontendem. Czasem, kiedy nie znajdę, żeby ktoś uczynił to przede mną, piszę o jakimś zagadnieniu z tej dziedziny.

@@ Linia 1: / Linia 1: @@
 Witam na mojej nowej stronie.
-* [[Blog]] &mdash; obecny trzon strony
+* [[Blog]] &mdash; obecny trzon i rdzeń przedsięwzięcia
 * [[Filmy klasy B]]

@@ Linia 29: / Linia 29: @@
 Tutaj jest bardzo dobra [http://www.mediawiki.org/wiki/Manual:Skinning instrukcja tworzenia szablonu], aczkolwiek musiałem podmienić
- echo $skin->tooltipAndAccesskey('search');
+<syntaxhighlight lang="php">
 na
- title="<? echo Linker::titleAttrib('search'); ?>"
+<syntaxhighlight lang="html4strict">
 Z jakiegoś powodu tutaj informacja była przestarzała.

@@ Linia 16: / Linia 16: @@
 * [[:Kategoria:Blog klasyczny|Blog klasyczny]]
 * [[:Kategoria:Doom|Doom]]
 * [[:Kategoria:Film|Film]]
 * [[:Kategoria:Brudnopis|Brudnopis]]

@@ Linia 35: / Linia 35: @@
 <div class="before-after-example-1">Jakiś tekst.</div>
-<small>'''Zadanie 1.''' W powyższym akapicie zaznacz i skopiuj pierwsze oraz trzecie zdanie.</small>
+<small title="Trolololololololololololo">'''Zadanie 1.''' W powyższym akapicie zaznacz i skopiuj pierwsze oraz trzecie zdanie.</small>
 ==Wartości content==

@@ Linia 105: / Linia 105: @@
 <syntaxhighlight lang="css">
-.dupa:after {
+.dupa a:after {
      background-image: url(dzyndzelek.png);
      content: "";
@@ Linia 223: / Linia 223: @@
 ==Bibliografia==
-# [http://www.w3.org/TR/CSS21/generate.html O treściach generowanych na W3.org]
+# [http://www.w3.org/TR/CSS21/generate.html O treściach generowanych &mdash; na W3.org]
-# [http://www.quirksmode.org/css/contents.html Tabel zgodności na Quirksmode]
+# [http://www.quirksmode.org/css/contents.html Tabel zgodności &mdash; na Quirksmode]
 # [http://www.alistapart.com/articles/goingtoprint/ O stylowaniu treści pod druk]
 [[Kategoria:Frontend]]

← poprzednia wersja		Wersja z 09:08, 19 maj 2012
Linia 17:		Linia 17:

	Zdaję sobie sprawę, że dokonuję w ten sposób pewnej mitologizacji, ale możecie mi naskoczyć.		Zdaję sobie sprawę, że dokonuję w ten sposób pewnej mitologizacji, ale możecie mi naskoczyć.
		+
		+	[[Kategoria:Polo ni styka]]

@@ Linia 3: / Linia 3: @@
 ===Maj===
 * '''18 maja:''' [[Darmowy wzmacniacz]]
 * '''15 maja:''' [[Fiksacje Kurta Wimmera]]

← poprzednia wersja		Wersja z 09:07, 19 maj 2012
Linia 7:		Linia 7:
	;JOAN		;JOAN
	:Nie, ten mieszka bardziej naprzeciwko tego zboczeńca ze sztucznymi drzewami.		:Nie, ten mieszka bardziej naprzeciwko tego zboczeńca ze sztucznymi drzewami.
		+
		+	[[Kategoria:Blog klasyczny]]
		+	[[Kategoria:Dramatyczne]]

← poprzednia wersja		Wersja z 18:34, 18 maj 2012
Linia 1:		Linia 1:
−	~~Rzeczywistość jest jak program,~~ też można ją hakować.	+	Życie też można hakować.

@@ Linia 1: / Linia 1: @@
 Oglądając ostatnio [http://pl.wikipedia.org/wiki/Salt_(film) "Salt"] zauważyłem, że współscenarzystą tej produkcji rozrywkowej jest Kurt Wimmer.
 W 2003 roku poszedłem do kina na "Equilibrium" i zachwyciłem się nim, film zdawał się mieć wszystko, czego wtedy potrzebowałem. (Niesłusznie zbierał opinie jako powtórka z "Matriksa", ponieważ ktoś zobaczył, że chodzą w płaszczach i uprawiają odmianę karate, no ale tak to jest z ludźmi). Film był dobrze wyważony i z nadzieją wyglądałem kolejnych filmów Kurta Wimmera. Niestety, okazało się, że pan potrafi opowiadać jedną historię. Ale po kolei.
-Omówienia dokonam na podstawie filmów: "Equilibrium", "Ultraviolet" oraz "Salt" (do którego Wimmer napisał scenariusz).
+Omówienia dokonam na podstawie filmów: "Equilibrium", "Ultraviolet", "Salt" oraz "Rekrut" (do dwóch ostatnich Wimmer napisał scenariusz).
 ==Niszczenie systemu od wewnątrz==
@@ Linia 23: / Linia 21: @@
 "Ultraviolet" jest właściwie powtórką 1:1 z "Equilibrium". Zamiast więc wojny światowej mamy tajemniczą chorobę, która zamieniła cześć ludzkości w wampiry, znowu mamy ruch oporu (wampiry), znowu mamy biegłą w sztukach walki postać (tym razem kobieta), znowu mamy przywódcę "złych", który gra pod siebie (tym razem: sam jest wampirem).
-Oglądanie tego filmu było z początku zabawne z racji na przerysowanie scen akcji, ale szybko okazało się, że nie ma nic więcej: jedna sekwencja za drugą. Nie było tak źle jak z "Ballistic", ale "Ultraviolet" na pewno zajmuje zasłużone drugie miejsce. Droga przez mękę, jaką był ten film, koniec końców opłaciła się, ponieważ obnażyła ulubione zagrania Kurta Wimmera. Nie, żeby to było coś złego. "Equilibrium" pokazał, że potrafi zrobić z tych elementów całkiem oglądalną rzecz i może nawet do refleksji (jak się ma 20 lat).
+Oglądanie tego filmu było z początku zabawne z racji na przerysowanie scen akcji, ale szybko okazało się, że nie ma nic więcej: jedna sekwencja za drugą. Nie było tak źle jak z "Ballistic", ale "Ultraviolet" na pewno zajmuje zasłużone drugie miejsce. Droga przez mękę, jaką był ten film, koniec końców opłaciła się, ponieważ obnażyła ulubione zagrania Kurta Wimmera. Nie, żeby to było coś złego. "Equilibrium" pokazał, że potrafi zrobić z tych elementów całkiem oglądalną rzecz i może nawet do refleksji (przynajmniej jak się ma 20 lat).
 ===Salt===
@@ Linia 35: / Linia 33: @@
 * szef Salt okazuje się... grać pod siebie &mdash; był jednym ze śpiochów, ale chciał przejąć władzę dla siebie, co można wywnioskować z podziękowań za zabicie Orłowa.
-[[Kategoria:Brudnopis]]
+===Rekrut===

← poprzednia wersja		Wersja z 18:10, 14 maj 2012
Linia 14:		Linia 14:

	Tym właśnie jest Hub:Krazov. Zapraszam wszystkich do lektury.		Tym właśnie jest Hub:Krazov. Zapraszam wszystkich do lektury.
−
−	~~[[Kategoria:Brudnopis]]~~