Skip to content

Instantly share code, notes, and snippets.

View Widdershin's full-sized avatar

Nick Johnstone Widdershin

View GitHub Profile
@Widdershin
Widdershin / ssr.md
Last active March 8, 2024 11:21
The absurd complexity of server-side rendering

In the olden days, HTML was prepared by the server, and JavaScript was little more than a garnish, considered by some to have a soapy taste.

After a fashion, it was decided that sometimes our HTML is best rendered by JavaScript, running in a user's browser. While some would decry this new-found intimacy, the age of interactivity had begun.

But all was not right in the world. Somewhere along the way, we had slipped. Our pages went uncrawled by Bing, time to first meaningful paint grew faster than npm, and it became clear: something must be done.

And so it was decided that the applications first forged for the browser would also run on the server. We would render our HTML using the same logic on the server and the browser, and reap the advantages of both worlds. In a confusing series of events a name for this approach was agreed upon: Server-side rendering. What could go wrong?

In dark rooms, in hushed tones, we speak of colours.

@Widdershin
Widdershin / prism-example.html
Last active September 1, 2021 02:55
Example of using prism standalone
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/prism-assets/prism.js"></script>
<script type="text/javascript" src="/prism-assets/bundle.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
Prism.run(document.getElementById("root"), "/app.rb");
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
opacity: 0;
pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
visibility: collapse !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
display: none;
}
@Widdershin
Widdershin / nick.nix
Created May 30, 2019 04:35
My overlay
self: super:
{
# Install overlay:
# $ mkdir -p ~/.config/nixpkgs/overlays
# $ curl https://gist.githubusercontent.com/LnL7/570349866bb69467d0caf5cb175faa74/raw/3f3d53fe8e8713ee321ee894ecf76edbcb0b3711/lnl-overlay.nix -o ~/.config/nixpkgs/overlays/lnl.nix
userPackages = super.userPackages or {} // {
self.config.allowUnfree = true;
self.config.allowUnsupportedSystem = true;
LIBTCODDIR=/nix/store/ss5yxvyjff7f9vv8gwbagki9fg67kw9j-libtcod-1.5.1
EMCC_DEBUG=1 emcc \
-o brogue.html \
-s WASM=1 \
-Isrc/brogue -Isrc/platform \
-I$LIBTCODDIR/include \
-L. \
-L$LIBTCODDIR \
-DBROGUE_TCOD \
LIBTCODDIR=/nix/store/ss5yxvyjff7f9vv8gwbagki9fg67kw9j-libtcod-1.5.1
EMCC_DEBUG=1 emcc \
-o brogue.html \
-s WASM=1 \
-Isrc/brogue -Isrc/platform \
-I$LIBTCODDIR/include \
-L. \
-L$LIBTCODDIR \
-DBROGUE_TCOD \
anki = self.anki.overrideAttrs (oldAttrs: rec {
checkPhase = ""; # fails due to too many open files
});
self: super:
{
# Install overlay:
# $ mkdir -p ~/.config/nixpkgs/overlays
# $ curl https://gist.githubusercontent.com/LnL7/570349866bb69467d0caf5cb175faa74/raw/3f3d53fe8e8713ee321ee894ecf76edbcb0b3711/lnl-overlay.nix -o ~/.config/nixpkgs/overlays/lnl.nix
userPackages = super.userPackages or {} // {
self.config.allowUnfree = true;
# core
# requires anybar https://github.com/tonsky/AnyBar (brew cask install anybar)
# to get your player_id and your authorization_header, open the devtools and go to the network inspector
# refresh the games list, and then inspect the /games request
# set authorization_header to the value of the authorization header
# you can find your steam id in the json response of that same request
#
# to automatically update, make a cronjob
# run crontab -e and add this line
#
# * * * * ruby <path-to-this-script>

Testing JavaScript embedded in Markdown

  • Use case: Blog posts and books, not documentation for software.
  • As much code as possible should be included within the Markdown file.
  • I’m currently using § as a meta-character.
    • I’m open to alternatives. Other characters I considered: ¡ ¿ Δ ≡
    • I wanted it to be a non-ASCII character, to minimize the risk of conflicts.

Checking is opt-in