Skip to content

Instantly share code, notes, and snippets.

Avatar

Nick Johnstone Widdershin

View GitHub Profile
@Widdershin
Widdershin / ssr.md
Last active Jun 20, 2022
The absurd complexity of server-side rendering
View ssr.md

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 Sep 1, 2021
Example of using prism standalone
View prism-example.html
<!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");
View userChrome.css
#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;
}
View nick.nix
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;
View compile.zsh
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 \
View compile.zsh
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 \
View example.nix
anki = self.anki.overrideAttrs (oldAttrs: rec {
checkPhase = ""; # fails due to too many open files
});
View nick.nix
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
View pydt.rb
# 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>
View js-in-md-checker.md

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