danilafe-com-0cob7b.txt (27632B)
1 Daniel's Blog 2 3 [1]Home [2]About [3]GitHub [4]Resume [5]Tags [6]Series [7]Favorites [8]Search 4 [9]All Posts 5 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6 7 Microfeatures I Love in Blogs and Personal Websites 8 9 [10]Website 10 11 Posted on June 23, 2024. 12 13 Table of Contents 14 15 • [11]Sidenotes 16 • [12]Tables of Contents 17 □ [13]Bonus: Showing Page Progress 18 • [14]Easily Linkable Headings 19 • [15]Grouping Series of Posts 20 • [16]Dialogues 21 • [17]Code Blocks with Origin 22 □ [18]Bonus: Code Blocks with Clickable Links 23 • [19]Markers for External Links 24 □ [20]Bonus: Different Markers for Different Destinations 25 □ [21]Bonus: Link Preview 26 • [22]RSS Feeds 27 • [23]Links to Other Sites 28 • [24]Conclusion + Anything Else? 29 30 Some time ago, Hillel Wayne published an article titled [25]Microfeatures I’d 31 like to see in more languages . In this article, he described three kinds of 32 features in programming languages: fundamental features, deeply engrained 33 features, and nice-to-have convenience features. Hillel’s premise was that 34 language designers tend to focus on the first two; however, because the 35 convenience features are relatively low-overhead, it’s easier for them to jump 36 between projects, and they provide a quality-of-life increase. 37 38 I’ve been running a blog for a while — some of the oldest posts I’ve found 39 (which are no longer reflected on this site due to their low quality) were from 40 2015. In this time, I’ve been on the lookout for ways to improve the site, and 41 I’ve seen quite a few little things that are nice to use, but relatively easy 42 to implement. They don’t really make or break a website; the absence of such 43 features might be noticed, but will not cause any disruption for the reader. On 44 the other hand, their presence serves as a QoL enhancement. I find these to be 45 analogous to Hillel’s notion of “microfeatures”. If you’re interested in adding 46 something to your site, consider browsing this menu to see if anything 47 resonates! 48 49 One last thing is that this post is not necessarily about microfeatures I’d 50 like every blog or personal website to have. Some ideas I present here are only 51 well-suited to certain types of content and certain written voices. They need 52 not be applied indiscriminately. 53 54 With that, let’s get started! 55 56 [26] 57 58 Sidenotes 59 60 [27]Gwern is, in my view, the king of sidenotes. Gwern’s writing makes very 61 heavy use of them (at least based on the articles that I’ve read). This is 62 where I originally got inspiration for [28]my own implementation in Hugo. Check 63 out the page on [29]hydrocephalus for an example; Here’s what a piece of that 64 page looks like on my end at the time of writing: 65 66 A screenshot of Gwern's page on hydrocephalus. The main article text is 67 accompanied by notes in both the left and right margin. 68 69 A screenshot of Gwern’s page on hydrocephalus 70 71 Sidenotes are nice because they allow for diversions without interrupting the 72 main article’s flow. You can provide additional details for the curious reader, 73 or — [30]as Gwern does — use the sidenotes for citing studies or sources. In 74 either case, the reading experience is significantly more pleasant that 75 footnotes, for which you typically have to go to the bottom of the page, and 76 then return to the top. 77 78 Another reason I called Gwern the “king of sidenotes” is [31]this page on 79 sidenotes . There, Gwern documents numerous approaches to this feature, mostly 80 inspired by [32]Tufte CSS . The page is very thorough — it even includes a link 81 to my own work, as unknown as it may be! I would recommend checking it out if 82 you are interested in enhancing your site with sidenotes. 83 84 [33] 85 86 Tables of Contents 87 88 Not all personal sites include tables of contents (TOCs), but they are nice. 89 They serve two purposes: 90 91 1. Seeing at a glance what the post will be about, in the form of headings. 92 2. Being able to navigate to an interesting part of the page without having to 93 scroll. 94 95 Static site generators (I myself use [34]Hugo ) are typically able to generate 96 TOCs automatically, since they are already generating the HTML and know what 97 headings they are inserting into the page. For instance, Hugo has [35] 98 TableOfContents . I suspect the same is true for other existing website 99 technologies. 100 101 Despite this, I actually had to look relatively long to find sites I frequent 102 that have TOCs to show off as examples here. The first one I came across — 103 after Gwern’s, whose site will be mentioned plenty in this post anyway — is 104 [36]Faster than Lime . Take this post on [37]Rust’s Futures ; this is what the 105 top of it looks like at the time of writing: 106 107 A screenshot of the table of contents on Faster than Lime. A box with the word 108 "Contents" contains links to several sections on the page bellow (off screen) 109 110 A screenshot of the table of contents on Faster than Lime 111 112 The quality and value of TOCs certainly depends on the sections within the page 113 itself — and whether or not the page has sections at all! — but in my opinion, 114 the benefits to navigation become apparent even for relatively simple pages. 115 116 As an honorable mention, I’d like to show [38]Lars Hupel’s site . The pages on 117 the site don’t — as far as I can tell — have internal tables of contents. 118 However, pages that are part of a series — such as the [39]introduction to 119 CRDTs — have tables of contents that span the entire series. 120 121 A screenshot of the table of contents on Lars Hupel's site. A box with the 122 words "Series Navigation" contains links to several other pages in the series. 123 124 A screenshot of the table of contents on Lars Hupel’s site 125 126 I also find this very nice, though it does miss out on headings within a page. 127 128 [40] 129 130 Bonus: Showing Page Progress 131 132 I’ve mentioned that tables of contents can communicate the structure of the 133 page. However, they do so from the outset, before you’ve started reading. In 134 their “base form”, the reader stops benefiting from tables of contents once 135 they’ve started reading. [41][ ][note: That is, of course, unless they jump 136 back to the top of the post and find the table of contents again. ] 137 138 If you want to show progress while the reader is somewhere in the middle of a 139 page, you could use a page progress bar. I’ve noticed one while reading [42] 140 Quanta Magazine ; it looks like this (recording my scrolling through the [43] 141 most recent article at the time of writing ). 142 143 The progress bar on a Quanta Magazine article. As the page scrolls, an orange 144 bar at the top gradually fills up from left to right. 145 146 The progress bar on a Quanta Magazine article 147 148 One immediate thought is that this is completely superseded by the regular 149 browser scroll bar that’s ever-present at the side of the page. However, the 150 scroll bar could be deceiving. If your page has a comments section, the 151 comments could make the page look dauntingly long. Similarly, references to 152 other pages and general “footer material” count towards the scroll bar, but 153 would not count towards the progress bar. 154 155 Combining the two, you could imagine an always-visible table of contents that 156 highlights the current section you’re in. With such a feature, you can always 157 see where you are (including a rough estimate of how far into the page you’ve 158 scrolled), and at the same time see how the current section integrates into the 159 broader structure. I’ve seen this done before, but could not find a site off 160 the top of my head that implements the feature; as a fallback, here’s the [44] 161 CSS tricks tutorial that shows how to implement a dynamic table of contents, 162 and a recording of me scrolling through it: 163 164 The table of contents from a CSS Tricks demo. As the page scrolls, the current 165 section in the table of contents becomes bold. 166 167 The table of contents from a CSS Tricks demo 168 169 [45] 170 171 Easily Linkable Headings 172 173 How can you link a particular section of a page to your friend? There’s a 174 well-defined mechanism to do this in HTML: you can use the ID of a particular 175 HTML element, and add it as #some-id to the end of a link to the page. The link 176 then takes the user to that particular HTML element. I can do this, for 177 instance, to link to the [46]sidenotes section above . 178 179 How does one discover the ID of the part of the page that they want to link to? 180 The ID is not a “visual” property; it’s not displayed to the user, and is 181 rather a detail of HTML itself. Thus, on any given page, even if every element 182 has a unique, linkable ID, I can’t make use of it without going into Inspect 183 Element and trying to find the ID in the HTML tree. 184 185 The simple solution is to make the elements that you want to be easily 186 “linkable” into links to themselves! Then, the user can right-click the element 187 in question (probably the heading) and click Copy Link. Much easier! To 188 demonstrate a similar idea, [47]here is a link to this paragraph itself. You 189 can now use the context menu to Copy Link, put it in your browser, and voilà — 190 you’re right back here! 191 192 As with [48]tables of contents , many website technologies provide most of the 193 tooling to add support for this feature. Relatively often I come across pages 194 that have unique IDs for each header, but no clickable links! I end up having 195 to use inspect element to find the anchor points. 196 197 A variation on this idea — if you don’t want to make the entire heading or 198 title a link — is to include alongside it (before or after) a clickable element 199 that is a link to that title. You can click that element to retrieve link 200 information, instead (and the icon additionally tells you that this is 201 possible). Hugo’s documentation does this: here’s a screenshot of [49]an 202 arbitrary page . 203 204 A title and paragraph from the Hugo documentation. Next to the title there is a 205 blue link symbol. 206 207 A title and paragraph from the Hugo documentation 208 209 [50] 210 211 Grouping Series of Posts 212 213 Some authors like to write at length on a particular topic; to get the content 214 out to readers faster (and to make the resulting pages less daunting), it makes 215 sense to break a single topic up into a series. The easiest way to do this is 216 to just… publish several articles, possibly with related names, and link them 217 to each other. Done! 218 219 With a little more effort, though, the series-reading and series-writing 220 experience could be nicer. Instead of manually inserting links, you could 221 configure your website to automatically add a “next” and “previous” button to 222 pages in a given series. You could also give an overview of a particular series 223 and create a “navigation hub” for it. 224 225 As an example, the [51]Chapel language blog has navigation buttons. Here’s a 226 screenshot from [52]a post in the Advent of Code series : 227 228 Series navigation buttons on a Chapel blog post. There are two buttons; one 229 links to a previous page in the series, another links to the next. 230 231 Series navigation buttons on a Chapel blog post 232 233 I’ve mentioned this in the section on [53]tables of contents , but [54]Lars 234 Hupel’s site has tables of contents that link between series. I’m not sure if 235 it’s automatically generated or hand-written, but it’s definitely nice. 236 237 A screenshot of the table of contents on Lars Hupel's site. A box with the 238 words "Series Navigation" contains links to several other pages in the series. 239 240 A screenshot of the table of contents on Lars Hupel’s site 241 242 [55] 243 244 Dialogues 245 246 I first came across dialogues on [56]Xe Iaso’s site , but I think I see them 247 used most often in posts on [57]Faster than Lime . As an example, here’s a 248 little dialogue on [58]a post about Rust’s futures . At the time of writing, it 249 looks like this: 250 251 A dialogue with "cool bear" on Faster than Lime. The page contains chat bubbles 252 that alternate between a bear character and the author. 253 254 A dialogue with “cool bear” on Faster than Lime 255 256 Using dialogues — even for technical writing — is not a particularly novel 257 idea. I know I’ve seen it in a textbook before; probably this part of [59] 258 Operating Systems: Three Easy Pieces . It can help ask questions from a 259 less-experienced point of view, and therefore possibly voice concerns that a 260 reader might themselves be having. And of course — as with “cool bear” and Xe 261 Iaso’s [60]many characters — it can change the tone and make the page a bit 262 more fun. 263 264 [61] 265 266 Code Blocks with Origin 267 268 This one was recommended to me by a reader, and so I’ll be talking about my 269 page specifically! 270 271 When I was [62]writing about making a compiler, a reader emailed me and pointed 272 out that they were getting lost in the various code blocks. My page displayed 273 the code that I was writing about, but the project had grown beyond a single 274 file. As a result, I’d be making changes midway through one file at one moment, 275 and another file the next. This prompted me to add decorators to my code blocks 276 that look something like this: 277 278 From [63]patterns.rb, lines 3 through 8 279 280 3 def sum_digits(n) 281 4 while n > 9 282 5 n = n.to_s.chars.map(&:to_i).sum 283 6 end 284 7 n 285 8 end 286 287 The decorator says what file the code is from, as well as what lines are being 288 presented. If you click the file name, the decorator links to my Gitea 289 instance, allowing you to read the code in context. 290 291 Though it’s not quite the same (in particular, it’s unfortunately missing 292 links), the Crafting Interpreters online book does something similar. It 293 describes changes to the code in words next to the changed code itself, like 294 “added after MyStruct”. Here’s a screenshot of the page on [64]local variables 295 at the time of writing. 296 297 Location notes on code in Crafting Interpreters. On the right of code blocks, a 298 margin note describes the file and nature of the change. 299 300 Location notes on code in Crafting Interpreters 301 302 I think it looks quite elegant, and in some ways — specifically in the verbal 303 descriptions of what each change does — might be superior to my approach. 304 305 It’s not quite the same thing, but [65]GitHub Gists can help approximate this 306 feature. A Gist could contain multiple files, and each file can be individually 307 embedded into your page. Hugo in particular has [66]built-in support for Gists 308 (and I’ve snagged that link using the docs’ [67]easily linkable headings ); I 309 suspect that other website engines have some form of support as well. At the 310 time of writing, an embedded Gist looks something like this: 311 312 Code embedded in Hugo documentation using a GitHub Gist. 313 314 Code embedded in Hugo documentation using a GitHub Gist 315 316 Clicking list.html takes you to the source code of the file. 317 318 [68] 319 320 Bonus: Code Blocks with Clickable Links 321 322 If we’re going for fancy code blocks, another fancy feature is provided by the 323 [69]Agda programming language . Agda can generate HTML code blocks in which 324 every symbol (like a variable, record name, function name) are linked to where 325 they are defined. So if you’re reading the code, and wonder “what the heck is 326 x?”, you can just click it to see how it’s defined. 327 328 It’s not simple to integrate Agda’s plain HTML output into an existing webpage, 329 but some projects do that. I took a stab at it in my [70]post about integrating 330 it with Hugo. I wager this would be even harder for other languages. However, 331 it leads to nice results; my go-to is [71]Programming Languages Foundations in 332 Agda . The online book introduces various concepts from Programming Language 333 Theory, and each code block that it shows is fully linked. This makes it 334 possible to jump around the page like so: 335 336 Navigating code blocks on a page from PLFA. I hover over then click a plus sign 337 to see how addition is defined. I then do the same to see how natural numbers 338 are defined. 339 340 Navigating code blocks on a page from PLFA 341 342 [72] 343 344 Markers for External Links 345 346 Some sites I’ve seen mark links that go to a different domain with a little 347 icon. If you’ve read this far, you’ve likely noticed that my site does the 348 same. Another good example of this — even though the CSS is little rough at the 349 time of writing — is [73]James’ Coffee Blog ☕ . I’ve taken the (small) liberty 350 to adjust the color of the icon, which I suspect is buggy in my browser. 351 352 An external link on James' blog. The link is displayed as normal, and an 353 additional diagonal arrow aiming up and to the right and surrounded by a square 354 is displayed to the right of the link text. 355 356 An external link on James’ blog 357 358 Some websites ([DEL:this one included:DEL]) also make such links open in a new 359 tab automatically. That way, you tend to not lose the original article by 360 clicking through one of its references. 361 362 [74] 363 364 Bonus: Different Markers for Different Destinations 365 366 [75]Gwern’s website takes this idea further, by changing the icon for external 367 links depending on the destination. For instance, links to Wikipedia articles 368 are stylized with a little “W”, links to Haskell.org are stylized using a 369 lambda (λ\lambdaλ), and links to .zip files have a little archive icon. There 370 are more; [DEL:I’ve found the [76]link processing code on GitHub , and even the 371 [77]list of websites that get their own icons .:DEL] I could not find a verbal 372 description, though. 373 374 Edit: Gwern has pointed out that the links I provided go to obsolete code. The 375 link processing functionality is [78]documented in comments here and the [79] 376 link icon rules are here . A [80]non-code list of icons exists too. 377 378 Now for some pictures. Here are a ton of links from the [81]“About” page! 379 380 Links to Wikipedia on Gwern's blog. Each link is followed by a superscript "W". 381 382 Links to Wikipedia on Gwern’s site 383 384 A link to Haskell.org on Gwern's blog. The link is followed by a superscript 385 lambda. 386 387 A link to Haskell.org on Gwern’s site 388 389 Links zip files on Gwern's site. Each link is followed by an archive icon. 390 391 Links zip files on Gwern’s site 392 393 [82] 394 395 Bonus: Link Preview 396 397 [83]Gwern’s website has no shortage of cool ideas. Among them showing link 398 previews on hover. When hovering over a link, the site displays a popup window 399 that contains a view into that page. I suspect that this view is also archived 400 somehow, so that it retains a view into the page that matches it at the time of 401 writing. 402 403 To be perfectly honest, I found this feature a little jarring at first. As I 404 would try to click links, I would get surprised by an additional overlay. 405 However, as I spent more time browsing the site, I grew quite accustomed to the 406 previews. I would hover over a link to see the first paragraph and thus get a 407 short synopsis. This worked really well in tandem with [84]per-destination 408 marker icons ; I could tell at a glance whether a link was worth hovering over. 409 410 Here’s what it looks like: 411 412 Hovering over a link on Gwern's site. After the link is hovered over, a 413 rectangular popup displays a section of the Wikipedia page the link goes to. I 414 scroll through the section to the table of contents. 415 416 Hovering over a link on Gwern’s site 417 418 [85] 419 420 RSS Feeds 421 422 RSS is a feed standard that allows sites to publish updates. Blogs in 423 particular can make use of RSS to notify readers of updates. RSS feeds are 424 processed by a feed reader, which is a program that polls a website’s index.xml 425 file (or other similar files) and reads it to detect new content. If you opt in 426 to full-text RSS feeds, users can read the entire post entirely from their 427 reader. 428 429 RSS makes it easier to keep up with your site. Rather than having to check in 430 on every author whose content I enjoy on the internet, I can add their feed URL 431 to my list, and have my feed reader automatically aggregate all updates for me 432 to read. It’s kind of like a social media or news feed, except that I control 433 what’s shown to me, and authors of the blogs I follow don’t need to create 434 accounts and explicitly share their work on social media! 435 436 I don’t have any particular website to show off in this section; instead I’ll 437 show you a list of websites that I’m following in my feed reader of choice. You 438 might notice that a lot of these websites are listed here as inspiration for 439 other microfeatures. 440 441 A screenshot of my Feedbin list. Some sites include Hillel Wayne's, Faster than 442 Lime, Drew DeVault, and the Chapel Language Blog 443 444 A screenshot of my Feedbin list 445 446 [86] 447 448 Links to Other Sites 449 450 This feature I first noticed on Drew DeVault’s blog. Every page on Drew’s blog, 451 at the bottom, has a section titled “Articles from blogs I read”. For instance, 452 on [87]a sample post , at the time of writing, I’m seeing the following footer: 453 454 Links to other blogs from Drew DeVault's blog. The links consist of three 455 side-by-side boxes, each with a title and brief excerpt. 456 457 Links to other blogs from Drew DeVault’s blog 458 459 As indicated in the image, Drew’s site in particular uses a program called [88] 460 openring , which is based on RSS feeds (another [89]microfeature I love ). 461 However, how the site finds such articles (statically like openring, or on page 462 load using some JavaScript) isn’t hugely important to me. What’s important is 463 that you’re promoting other content creators whose work you enjoy, which is the 464 ethos of my favorite slice of the internet. 465 466 [90] 467 468 Conclusion + Anything Else? 469 470 Those are all the microfeatures that I could think of in a single sitting. I 471 hope that you have been inspired to integrate features like these into your own 472 site, or at the very least that you think doing so would be a good idea. 473 474 This list isn’t exhaustive. I’ve probably missed some good microfeatures! If 475 you can think of such a feature, let me know; my email address is linked in the 476 footer of this article. 477 478 Thank you for reading, and cheers! 479 480 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 481 482 Liked this article? Have any questions or comments? Please don't hesitate to 483 reach out to me at [91][email protected]! I love receiving emails from 484 readers, and I'm always happy to provide any additional clarification or 485 assistance. 486 487 488 References: 489 490 [1] https://danilafe.com/ 491 [2] https://danilafe.com/about/ 492 [3] https://github.com/DanilaFe 493 [4] https://danilafe.com/Resume-Danila-Fedorin.pdf 494 [5] https://danilafe.com/tags/ 495 [6] https://danilafe.com/series/ 496 [7] https://danilafe.com/favorites/ 497 [8] https://danilafe.com/search/ 498 [9] https://danilafe.com/blog/ 499 [10] https://danilafe.com/tags/website/ 500 [11] https://danilafe.com/blog/blog_microfeatures/#sidenotes 501 [12] https://danilafe.com/blog/blog_microfeatures/#tables-of-contents 502 [13] https://danilafe.com/blog/blog_microfeatures/#bonus-showing-page-progress 503 [14] https://danilafe.com/blog/blog_microfeatures/#easily-linkable-headings 504 [15] https://danilafe.com/blog/blog_microfeatures/#grouping-series-of-posts 505 [16] https://danilafe.com/blog/blog_microfeatures/#dialogues 506 [17] https://danilafe.com/blog/blog_microfeatures/#code-blocks-with-origin 507 [18] https://danilafe.com/blog/blog_microfeatures/#bonus-code-blocks-with-clickable-links 508 [19] https://danilafe.com/blog/blog_microfeatures/#markers-for-external-links 509 [20] https://danilafe.com/blog/blog_microfeatures/#bonus-different-markers-for-different-destinations 510 [21] https://danilafe.com/blog/blog_microfeatures/#bonus-link-preview 511 [22] https://danilafe.com/blog/blog_microfeatures/#rss-feeds 512 [23] https://danilafe.com/blog/blog_microfeatures/#links-to-other-sites 513 [24] https://danilafe.com/blog/blog_microfeatures/#conclusion--anything-else 514 [25] https://buttondown.email/hillelwayne/archive/microfeatures-id-like-to-see-in-more-languages/ 515 [26] https://danilafe.com/blog/blog_microfeatures/#sidenotes 516 [27] https://gwern.net/me 517 [28] https://danilafe.com/blog/sidenotes/ 518 [29] https://gwern.net/hydrocephalus 519 [30] https://gwern.net/hydrocephalus#sn4 520 [31] https://gwern.net/sidenote 521 [32] https://edwardtufte.github.io/tufte-css/ 522 [33] https://danilafe.com/blog/blog_microfeatures/#tables-of-contents 523 [34] https://gohugo.io/ 524 [35] https://gohugo.io/methods/page/tableofcontents/ 525 [36] https://fasterthanli.me/ 526 [37] https://fasterthanli.me/articles/understanding-rust-futures-by-going-way-too-deep 527 [38] https://lars.hupel.info/ 528 [39] https://lars.hupel.info/topics/crdt/01-intro/ 529 [40] https://danilafe.com/blog/blog_microfeatures/#bonus-showing-page-progress 530 [42] https://www.quantamagazine.org/ 531 [43] https://www.quantamagazine.org/how-the-square-root-of-2-became-a-number-20240621/ 532 [44] https://css-tricks.com/sticky-table-of-contents-with-scrolling-active-states/ 533 [45] https://danilafe.com/blog/blog_microfeatures/#easily-linkable-headings 534 [46] https://danilafe.com/blog/blog_microfeatures/#sidenotes 535 [47] https://danilafe.com/blog/blog_microfeatures/#linked-paragraph 536 [48] https://danilafe.com/blog/blog_microfeatures/#tables-of-contents 537 [49] https://gohugo.io/content-management/markdown-attributes/#overview 538 [50] https://danilafe.com/blog/blog_microfeatures/#grouping-series-of-posts 539 [51] https://chapel-lang.org/blog/ 540 [52] https://chapel-lang.org/blog/posts/aoc2022-day09-elvish-string-theory/ 541 [53] https://danilafe.com/blog/blog_microfeatures/#tables-of-contents 542 [54] https://lars.hupel.info/ 543 [55] https://danilafe.com/blog/blog_microfeatures/#dialogues 544 [56] https://xeiaso.net/ 545 [57] https://fasterthanli.me/ 546 [58] https://fasterthanli.me/articles/understanding-rust-futures-by-going-way-too-deep#it-s-waiting-for-the-first-one-to-finish 547 [59] https://pages.cs.wisc.edu/~remzi/OSTEP/dialogue-virtualization.pdf 548 [60] https://xeiaso.net/characters 549 [61] https://danilafe.com/blog/blog_microfeatures/#code-blocks-with-origin 550 [62] https://danilafe.com/series/compiling-a-functional-language-using-c++/ 551 [63] https://dev.danilafe.com/Web-Projects/blog-static/src/branch/master/code/patterns/patterns.rb#L3-L8 552 [64] https://craftinginterpreters.com/local-variables.html 553 [65] https://gist.github.com/ 554 [66] https://gohugo.io/content-management/shortcodes/#gist 555 [67] https://danilafe.com/blog/blog_microfeatures/#easily-linkable-headings 556 [68] https://danilafe.com/blog/blog_microfeatures/#bonus-code-blocks-with-clickable-links 557 [69] https://agda.readthedocs.io/en/latest/getting-started/what-is-agda.html 558 [70] https://danilafe.com/blog/agda_hugo/ 559 [71] https://plfa.github.io/ 560 [72] https://danilafe.com/blog/blog_microfeatures/#markers-for-external-links 561 [73] https://jamesg.blog/ 562 [74] https://danilafe.com/blog/blog_microfeatures/#bonus-different-markers-for-different-destinations 563 [75] https://gwern.net/ 564 [76] https://github.com/gwern/gwern.net/blob/959ba9c50d327a960e07241b2c7f13630bf8b80c/js/old/links.js 565 [77] https://github.com/gwern/gwern.net/blob/959ba9c50d327a960e07241b2c7f13630bf8b80c/js/old/links.js#L380-L387 566 [78] https://github.com/gwern/gwern.net/blob/959ba9c50d327a960e07241b2c7f13630bf8b80c/build/LinkIcon.hs#L15 567 [79] https://github.com/gwern/gwern.net/blob/959ba9c50d327a960e07241b2c7f13630bf8b80c/build/Config/LinkIcon.hs#L83 568 [80] https://gwern.net/lorem-link#link-icons 569 [81] https://gwern.net/about 570 [82] https://danilafe.com/blog/blog_microfeatures/#bonus-link-preview 571 [83] https://gwern.net/ 572 [84] https://danilafe.com/blog/blog_microfeatures/#bonus-different-markers-for-different-destinations 573 [85] https://danilafe.com/blog/blog_microfeatures/#rss-feeds 574 [86] https://danilafe.com/blog/blog_microfeatures/#links-to-other-sites 575 [87] https://drewdevault.com/2024/05/24/2024-05-24-Bunnix.html 576 [88] https://git.sr.ht/~sircmpwn/openring 577 [89] https://danilafe.com/blog/blog_microfeatures/#rss-feeds 578 [90] https://danilafe.com/blog/blog_microfeatures/#conclusion--anything-else 579 [91] mailto:[email protected]