#web​dev

wszystkie notatki oznaczone etykietą "web​dev"

Automatyczne linki do dokumentacji w Hugo

W ostatnich moich wpisach o C++ odwoływałem się często do opublikowanego w sieci, w postaci strony HTML, standardu tego języka. Pomyślałem sobie, że zamiast w treści surowego wpisu dodawać bezpośrednie odnośniki do linkowanych fragmentów, dobrym pomysłem będzie używanie identyfikatorów (tych ze standardu) i przerzucenie całej roboty na generator strony. Nie ograniczając się tylko do cpp mógłbym obsłużyć też inne często linkowane dokumentacje. Taki mechanizm ma też inną zaletę – czystsza treść i prostsza forma wpisu bez linków do dokumentacji, a tym samym bezproblemowa zmiana miejsca docelowego wskazujących odnośników.

Czytaj dalej

Generowanie plików z pomocą Hugo Pipes

W ostatniej mojej notce przedstawiłem prosty sposób na tworzenie w Hugo dodatkowych plików za pomocą niestandardowych formatów wyjściowych, a dzisiaj chciałbym spróbować do tego celu wykorzystać “pipki” (Hugo Pipes). Tematyka nadal będzie poruszać się wokół mapy przekierowań ;)

Generowanie mapy przekierowań z Aliasów w Hugo

Hugo posiada możliwość udostępniania stron pod różnymi adresami za pomocą aliasów, które “przekierowują” do głównej treści. Może to być bardzo przydatne przy zmianach adresu danej podstrony. Ja nie korzystam z tego mechanizmu, ale chciałem sprawdzić czy można zmusić Hugo do wygenerowania pliku z mapą przekierowań (redirects.txt), bazując na zdefiniowanych w treści aliasach. To pozwoliłoby przekształcić je w pełnoprawne przekierowania 301. Aliasy w Hugo Dokumentacja dotycząca aliasów jest dość krótka i w prosty sposób opisuje działanie tego mechanizmu.

Czytaj dalej

Masowe przekierowania z RewriteMap (Apache)

Przy migracji i poprawianiu starych wpisów zaktualizowałem niektóre tytuły, tym samym ich adresy URL uległy zmianie. Dla zachowania kompatybilności, szczególnie z zewnętrznymi odnośnikami, wypadałoby dodać jakieś przekierowania co do niektórych wpisów. I przypadkiem odkryłem ciekawy sposób na masowe przekierowania w Apache. Początkowo chciałem napakować swój .htaccess dyrektywami z mod_alias-a: Redirect 301 /old-post-slug /new-post-slug # old url posted on some external website Redirect 301 /1999/hacking-forum /hacking-forum-scripts Wydawało mi się to jedynym wyjściem.

Czytaj dalej

Przyspieszanie strony - zapytania/cache/kompresja w HTTP

Moje eksperymenty z przyspieszeniem bloga, czyli minimalizacja zapytań, cache i kompresja w HTTP. Minimalizacja zapytań Cache Kompresja

Kanały RSS/Atom w Hugo

Mój statyczny blog już działa, choć wymaga jeszcze trochę poprawek. Jednym z ważniejszych elementów wymagających dopracowania są kanały RSS/Atom. To przecież wciąż jedyna słuszna metoda syndykacji i notyfikacji o zmianach na stronie. Hugo w standardzie wspiera i automatycznie generuje kanały RSS. Niestety domyślne ustawienia i założenia nie spełniają moich specyficznych potrzeb, więc nadeszła pora na dostosowanie… i generowanie własnego kanału ;) RSS 2.0 i domyślny szablon Hugo posiada wbudowany wewnętrznie szablon dla kanałów RSS 2.

Czytaj dalej

Web Scraping i ScreenShooting w Headless Chrome (CLI)

“Web Scraping” kojarzy mi się z odległymi latami, kiedy to tworzyło się boty i skrypty w Perlu wyciągające ze stron różne potrzebne dane. W większości działały one w command-line i “widziały” tylko to co zawiera źródło strony. Trochę więcej zachodu było jeśli chciało się mieć jakiś dostęp do DOM-a i wykonywać skrypty JS (własne lub te ze strony), aby dostać finalny kod strony, jaki widzą użytkownicy w przeglądarce. To wymagało już jakiś sztuczek z embedowaniem przeglądarki lub jej silnika.

Czytaj dalej

Hugo shortcode dla Endomondo

Do niektórych notatek z wyjazdów i wypraw, gdzie mam “nagrane” jakieś trasy na swoim Endomondo fajnie byłoby dołączać do treści wpisu jakieś małe podsumowanie “treningu” w prostej formie. Standardowo w Hugo jest kilka predefiniowanych shortcodes dla popularnych serwisów, ale dla Endomondo takowego nie znajdziemy. To nie problem bo stworzenie własnej “wstawki” jest banalne. Serwis Endomondo udostępnia widżety - kawałki HTML-a z iframe, które umożliwiają osadzenie informacji z serwisu na dowolnej stronie.

Czytaj dalej

Proste wewnętrzne ref-linki w Hugo

Gdy w jednej notatce potrzeba się odwołać do innego wpisu wystarczy użyć zwykłego odnośnika. W takim WordPress-ie nie było żadnego mechanizmu i dodawało się po prostu zwykły link do podstrony z wpisem (bezwzględny w domyśle). Podobnie mógłbym robić na stronie generowanej w Hugo, ale to mi się nie podoba… Nie chcę w plikach z treściami bezwzględnych linków do wewnętrznych elementów strony - preferuję relatywne względem roota strony. Nie chcę też sztywnych adresów, bo jak zmienię nazwę, sluga bądź format generowanych adresów to wszystko się rozjedzie.

Czytaj dalej

Oznaczanie języka przy prezentacji kodu na stronie

Prezentując na stronie różne fragmenty kodu, czy to w formie pokolorowanej czy surowej, często nie podaje się oznaczenia języka. W końcu z kontekstu i składni wynika co to jest, choć nie zawsze łatwo jest to wydedukować. W związku z tym wpadłem na pomysł, aby “label” z identyfikatorem języka pojawił się obok wyświetlanego kodu. Na początku myślałem, że uda mi się zmusić jakoś Hugo/Chroma do dodawania takiej informacji do generowanej strony. Ale gdy takowej możliwości nie znalazłem słuszne wydawało się zastosowanie do tego celu JS-a.

Czytaj dalej