From 66833dc93efade4fccdca27a112d1621c6ecde91 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Wed, 16 Mar 2022 16:52:03 -0700 Subject: [PATCH] Improve narrow screen compat - Replace long snippets - Add some soft hyphens. - Make one image of text look better on a narrow viewport. --- assets/p/underlines.png | Bin 1968 -> 2935 bytes assets/p/underlines.webp | Bin 1716 -> 2860 bytes assets/p/underlines_dark.png | Bin 2120 -> 2832 bytes assets/p/underlines_dark.webp | Bin 1830 -> 2738 bytes content/posts/website-best-practices.gmi | 6 ++++-- content/posts/website-best-practices.md | 22 +++++++++++----------- layouts/posts/single.html | 2 +- 7 files changed, 16 insertions(+), 14 deletions(-) diff --git a/assets/p/underlines.png b/assets/p/underlines.png index fbf886ca08ebb7199c4437c94ac550d15ff566c8..fe6f6904af46f420079b82a40278c0b3ea872389 100644 GIT binary patch literal 2935 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 K=`D2sv!Qj3Cz|*G literal 1716 zcmV;l221%;Nk&Gj1^@t8MM6+kP&iDV1^@sru)-k#)lhB#Hcj3@LzmN(;WP`en+H}bbnR(srpq^#+7B-+F_AP`I-d23j9W?J_~4d z_Io6|KY=y%2GrOtZS5;bWtgr0P-@oa4|{*ufUK7C)j07Va&UeFw#M#s`?->u3R8Q1 zC|mR4nC%03o-Zx)E?iuuD@1;Sv)_aL5mdhg^R-}JORMa`tzCfAYVTvGl;v63%CQoZ zhrsekA=Qw;)_TiqNRIKHD`KLi58Ysb0|Yqn zA$L?fm6ck{cnk)%TN{|Qa*JHvgg(Gkfvh&woIc2)h-(;iq9%j&#T$$7AVpoqAey&lY=ECOholQbhdgOI<01H zgwxp7YKd4=0jjOBlyN#3zx$!4J3M5^OgKSff`%RV5b-IPn+?zU?ZW0QqmBnQMo%3U z+UgvmIdL|awAouLjTuNDlG8%0J4km#umxTOVB6#qsxVI~wMbLpew$@;D592i8Hvx< zCF_+~)yu}YZ4M*DvfYv6`tRl+WD;q~I?(-nn!wDd+bSzuRPG#i9m_PwkxHt-h)X5IEa>5c$C zt_T|2`W2{fB&j4#g}ZgzyepLv<(E+RzeasNsj2NG*6A<$Kuj?o{v_V8apf31S@{7?2Ih=7?lN(gbIT z#6uWn-NL$q0(axzBk;nTi@e$E3sjgUWx-8__ECJ!jH)%Q%!c=29V|7#s2H=Q<_x58UT4}% z(AjkgKcU<+gRaCi&Rtp)twjgM*iE7)N^0+Wd~x|On!xONj=)yHJe>5XQDB_fdnN%i z8v^d8zGfiSEv!4Df}*^ zlN{LgsiBd)q9&G+-pfX8PlJ5O0AMaX)I3HgFh)700G>^hMaXNA1$W1b2vnFSWnfJe zgQ|^Fwi))j4scd=*+3US_egn?CGEmf$KxgM+~5$nguo_%?^gS$Q|s&iRqd39s9}fI zNMK%Cu8O<>hqCt@Xc=BM%!w6Wq8qe8Y@ljGpc~~Wt*coff^WW>Rz>b)=_I3h=+x0o z)ghO>nU;-&>=Yd-o_;frd2_s^NMJtY=$ip2hS$FN)$ABMK&vibpW|h>FW|h9gBO6v zr_H(q=zq^4#W^@jYV#TNmI}{d>Y7hm^H3AD;bF3rrXK>IhB~}}6@T92<`XpD1Or27 z#ssiz&JIg`5@y}HCEf8F0u^RSIY?6lA!^UCt*@&YwORAzu=QW8qOYR-va!l97cTYL z!3s|7BHdo+x-&0X|E*>wu%NQ?%(46Y`mYVUY_DcTnA$k$Enfc)b!#}`J8UhHVXJdRKsRChUS{vxtdrECG&L#b1(c-H z-Z<*WAh_VYz&$N$VmaUADvHk7NPO@PTe|S-!RFcRtx#azUS{hkjctn@n9b?o*|z9@ z$h7^R`NZ$A<>2l(O-_tRg-KE_0n$`4m|6ykui9G7>whS+)w?+1pJC{!2jFtuQJzY4 z6MLEb*K-PRWBjj-y%%(lnnU=+F4!b!$N$s-H&KZMJq6noi4Xq_L%W}0pypF+rHwKY z7}Wfiuu=QQA=#W6km~viC)!Wv?VFi(*Sfen&fr9bVBrR;>H8lyRS=?<0^&nI!|*M% zwblpxSna3$WbgOz=1=y2v$8dRuQJ)HzgIES)2|1Azizkx-2QX>&+R|A|J);S`_FUx z|Lonj|IgkXefI9#|7Y*M{eSjued0#^eyZ=SG0tC_{lSaVBfej1{cExPr}WvoZ~wXd K=k}kwSRMe*u5;!9 diff --git a/assets/p/underlines_dark.png b/assets/p/underlines_dark.png index 5a73c97e08be9dd0a82b5272e40b5f2e5dbc416e..d77cc472168e42122626577cadf8be6544193c45 100644 GIT binary patch literal 2832 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 diff --git a/assets/p/underlines_dark.webp b/assets/p/underlines_dark.webp index 95f549f93cfaa6e2b6eecc1b0ff21ff91b07265b..238f05713ba73049c78bbe516cddd74df788312f 100644 GIT binary patch literal 2738 zcmV;j3QhG=Nk&Gh3IG6CMM6+kP&iDT3IG5v3IZJfCqR&G8_X~UF@pP?OxiX`WmHBD z%+d(6jdLRyz<%d&^B=(fwyCJ#y|(SFwXJPK-~c3>0I*R2*o*)S8u`sn(Yd(E@Y zcSQdsIFcl`%@CMC2Z^59JCaA{h7TD2&)gOo;ayQjaG<8yOQ>@c+;0ZGwc(H=bi9ya zD~@9*BZo`>MSkzsRW}NedZz>{9ed_S%!Qr5qdz0%!a~-A1(O%)}Ps4&n zpRTbQW1ZN=b)n%t6fyrw@cKhyu{%06!}dFpxE~z2Lp#;t9|#$=H~+1mpJ)zmy$5Gz zG(OPZefE37Kj2&N8o-Kd&WZ>IMS$=EdOyyWQ22f?*HN(#O@WOZQYoz+Z(RUC(c zgs<8enpY9k(P$W1c}}91RN#;-TpXcuhVLy!W0X)Ld@mar5jZ0-GNm4qIjf(^Wke{( z{z>$LkS-mHB_Ikm*LgE@H_HHWS*qxeuk@tYu~3z`6FGV>_h-CN~SI~7LL5xn2G4sbg@aJPB~jW=iQ(WdA<$nPg@P03UaW6FWt^ zEM&zI6P)N z>DP8oi3ZeJBs^hpk2M5Zyg~k#PWf5@)r@dJWZ2E+HtZH^x1jILuU4Z5O&RYbdx!SB6TsOU*(3Ly_11!GpZQD2?P~aeX0wko zP4xWVhx~W#ivL$unu|O$6UZkFcy)D1lnaT)Ulb2G#&X}ch{fM zK5M0XsugA_xt4q7G=AqHe+k6(*wIv)VpUw0SxK?tHH1p-nWmZAb~FsF&9}ls&_$bY zPDh?UiFv*{^TLw*E$DYs5=zWHsbgRz9WA^T2$e2E5BbnQRUZl-%^_0{`q8)Hm`>>H zV5(sbKalswiiI<_j;gP~l*d6S z6X@N|e&inBN{6q6aOz|fe6G3{=+GFvxq-eEKXK}i^b#*nvh)b=8L!IndO31zi#_wD ztX3MDWxW?cJrcG1%hi$TUaxw0&)WZnQZ7ta8 z0H4QT9d2pFl0AAqbT9rNb09j%9I>dYO0lP6`}yo&o&GZaCT#!rAOC*=pRoNM*=4tOZ3#x6O|?+@YS{zTWIZiLbpO@+Vt?2JTzFYr1nt#++=(MUVgl?w>Qk>c&XHSbeh( zmO88|+mr75l$YX>C4I|o*6!^+Rv5l9?SXOG=;+!+CZVtv(eFw2eMAjvj7(;Q;k{yo z;oAm@FR&Gcrz&5ajAHk;Tmf8?I#sA62uIkFKwA`0`9|G%Jrk zbmg&-mB&I>9&d6y!dt+y#H?$?)xg7B(6?UVrI6t8uaB&D<#C$HQFiKmcxo)-0NqFo z=RM>E7W2r6;TgkIl*Je$S>7BQnm2&xm@!waLWf1rd$d!+6oDRK$(anWr%TUeU=rFh zy%=!9;79@BD`m}|Vu$tEks2e-46r_B8!Q~Q}Xf^j(MHBikIE7v2T?0Hw#!PRT3h5Lozz>CV z%2z=GfFBL$n_MtmhfFV-VWhc4rZ81`t*>&A^?5D50Z3=K_DpY1(#+oo8oMQxw#sDl zWa`M0N)6<7EM|J=etE5pujjXF&-!HZX*1I8$R(UNL3kYvT2gB?m%(3AMKir=LNw5z zQ@>1a8B1Y|G-q_|D3#a*61AHARhgwR)4SB>I2RF!^pb4l89U@SLA`O3jM~1LUh1(m zqjNiw8BA#n9guRexnHK26V6lib@+iyZ#0^0q*q#UoP9FAu@bAoMI0wX``7}g`K2I@ zrA)6hpm@dcAFP5G*)-Dt@>kg05%xc1J?-7>wga6fx$6O!9Z zrgsEX?ud=fbfZN6L^0FLpjCv@%wL!db#1Qevr60`&RlyhUB2Xwux}YI9i85UQkCgF z=RzIROdZz{Dn;MN+=1#acOW)%@0x7(>J|4}8hQyWKj>R=3gq2TntiUUdgNN?iv-d( zp{M^(Ut%8H$v!p@9dOJ%+5A;k7_BphWgA)1Nwk1S?+U`s!*vguw2D#2igY zTvqQ|$d$o7GV-;A9~X&mrKx-rt!aeOASBt`@aD9Uy+e%?%!AfTjd|&ceLdN!@<})? zOR}fQB%37{Iay4Aw^3UU(O3raNN`oE3X`3+pCGgHA@FIF&3Mxe;>-)@9_??@L%MZ% zi{9YjxfpuFr&7jWQfKUwXKIBTcCwEmHgz>`(OZ$R_r7NhJd1XMu8mpz)QQOQN2&c0Fc s-y)k2zs_dPBY*YH74g;IXTvMmUwo_B>9+qq8_r(->fWZ|e>`mi00eJW!vFvP literal 1830 zcmV+>2if>iNk&E<2LJ$9MM6+kP&iBy2LJ#su)-k#wRnzzNt2{%+xXK1O%Mk)&;kvR z0x1vxWk~a*RzdwJCJwZ`Te;)TMg1??l(*2?G z#{|FV$^71pys}IcWfqyS?@8c8;Aeio-wV-daq~g%n-mwBmZuF4n5>1V5#36jD z?1k7;RlU)N6pM)_8KB4>R_wr`h~FStOu5TQVC}m3g+h1e9w`Mx9Vx`3X2(1#wx^tp z%%<5NR@mlL7HS`oH^pEbG34$r(IlEQF{4R7rV8sxEu`F3JZM_443dMJ)KW=3qX$!D!qo6nH8FYJh1JB?@d&CcLKQhw^Zbx3 z#OrGDm>(WIL(N7&$i5^+bsB?p#L&7!XEQ+-nwv3HSWSweHI)?f!e)|9YKs{aNz9jc zSj+|?oSTcuZ6tB5Vo=@S%BJlSVIigHRAC6l#2QMZfpbixusvz|3R6vbB6Sj5h*leP z^9&Z8B{2PZm|@CB&0cKZD@iPh)*Xfwp1SE_X39`uH7SbLR5WNgm4H<(QK+z9iADEn za)MoCS*SB8g`+w*7CB6<%2RA!^sFjQ0ma;HYNC;+SeR5ELN(!mp5;6$x~@|w!`1Ud z>`IgQB{jShn2sM}mVla#8Ao3|IGUn$hn0miQz%1))ugCyt*OM*b^%STozbKjUWil? zmU#^>=%m%?L%}xS5`sD~fWeO*I3Pkl$**%LsNSKCxz*JNwlk~%La8;AZK8o91@W(o{6tx zRlm!8a&R7vY=R4^M)RmQ@)U|quNf%CytZ4F0@K*ouB@op7`S~<%W%tJsIZchqFZPI z+n}j6A~eGW{53E=d^HV=$-t?B1t=n1a3mD*j3F^uv10iK)RQvA_%< ztPk5++OY3>_;$1kv!o0(PSNb)bKE(7vDt~Y&WX2GUd5E>+tXQurv@Pd7hNQI$a!B+ zzvgW|hibx8thr+)rUj4I-!}NZbLr+6ikI0InAo&aK+ERTAgW&Hs1t9iyaz*twWJtI zQyB+E?HO|1@{L9B%q<=J{og`gg-0a20VrrdpB<=(9fAw~p%a^mn3vrD^){GjF35?z zAp36H{of(p|CPg@ih1qks~DIzfCew1W^ zz#OWH463_WSke(&5x)`Lp`G3EnIzTxLV?X#nF8bX*6v6&J<_aQayDmIMv^l3L^9E= z%9{=b>y16-?l=PzX~R-sB`KDG*i_a*Q>!7x=Zh5ehVPplU2cF+=}+m%u{(PD;IQCf zX856VJJTHK?Wf=7yU|4^nZ)>;N6gPxyg)>-Sy-Ejsc(u5YSwVDkmO=TMt zwJJP5*7DIcK0`}Gxa;`Vzm|Fp>tE&tJ-)G0sBf#(ZuqxVCc4JQ!ME4t@t? https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP CSP on MDN -For example, here's the CSP for https://seirdy.one: +For example, here's the CSP for my website: ``` content-security-policy: default-src 'none'; @@ -120,7 +120,9 @@ That being said, many users *do* actually override stylesheets. We shouldn't *re I don't know much about fingerprinting, except that you can't do font enumeration without JavaScript. Since text-based websites that follow these best-practices don't send requests after the page loads and have no scripts, they shouldn't be able to fingerprint via font enumeration. -Other websites can still fingerprint via font enumeration using JavaScript. They don't need to stop at seeing what sans-serif maps to: they can see all the available fonts on a user's system, the user's canvas fingerprint, window dimensions, etc. Some of these can be mitigated with Firefox's "privacy.resistFingerprinting" setting, but that setting also understandably overrides user font preferences. +Other websites can still fingerprint via font enumeration using JavaScript. They don't need to stop at seeing what sans-serif maps to: they can see all the available fonts on a user's system, the user's canvas fingerprint, window dimensions, etc. Some of these can be mitigated with Firefox's protections against fingerprinting, but these protections understandably override user font preferences: + +=> https://support.mozilla.org/en-US/kb/firefox-protection-against-fingerprinting Firefox's protection against fingerprinting Ultimately, surveillance self-defense on the web is an arms race full of trade-offs. If you want both privacy and customizability, the web is not the place to look; try Gemini or Gopher instead. diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index db448f1..a348195 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -18,7 +18,7 @@ I realize not everybody's going to ditch the Web and switch to Gemini or Gopher - Final page weight under 50kb without images, and under 200kb with images. Page weight should usually be much smaller; these are upper-bounds for exceptional cases. - Works in Lynx, w3m, links (both graphics and text mode), NetSurf, and Dillo -- Works with popular article-extractors (e.g. Readability) and HTML-to-Markdown converters. This is a good way to verify that your site uses simple HTML and works with most non-browser article readers (e.g. ebook converters, PDF exports). +- Works with popular article-extractors (e.g. Read­ability) and HTML-to-Markdown converters. This is a good way to verify that your site uses simple HTML and works with most non-browser article readers (e.g. ebook converters, PDF exports). - No scripts or interactivity, preferably enforced at the Content-Security-Policy (CSP) level - No cookies - No animations @@ -59,7 +59,7 @@ A false sense of security is far worse than transparent insecurity. Don't offer Consider taking hardening measures to maximize the security benefits made possible by the simplicity of textual websites, starting with script removal. -JavaScript and WebAssembly are responsible for the bulk of modern web exploits. Ideally, a text-oriented site can enforce a scripting ban at the [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) level. For example, here's the CSP for `https://seirdy.one`: +JavaScript and WebAssembly are responsible for the bulk of modern web exploits. Ideally, a text-oriented site can enforce a scripting ban at the [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) level. For example, here's the CSP for my website: ``` content-security-policy: default-src 'none'; @@ -105,7 +105,7 @@ That being said, many users _do_ actually override stylesheets. We shouldn't _re I don't know much about fingerprinting, except that you can't do font enumeration without JavaScript. Since text-based websites that follow these best-practices don't send requests after the page loads and have no scripts, they shouldn't be able to fingerprint via font enumeration. -Other websites can still fingerprint via font enumeration using JavaScript. They don't need to stop at seeing what sans-serif maps to: they can see all the available fonts on a user's system, the user's canvas fingerprint, window dimensions, etc. Some of these can be mitigated with Firefox's `privacy.resistFingerprinting` setting, but that setting also understandably overrides user font preferences. +Other websites can still fingerprint via font enumeration using JavaScript. They don't need to stop at seeing what sans-serif maps to: they can see all the available fonts on a user's system, the user's canvas fingerprint, window dimensions, etc. Some of these can be mitigated with Firefox's [protections against fingerprinting](https://support.mozilla.org/en-US/kb/firefox-protection-against-fingerprinting), but these protections understandably override user font preferences. Ultimately, surveillance self-defense on the web is an arms race full of trade-offs. If you want both privacy and customizability, the web is not the place to look; try Gemini or Gopher instead. @@ -146,7 +146,7 @@ Users who click a link _choose_ to load a full page. Loading pages that a user h I have two responses: 1. If an image isn't essential, you shouldn't include it inline. -2. Yes, users could disable images. That's _their_ choice. If your page uses lazy loading, you've effectively (and probably unintentionally) made that choice for a large number of users. +2. Yes, users could disable images. That's _their_ choice. If your page uses lazy loading, you've effectively (and probably unintention­ally) made that choice for a large number of users. About custom colors ------------------- @@ -157,7 +157,7 @@ Some users' browsers set default page colors that aren't black-on-white. For ins {{< picture name="website_colors" alt="This page with a grey background behind black/grey headers and white-on-white code snippets" >}} -A second opinion: {{% indieweb-person first-name="Chris" last-name="Siebenmann" url="https://utcc.utoronto.ca/~cks/" %}} describes this in more detail in [AWebColoursProblem](https://utcc.utoronto.ca/~cks/space/blog/web/AWebColoursProblem). In short: when setting colors, always set both the foreground and the background color. Don't set just one of the two. +A second opinion: {{% indieweb-person first-name="Chris" last-name="Siebenmann" url="https://utcc.utoronto.ca/~cks/" %}} describes this in more detail in [AWebColours­Problem](https://utcc.utoronto.ca/~cks/space/blog/web/AWebColoursProblem). In short: when setting colors, always set both the foreground and the background color. Don't set just one of the two. Chris also describes the importance of visited link colors in [RealBlogUsability](https://utcc.utoronto.ca/~cks/space/blog/web/RealBlogUsability). @@ -183,8 +183,8 @@ Darker backgrounds draw less power on devices with OLED screens; however, backgr If you can't bear the thought of parting with your solid-black background, worry not: there exists a CSS media feature and client-hint for contrast preferences called `prefers-contrast`. It takes the parameters `no-preference`, `less`, and `more`. You can serve increased-contrast pages to those who request `more`, and vice versa. Check [prefers-contrast on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) for more information. -Image optimization ------------------- +Image optimiza­tion +----------------------- Some image optimization tools I use: @@ -299,7 +299,7 @@ These tests start out pretty reasonable, but gradually get more ridiculous. Once 5. Test with a screen reader. 6. Test keyboard navigability with the TAB key. Even without specifying tab indexes, tab selection should follow a logical order if you keep the layout simple. 7. Test in textual browsers: lynx, links, w3m, ELinks, edbrowse, EWW, Netrik, etc. -8. Read the (prettified/indented) HTML source itself and parse it with your brain. See if anything seems illogical or unnecessary. Imagine giving someone a printout of your page's `` along with a whiteboard. If they have a basic knowledge of HTML tags, would they be able to draw something resembling your website? +8. Read the (prettified and indented) HTML source itself and parse it with your brain. See if anything seems illogical or unnecessary. Imagine giving someone a printout of your page's `` along with a whiteboard. If they have a basic knowledge of HTML tags, would they be able to draw something resembling your website? 9. Test in an online website translator tool. 10. Test on something ridiculous: try your old e-reader's embedded browser, combine an HTML-to-EPUB converter and an EPUB-to-PDF converter, or stack multiple article-extraction utilities on top of each other. Be creative and enjoy breaking your site. When something breaks, examine the breakage and see if you can fix it by simplifying your page. 11. Build a time machine. Travel decades--or perhaps centuries--into the future. Keep going forward until the WWW is breathing its last breath. Test your site on future browsers. Figuring out how to transfer your files onto their computers might take some time, but you have a time machine so that shouldn't be too hard. When you finish, go back in time to [meet Benjamin Franklin](https://xkcd.com/567/). @@ -313,7 +313,7 @@ Some typographers insist that [underlined on-screen text is obsolete](https://pr One reason is that underlines make it easy to separate multiple consecutive inline links: -{{< picture name="underlines" alt="a line of three consecutive hyperlinks with and without underlines" >}} +{{< picture name="underlines" alt="two lines with two consecutive hyperlinks each, one line with and one without underlines" >}} Underlines also make it easy for readers with color vision deficiencies to distinguish the beginnings and ends of links from surrounding text. A basic WCAG Level A requirement is for information to not be conveyed solely through color: @@ -342,7 +342,7 @@ This page can be thought of as an extension of the principles of Brutalist Web D
  • The back button works as expected.
  • View content by scrolling.
  • Decoration when needed and no unrelated content.
    • -
  • Performance is a feature.
    • +
  • Perform­ance is a feature.
    • @@ -371,6 +371,6 @@ If you've got some time on your hands, I _highly_ recommend reading the [W [^3]: Here's an [overview of PE](https://en.wikipedia.org/wiki/Progressive_enhancement) and [my favorite write-up on the subject](https://whalecoiner.com/articles/progressive-enhancement). -[^4]: Consider disabling the JIT for your normal browsing too; doing so removes whole classes of vulnerabilities. In Firefox, toggle `javascript.options.ion`, `javascript.options.baselinejit`, `javascript.options.native_regexp`, `javascript.options.asmjs`, and `javascript.options.wasm` in `about:config`; in Chromium, run chromium with `--js-flags='--jitless'`; in the Tor Browser, set the security level to "Safer". +[^4]: Consider disabling the JIT for your normal browsing too; doing so removes whole classes of vulnerabilities. In Firefox, navigate to `about:config` and toggle these options:
    javascript.options.ion
    javascript.options.baselinejit
    javascript.options.native_regexp
    javascript.options.asmjs
    javascript.options.wasm
    In Chromium and derivatives, run the browser with `--js-flags='--jitless'`; in the Tor Browser, set the security level to "Safer". diff --git a/layouts/posts/single.html b/layouts/posts/single.html index 816a5b6..4c17f90 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -35,7 +35,7 @@

    Send an email to leave a comment in the mailing list for seirdy.one. You'll have to send in plain text; please learn how. Alternatively, send your email directly to me; it won’t show up on the mailing list, but I’ll see it.

    This site also supports Webmentions. Webmentions received for this post will appear below after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don't support them. Check the Wayback Machine if any links are broken.

    -

    Webmentions

    +

    Webmen­tions

      {{ $target := .RelPermalink -}} {{ $url := printf "https://seirdy.one/webmentions/get?status=approved&target=https://seirdy.one%s" $target -}}