markup</th>	rating</th></tr></thead>
markdown</td>	7/10</td></tr>
djot</td>	9/10</td></tr>
asciidoc</td>	8/10</td></tr>
typst</td>	9/10</td></tr> </tbody></table> </div> Headings🔗</a></h3> Bean accomodates for the title and three heading levels by default. Further heading levels are discouraged and require explicit heading tags.</p> The document title uses four ‘#’ signs, the first heading level uses three, the second uses two, and the third uses one. This is based on the idea that higher level headings are more important, and should be more prominent in plain text, than lower level headings.</p> `#### Document title An introductory paragraph. ### Level 1 heading ## Level 2 heading # Level 1 heading </span></code></pre>`Emphasis🔗</a></h3> While you could use a generic inline element for emphasis, bean provides custom delimiters to make it easy.</p> A paragraph with emphasised text. </span></code></pre> Output:</p> A paragraph with emphasised text</em>.</p> </div> Delimiters for emphasis can also be tagged:</p> Some emphasised text[link :target https://example.com] in the paragraph. </span></code></pre> Output:</p> A paragraph with emphasised text</em></a>.</p> </div> Openers and closers🔗</a></h3> Djot has a neat construct for dealing with complex and nested delimiters: delimiters can have braces to indicate whether they are opening or closing delimiters.</p> {Emphasised text.} {`inline ` fence`} </span></code></pre> Output:</p> Emphasised text.</em> </p> inline ` fence</code></p> </div> This way you can explicitly say where the emphasis should end, instead of having to worry about escaping delimiter characters.</p> Another cool thing (I think) djot does, is to use openers and closers with single and double ticks to specify whether they’re right or left quotes, though it usually infers them correctly.</p> {"Hello, world"} </span></code></pre> Output:</p> “Hello, world”</p> </div> Meta-information tag(s)🔗</a></h3> A meta tag helps set document-level options and properties, along with a slightly better alternative to frontmatter. 1</a></sup></p> ^{1</sup> Frontmatter introduces a second language to markdown files, and breaks the usual flow of markdown, by moving the level 1 heading and even cluttering it a bit.</p> </div>}#### Document title [meta :date 2049-01-01 :author "Pranab" ] </span></code></pre> A summary would be a similarly related element. It provides meta-information about the document, while not quite being part of the document contents.</p> #### Document title [meta :date 2049-01-01] [summary] A summary of the document, to be used in listings and previews, but not when displaying the document directly. </span></code></pre> Conditional passthrough🔗</a></h3> Djot has passthrough blocks that take a format specifier, so if the export format matches the specifier, then the contents of the block are passed as is. This would allow writing raw HTML, for example, though there should be no need for that in Bean.</p> Regular indentation/spacing.     [passthrough HTML]Indented by four spaces in HTML. [passthrough HTML] <ul id="document-formats"> <li>Djot</li> <li>AsciiDoc</li> <li>Markdown</li> </ul> </span></code></pre> Output:</p> Regular indentation/spacing.</p> Indented by four spaces in HTML.</p> Djot</li> AsciiDoc</li> Markdown</li> </ul> </div> Waffle🔗</a></h2> NOTE:</strong> These are random unorganised and/or incomplete bits.</p> Tag syntax🔗</a></h3> I’m not a 100% sure about the tag property syntax. These are the three main options I considered:</p> [tag option1=value1 option2 option3=value3] [tag :option1 value1 option2 :option3 value3] [tag option1 value1 option2 true option3 value3] </span></code></pre> The last is the easiest to type, but I don’t feel like the difference is that big, plus having an indicator like the colon or equal sign can be quite helpful, and thus worth the extra character. I guess the second has the benefit that you won’t need to escape equal signs?</p> Classes and IDs🔗</a></h3> [.big .red] Big red paragraph (has "big" and "red" classes) [#warning] This paragraph has the "warning" ID </span></code></pre> This is another concept that djot has. I’m not quite sure it’s necessary or even desired, and it injects a bit of HTML in some ways.</p> Custom elements/tags🔗</a></h3> Roughly the same as custom components in MDX, except you use Bean tags instead of XML/HTML.</p> I guess it would be implementation dependent, so there’s no real point of examples here, though if I were to require an extension language, I’d pick an S-expression language.</p> I was imagining the API would be something simple like defining a function that takes in the tag contents and outputs HTML by manipulating child tags and text content.</p> Bean as an extensible markup format🔗</a></h3> Bean is basically the same as HTML and XML, with some syntax differences, and a few added conveniences for authoring documents (such as the syntax sugar for lists). At a base level, it has tags, attributes, nested tags, and text content.</p> An initial Bean compiler can just use the base tag and block/inline rules, and automatically convert them to HTML/XML tags.</p> Here’s an HTML in Bean example:</p> [ul :id "document-formats"] [li]Djot [li]AsciiDoc [li]Markdown </span></code></pre> Looking at that, I’m almost tempted to remove syntax sugar for lists.</p> Anyway, the basic rules make Bean a decent document/data format, though the syntax will make it more or less suitable for various uses.</p> Fences as code🔗</a></h3> Initially, fences defaulted to code if no tag was given, but then I thought that shouldn’t be default behaviour to avoid specialising too much for writing about programming.</p> Cool features to consider🔗</a></h3> Namespaces to avoid custom tag collisions.</li> import <package> as <nickname></code> statements to avoid namespace collisions? Maybe in the meta tag.</li> Some sort of package registry and manager?</li> Default config file for all Bean files within folder.</li> Comments — probably using the djot method. Better than adding extra syntax sugar. Maybe a comment “tag” and/or attribute?</li> </ul> Table wrappers🔗</a></h3> I really dislike how tables break layouts if they stretch past the page width, so I’d like Bean to automatically insert a div.tablewrapper</code> around them, either by over-riding the default component, or creating a custom component.</p> Details component🔗</a></h3> [details] [summary]This is the summary of this block Insert any ol' content over here, which will be displayed when the details element is opened. </span></code></pre> This is the summary of this block</summary> Insert any ol' content over here, which will be displayed when the details element is opened. </details> </div> Another option is to use fences, and make the first block the summary.</p> [details] `` This block is the summary Any other blocks are part of the hidden content. `` </span></code></pre> Trying them out will give the answers.</p> Inline tag nesting🔗</a></h3> Later tags should be nested inside earlier tags when they’re prefixed.</p> [parent-inline-tag][child-inline-tag]content </span></code></pre> But what about suffixed inline tags? Just reverse the order?</p> content[child-inline-tag?][parent-inline-tag?] </span></code></pre> Inline vs block elements/tags🔗</a></h3> Would it be okay to mark a heading or other block with a lone inline tag?</p> [h4]My heading </span></code></pre> The h2 component would know this is a block, but how does the surrounding context know this? How do I prevent it from wrapping it in a paragraph?</p> What about a suffixed inline tag?</p> `My heading`[h1] </span></code></pre> Perhaps the wrapper checks its contents before deciding to be a paragraph, a div, or whatever the inline tag specifies as a block element. Or maybe it just errors out? Like, a paragraph cannot take a block element, but things like lists can. So the inline/block nature of the tagged element doesn’t quite matter, but it does matter in the case of a parent element that disallows block elements inside it.</p> Perhaps, if there is only one child block element, it swallows the parent element? That seems like a bad idea. Simply erroring out is probably best.</p> Block link syntax🔗</a></h3> Similar to that in gemtext:</p> => https://example.com my link text </span></code></pre> Gemtext</a></p> Block links can be increased in size to improve the experience of tapping or clicking them, without disrupting any surrounding text.</p> A dedicated syntax should encourage that.</p> A details and/or aside element can be used to move large lists of links out of the way.</p> Unknown blocks🔗</a></h3> Unknown blocks can be rendered with a label at the top, and the verbatim contents of the block. It could include a warning inside a prominent box to say (in the HTML) that it’s unknown.</p> Probably emit an error and cancel building if the build is for production, though allow configuration to disable that. And log a warning for dev builds.</p> attribute accumulation🔗</a></h3> djot allows accumulating attributes (for block only?). maybe using an & block to accumulate instead of nest?</p> definition lists🔗</a></h3> how does asciidoc do it?</p> djot requires loose lists for definition lists</p> maybe this:</p> : item - definition? : item continued - definition? </span></code></pre> i don’t think hyphens (at beginning of line) have any other significance. though maybe i want to keep it for hyphens.</p> : item = definition : item continued = definition </span></code></pre> that should work, i think. and the =</code> sign carries some related meaning, like item = definition</code>.</p> Web feed now live! 2024-02-09T12:26:56+00:00 AKA “RSS” feed, or Atom feed.</p> Link to feed</a></p> Why use a feed?🔗</a></h2> Say you follow a few interesting websites, and they don’t post a flood of content, not too often, and not even on any schedule.</p> If you regularly find yourself checking these sites only to find nothing, consider using web feeds.</p> Web feeds allow you to see updates to your favourite sites in one place, with the option to view it in the same place, and even notify you of updates.</p> How does it work?🔗</a></h2> A feed is a simple link that you put in a feed reader app, usually by copying it.</p> Feed readers have varying degrees of functionality. At a base level, they should be able to list posts from all the people that you follow, with a link to the post on their website.</p> Additional features include viewing the post in the app, which is fairly common, searching all feeds and posts, grouping them into categories, receiving notifications on updates, and more.</p> What reader should I use?🔗</a></h2> Here’s a short list of readers to get started with. Feel free to research and find your own.</p> RSS is Awesome</a></p> If you tend to consume content on a single device, use this for a free and simple reader with no sign-up and no ads.</p> </li> Feed Reader</a></p> Sign up to sync across devices, so that you can check your feed anywhere, without ads of any kind.</p> </li> Feedly</a></p> Feedly is quite big and well known, with apps for multiple platforms, at the cost of ads, sponsored content, and other limitations for free accounts.</p> </li> </ul> Ironically, I hammered out the feed after I read a post by someone who doesn’t like feeds, despite not caring for them myself, just because I could.</p> I even went through the effort of styling it with XSL, which was the main draw for me, honestly.</p> Why someone doesn’t like feeds</a></p> Try djot instead of markdown 2024-02-03T19:34:38+00:00 Djot is a pretty cool markup format that contains the lessons learnt by the author of the CommonMark spec and implementation.</p> I’ve mentioned it here and there, and thought I might as well write about it.</p> Generic blocks and attributes🔗</a></h2> One of the coolest features is generic blocks, which are called “divs” and “spans” in the spec1</a></sup>, as well as a method to add attributes to any element.</p> ^1</sup>spec/syntax description</a></p> </div> ::: class-name A paragraph inside the div ::: </span></code></pre> Markdown would require HTML to do anything like this.</p> In addition to divs and spans, attributes can be attached to anything</em> using curly braces.</p> Warning{.big .red data-type="warning"} </span></code></pre> The above markup will create a span with the “big red” class and the data-type="warning"</code> attribute.</p> Again, markdown would require HTML to do anything of the sort.</p> Now, when I say attributes can be attached to anything, I mean anything</em>.</p> {#custom-section-id} ## My heading {.important} An important paragraph, likely styled with big text. some bold text that's also red{.red} {lang='javascript'} ``` var answer = '42'; ``` </span></code></pre> Comments🔗</a></h2> Comments are solved in a very clever way.</p> Attributes can have comments inside them:</p> {.big .red % comment: red for warning % .important} </span></code></pre> The text between the percent signs is a comment.</p> To have an independent comment, simply remove any other content from the attribute block.</p> {% This is a comment %} </span></code></pre> Raw blocks🔗</a></h2> Another useful construct is raw blocks, which allow you to pass something into the final output as is, depending on the export format you select, without any escaping or processing.</p> If I were exporting to HTML, and I wanted to have some specific HTML markup in the output, I could do the following:</p> ``` =html <my-html-tag-soup /> ``` </span></code></pre> The inline version of the same is:</p> Some `<my-tag-soup />`{=html} inline </span></code></pre> Try it out🔗</a></h2> Overall it’s a really cool format, and you can try it out now in the live sandbox!</p> Live sandbox</a></p> If you like it, you can see if one of the implementations listed in the home page might suit your purposes.</p> Djot home page</a></p> Flatpak 2024-01-29T20:55:13+00:00 Low network speeds and limited availability are a fact of life for me. I update my devices every 7 days, and the size of a single</em> Flatpak package (around 350mb on the lower side) is often larger than the regular apt updates, if not comparable to updates that include Firefox, Chrome, Inkscape, and/or Linux.</p> Perhaps it’s not fair to compare them, but these are my needs, and it’s a pain every time a developer chooses to release their package only on Flatpak. I will likely not use it, and certainly not update it for weeks or months.</p> The team behind Flatpaks could have instead worked on tooling to smooth out publishing packages. Perhaps documentation for how updates are handled. Maybe include permissions/capabilities in package descriptions. They could have worked with maintainers. Instead they got nerdsniped into creating a whole package format and ecosystem that still suffers.</p> They have to contend with managing permissions, poking holes through their sandbox, making sure people can’t poke through the sandbox, making it easy to build and publish packages, documenting all of these things, and more. Including relying on developers to maintain dependencies and security.</p> I appreciate GNOME design otherwise, even though I use the terminal and tiling WMs, but this frustrates me.</p> Ceci n'est pas Wordle devlog 2023-12-18T14:00:16+00:00 Bonjour! Welcome to devlog 1 of 1: why I made a Wordle clone (and then another), as well as some tips and design choices.</p> (Version 1, with a static grid and a single input field for typing out your guess)</p> (Version 2, with a grid of input cells, so you can type in letters directly in the grid)</p> Try Ceci n’est pas Wordle</a>! (version 2)</p> Here’s why I made it: basically, I was mad at a friend, and I didn’t want to just rant at him — I had to curse him in a nice</em> way. After racking my brain for a day or two, I figured it out — I’d make him find out exactly what he was (a f**er, if you must know, since other words would be too long).</p> After that I couldn’t resist sharing it with other people (I obviously changed the word), because it’s quite fun to share something I made, plus I could pick a funny or silly word that referenced the day we had, or a random conversation or event.</p> (Btw, “ceci n’est pas” means “this is not”)</p> Anyway, here’s some little things I learnt as I worked on my clone(s), in rough order of usefulness.</p> Consider a custom keyboard or a single input🔗</a></h2> When using the current (v2) design, it requires adding in some special handling for some keys, so that the focussed input automatically switches back and forth, which can cause issues, because some keyboards (on Android, at least) don’t like sharing what keys have been pressed.</p> The default keyboards work though (even on iOS).</p> So if you’re facing issues with handling input, or if you want to make it really robust, either you make a custom keyboard with divs, or you use a single input with a ‘submit’ button.</p> 5 letters (or less)🔗</a></h2> Longer than that starts to become quite hard to guess, and then your friends and family will just feel bad. It’s fine if you’re around to monitor and give hints though.</p> One reason is that when you think of a word, you need to count out the letters, and it becomes harder as you go.</p> I don’t think it’s that longer words are inherently harder, since they can give a chance to reveal more letters, but that might also contribute to the problem.</p> Show letters in the grid🔗</a></h2> My first design had an input element for people to enter their guess and then it would add their guess to the grid above. This would cause confusion by having no response when trying to submit a guess, because it was hard to see that there were too few letters.</p> Here’s how it looked:</p> </p> While there’s a counter at the bottom, it would either get covered up by the keyboard, or people would not think or realise that it updated.</p> Here’s the benefits of the design:</p> See your guess in context, before submitting.</li> Immediately see which letters are missing, and how many.</li> Fill in the letters you know. Don’t delete the whole word to change your guess.</li> </ul> </li> Use less space on the grid.</li> </ul> Set height and width for cells🔗</a></h2> This applies more to my initial design, which used div</code> elements instead of input fields.</p> If you’re using divs to show the grid, then empty cells just disappear.</p> Set a height and width anyway, so that it looks nice and consistent, instead of the (quite ugly) default style, which is too wide, and quite small (even if you increase base font size — you’ll have to change that as well).</p> Add a start button🔗</a></h2> A start button at the bottom is nice, so that you can start the game without having to reach to the top of the screen, which is always awkward.</p> Don’t add a border for keyboard references🔗</a></h2> There’s a minor issue in my version 2 screenshot: the keyboard references for the ‘enter’ key look like buttons, so some people try pressing those instead of the enter button on their keyboard.</p> Final design🔗</a></h2> </p> Give Ceci n’est pas Wordle</a> a try!</p> Make your own🔗</a></h2> You can just copy the HTML, change the WORD</code> variable 1</a></sup>, and then share it with someone!</p> Download Wordle clone</a></p> Remember to pick a 5 letter word or less, unless you’re there to give hints.</p> ^{1</sup> look for const WORD = '<a-word>'</code></p> </div>} UI/UX Design Principles 2023-11-07T14:52:17+00:00 Some of the choices behind most of my designs. I can sometimes sacrifice these, based on context, but I adhere to them most of the time.</p> Mobile first🔗</a></h2> Most users of any digital product are on mobile. Especially if it’s a website — even users of a desktop application will visit a website on mobile.</p> Designing for mobile also helps figure out what is most important in a product.</p> Also, it’s easier to spread out content from a mobile layout to a desktop layout, than to try to fit in the contents of a desktop layout into a mobile screen.</p> Interactive area in lower half🔗</a></h3> Having interactive elements in the top half requires users to move a hand to the top of the phone, or to make awkward reaches with their thumb.</p> Instead, I put buttons at the middle of the screen or lower. If the user scrolls down, buttons will also move up the screen.</p> Large fonts🔗</a></h2> I use large fonts to accomodate for conditions with hampered vision, such as age, moving vehicles, walking, etc.</p> This usually means 14pt or 16pt for body text.</p> Clear labels🔗</a></h2> Icons can often have multiple meanings, which might not be obvious to some users, or might even have no meaning to some people.</p> Large interactive areas🔗</a></h2> I make interactive areas roughly 44 pixels by 44 pixels or larger, usually with a minimum of 8 pixel gaps between them.</p> This makes it easier to target for users, without accidentally selecting the wrong element.</p> Consistent interactive element style🔗</a></h2> I try to have a distinctive style for buttons and links so that users immediately know what elements can be interacted with, and what elements are safe to select.</p> Modern UIs nowadays often have a dozen different button styles, some of which even look like plain text. It sometimes feels like there is no system for what constitutes a button versus images or text.</p> Dark mode🔗</a></h2> Using a website at night time, or in a dark environment, shouldn’t subject the viewer to (sudden) brightness, which can negatively affect their vision, their sleep, and more.</p> For the same reason, I try to use warm colours1</a></sup>, though people generally expect blue for interactions, and red for negative interactions.</p> ^{1</sup> Night light filters do the same, because of something to do with white or blue-ish colours.</p> </div>}Slightly lowered contrast🔗</a></h3> 100% white text on a 100% black background can cause a “halation” effect for some users, which means it looks like a light pointed at your eyes, where the edges are blurry and hard to see.</p> There might be some other issues with full contrast, but this is a good enough reason to lower it.</p> Lightweight🔗</a></h2> Websites should be usable with low network conditions, such as being underground, or in a building.</p> This can be achieved by only including necessary content, and optimising images and videos.</p> For images, I compare file sizes for different formats. Generally, I use SVGs for simple graphics and illustrations, and PNGs or JPGs for photographs, though the AVIF format is supposed to be the best.</p> A related idea is progressive enhancement, where you ensure a basic version of the main content is actually usable as is, and then build better UI/UX on top of that. This requires some understanding of HTML, and interacting with the developer.</p> Content first🔗</a></h2> The content of the page should stand out.</p> You can see it in my site design: in each page, the title is highlighted, and then it continues on into the body of the post. I even sacrificed the navigation bar on top so that the content had more space/prominence when the user first loads a page.</p> Clarity over cleverness🔗</a></h2> I try to avoid clever designs, because some users will simply be confused. For example, it’s not really that obvious that you must scroll up (on mobile) to show a hidden navigation bar.</p> Design Annotations🔗</a></h2> On screen buttons aren’t the only method of interaction. Keyboard shortcuts and touch gestures are not obvious from designs. Designs should include annotations for these things.</p> While I don’t actually annotate things, that’s mostly because of no particular need, and I do consider them and explain them in writing.</p> Accessibility for everyone🔗</a></h2> This ties into many of the points above: Everyone has “disabilities” of some variety at one point or the other.</p> Injuries can reduce dexterity in the hands, moving vehicles can hamper vision and reading, and crowded environments impact hearing.</p> Oh! That's cold! 2023-10-30T20:53:19+00:00 Low sci-fi speculative micro-fiction</p> Oh! That’s cold!</p> I suddenly felt little cold spots on my face.</p> It was you, and you asked me to trust you.</p> My gear is now off.</p> Now we’re sitting outside, silently, thoughts racing, or blanking out, our hands intertwined; and this is nice, but I’m not sure if I’d do it again.</p> It took a while to adjust after taking off the wear. My eyes aren’t watering anymore, but it still feels weird. Everything does — a bit.</p> I don’t think I could do this again.</p> I love you.</p> The basic concept is a society where headgear is a thing, and people live completely in virtual/augmented space.</p> Ekkas' 2023-10-17T21:38:26+00:00 Bridal accessories website design and live concept.</p> See Live Concept</a></p> When I showed Dyme’s</a> to my mum and aunts, it turned out they’d been talking about a little bridal accessories business the other day, so we discussed it a little bit, and I just mocked up another website in the same vein.</p> </p> Like Dyme’s</a>, I tried to make something simple and easily achievable. The CTA here encourages calling because the deliverables are more complex, and it makes sense to work out everything. I also show the contact information separately, so that people can share it easily. The final versions of the two websites (this and Dyme’s) could use a separate share button as well.</p> More Projects (Portfolio)</a></p> Dyme's 2023-10-15T09:43:48+00:00 My aunt’s cooking is better than the restaurants I’ve eaten from in Ranchi and Khunti (perhaps excepting Radison Blu). So I thought that her food should be shared with people, and this website design is a result of that idea.</p> I even made an actual webpage that you should check out :D</p> See Live Concept</a></p> </p> </p> I worked especially to make the idea achievable, instead of a fancy restaurant menu or dashboard.</p> You can get a better understanding if you scroll through the website concept</a>.</p> The site design is super simple, things are operated by email, and I put a lot of thought into the overall system, such as the number of seats and the waitlist. I’ll probably write about it in more detail in a separate post.</p> More Projects (Portfolio)</a></p> Links 2023-10-06T11:44:15+00:00 The contents of this page have been moved to “Bookmarks”.</p> Bookmarks</a></p> The term better conveys what the page is, and avoids confusion with Linktree-style ‘bio’ links.</p> About 2023-09-26T14:46:13+00:00 A brief introduction to me and the site, including tips on how to use it (the site, not me).</p> About Me🔗</a></h2> Where me = “Pranab” (he/him).</p> I have a formal education in design, with my current focus on UI/UX design, but I’ve also had an interest in computers since school, starting with Scratch and the like.</p> Some of my interests include:</p> Reading: especially (science) fiction, but I read a lot of blog posts on various subjects, though I find good tech blogs the easiest to find.</li> UI/UX Design: I’ve been looking into accessibility lately, and I quite enjoy a brutalist/swiss/functional style that relies more on text, though I try to infuse some popular aesthetics into it and play around with other styles.</li> Writing: that’s how I maintain this blog ;) I can write nonsense about whatever’s going on in my head, but also notes on things I read or ideas I have, as well as short snippets of fiction. I might write a book someday.</li> Shell Scripting: I’m fairly proficient in using the (Fish) shell and scripting, and I have a few small utilities I use here and there.</li> Programming: I have a decent grasp of most concepts, and I can navigate code well enough, even if I don’t know the language, but I haven’t written or maintained a decently sized codebase.</li> </ul> Contact🔗</a></h3> You can reach me via email or Mastodon1</a></sup>.</p> Email: pranabekka@gmail.com</a></p> Mastodon: @pranabekka@mastodon.social</a></p> ^{1</sup> Mastodon is a twitter-like social media, except anyone can create a copy of it for their community, and all copies can talk to each other.</p> </div>}About the Site🔗</a></h2> Built Using Zola</a> (Static Site Generator)</p> Custom theme made by me. See choices below.</p> “zettelkasten”-like no categories could add tags in the future?</li> </ul> </li> backreferences posts link to each other</li> </ul> </li> flat structure</li> </ul> </li> 8px gap between interactive elements (where possible) to reduce chances of tapping adjacent element</li> large-ish font size for people with poor eyesight</li> no “flashbang”: dark theme “flashbang” is when you suddenly load a bright page</li> might make a light theme eventually</li> </ul> </li> avoid full black/white to reduce glare effect (halation). not sure what other issues it might cause</li> low contrast, while preserving AAA contrast compliance, to accomodate users affected by high contrast, and to be dimmer for night time users (like me). i need to add a check and control to increase contrast.</li> show all posts in single page to make basic search easy</li> three heading levels inspired by edward tufte</li> not a hard rule, but easy to stick to</li> </ul> </li> number headings to match list of contents (“table” of contents)</li> rounded inline code to show start and end, especially when spanning multiple lines (on mobile)</li> higher contrast for smaller areas highlight colour is brighter when used in underlines, than the colour used in the title</li> </ul> </li> “logo” in header and tab title to make pages from site apparent</li> no custom fonts (imports) to save on page size and loading time</li> </ul> Site source</a></p> Usage Tips🔗</a></h3> index is a good place to search the site</p> it shows all</em> posts, though only title and first paragraph</li> </ul> </li> search using the following snippet in your search provider (remember to replace <search term></code> with what you’re looking for).</p> site:pranabekka.github.io <search term> </span></code></pre> This works with all major search providers.</p> </li> references to current page appear at the bottom</p> other related pages appear in the body</li> </ul> </li> page source can be used to view history. if you’re unfamiliar with github, select the history icon near the top left.</p> </li> </ul> Now Playing 2023-09-22T23:38:47+00:00 KU LO SA by Oxlade and Camila Cabello</p> Listen on YouTube Music</a> (You’ll have to search for other platforms)</p> I’ve been into whatever this genre is lately: Nigerian hip hop, I guess.</p> It started with Wetin by Yarden, followed by KOLO by Ice Prince and Oxlade (amongst others), though I’ve liked Jamaican Patois for a while, and I’ve been listening to African-origin rappers from the US and UK for even longer. I even enjoyed the Patois bits from Top Boy a lot.</p> My favourite bit is the chorus at the end. Makes me just play the song again. It’s simply so upbeat and makes me want to dance even while I’m walking along in front of other people.</p> If you liked KU LO SA, you can also check out these songs:</p> Wetin by Yarden</li> Toast by Koffee</li> soso by Omah Lay</li> KOLO by Ice Prince and Oxlade</li> </ul> Expose Product Team to Users 2023-09-18T20:42:10+00:00 Designers should be directly exposed to users (as opposed to only relying on reports from a dedicated user research team). Notes on article by Center Centre.</p> Original article: Fast Path to a Great UX – Increased Exposure Hours</a></p> Amount of time spent with a user/users is more important than the number of research participants.</p> At least two hours every six weeks is best, since it reinforces learnings.</p> All team members (not just designers and developers) should be exposed to users to get the whole team on board.</p> Field visits are especially helpful for initial exposure. Usability tests can be made based on pain points recorded from field visits. Don’t rely completely on remote testing. Observing users with competing products is also helpful.</p> Field visits, as defined: “interview the user, uncover their goals and objectives, and then ask them to use the product or service to accomplish those.”</p> Design Takeaways from Fabricio Teixeira 2023-08-17T11:47:33+00:00 These are my takeaways from “The musings of a designer and what he loves about design and what he’s learned along the way” (2023) by Fabricio Teixeira. I found it full of practical and actionable advice and I recommend you read the whole article yourself:</p> lessons.design</a></p> Takeaways🔗</a></h2> I don’t quite understand what frameworks is about, and I understand and appreciate the points on simplicity and consistency a fair bit, but my biggest takeaway is on framing:</p> You should present your idea as a starting quote, image, video, metaphor, or something</em> to introduce the idea to your audience. See the emphasised points under the section on framing</a> for more.</p> framework🔗</a></h3> have a model/framework for the product. to represent and understand the subject of the product. this should not change as the product evolves, and should keep the product consistent</li> identify and emphasise the core differentiating factor of your framework. make it incredibly obvious</li> don’t stick to preconceived notions of the problem/subject area</li> test concepts by making prototypes with exaggerated differences</li> make frameworks and get inspiration from beyond design</li> </ul> simplicity🔗</a></h3> if two things are similar, bring them closer, merge them, or separate them further</li> whitespace is for the eyes to rest and absorb things</li> descriptions with “and” or “also” suggest that the product is doing too much</li> words and writing can merge things together, make them shorter, make them less generic</li> </ul> framing🔗</a></h3> If you read the article a second time, you’ll see that he uses these ideas at the beginning of the page, as well at the beginning of every chapter.</p> frame the product such that you present your reasoning and make it apparent to people</li> learn to see the rationale behind designs, to learn how to frame your own</li> you can frame a product with a conceptual word, an image, an animation, a video, a short sentence, a metaphor, a drawing, a framework, a datapoint, a quote</em></li> don’t just describe the layout of the product (which is already visible). describe how it will benefit users, how it reaches business goals, the reasoning behind it</li> framing gives people time, context and insight about the design, which makes it easier to understand</em></li> </ul> consistency🔗</a></h3> consistency means designing for the future — not just for present delight or use</li> consistency helps users as well as creators (team)</li> double check work to ensure quality, consistency</li> don’t pursue consistency in the face of context</li> the people you work with will last longer than the products you work on. joy in that is what lasts</li> </ul> Significant Whitespace Lisp Syntax 2023-07-11T04:39:16+00:00 I was browsing the web when I came upon the Rhombus language by the Racket team, and I couldn’t help but have a few thoughts of my own for a Lisp syntax with significant whitespace. The key difference in my idea is that it works quite transparently with s-expressions, and has some extra sugar and rules to help with parentheses elision.</p> NOTE: Some knowledge of Lisp is assumed.</p> NOTE: Elision (removal) rules only mean that there are ways for the computer to infer the position of parentheses. You can still use parentheses, as demonstrated later.</p> Function Calls🔗</a></h2> The first word (symbol) in a line is a function call, and the rest are arguments, subject to variable expansion. This is an example of parentheses elision: you can elide (remove) the parentheses, since their position is inferred at the beginning and end of a line (not quite, see next point).</p> my-func arg1 arg2 ; turns into: (my-func arg1 arg2) </span></code></pre> Sub-Expressions/Blocks (Functions as Arguments)🔗</a></h2> An indented line starts a sub-expression in the form immediately above it in the “indentation hierarchy”. So the automatic placement of parentheses is slightly more complicated — if the next line (expression) is indented, then the closing parenthesis is held off until a line with less indentation is encountered (or the end of the file).</p> fun1 arg-x fun2 arg-n ; turns into (fun1 arg-x (fun2 arg-n)) </span></code></pre> fun3 fun4 fun5 ; turns into (fun3 (fun4) (fun5)) </span></code></pre> Inline Syntax🔗</a></h2> The above rules with significant whitespace might also be called “block syntax”, since it necessarily requires blocks that span both dimensions. The parentheses syntax may also be called “inline syntax”, since it can be written in a single line without changing the meaning (although it severely impacts readability).</p> The two syntaxes can be mixed together to create more complicated forms.</p> let ( variable value ) my-fun variable ; turns into (let ( (variable value) ) (my-fun variable)) ; which is the same as (let ((variable value)) (my-fun variable)) </span></code></pre> (You need not write it as shown above.)</p> The following also achieves the same thing:</p> let ( variable value ) my-fun variable </span></code></pre> Sugar: []</code> (for List of Lists)🔗</a></h2> To help create a list of lists, there will also be a []</code> reader macro (used like a function) that wraps its arguments into a list.</p> let [] variable value my-fun variable ; turns into: (let ( (variable value)) (my-fun variable)) ; which is the same as: (let ((variable value)) (my-fun variable)) </span></code></pre> Here’s another example with a lambda.</p> [] lambda (x) func x arg1 ; turns into: ( (lambda (x) (func x)) arg1) ; which is the same as: ((lambda (x) (func x)) arg1) </span></code></pre> Splitting Arguments Across Lines🔗</a></h2> If you must split arguments into multiple lines, a “splice” (reader) macro is available. (Another name might be more suitable, given the pre-existing splice macro — in Common Lisp, at least.)</p> my-func arg1 arg2 arg3 @ arg4 arg5 arg6 ; is equivalent to (my-func arg1 arg2 arg3 arg4 arg5 arg6) </span></code></pre> Without the “splice” macro it would try to call arg4</code> as a function with the arguments arg5</code> and arg6</code>.</p> Infix Syntax🔗</a></h2> While this goes a long way towards making lisp more palatable for some people, (maybe even appealing) there are two places where programmers from other languages expect infix syntax.</p> Math🔗</a></h3> The first place infix syntax is often used is for (simple) math, for which the $</code> macro is provided. The $</code> symbol was chosen because it is used for indicating math in markup languages like LaTeX, Typst, and Kramdown (a feature-ful flavour of markdown).</p> $ 1 + 2 + var / 7 ; turns into: (+ 1 2 (/ var 7)) </span></code></pre> Comparison🔗</a></h3> The second place where other languages use infix syntax is for comparisons in conditionals and loops. The check</code> or ?</code> macro can be used for this.</p> ? my-var != your-var ; turns into: (? my-var != your-var) ; which is the same as: (not (eq my-var your-var)) </span></code></pre> Maybe infix math could also be allowed here? — just to make things easier for the kinds of people this syntax might appeal to.</p> Benefits Over Other Significant Whitespace Syntaxes🔗</a></h2> This syntax might even be more appealing to some people over other syntaxes with significant whitespace for several reasons.</p> Only spaces to separate arguments.</li> Only spaces to separate function from arguments</li> No colon for indented blocks</li> Consistent syntax (for both block and inline)</li> </ul> Getting rid of commas means that you no longer need to balance them. Lots of recent languages have taken to allowing trailing commas just to deal with that issue. Having no commas makes it easier to move things around. Furthermore, commas repeated the work that spaces were already doing. If whitespace is significant, then you might as well lean into it. Signifcant whitespace ++.</p> All languages (that I know of) treat the first word as a (special) function call, and the rest are just keywords or arguments for that function call, so the surrounding parentheses for the arguments are largely unecessary. The command-line does this beautifully. We have now rid ourselves of all the superfluous parentheses (that a host of other languages also have, might I add), and made whitespace even more significant.</p> In Python, a colon is required at the end of some forms like if</code>, else</code>, and for</code>. This is despite the fact that the content of these forms is already indented. So the colon is repeating work that is already being achieved by indentation. Furthermore, having tried some Python, I know for a fact that I would get annoying syntax errors for missing a colon in various forms.</p> This syntax also has very simple and consistent rules, such that even if they are not explicitly mentioned, a user should get a grasp of them much sooner than other languages that have special forms and exceptions of all kinds. Essentially all language features reduce to “functions” and lists describing various things. (I say “functions” in quotes, because there are special functions and macros as well.) Only Lisp syntax is simpler and more consistent.</p> Conclusion🔗</a></h2> We have a syntax with (even more!) significant whitespace, consistent rules, infix syntax and easy inline syntax, that should be more palatable to users of other languages, and easy for existing Lispers to learn and share. It might even reduce strain on Lispers’ pinkies.</p> I Discovered Skribilo! 2023-06-29T10:19:10+00:00 Skribilo</a> is a way to interleave markup and scheme code, with very similar semantics to what I was envisioning in Lispy Templates</a>:</p> It uses ,(</code> to evaluate code inside a markup block.</li> It uses square brackets (‘[…]’)for content blocks instead of quotes.</li> </ol> Skribilo actually supports multiple types of syntax, since it’s more of a framework for defining your own syntax. The syntax it uses by default is the Skribe syntax, which has its origins in LAML roughly as far back as 1999, as per this paper</a> by Kurt Nørmark.</p> The Skribilo page</a> also mentions a lot of prior art and similar projects at the bottom, which might be interesting to look at.</p> Here’s an example of a Skribe document:</p> (define (skribilo . body) (ref :url "https://www.nongnu.org/skribilo/" :text body)) (document :title [I Discovered Skribilo!] :draft #t :date (make-date 0 0 28 10 29 06 2023 0) ;(nanosecond second minute hour day month year timezone-offset) (p [,(skribilo [Skribilo]) is a way to interleave markup and scheme code, with very similar semantics to what I was envisioning in ,(ref "@/lispy-templates.skribe" "Lispy Templates").])) </span></code></pre> At this stage, I think all it needs is a way to define syntax sugar (like # title</code> or - list item</code>), and it would be roughly on par with typst.</p> PubNotes 2023-06-25T15:50:07+00:00 Superpowered “notes”: imagine sticky notes, and then imagine if you could add fancy things like images, links, videos, games, and more.</p> Here’s the most basic version of a PubNotes app, where notes are called stories, and they just contain some text.</p> </p> Then PubNotes can add advanced things like the author, time and date, replies, and more!</p> </p> Now the notes include when you wrote the “note”, a count of replies to it, a list of who it was addressed to, and a list of what topics (tags) it belongs to.</p> Basically, PubNotes is incredibly flexible. It’s like a piece of paper, along with any pen, pencil, or paints that you might need.</p> Imagine you had a piece of paper: If you’re writing to yourself, you just write the core message, similar to the first example. If you were writing to someone else, you write their name at the top and your name at the bottom. If you saw something nice, you’d put an image on the paper. PubNotes allows you to do that and way more.</p> </p> This example is basically a social media application or forum!</p> As you can see, PubNotes can be easily themed. And you can add even more things, like a title, a preview with only the first 80 words or so, the name of the author, bookmarks, and more.</p> We could even turn it all into a video sharing platform:</p> </p> We even removed the like button to enable better discourse! Just kidding ;)</p> NOTE</strong>: PubNotes is not</em> limited to mobile, even though it’s not shown in the examples.</p> PubNotes has a lot more potential that I haven’t yet mocked up or explained, in an effort to keep the introduction simple.</p> NOTE</strong>: No more images beyond this point.</em></p> You could create a platform for publishing and discussing books. Use tags to indicate the genre of the books. Use a different note for each chapter. Each new chapter could be a reply to the old one, to keep them all linked together, or you could create a more specific linking system. The rest is super easy to use.</p> I’ve already displayed a social media/forum example, though I didn’t really explain much. PubNotes has all the features a forum might need. In fact, this whole thing began with the idea of making super-charged forums. Forum administrators can pin notes to the home page, and make categories that can also be pinned. In the example, “Hello and Welcome!” is a pinned note, and “Recent Notes” is a pinned category of sorts (It’s a special type of category). Users can organise notes into threads on specific topics, and they could even split them or interweave them. There’s a lot of potential!</p> You could even put games into PubNotes. A simple example is knots and crosses. One user adds it to their note, make the first move, and sends it over to their friend. The friend replies to it, which automatically adds knots and crosses to their note, then they make their move and send it back. They just repeat this until one of them wins. The same framework could also be used for chess, dots and boxes, and other turn based games. Maybe you could put something like Pokemon! Imagine a whole monster collecting community built into a small social media platform. People would discuss all kinds of things, have melodramatic roleplay, maybe solve puzzle notes to gather monsters, perhaps create their own monsters and add them to the platform (with the help of moderators), and more. They could have topics threads for different types of monsters or weight classes.</p> I’ll add more ideas as I come up with them or find them in my notes. Feel free to share</a> your own ideas as well!</p> More Projects (Portfolio)</a></p> More on Noon-Flower (Game Idea) 2023-06-22T12:03:17+00:00 Just a summary of my motivations, inspiration, and the origin of the name (it’s random). See my first post on Noon-Flower</a> for an introduction.</p> (Noon-Flower was previously called Wijo)</p> Motivations🔗</a></h2> Multiplayer</strong>: For me, the main deciding factor for playing a game is if I get to play it with other people. The only one I play right now is Call of Duty on mobile, simply because I’m able to easily get online with friends.</p> Co-op</strong>: I also don’t want to get into the highly competitive PvP games, because while it feels cool to dominate, it requires practice that takes a lot of time and their nature can often exclude people. I used to play Valorant and League at one point, for example, and I was at the point where I would do target practice every day. PvP is still alright, of course, but not the exclusive focus.</p> Depth</strong>: While it’s nice to play Call of Duty with friends, I want something a little more varied sometimes. That’s why my concept is heavily influenced by Minecraft. I’d like exploration, crafting, NPCs, some building, and maybe quests.</p> Extensible</strong>: I think the reason Minecraft is so compelling is that it allows you to create your own game, and it allows this along a smooth gradient. It can be as easy as creating a small base for yourself, or you could go on to make a large adventure game with custom dungeons, loot and gameplay mechanics.</p> Free</strong>: My options for multiplayer games with friends can be quite limited, because I can’t expect anyone to buy games. Also, a Libre/Open Source game should allow further participation from the community. Frankly, that would be really cool.</p> 2D, Pixel Art</strong>: This simply makes the game possible to create. 2D pixel art is easier to create, but also easy to mock up, sketch, prototype, and reason about. It’s effects on even generating ideas for a game should be exponential.</p> Inspiration🔗</a></h2> Minecraft</strong>: I’ve mentioned Minecraft under the motivation points on Depth and Extensibility, but Minecraft is basically a game engine. It allows you to realise (a version of) nearly any game idea you have.</p> CrossCode</strong>: I found the mechanical depth of CrossCode really cool, as well as some of the RPG elements, like the quests and characters/story beats. Their movement and parkour system is really cool, and I find the overall combat system quite good as well, even if I select upgrades pseudo-randomly.</p> Why Noon-Flower?🔗</a></h2> It’s simple to pronounce and remember, and doesn’t have any specific meaning, which means I’m not bound to anything specific. Like, Minecraft is so much more than mining or crafting — it’s more building or auto-farming than mining for lots of people.</p> While it’s supposed to be random and meaningless, I did imagine the game and it’s (potential) community developing a random obsession with some item called the Noon Flower. I was picturing bases, custom maps, maybe some magic, lore, art, and stories about some mythical/magical item.</p> Noon-Flower (Game Idea) 2023-06-22T11:23:16+00:00 Imagine if Minecraft</a> were 2D — and top-down, instead of sidescrolling (Terraria, Starbound). Something like CrossCode</a>, but with building and more emergent gameplay.</p> (Noon-Flower was previously called Wijo)</p> There are two core ideas behind this: It must be compelling, and it must be tractable.</p> A compelling game is something multiplayer that I can play with friends. Something that allows different kinds of gameplay. Something that allows you to own it. Something accessible.</p> </li> A tractable game is something that can be achieved, even if I don’t have the skills (right now or ever). 2D pixel art should speed up ideating, prototyping, and the “final” implementation.</p> </li> </ul> I think the key reason Minecraft is so successful is that it enables a gradient of game to game engine. You can just play the game as is, or you switch some of the toggles to make certain parts easier or harder. Maybe you add a few nice to have features to the game. Or maybe you change the game entirely</a> — you add grand structures, limit exploration, add new items with different effects, add new creatures with different abilities, and add a new magic system. That’s the power of Minecraft.</p> So at an overall view, I want a base game, along with a system for scripting and adding custom content. You should be able to implement a puzzle game, a PvP game, maybe a shooter, an RPG, an MMO game (?), a roguelike, and more. Maybe a simple farming simulator as well.</p> The base game will be open world, with procedurally generated terrain. I imagine people exploring and creating bases together. I imagine them visiting villages, towns and cities populated by new and interesting races. I imagine them raiding dungeons and fighting terrible creatures. I imagine players meeting creatures and accepting quests for interesting rewards.</p> I recommend everyone to try out CrossCode</a>’s free demo, to see an example of compelling 2D gameplay that’s actually quite 3 dimensional. They have a very interesting parkour system, as well as a nice combat system.</p> Ivy 2023-06-22T10:26:27+00:00 I thought that I was dreaming, when you said you love me. The start of nothing. I had no chance to prepare. I couldn’t see you coming.</p> </blockquote> Listen to the cover by Indigo De Souza. While you’re at it, you could also listen to Kill Me.</p> Started from nothing Oooh… I could hate you now It’s alright to hate me now</p> </blockquote> Better Markup Headings 2023-06-19T09:50:55+00:00 Lightweight markup languages are designed in such a way that the markup looks</em> like what is intended. Bulleted lists use asterisks or hyphens and emphasised text has asterisks or underscores around it.</p> The headings, however, have a structure that highlights lower level headings over higher level headings. Instead, in a markdown file, the highest level heading should have the most hashes (‘#’), while the lowest level heading should have the least. Other lightweight markup languages should do the same with whatever character they use for headings.</p> ###### Heading Level 1 (Document Title) This is the introductory paragraph of your document. ##### Heading Level 2 (Section Heading) This is the content of the first section. #### Heading Level 3 (Sub-Section Heading) This is the content of Section 1.1. </span></code></pre> Plain Text Data Structures 2023-06-18T20:29:28+00:00 This is a wild one, which stems from my education as a visual designer, as well as a regular terminal user. The gist of my idea is that there are many ways of representing data in plain text for easy use. This is especially useful in a terminal based workflow, but even basic users can adopt some of this in something like Notepad or any simple text editor.</p> An Example🔗</a></h2> Around two or three years ago, I had a colleague trying to balance some accounts and she had a discrepancy between two different reports of the same accounts. I helped her by opening Notepad and just listing down the costs with each report in a different line. Then we just had to line up the matching costs and the odd ones out were easy to pick out. Here’s an example:</p> 1050 \| 100 \| 250 \| 320 \| 1200 \| 3200 \| 80 \| 20 20 20 \| 1050 \| \| 250 \| 120 200 \| 1200 \| 3200 \| 80 \| 60 \| </span></code></pre> Here you can see that some costs were given as a single entry in one report but were split into multiple entries in the other, which made it quite hard to organise. Furthermore, the ordering of the entries also had to be matched up. Using this method it was easy to see what was missing, and she used it later on as well.</p> Why Plain Text🔗</a></h2> You might ask why Notepad, or plain text in general. The answer is manifold:</p> Editors for spreadsheets and rich text documents require several seconds or minutes to start up, which breaks your flow.</li> These editors also bog down slower computers further. Especially if you have several reports already open on a low-budget work computer. This also breaks your flow.</li> These editors have complex controls for aligning data.</li> Most of their features have no use for you, and in fact interfere with your work.</li> Monospaced text makes it easier to align and compare data.</li> </ul> Basically, you get everything you need, and nothing you don’t.</p> Data Structures🔗</a></h2> Notes and (Draft/Personal) Documents🔗</a></h3> When you’re just writing down your thoughts, or a draft of your final document, write normal paragraphs as continuous lines, separate paragraphs with a blank line, and use a marker like ‘#’ or ‘=’ for titles. You can also use the other data structures in this page, to represent other kinds of data.</p> # Note/Draft Title This is a normal paragraph that wraps across multiple lines. This is another paragraph, that also continues across multiple lines. </span></code></pre> Try out Markdown</a>, and the various applications</a> that can make note taking incredibly fast and easy across any device that you like. You can write and view these documents without any special app, and most of these apps (if not all) open in the blink of an eye.</p> Tables🔗</a></h3> When representing table-like data, use a delimiter to separate each column and a new line to separate each row. The delimiter can be spaces and/or vertical bars, like the example above, or any other character, such as commas, tabs, colons, and more. Use spaces or tabs to align the columns properly.</p> Choose your delimiter character based on what is least likely to appear in your actual data. In the above example it was just numbers, so I used spaces because there’s a huge spacebar to easily add spaces and visually separate the numbers. If you’re going to be using commas and spaces, try semicolons (“;”).</p> Lists🔗</a></h3> Use a dash to mark the beginning of each entry, maybe with a blank line in between. Indent sub-lists to indicate that they belong to a parent item.</p> - List Item 1 - List Item 1.1 - List Item 1.2 - List Item 2 - List Item 3 </span></code></pre> Task Lists🔗</a></h3> Task lists can often benefit from additional information. Mark done tasks with a ‘.’ to make them less prominent, or use an ‘x’ if that feels more intuitive. Mark important tasks with an ‘@’ or ‘#’ symbol, simply because they’re large and more prominent.</p> - Normal task to do . Finished task @ Important task </span></code></pre> You can add date stamps at the beginning of a task to indicate when it should be completed, or when you created it, or when it was completed.</p> - () No completion date . (Jan 15, 23) Completed on 15th Jan 2023 @ (Jul 21) Complete by 21st July! </span></code></pre> Have a look at todo.txt</a> for even more ideas and features. The benefit of it is that there are a bunch of applications that can make it easy to manipulate your data across devices.</p> Choosing a Representation🔗</a></h2> Lists are actually very similar to tables. Take the following table for example:</p> Chef's Special? \| Name \| Spiciness \| Description \| Cost No \| Dragon-Glaze Salmon \| Medium \| Sweet and spicy glazed salmon topped with ... \| 200 No \| Fried Shrimp \| Low \| Crispy shrimp with cocktail sauce. Served ... \| 300 No \| Parmesan-Crusted Chicken \| Low \| Grilled all-natural chicken, creamy white ... \| 250 No \| Crispy Chicken Tenders \| Low \| Served with coleslaw, seasoned fries and H... \| 320 Yes \| Simply Grilled Salmon \| Low \| Seasoned with hickory-smoked sea salt and ... \| 500 No \| Fish & Chips \| Low \| Battered golden cod fillets served with se... \| 300 </span></code></pre> The descriptions are so long they’re basically unusable (I’ve truncated them to avoid typing it all), and some columns take up more space than they need.</p> Instead, you could represent it like so:</p> Item Name Chef's Special? Spice Price Description ... Dragon-Glaze Salmon - Medium Spice 200 Sweet and spicy glazed salmon topped with ... Fried Shrimp - Low Spice 300 Crispy shrimp with cocktail sauce. Served ... Parmesan-Crusted Chicken - Low Spice 250 Grilled all-natural chicken, creamy white ... Crispy Chicken Tenders - Low Spice 320 Served with coleslaw, seasoned fries and H... Simply Grilled Salmon Chef's Special Low Spice 500 Seasoned with hickory-smoked sea salt and ... Fish & Chips Low Spice 300 Battered golden cod fillets served with se... </span></code></pre> Here, each row is separated by a blank line, and each column is separated by a new line. Empty fields are marked with a simple -, and additional lines before the blank line are part of the item description. You can also use a list, but this saves you a lot of typing, because you don’t have to add the dashes for each item and the spaces for indenting item information (price, description, etc). In fact, this is a sort of hybrid of lists and tables, and you can see how one can be transformed into the other.</p> You can also mix it up with headings:</p> # The Grill Dragon-Glaze Salmon - Medium Spice 200 Sweet and spicy glazed salmon topped with ... ... # Drinks </span></code></pre> Basically, you should think about how you’re using the data.</p> Here’s the basic list format, if you were curious:</p> - Dragon-Glaze Salmon - Not Special - Medium Spice - 200 - Sweet and spicy glazed salmon topped with ... - Fried Shrimp - Not Special - Low Spice - 300 - Crispy shrimp with cocktail sauce. Served ... ... </span></code></pre> It requires a dash for each row and column, as well as two extra spaces for each column. Additionally, it’s harder to scan quickly, because all the items are squeezed up next to each other — in the blank line delimited format (tables use delimiters!) you just skip to the line after every empty line to get the name of the item.</p> What About JSON, YAML, etc🔗</a></h2> JSON is too verbose for typing out manually. In fact, YAML is quite verbose as well. These are primarly formats for transmitting data, and are more computer friendly than reading/writing friendly.</p> If you expect to be using this data in a lot of places, and you don’t want to write a custom parser, then you can of course go with a more popular format.</p> Conclusion🔗</a></h2> If you’re going to be typing out stuff for yourself, maybe for a small use case, then try using one of these formats, and/or even changing them for your own use case.</p> If you have programming knowledge, you can also write simple parsers for them, which will allow you to manipulate them easily and even export them to other formats.</p> Learn Kakoune</a>, (Neo)Vim</a> or Emacs</a> if you want even more power out of these plain text formats. They can allow you to interactively</em> transform the data, instead of writing a parser the traditional way, and can enhance your general text writing and editing as well.</p> Credits🔗</a></h2> Menu items copied from How to Make a Better Restaurant Menu (Pinterest)</a> only for use as examples.</p> Typst Syntax 2023-06-17T11:26:09+00:00 I’ve mentioned Typst</a> here and there, but I just thought I should give it a proper mention. They’ve done a lot of interesting things to make it easy to write large documents. For this post, I just want to talk about the syntax.</p> NOTE:</strong> Typst is currently in Beta, and the things I mention might change in the future, although the general architecture should be the same.</p> Typst has three types of syntax (modes</a>): content, math, and code. Content is a lot like Markdown</a>, with headings, paragraphs, lists, links, and so on. Math is a way to enter formulae with all kinds of special symbols. Code is a little bit like TeX</a>’s macros, except they’re actually full-fledged functions in a specially created programming language. There’s a function to describe macros as well.</p> When you start writing a Typst document, you’re in content mode. To enter math mode, you type a dollar sign and write out your formulae using math mode syntax. To enter code mode you use an octothorpe (‘#’) followed by the name of the function, and the arguments to the function. For example, #heading(level: 1, [Heading Level 1])</code> calls the heading function asking for a level 1 heading with the text “Heading Level 1”.</p> Typst’s syntax is actually built completely on code. When you write out special syntax in content mode, it gets converted into code. Continuing the heading example, when you write = My Document</code>, it gets transformed into #heading(level: 1, [My Document])</code>. When you write a paragraph of text, it implicitly calls #para([Paragraph Content])</code>. When you write math like $ x + y $</code>, it gets converted into #equation([x + y])</code> (I think).</p> And that’s the coolest thing about Typst’s syntax. This programming language allows you to do lots of exciting things:</p> Create custom functions</a> that you can use in your documents.</li> Create/override syntax</a> that implicitly calls your functions, or any other Typst function.</li> Import</a> other Typst files, both content and functions.</li> Import arbitrary files</a>, such as JSON, CSV, or any plain text file.</li> Draw</a> arbitrary shapes. Functions for plotting and diagrams are also being worked on.</li> </ul> Typst’s biggest current limitation (for me) is that it only supports PDF output, but HTML output is in the works and should be ready in a few months. Along with that, I think they’ll include exporting an intermediate format, such that you can use Typst to calculate most of the layout and results, then get a structured representation of the resulting content, so that you can transform it into whatever you like.</p> Additionally, Typst is not out of Beta, so things change nearly every month or so. However, you can already do exciting stuff with it, and I would encourage you to try it out. Start with the tutorial at typst.app/docs/tutorial</a>.</p> Portfolio 2023-06-01T21:17:40+00:00 Hi! My portfolio is currently available as a PDF. You can reach out if you’d like to know more about any project. I’ll be including some of them on the website over time.</p> More Ideas on CL SSG 2023-05-31T21:50:57+00:00 Following up on my initial post (CL SSG — Common Lisp Static Site Generator</a>), Coleslaw didn’t really work out (more below). Instead, I’m imagining a static site generator based on a build system, a typst-inspired language, and a simple server.</p> Regarding Coleslaw, I had some bugs that I didn’t feel like going through, plus it loaded a lot of modules I wasn’t interested in (but not the incrememental build one?), and I didn’t feel like learning all about it. Even the preview didn’t work properly. So I just let it be. Zola gives me most of what I need anyway. I might give Coleslaw a try again later.</p> I did look up some Common Lisp libraries, however.</p> Overlord seems to be a good build system. It should get me incrememental and parallel builds.</p> For the authoring and templating, I want to use a typst-like language. Templates will simply be functions that wrap the rest of the content. I wonder how I’d extract metadata. Perhaps a metadata function?</p> Hunchentoot seems to be the most popular server, and it should be more than good enough. I simply need to serve pages locally, and it should be well documented, with enough guides and references.</p> The first step is to start messing with cl-typst. Should be as simply as evaluating anything starting with ,(</code> and simply passing along anything else as regular text. Then figure out a system for sharing state or environment? Or should I strive to keep it functional? Oh, well. Get the parser-evaluator figured out first.</p> Minecraft Activate the Monument 2023-05-21T20:07:42+00:00 I was watching the 9th devlog of Space64 (WIP name) by FireDragon04, and as he talked about activating the doorway by enabling beacons, I thought about Minecraft beacons, and a spin on the Minecraft CTM (Complete the Monument) formula where you activate beacons instead of fetching wool and returning it to the monument. A Minecraft ATM. (Activate the Monument. Hah.)</p> I’d say the main difference is that loosing a monument key is now impossible, since they don’t exist. This is usually solved by regenerating the keys, or making ways to keep your inventory, or preventing your items from despawning, which is no longer required.</p> Perhaps it will feel like less of a fetch quest?</p> I know I want to recreate FireDragon04’s game in Minecraft, at least a general vibe. I’m a fan of Halo, sci-fi, brutalism, and grand buildings. I can just imaging the whole thing as a Complete the Monument</del> Activate the Monument. I even have vague ideas of progression, dungeons, gameplay, grand architecture and the ending in mind.</p> Todo Formatting 2023-05-21T00:03:47+00:00 A way of visually organising your tasks to suggest which one is currently actionable, which one can be acted upon next, and which tasks depend upon which. This can be used to create UIs, organise tasks in a todo app, or to organise tasks in a simple text file.</p> First, write titles for projects.</p> Projects can be of any size. Clearing out your desk could be a project.</p> All tasks go under a project. One off tasks can go under a “more” title.</p> </li> Two, write the very next action you can perform on a project.</p> Think of an action and write it down, then think of what you need to get that done and write that down. Repeat that until you can’t reasonably break it down further.</p> </li> Put the next actionable step at the top of the project list.</p> </li> Indent dependent tasks below their blocker tasks.</p> If action B requires action A to be complete before you can do action B, then put action B below action A and indent it.</p> Tasks that depend on the same parent task, but not on each other, will go below that parent task and will have the same amount of indentation as each other.</p> </li> </ul> Here’s an example, where i have to clean up my desktop folder:</p> desktop clean-up - copy list of files to notes - list possible actions under each item for where to put it or what to do with it - choose best action for each file - perform best action for each file </span></code></pre> I don’t yet know how to model tasks that depend on two or more tasks — a possible method could be to put one parent task below the other, even though it might not depend on the other parent task, and then put the dependent task under both of them.</p> In my todo file, I replace the hyphen (-</code>) with a simple @</code> sign to indicate tasks that are urgent or important to me. Try to limit them to 5 or less. I aim to make it more GTD compatible as it grows, adding in project tags and actions lists, or maybe I try writing a tool to extract tasks instead, since moving items around will either create duplication or mess up the dependency order.</p> CL SSG (Common Lisp Static Site Generator) 2023-05-18T23:03:39+00:00 Writing so much about Static Site Generators, I want nothing other than to implement one in Common Lisp. I get full configurability, really nice templates, programmatic css, awesome scripting, and anything else I might desire.</p> I wonder how long the build times would be, however, if I used a shell script instead?</p> Alternatively, I could always try Coleslaw</a>. But why Roswell. Oh, well. I had to use it someday anyway.</p> Scripting (SSG Edition) 2023-05-17T20:16:04+00:00 A lot of applications that are meant for creating media benefit from some sort of scripting, including SSGs (static site generators). All of the Javascript ones seem to use Javascript, but Hugo and Zola rely on templates to do everything, which can be quite cumbersome, limited and generally painful.</p> However, it should be relatively easy to add scripting to them, since Go and Rust have several scripting languages that are designed to be easily embedded. You can have a look at this (Github) page on embedded scripting languages</a> for a full list, but some interesting options include Rhai (Github)</a> for Rust, and Tengo (Github)</a> and Anko (Github)</a> for Go.</p> The most interesting options, however, are Starlark(Github)</a> and Nickel (Github)</a>, both of which are designed for configuring build systems and related tools.</p> I think they’re quite suitable because they’re designed with a very specific use case instead of some abstract theory, and that specific use case happens to be build systems, which are what static site generators essentially are.</p> Starlark has implementations in both Go and Rust, while Nickel is implemented in Rust.</p> Benefits🔗</a></h2> As stated earlier, full fledged scripting languages make it easier to write complex and reusable code.</p> They can also be used to make a more intuitive and integrated templating system, by using the same language in the templating system. I’ve included a templating example with Starlark below, but it can also be used to implement metadata (or “frontmatter”) with a simple function call like {{ meta("2022-03-05", draft) }}</code> at the top of your markdown file.</p> Starlark🔗</a></h2> Starlark is a Python-like scripting language designed for build systems, and static site generators are basically specialised build systems. It’s designed to be parallel (for fast builds), safe (for executing untrusted code) and simple. Honestly, sounds perfect for a static site generator. The one downside might be randomness, but that could be provided by the application (Zola or Hugo). The Buck2 build system (Github)</a> for example, provides an API (Github)</a> that can be accessed by scripts.</p> You could even embed it inside the template language. As an example:</p> <h1>{{ page.title }}</h1> <ul> {% for page in pages: """ <li> <a href={{page.permalink}}>{{ page.title }}</a> </li> """ %} </ul> </span></code></pre> NOTE:</strong> I’m not 100% sure about Starlark syntax and features, and I’m not really a Python user either, so this might not be correct. Although, you could probably add additional features through the app, such as a custom string format (I think).</p> This enables you to write more complex scripts directly, instead of writing them in the (imho) awkward template syntax.</p> def page_list(pages): """create a list of pages""" result = "<ul>" for page in pages: result += """<li><a href="{page.permalink}">{page.title}</a></li>""" result += "</ul>" return result </span></code></pre> That example is not so bad in the templating language, but ending all your statements with end-<statement></code> and scripting more complex logic can get quite annoying.</p> Nickel🔗</a></h2> Another language that could be used is Nickel</a>. It’s designed with the Nix build/configuration system in mind, and is inspired by the Nix language.</p> One advantage over Starlark is gradual typing and contracts. (Contracts are basically like assertions.) This is especially helpful when writing scripts that expect data in a specific form, but would otherwise return incorrect results which you might find several weeks later. You can also use it to ensure that your configuration conforms to a certain type or contract, instead of causing errors later on. Contracts, for example, can ensure properties about your strings, such as what they can contain, what they can start or end with, and so on. As a simple example, you can do</p> let dateToString : Date -> String </span></code></pre> Another is easier multiline strings — in the Starlark/Python example above, it would preserve the indentation of the text (quite unintuitively, might I add). Here’s how it looks in Nickel:</p> let it's-a-multiline-string = m%" This isn't indented. This is indented. This isn't indented. "% </span></code></pre> (Yes, examples imply it allows hyphens and single quotes in its identifiers.)</p> While most configuration languages try to avoid turing completeness, Nickel is Turing-complete, with restricted accessibility to side-effects. This can allow things like reading file contents and updating backlinks, which are quite useful.</p> Nickel can also import and reuse YAML, TOML and JSON, which allows gradually migrating to it, instead of completely invalidating older (site) configurations.</p> Have a look at the Rationale (Github)</a> to understand their design choices and how it compares to other languages, including Starlark.</p> Lispy Templates 2023-05-15T20:32:10+00:00 Lisp makes a pretty great system for templating all kinds of material. Simply let people write lisp code directly in their files and evaluate it in the context of the document, while blocking features unsuitable for templating.</p> In the most basic form treat ,<anything></code> as a call to evaluate <anything></code>. So ,var</code> expands to the variable var</code>, and ,(func arg1)</code> expands to the function func</code> with the argument arg1</code>.</p> The next step after this is to create content blocks. If you need to wrap some content inside a function (such as a loop), you wouldn’t want to worry about escaping all the quotes. For that purpose, use square brackets (Borrowed from Typst</a>. This allows you to write (link [Link to article called "Hello, World"])</code> without worrying about escaping the quotes or using single quotes. You still have to escape closing square brackets, but that’s not as big a problem in my opinion.</p> In addition to representing flat data, s-expressions can easily model nested data structures as well, which is where their power truly shines. HTML is a common format that represents nested data. All you need is custom functions to create various HTML elements, which allows you to write something like the following:</p> ,(:para [This is some content with a ,(:link [link text] "example.com") in it]) </span></code></pre> The coolest part is that you don’t need to embed a scripting language. You just re-use the lisp programming language!</p> ;; definitions ,(define fn1 (:footnote [I am but a Lisp newbie])) ,(define fn2 (:footnote (:link [CommonMark specification] "commonmark.org"))) ,(define fn3 (:footnote (:link [LaTeX Website] "latex-project.org"))) ;; html content <h2> ,next-steps </h2> <p>I have yet to see or implement this ,fn1 , but imagine using it in regular prose as a Markdown ,fn2 or LaTeX ,fn3 alternative?</p> <p>It would probably require being able to define custom syntax, since it would be tedious to type <code>,(:link [This is my title])</code> every time you wanted to insert a link, for example.</p> </span></code></pre> A lot of these ideas were inspired by Typst</a>, by the way. Check it out.</p> Drawing and Writing 2023-05-15T04:56:14+00:00 Drawing and writing are essential tools for thinking. Because they are loose and unstructured, they allow you to capture thoughts with the least friction; and capturing thoughts quickly and smoothly is essential for completing, developing, and refining ideas.</p> You can write and draw with a notebook and pen, or you could use your smartphone. You could use a tablet if you want to capture a lot of sketches digitally, and enable easy reorganisation and search of text and other material. Use a physical keyboard if you’re writing a lot, since keyboards can capture words faster than pens.</p> This applies to most endeavours. You might be thinking of a new piece of furniture, or a topic you want to compile material on, or figuring out how to organise something, or designing the interface for an application.</p> These are all creative pursuits, by the way. A mathematician exploring new principles and ideas is just as creative as a painter exploring new brushes and subject materials.</p> This might all be feeling like an epiphany to me purely because I’m a little sleep deprived. Oh, well.</p> Github Forks 2023-05-13T21:10:13+00:00 “Forks” in Github should probably be called “clones”. That’s basically what they are. Other related terms are “remotes” and “mirrors”.</p> What “Forks” Stand For🔗</a></h2> Outside of Github, a “fork” is a project that takes the code of one project and seeks to establish itself as its own project, with a different name and branding, as well as different features and code fixes.</p> In Github parlance, a “fork” is used to mean a clone of a repository to which you’ve made some changes, before you can send those changes forward via pull requests. It’s not meant to be an independent project, simply a mirror of your personal copy of the project.</p> Reasoning and Conclusion🔗</a></h2> I guess Github was worried about the difference between cloning it onto your machine versus your Github space. In that case, call it a “Github Clone” or “Remote Clone”? “Clones” is the more accurate term because you’re git clone</code>-ing a repo to create a personal copy to mess with.</p> The git term “remote” is meant for other locations of a repository. Technically, it’s not a remote — your copy is not (automatically) a remote to the original copy, although the original project should be a remote of your copy. But it is a clone on a (Github) remote.</p> So ‘Remote Clone’.</p> I wonder what the process is for (remote) git interfaces like Sourcehut, Gogs (and descendants like Gitea and Forgejo), and any other interactive ones.</p> GNOME Appreciation 2023-05-11T16:34:15+00:00 I frequently see people annoyed with GNOME, but I personally like a lot of GNOME’s decisions, even if I don’t use it. This post is about those decisions that make GNOME great.</p> In summary, it’s simple, pretty and approachable for new users, and its overview screen is in a class of its own.</p> Super Power (The Overview)🔗</a></h2> See what I did there? The ‘Super’ button is a name for the main shortcut button, which is ‘Windows’ on most keyboards and ‘Command’ on Apple keyboards.</p> In GNOME, the ‘Super’ button simply gives you so much power with the press of just a single button.</p> You can open the overview with the ‘Super’ key, or a three finger swipe up on the touchpad, or clicking on the Activities button, or even just flicking your mouse to the top left (to where the activities button is).</p> </video></p> (Video copied from forty.gnome.org</a>: shows swiping up to view overview, then again to view all apps)</p> You then get, at your fingertips:</p> The current workspace.</li> All the apps open on the current workspace.</li> Any other workspaces and its apps.</li> Your pinned applications.</li> A search bar to access absolutely all</em> of your apps, files and folders. And you only need to start typing. No extra clicks or keys required.</li> Smooth animations to highlight the spatial relationships between all elements.</li> </ul> All the other desktops require several different shortcuts or buttons for this. You can have an applications menu, but it might not have a search bar. Or you might, but it only searches applications. Then it needs a separate shortcut to search through files and folders.</p> And you’ll never get a desktop overview with all your apps (launchers) available. Picture this: you’re in the all apps view, with two desktop thumbnails up top. You drag the calculator to the first, then the browser to the second, then GNOME will create a third workspace for you, then you drag the messaging and email apps to the third, and then you start typing ‘Finan’, when GNOME suggests ‘Financial Report.xlsx’ and you just hit ‘Enter’ to open your spreadsheet app on the first workspace — and just like that, you’re off to the races!</p> Frankly, the overview makes GNOME the smoothest and slickest DE implementation that I’ve ever seen — not just in terms of looks, but also the consistent spatial layout/relation of things, as well as all the power</em> that it presents in such a simple package.</p> Simplicity🔗</a></h2> The GNOME DE and apps focus a lot on simplicity. It’s all about doing the things that you need to do and avoiding unecessary clutter.</p> Advanced features are reserved for other apps or plugins unless/until they come up with a more thought out design.</p> This creates a great environment for new users to get their work done without making mistakes, or worrying about making mistakes, or getting distracted.</p> Theming🔗</a></h2> GNOME apps use a fairly modern and “trendy” UI, with flat design and plenty of white space, which is another thing that makes it approachable to new users.</p> While this is not for everyone and might not be objectively beautiful, it is familiar and in keeping with current designs.</p> Responsiveness🔗</a></h2> A lot of GNOME apps and components automatically adapt to smaller sizes.</p> This makes it feasible to open lots of apps in the same window, and to use the same apps on mobiles and tablets. Wooooo convergence!</p> You should see the GNOME mobile shell (Phosh). It basically uses the same apps and UI as the desktop, with minor tweaks to fit the form factor. The consistency and careful design just leaves me speechless.</p> Short demo videos available in these two articles by articles by Jonas Dressler:</p> Towards GNOME Shell on mobile</a></li> GNOME Shell on mobile: An update</a></li> </ul> Flaws🔗</a></h2> Now, GNOME isn’t perfect.</p> There are some things that I don’t quite agree with, and some things that bother other users.</p> Centre App Bar🔗</a></h3> My biggest nitpick, which I noticed when Windows 11 made the same mistake, is apps aligned along the centre. When you open a lot of apps, your pinned apps are no longer where you expect them to be, so you now have to be more careful.</p> Additionally, a button in the corner is much easier to click since you can’t overshoot it with quick movements, which prevents accidentally clicking on something else. GNOME gets this right with the ‘Activities’ button, but not with the app bar.</p> It might not be a big deal, and it would certainly be difficult to solve, but I just feel like it’s objectively wrong. Perhaps the solution is a combined app and status bar, but I can’t say, since it’s advantageous to have a narrow status bar that’s always visible.</p> Flatpaks🔗</a></h3> Another thing that annoys me is their insistence on using Flatpak.</p> Despite an established culture of maintainers and packagers in the Linux world, they think it’s a great idea to push additional responsibilities on app developers. This also indirectly suggests that developers silo themselves and ignore maintainers.</p> Furthermore, it hampers performance for apps, especially on lower grade hardware, and as a new technology it prevents some affordances that are available with normally installed apps. I mean, one of the reasons I first switched to Linux was precisely because my laptop struggled a lot.</p> Bleeding Edge🔗</a></h3> While it doesn’t bother me specifically (probably because I don’t use GNOME), GNOME sometimes breaks things for existing users, and often despite large backlash, which makes users feel hurt or offended, which can lead to the actions and resulting tension that accompany high running emotions between the core team and users/contributors.</p> Missing Features🔗</a></h3> Because of their focus on simplicity, they take a while to work through features, such as the background app statuses, which were recently added after several years.</p> Thankfully, GNOME has a decent plugin ecosystem.</p> Function Design Recipe 2023-05-11T12:36:29+00:00 How to Design Programs (HtDP) specifies a simple method of designing programs, called a recipe, which they call the Function Design Recipe, introduced in the preface.</p> It’s a fairly simple practice, and it helped me hammer out some 2048 code that I’ve been chipping away at off an on for several months. One help is my growing familiarity with the language, of course, but the function recipe did a lot of work in clarifying the design and letting me know how and where to put my efforts. This video (YouTube)</a> presents a story of why it is useful in a broader example.1</a></sup></p> ^{1</sup> The idea is to take things step by step. At the level of the team in the video the steps are on a grander scale, but at the level of beginners it’s very useful to follow the steps of the Function Design Recipe.</p> </div>}You can find it at htdp.org</a> 2</a></sup>. I recommend you go through the book if you’re a new or intermediate programmer. The preface is a good place to start.</p> ^2</sup>The book seems to be updated with some frequency. If you see the URL, you’ll see 2023-3-6</code>, which suggests it was updated on 6th March 2023. I recommend starting at htdp.org</a> and clicking the book title to open the index, so that you have the latest edition.</p> </div> The Recipe🔗</a></h2> NOTE:</strong> This is not strictly the recipe. I’ve borrowed basic ideas from it, and managed to use it quite successfully.</p> The first step is to figure out the shape of the data that you’ll be working on. You’re recommended to do this using comments.</p> The next step is a signature and description of the primary function and its purpose. The signature says what inputs it requires, and then what kind of output it spits out. You can model this as simple data types, also using the comments. The purpose follows right after, stating what the function is meant to do.</p> Then you create a template of the function, based on the signature, also using comments. Feel free to use ...</code> for unknown parts. My templates simply had a function name and a list of arguments. The tests will be run later to verify your code.</p> The next step is to write some tests for the code. Write down the test input and the expected output using code. Think of some edge cases and what their output should be. These tests will be executed later to validate the program. I skipped these for my 2048 code because the game uses random input, which is easier for me to test visually than to write test cases for, especially at the scale I’m working on. It’s probably a good habit though. I might try to write tests further along, with more complicated tests to check the random input.</p> Finally, you flesh out your template into complete code and then run your tests on it. This step took some time, because I had to look up documentation and play around with some functions to see how they might suit my needs. This is partially because I like to work without the internet, in order to increase my capability of working offline, with just the repl and the documentation.</p> As I mentioned above, this is my loose interpretation of the steps, meant to provide a gist of how it works. Please reference the book</a> if you’re interested — click on the book title to open the index. 2</a></sup></p> ^2</sup>The book seems to be updated with some frequency. If you see the URL, you’ll see 2023-3-6</code>, which suggests it was updated on 6th March 2023. I recommend starting at htdp.org</a> and clicking the book title to open the index, so that you have the latest edition.</p> </div> DIY (Fish) Shell Templating 2023-05-07T14:07:52+00:00 If you’ve seen my note on creating a Static Site Build Tool</a>, you might’ve seen the link to pp</a>, and that I lament the syntax and the fact that it uses ash/dash. Turns out it’s quite easy to implement in fish, along with a syntax I prefer!</p> It started with me just going about my day, when I remembered the eval</code> command and I started thinking of the pieces I might need to create a parser/state machine of sorts in fish. I tinkered a bit with some of the commands I was thinking of, and I managed to get it working quite well!</p> I haven’t made a way of putting in variables or reading and writing from a file, and I haven’t thought of too many edge cases, but the basic functionality is there.</p> If I run ./parser.fish "the date is {{ date -I }}"</code> it will give me the output the date is 2023-05-07</code></p> I’ve pasted in the whole thing, as it currently is, at the end, if you’re curious.</p> How it Works🔗</a></h2> The basic way it works, is it uses a variable to figure out if it’s reading normal text or command text. If it’s reading normal text, it simply passes it along to stdout, and if it’s reading command text, it gathers that into a string, then runs eval</code> on it, which spits out its output to stdout.</p> Future Work🔗</a></h2> I want to be able to parse files instead of just strings. The answer might be somewhere in string join \n $fileContents</code>.</p> When parsing files, it would be useful to provide variables for substitution. Perhaps it could be done by specifying environment variables in the same line as the command. Something like VAR=val fish-template str "{{ echo $VAR }}</code>. Another way would be a syntax for keys and values. Perhaps --variables "key1: val1; key2: val2"</code>.</p> A short syntax for variable expansion might also be nice. Something like {{ $var }}</code> or {$ var $}</code></p> It would be cool to have a way to limit its scope, depending on where it’s being called from. Include a list to allow certain commands, as well as one to block some. If the first the command isn’t in the allow list, or is present in the block list, then raise an error instead of evaluating it.</p> In a similar vein, providing additional commands would be great. A simple way is to create commands in a bin/</code> directory and then run them with {{ ./bin/my-command }}</code>, but a shorter syntax would be quite useful. Perhaps use the bin/</code> directory with a syntax like {{ @my-command }}</code>? Or simply {{ my-command }}</code>, such that if my-command</code> is not installed, it would look in the bin directory.</p> It is ideal that the template evaluation takes place from a specific directory. Especially if relying on file operations or something like a ./bin/</code> directory. When calling the command on a template file, ensure the current working directory is the same as the file’s parent directory, unless specified otherwise. Changing directories in the script sounds like a potential footgun, since it’s implicit behaviour that people will not be aware of. An easy flag, then, to execute in the context of the template file’s folder. So --dir < current \| file-dir \| <path> ></code>, where is relative (starting with ./</code>) or absolute.</p> It would also be great to have all commands in the file/template evaluate in the same context. This way a variable declared at the top could be used in a command further down. Currently, it spawns subshells using the eval</code> command. Maybe it could use source</code> or a flag in eval</code>? Another approach might be to gather content as an echo $content</code> command along with the other commands in the given sequence, then calling all the echo and other commands using a single eval</code> command at the end. Use string escape</code> to prevent unwanted expansions.</p> Code🔗</a></h2> set</span></span></span> </span>parserMode</span></span> </span>normal</span></span> </span>set</span></span></span> </span>command</span></span> </span>'</span>'</span></span></span> </span> echo</span></span></span> </span>$</span>argv</span>[</span>1</span>]</span></span></span></span></span> </span>\|</span></span> </span>while</span></span></span> </span>read</span></span></span> </span>-</span></span>n</span></span></span> </span>1</span></span></span> </span>char</span></span> </span> switch</span></span></span> </span>"</span>$</span>parserMode</span></span> $</span>char</span></span>"</span></span></span> </span> case</span></span></span> </span>'</span>normal {'</span></span></span> </span> set</span></span></span> </span>parserMode</span></span> </span>open-brace</span></span> </span> case</span></span></span> </span>'</span>open-brace {'</span></span></span> </span> set</span></span></span> </span>parserMode</span></span> </span>command-mode</span></span> </span> set</span></span></span> </span>command</span></span> </span>'</span>'</span></span></span> </span> case</span></span></span> </span>'</span>open-brace '</span></span></span> </span> set</span></span></span> </span>parserMode</span></span> </span>normal</span></span> </span> printf</span></span></span> </span>'</span>{%s'</span></span></span> </span>$</span>char</span></span></span></span> </span> case</span></span></span> </span>'</span>command-mode }'</span></span></span> </span> set</span></span></span> </span>parserMode</span></span> </span>close-brace</span></span> </span> case</span></span></span> </span>'</span>close-brace }'</span></span></span> </span> set</span></span></span> </span>parserMode</span></span> </span>normal</span></span> </span> #</span> echo \'$command\' </span> eval</span></span></span> </span>$</span>command</span></span></span></span> </span> case</span></span></span> </span>'</span>close-brace '</span></span></span> </span> set</span></span></span> </span>parserMode</span></span> </span>command</span></span> </span> set</span></span></span> </span>command</span></span> </span>"</span>$</span>command</span></span>\}$</span>char</span></span>"</span></span></span> </span> case</span></span></span> </span>'</span>command-mode '</span></span></span> </span> #</span> newline creates '' when read </span> set</span></span></span> </span>command</span></span> </span>"</span>$</span>command</span></span> ; "</span></span></span> </span> case</span></span></span> </span>'</span>command-mode #'</span></span></span> </span> set</span></span></span> </span>parserMode</span></span> </span>comment</span></span> </span> case</span></span></span> </span>'</span>comment '</span></span></span> </span> #</span> newline creates '' when read </span> set</span></span></span> </span>parserMode</span></span> </span>command-mode</span></span> </span> set</span></span></span> </span>command</span></span> </span>"</span>$</span>command</span></span> ; "</span></span></span> </span> case</span></span></span> </span>'</span>command-mode '</span></span></span> </span> set</span></span></span> </span>command</span></span> </span>"</span>$</span>command$</span>char</span></span></span>"</span></span></span> </span> case</span></span></span> </span>'</span>normal '</span></span></span> </span> #</span> newline creates '' when read </span> printf</span></span></span> </span>\n</span></span></span> </span> case</span></span></span> </span>'</span>normal *'</span></span></span> </span> printf</span></span></span> </span>%</span></span>s</span></span> </span>$</span>char</span></span></span></span> </span> end</span></span></span></span> </span>end</span></span></span></span> </span></span></code></pre> Do More in Your Minecraft Worlds 2023-05-06T01:38:56+00:00 It’s hard to get things done in a Minecraft world, because you often don’t have time, and you can’t achieve the things that you dream of, especially the cool things you see from other people, and maybe prototype in your creative worlds. This is a set of rules to help you do cool things in your Minecraft worlds, including singleplayer, as well as small multiplayer worlds with friends.</p> There’s also a bonus solution at the end to make the game more accessible (in a looser sense of the word), similar to the accessibility options of games like Celeste (Celeste Wiki)</a> and Rusted Moss (Article on Flying)</a>1</a></sup>.</p> ^{1</sup> You can see the other options in the screenshots. The basic instructions apply to those as well.</p> </div> NOTE:</strong> A lot of this is trust based, and might not scale so well. It works best with friends and acquaintances.</p>}The Problem🔗</a></h2> You can’t build large things:</p> Not enough time</li> Not enough materials</li> </ul> You can’t accumulate enough materials from your farms:</p> Not enough time</li> Can’t AFK because you can’t run Minecraft while doing other work. It slows your computer.</li> Can’t AFK because you can’t keep your computer on. Possible reasons: high energy bills, having to carry your laptop around, unable to monitor computer, power cutoffs.</li> Can’t AFK because of poor networks.</li> Can’t AFK because you host a server from a personal computer, in which case the previous considerations apply.</li> </ul> The Solution🔗</a></h2> Offline Hours: When you’re not playing on the server you build up a sort of currency called “Offline Hours”. While the name says hours, you can time it down to minutes, half hours, or quarters. This currency can be spent on certain actions which have varying costs.</li> AFK Simulation Rule: If you have an automatic farm of some kind, measure its output for 5–10 minutes and record it. You can now spend your “Offline Hours” and get the materials you would get for that amount of time by multiplying it with your measurements.</li> Build Grind Rule: You can also establish an average baseline for how many blocks can be placed per minute, and spend your “Offline Hours” to fill/copy large amounts of blocks based on that amount. This can be used to copy repeated elements of a build, such as a large patterned wall, or to clear out a large area, for example.</li> </ul> Bonus Rule: Additional Accessibility🔗</a></h2> NOTE:</strong> I’m using “accessibility” in a looser sense of the word, not in the sense of a11y 2</a></sup>. </p> ^{2</sup> https://en.wikipedia.org/wiki/Computer_accessibility</p> </div> This rule derives from my own frustrations with lag, but they apply to any player who might be disadvantaged in any way. For example, they might not be hardcore gamers, or they play with special hardware. Other disadvantages include lag and rubberbanding.</p>} Accessibility Rule: Players with disadvantages have reduced penalties, or buffs to deal with their disadvantages. For example, they might keep their inventory whenever they die, or they could have extra health, or they could have permanent regeneration/resistance, or they could have other special items and/or abilities, such as flying or fire spells that damage hostiles in a given radius. See what the frustrations and needs of your players are. The rule need not apply at all times. For example, network effects can be temporary.</li> </ul> NOTE:</strong> The other rules are also about accessibility — they’re about making certain parts of the game more accessible to everyday players who might not have enough time to achieve the big builds they dream of.</p> Implementation and Caveats🔗</a></h2> This is a largely trust based system.</p> The easiest way to run it, is to calculate your Offline Hours, etc., and then use commands according to the rules. The AFK rule can be achieved by using /give</code> after calculating how many items you should get. The build rule can be achieved by using the /fill</code> or /clone</code> commands. Make sure to use the destroy option, so that you get any blocks that are replaced (or “broken”). This is also the most flexible and powerful system.</p> Make sure to take regular backups if you’re relying on players to use the commands. Maybe before each command, or before you start up the server (this is the same as backing up after closing the server).</p> People who are unfamiliar with the commands can either learn to use them with some tutorials, or they can rely on other people to run it for them. If you’re applying this to a server, it would be ideal for the server admin to know them, since they should be available when the server is up.</p> To make it easier for people who don’t know commands, you could set up trigger commands for them. Trigger commands won’t be able to do everything, but they should let players do some things on their own.</p> If you have Minecraft modding experience, that would be really cool — you could implement it and share it with people who are uncomfortable with commands. Some additional accesibility features are best achieved through mods, in fact. However, try to not make them too invasive.</p> If people build up “too many” Offline Hours, you can put a limit on how many they can make. Make the decision based on the situation.</p> If you find yourself abusing commands in other ways, you could create a process which makes you take it more seriously.</p> For example, in a singleplayer world, you can simply create a note, and every time you use a command, you put it into that note with the time, the command, and why you’re allowed to use it (number of Offline Hours, any other reasoning). That note could also include how many Offline Hours you have.</p> If you’re in a multiplayer world, you can create a way to submit requests and get them approved by at least on or two other members. The admin or other operators could then fulfil these requests, or you could trust players to responsibly fulfil them once their request has been approved. You can make it more or less strict as required.</p> Conclusion🔗</a></h2> Make a simple set of rules for achieving things without requiring prohibitive amounts of work. The rules should reflect the costs and rewards that you (and/or your players) find reasonable and enjoyable.</p> Remember to fine tune the rules and rewards according to your (or others’) needs. You don’t want to make the game too easy, or it won’t be as rewarding, nor do you want to make it too strict. You must also communicate this to your players and discuss matters with them to create a fun environment for everyone.</p> A New (Top-Down, 3D) Game 2023-05-05T11:05:57+00:00 I like coming up with game ideas all the time. Well, I come up with bizarre ideas of any kind. Here’s my rambling about a game idea I had last night:</p> This one was prompted by me watching a compilation of several sci-fi/cyberpunk (indie?) games. I liked the story bits in some of them, in the sense of your actions building up over time, and contributing to a larger narrative. The only game I play right now is a battle royale with some friends. It would be nice to have a co-op experience.</p> But then I fear they may get bored soon. There’s only so much story content you can add to a game. Perhaps you could make emergent behaviour using complex systems, but there’s just something else about competitive multiplayer games. That’s a whole different universe of emergent behaviour.</p> So, that means a multiplayer element as well. And why not. Why can’t you have an interesting top down multiplayer experience. Some already exist, in fact. Furthermore, it would be more performant and flexible than the higher resolution first-person/third-person 3D games.</p> Ah, yes. The 3D was also a decision to manage appeal, even though I personally enjoy pixel art a lot. Imagine the game in low-poly 3D!</p> Anyway, some top-down games are already in the popular market, and some of them are even battle royales. So we could implement some fun mechanisms for various weapons and items, as well as environment interactions.</p> A fog of war system (?) for limiting vision to a certain distance and through certain materials. Imagine blasting open doors and hitting people in the face with it. Imagine spells, perhaps. Imagine camouflage items, flamethrowers, mines, drills, missiles — the whole gamut! Melee combat of all kinds as well! You could have a character class that’s simply larger and stronger than others who just slams other people.</p> I think people would appreciate the art style of Xenowerk. As a more varied PvP and PvE experience.</p> A 3D character also creates more interesting UI opportunities, such as a rotating model in your character selection screen.</p> My note from last night:</p> Any story based game will eventually run out of gameplay, unless it has the foundations for making your own games, as well as content updates.</p> And multiplayer modes with unpredictable outcomes, with some requirement of skill.</p> Top down is best to include mobile users as well.</p> Test out mechanics for multiplayer as well and maybe tweak the balance for pve modes.</p> </blockquote> Skeumorphism 2023-04-28T17:31:56+00:00 The gear icon for settings. The envelope icon for email. The paper plane icon for sending a message. The bell for notifications. The pages in the world wide web. The desktop, and the windows on it.</p> Skeumorphism isn’t gone, but maybe we’ve reached the point where there’s nothing left to take away.</p> Organising Your Files 2023-04-24T12:55:31+00:00 This is a pretty simple file storage method, revolving around two folders and links.</p> The two folders here are your ‘Archive’ and ‘Inbox’. The ‘Archive’ folder is where your organised files stay, and the ‘Inbox’ folder is where new files come in. The ‘Inbox’ folder is also where you place files and folders that you are currently working on — using links, not copying.</p> Links are special files that point to another file or folder on your computer. If you link to a file instead of copying it, whenever you edit a file it will actually edit the original file, and the links will continue to point to the same file along with the edits you made. I believe links are known as ‘shortcuts’ in Windows and ‘aliases’ in MacOS. There are a few more things to know about links, which I’ve mentioned further below.</p> The Archive and Project Folders🔗</a></h2> The ‘Archive’ folder is where your files will always end up, in a clean and organised format.</p> The basic way to organise your files is to keep them in project folders. That is, files that are part of the same effort are put into the same folder. And if you have files that are used in multiple projects, then you put them in a separate folder and use links.</p> You only need a project folder if that project has multiple files. However, if there will soon be multiple files for that project, or if you will be sharing that project (see ‘Public’ folders), then you should just create a folder for it.</p> Here are a few examples:</p> Files that are about filing taxes go into the ‘tax-filing’ folder.</li> A report goes into a folder with the name of that report. If you do multiple reports, then you could either create a ‘reports’ folder, or you could add ‘report’ to the beginning of the file name.</li> </ul> Sub-Projects🔗</a></h3> Within a project, there are often subprojects, or sub-tasks. Usually, you have a single file for each section, but if it grows enough, simply create a sub-project folder within the project folder, and put those additional files in there.</p> Public🔗</a></h3> When you have projects that require you to edit files before you share them with other people (such as generating a PDF from your Word file) you create a ‘Public’ folder within the project folder and store the exported files in here.</p> You can even change the end of the file name to reflect who or what it’s for. The most frequent use case is when you remove personal or company information from these files before you share them with other people.</p> One example is when you share something for internal review, and then share another copy to send outside for printing. In this instance, some printers will want the images and fonts to be given along with the file, or they may want it in a different format, so you’ll have ‘project.png’ file for internal review, and a ‘project-print/’ folder for the printer.</p> Another example is presentation slides that are presented to multiple people, or at different conferences — you wouldn’t want your slides to say ‘Welcome Mumbai’ for a talk that you’re presenting at New Delhi.</p> New-new-report-final.pdf🔗</a></h3> A simple way to mitigate this is to add ‘v1’ at the end of the file name, and change the number every time you create a new version.</p> Another way is to add the date at the end, and if you have more than one version on the same date, then you add a 1, 2, etc on the end.</p> If there are a lot of versions, and you’re struggling to keep track of them, you can create a changelog.md file, and write down the important versions, and the differences between them.</p> If the project is currently active, then you will place these new versions inside the same folder, but if you’re continuing the project after a long time or redoing the project completely, then you create a new project folder using the version or date scheme. That is, ‘project-v2/’ for your new version.</p> The Inbox and Active Files/Folders🔗</a></h2> The ‘Inbox’ is where unorganised and currently used files sit. Currently used files are files/folders that are organised, but which you’re currently using. Instead of moving them or keeping them in the ‘Inbox’ folder, you link to the actual files in the ‘Archive’ folder:</p> First, go to the ‘Archive’ folder, and right click on the file/folder you’re working with. Then, if you’re on Windows, select ‘Create Shortcut’, or if you’re on MacOS, select ‘Create Alias’, and select the ‘Inbox’ folder or move the newly created link to the ‘Inbox’ folder yourself.</p> When you’re done with a link, you simply delete the link, and your actual files will remain in the ‘Archive’ folder.</p> One example for active files is your taxes folder: it will remain in the ‘Archive’ folder for most of the year, except when you start doing your taxes. When that time comes around, you link to it in the ‘Inbox’ a few days or weeks in advance, and start working on your taxes for the year.</p> Inbox to Archive🔗</a></h2> You have to take care to periodically go through your inbox and organise your files.</p> If the file/folder doesn’t have any more use, then simply put it in the trash bin.</p> If it’s a link to a folder in the archive and you’re no longer using it, then delete the link. Your actual files will still be there in the ‘Archive’ folder.</p> If the file/folder belongs to an existing project, put it into that project folder. Don’t just dump it in, but name it properly, and put it into a sub-folder if required.</p> If the file/folder doesn’t belong to any project that you can think of, then create a new folder for it, or simply rename it according to that project.</p> Ideally, you should do this every day and set a reminder for a specific time. If you did very little file juggling work today, then that’s great — it will only take you 5 minutes. If you have a lot of files to organise, then you should do it today, before the pile gets larger. If you’re especially tired today, then you can postpone your reminder to the next day, or for a different time.</p> Integration with System/File Manager🔗</a></h2> I recommend deleting your ‘Downloads’, ‘Videos’, ‘Pictures’ and ‘Desktop’ folders, and creating them anew as links to the ‘Inbox’ folder. There are two main reasons for this:</p> First, the ‘Downloads’, ‘Pictures’ and ‘Videos’ folder frequently get new and unorganised files dumped into them from various apps such as the browser and screenshot tool.</p> </li> Second, it’s easier to access active files/folders from the desktop or any of the other folders, because lots of file picker dialogues will default to these.</p> </li> Also, if you use desktop icons you’ll have them easily accessible, or you could skip that if you don’t like them.</p> </li> </ul> Similarly, I recommend deleting the ‘Documents’ folder and creating a new link pointing to the ‘Archive’ folder. You’ll be able to quickly select it in any file choosers, and it will appear at the top of your main folders list in the file manager.</p> Easy Backup and Transfer🔗</a></h2> One easy benefit of this system is that you know, in a general sense, where all your files are, and you only need to backup/copy these two folders to get all your files wherever you want.</p> Links for Various Platforms🔗</a></h2> Windows (11)</a></p> If you use ‘Send to Desktop (create shortcut)’, remember to link the ‘Desktop’ to your ‘Inbox’ folder.</p> </li> macOS</a></p> Try the Option-Command with drag method.</p> </li> Linux - GNOME Files (Nautilus)</a></p> I’ve confirmed that the alt+release method works in version 42.2.</p> </li> Linux - KDE Dolphin</p> It appears you can simply right click on empty space, and select ‘Create New’ then ‘Link’.</p> Source: r/kde</a> (See the comment by throwaway6560192, and the reply by Trollw00t)</p> Let me know if you find or know any other ways. Dolphin might also have a drag+alt option to automatically create links.</p> </li> Linux - Terminal</a></p> Alternatively, you can have a look at man ln</code>. The basic form is ln -s <file/folder> <new link></code>. Remember to use single quotes around the file/folder and new link names.</p> </li> </ul> Resumé 2023-04-23T16:37:40+00:00 Hi! I try out (or note down) design concepts almost daily, and I love reading books, as well as learning about new things. Streamlining systems and making things work (or theorising how to) is what I enjoy most. Paired with my knowledge of software engineering, this makes me an ideal candidate for working with software teams.</p> Skills🔗</a></h2> Figma, Adobe XD, Penpot </div> </div> </div> </div> </div> </div> </div> Illustrator, Inkscape </div> </div> </div> </div> </div> </div> </div> Wireframing, Sketching </div> </div> </div> </div> </div> </div> </div> Photoshop, GIMP </div> </div> </div> </div> </div> </div> </div> Premiere Pro </div> </div> </div> </div> </div> </div> </div> Blender </div> </div> </div> </div> </div> </div> </div> HTML, CSS </div> </div> </div> </div> </div> </div> </div> Javascript </div> </div> </div> </div> </div> </div> </div> </div> Work Experience🔗</a></h2> UI Designer/Graphic Designer</h3> Organic Kitchen, Gurugram February 2021 - May 2022</p> Along with various design work, including website and app screens and assets, I took the initiative to completely revamp the UX and UI of their primary subscription offering (see portfolio for more).</p> </li> Packaging/Graphic Designer</h3> Stylo Media, Kolkata February 2020 - June 2020</p> Designed packaging and graphics for ITC, using feedback and discussions with key stakeholders.</p> </li> Junior Designer</h3> NewsClick, New Delhi June 2019 - July 2019</p> Designed video thumbnails and edited footage for YouTube.</p> </li> </ul> Education🔗</a></h2> B.A. in Visual Communication Design</h3> Whistling Woods International July 2017 - July 2020</p> Excelled in the UI/UX and Web Design courses, and topped the Typography subjects, due to my eye for detail and my software skills.</p> </li> </ul> Extra-Curricular🔗</a></h2> Co-Lead Designer</h3> WWI Cricket League (May) 2018 Whistling Woods International, Mumbai</p> Took on leadership of design team and helped junior volunteers with using software to effectively complete their work.</p> </li> Co-Lead Designer</h3> Celebrate Cinema (September) 2018 Whistling Woods International, Mumbai</p> Shared leadership and bulk of design work with fellow design student for inter-college event with outside visitors.</p> </li> Designer</h3> Celebrate Cinema (September) 2017 Whistling Woods International, Mumbai</p> Joined the small team to help with graphics and installations.</p> </li> </ul> Get in touch!</a></p> djot 2023-04-23T15:35:14+00:00 EDIT: Whoa! Inane mind dump ahead!</em> Just check out the post on why I like djot</a>. I’m keeping this link for something to at least laugh at, and to build a habit of not breaking links.</p> I was reading an article by matklad</a> and I realised the formatting looked a lot like the default Asciidoctor output, so I went hunting around for how he built his site and found an article on markup formats</a>. Turns out djot</a> is a really nice format, which includes some interesting ideas from asciidoc as well as markdown.</p> Sadly, the tooling around it is quite limited. Current implementations include one in Javascript, another in Lua, and a third in Rust. And the syntax reference link at djot.net</a> seems broken.</p> The Javascript implementation is the current focus, while the Lua one is the first (that may be phased out), and the Rust one is unofficial, with a single link in the djot.net</a> page and no other mention.</p> I think all three allow for creating an ast, so it should be easy to work them in with other tools, but it’s still a fair bit of work (for me) to set up a static site or generate other documents from it.</p> Maybe it’s a good reason to really get into Javascript (Rust is a bit overkill), although the hexo static site generator has an extension for it, and other Javascript ones like 11ty should also be able to easily plug it in.</p> Alternatively, just use the cli given by djot.js to output the ast and manipulate it in any language, then feed it back into djot.js or pandoc. Even the html output can act as an ast of sorts if you’re already familiar with it. Maybe I’ll try that, but it’s still a lot of work (as a non-programmer) to replicate everything that static site generators and other tools can do for you.</p> Again, sorry for that. Please check out the post with some actual content</a>.</em></p> Static Site Build Tool 2023-04-20T23:34:47+00:00 I’ve just been thinking of what it would be like to have a static site build script. You would have dependency management, parallelisation, task runners/commands, and access to all sorts of (cli) tools (including your own scripts and binaries).</p> EDIT:</strong> soupault.app</a> might be the way to go. It lets you run any cli tool and use it in your site building, as well as a few other cool things.</p> Prior Art🔗</a></h2> Some similar tools already exist in the form of mkws.sh</a> and sss</a> (inspired by mkws), but my idea is a bit different — you use a build tool to stitch everything together, as opposed to a shell script, which can easily track which files need to be rebuilt, gives you simple commands to run, can (usually) easily perform parallel computation, and is quite easy to extend. Plus, I discovered you can use python as the shell in make. And I wouldn’t really want to use pp</a> — it’s a bit cumbersome.</p> Templating🔗</a></h2> I’d prefer it if pp used a cleaner syntax like {{ shell }}</code>, which makes inlining so much cleaner, and it handles indenting better as well, which some file formats really care about. I’d also like to have the option to customise which shell to use, since I’m more familiar with fish shell — there is absolutely no reason to use (d)ash for a personal site. Update: turns out it’s quite easy to make your own templating engine in fish shell</a>!</p> Otherwise, you could always use a cli templating engine like j2cli</a>.</p> Going through the Pop!_OS package repository, there are a lot of cli html templating engines, such as ace, amber, cl-lml2, and aft.</p> Build Tools🔗</a></h2> The build tool can also be anything that you like — I like something like make, tup</a> or redo</a> since they integrate with the shell pretty well, and there’s a lot of file management in there, plus the shell makes excellent glue code. Otherwise you could use something like meson/ninja</a> or shake</a>, if you want something really</em> powerful. Actually, shake might be a good bet if you know haskell, since (I think) you can plug in other libraries for each step, to make a much more cohesive and well-integrated program. There’s even overlord</a> for a (common) lisp build system, or buck2</a> if you want somethind industrial grade^{TM</sup> (that’s a joke).</p>} NOTE:</strong> If you’re using make, the .ONESHELL</code> directive runs the steps in a command in the same shell instance, otherwise make runs each one in a separate shell.</p> Authoring🔗</a></h2> You can use any file format you want for authoring, including the dialect of whatever markup language you choose. Some interesting languages are typst</a> and djot</a>, although typst doesn’t have HTML output yet (as of the time of writing this article; if you look at the design of typst, the pdf output, and the github issues, however, you can be sure that it’ll be really solid). I used to really like [asciidoc][asciidoc], but the tooling around it is a bit limited, so you need to know ruby/java to extend it, which is why I didn’t get around to having a blog for bloody ages. Use a common static site generator if this is your first time, and read through the docs, examples and discussion — you can do almost anything you want and more. It might help to start with a test blog, where you just write down random thoughts and articles, without actually deploying it anywhere. Anyway, rant aside, the point is that there’s some really cool markup languages out there.</p> Front Matter🔗</a></h3> You could use a different front matter format, or no front matter at all! Let your site builder handle the rest automatically! Maybe read it out from the file system. Maybe with a git hook that gets dates from git. Maybe some other step that creates file hashes and stores dates in a db? Maybe a prompt for metainformation about unknown files that gets saved in a db.</p> Content Layout🔗</a></h2> You could adopt a structure where you dump everything into the content directory, and if there’s a build step for that file (type) it gets processed according to the build step, else it’s copied directly to the build directory.</p> Some (most?) build systems even prioritise specificity when it comes to applying a build step, so you can set certain files (or classes of files, based on the file name) to use custom processing/templating. You could just rely on ordering, otherwise — simply place the more specific ones higher up, and the files it doesn’t match will get passed along to the more general rules, while the ones you want to treat specially are caught by the more specific rule at the top.</p> Development and Testing🔗</a></h2> For serving the pages live while you develop and test, you can plug in something like miniserve</a> (to serve files on your device and local network), with entr</a> (to automatically rebuild on file change) and live.js</a> (injected into your html pages for auto-reload).</p> You’ll need to set up your site builder to use relative paths or set the url to be the local ip used by miniserve 1</a></sup> or your preferred dev server in order to preview the links locally, otherwise it would take you to your production site.</p> ^{1</sup> miniserve displays a list of ips, but you could also find out by running ifconfig \| grep 192</code>. If you use ifconfig</code> use the second ip starting with 192.168</code> and add :8080</code> at the end. miniserve tends to use 8080, but you might need to change it if it says something else.</p> </div>}You could even use caddy</a> or some other server thing. There’s actually plenty of them — especially in the Go and Rust space. You can even use a python one-liner — I think</em> it’s python3 -m http.server</code>.</p> In fact, caddy seems to have markdown rendering and template evaluation. Dang. That makes a great development environment, although it might be a bit overkill, and it will probably cause some config duplication.</p> Alternatively, you could write your own tool to create a file server that works as expected — it would automatically serve index.html files from directories, and edit the base url in internal pages to point to the local network.</p> Image Optimisation🔗</a></h2> You can add build steps for most images, where they are optimised for file size and converted to multiple (display) sizes. Multiple display sizes directly affect resolution and therefore the final file size, and the browser can often decide which one to pick if you simply list all of them in a figure tag (or something like that).</p> Using this entire system gives you the freedom to plug in all sorts of things and create a system that aligns with your workflow, instead of tying you to the assumptions (such as markdown authoring) of the static site generator.</p> You will, of course, have to edit your templates to use the processed images. You can use srcset</code> attributes in img</code> tags, or use a figure element, and the browser will automatically pick the most appropriate image.</p> See the mdn web docs article on responsive images</a> for a comprehensive guide.</p> CSS-Tricks also has a great article on reponsive images</a>.</p> Content Templates🔗</a></h2> You can make content file templates that you can instantiate with a simple new</code> command. This is especially useful if you’re using custom front matter or special pages, which you might forget about. For example, if you’re authoring files in markdown, then you could store some template markdown files, like blog.md and tutorial.md, and then use build-tool new blog</code> or build-tool new tutorial</code> to create a new post using the given template.</p> HTML Processing🔗</a></h2> You might want to edit the generated HTML for your pages, even to a small degree where you replace a span with a div, or the other way around.</p> One tool I’ve found xmlstarlet</a>, which can structurally edit xml files, and has some amount of praise around the internet.</p> Alternatively, xml2 2</a></sup> converts XML/HTML to line-oriented formats that can be manipulated with the usual Unix tools, which frankly sounds exciting. (A very similar tool for json is gron</a>. You should check it out if you already know the unix tools.) Additionally, a github user called dbohdan maintains a list of structured text tools</a>, which includes some xml tools that could be useful.</p> ^2</sup>See xml2 in the Ubuntu package repositories. Website available on archive.org</a>.</p> </div> You could also use a mardown converter that lets you hook into it’s HTML generator and create custom HTML output. I don’t know of any such tool yet, but it could expose the parts of the structure as variables, which you could feed into a template.</p> Documentation and Help🔗</a></h2> Getting this method to really work for people would require some good documentation and examples to accompany it, because it’s all about customisability and control, which will require a lot of research and experimentation that could prohibit people from developing the site they want if the information is not available up front. This includes a list of tools, how to use them, best practices, common issues, a public forum or chat (like Zulip 3</a></sup>), and more.</p> ^3</sup>Zulip allows you to make some chats visible to everyone on the internet, regardless of whether they’re signed up and part of your organisation or not. I believe this is a very important step for reducing friction for new users. See the oilshell/oils-for-unix</a> project for an example.</p> </div> A good documentation project around this system should allow anyone to easily create their own site builder in a programming language of their choice (except, perhaps, for a good parallel build system). And then they could contribute further to the documentation. Maybe. Is there a general website covering different static site generators and how they work? That might be the place for such documentation. Maybe link to good shell scripting practices as well.</p> How Static Site Generators Work ft. Zola 2023-04-19T00:26:05+00:00 This is a general guide about how static site generators work, using the Zola static site generator as an example, with a sprinkling of why they are organised this way. Other static site generators have the same requirements, and generally use the same ideas and structure, so this knowledge should help you get started with any static site generator.</p> This post will be easier to digest if you understand the difference between static and dynamic sites, HTML and CSS, text editors, and the terminal. Also, follow the Zola installation instructions</a> so that you can follow along with the examples.</p> NOTE:</strong> Please don’t write the files as presented in this post for an actual blog/website for others. One reason is that I’m only putting partial HTML (it works, but it’s a good way to make a terrible site), and I’ve also skipped on some other more advanced topics. This post only explains how a static site generator brings everything together.</p> Structure🔗</a></h2> Let’s get right into it. The basic folders a static site generator needs are as follows:</p> content</li> static</li> templates</li> public</li> </ol> The content</code> folder is meant for the posts you write. Zola and other popular generators use markdown</a> for writing, and then these posts are processed before being placed in the public</code> folder, using roughly the same file and folder structure. They usually also include some more advanced features that go beyond markdown.</p> The static</code> folder is for files that are to be served as is, without any modifications. This includes images and CSS files. These files and folders are copied directly to the public</code> directory. You can duplicate the folder structure from your content</code> folder and the files will then be placed in the same places under the public</code> directory, next to the processed files from the content</code> folder, if they have the same relative path. i.e. if you have the files content/posts/post1.md</code> and static/posts/post2.html</code> then your public</code> folder will have post1.html</code> (remember, files from content</code> are processed) and post2.html</code> under public/posts/</code>.</p> The templates</code> folder includes a bunch of html files that are processed along with a markdown file from the content</code> folder whenever you tell the markdown file to use that template, or according to some special rules so that you don’t have to specify it every time. Templates allow you to do things like putting a list of important links on every page, or creating a list of all your pages. To do this, they allow some special codes in them to access the contents of the folders and files in the content</code> folder.</p> Finally, the public</code> folder is where all the processed content is finally output for the “public” to view. This is where the “static” from “static site generator” comes in — they’re simply a bunch of static files, served as-is to anyone who visits your site.</p> Most generators also include a theme</code> folder where you can place “themes” from other people, which include custom styling (css) and templates to do most of the heavy lifting — all you have to do is write your markdown posts.</p> Other files and folders can also be included for various things. The config file is a common one, placed with the other folders, to control things like your website name, url, theme, etc. The website url is used when generating the paths for links, amongst other places.</p> Getting Started🔗</a></h2> The easiest way to get started in Zola is to create an index.html</code> file within the templates</code> folder. All you would need to put is <h1>Hello, world</h1></code>, and you’re done.</p> If you run zola build</code> and check the public</code> directory, you’ll see the index.html</code> file, which is copied as-is. Open it in your web browser to see what it looks like (kind of ugly, unless that’s your taste). Open it in your editor to check that it’s actually copied templates/index.html</code> as-is.</p> The templates/index.html</code> file is required because every website needs an index file to start, and markdown files can’t be processed without a template.</p> The _index.md</code> file is not required because there’s no reason to edit it often, which means that there’s little benefit to writing it in markdown, so Zola simply assumes it exists.</p> A cleaner way would have been to accept an index.html</code> file in the static</code> folder, since you only need Zola to copy it as-is, but Zola has (rightly) assumed that there is no reason to do that, so they never check for it.</p> Authoring Pages🔗</a></h2> Like I said above, a markdown file requires a template for it to be processed. Zola automatically applies the templates/index.html</code> file to the (automatically created) content/_index.md</code> file, and any other pages are usually assigned the page.html</code> template, unless you specify otherwise.</p> So, the first thing to do is to create a page.html</code> file inside the templates/</code> folder. Within that file, we enter the following:</p> <</span>h1</span>></span></span>{{ page.title }}</</span>h1</span>></span></span> {{ page.content }} </span></code></pre> The text between the braces ({{ }}</code>) are the special codes that I mentioned earlier.</p> When the page.html</code> file is processed with a markdown file, it is given access to parts of the markdown file using the page</code> variable. The page</code> variable has fields called title</code> and content</code>. Our page.html</code> template file puts the page title inside a heading tag, then dumps the rest of the page under that.</p> Now, we can write our first page in the content</code> folder. Choose a name for your file. We’ll choose first-post.md</code>, and within it, we’ll write some text:</p> Try to write your own title and text, so that you can see Zola respond to your wishes.</p> +++ title = "My First Post" date = 2023-04-19 +++ </span>Hi, this is my first post! </span></span></code></pre> The section between the two sets of plus symbols (+++</code>) is known as the frontmatter. Different sites use different styles for frontmatter. The frontmatter is used to specify basic information about your post, including some custom information you can pick for yourself. The title field is what is accessed by {{ page.title }}</code> in your page.html</code> template, and everything outside the frontmatter is the content, accessed by {{ page.content }}</code>.</p> If you run zola build</code>, and open the public</code> folder, you’ll see a first-post/</code> folder, within which is an index.html</code> file. This is done because opening first-post.html</code> would show the .html</code> at the end of the url, which people might find ugly because they’re not used to seeing it, and it’s something that a visitor to your site doesn’t need to know. It works because whenever the browser opens a folder on a server, it automatically shows any index.html</code> file within that folder. This will not work when opening a folder on your computer. In that case the browser shows a list of files in that folder.</p> If you open first-post/index.html</code> in your editor, you’ll see the following:</p> <</span>h1</span>></span></span>My First Post</</span>h1</span>></span></span> &</span>lt;</span></span>p&</span>gt;</span></span>Hi! This is my first post.&</span>lt;</span></span>&#x</span>2F;</span></span>p&</span>gt;</span></span> </span></code></pre> Open the file in your browser to see exactly what it’s doing. page.content</code> has basically created the text <p>Hi! This is my first post</p></code>, and Zola makes sure by default that random text is not converted into HTML elements, otherwise it might mess up your page.</p> To correct the issue, edit your page.html</code> file in the templates</code> folder. Change {{ page.content }}</code> to {{ page.content \| safe }}</code>. The safe command tells Zola that page.content (or whatever comes before the \|</code>) is properly formatted HTML, and is thus safe to show as is.</p> Run zola build</code> again and check the file in your editor and the browser to make sure that everything is working. Your editor should now show the following:</p> <</span>h1</span>></span></span>My First Post</</span>h1</span>></span></span> <</span>p</span>></span></span>Hi! This is my first post.</</span>p</span>></span></span> </span></code></pre> Feel free to create a second post to test it out further.</p> Static Files🔗</a></h2> The static</em> folder is a good place to put your style.css</code>. Just put body { background: cyan; }</code> to test it out.</p> Remember to edit your template file so that it links to the CSS file:</p> <</span>link</span> rel</span>=</span>"</span>stylesheet"</span></span></span> href</span>=</span>"</span>../style.css"</span></span></span>></span></span> <</span>h1</span>></span></span>{{ page.title }}</</span>h1</span>></span></span> {{ page.content \| safe }} </span></code></pre> Run zola build</code> and refresh the browser page to review your changes.</p> Actually Using Zola🔗</a></h2> I explained things using the slightly cumbersome way so you could see the things I explain for yourself, and I omitted several other features that were not necessary to explain the main components.</p> The first thing to know is that zola serve</code> creates a local url that you can open in your browser, and whenever you save changes to any of your files, Zola will refresh the page and serve any new pages that you create. You don’t have to run zola build</code> and manually refresh the page, so you can focus on simply editing your website while Zola does the rest of the work.</p> Kinds of Magic 2023-04-18T15:45:50+00:00 This is a musing about apenwarr’s post</a> on AI and magic, and related things. It’s more of an idea I had related to it.</p> As I was going about my day, I just thought: I thought “this is about interfaces”. There are good interfaces, and there are bad interfaces. And so, there are good kinds of magic, and there are bad kinds. Sometimes, the magic will transport you back home from work in the blink of an eye. Inside a wall. Not good. But there is good magic as well, so it’s okay.</p>

Bean markup

2024-03-13T23:56:12+00:00

Bean is an extensible markup language, with generic constructs for delimiting and marking up text, as well as syntax sugar for commonly used markup, such as emphasis, lists, and tables.

Bean borrows from the tradition of Markdown, yet is more obviously influenced by djot and AsciiDoc.

Djot</a>

AsciiDoc</a>

Markdown</a>

NOTE: Bean doesn’t have an implementation. This is just an idea in my head right now.

The other formats🔗</a></h2>
Markdown suffers from being a mix of plain-text email conventions instead of a fully considered specification, and thus has many complexities, inconsistencies, and surprises. The author of CommonMark and djot has already explained these issues in ‘Beyond Markdown’.
Beyond Markdown</a>
While I was initially enamoured by AsciiDoc and all its features, I eventually realised that it has a lot of complex syntax, which makes it hard to learn and use, and even harder to port.
Djot is the format I find the most appealing, though it has made some choices that I believe could be done better. Djot’s syntax isn’t completely fixed yet, but I obviously can’t resist dreaming up my own format.
Typst is another format that I quite like, although it’s currently made for PDF output, and includes a whole new scripting language.
Typst</a>
MDX is another format that I like, but just for the component system, because it’s still a Markdown dialect.
MDX</a>
Rationale 🔗</a></h2>
The first factor that led me to devise another format was my desire to create and use custom markup elements that conform to my preferences.
Bean includes 

concise and regular markup,</li>
a general syntax that is equal to XML, except with reduced tag soup,</li>
convenient syntax sugar for common elements,</li>
plain text readability,</li>
and a way to declare custom elements.</li> </ul>
Terms 🔗</a></h2>
I want to clarify some terms before I continue, which I have borrowed from HTML, due to my familiarity with it.

Element: An abstract ‘part’ of the document, identified with tags and delimiters. </li>

Tag: A declaration, within the document, of an element, its type, and optional or required attributes. </li>

Delimiter: Marker for where an element begins or ends. </li>

Block (Element): A ‘block’ level element, usually delimited by blank lines. Examples include paragraphs and lists. </li>

Inline (Element): An element that usually occurs within a line of text, such as a link or emphasised text. </li> </ul>
Begin🔗</a></h2>
Paragraphs 🔗</a></h3>
As in Markdown and the rest, a block of text delimited by newlines is a paragraph, with line breaks converted to spaces.
`A paragraph. Another paragraph. </code></pre>`Other blocks, and tags🔗</a></h3> Bean uses square brackets to tag a block. [tagged-block] This block is tagged as a `tagged-block` element. </code></pre> Tags can also have options for the element, such as the language for a verbatim block. [verbatim :language bean] This block represents Bean markup. </code></pre> Multi-line tags🔗</a></h3> Tags can span multiple lines to aid readability. All the blocks below produce the same content. [tag :option1 value1 option2 :option3 value3] Block contents [tag :option1 value1 option2 :option3 value3 ] Block contents [tag :option1 value1 option2 :option3 value3] Block contents [ tag :option1 value1 option2 :option3 value3 ] Block contents </code></pre> Nested blocks🔗</a></h3> A block-level tag within another block-level tag indicates that it is nested. “Within” is defined as not separated by a blank line. [parent-block] parent-block content [child-block] child-block content [parent-block] [child-block] child-block contents </code></pre> Indentation and whitespace🔗</a></h3> Bean ignores indentation and extra whitespace, unless it’s a verbatim block or a list. Whitespace at the end is stripped, and line breaks are collapsed into a space, unless there is a blank line, which breaks apart blocks. The two paragraphs in the following example produce the same content, regardless of their indentation. A paragraph that I am writing. A paragraph that I am writing. </code></pre> Fenced blocks🔗</a></h3> Block elements can also be delimited by two or more backticks. [tag] `` This is a block element. This is a second block within the block element. `` </code></pre> A fenced block defaults to a generic block, unless there’s a tag specifying otherwise. Fenced blocks can also be nested. [fenced-block] `` [nested-fenced-block] ``` nested fenced block contents ``` `` </code></pre> Fenced blocks can also contain blocks that are not fenced. [unordered-list] `` [list-item] First list item [list-item] Second list item `` </code></pre> Inline tags🔗</a></h3> Sometimes you want to mark up a part of a paragraph of text. A single backtick or more is used to do so. You can use tags within running text to mark inline content. A paragraph with an inline[tag] element. A paragraph with an [tag]inline element. </code></pre> The tag identifies it’s content using whitespace. If it comes after whitespace, it will apply to the content after the tag, if it comes after a non-whitespace character, it will apply to the content before it, and if it is surrounded by whitespace on both sides, it will not apply to any content. If you want to tag more than a single word, use backticks to create an inline fence and put your tag before the opening backtick, or after the closing backtick. A paragraph with a `tagged inline element`[inline-tag]. </code></pre> These can also use multiple backticks and be nested arbitrarily, though it is not encouraged. Similar to block tags, inline tags can contain attributes for the element. A paragraph with a `link`[link :target https://example.com]. </code></pre> Output: A paragraph with a link</a>. </div> Lists🔗</a></h3> This is the first of the syntax sugar, since using tags and fences for lists would get tedious very quickly. * List item * Another list item 1. First item 2. Second item . First item . Second item </code></pre> While they appear the same as Markdown at a first glance, we borrow list syntax from AsciiDoc and avoid the mistakes and limitations of list syntax in both Markdown and djot. Nested list items require extra list item markers for each level of indentation, and must share the same indentation as the first list item. * List item ** Nested list item * Second top-level list item * with running text (this is not a list item) * Third list item [hr] 1. First item 1.1. Part 1 of first item 1. 2. Second item (automatically numbered 2) 3. Third item </code></pre> Output: List item Nested list item</li> </ul> </li> Second top-level list item * with running text (this is not a list item)</li> Third list item</li> </ul> First item Part 1 of first item</li> </ol> </li> 2. Second item </li> Third item</li> </ol> </div> Notice how the bullet mark doesn’t create a new list item if it doesn’t have the same indentation as the first list marker. Djot navigates this by requiring a blank line before a nested list, while Markdown can cause unexpected issues and requires escaping. Tables🔗</a></h3> Tables are another construct that can appear with some regularity. Bean defaults to comma separated values under a table</code> tag, but you can specify your own separator. [table :header :separator ,] markup , rating markdown , 7/10 djot , 9/10 asciidoc , 8/10 typst , 9/10 </code></pre> Output: markup</th> rating</th></tr></thead> markdown</td> 7/10</td></tr> djot</td> 9/10</td></tr> asciidoc</td> 8/10</td></tr> typst</td> 9/10</td></tr> </tbody></table> </div> Headings🔗</a></h3> Bean accomodates for the title and three heading levels by default. Further heading levels are discouraged and require explicit heading tags. The document title uses four ‘#’ signs, the first heading level uses three, the second uses two, and the third uses one. This is based on the idea that higher level headings are more important, and should be more prominent in plain text, than lower level headings. #### Document title An introductory paragraph. ### Level 1 heading ## Level 2 heading # Level 1 heading </code></pre> Emphasis🔗</a></h3> While you could use a generic inline element for emphasis, bean provides custom delimiters to make it easy. A paragraph with emphasised text. </code></pre> Output: A paragraph with emphasised text. </div> Delimiters for emphasis can also be tagged: Some emphasised text[link :target https://example.com] in the paragraph. </code></pre> Output: A paragraph with emphasised text</a>. </div> Openers and closers🔗</a></h3> Djot has a neat construct for dealing with complex and nested delimiters: delimiters can have braces to indicate whether they are opening or closing delimiters. {Emphasised text.} {`inline ` fence`} </code></pre> Output: Emphasised text. inline ` fence</code> </div> This way you can explicitly say where the emphasis should end, instead of having to worry about escaping delimiter characters. Another cool thing (I think) djot does, is to use openers and closers with single and double ticks to specify whether they’re right or left quotes, though it usually infers them correctly. {"Hello, world"} </code></pre> Output: “Hello, world” </div> Meta-information tag(s)🔗</a></h3> A meta tag helps set document-level options and properties, along with a slightly better alternative to frontmatter. 1</a> ^{1 Frontmatter introduces a second language to markdown files, and breaks the usual flow of markdown, by moving the level 1 heading and even cluttering it a bit. </div>}#### Document title [meta :date 2049-01-01 :author "Pranab" ] </code></pre> A summary would be a similarly related element. It provides meta-information about the document, while not quite being part of the document contents. #### Document title [meta :date 2049-01-01] [summary] A summary of the document, to be used in listings and previews, but not when displaying the document directly. </code></pre> Conditional passthrough🔗</a></h3> Djot has passthrough blocks that take a format specifier, so if the export format matches the specifier, then the contents of the block are passed as is. This would allow writing raw HTML, for example, though there should be no need for that in Bean. Regular indentation/spacing.     [passthrough HTML]Indented by four spaces in HTML. [passthrough HTML] <ul id="document-formats"> <li>Djot</li> <li>AsciiDoc</li> <li>Markdown</li> </ul> </code></pre> Output: Regular indentation/spacing. Indented by four spaces in HTML. Djot</li> AsciiDoc</li> Markdown</li> </ul> </div> Waffle🔗</a></h2> NOTE: These are random unorganised and/or incomplete bits. Tag syntax🔗</a></h3> I’m not a 100% sure about the tag property syntax. These are the three main options I considered: [tag option1=value1 option2 option3=value3] [tag :option1 value1 option2 :option3 value3] [tag option1 value1 option2 true option3 value3] </code></pre> The last is the easiest to type, but I don’t feel like the difference is that big, plus having an indicator like the colon or equal sign can be quite helpful, and thus worth the extra character. I guess the second has the benefit that you won’t need to escape equal signs? Classes and IDs🔗</a></h3> [.big .red] Big red paragraph (has "big" and "red" classes) [#warning] This paragraph has the "warning" ID </code></pre> This is another concept that djot has. I’m not quite sure it’s necessary or even desired, and it injects a bit of HTML in some ways. Custom elements/tags🔗</a></h3> Roughly the same as custom components in MDX, except you use Bean tags instead of XML/HTML. I guess it would be implementation dependent, so there’s no real point of examples here, though if I were to require an extension language, I’d pick an S-expression language. I was imagining the API would be something simple like defining a function that takes in the tag contents and outputs HTML by manipulating child tags and text content. Bean as an extensible markup format🔗</a></h3> Bean is basically the same as HTML and XML, with some syntax differences, and a few added conveniences for authoring documents (such as the syntax sugar for lists). At a base level, it has tags, attributes, nested tags, and text content. An initial Bean compiler can just use the base tag and block/inline rules, and automatically convert them to HTML/XML tags. Here’s an HTML in Bean example: [ul :id "document-formats"] [li]Djot [li]AsciiDoc [li]Markdown </code></pre> Looking at that, I’m almost tempted to remove syntax sugar for lists. Anyway, the basic rules make Bean a decent document/data format, though the syntax will make it more or less suitable for various uses. Fences as code🔗</a></h3> Initially, fences defaulted to code if no tag was given, but then I thought that shouldn’t be default behaviour to avoid specialising too much for writing about programming. Cool features to consider🔗</a></h3> Namespaces to avoid custom tag collisions.</li> import <package> as <nickname></code> statements to avoid namespace collisions? Maybe in the meta tag.</li> Some sort of package registry and manager?</li> Default config file for all Bean files within folder.</li> Comments — probably using the djot method. Better than adding extra syntax sugar. Maybe a comment “tag” and/or attribute?</li> </ul> Table wrappers🔗</a></h3> I really dislike how tables break layouts if they stretch past the page width, so I’d like Bean to automatically insert a div.tablewrapper</code> around them, either by over-riding the default component, or creating a custom component. Details component🔗</a></h3> [details] [summary]This is the summary of this block Insert any ol' content over here, which will be displayed when the details element is opened. </code></pre> This is the summary of this block</summary> Insert any ol' content over here, which will be displayed when the details element is opened. </details> </div> Another option is to use fences, and make the first block the summary. [details] `` This block is the summary Any other blocks are part of the hidden content. `` </code></pre> Trying them out will give the answers. Inline tag nesting🔗</a></h3> Later tags should be nested inside earlier tags when they’re prefixed. [parent-inline-tag][child-inline-tag]content </code></pre> But what about suffixed inline tags? Just reverse the order? content[child-inline-tag?][parent-inline-tag?] </code></pre> Inline vs block elements/tags🔗</a></h3> Would it be okay to mark a heading or other block with a lone inline tag? [h4]My heading </code></pre> The h2 component would know this is a block, but how does the surrounding context know this? How do I prevent it from wrapping it in a paragraph? What about a suffixed inline tag? `My heading`[h1] </code></pre> Perhaps the wrapper checks its contents before deciding to be a paragraph, a div, or whatever the inline tag specifies as a block element. Or maybe it just errors out? Like, a paragraph cannot take a block element, but things like lists can. So the inline/block nature of the tagged element doesn’t quite matter, but it does matter in the case of a parent element that disallows block elements inside it. Perhaps, if there is only one child block element, it swallows the parent element? That seems like a bad idea. Simply erroring out is probably best. Block link syntax🔗</a></h3> Similar to that in gemtext: => https://example.com my link text </code></pre> Gemtext</a> Block links can be increased in size to improve the experience of tapping or clicking them, without disrupting any surrounding text. A dedicated syntax should encourage that. A details and/or aside element can be used to move large lists of links out of the way. Unknown blocks🔗</a></h3> Unknown blocks can be rendered with a label at the top, and the verbatim contents of the block. It could include a warning inside a prominent box to say (in the HTML) that it’s unknown. Probably emit an error and cancel building if the build is for production, though allow configuration to disable that. And log a warning for dev builds. attribute accumulation🔗</a></h3> djot allows accumulating attributes (for block only?). maybe using an & block to accumulate instead of nest? definition lists🔗</a></h3> how does asciidoc do it? djot requires loose lists for definition lists maybe this: : item - definition? : item continued - definition? </code></pre> i don’t think hyphens (at beginning of line) have any other significance. though maybe i want to keep it for hyphens. : item = definition : item continued = definition </code></pre> that should work, i think. and the =</code> sign carries some related meaning, like item = definition</code>. Web feed now live! 2024-02-09T12:26:56+00:00 AKA “RSS” feed, or Atom feed. Link to feed</a> Why use a feed?🔗</a></h2> Say you follow a few interesting websites, and they don’t post a flood of content, not too often, and not even on any schedule. If you regularly find yourself checking these sites only to find nothing, consider using web feeds. Web feeds allow you to see updates to your favourite sites in one place, with the option to view it in the same place, and even notify you of updates. How does it work?🔗</a></h2> A feed is a simple link that you put in a feed reader app, usually by copying it. Feed readers have varying degrees of functionality. At a base level, they should be able to list posts from all the people that you follow, with a link to the post on their website. Additional features include viewing the post in the app, which is fairly common, searching all feeds and posts, grouping them into categories, receiving notifications on updates, and more. What reader should I use?🔗</a></h2> Here’s a short list of readers to get started with. Feel free to research and find your own. RSS is Awesome</a> If you tend to consume content on a single device, use this for a free and simple reader with no sign-up and no ads. </li> Feed Reader</a> Sign up to sync across devices, so that you can check your feed anywhere, without ads of any kind. </li> Feedly</a> Feedly is quite big and well known, with apps for multiple platforms, at the cost of ads, sponsored content, and other limitations for free accounts. </li> </ul> Ironically, I hammered out the feed after I read a post by someone who doesn’t like feeds, despite not caring for them myself, just because I could. I even went through the effort of styling it with XSL, which was the main draw for me, honestly. Why someone doesn’t like feeds</a> Try djot instead of markdown 2024-02-03T19:34:38+00:00 Djot is a pretty cool markup format that contains the lessons learnt by the author of the CommonMark spec and implementation. I’ve mentioned it here and there, and thought I might as well write about it. Generic blocks and attributes🔗</a></h2> One of the coolest features is generic blocks, which are called “divs” and “spans” in the spec1</a>, as well as a method to add attributes to any element. ^1spec/syntax description</a> </div> ::: class-name A paragraph inside the div ::: </code></pre> Markdown would require HTML to do anything like this. In addition to divs and spans, attributes can be attached to anything using curly braces. Warning{.big .red data-type="warning"} </code></pre> The above markup will create a span with the “big red” class and the data-type="warning"</code> attribute. Again, markdown would require HTML to do anything of the sort. Now, when I say attributes can be attached to anything, I mean anything. {#custom-section-id} ## My heading {.important} An important paragraph, likely styled with big text. some bold text that's also red{.red} {lang='javascript'} ``` var answer = '42'; ``` </code></pre> Comments🔗</a></h2> Comments are solved in a very clever way. Attributes can have comments inside them: {.big .red % comment: red for warning % .important} </code></pre> The text between the percent signs is a comment. To have an independent comment, simply remove any other content from the attribute block. {% This is a comment %} </code></pre> Raw blocks🔗</a></h2> Another useful construct is raw blocks, which allow you to pass something into the final output as is, depending on the export format you select, without any escaping or processing. If I were exporting to HTML, and I wanted to have some specific HTML markup in the output, I could do the following: ``` =html <my-html-tag-soup /> ``` </code></pre> The inline version of the same is: Some `<my-tag-soup />`{=html} inline </code></pre> Try it out🔗</a></h2> Overall it’s a really cool format, and you can try it out now in the live sandbox! Live sandbox</a> If you like it, you can see if one of the implementations listed in the home page might suit your purposes. Djot home page</a> Flatpak 2024-01-29T20:55:13+00:00 Low network speeds and limited availability are a fact of life for me. I update my devices every 7 days, and the size of a single Flatpak package (around 350mb on the lower side) is often larger than the regular apt updates, if not comparable to updates that include Firefox, Chrome, Inkscape, and/or Linux. Perhaps it’s not fair to compare them, but these are my needs, and it’s a pain every time a developer chooses to release their package only on Flatpak. I will likely not use it, and certainly not update it for weeks or months. The team behind Flatpaks could have instead worked on tooling to smooth out publishing packages. Perhaps documentation for how updates are handled. Maybe include permissions/capabilities in package descriptions. They could have worked with maintainers. Instead they got nerdsniped into creating a whole package format and ecosystem that still suffers. They have to contend with managing permissions, poking holes through their sandbox, making sure people can’t poke through the sandbox, making it easy to build and publish packages, documenting all of these things, and more. Including relying on developers to maintain dependencies and security. I appreciate GNOME design otherwise, even though I use the terminal and tiling WMs, but this frustrates me. Ceci n'est pas Wordle devlog 2023-12-18T14:00:16+00:00 Bonjour! Welcome to devlog 1 of 1: why I made a Wordle clone (and then another), as well as some tips and design choices. (Version 1, with a static grid and a single input field for typing out your guess) (Version 2, with a grid of input cells, so you can type in letters directly in the grid) Try Ceci n’est pas Wordle</a>! (version 2) Here’s why I made it: basically, I was mad at a friend, and I didn’t want to just rant at him — I had to curse him in a nice way. After racking my brain for a day or two, I figured it out — I’d make him find out exactly what he was (a f***er, if you must know, since other words would be too long). After that I couldn’t resist sharing it with other people (I obviously changed the word), because it’s quite fun to share something I made, plus I could pick a funny or silly word that referenced the day we had, or a random conversation or event. (Btw, “ceci n’est pas” means “this is not”) Anyway, here’s some little things I learnt as I worked on my clone(s), in rough order of usefulness. Consider a custom keyboard or a single input🔗</a></h2> When using the current (v2) design, it requires adding in some special handling for some keys, so that the focussed input automatically switches back and forth, which can cause issues, because some keyboards (on Android, at least) don’t like sharing what keys have been pressed. The default keyboards work though (even on iOS). So if you’re facing issues with handling input, or if you want to make it really robust, either you make a custom keyboard with divs, or you use a single input with a ‘submit’ button. 5 letters (or less)🔗</a></h2> Longer than that starts to become quite hard to guess, and then your friends and family will just feel bad. It’s fine if you’re around to monitor and give hints though. One reason is that when you think of a word, you need to count out the letters, and it becomes harder as you go. I don’t think it’s that longer words are inherently harder, since they can give a chance to reveal more letters, but that might also contribute to the problem. Show letters in the grid🔗</a></h2> My first design had an input element for people to enter their guess and then it would add their guess to the grid above. This would cause confusion by having no response when trying to submit a guess, because it was hard to see that there were too few letters. Here’s how it looked: While there’s a counter at the bottom, it would either get covered up by the keyboard, or people would not think or realise that it updated. Here’s the benefits of the design: See your guess in context, before submitting.</li> Immediately see which letters are missing, and how many.</li> Fill in the letters you know. Don’t delete the whole word to change your guess.</li> </ul> </li> Use less space on the grid.</li> </ul> Set height and width for cells🔗</a></h2> This applies more to my initial design, which used div</code> elements instead of input fields. If you’re using divs to show the grid, then empty cells just disappear. Set a height and width anyway, so that it looks nice and consistent, instead of the (quite ugly) default style, which is too wide, and quite small (even if you increase base font size — you’ll have to change that as well). Add a start button🔗</a></h2> A start button at the bottom is nice, so that you can start the game without having to reach to the top of the screen, which is always awkward. Don’t add a border for keyboard references🔗</a></h2> There’s a minor issue in my version 2 screenshot: the keyboard references for the ‘enter’ key look like buttons, so some people try pressing those instead of the enter button on their keyboard. Final design🔗</a></h2> Give Ceci n’est pas Wordle</a> a try! Make your own🔗</a></h2> You can just copy the HTML, change the WORD</code> variable 1</a>, and then share it with someone! Download Wordle clone</a> Remember to pick a 5 letter word or less, unless you’re there to give hints. ^{1 look for const WORD = '<a-word>'</code> </div>} UI/UX Design Principles 2023-11-07T14:52:17+00:00 Some of the choices behind most of my designs. I can sometimes sacrifice these, based on context, but I adhere to them most of the time. Mobile first🔗</a></h2> Most users of any digital product are on mobile. Especially if it’s a website — even users of a desktop application will visit a website on mobile. Designing for mobile also helps figure out what is most important in a product. Also, it’s easier to spread out content from a mobile layout to a desktop layout, than to try to fit in the contents of a desktop layout into a mobile screen. Interactive area in lower half🔗</a></h3> Having interactive elements in the top half requires users to move a hand to the top of the phone, or to make awkward reaches with their thumb. Instead, I put buttons at the middle of the screen or lower. If the user scrolls down, buttons will also move up the screen. Large fonts🔗</a></h2> I use large fonts to accomodate for conditions with hampered vision, such as age, moving vehicles, walking, etc. This usually means 14pt or 16pt for body text. Clear labels🔗</a></h2> Icons can often have multiple meanings, which might not be obvious to some users, or might even have no meaning to some people. Large interactive areas🔗</a></h2> I make interactive areas roughly 44 pixels by 44 pixels or larger, usually with a minimum of 8 pixel gaps between them. This makes it easier to target for users, without accidentally selecting the wrong element. Consistent interactive element style🔗</a></h2> I try to have a distinctive style for buttons and links so that users immediately know what elements can be interacted with, and what elements are safe to select. Modern UIs nowadays often have a dozen different button styles, some of which even look like plain text. It sometimes feels like there is no system for what constitutes a button versus images or text. Dark mode🔗</a></h2> Using a website at night time, or in a dark environment, shouldn’t subject the viewer to (sudden) brightness, which can negatively affect their vision, their sleep, and more. For the same reason, I try to use warm colours1</a>, though people generally expect blue for interactions, and red for negative interactions. ^{1 Night light filters do the same, because of something to do with white or blue-ish colours. </div>}Slightly lowered contrast🔗</a></h3> 100% white text on a 100% black background can cause a “halation” effect for some users, which means it looks like a light pointed at your eyes, where the edges are blurry and hard to see. There might be some other issues with full contrast, but this is a good enough reason to lower it. Lightweight🔗</a></h2> Websites should be usable with low network conditions, such as being underground, or in a building. This can be achieved by only including necessary content, and optimising images and videos. For images, I compare file sizes for different formats. Generally, I use SVGs for simple graphics and illustrations, and PNGs or JPGs for photographs, though the AVIF format is supposed to be the best. A related idea is progressive enhancement, where you ensure a basic version of the main content is actually usable as is, and then build better UI/UX on top of that. This requires some understanding of HTML, and interacting with the developer. Content first🔗</a></h2> The content of the page should stand out. You can see it in my site design: in each page, the title is highlighted, and then it continues on into the body of the post. I even sacrificed the navigation bar on top so that the content had more space/prominence when the user first loads a page. Clarity over cleverness🔗</a></h2> I try to avoid clever designs, because some users will simply be confused. For example, it’s not really that obvious that you must scroll up (on mobile) to show a hidden navigation bar. Design Annotations🔗</a></h2> On screen buttons aren’t the only method of interaction. Keyboard shortcuts and touch gestures are not obvious from designs. Designs should include annotations for these things. While I don’t actually annotate things, that’s mostly because of no particular need, and I do consider them and explain them in writing. Accessibility for everyone🔗</a></h2> This ties into many of the points above: Everyone has “disabilities” of some variety at one point or the other. Injuries can reduce dexterity in the hands, moving vehicles can hamper vision and reading, and crowded environments impact hearing. Oh! That's cold! 2023-10-30T20:53:19+00:00 Low sci-fi speculative micro-fiction Oh! That’s cold! I suddenly felt little cold spots on my face. It was you, and you asked me to trust you. My gear is now off. Now we’re sitting outside, silently, thoughts racing, or blanking out, our hands intertwined; and this is nice, but I’m not sure if I’d do it again. It took a while to adjust after taking off the wear. My eyes aren’t watering anymore, but it still feels weird. Everything does — a bit. I don’t think I could do this again. I love you. The basic concept is a society where headgear is a thing, and people live completely in virtual/augmented space. Ekkas' 2023-10-17T21:38:26+00:00 Bridal accessories website design and live concept. See Live Concept</a> When I showed Dyme’s</a> to my mum and aunts, it turned out they’d been talking about a little bridal accessories business the other day, so we discussed it a little bit, and I just mocked up another website in the same vein. Like Dyme’s</a>, I tried to make something simple and easily achievable. The CTA here encourages calling because the deliverables are more complex, and it makes sense to work out everything. I also show the contact information separately, so that people can share it easily. The final versions of the two websites (this and Dyme’s) could use a separate share button as well. More Projects (Portfolio)</a> Dyme's 2023-10-15T09:43:48+00:00 My aunt’s cooking is better than the restaurants I’ve eaten from in Ranchi and Khunti (perhaps excepting Radison Blu). So I thought that her food should be shared with people, and this website design is a result of that idea. I even made an actual webpage that you should check out :D See Live Concept</a> I worked especially to make the idea achievable, instead of a fancy restaurant menu or dashboard. You can get a better understanding if you scroll through the website concept</a>. The site design is super simple, things are operated by email, and I put a lot of thought into the overall system, such as the number of seats and the waitlist. I’ll probably write about it in more detail in a separate post. More Projects (Portfolio)</a> Links 2023-10-06T11:44:15+00:00 The contents of this page have been moved to “Bookmarks”. Bookmarks</a> The term better conveys what the page is, and avoids confusion with Linktree-style ‘bio’ links. About 2023-09-26T14:46:13+00:00 A brief introduction to me and the site, including tips on how to use it (the site, not me). About Me🔗</a></h2> Where me = “Pranab” (he/him). I have a formal education in design, with my current focus on UI/UX design, but I’ve also had an interest in computers since school, starting with Scratch and the like. Some of my interests include: Reading: especially (science) fiction, but I read a lot of blog posts on various subjects, though I find good tech blogs the easiest to find.</li> UI/UX Design: I’ve been looking into accessibility lately, and I quite enjoy a brutalist/swiss/functional style that relies more on text, though I try to infuse some popular aesthetics into it and play around with other styles.</li> Writing: that’s how I maintain this blog ;) I can write nonsense about whatever’s going on in my head, but also notes on things I read or ideas I have, as well as short snippets of fiction. I might write a book someday.</li> Shell Scripting: I’m fairly proficient in using the (Fish) shell and scripting, and I have a few small utilities I use here and there.</li> Programming: I have a decent grasp of most concepts, and I can navigate code well enough, even if I don’t know the language, but I haven’t written or maintained a decently sized codebase.</li> </ul> Contact🔗</a></h3> You can reach me via email or Mastodon1</a>. Email: pranabekka@gmail.com</a> Mastodon: @pranabekka@mastodon.social</a> ^{1 Mastodon is a twitter-like social media, except anyone can create a copy of it for their community, and all copies can talk to each other. </div>}About the Site🔗</a></h2> Built Using Zola</a> (Static Site Generator) Custom theme made by me. See choices below. “zettelkasten”-like no categories could add tags in the future?</li> </ul> </li> backreferences posts link to each other</li> </ul> </li> flat structure</li> </ul> </li> 8px gap between interactive elements (where possible) to reduce chances of tapping adjacent element</li> large-ish font size for people with poor eyesight</li> no “flashbang”: dark theme “flashbang” is when you suddenly load a bright page</li> might make a light theme eventually</li> </ul> </li> avoid full black/white to reduce glare effect (halation). not sure what other issues it might cause</li> low contrast, while preserving AAA contrast compliance, to accomodate users affected by high contrast, and to be dimmer for night time users (like me). i need to add a check and control to increase contrast.</li> show all posts in single page to make basic search easy</li> three heading levels inspired by edward tufte</li> not a hard rule, but easy to stick to</li> </ul> </li> number headings to match list of contents (“table” of contents)</li> rounded inline code to show start and end, especially when spanning multiple lines (on mobile)</li> higher contrast for smaller areas highlight colour is brighter when used in underlines, than the colour used in the title</li> </ul> </li> “logo” in header and tab title to make pages from site apparent</li> no custom fonts (imports) to save on page size and loading time</li> </ul> Site source</a> Usage Tips🔗</a></h3> index is a good place to search the site it shows all posts, though only title and first paragraph</li> </ul> </li> search using the following snippet in your search provider (remember to replace <search term></code> with what you’re looking for). site:pranabekka.github.io <search term> </code></pre> This works with all major search providers. </li> references to current page appear at the bottom other related pages appear in the body</li> </ul> </li> page source can be used to view history. if you’re unfamiliar with github, select the history icon near the top left. </li> </ul> Now Playing 2023-09-22T23:38:47+00:00 KU LO SA by Oxlade and Camila Cabello Listen on YouTube Music</a> (You’ll have to search for other platforms) I’ve been into whatever this genre is lately: Nigerian hip hop, I guess. It started with Wetin by Yarden, followed by KOLO by Ice Prince and Oxlade (amongst others), though I’ve liked Jamaican Patois for a while, and I’ve been listening to African-origin rappers from the US and UK for even longer. I even enjoyed the Patois bits from Top Boy a lot. My favourite bit is the chorus at the end. Makes me just play the song again. It’s simply so upbeat and makes me want to dance even while I’m walking along in front of other people. If you liked KU LO SA, you can also check out these songs: Wetin by Yarden</li> Toast by Koffee</li> soso by Omah Lay</li> KOLO by Ice Prince and Oxlade</li> </ul> Expose Product Team to Users 2023-09-18T20:42:10+00:00 Designers should be directly exposed to users (as opposed to only relying on reports from a dedicated user research team). Notes on article by Center Centre. Original article: Fast Path to a Great UX – Increased Exposure Hours</a> Amount of time spent with a user/users is more important than the number of research participants. At least two hours every six weeks is best, since it reinforces learnings. All team members (not just designers and developers) should be exposed to users to get the whole team on board. Field visits are especially helpful for initial exposure. Usability tests can be made based on pain points recorded from field visits. Don’t rely completely on remote testing. Observing users with competing products is also helpful. Field visits, as defined: “interview the user, uncover their goals and objectives, and then ask them to use the product or service to accomplish those.” Design Takeaways from Fabricio Teixeira 2023-08-17T11:47:33+00:00 These are my takeaways from “The musings of a designer and what he loves about design and what he’s learned along the way” (2023) by Fabricio Teixeira. I found it full of practical and actionable advice and I recommend you read the whole article yourself: lessons.design</a> Takeaways🔗</a></h2> I don’t quite understand what frameworks is about, and I understand and appreciate the points on simplicity and consistency a fair bit, but my biggest takeaway is on framing: You should present your idea as a starting quote, image, video, metaphor, or something to introduce the idea to your audience. See the emphasised points under the section on framing</a> for more. framework🔗</a></h3> have a model/framework for the product. to represent and understand the subject of the product. this should not change as the product evolves, and should keep the product consistent</li> identify and emphasise the core differentiating factor of your framework. make it incredibly obvious</li> don’t stick to preconceived notions of the problem/subject area</li> test concepts by making prototypes with exaggerated differences</li> make frameworks and get inspiration from beyond design</li> </ul> simplicity🔗</a></h3> if two things are similar, bring them closer, merge them, or separate them further</li> whitespace is for the eyes to rest and absorb things</li> descriptions with “and” or “also” suggest that the product is doing too much</li> words and writing can merge things together, make them shorter, make them less generic</li> </ul> framing🔗</a></h3> If you read the article a second time, you’ll see that he uses these ideas at the beginning of the page, as well at the beginning of every chapter. frame the product such that you present your reasoning and make it apparent to people</li> learn to see the rationale behind designs, to learn how to frame your own</li> you can frame a product with a conceptual word, an image, an animation, a video, a short sentence, a metaphor, a drawing, a framework, a datapoint, a quote</li> don’t just describe the layout of the product (which is already visible). describe how it will benefit users, how it reaches business goals, the reasoning behind it</li> framing gives people time, context and insight about the design, which makes it easier to understand</li> </ul> consistency🔗</a></h3> consistency means designing for the future — not just for present delight or use</li> consistency helps users as well as creators (team)</li> double check work to ensure quality, consistency</li> don’t pursue consistency in the face of context</li> the people you work with will last longer than the products you work on. joy in that is what lasts</li> </ul> Significant Whitespace Lisp Syntax 2023-07-11T04:39:16+00:00 I was browsing the web when I came upon the Rhombus language by the Racket team, and I couldn’t help but have a few thoughts of my own for a Lisp syntax with significant whitespace. The key difference in my idea is that it works quite transparently with s-expressions, and has some extra sugar and rules to help with parentheses elision. NOTE: Some knowledge of Lisp is assumed. NOTE: Elision (removal) rules only mean that there are ways for the computer to infer the position of parentheses. You can still use parentheses, as demonstrated later. Function Calls🔗</a></h2> The first word (symbol) in a line is a function call, and the rest are arguments, subject to variable expansion. This is an example of parentheses elision: you can elide (remove) the parentheses, since their position is inferred at the beginning and end of a line (not quite, see next point). my-func arg1 arg2 ; turns into: (my-func arg1 arg2) </code></pre> Sub-Expressions/Blocks (Functions as Arguments)🔗</a></h2> An indented line starts a sub-expression in the form immediately above it in the “indentation hierarchy”. So the automatic placement of parentheses is slightly more complicated — if the next line (expression) is indented, then the closing parenthesis is held off until a line with less indentation is encountered (or the end of the file). fun1 arg-x fun2 arg-n ; turns into (fun1 arg-x (fun2 arg-n)) </code></pre> fun3 fun4 fun5 ; turns into (fun3 (fun4) (fun5)) </code></pre> Inline Syntax🔗</a></h2> The above rules with significant whitespace might also be called “block syntax”, since it necessarily requires blocks that span both dimensions. The parentheses syntax may also be called “inline syntax”, since it can be written in a single line without changing the meaning (although it severely impacts readability). The two syntaxes can be mixed together to create more complicated forms. let ( variable value ) my-fun variable ; turns into (let ( (variable value) ) (my-fun variable)) ; which is the same as (let ((variable value)) (my-fun variable)) </code></pre> (You need not write it as shown above.) The following also achieves the same thing: let ( variable value ) my-fun variable </code></pre> Sugar: []</code> (for List of Lists)🔗</a></h2> To help create a list of lists, there will also be a []</code> reader macro (used like a function) that wraps its arguments into a list. let [] variable value my-fun variable ; turns into: (let ( (variable value)) (my-fun variable)) ; which is the same as: (let ((variable value)) (my-fun variable)) </code></pre> Here’s another example with a lambda. [] lambda (x) func x arg1 ; turns into: ( (lambda (x) (func x)) arg1) ; which is the same as: ((lambda (x) (func x)) arg1) </code></pre> Splitting Arguments Across Lines🔗</a></h2> If you must split arguments into multiple lines, a “splice” (reader) macro is available. (Another name might be more suitable, given the pre-existing splice macro — in Common Lisp, at least.) my-func arg1 arg2 arg3 @ arg4 arg5 arg6 ; is equivalent to (my-func arg1 arg2 arg3 arg4 arg5 arg6) </code></pre> Without the “splice” macro it would try to call arg4</code> as a function with the arguments arg5</code> and arg6</code>. Infix Syntax🔗</a></h2> While this goes a long way towards making lisp more palatable for some people, (maybe even appealing) there are two places where programmers from other languages expect infix syntax. Math🔗</a></h3> The first place infix syntax is often used is for (simple) math, for which the $</code> macro is provided. The $</code> symbol was chosen because it is used for indicating math in markup languages like LaTeX, Typst, and Kramdown (a feature-ful flavour of markdown). $ 1 + 2 + var / 7 ; turns into: (+ 1 2 (/ var 7)) </code></pre> Comparison🔗</a></h3> The second place where other languages use infix syntax is for comparisons in conditionals and loops. The check</code> or ?</code> macro can be used for this. ? my-var != your-var ; turns into: (? my-var != your-var) ; which is the same as: (not (eq my-var your-var)) </code></pre> Maybe infix math could also be allowed here? — just to make things easier for the kinds of people this syntax might appeal to. Benefits Over Other Significant Whitespace Syntaxes🔗</a></h2> This syntax might even be more appealing to some people over other syntaxes with significant whitespace for several reasons. Only spaces to separate arguments.</li> Only spaces to separate function from arguments</li> No colon for indented blocks</li> Consistent syntax (for both block and inline)</li> </ul> Getting rid of commas means that you no longer need to balance them. Lots of recent languages have taken to allowing trailing commas just to deal with that issue. Having no commas makes it easier to move things around. Furthermore, commas repeated the work that spaces were already doing. If whitespace is significant, then you might as well lean into it. Signifcant whitespace ++. All languages (that I know of) treat the first word as a (special) function call, and the rest are just keywords or arguments for that function call, so the surrounding parentheses for the arguments are largely unecessary. The command-line does this beautifully. We have now rid ourselves of all the superfluous parentheses (that a host of other languages also have, might I add), and made whitespace even more significant. In Python, a colon is required at the end of some forms like if</code>, else</code>, and for</code>. This is despite the fact that the content of these forms is already indented. So the colon is repeating work that is already being achieved by indentation. Furthermore, having tried some Python, I know for a fact that I would get annoying syntax errors for missing a colon in various forms. This syntax also has very simple and consistent rules, such that even if they are not explicitly mentioned, a user should get a grasp of them much sooner than other languages that have special forms and exceptions of all kinds. Essentially all language features reduce to “functions” and lists describing various things. (I say “functions” in quotes, because there are special functions and macros as well.) Only Lisp syntax is simpler and more consistent. Conclusion🔗</a></h2> We have a syntax with (even more!) significant whitespace, consistent rules, infix syntax and easy inline syntax, that should be more palatable to users of other languages, and easy for existing Lispers to learn and share. It might even reduce strain on Lispers’ pinkies. I Discovered Skribilo! 2023-06-29T10:19:10+00:00 Skribilo</a> is a way to interleave markup and scheme code, with very similar semantics to what I was envisioning in Lispy Templates</a>: It uses ,(</code> to evaluate code inside a markup block.</li> It uses square brackets (‘[…]’)for content blocks instead of quotes.</li> </ol> Skribilo actually supports multiple types of syntax, since it’s more of a framework for defining your own syntax. The syntax it uses by default is the Skribe syntax, which has its origins in LAML roughly as far back as 1999, as per this paper</a> by Kurt Nørmark. The Skribilo page</a> also mentions a lot of prior art and similar projects at the bottom, which might be interesting to look at. Here’s an example of a Skribe document: (define (skribilo . body) (ref :url "https://www.nongnu.org/skribilo/" :text body)) (document :title [I Discovered Skribilo!] :draft #t :date (make-date 0 0 28 10 29 06 2023 0) ;(nanosecond second minute hour day month year timezone-offset) (p [,(skribilo [Skribilo]) is a way to interleave markup and scheme code, with very similar semantics to what I was envisioning in ,(ref "@/lispy-templates.skribe" "Lispy Templates").])) </code></pre> At this stage, I think all it needs is a way to define syntax sugar (like # title</code> or - list item</code>), and it would be roughly on par with typst. PubNotes 2023-06-25T15:50:07+00:00 Superpowered “notes”: imagine sticky notes, and then imagine if you could add fancy things like images, links, videos, games, and more. Here’s the most basic version of a PubNotes app, where notes are called stories, and they just contain some text. Then PubNotes can add advanced things like the author, time and date, replies, and more! Now the notes include when you wrote the “note”, a count of replies to it, a list of who it was addressed to, and a list of what topics (tags) it belongs to. Basically, PubNotes is incredibly flexible. It’s like a piece of paper, along with any pen, pencil, or paints that you might need. Imagine you had a piece of paper: If you’re writing to yourself, you just write the core message, similar to the first example. If you were writing to someone else, you write their name at the top and your name at the bottom. If you saw something nice, you’d put an image on the paper. PubNotes allows you to do that and way more. This example is basically a social media application or forum! As you can see, PubNotes can be easily themed. And you can add even more things, like a title, a preview with only the first 80 words or so, the name of the author, bookmarks, and more. We could even turn it all into a video sharing platform: We even removed the like button to enable better discourse! Just kidding ;) NOTE: PubNotes is not limited to mobile, even though it’s not shown in the examples. PubNotes has a lot more potential that I haven’t yet mocked up or explained, in an effort to keep the introduction simple. NOTE: No more images beyond this point. You could create a platform for publishing and discussing books. Use tags to indicate the genre of the books. Use a different note for each chapter. Each new chapter could be a reply to the old one, to keep them all linked together, or you could create a more specific linking system. The rest is super easy to use. I’ve already displayed a social media/forum example, though I didn’t really explain much. PubNotes has all the features a forum might need. In fact, this whole thing began with the idea of making super-charged forums. Forum administrators can pin notes to the home page, and make categories that can also be pinned. In the example, “Hello and Welcome!” is a pinned note, and “Recent Notes” is a pinned category of sorts (It’s a special type of category). Users can organise notes into threads on specific topics, and they could even split them or interweave them. There’s a lot of potential! You could even put games into PubNotes. A simple example is knots and crosses. One user adds it to their note, make the first move, and sends it over to their friend. The friend replies to it, which automatically adds knots and crosses to their note, then they make their move and send it back. They just repeat this until one of them wins. The same framework could also be used for chess, dots and boxes, and other turn based games. Maybe you could put something like Pokemon! Imagine a whole monster collecting community built into a small social media platform. People would discuss all kinds of things, have melodramatic roleplay, maybe solve puzzle notes to gather monsters, perhaps create their own monsters and add them to the platform (with the help of moderators), and more. They could have topics threads for different types of monsters or weight classes. I’ll add more ideas as I come up with them or find them in my notes. Feel free to share</a> your own ideas as well! More Projects (Portfolio)</a> More on Noon-Flower (Game Idea) 2023-06-22T12:03:17+00:00 Just a summary of my motivations, inspiration, and the origin of the name (it’s random). See my first post on Noon-Flower</a> for an introduction. (Noon-Flower was previously called Wijo) Motivations🔗</a></h2> Multiplayer: For me, the main deciding factor for playing a game is if I get to play it with other people. The only one I play right now is Call of Duty on mobile, simply because I’m able to easily get online with friends. Co-op: I also don’t want to get into the highly competitive PvP games, because while it feels cool to dominate, it requires practice that takes a lot of time and their nature can often exclude people. I used to play Valorant and League at one point, for example, and I was at the point where I would do target practice every day. PvP is still alright, of course, but not the exclusive focus. Depth: While it’s nice to play Call of Duty with friends, I want something a little more varied sometimes. That’s why my concept is heavily influenced by Minecraft. I’d like exploration, crafting, NPCs, some building, and maybe quests. Extensible: I think the reason Minecraft is so compelling is that it allows you to create your own game, and it allows this along a smooth gradient. It can be as easy as creating a small base for yourself, or you could go on to make a large adventure game with custom dungeons, loot and gameplay mechanics. Free: My options for multiplayer games with friends can be quite limited, because I can’t expect anyone to buy games. Also, a Libre/Open Source game should allow further participation from the community. Frankly, that would be really cool. 2D, Pixel Art: This simply makes the game possible to create. 2D pixel art is easier to create, but also easy to mock up, sketch, prototype, and reason about. It’s effects on even generating ideas for a game should be exponential. Inspiration🔗</a></h2> Minecraft: I’ve mentioned Minecraft under the motivation points on Depth and Extensibility, but Minecraft is basically a game engine. It allows you to realise (a version of) nearly any game idea you have. CrossCode: I found the mechanical depth of CrossCode really cool, as well as some of the RPG elements, like the quests and characters/story beats. Their movement and parkour system is really cool, and I find the overall combat system quite good as well, even if I select upgrades pseudo-randomly. Why Noon-Flower?🔗</a></h2> It’s simple to pronounce and remember, and doesn’t have any specific meaning, which means I’m not bound to anything specific. Like, Minecraft is so much more than mining or crafting — it’s more building or auto-farming than mining for lots of people. While it’s supposed to be random and meaningless, I did imagine the game and it’s (potential) community developing a random obsession with some item called the Noon Flower. I was picturing bases, custom maps, maybe some magic, lore, art, and stories about some mythical/magical item. Noon-Flower (Game Idea) 2023-06-22T11:23:16+00:00 Imagine if Minecraft</a> were 2D — and top-down, instead of sidescrolling (Terraria, Starbound). Something like CrossCode</a>, but with building and more emergent gameplay. (Noon-Flower was previously called Wijo) There are two core ideas behind this: It must be compelling, and it must be tractable. A compelling game is something multiplayer that I can play with friends. Something that allows different kinds of gameplay. Something that allows you to own it. Something accessible. </li> A tractable game is something that can be achieved, even if I don’t have the skills (right now or ever). 2D pixel art should speed up ideating, prototyping, and the “final” implementation. </li> </ul> I think the key reason Minecraft is so successful is that it enables a gradient of game to game engine. You can just play the game as is, or you switch some of the toggles to make certain parts easier or harder. Maybe you add a few nice to have features to the game. Or maybe you change the game entirely</a> — you add grand structures, limit exploration, add new items with different effects, add new creatures with different abilities, and add a new magic system. That’s the power of Minecraft. So at an overall view, I want a base game, along with a system for scripting and adding custom content. You should be able to implement a puzzle game, a PvP game, maybe a shooter, an RPG, an MMO game (?), a roguelike, and more. Maybe a simple farming simulator as well. The base game will be open world, with procedurally generated terrain. I imagine people exploring and creating bases together. I imagine them visiting villages, towns and cities populated by new and interesting races. I imagine them raiding dungeons and fighting terrible creatures. I imagine players meeting creatures and accepting quests for interesting rewards. I recommend everyone to try out CrossCode</a>’s free demo, to see an example of compelling 2D gameplay that’s actually quite 3 dimensional. They have a very interesting parkour system, as well as a nice combat system. Ivy 2023-06-22T10:26:27+00:00 I thought that I was dreaming, when you said you love me. The start of nothing. I had no chance to prepare. I couldn’t see you coming. </blockquote> Listen to the cover by Indigo De Souza. While you’re at it, you could also listen to Kill Me. Started from nothing Oooh… I could hate you now It’s alright to hate me now </blockquote> Better Markup Headings 2023-06-19T09:50:55+00:00 Lightweight markup languages are designed in such a way that the markup looks like what is intended. Bulleted lists use asterisks or hyphens and emphasised text has asterisks or underscores around it. The headings, however, have a structure that highlights lower level headings over higher level headings. Instead, in a markdown file, the highest level heading should have the most hashes (‘#’), while the lowest level heading should have the least. Other lightweight markup languages should do the same with whatever character they use for headings. ###### Heading Level 1 (Document Title) This is the introductory paragraph of your document. ##### Heading Level 2 (Section Heading) This is the content of the first section. #### Heading Level 3 (Sub-Section Heading) This is the content of Section 1.1. </code></pre> Plain Text Data Structures 2023-06-18T20:29:28+00:00 This is a wild one, which stems from my education as a visual designer, as well as a regular terminal user. The gist of my idea is that there are many ways of representing data in plain text for easy use. This is especially useful in a terminal based workflow, but even basic users can adopt some of this in something like Notepad or any simple text editor. An Example🔗</a></h2> Around two or three years ago, I had a colleague trying to balance some accounts and she had a discrepancy between two different reports of the same accounts. I helped her by opening Notepad and just listing down the costs with each report in a different line. Then we just had to line up the matching costs and the odd ones out were easy to pick out. Here’s an example: 1050 | 100 | 250 | 320 | 1200 | 3200 | 80 | 20 20 20 | 1050 | | 250 | 120 200 | 1200 | 3200 | 80 | 60 | </code></pre> Here you can see that some costs were given as a single entry in one report but were split into multiple entries in the other, which made it quite hard to organise. Furthermore, the ordering of the entries also had to be matched up. Using this method it was easy to see what was missing, and she used it later on as well. Why Plain Text🔗</a></h2> You might ask why Notepad, or plain text in general. The answer is manifold: Editors for spreadsheets and rich text documents require several seconds or minutes to start up, which breaks your flow.</li> These editors also bog down slower computers further. Especially if you have several reports already open on a low-budget work computer. This also breaks your flow.</li> These editors have complex controls for aligning data.</li> Most of their features have no use for you, and in fact interfere with your work.</li> Monospaced text makes it easier to align and compare data.</li> </ul> Basically, you get everything you need, and nothing you don’t. Data Structures🔗</a></h2> Notes and (Draft/Personal) Documents🔗</a></h3> When you’re just writing down your thoughts, or a draft of your final document, write normal paragraphs as continuous lines, separate paragraphs with a blank line, and use a marker like ‘#’ or ‘=’ for titles. You can also use the other data structures in this page, to represent other kinds of data. # Note/Draft Title This is a normal paragraph that wraps across multiple lines. This is another paragraph, that also continues across multiple lines. </code></pre> Try out Markdown</a>, and the various applications</a> that can make note taking incredibly fast and easy across any device that you like. You can write and view these documents without any special app, and most of these apps (if not all) open in the blink of an eye. Tables🔗</a></h3> When representing table-like data, use a delimiter to separate each column and a new line to separate each row. The delimiter can be spaces and/or vertical bars, like the example above, or any other character, such as commas, tabs, colons, and more. Use spaces or tabs to align the columns properly. Choose your delimiter character based on what is least likely to appear in your actual data. In the above example it was just numbers, so I used spaces because there’s a huge spacebar to easily add spaces and visually separate the numbers. If you’re going to be using commas and spaces, try semicolons (“;”). Lists🔗</a></h3> Use a dash to mark the beginning of each entry, maybe with a blank line in between. Indent sub-lists to indicate that they belong to a parent item. - List Item 1 - List Item 1.1 - List Item 1.2 - List Item 2 - List Item 3 </code></pre> Task Lists🔗</a></h3> Task lists can often benefit from additional information. Mark done tasks with a ‘.’ to make them less prominent, or use an ‘x’ if that feels more intuitive. Mark important tasks with an ‘@’ or ‘#’ symbol, simply because they’re large and more prominent. - Normal task to do . Finished task @ Important task </code></pre> You can add date stamps at the beginning of a task to indicate when it should be completed, or when you created it, or when it was completed. - () No completion date . (Jan 15, 23) Completed on 15th Jan 2023 @ (Jul 21) Complete by 21st July! </code></pre> Have a look at todo.txt</a> for even more ideas and features. The benefit of it is that there are a bunch of applications that can make it easy to manipulate your data across devices. Choosing a Representation🔗</a></h2> Lists are actually very similar to tables. Take the following table for example: Chef's Special? | Name | Spiciness | Description | Cost No | Dragon-Glaze Salmon | Medium | Sweet and spicy glazed salmon topped with ... | 200 No | Fried Shrimp | Low | Crispy shrimp with cocktail sauce. Served ... | 300 No | Parmesan-Crusted Chicken | Low | Grilled all-natural chicken, creamy white ... | 250 No | Crispy Chicken Tenders | Low | Served with coleslaw, seasoned fries and H... | 320 Yes | Simply Grilled Salmon | Low | Seasoned with hickory-smoked sea salt and ... | 500 No | Fish & Chips | Low | Battered golden cod fillets served with se... | 300 </code></pre> The descriptions are so long they’re basically unusable (I’ve truncated them to avoid typing it all), and some columns take up more space than they need. Instead, you could represent it like so: Item Name Chef's Special? Spice Price Description ... Dragon-Glaze Salmon - Medium Spice 200 Sweet and spicy glazed salmon topped with ... Fried Shrimp - Low Spice 300 Crispy shrimp with cocktail sauce. Served ... Parmesan-Crusted Chicken - Low Spice 250 Grilled all-natural chicken, creamy white ... Crispy Chicken Tenders - Low Spice 320 Served with coleslaw, seasoned fries and H... Simply Grilled Salmon Chef's Special Low Spice 500 Seasoned with hickory-smoked sea salt and ... Fish & Chips Low Spice 300 Battered golden cod fillets served with se... </code></pre> Here, each row is separated by a blank line, and each column is separated by a new line. Empty fields are marked with a simple -, and additional lines before the blank line are part of the item description. You can also use a list, but this saves you a lot of typing, because you don’t have to add the dashes for each item and the spaces for indenting item information (price, description, etc). In fact, this is a sort of hybrid of lists and tables, and you can see how one can be transformed into the other. You can also mix it up with headings: # The Grill Dragon-Glaze Salmon - Medium Spice 200 Sweet and spicy glazed salmon topped with ... ... # Drinks </code></pre> Basically, you should think about how you’re using the data. Here’s the basic list format, if you were curious: - Dragon-Glaze Salmon - Not Special - Medium Spice - 200 - Sweet and spicy glazed salmon topped with ... - Fried Shrimp - Not Special - Low Spice - 300 - Crispy shrimp with cocktail sauce. Served ... ... </code></pre> It requires a dash for each row and column, as well as two extra spaces for each column. Additionally, it’s harder to scan quickly, because all the items are squeezed up next to each other — in the blank line delimited format (tables use delimiters!) you just skip to the line after every empty line to get the name of the item. What About JSON, YAML, etc🔗</a></h2> JSON is too verbose for typing out manually. In fact, YAML is quite verbose as well. These are primarly formats for transmitting data, and are more computer friendly than reading/writing friendly. If you expect to be using this data in a lot of places, and you don’t want to write a custom parser, then you can of course go with a more popular format. Conclusion🔗</a></h2> If you’re going to be typing out stuff for yourself, maybe for a small use case, then try using one of these formats, and/or even changing them for your own use case. If you have programming knowledge, you can also write simple parsers for them, which will allow you to manipulate them easily and even export them to other formats. Learn Kakoune</a>, (Neo)Vim</a> or Emacs</a> if you want even more power out of these plain text formats. They can allow you to interactively transform the data, instead of writing a parser the traditional way, and can enhance your general text writing and editing as well. Credits🔗</a></h2> Menu items copied from How to Make a Better Restaurant Menu (Pinterest)</a> only for use as examples. Typst Syntax 2023-06-17T11:26:09+00:00 I’ve mentioned Typst</a> here and there, but I just thought I should give it a proper mention. They’ve done a lot of interesting things to make it easy to write large documents. For this post, I just want to talk about the syntax. NOTE: Typst is currently in Beta, and the things I mention might change in the future, although the general architecture should be the same. Typst has three types of syntax (modes</a>): content, math, and code. Content is a lot like Markdown</a>, with headings, paragraphs, lists, links, and so on. Math is a way to enter formulae with all kinds of special symbols. Code is a little bit like TeX</a>’s macros, except they’re actually full-fledged functions in a specially created programming language. There’s a function to describe macros as well. When you start writing a Typst document, you’re in content mode. To enter math mode, you type a dollar sign and write out your formulae using math mode syntax. To enter code mode you use an octothorpe (‘#’) followed by the name of the function, and the arguments to the function. For example, #heading(level: 1, [Heading Level 1])</code> calls the heading function asking for a level 1 heading with the text “Heading Level 1”. Typst’s syntax is actually built completely on code. When you write out special syntax in content mode, it gets converted into code. Continuing the heading example, when you write = My Document</code>, it gets transformed into #heading(level: 1, [My Document])</code>. When you write a paragraph of text, it implicitly calls #para([Paragraph Content])</code>. When you write math like $ x + y $</code>, it gets converted into #equation([x + y])</code> (I think). And that’s the coolest thing about Typst’s syntax. This programming language allows you to do lots of exciting things: Create custom functions</a> that you can use in your documents.</li> Create/override syntax</a> that implicitly calls your functions, or any other Typst function.</li> Import</a> other Typst files, both content and functions.</li> Import arbitrary files</a>, such as JSON, CSV, or any plain text file.</li> Draw</a> arbitrary shapes. Functions for plotting and diagrams are also being worked on.</li> </ul> Typst’s biggest current limitation (for me) is that it only supports PDF output, but HTML output is in the works and should be ready in a few months. Along with that, I think they’ll include exporting an intermediate format, such that you can use Typst to calculate most of the layout and results, then get a structured representation of the resulting content, so that you can transform it into whatever you like. Additionally, Typst is not out of Beta, so things change nearly every month or so. However, you can already do exciting stuff with it, and I would encourage you to try it out. Start with the tutorial at typst.app/docs/tutorial</a>. Portfolio 2023-06-01T21:17:40+00:00 Hi! My portfolio is currently available as a PDF. You can reach out if you’d like to know more about any project. I’ll be including some of them on the website over time. More Ideas on CL SSG 2023-05-31T21:50:57+00:00 Following up on my initial post (CL SSG — Common Lisp Static Site Generator</a>), Coleslaw didn’t really work out (more below). Instead, I’m imagining a static site generator based on a build system, a typst-inspired language, and a simple server. Regarding Coleslaw, I had some bugs that I didn’t feel like going through, plus it loaded a lot of modules I wasn’t interested in (but not the incrememental build one?), and I didn’t feel like learning all about it. Even the preview didn’t work properly. So I just let it be. Zola gives me most of what I need anyway. I might give Coleslaw a try again later. I did look up some Common Lisp libraries, however. Overlord seems to be a good build system. It should get me incrememental and parallel builds. For the authoring and templating, I want to use a typst-like language. Templates will simply be functions that wrap the rest of the content. I wonder how I’d extract metadata. Perhaps a metadata function? Hunchentoot seems to be the most popular server, and it should be more than good enough. I simply need to serve pages locally, and it should be well documented, with enough guides and references. The first step is to start messing with cl-typst. Should be as simply as evaluating anything starting with ,(</code> and simply passing along anything else as regular text. Then figure out a system for sharing state or environment? Or should I strive to keep it functional? Oh, well. Get the parser-evaluator figured out first. Minecraft Activate the Monument 2023-05-21T20:07:42+00:00 I was watching the 9th devlog of Space64 (WIP name) by FireDragon04, and as he talked about activating the doorway by enabling beacons, I thought about Minecraft beacons, and a spin on the Minecraft CTM (Complete the Monument) formula where you activate beacons instead of fetching wool and returning it to the monument. A Minecraft ATM. (Activate the Monument. Hah.) I’d say the main difference is that loosing a monument key is now impossible, since they don’t exist. This is usually solved by regenerating the keys, or making ways to keep your inventory, or preventing your items from despawning, which is no longer required. Perhaps it will feel like less of a fetch quest? I know I want to recreate FireDragon04’s game in Minecraft, at least a general vibe. I’m a fan of Halo, sci-fi, brutalism, and grand buildings. I can just imaging the whole thing as a Complete the Monument</del> Activate the Monument. I even have vague ideas of progression, dungeons, gameplay, grand architecture and the ending in mind. Todo Formatting 2023-05-21T00:03:47+00:00 A way of visually organising your tasks to suggest which one is currently actionable, which one can be acted upon next, and which tasks depend upon which. This can be used to create UIs, organise tasks in a todo app, or to organise tasks in a simple text file. First, write titles for projects. Projects can be of any size. Clearing out your desk could be a project. All tasks go under a project. One off tasks can go under a “more” title. </li> Two, write the very next action you can perform on a project. Think of an action and write it down, then think of what you need to get that done and write that down. Repeat that until you can’t reasonably break it down further. </li> Put the next actionable step at the top of the project list. </li> Indent dependent tasks below their blocker tasks. If action B requires action A to be complete before you can do action B, then put action B below action A and indent it. Tasks that depend on the same parent task, but not on each other, will go below that parent task and will have the same amount of indentation as each other. </li> </ul> Here’s an example, where i have to clean up my desktop folder: desktop clean-up - copy list of files to notes - list possible actions under each item for where to put it or what to do with it - choose best action for each file - perform best action for each file </code></pre> I don’t yet know how to model tasks that depend on two or more tasks — a possible method could be to put one parent task below the other, even though it might not depend on the other parent task, and then put the dependent task under both of them. In my todo file, I replace the hyphen (-</code>) with a simple @</code> sign to indicate tasks that are urgent or important to me. Try to limit them to 5 or less. I aim to make it more GTD compatible as it grows, adding in project tags and actions lists, or maybe I try writing a tool to extract tasks instead, since moving items around will either create duplication or mess up the dependency order. CL SSG (Common Lisp Static Site Generator) 2023-05-18T23:03:39+00:00 Writing so much about Static Site Generators, I want nothing other than to implement one in Common Lisp. I get full configurability, really nice templates, programmatic css, awesome scripting, and anything else I might desire. I wonder how long the build times would be, however, if I used a shell script instead? Alternatively, I could always try Coleslaw</a>. But why Roswell. Oh, well. I had to use it someday anyway. Scripting (SSG Edition) 2023-05-17T20:16:04+00:00 A lot of applications that are meant for creating media benefit from some sort of scripting, including SSGs (static site generators). All of the Javascript ones seem to use Javascript, but Hugo and Zola rely on templates to do everything, which can be quite cumbersome, limited and generally painful. However, it should be relatively easy to add scripting to them, since Go and Rust have several scripting languages that are designed to be easily embedded. You can have a look at this (Github) page on embedded scripting languages</a> for a full list, but some interesting options include Rhai (Github)</a> for Rust, and Tengo (Github)</a> and Anko (Github)</a> for Go. The most interesting options, however, are Starlark(Github)</a> and Nickel (Github)</a>, both of which are designed for configuring build systems and related tools. I think they’re quite suitable because they’re designed with a very specific use case instead of some abstract theory, and that specific use case happens to be build systems, which are what static site generators essentially are. Starlark has implementations in both Go and Rust, while Nickel is implemented in Rust. Benefits🔗</a></h2> As stated earlier, full fledged scripting languages make it easier to write complex and reusable code. They can also be used to make a more intuitive and integrated templating system, by using the same language in the templating system. I’ve included a templating example with Starlark below, but it can also be used to implement metadata (or “frontmatter”) with a simple function call like {{ meta("2022-03-05", draft) }}</code> at the top of your markdown file. Starlark🔗</a></h2> Starlark is a Python-like scripting language designed for build systems, and static site generators are basically specialised build systems. It’s designed to be parallel (for fast builds), safe (for executing untrusted code) and simple. Honestly, sounds perfect for a static site generator. The one downside might be randomness, but that could be provided by the application (Zola or Hugo). The Buck2 build system (Github)</a> for example, provides an API (Github)</a> that can be accessed by scripts. You could even embed it inside the template language. As an example: <h1>{{ page.title }}</h1> <ul> {% for page in pages: """ <li> <a href={{page.permalink}}>{{ page.title }}</a> </li> """ %} </ul> </code></pre> NOTE: I’m not 100% sure about Starlark syntax and features, and I’m not really a Python user either, so this might not be correct. Although, you could probably add additional features through the app, such as a custom string format (I think). This enables you to write more complex scripts directly, instead of writing them in the (imho) awkward template syntax. def page_list(pages): """create a list of pages""" result = "<ul>" for page in pages: result += """<li><a href="{page.permalink}">{page.title}</a></li>""" result += "</ul>" return result </code></pre> That example is not so bad in the templating language, but ending all your statements with end-<statement></code> and scripting more complex logic can get quite annoying. Nickel🔗</a></h2> Another language that could be used is Nickel</a>. It’s designed with the Nix build/configuration system in mind, and is inspired by the Nix language. One advantage over Starlark is gradual typing and contracts. (Contracts are basically like assertions.) This is especially helpful when writing scripts that expect data in a specific form, but would otherwise return incorrect results which you might find several weeks later. You can also use it to ensure that your configuration conforms to a certain type or contract, instead of causing errors later on. Contracts, for example, can ensure properties about your strings, such as what they can contain, what they can start or end with, and so on. As a simple example, you can do let dateToString : Date -> String </code></pre> Another is easier multiline strings — in the Starlark/Python example above, it would preserve the indentation of the text (quite unintuitively, might I add). Here’s how it looks in Nickel: let it's-a-multiline-string = m%" This isn't indented. This is indented. This isn't indented. "% </code></pre> (Yes, examples imply it allows hyphens and single quotes in its identifiers.) While most configuration languages try to avoid turing completeness, Nickel is Turing-complete, with restricted accessibility to side-effects. This can allow things like reading file contents and updating backlinks, which are quite useful. Nickel can also import and reuse YAML, TOML and JSON, which allows gradually migrating to it, instead of completely invalidating older (site) configurations. Have a look at the Rationale (Github)</a> to understand their design choices and how it compares to other languages, including Starlark. Lispy Templates 2023-05-15T20:32:10+00:00 Lisp makes a pretty great system for templating all kinds of material. Simply let people write lisp code directly in their files and evaluate it in the context of the document, while blocking features unsuitable for templating. In the most basic form treat ,<anything></code> as a call to evaluate <anything></code>. So ,var</code> expands to the variable var</code>, and ,(func arg1)</code> expands to the function func</code> with the argument arg1</code>. The next step after this is to create content blocks. If you need to wrap some content inside a function (such as a loop), you wouldn’t want to worry about escaping all the quotes. For that purpose, use square brackets (Borrowed from Typst</a>. This allows you to write (link [Link to article called "Hello, World"])</code> without worrying about escaping the quotes or using single quotes. You still have to escape closing square brackets, but that’s not as big a problem in my opinion. In addition to representing flat data, s-expressions can easily model nested data structures as well, which is where their power truly shines. HTML is a common format that represents nested data. All you need is custom functions to create various HTML elements, which allows you to write something like the following: ,(:para [This is some content with a ,(:link [link text] "example.com") in it]) </code></pre> The coolest part is that you don’t need to embed a scripting language. You just re-use the lisp programming language! ;; definitions ,(define fn1 (:footnote [I am but a Lisp newbie])) ,(define fn2 (:footnote (:link [CommonMark specification] "commonmark.org"))) ,(define fn3 (:footnote (:link [LaTeX Website] "latex-project.org"))) ;; html content <h2> ,next-steps </h2> I have yet to see or implement this ,fn1 , but imagine using it in regular prose as a Markdown ,fn2 or LaTeX ,fn3 alternative? It would probably require being able to define custom syntax, since it would be tedious to type <code>,(:link [This is my title])</code> every time you wanted to insert a link, for example. </code></pre> A lot of these ideas were inspired by Typst</a>, by the way. Check it out. Drawing and Writing 2023-05-15T04:56:14+00:00 Drawing and writing are essential tools for thinking. Because they are loose and unstructured, they allow you to capture thoughts with the least friction; and capturing thoughts quickly and smoothly is essential for completing, developing, and refining ideas. You can write and draw with a notebook and pen, or you could use your smartphone. You could use a tablet if you want to capture a lot of sketches digitally, and enable easy reorganisation and search of text and other material. Use a physical keyboard if you’re writing a lot, since keyboards can capture words faster than pens. This applies to most endeavours. You might be thinking of a new piece of furniture, or a topic you want to compile material on, or figuring out how to organise something, or designing the interface for an application. These are all creative pursuits, by the way. A mathematician exploring new principles and ideas is just as creative as a painter exploring new brushes and subject materials. This might all be feeling like an epiphany to me purely because I’m a little sleep deprived. Oh, well. Github Forks 2023-05-13T21:10:13+00:00 “Forks” in Github should probably be called “clones”. That’s basically what they are. Other related terms are “remotes” and “mirrors”. What “Forks” Stand For🔗</a></h2> Outside of Github, a “fork” is a project that takes the code of one project and seeks to establish itself as its own project, with a different name and branding, as well as different features and code fixes. In Github parlance, a “fork” is used to mean a clone of a repository to which you’ve made some changes, before you can send those changes forward via pull requests. It’s not meant to be an independent project, simply a mirror of your personal copy of the project. Reasoning and Conclusion🔗</a></h2> I guess Github was worried about the difference between cloning it onto your machine versus your Github space. In that case, call it a “Github Clone” or “Remote Clone”? “Clones” is the more accurate term because you’re git clone</code>-ing a repo to create a personal copy to mess with. The git term “remote” is meant for other locations of a repository. Technically, it’s not a remote — your copy is not (automatically) a remote to the original copy, although the original project should be a remote of your copy. But it is a clone on a (Github) remote. So ‘Remote Clone’. I wonder what the process is for (remote) git interfaces like Sourcehut, Gogs (and descendants like Gitea and Forgejo), and any other interactive ones. GNOME Appreciation 2023-05-11T16:34:15+00:00 I frequently see people annoyed with GNOME, but I personally like a lot of GNOME’s decisions, even if I don’t use it. This post is about those decisions that make GNOME great. In summary, it’s simple, pretty and approachable for new users, and its overview screen is in a class of its own. Super Power (The Overview)🔗</a></h2> See what I did there? The ‘Super’ button is a name for the main shortcut button, which is ‘Windows’ on most keyboards and ‘Command’ on Apple keyboards. In GNOME, the ‘Super’ button simply gives you so much power with the press of just a single button. You can open the overview with the ‘Super’ key, or a three finger swipe up on the touchpad, or clicking on the Activities button, or even just flicking your mouse to the top left (to where the activities button is). </video> (Video copied from forty.gnome.org</a>: shows swiping up to view overview, then again to view all apps) You then get, at your fingertips: The current workspace.</li> All the apps open on the current workspace.</li> Any other workspaces and its apps.</li> Your pinned applications.</li> A search bar to access absolutely all of your apps, files and folders. And you only need to start typing. No extra clicks or keys required.</li> Smooth animations to highlight the spatial relationships between all elements.</li> </ul> All the other desktops require several different shortcuts or buttons for this. You can have an applications menu, but it might not have a search bar. Or you might, but it only searches applications. Then it needs a separate shortcut to search through files and folders. And you’ll never get a desktop overview with all your apps (launchers) available. Picture this: you’re in the all apps view, with two desktop thumbnails up top. You drag the calculator to the first, then the browser to the second, then GNOME will create a third workspace for you, then you drag the messaging and email apps to the third, and then you start typing ‘Finan’, when GNOME suggests ‘Financial Report.xlsx’ and you just hit ‘Enter’ to open your spreadsheet app on the first workspace — and just like that, you’re off to the races! Frankly, the overview makes GNOME the smoothest and slickest DE implementation that I’ve ever seen — not just in terms of looks, but also the consistent spatial layout/relation of things, as well as all the power that it presents in such a simple package. Simplicity🔗</a></h2> The GNOME DE and apps focus a lot on simplicity. It’s all about doing the things that you need to do and avoiding unecessary clutter. Advanced features are reserved for other apps or plugins unless/until they come up with a more thought out design. This creates a great environment for new users to get their work done without making mistakes, or worrying about making mistakes, or getting distracted. Theming🔗</a></h2> GNOME apps use a fairly modern and “trendy” UI, with flat design and plenty of white space, which is another thing that makes it approachable to new users. While this is not for everyone and might not be objectively beautiful, it is familiar and in keeping with current designs. Responsiveness🔗</a></h2> A lot of GNOME apps and components automatically adapt to smaller sizes. This makes it feasible to open lots of apps in the same window, and to use the same apps on mobiles and tablets. Wooooo convergence! You should see the GNOME mobile shell (Phosh). It basically uses the same apps and UI as the desktop, with minor tweaks to fit the form factor. The consistency and careful design just leaves me speechless. Short demo videos available in these two articles by articles by Jonas Dressler: Towards GNOME Shell on mobile</a></li> GNOME Shell on mobile: An update</a></li> </ul> Flaws🔗</a></h2> Now, GNOME isn’t perfect. There are some things that I don’t quite agree with, and some things that bother other users. Centre App Bar🔗</a></h3> My biggest nitpick, which I noticed when Windows 11 made the same mistake, is apps aligned along the centre. When you open a lot of apps, your pinned apps are no longer where you expect them to be, so you now have to be more careful. Additionally, a button in the corner is much easier to click since you can’t overshoot it with quick movements, which prevents accidentally clicking on something else. GNOME gets this right with the ‘Activities’ button, but not with the app bar. It might not be a big deal, and it would certainly be difficult to solve, but I just feel like it’s objectively wrong. Perhaps the solution is a combined app and status bar, but I can’t say, since it’s advantageous to have a narrow status bar that’s always visible. Flatpaks🔗</a></h3> Another thing that annoys me is their insistence on using Flatpak. Despite an established culture of maintainers and packagers in the Linux world, they think it’s a great idea to push additional responsibilities on app developers. This also indirectly suggests that developers silo themselves and ignore maintainers. Furthermore, it hampers performance for apps, especially on lower grade hardware, and as a new technology it prevents some affordances that are available with normally installed apps. I mean, one of the reasons I first switched to Linux was precisely because my laptop struggled a lot. Bleeding Edge🔗</a></h3> While it doesn’t bother me specifically (probably because I don’t use GNOME), GNOME sometimes breaks things for existing users, and often despite large backlash, which makes users feel hurt or offended, which can lead to the actions and resulting tension that accompany high running emotions between the core team and users/contributors. Missing Features🔗</a></h3> Because of their focus on simplicity, they take a while to work through features, such as the background app statuses, which were recently added after several years. Thankfully, GNOME has a decent plugin ecosystem. Function Design Recipe 2023-05-11T12:36:29+00:00 How to Design Programs (HtDP) specifies a simple method of designing programs, called a recipe, which they call the Function Design Recipe, introduced in the preface. It’s a fairly simple practice, and it helped me hammer out some 2048 code that I’ve been chipping away at off an on for several months. One help is my growing familiarity with the language, of course, but the function recipe did a lot of work in clarifying the design and letting me know how and where to put my efforts. This video (YouTube)</a> presents a story of why it is useful in a broader example.1</a> ^{1 The idea is to take things step by step. At the level of the team in the video the steps are on a grander scale, but at the level of beginners it’s very useful to follow the steps of the Function Design Recipe. </div>}You can find it at htdp.org</a> 2</a>. I recommend you go through the book if you’re a new or intermediate programmer. The preface is a good place to start. ^2The book seems to be updated with some frequency. If you see the URL, you’ll see 2023-3-6</code>, which suggests it was updated on 6th March 2023. I recommend starting at htdp.org</a> and clicking the book title to open the index, so that you have the latest edition. </div> The Recipe🔗</a></h2> NOTE: This is not strictly the recipe. I’ve borrowed basic ideas from it, and managed to use it quite successfully. The first step is to figure out the shape of the data that you’ll be working on. You’re recommended to do this using comments. The next step is a signature and description of the primary function and its purpose. The signature says what inputs it requires, and then what kind of output it spits out. You can model this as simple data types, also using the comments. The purpose follows right after, stating what the function is meant to do. Then you create a template of the function, based on the signature, also using comments. Feel free to use ...</code> for unknown parts. My templates simply had a function name and a list of arguments. The tests will be run later to verify your code. The next step is to write some tests for the code. Write down the test input and the expected output using code. Think of some edge cases and what their output should be. These tests will be executed later to validate the program. I skipped these for my 2048 code because the game uses random input, which is easier for me to test visually than to write test cases for, especially at the scale I’m working on. It’s probably a good habit though. I might try to write tests further along, with more complicated tests to check the random input. Finally, you flesh out your template into complete code and then run your tests on it. This step took some time, because I had to look up documentation and play around with some functions to see how they might suit my needs. This is partially because I like to work without the internet, in order to increase my capability of working offline, with just the repl and the documentation. As I mentioned above, this is my loose interpretation of the steps, meant to provide a gist of how it works. Please reference the book</a> if you’re interested — click on the book title to open the index. 2</a> ^2The book seems to be updated with some frequency. If you see the URL, you’ll see 2023-3-6</code>, which suggests it was updated on 6th March 2023. I recommend starting at htdp.org</a> and clicking the book title to open the index, so that you have the latest edition. </div> DIY (Fish) Shell Templating 2023-05-07T14:07:52+00:00 If you’ve seen my note on creating a Static Site Build Tool</a>, you might’ve seen the link to pp</a>, and that I lament the syntax and the fact that it uses ash/dash. Turns out it’s quite easy to implement in fish, along with a syntax I prefer! It started with me just going about my day, when I remembered the eval</code> command and I started thinking of the pieces I might need to create a parser/state machine of sorts in fish. I tinkered a bit with some of the commands I was thinking of, and I managed to get it working quite well! I haven’t made a way of putting in variables or reading and writing from a file, and I haven’t thought of too many edge cases, but the basic functionality is there. If I run ./parser.fish "the date is {{ date -I }}"</code> it will give me the output the date is 2023-05-07</code> I’ve pasted in the whole thing, as it currently is, at the end, if you’re curious. How it Works🔗</a></h2> The basic way it works, is it uses a variable to figure out if it’s reading normal text or command text. If it’s reading normal text, it simply passes it along to stdout, and if it’s reading command text, it gathers that into a string, then runs eval</code> on it, which spits out its output to stdout. Future Work🔗</a></h2> I want to be able to parse files instead of just strings. The answer might be somewhere in string join \n $fileContents</code>. When parsing files, it would be useful to provide variables for substitution. Perhaps it could be done by specifying environment variables in the same line as the command. Something like VAR=val fish-template str "{{ echo $VAR }}</code>. Another way would be a syntax for keys and values. Perhaps --variables "key1: val1; key2: val2"</code>. A short syntax for variable expansion might also be nice. Something like {{ $var }}</code> or {$ var $}</code> It would be cool to have a way to limit its scope, depending on where it’s being called from. Include a list to allow certain commands, as well as one to block some. If the first the command isn’t in the allow list, or is present in the block list, then raise an error instead of evaluating it. In a similar vein, providing additional commands would be great. A simple way is to create commands in a bin/</code> directory and then run them with {{ ./bin/my-command }}</code>, but a shorter syntax would be quite useful. Perhaps use the bin/</code> directory with a syntax like {{ @my-command }}</code>? Or simply {{ my-command }}</code>, such that if my-command</code> is not installed, it would look in the bin directory. It is ideal that the template evaluation takes place from a specific directory. Especially if relying on file operations or something like a ./bin/</code> directory. When calling the command on a template file, ensure the current working directory is the same as the file’s parent directory, unless specified otherwise. Changing directories in the script sounds like a potential footgun, since it’s implicit behaviour that people will not be aware of. An easy flag, then, to execute in the context of the template file’s folder. So --dir < current | file-dir | <path> ></code>, where is relative (starting with ./</code>) or absolute. It would also be great to have all commands in the file/template evaluate in the same context. This way a variable declared at the top could be used in a command further down. Currently, it spawns subshells using the eval</code> command. Maybe it could use source</code> or a flag in eval</code>? Another approach might be to gather content as an echo $content</code> command along with the other commands in the given sequence, then calling all the echo and other commands using a single eval</code> command at the end. Use string escape</code> to prevent unwanted expansions. Code🔗</a></h2> set parserMode normal set command '' echo $argv[1] | while read -n 1 char switch "$parserMode $char" case 'normal {' set parserMode open-brace case 'open-brace {' set parserMode command-mode set command '' case 'open-brace ' set parserMode normal printf '{%s' $char case 'command-mode }' set parserMode close-brace case 'close-brace }' set parserMode normal # echo \'$command\' eval $command case 'close-brace ' set parserMode command set command "$command\}$char" case 'command-mode ' # newline creates '' when read set command "$command ; " case 'command-mode #' set parserMode comment case 'comment ' # newline creates '' when read set parserMode command-mode set command "$command ; " case 'command-mode ' set command "$command$char" case 'normal ' # newline creates '' when read printf \n case 'normal ' printf %s $char end end </code></pre> Do More in Your Minecraft Worlds 2023-05-06T01:38:56+00:00 It’s hard to get things done in a Minecraft world, because you often don’t have time, and you can’t achieve the things that you dream of, especially the cool things you see from other people, and maybe prototype in your creative worlds. This is a set of rules to help you do cool things in your Minecraft worlds, including singleplayer, as well as small multiplayer worlds with friends. There’s also a bonus solution at the end to make the game more accessible (in a looser sense of the word), similar to the accessibility options of games like Celeste (Celeste Wiki)</a> and Rusted Moss (Article on Flying)</a>1</a>. ^{1 You can see the other options in the screenshots. The basic instructions apply to those as well. </div> NOTE: A lot of this is trust based, and might not scale so well. It works best with friends and acquaintances.}The Problem🔗</a></h2> You can’t build large things: Not enough time</li> Not enough materials</li> </ul> You can’t accumulate enough materials from your farms: Not enough time</li> Can’t AFK because you can’t run Minecraft while doing other work. It slows your computer.</li> Can’t AFK because you can’t keep your computer on. Possible reasons: high energy bills, having to carry your laptop around, unable to monitor computer, power cutoffs.</li> Can’t AFK because of poor networks.</li> Can’t AFK because you host a server from a personal computer, in which case the previous considerations apply.</li> </ul> The Solution🔗</a></h2> Offline Hours: When you’re not playing on the server you build up a sort of currency called “Offline Hours”. While the name says hours, you can time it down to minutes, half hours, or quarters. This currency can be spent on certain actions which have varying costs.</li> AFK Simulation Rule: If you have an automatic farm of some kind, measure its output for 5–10 minutes and record it. You can now spend your “Offline Hours” and get the materials you would get for that amount of time by multiplying it with your measurements.</li> Build Grind Rule: You can also establish an average baseline for how many blocks can be placed per minute, and spend your “Offline Hours” to fill/copy large amounts of blocks based on that amount. This can be used to copy repeated elements of a build, such as a large patterned wall, or to clear out a large area, for example.</li> </ul> Bonus Rule: Additional Accessibility🔗</a></h2> NOTE: I’m using “accessibility” in a looser sense of the word, not in the sense of a11y 2</a>. ^{2 https://en.wikipedia.org/wiki/Computer_accessibility </div> This rule derives from my own frustrations with lag, but they apply to any player who might be disadvantaged in any way. For example, they might not be hardcore gamers, or they play with special hardware. Other disadvantages include lag and rubberbanding.} Accessibility Rule: Players with disadvantages have reduced penalties, or buffs to deal with their disadvantages. For example, they might keep their inventory whenever they die, or they could have extra health, or they could have permanent regeneration/resistance, or they could have other special items and/or abilities, such as flying or fire spells that damage hostiles in a given radius. See what the frustrations and needs of your players are. The rule need not apply at all times. For example, network effects can be temporary.</li> </ul> NOTE: The other rules are also about accessibility — they’re about making certain parts of the game more accessible to everyday players who might not have enough time to achieve the big builds they dream of. Implementation and Caveats🔗</a></h2> This is a largely trust based system. The easiest way to run it, is to calculate your Offline Hours, etc., and then use commands according to the rules. The AFK rule can be achieved by using /give</code> after calculating how many items you should get. The build rule can be achieved by using the /fill</code> or /clone</code> commands. Make sure to use the destroy option, so that you get any blocks that are replaced (or “broken”). This is also the most flexible and powerful system. Make sure to take regular backups if you’re relying on players to use the commands. Maybe before each command, or before you start up the server (this is the same as backing up after closing the server). People who are unfamiliar with the commands can either learn to use them with some tutorials, or they can rely on other people to run it for them. If you’re applying this to a server, it would be ideal for the server admin to know them, since they should be available when the server is up. To make it easier for people who don’t know commands, you could set up trigger commands for them. Trigger commands won’t be able to do everything, but they should let players do some things on their own. If you have Minecraft modding experience, that would be really cool — you could implement it and share it with people who are uncomfortable with commands. Some additional accesibility features are best achieved through mods, in fact. However, try to not make them too invasive. If people build up “too many” Offline Hours, you can put a limit on how many they can make. Make the decision based on the situation. If you find yourself abusing commands in other ways, you could create a process which makes you take it more seriously. For example, in a singleplayer world, you can simply create a note, and every time you use a command, you put it into that note with the time, the command, and why you’re allowed to use it (number of Offline Hours, any other reasoning). That note could also include how many Offline Hours you have. If you’re in a multiplayer world, you can create a way to submit requests and get them approved by at least on or two other members. The admin or other operators could then fulfil these requests, or you could trust players to responsibly fulfil them once their request has been approved. You can make it more or less strict as required. Conclusion🔗</a></h2> Make a simple set of rules for achieving things without requiring prohibitive amounts of work. The rules should reflect the costs and rewards that you (and/or your players) find reasonable and enjoyable. Remember to fine tune the rules and rewards according to your (or others’) needs. You don’t want to make the game too easy, or it won’t be as rewarding, nor do you want to make it too strict. You must also communicate this to your players and discuss matters with them to create a fun environment for everyone. A New (Top-Down, 3D) Game 2023-05-05T11:05:57+00:00 I like coming up with game ideas all the time. Well, I come up with bizarre ideas of any kind. Here’s my rambling about a game idea I had last night: This one was prompted by me watching a compilation of several sci-fi/cyberpunk (indie?) games. I liked the story bits in some of them, in the sense of your actions building up over time, and contributing to a larger narrative. The only game I play right now is a battle royale with some friends. It would be nice to have a co-op experience. But then I fear they may get bored soon. There’s only so much story content you can add to a game. Perhaps you could make emergent behaviour using complex systems, but there’s just something else about competitive multiplayer games. That’s a whole different universe of emergent behaviour. So, that means a multiplayer element as well. And why not. Why can’t you have an interesting top down multiplayer experience. Some already exist, in fact. Furthermore, it would be more performant and flexible than the higher resolution first-person/third-person 3D games. Ah, yes. The 3D was also a decision to manage appeal, even though I personally enjoy pixel art a lot. Imagine the game in low-poly 3D! Anyway, some top-down games are already in the popular market, and some of them are even battle royales. So we could implement some fun mechanisms for various weapons and items, as well as environment interactions. A fog of war system (?) for limiting vision to a certain distance and through certain materials. Imagine blasting open doors and hitting people in the face with it. Imagine spells, perhaps. Imagine camouflage items, flamethrowers, mines, drills, missiles — the whole gamut! Melee combat of all kinds as well! You could have a character class that’s simply larger and stronger than others who just slams other people. I think people would appreciate the art style of Xenowerk. As a more varied PvP and PvE experience. A 3D character also creates more interesting UI opportunities, such as a rotating model in your character selection screen. My note from last night: Any story based game will eventually run out of gameplay, unless it has the foundations for making your own games, as well as content updates. And multiplayer modes with unpredictable outcomes, with some requirement of skill. Top down is best to include mobile users as well. Test out mechanics for multiplayer as well and maybe tweak the balance for pve modes. </blockquote> Skeumorphism 2023-04-28T17:31:56+00:00 The gear icon for settings. The envelope icon for email. The paper plane icon for sending a message. The bell for notifications. The pages in the world wide web. The desktop, and the windows on it. Skeumorphism isn’t gone, but maybe we’ve reached the point where there’s nothing left to take away. Organising Your Files 2023-04-24T12:55:31+00:00 This is a pretty simple file storage method, revolving around two folders and links. The two folders here are your ‘Archive’ and ‘Inbox’. The ‘Archive’ folder is where your organised files stay, and the ‘Inbox’ folder is where new files come in. The ‘Inbox’ folder is also where you place files and folders that you are currently working on — using links, not copying. Links are special files that point to another file or folder on your computer. If you link to a file instead of copying it, whenever you edit a file it will actually edit the original file, and the links will continue to point to the same file along with the edits you made. I believe links are known as ‘shortcuts’ in Windows and ‘aliases’ in MacOS. There are a few more things to know about links, which I’ve mentioned further below. The Archive and Project Folders🔗</a></h2> The ‘Archive’ folder is where your files will always end up, in a clean and organised format. The basic way to organise your files is to keep them in project folders. That is, files that are part of the same effort are put into the same folder. And if you have files that are used in multiple projects, then you put them in a separate folder and use links. You only need a project folder if that project has multiple files. However, if there will soon be multiple files for that project, or if you will be sharing that project (see ‘Public’ folders), then you should just create a folder for it. Here are a few examples: Files that are about filing taxes go into the ‘tax-filing’ folder.</li> A report goes into a folder with the name of that report. If you do multiple reports, then you could either create a ‘reports’ folder, or you could add ‘report’ to the beginning of the file name.</li> </ul> Sub-Projects🔗</a></h3> Within a project, there are often subprojects, or sub-tasks. Usually, you have a single file for each section, but if it grows enough, simply create a sub-project folder within the project folder, and put those additional files in there. Public🔗</a></h3> When you have projects that require you to edit files before you share them with other people (such as generating a PDF from your Word file) you create a ‘Public’ folder within the project folder and store the exported files in here. You can even change the end of the file name to reflect who or what it’s for. The most frequent use case is when you remove personal or company information from these files before you share them with other people. One example is when you share something for internal review, and then share another copy to send outside for printing. In this instance, some printers will want the images and fonts to be given along with the file, or they may want it in a different format, so you’ll have ‘project.png’ file for internal review, and a ‘project-print/’ folder for the printer. Another example is presentation slides that are presented to multiple people, or at different conferences — you wouldn’t want your slides to say ‘Welcome Mumbai’ for a talk that you’re presenting at New Delhi. New-new-report-final.pdf🔗</a></h3> A simple way to mitigate this is to add ‘v1’ at the end of the file name, and change the number every time you create a new version. Another way is to add the date at the end, and if you have more than one version on the same date, then you add a 1, 2, etc on the end. If there are a lot of versions, and you’re struggling to keep track of them, you can create a changelog.md file, and write down the important versions, and the differences between them. If the project is currently active, then you will place these new versions inside the same folder, but if you’re continuing the project after a long time or redoing the project completely, then you create a new project folder using the version or date scheme. That is, ‘project-v2/’ for your new version. The Inbox and Active Files/Folders🔗</a></h2> The ‘Inbox’ is where unorganised and currently used files sit. Currently used files are files/folders that are organised, but which you’re currently using. Instead of moving them or keeping them in the ‘Inbox’ folder, you link to the actual files in the ‘Archive’ folder: First, go to the ‘Archive’ folder, and right click on the file/folder you’re working with. Then, if you’re on Windows, select ‘Create Shortcut’, or if you’re on MacOS, select ‘Create Alias’, and select the ‘Inbox’ folder or move the newly created link to the ‘Inbox’ folder yourself. When you’re done with a link, you simply delete the link, and your actual files will remain in the ‘Archive’ folder. One example for active files is your taxes folder: it will remain in the ‘Archive’ folder for most of the year, except when you start doing your taxes. When that time comes around, you link to it in the ‘Inbox’ a few days or weeks in advance, and start working on your taxes for the year. Inbox to Archive🔗</a></h2> You have to take care to periodically go through your inbox and organise your files. If the file/folder doesn’t have any more use, then simply put it in the trash bin. If it’s a link to a folder in the archive and you’re no longer using it, then delete the link. Your actual files will still be there in the ‘Archive’ folder. If the file/folder belongs to an existing project, put it into that project folder. Don’t just dump it in, but name it properly, and put it into a sub-folder if required. If the file/folder doesn’t belong to any project that you can think of, then create a new folder for it, or simply rename it according to that project. Ideally, you should do this every day and set a reminder for a specific time. If you did very little file juggling work today, then that’s great — it will only take you 5 minutes. If you have a lot of files to organise, then you should do it today, before the pile gets larger. If you’re especially tired today, then you can postpone your reminder to the next day, or for a different time. Integration with System/File Manager🔗</a></h2> I recommend deleting your ‘Downloads’, ‘Videos’, ‘Pictures’ and ‘Desktop’ folders, and creating them anew as links to the ‘Inbox’ folder. There are two main reasons for this: First, the ‘Downloads’, ‘Pictures’ and ‘Videos’ folder frequently get new and unorganised files dumped into them from various apps such as the browser and screenshot tool. </li> Second, it’s easier to access active files/folders from the desktop or any of the other folders, because lots of file picker dialogues will default to these. </li> Also, if you use desktop icons you’ll have them easily accessible, or you could skip that if you don’t like them. </li> </ul> Similarly, I recommend deleting the ‘Documents’ folder and creating a new link pointing to the ‘Archive’ folder. You’ll be able to quickly select it in any file choosers, and it will appear at the top of your main folders list in the file manager. Easy Backup and Transfer🔗</a></h2> One easy benefit of this system is that you know, in a general sense, where all your files are, and you only need to backup/copy these two folders to get all your files wherever you want. Links for Various Platforms🔗</a></h2> Windows (11)</a> If you use ‘Send to Desktop (create shortcut)’, remember to link the ‘Desktop’ to your ‘Inbox’ folder. </li> macOS</a> Try the Option-Command with drag method. </li> Linux - GNOME Files (Nautilus)</a> I’ve confirmed that the alt+release method works in version 42.2. </li> Linux - KDE Dolphin It appears you can simply right click on empty space, and select ‘Create New’ then ‘Link’. Source: r/kde</a> (See the comment by throwaway6560192, and the reply by Trollw00t) Let me know if you find or know any other ways. Dolphin might also have a drag+alt option to automatically create links. </li> Linux - Terminal</a> Alternatively, you can have a look at man ln</code>. The basic form is ln -s <file/folder> <new link></code>. Remember to use single quotes around the file/folder and new link names. </li> </ul> Resumé 2023-04-23T16:37:40+00:00 Hi! I try out (or note down) design concepts almost daily, and I love reading books, as well as learning about new things. Streamlining systems and making things work (or theorising how to) is what I enjoy most. Paired with my knowledge of software engineering, this makes me an ideal candidate for working with software teams. Skills🔗</a></h2> Figma, Adobe XD, Penpot </div> </div> </div> </div> </div> </div> </div> Illustrator, Inkscape </div> </div> </div> </div> </div> </div> </div> Wireframing, Sketching </div> </div> </div> </div> </div> </div> </div> Photoshop, GIMP </div> </div> </div> </div> </div> </div> </div> Premiere Pro </div> </div> </div> </div> </div> </div> </div> Blender </div> </div> </div> </div> </div> </div> </div> HTML, CSS </div> </div> </div> </div> </div> </div> </div> Javascript </div> </div> </div> </div> </div> </div> </div> </div> Work Experience🔗</a></h2> UI Designer/Graphic Designer</h3> Organic Kitchen, Gurugram February 2021 - May 2022 Along with various design work, including website and app screens and assets, I took the initiative to completely revamp the UX and UI of their primary subscription offering (see portfolio for more). </li> Packaging/Graphic Designer</h3> Stylo Media, Kolkata February 2020 - June 2020 Designed packaging and graphics for ITC, using feedback and discussions with key stakeholders. </li> Junior Designer</h3> NewsClick, New Delhi June 2019 - July 2019 Designed video thumbnails and edited footage for YouTube. </li> </ul> Education🔗</a></h2> B.A. in Visual Communication Design</h3> Whistling Woods International July 2017 - July 2020 Excelled in the UI/UX and Web Design courses, and topped the Typography subjects, due to my eye for detail and my software skills. </li> </ul> Extra-Curricular🔗</a></h2> Co-Lead Designer</h3> WWI Cricket League (May) 2018 Whistling Woods International, Mumbai Took on leadership of design team and helped junior volunteers with using software to effectively complete their work. </li> Co-Lead Designer</h3> Celebrate Cinema (September) 2018 Whistling Woods International, Mumbai Shared leadership and bulk of design work with fellow design student for inter-college event with outside visitors. </li> Designer</h3> Celebrate Cinema (September) 2017 Whistling Woods International, Mumbai Joined the small team to help with graphics and installations. </li> </ul> Get in touch!</a> djot 2023-04-23T15:35:14+00:00 EDIT: Whoa! Inane mind dump ahead! Just check out the post on why I like djot</a>. I’m keeping this link for something to at least laugh at, and to build a habit of not breaking links. I was reading an article by matklad</a> and I realised the formatting looked a lot like the default Asciidoctor output, so I went hunting around for how he built his site and found an article on markup formats</a>. Turns out djot</a> is a really nice format, which includes some interesting ideas from asciidoc as well as markdown. Sadly, the tooling around it is quite limited. Current implementations include one in Javascript, another in Lua, and a third in Rust. And the syntax reference link at djot.net</a> seems broken. The Javascript implementation is the current focus, while the Lua one is the first (that may be phased out), and the Rust one is unofficial, with a single link in the djot.net</a> page and no other mention. I think all three allow for creating an ast, so it should be easy to work them in with other tools, but it’s still a fair bit of work (for me) to set up a static site or generate other documents from it. Maybe it’s a good reason to really get into Javascript (Rust is a bit overkill), although the hexo static site generator has an extension for it, and other Javascript ones like 11ty should also be able to easily plug it in. Alternatively, just use the cli given by djot.js to output the ast and manipulate it in any language, then feed it back into djot.js or pandoc. Even the html output can act as an ast of sorts if you’re already familiar with it. Maybe I’ll try that, but it’s still a lot of work (as a non-programmer) to replicate everything that static site generators and other tools can do for you. Again, sorry for that. Please check out the post with some actual content</a>. Static Site Build Tool 2023-04-20T23:34:47+00:00 I’ve just been thinking of what it would be like to have a static site build script. You would have dependency management, parallelisation, task runners/commands, and access to all sorts of (cli) tools (including your own scripts and binaries). EDIT: soupault.app</a> might be the way to go. It lets you run any cli tool and use it in your site building, as well as a few other cool things. Prior Art🔗</a></h2> Some similar tools already exist in the form of mkws.sh</a> and sss</a> (inspired by mkws), but my idea is a bit different — you use a build tool to stitch everything together, as opposed to a shell script, which can easily track which files need to be rebuilt, gives you simple commands to run, can (usually) easily perform parallel computation, and is quite easy to extend. Plus, I discovered you can use python as the shell in make. And I wouldn’t really want to use pp</a> — it’s a bit cumbersome. Templating🔗</a></h2> I’d prefer it if pp used a cleaner syntax like {{ shell }}</code>, which makes inlining so much cleaner, and it handles indenting better as well, which some file formats really care about. I’d also like to have the option to customise which shell to use, since I’m more familiar with fish shell — there is absolutely no reason to use (d)ash for a personal site. Update: turns out it’s quite easy to make your own templating engine in fish shell</a>! Otherwise, you could always use a cli templating engine like j2cli</a>. Going through the Pop!_OS package repository, there are a lot of cli html templating engines, such as ace, amber, cl-lml2, and aft. Build Tools🔗</a></h2> The build tool can also be anything that you like — I like something like make, tup</a> or redo</a> since they integrate with the shell pretty well, and there’s a lot of file management in there, plus the shell makes excellent glue code. Otherwise you could use something like meson/ninja</a> or shake</a>, if you want something really powerful. Actually, shake might be a good bet if you know haskell, since (I think) you can plug in other libraries for each step, to make a much more cohesive and well-integrated program. There’s even overlord</a> for a (common) lisp build system, or buck2</a> if you want somethind industrial grade^{TM (that’s a joke).} NOTE: If you’re using make, the .ONESHELL</code> directive runs the steps in a command in the same shell instance, otherwise make runs each one in a separate shell. Authoring🔗</a></h2> You can use any file format you want for authoring, including the dialect of whatever markup language you choose. Some interesting languages are typst</a> and djot</a>, although typst doesn’t have HTML output yet (as of the time of writing this article; if you look at the design of typst, the pdf output, and the github issues, however, you can be sure that it’ll be really solid). I used to really like [asciidoc][asciidoc], but the tooling around it is a bit limited, so you need to know ruby/java to extend it, which is why I didn’t get around to having a blog for bloody ages. Use a common static site generator if this is your first time, and read through the docs, examples and discussion — you can do almost anything you want and more. It might help to start with a test blog, where you just write down random thoughts and articles, without actually deploying it anywhere. Anyway, rant aside, the point is that there’s some really cool markup languages out there. Front Matter🔗</a></h3> You could use a different front matter format, or no front matter at all! Let your site builder handle the rest automatically! Maybe read it out from the file system. Maybe with a git hook that gets dates from git. Maybe some other step that creates file hashes and stores dates in a db? Maybe a prompt for metainformation about unknown files that gets saved in a db. Content Layout🔗</a></h2> You could adopt a structure where you dump everything into the content directory, and if there’s a build step for that file (type) it gets processed according to the build step, else it’s copied directly to the build directory. Some (most?) build systems even prioritise specificity when it comes to applying a build step, so you can set certain files (or classes of files, based on the file name) to use custom processing/templating. You could just rely on ordering, otherwise — simply place the more specific ones higher up, and the files it doesn’t match will get passed along to the more general rules, while the ones you want to treat specially are caught by the more specific rule at the top. Development and Testing🔗</a></h2> For serving the pages live while you develop and test, you can plug in something like miniserve</a> (to serve files on your device and local network), with entr</a> (to automatically rebuild on file change) and live.js</a> (injected into your html pages for auto-reload). You’ll need to set up your site builder to use relative paths or set the url to be the local ip used by miniserve 1</a> or your preferred dev server in order to preview the links locally, otherwise it would take you to your production site. ^{1 miniserve displays a list of ips, but you could also find out by running ifconfig | grep 192</code>. If you use ifconfig</code> use the second ip starting with 192.168</code> and add :8080</code> at the end. miniserve tends to use 8080, but you might need to change it if it says something else. </div>}You could even use caddy</a> or some other server thing. There’s actually plenty of them — especially in the Go and Rust space. You can even use a python one-liner — I think it’s python3 -m http.server</code>. In fact, caddy seems to have markdown rendering and template evaluation. Dang. That makes a great development environment, although it might be a bit overkill, and it will probably cause some config duplication. Alternatively, you could write your own tool to create a file server that works as expected — it would automatically serve index.html files from directories, and edit the base url in internal pages to point to the local network. Image Optimisation🔗</a></h2> You can add build steps for most images, where they are optimised for file size and converted to multiple (display) sizes. Multiple display sizes directly affect resolution and therefore the final file size, and the browser can often decide which one to pick if you simply list all of them in a figure tag (or something like that). Using this entire system gives you the freedom to plug in all sorts of things and create a system that aligns with your workflow, instead of tying you to the assumptions (such as markdown authoring) of the static site generator. You will, of course, have to edit your templates to use the processed images. You can use srcset</code> attributes in img</code> tags, or use a figure element, and the browser will automatically pick the most appropriate image. See the mdn web docs article on responsive images</a> for a comprehensive guide. CSS-Tricks also has a great article on reponsive images</a>. Content Templates🔗</a></h2> You can make content file templates that you can instantiate with a simple new</code> command. This is especially useful if you’re using custom front matter or special pages, which you might forget about. For example, if you’re authoring files in markdown, then you could store some template markdown files, like blog.md and tutorial.md, and then use build-tool new blog</code> or build-tool new tutorial</code> to create a new post using the given template. HTML Processing🔗</a></h2> You might want to edit the generated HTML for your pages, even to a small degree where you replace a span with a div, or the other way around. One tool I’ve found xmlstarlet</a>, which can structurally edit xml files, and has some amount of praise around the internet. Alternatively, xml2 2</a> converts XML/HTML to line-oriented formats that can be manipulated with the usual Unix tools, which frankly sounds exciting. (A very similar tool for json is gron</a>. You should check it out if you already know the unix tools.) Additionally, a github user called dbohdan maintains a list of structured text tools</a>, which includes some xml tools that could be useful. ^2See xml2 in the Ubuntu package repositories. Website available on archive.org</a>. </div> You could also use a mardown converter that lets you hook into it’s HTML generator and create custom HTML output. I don’t know of any such tool yet, but it could expose the parts of the structure as variables, which you could feed into a template. Documentation and Help🔗</a></h2> Getting this method to really work for people would require some good documentation and examples to accompany it, because it’s all about customisability and control, which will require a lot of research and experimentation that could prohibit people from developing the site they want if the information is not available up front. This includes a list of tools, how to use them, best practices, common issues, a public forum or chat (like Zulip 3</a>), and more. ^3Zulip allows you to make some chats visible to everyone on the internet, regardless of whether they’re signed up and part of your organisation or not. I believe this is a very important step for reducing friction for new users. See the oilshell/oils-for-unix</a> project for an example. </div> A good documentation project around this system should allow anyone to easily create their own site builder in a programming language of their choice (except, perhaps, for a good parallel build system). And then they could contribute further to the documentation. Maybe. Is there a general website covering different static site generators and how they work? That might be the place for such documentation. Maybe link to good shell scripting practices as well. How Static Site Generators Work ft. Zola 2023-04-19T00:26:05+00:00 This is a general guide about how static site generators work, using the Zola static site generator as an example, with a sprinkling of why they are organised this way. Other static site generators have the same requirements, and generally use the same ideas and structure, so this knowledge should help you get started with any static site generator. This post will be easier to digest if you understand the difference between static and dynamic sites, HTML and CSS, text editors, and the terminal. Also, follow the Zola installation instructions</a> so that you can follow along with the examples. NOTE: Please don’t write the files as presented in this post for an actual blog/website for others. One reason is that I’m only putting partial HTML (it works, but it’s a good way to make a terrible site), and I’ve also skipped on some other more advanced topics. This post only explains how a static site generator brings everything together. Structure🔗</a></h2> Let’s get right into it. The basic folders a static site generator needs are as follows: content</li> static</li> templates</li> public</li> </ol> The content</code> folder is meant for the posts you write. Zola and other popular generators use markdown</a> for writing, and then these posts are processed before being placed in the public</code> folder, using roughly the same file and folder structure. They usually also include some more advanced features that go beyond markdown. The static</code> folder is for files that are to be served as is, without any modifications. This includes images and CSS files. These files and folders are copied directly to the public</code> directory. You can duplicate the folder structure from your content</code> folder and the files will then be placed in the same places under the public</code> directory, next to the processed files from the content</code> folder, if they have the same relative path. i.e. if you have the files content/posts/post1.md</code> and static/posts/post2.html</code> then your public</code> folder will have post1.html</code> (remember, files from content</code> are processed) and post2.html</code> under public/posts/</code>. The templates</code> folder includes a bunch of html files that are processed along with a markdown file from the content</code> folder whenever you tell the markdown file to use that template, or according to some special rules so that you don’t have to specify it every time. Templates allow you to do things like putting a list of important links on every page, or creating a list of all your pages. To do this, they allow some special codes in them to access the contents of the folders and files in the content</code> folder. Finally, the public</code> folder is where all the processed content is finally output for the “public” to view. This is where the “static” from “static site generator” comes in — they’re simply a bunch of static files, served as-is to anyone who visits your site. Most generators also include a theme</code> folder where you can place “themes” from other people, which include custom styling (css) and templates to do most of the heavy lifting — all you have to do is write your markdown posts. Other files and folders can also be included for various things. The config file is a common one, placed with the other folders, to control things like your website name, url, theme, etc. The website url is used when generating the paths for links, amongst other places. Getting Started🔗</a></h2> The easiest way to get started in Zola is to create an index.html</code> file within the templates</code> folder. All you would need to put is <h1>Hello, world</h1></code>, and you’re done. If you run zola build</code> and check the public</code> directory, you’ll see the index.html</code> file, which is copied as-is. Open it in your web browser to see what it looks like (kind of ugly, unless that’s your taste). Open it in your editor to check that it’s actually copied templates/index.html</code> as-is. The templates/index.html</code> file is required because every website needs an index file to start, and markdown files can’t be processed without a template. The _index.md</code> file is not required because there’s no reason to edit it often, which means that there’s little benefit to writing it in markdown, so Zola simply assumes it exists. A cleaner way would have been to accept an index.html</code> file in the static</code> folder, since you only need Zola to copy it as-is, but Zola has (rightly) assumed that there is no reason to do that, so they never check for it. Authoring Pages🔗</a></h2> Like I said above, a markdown file requires a template for it to be processed. Zola automatically applies the templates/index.html</code> file to the (automatically created) content/_index.md</code> file, and any other pages are usually assigned the page.html</code> template, unless you specify otherwise. So, the first thing to do is to create a page.html</code> file inside the templates/</code> folder. Within that file, we enter the following: <h1>{{ page.title }}</h1> {{ page.content }} </code></pre> The text between the braces ({{ }}</code>) are the special codes that I mentioned earlier. When the page.html</code> file is processed with a markdown file, it is given access to parts of the markdown file using the page</code> variable. The page</code> variable has fields called title</code> and content</code>. Our page.html</code> template file puts the page title inside a heading tag, then dumps the rest of the page under that. Now, we can write our first page in the content</code> folder. Choose a name for your file. We’ll choose first-post.md</code>, and within it, we’ll write some text: Try to write your own title and text, so that you can see Zola respond to your wishes. +++ title = "My First Post" date = 2023-04-19 +++ Hi, this is my first post! </code></pre> The section between the two sets of plus symbols (+++</code>) is known as the frontmatter. Different sites use different styles for frontmatter. The frontmatter is used to specify basic information about your post, including some custom information you can pick for yourself. The title field is what is accessed by {{ page.title }}</code> in your page.html</code> template, and everything outside the frontmatter is the content, accessed by {{ page.content }}</code>. If you run zola build</code>, and open the public</code> folder, you’ll see a first-post/</code> folder, within which is an index.html</code> file. This is done because opening first-post.html</code> would show the .html</code> at the end of the url, which people might find ugly because they’re not used to seeing it, and it’s something that a visitor to your site doesn’t need to know. It works because whenever the browser opens a folder on a server, it automatically shows any index.html</code> file within that folder. This will not work when opening a folder on your computer. In that case the browser shows a list of files in that folder. If you open first-post/index.html</code> in your editor, you’ll see the following: <h1>My First Post</h1> &lt;p&gt;Hi! This is my first post.&lt;&#x2F;p&gt; </code></pre> Open the file in your browser to see exactly what it’s doing. page.content</code> has basically created the text Hi! This is my first post</code>, and Zola makes sure by default that random text is not converted into HTML elements, otherwise it might mess up your page. To correct the issue, edit your page.html</code> file in the templates</code> folder. Change {{ page.content }}</code> to {{ page.content | safe }}</code>. The safe command tells Zola that page.content (or whatever comes before the |</code>) is properly formatted HTML, and is thus safe to show as is. Run zola build</code> again and check the file in your editor and the browser to make sure that everything is working. Your editor should now show the following: <h1>My First Post</h1> <p>Hi! This is my first post.</p> </code></pre> Feel free to create a second post to test it out further. Static Files🔗</a></h2> The static folder is a good place to put your style.css</code>. Just put body { background: cyan; }</code> to test it out. Remember to edit your template file so that it links to the CSS file: <link rel="stylesheet" href="../style.css"> <h1>{{ page.title }}</h1> {{ page.content | safe }} </code></pre> Run zola build</code> and refresh the browser page to review your changes. Actually Using Zola🔗</a></h2> I explained things using the slightly cumbersome way so you could see the things I explain for yourself, and I omitted several other features that were not necessary to explain the main components. The first thing to know is that zola serve</code> creates a local url that you can open in your browser, and whenever you save changes to any of your files, Zola will refresh the page and serve any new pages that you create. You don’t have to run zola build</code> and manually refresh the page, so you can focus on simply editing your website while Zola does the rest of the work. Kinds of Magic 2023-04-18T15:45:50+00:00 This is a musing about apenwarr’s post</a> on AI and magic, and related things. It’s more of an idea I had related to it. As I was going about my day, I just thought: I thought “this is about interfaces”. There are good interfaces, and there are bad interfaces. And so, there are good kinds of magic, and there are bad kinds. Sometimes, the magic will transport you back home from work in the blink of an eye. Inside a wall. Not good. But there is good magic as well, so it’s okay.

Pranab's site

Neocities!

Loop in Gleam

Objects is modules, cuz

Arbitrary proper markup

Borrow inferrer

parsing aim logs in gleam

Connect 4 Gleam

All you need is pipes and assignment

KDL solves

Game checklist

Alden's levels

Notes on Soupault

Code, comments, data

An introduction to Soupault

Expected knowledge🔗</a></h2> the CLI</li> file paths</li> TOML and/or other config files</li> HTML</li> CSS selectors</li>

Light theme toggle

Log

2025-10-09 A little funny, a little sigh🔗</a></h2> Functional programming languages essentially allow pass around references nearly everywhere, and you can mutate pretty much anything, unless you hide it in a module.</p> That’s the funny.</p> </li>

2024-08-05 Shower thoughts🔗</a></h2> this might be my shower thoughts place</p> you could use hair ties or wrist bands to mark glasses</li>

Clean URLs: bad!

SSGs should be libraries

Metadata in Markdown

SSG attempt 1 notes

A Bean-troduction

Two random foughts

My current favourite (web)fiction

Bookmarks

Detailed military sci-fi book

Bean markup