This site is handwritten in [featherdown] by site.author, after several [#iterations].
The core technologies of vanilla JS, CSS and HTML, are combined with a few libraries [1] to create a site that is:
- **glocal** -- runs equally well on a your //local// computer folder as on the //global// internet
- **reflective** -- many aspects of the site can be edited, live, without leaving the browser [2]
- **semi-static** -- comments and a few user-contributed elements, but without an actual backend.
## Iterations
Iterations of the whole site or of particular features are listed, most recent first.
TITLE SUMMARY SUBSEQUENT PROBLEM
Project-based organisation Pages organised by project (deeper CMS splitting, abandoning common templates), each with its own image folder -
Featherdown Smooth Fallback Fallback text (Featherdown Progressive Enhancement) now fades in gradually, thus only showing when really needed (or on very slow connections) -
Continuous rss aggregation The same for the RSS feed, which includes the changestream summary as a weekly item -
Continuous changestream aggregation Changestream aggregation is now automatically triggered on push, on the server, reducing cognitive load. -
Continuous bundling The bundle script runs now only in the server, triggered by each push (instead of locally and manually). -
Redirects Server-side redirects serve short memorable urls for pages stored in different folders. Internal links may fail during local navigation; changestream sources may be missed, etc..
Dual loading At runtime, the browser decides whether to load a #bundle or all modules. Errors in the bundler, if any, may pass undetected, since the bundle is effectively "forgotten".
Bundled loading Loading +100 modules starts to cause network requests to slow down page loading unacceptably. Hence a code #bundle is loaded instead. Suddenly, there are two versions to keep track of, as locally, a fresh unbundled version is needed. The bundle step is a repetitive action,and pollutes the repository.
Featherdown Progressive Enhancement In pages without javascript (or at the initial stages of loading), #featherdown code (readable by design) is dislayed, before becoming styled HTML Seeing pre-displayed text or code may be perceived as a "software error" rather than "deliberate design".
Changestream aggregation A script gathers new changes in all relevant pages into a file that can be consumed to display "recent changes" Script triggered manually
CMS splitting CMS is divided into smaller portions, loaded as-needed (e.g. by page listings). Each page loads now its own metadata, ignoring others -
Inner Link listing Internal links are now explicilty listed so they can be changed easily (shall a page move or be merged). Pages can load the link list as needed. -
Test filter & warp (Kudamono) Test all genres [matching a string|kudamono/tests?text=subw] and warp directly to a playable version of failed test case, in the [Kudamono Editor] -
Source warping Direct warping from the cursor's position in any page to the often precise line/column in source, -
Featherdown playground A live editing [featherdown playground] was devised as site.name works towards closing the feedback loop text-only editors are not ergonomic [3] unless packed with the many conveniences available in IDEs
Featherdown #feather V1 was renamed [Featherdown] and simplified for easier extensibility with fewer self-conflicts perhaps it became a bit slower
Reflective [Puzlog] Each page on the [puzlog] is generated on-demand from any puzzle page using the [kudamono editor] the link pointing to the last puzzle is always "broken", because the future does not yet exist.
Reflective RSS, Sitemap... #RSS, Sitemap and other info refreshed on-demand firefox won't remember last download location for specific pages. Should make a plugin for that.
Reflective Unit-tests User-selected outdated unit #tests are now automatically replaced in the original source, instead of copy-pasting -
Reflective Meta Tags Keyboard shortcut [[ctrl shift h]] copies the current page #META, condensed as single line -
Minimal Feather A [single-line of code|_] is sufficient to generate a full #feather page, live -
Offline archival Pages can now be archived for offline use, preserving all dynamism -
Function Download Each individual function (or set thereof) can now be exported as a standalone JS script without dependencies, to use anywhere -
Regenerative TOC The Table of Contents (#TOC) listens for new page elements, updating accordingly -
site.name domain Old github pages are now redirected to the new domain, passing on fragments and query strings. Static page hosting at [netlify.com] Google was slow to find the new pages, and sometimes still shows the old domain
Single-page app loading Trying to reduce page load time by avoiding re-drawing common page elements Conflicts with history, and especially with dynamic content rendered after page load. Some pages would become intermixed.
Automatic image resizing #Images automatically resized using the ´´Sharp´´ node library Having to manually run a script each time
CMS regeneration Short "frontmatter" instructions on each page auto-moved to the cms -
Feather V0 The #feather preprocessor was added to every post to reduce the amount of ´´$ {}´´ string template insertions Too many bugs affected layout. Paragraph detection was too eager. Debugging nightmare as it affected every page ever written.
Animated GIFs Animated gif #images recorded using the Screen2Gif program, e.g in the [Kudamono Editor] (thanks @JackLance for the tip) -
CMS inheritance #cms Page objects also use an #inheritance system, recovering info from similar page or dummy template pages -
Kudamono inheritance Kudamono genres inherit from other genres using a flexible #inheritance system, substantially decreasing amount of copy-paste Loading a genre became more complex as now several files are involved
Function Naming convention To tackle the complexity of the [kudamono editor] codebase, the [etymological programming] conventions were created -
Proper Intellisense configuration The workspace file was configured to enable project-wide function search Later on, for some reason intellisense stopped finding JS function names in HTML files
Dynamic CSS font size font sizes, padding, line height and other aspects dynamically adapt to the available viewport using #CSS variables A minimal and maximal size needs to be set for extremely small and huge viewports
Dynamic CSS Palette Using #CSS variables, the [colour palette of the site|codes/core/skin.css] could be centralised, and dynamically changed The pages may render black and white for a split-second until the colour palette loads
Live Unit testing Important or hard-to debug functions now [unit tested|test]. Unit #tests double as code comments and require no special syntax In the longer term, outdated tests were a chore to update
Progressive Web Apps Game pages received special #meta tags to transform them into PWAs Offline caching was so aggressive it generated issues that lasted for months
Dynamic TOC A Table of Contents (#TOC) is automatically added to each page Late loading elements wouldn't show
Referencing people Known people could be referenced via a shorthand, autolinking to their personal pages or profiles Link generation was inefficient and slowing page rendering considerably
Optimised SVG Icons SVG #icons now drawn directly as bezier curves using @YannArmelin's [SVG Path Editor|https://yqnn.github.io/svg-path-editor/] -
Night and Monochrome mode Using #CSS filters, 2x2=4 modes were added Images, emojis and other non-textual content would stand out undesirably
Unicode Icons Some #icons were taken from [Unicode Table|unicode-table.com] or searched via [shapecatcher|https://shapecatcher.com] Turns out those characters display differently on different devices and browsers (some even transform into emojis), because not all fonts are available, etc...
Comments and Hall of Fame Comments could be added to the [Guestbook|contacts] and winners to the [Hall of Fame], using Google Apps Script Works well for a small number of entries, but is not scalable
RSS & Sitemap Generation News items automatically produce #RSS [entries|rss.xml], and new pages automatically added to [sitemap|sitemap.xml], via node script -
Automatic Meta Tags #Meta Tags automatically etched on each page's HTML, via a node script Need to manually refresh a script for each page change
Shared HTML fragments HTML fragments shared across pages could be dynamically loaded from a central location Late loading posed some problems
News and page additions integrated Each new page generates a new item element, to be displayed in the [news] and [index] pages Draft pages were sometimes shown prematurely
Dynamic Meta Tags #Meta Tags dynamically added to each page, after loading Google fails to recognise Meta tags; no images appear in link previews
Icons and images PNG and SVG #icons and #images were drawn on Microsoft Powerpoint and exported at various sizes Image size not always optimised, cumbersome process
CMS as lazy-evaluated object By lazily evaluating the #CMS, common information could centrally saved elsewhere, avoiding rote duplication -
Glocal Javascript All pages work the same whether opened locally or served from the global internet. No need for localservers, preprocessors or complex toolchains. -
CMS as javascript object By storing page information on a #cms JS Object, a [list of all pages|tag] can be generated live In time, this object may grow to hundreds of lines
Source control Using github pages to push live page edits At some point it made sense to have a proper domain, shorter
## Outstanding problems
Some strategic aspects remain to be solved:
- **closing the editing cycle** -- it should be possible to update every single aspect of the site, offline, without leaving the browser
- **futureproofing** -- how to protect old pages from newer features, and their inevitable bugs, without simply creating an archival copy of the entire codebase?
- **link rot** -- how to ensure outgoing links do not disappear in the future? (perhaps autolinking to archive.org? otherwise the only solution is to periodically scan the entire site for links, load them, store some hash, and regularly report hash changes for manual review)
- **energy efficiency** -- when multiple users render the exact same page on their computers, they are wasting duplicate computational resources.
- **browser whims** -- how long will it take until a random browser feature will be deprecated, breaking the site?
## Alternatives for resilience
Localservers accepted Support for [VSCode preview server|https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server] added [4]
Githubless Using VSCode and Git, Github desktop is no longer necessary
^^^^^^^^^^^^^^^^^^
1 Specialised external libraries include: [ToneJS|https://tonejs.github.io/], [JSZip|https://stuk.github.io/jszip/], [Puzzlescript|www.puzzlescript.net]
2 Using the command line is //less// powerful than any HTML interface (it lacks visual feedback and single click convenience); the only (fading) advantage being direct access to the filesystem
3 See the useful shortcuts in this [memo]
4 On Firefox, setting ´´privacy.file_unique_origin´´ to false disables CORS for local files, if localserver is not an option; on chrome a special flag can be set as well.