Blogrys

Celuj w puste z automatu

W komentarzach pod poprzednią, najeżoną linkami notką, Sebasista zapytał, dlaczego nie dodaję do <a> atrybutu target="_blank". Krótkie wyjaśnienie dla osób, które nie przeszły nigdy HTML-owej inicjacji: Chodzi o to, żeby po kliknięciu w link nowa strona otwierała się w świeżej zakładce przeglądarki (kiedyś: w świeżym oknie).

Zadumałem się. Przypomniały mi się okolice 2005 r., gdy pracowicie rzeźbiąc swoją ówczesną witrynę nie żałowałem targetblankowej posypki. Wtedy zresztą do a-tagów dodawało się również rel="noopener noreferrer". noopener anulował internaucie bilety na festiwal muzyczny oraz blokował skryptom na stronie docelowej dostęp do „źródłowego” okna lub zakładki1. Zapobiegaliśmy w ten sposób tabsnappingowi. Natomiast noreferrer w ogóle nie podawał docelowej witrynie informacji, skąd na nią trafiliśmy, czyniąc naszą wędrówkę po internecie bardziej anonimową.

Rzeczywiście, odpuściłem ostatnimi czasy dodawanie target="_blank", ponieważ sam przyzwyczaiłem się do otwierania linków trzymając wciśnięty CTRL, który funkcję OPEN IN A NEW TAB wymusza. A przyzwyczaiłem się do wciskania CTRL, gdyż target="_blank" często brakuje na innych stronach. Sebasista ma jednak rację: Jeżeli inni biją Murzynów, to nie znaczy, że ja też powinienem.

Szkopuł w tym, że notki piszę w Markdownie. Nie mogę dodać target="_blank" wewnątrz <a>, bo żadnych <a> w ogóle w edytorze nie używam. Zamiast prehistorycznego

<a href="https://en.wikipedia.org/wiki/HTML">Artykuł o HTML-u</a>

wstukuję cywilizowane

[Artykuł o HTML-u][11]{:target="_blank"}

a na dole dokumentu dodaję przypis

[11]: https://en.wikipedia.org/wiki/HTML

i wbudowany w Jekylla parser załatwia potem sprawę za mnie. Tylko jak w tym układzie wycelować w puste?

Pierwsze rozwiązanie: Wrócić do korzeni. Parser dopuszcza bowiem mieszanie tagów markdownowych z klasycznymi tagami HTML-owymi. Tam, gdzie trzeba, mógłbym oznaczać linki <a> z atrybutem nie rezygnując z markdownowych dobrodziejstw w innych miejscach. Ale odpada – jestem purystą, nie będę mieszał nawiasów.

Drugie rozwiązanie: Zainstalować wtyczkę do Jekylla, która wykrywa zewnętrzne linki i dodaje do nich target="_blank" podczas generowania witryny. Też odpada – wtyczkę po raz ostatni uaktualniano kilka lat temu, więc lada wersja może przestać działać, a poza tym jestem minimalistą. Nie będę instalować całego plugina do rozwiązania jednego drobnego problemu.

Trzecie rozwiązanie: Jeykll do parsowania Markdownu wykorzystuje Kramdowna, a Kramdown, jak się okazuje, pozwala na dodawanie target="_blank" do linków na markdownową modłę:

[Artykuł o HTML-u][11]{:target="_blank"}{:target="_blank"}

Całkiem elegancka składnia, sami przyznacie. Ale skąd brać te nawiasy klamrowe? Za darmo rozdają je tylko w teorii zbiorów.

Czwarte rozwiązanie: Mógłbym generować je półautomatycznie w edytorze po zakończeniu pisania notki. „Pół” – bo sam musiałbym pamiętać o kliknięciu w SEARCH & REPLACE. „Automatycznie” – bo podmiany dokonałbym przy pomocy wyrażenia regularnego (tzw. regex od regular expression). Kazałbym mianowicie edytorowi wykryć wszystkie kombinacje znaków typu „cyfry między nawiasami kwadratowymi” i dodać na ich końcu kramdownowy wariant atrybutu. Coraz cieplej, ale dlaczego niby miałbym o tym za każdym razem pamiętać?!

Piąte rozwiązanie: Dodać odpowiednią linijką do bashowego skryptu odpowiedzialnego za końcówą kosmetykę tuż przed publikacją notki. Ze skryptu tego jestem bardzo dumny i kiedyś opiszę go tutaj dokładnie. Na razie zaprezentuję tylko jego dzisiejsze uzupełnienie:

$mysed -i "s|\]\[\([0-9]\{1,2\}\)\]|][\1]{:target=\"_blank\"}|g" $draftPostPath

Zadrżyjcie przed potęgą wyrażeń regularnych! Co się tutaj wyprawia?

  • Za zmienną $mysed kryje się program do edytowania tekstu. Na Linuksie nazywa się on sed, a na uniksowym FreeBSD – gsed. Owszem, FreeBSD także posiada seda, ale tamten sed cechuje się nieco inną (chyba nawet bardziej zgodną ze standardem POSIX) składnią niż linuksowy. Na FreeBSD można jednak zainstalować linuksowego seda, który dla odróżnienia nazywa się wtedy gsed. Don’t ask. Koniec końców muszę pilnować tego nieszczęsnego rozróżnienia, ponieważ korzystam z komputerów z różnymi systemami operacyjnymi (w pracy: Fedora, w domu: FreeBSD).
  • Przełącznik -i sprawia, że dokonane zmiany zostaną zapisane w pliku (a nie tylko wyświetlone na ekranie). Nie używajcie go przed gruntownym przetestowaniem komendy!
  • Wszystko, co znajduje się pomiędzy cudzysłowami, stanowi instrukcję dla seda. Pionowe kreski dzielą ją na cztery części.
  • Wstępne s oznajmia sedowi, że będziemy podmieniać frazy (substitute).
  • Co podmieniać? Najpierw musimy znaleźć kombinację ][ charakterystyczną dla drugiej części markdownowego linka. Przed każdym nawiasem kwadratowym muszą znajdować się ukośniki wsteczne \, które informują seda, żeby traktował nawiasy jako zwykłe znaki do wyszukania, a nie elementy wyrażenia regularnego (o tym za chwilę).
  • Następnie wjeżdża wyrażenie regularne wpisane w półokrągły nawias (). Te nawiasy również są poprzedzone przez ukośniki, ale tym razem ich zadanie jest dokładnie odwrotne: Informują seda, że nie szukamy zwykłych nawiasów-znaków, ale chcemy zapamiętać to, co znajdziemy w wyrażeniu w nie wpisanym. Tak, dobrze zrozumieliście: Ukośnik wsteczny czasami zamienia zwykły znak w część wyrażenia regularnego, a czasami odwrotnie. Innymi słowy sed traktuje domyślnie niektóre nawiasy (i inne symbole) jako części wyrażenia regularnego, a inne – jako zwykłe znaki. Wytrawny regeksiarz musi oczywiście pamiętać, które są jakie. Nauczyłem się schematu linuksowego – wydaje mi się, że wyżej wspomniana różnica w działaniu seda dla różnych systemów operacyjnych polega właśnie na odmiennym interpretowaniu składni wyrażeń regularnych.
  • Jakież to wyrażenie regularne wpisujemy w półokrągły nawias-zapamiętywacz? Takie: [0-9]\{1,2\}. Czyli: Szukamy od jednej do dwóch cyfr z przedziału 0-9 (milcząco zakładam, że nigdy nie popełnię notki liczącej więcej niż 99 linków). Nawiasy klamrowe służą do określenia ilości poszukiwanych znaków, ale muszą poprzedzać je, zgadliście, ukośniki wsteczne, żeby nadać im owo specjalne liczebnikowe znaczenie.
  • Za następną kreską pionową znajduje się ciąg znaków zastępujących. Chcemy oczywiście zachować początkowe ][ (pytanie dla kumatych: dlaczego teraz ukośniki wsteczne są zbędne?), chcemy zachować wartość liczbową odnośnika (zachowaną jako \1, „pierwsza zachowana rzecz”), chcemy dodać końcowy prawy nawias kwadratowy… ale na końcu dodajemy pożądany {:target="_blank"}. Aha, musimy pamiętać o ukośnikach przed cudzysłowami, żeby sed nie pomyślał, że instrukcja dlań już się skończyła.
  • Potem jeszcze opcja g (global), które sprawi, że sed dokona w razie potrzeby wielokrotnej podmiany w tej samej linijce (nie poprzestając na pierwszym wykrytym linku).
  • Końcowe $draftPostPath to oczywiście ścieżka pliku z notką.

Zadrżeliście przed potęgą wyrażeń regularnych?

  1. Od pewnego czasu noopener jest atrybutem domyślnym. Może target="_blank" też powinien? 






Komentarze

Seji (2024-04-04 23:44:29)

Od kiedy można klikać w linki środkowym przyciskiem i otwierać je w tle, przestałem się przejmować _blank. ;)

SpeX (2024-04-05 06:42:09)

Ja też głównie otwieram środkowym przyczynkiem myszy.

Borys (2024-04-05 06:57:29)

Nie znałem tej sztuczki. Ale już wiecie, że odtąd na Blogrysie środkowa mysz oraz kontrol mogą odpoczywać.

SpeX (2024-04-05 07:33:59)

W firefox to środkowa mysz działa też w UI samej przeglądarki pozwalając otworzyć "stronę startową" w nowym oknie itp.
Tak samo przycisk ten działa przy zamykaniu zakładek - nie trzeba celować w X.

Co niestety ma swoje minusy, bo po przyzwyczajeniu, zaczynasz zwracać uwagę na wygodę korzystania ze środkowego klawisza myszy. Ile ja już myszy zmieniałem, bo "gamingowy" scroll mnie denerwował np. swoją fakturą.

Arek (2024-04-13 16:16:50)

lol, Blogrys bawi i uczy: nie wiedziałem, że środkowy przycisk na mojej myszy jest tak potężny, dziękuję koledzy!

Sebasista (2024-04-17 09:43:28)

Jestem w szoczku, że specjalnie dla mnie została zaimplementowana funkcjonalność :o Dozgonna wdzięczność!

Wyrażenie regularne przypomina co do zasady edytorskie GREPy, chociaż składnia i funkcja znaków raczej się różni. Ale jak uda się napisać działające zapytanie, to satysfakcja pozostaje na lata.

Borys (2024-05-18 00:29:35)

Natknąłem się na konstruktywne omówienie zagadnienia „nowa zakładka czy nie”. Konkluzja jest taka, że istnieją rozmaite sposoby, którymi użytkownik może wymusić nową zakładkę klikając w link (wspomniane już przytrzymanie CTRL albo środkowy przycisk myszy, ale także pewne wewnętrzne ustawienie w Firefoksie). Natomiast dużo trudniej o otworzenie linka w tej samej zakładce, jeżeli dodany jest doń target="_blank". Ergo, należałoby tego atrybutu unikać – aczkolwiek dodawanie go przy zewnętrznych linkach jest nie najgorszym kompromisem. Więc niech zostanie tutaj tak jak jest. :)