Easter eggi w kodzie: ASCII w view-source i styl w konsoli
Strona może być w 100% poprawna, szybka i dostępna – a i tak zostaje miejsce na odrobinę zabawy. Na brylka.net schowałem dwa drobne easter eggi dla ciekawskich: jeden dla tych, którzy robią view-source, drugi dla tych, którzy otwierają DevTools. Oba są niewidoczne dla zwykłego użytkownika, nic nie ważą dla wydajności i… są mrugnięciem okiem do innych developerów (i rekruterów, którzy lubią zajrzeć pod podszewkę). W tym wpisie pokazuję, jak je zrobić w Astro tak, żeby przetrwały minifikację HTML.
Easter egg #1 – ASCII-art w view-source
Pomysł jest prosty: w <head> ląduje komentarz HTML z logo w ASCII (u mnie w „brajlu”, znakach ⣿) i ramką z krótką wiadomością. Nie widać go na stronie, ale każdy, kto wciśnie Ctrl+U, dostaje powitanie.
Problem w tym, że Astro przy budowaniu kompresuje HTML, a u mnie dodatkowo leci własny minify-html. Zwykły komentarz wpisany w szablon mógłby zostać zjedzony albo poprzestawiany. Rozwiązanie: wstrzyknąć go przez set:html, co przepuszcza surowy ciąg bez ruszania:
---
// Easter egg dla tych, co robią view-source. Wstrzykiwany przez set:html (przetrwa compressHTML
// Astro), chroniony też przez minify-html. Bez sekwencji "--" w środku (psułaby komentarz).
const easterEgg = `<!--
⣿⣿⣿ …tu logo „brylka.net" w ASCII (znaki braille ⣿)… ⣿⣿⣿
┌───────────────────────────────────────────────────────────────┐
│ brylka.net · Bartosz Bryniarski – Full Stack Developer │
│ Hej, view-source ninja! Skoro tu zaglądasz, to się dogadamy.│
│ Stack: Astro 5 · Cloudflare Workers · Shiki · llms.txt │
└───────────────────────────────────────────────────────────────┘
-->`;
---
<head>
<meta charset="utf-8" />
<Fragment set:html={easterEgg} />
<!-- …reszta head… -->
</head>Dwie pułapki, na które trzeba uważać:
set:htmlzamiast wklejania komentarza wprost – dzięki temu kompresory traktują go jako gotowy fragment i nie psują układu (ASCII-art rozsypałby się, gdyby ktoś „zoptymalizował” białe znaki).- Żadnej sekwencji
--w środku komentarza. Podwójny myślnik przedwcześnie zamyka komentarz HTML (<!-- … -->), więc rysując ramki używam pojedynczych kresek (─,│) i znaków braille, nie--.
Efekt zobaczysz, robiąc view-source na stronie głównej (albo Ctrl+U).
Easter egg #2 – stylizowany console.log
Drugi smaczek jest dla tych, co otwierają konsolę. console.log obsługuje dyrektywę %c, która pozwala ostylować tekst CSS-em – więc można wypisać „brylka.net” w marce, dużą czcionką, i dorzucić wiadomość. Wstawiam to inline-skryptem (is:inline, żeby Astro go nie przetwarzało):
<script is:inline>
console.log(
"%cbrylka%c.net",
"color:#00ccff;font-size:34px;font-weight:800;font-family:Verdana,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.15)",
"color:#ffffff;font-size:34px;font-weight:800;font-family:Verdana,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.15)"
);
console.log("%cHej, deweloperze! Skoro grzebiesz w DevToolsach — to się dogadamy.", "color:#0e7fa8;font-size:14px;font-weight:600");
console.log("%cStack: Astro 5 · Cloudflare Workers · zero PHP. Cała historia: %chttps://brylka.net/llms.txt", "color:#586a78;font-size:12px", "color:#0e7fa8;font-size:12px");
console.log("%c→ Szukasz Full Stack Developera (web + mobile)? brylka [at] brylka.net · github.com/brylka", "color:#0e7fa8;font-size:13px;font-weight:600");
</script>Jak to działa:
- Każdy
%cw pierwszym argumencie „zjada” kolejny argument-string z regułami CSS i stosuje je do tekstu aż do następnego%c. Stąd „brylka” w cyjanie (#00ccff) i „.net” w bieli – dokładnie jak w logo. - Kolory tekstu dobrałem tak, żeby były czytelne i w jasnej, i w ciemnej konsoli (DevTools mają różne tła).
- To czysty
console.log– zero wpływu na użytkownika, zero realnego kosztu wydajności.
Bonus – jelonek na szlakjelonkow.pl
To nie jest jednorazowy żart. Ten sam patent – ASCII w view-source – wrzuciłem też na szlakjelonkow.pl (mój projekt: aplikacja mobilna + strona o szlaku rzeźb jelonków w Jeleniej Górze). Tam w komentarzu HTML siedzi ASCII-art jelonka z ramką opisującą stack całego projektu:
┌───────────────────────────────────────────────────────────────────────────────────────┐
│ @*:::::::::::::::::::::::::::-%@ │
│ % .-=.=:*.=+. :@ │
│ @# =#*..=.- - -:- #@ Szlak Jelonków │
│ @- . *####%@ .... +@ tourist guide to Jelenia Góra, Poland │
│ @ :==. ###= .@ (deer sculptures trail) │
│ @ +###* @ │
│ @ *%#####******++: @ Stack (view-source easter egg): │
│ @ +###############= @ Mobile app Flutter (Dart) - Riverpod, Hive │
│ @ :@#############* @ Vector map MapLibre GL JS + PMTiles │
│ @ +%%#+. ####* @ self-hosted on Cloudflare R2 │
│ @= :#.+*. =#::*+ -@ Map data OpenStreetMap (ODbL) │
│ % -* ** .*: *- *@ Walk routing Self-hosted OSRM (foot profile) │
│ @- =:+- := =- :@ Website Astro 5 - static on CF Workers │
│ @%. **. .+ =- %@ i18n 4 locales (pl/en/de/cs) │
│ @# .:*@ :==+- :*- #@ Authors Sculptures: ZSRA Cieplice │
│ @% .=====-:-=====-:====== @@ App + site: Bartosz Bryniarski │
│ @*====================*@ │
│ @%==================%@ Made with care in Jelenia Góra. │
│ @@#==============#@ Contact: brylka [at] jelenia.com │
│ @@==========%@ │
│ @@*====+%@ │
│ @@@#@@ │
└───────────────────────────────────────────────────────────────────────────────────────┘To taka moja mała sygnatura na różnych projektach – kto zagląda pod podszewkę, ten znajdzie krótkie „cześć” i streszczenie tego, na czym strona stoi.
Po co to w ogóle?
Easter eggi nie poprawią konwersji ani SEO – i nie o to chodzi. To:
- mrugnięcie do swoich – inni developerzy i rekruterzy częściej niż myślisz robią view-source albo otwierają konsolę,
- mini-wizytówka – w komentarzu i w konsoli streszczam stack i zostawiam kontakt,
- zero kosztu – komentarz HTML i
console.lognie ważą nic dla użytkownika ani dla Lighthouse.
Jeśli prowadzisz własną stronę, dorzucenie takiego smaczku to dosłownie kilka minut. A satysfakcja, gdy ktoś napisze „widziałem Twojego jelonka w źródle” – bezcenna. Zajrzyj w źródło tej strony i sprawdź, czy znajdziesz całe logo.
