Minimal website usable
This commit is contained in:
parent
96bb376f82
commit
f5a7046f6b
|
|
@ -1 +1 @@
|
|||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/images/xigoi-thicc.svg"><link rel="stylesheet" href="/styles/main.css"><script async src="/scripts/counter.js"></script><script async src="/scripts/hover-prefetch.js"></script><title>xigoi</title></head><body><a href="/" aria-label="Go to main page"><header><svg id="xigoi-logo" width="2cm" height="2cm" viewBox="-7 -2 24 24" xmlns="http://www.w3.org/2000/svg"><title>xigoi logo</title><path d="M 0 20 L 9 8 A 5 5 0 1 0 1 8 L 4 12 A 5 5 0 0 0 8 14 A 2 2 0 0 1 10 16 A 4 4 0 0 1 2 16 A 5 5 0 0 1 3 13 A 10 10 0 0 0 5 7" stroke="#0ff" stroke-width="1"></path><circle cx="5" cy="5" r="1" fill="#f80"></circle></svg><div class="xigoi">xigoi</div></header></a><p class="warning">This website is a work in progress.</p><p><a href="https://512kb.club" class="no-icon"><img src="https://512kb.club/assets/images/green-team.svg"></a></p><p>Hi! I am <em class="xigoi">xigoi</em>. I like programming and other computer stuff, mathematics, linguistics and walking. I live in Czechia and can speak Czech, English, <a href="https://tokipona.org/">Toki Pona</a> and some German. I am a big open source enthusiast – I use <a href="https://www.linux.com/news/what-is-gnu-linux/">GNU/Linux</a>, <a href="https://www.vim.org/">Vim</a>, <a href="https://www.latex-project.org/"><span style="margin-right: -0.36em;">L</span><span style="position: relative; font-size: .7em; top: -0.4em;">A</span><span style="margin-right: -0.2em;">T</span><span style="position: relative; top: 0.2em; margin-right: -0.1em;">E</span><span>X</span></a>, <a href="https://f-droid.org/">F-Droid</a>, <a href="https://disroot.org/en">Disroot</a> and others. I'm working on <a href="http://matikuj.cz/">Matikuj</a>. I have some strong and possibly controversial <a href="opinions.html">opinions</a> about various aspects of life. On this website, you can find some things written and otherwise created by me. Happy browsing!</p><h2>Math</h2><ul class="index"><li class="wip"><a href="quantum-games.html">Quantum games</a></li><li><a href="math-notation.html">Math Notation</a></li></ul><h2>Rants</h2><ul class="index"><li><a href="opinions.html">Opinions</a></li><li class="wip"><a href="equality.html">Equality</a></li><li><a href="language-criticism/">Language Criticism</a></li></ul><h2>Fiction</h2><ul class="index"><li class="wip"><a href="susan-and-male-privilege.html">Susan and Male Privilege</a></li></ul><h2>Bingo</h2><ul class="index"><li><a href="bingo/">Bingo</a></li><li><a href="bingo/?file=woke.txt&size=7">Woke Bingo</a></li></ul><h2>About me and this site</h2><ul class="index"><li><a href="geekcode.html">Geek Code</a></li><li><a href="achievements.html">Life Achievements</a></li><li><a href="logo.html">xigoi logo</a></li><li><a href="styles/main.sass">Stylesheet (SASS)</a></li><li><a href="styles/main.css">Stylesheet (CSS)</a></li></ul><h2>Contact me</h2><ul class="index"><li>E-mail: <a href="mailto:xigoi@disroot.org">xigoi@disroot.org</a></li><li>Ruqqus: <a href="https://ruqqus.com/@xigoi">@xigoi</a></li><li>Reddit: <a href="https://www.reddit.com/user/xigoi">u/xigoi</a></li><li>Discord: xigoi#1759</li></ul></body></html>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/images/xigoi-thicc.svg"><link rel="stylesheet" href="/styles/main.css"><script async src="/scripts/counter.js"></script><script async src="/scripts/hover-prefetch.js"></script><title>xigoi</title></head><body><a href="/" aria-label="Go to main page"><header><svg id="xigoi-logo" width="2cm" height="2cm" viewBox="-7 -2 24 24" xmlns="http://www.w3.org/2000/svg"><title>xigoi logo</title><path d="M 0 20 L 9 8 A 5 5 0 1 0 1 8 L 4 12 A 5 5 0 0 0 8 14 A 2 2 0 0 1 10 16 A 4 4 0 0 1 2 16 A 5 5 0 0 1 3 13 A 10 10 0 0 0 5 7" stroke="#0ff" stroke-width="1"></path><circle cx="5" cy="5" r="1" fill="#f80"></circle></svg><div class="xigoi">xigoi</div></header></a><p class="warning">This website is a work in progress.</p><p><a href="https://512kb.club" class="no-icon"><img src="https://512kb.club/assets/images/green-team.svg"></a></p><p>Hi! I am <em class="xigoi">xigoi</em>. I like programming and other computer stuff, mathematics, linguistics and walking. I live in Czechia and can speak Czech, English, <a href="https://tokipona.org/">Toki Pona</a> and some German. I am a big open source enthusiast – I use <a href="https://www.linux.com/news/what-is-gnu-linux/">GNU/Linux</a>, <a href="https://www.vim.org/">Vim</a>, <a href="https://www.latex-project.org/"><span style="margin-right: -0.36em;">L</span><span style="position: relative; font-size: .7em; top: -0.4em;">A</span><span style="margin-right: -0.2em;">T</span><span style="position: relative; top: 0.2em; margin-right: -0.1em;">E</span><span>X</span></a>, <a href="https://f-droid.org/">F-Droid</a>, <a href="https://disroot.org/en">Disroot</a> and others. I'm working on <a href="http://matikuj.cz/">Matikuj</a>. I have some strong and possibly controversial <a href="opinions.html">opinions</a> about various aspects of life. On this website, you can find some things written and otherwise created by me. Happy browsing!</p><h2>Math</h2><ul class="index"><li class="wip"><a href="quantum-games.html">Quantum Games</a></li><li><a href="math-notation.html">Math Notation</a></li></ul><h2>Web Development</h2><ul class="index"><li><a href="minimal-website-usable">How to make a minimal website usable</a></li></ul><h2>Rants</h2><ul class="index"><li><a href="opinions.html">Opinions</a></li><li class="wip"><a href="equality.html">Equality</a></li><li><a href="language-criticism/">Language Criticism</a></li></ul><h2>Fiction</h2><ul class="index"><li class="wip"><a href="susan-and-male-privilege.html">Susan and Male Privilege</a></li></ul><h2>Bingo</h2><ul class="index"><li><a href="bingo/">Bingo</a></li><li><a href="bingo/?file=woke.txt&size=7">Woke Bingo</a></li></ul><h2>About me and this site</h2><ul class="index"><li><a href="geekcode.html">Geek Code</a></li><li><a href="achievements.html">Life Achievements</a></li><li><a href="logo.html">xigoi logo</a></li><li><a href="styles/main.sass">Stylesheet (SASS)</a></li><li><a href="styles/main.css">Stylesheet (CSS)</a></li></ul><h2>Contact me</h2><ul class="index"><li>E-mail: <a href="mailto:xigoi@disroot.org">xigoi@disroot.org</a></li><li>Ruqqus: <a href="https://ruqqus.com/@xigoi">@xigoi</a></li><li>Reddit: <a href="https://www.reddit.com/user/xigoi">u/xigoi</a></li><li>Discord: xigoi#1759</li></ul></body></html>
|
||||
|
|
@ -33,9 +33,13 @@ block content
|
|||
h2 Math
|
||||
ul.index
|
||||
li.wip
|
||||
a(href="quantum-games.html") Quantum games
|
||||
a(href="quantum-games.html") Quantum Games
|
||||
li
|
||||
a(href="math-notation.html") Math Notation
|
||||
h2 Web Development
|
||||
ul.index
|
||||
li
|
||||
a(href="minimal-website-usable") How to make a minimal website usable
|
||||
h2 Rants
|
||||
ul.index
|
||||
li
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/images/xigoi-thicc.svg"><link rel="stylesheet" href="/styles/main.css"><script async src="/scripts/counter.js"></script><script async src="/scripts/hover-prefetch.js"></script><title>How to make a minimal website usable | xigoi</title></head><body><a href="/" aria-label="Go to main page"><header><svg id="xigoi-logo" width="2cm" height="2cm" viewBox="-7 -2 24 24" xmlns="http://www.w3.org/2000/svg"><title>xigoi logo</title><path d="M 0 20 L 9 8 A 5 5 0 1 0 1 8 L 4 12 A 5 5 0 0 0 8 14 A 2 2 0 0 1 10 16 A 4 4 0 0 1 2 16 A 5 5 0 0 1 3 13 A 10 10 0 0 0 5 7" stroke="#0ff" stroke-width="1"></path><circle cx="5" cy="5" r="1" fill="#f80"></circle></svg><div class="xigoi">xigoi</div></header></a><h1>How to make a minimal website usable</h1><p>Minimal websites are cool. Most “modern” websites include a lot of unnecessary bloat with tons of tracking scripts and annoying layout elements that take up half of the page. It's nice to get rid of all of this fluff and build a website from the ground up. Even plain HTML is a big improvement; however, the resulting site will look quite ugly and have some usability problems. Here are some little bits of code that can be added to improve the experience without creating another overweight monster.</p><h2>HTML</h2><h3>Character encoding</h3><p>ASCII has been obsolete for a long time. We need Unicode, especially if using a different language than English. Put this in your <code><head></code> to use the UTF-8 encoding:<pre><code><meta charset="utf-8"></code></pre></p><h3>Viewport</h3><p>By default, pages always display in a wide format designed for desktop computers. However, browsing on phones and other smaller screens is very common nowadays. To make the page work well on them, put this in your <code><head></code> :<pre><code><meta name="viewport" content="width=device-width, initial-scale=1"></code></pre></p><h2>CSS</h2><h3>Maximum page width</h3><p>Just like there are small screens, there are also wide screens. And reading text is painful when it spans across your whole Full HD monitor. Consider setting a maximum width for your page like this:<pre><code>body {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}</code></pre>If you'd also like to prevent the page from hugging the edge of the screen on narrow devices, you can use something like this:<pre><code>body {
|
||||
width: min(800px, calc(100% - 8px));
|
||||
margin: auto;
|
||||
}</code></pre></p><h3>Line height</h3><p>Text is more readable if it's not tightly pressed on top of itself. Empirical observations suggest that 1.4 is the optimal line height:<pre><code>body {
|
||||
line-height: 1.4;
|
||||
}</code></pre></p><h3>Horizontal scrolling in code blocks</h3><p>If you're using <code><pre></code> elements on your page to include snippets of code, it can easily happen that they're too long to fit on the screen. The default behavior is to make the whole page wider, which is annoying when reading the text outside. Instead, you can allow the code blocks themselves to be scrolled horizontally without affecting what's around them:<pre><code>pre {
|
||||
overflow-x: auto;
|
||||
}</code></pre></p></body></html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
extends templates/main.jade
|
||||
|
||||
block title
|
||||
| How to make a minimal website usable | xigoi
|
||||
|
||||
block content
|
||||
h1 How to make a minimal website usable
|
||||
p Minimal websites are cool. Most “modern” websites include a lot of unnecessary bloat with tons of tracking scripts and annoying layout elements that take up half of the page. It's nice to get rid of all of this fluff and build a website from the ground up. Even plain HTML is a big improvement; however, the resulting site will look quite ugly and have some usability problems. Here are some little bits of code that can be added to improve the experience without creating another overweight monster.
|
||||
|
||||
h2 HTML
|
||||
|
||||
h3 Character encoding
|
||||
p
|
||||
| ASCII has been obsolete for a long time. We need Unicode, especially if using a different language than English. Put this in your
|
||||
code <head>
|
||||
| to use the UTF-8 encoding:
|
||||
pre
|
||||
code.
|
||||
<meta charset="utf-8">
|
||||
h3 Viewport
|
||||
p
|
||||
| By default, pages always display in a wide format designed for desktop computers. However, browsing on phones and other smaller screens is very common nowadays. To make the page work well on them, put this in your
|
||||
code <head>
|
||||
| :
|
||||
pre
|
||||
code.
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
h2 CSS
|
||||
h3 Maximum page width
|
||||
p
|
||||
| Just like there are small screens, there are also wide screens. And reading text is painful when it spans across your whole Full HD monitor. Consider setting a maximum width for your page like this:
|
||||
pre
|
||||
code.
|
||||
body {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
| If you'd also like to prevent the page from hugging the edge of the screen on narrow devices, you can use something like this:
|
||||
pre
|
||||
code.
|
||||
body {
|
||||
width: min(800px, calc(100% - 8px));
|
||||
margin: auto;
|
||||
}
|
||||
h3 Line height
|
||||
p
|
||||
| Text is more readable if it's not tightly pressed on top of itself. Empirical observations suggest that 1.4 is the optimal line height:
|
||||
pre
|
||||
code.
|
||||
body {
|
||||
line-height: 1.4;
|
||||
}
|
||||
h3 Horizontal scrolling in code blocks
|
||||
p
|
||||
| If you're using
|
||||
code <pre>
|
||||
| elements on your page to include snippets of code, it can easily happen that they're too long to fit on the screen. The default behavior is to make the whole page wider, which is annoying when reading the text outside. Instead, you can allow the code blocks themselves to be scrolled horizontally without affecting what's around them:
|
||||
pre
|
||||
code.
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/images/xigoi-thicc.svg"><link rel="stylesheet" href="/styles/main.css"><script async src="/scripts/counter.js"></script><script async src="/scripts/hover-prefetch.js"></script><link rel="stylesheet" href="/styles/katex.min.css"><script defer src="/scripts/katex.min.js" onload="renderMathInElement(document.body)"></script><title>Quantum Games | xigoi</title></head><body><a href="/" aria-label="Go to main page"><header><svg id="xigoi-logo" width="2cm" height="2cm" viewBox="-7 -2 24 24" xmlns="http://www.w3.org/2000/svg"><title>xigoi logo</title><path d="M 0 20 L 9 8 A 5 5 0 1 0 1 8 L 4 12 A 5 5 0 0 0 8 14 A 2 2 0 0 1 10 16 A 4 4 0 0 1 2 16 A 5 5 0 0 1 3 13 A 10 10 0 0 0 5 7" stroke="#0ff" stroke-width="1"></path><circle cx="5" cy="5" r="1" fill="#f80"></circle></svg><div class="xigoi">xigoi</div></header></a><h1>Quantum games</h1><h2>Quantum tic-tac-toe</h2><p>Some time ago, I discovered the game of <a href="https://en.wikipedia.org/wiki/Quantum_tic-tac-toe">quantum tic-tac-toe</a> on Quora. It's played like regular tic-tac-toe, but instead of writing one mark, each player writes two small marks labeled with a unique number, which represent a mark in superposition. There may be multiple small marks in one space and whenever they create a cycle, the player who did not create the cycle can choose the way they will be collapsed — that is, write one regular mark for each pair of small marks in the cycle. If this destroys any other small marks, their counterpart will also turn into a regular mark, and this can chain. The rulas for winning are as usual — three regular marks in a row. It may even happen that both players win at once.</p><h2>Quantum chess</h2><p>When I played quantum tic-tac-toe with my friend, the idea really intrigued us and we wondered how the same concept could apply to a more complex game. And what better game to use for this purpose than chess? So we quickly decided on the rules, took out a chessboard and started playing. Unfortunately, we didn't finish the game, but here is a rough idea of the rules:</p><ul><li>In their turn, a player can choose between doing a quantum move and a collapse.</li><li>A <dfn>quantum move</dfn> consists of choosing two moves that could be played in regular chess and writing them down. This will create two possible positions. When there are already multiple positions, the player can make any two moves that are valid in <em>some</em> positions and they will be applied to all positions where they're legal.</li><li>With a <dfn>quantum collapse</dfn>, the player can choose a quantum move and discard one of the possible moves, which will also remove all possible positions resulting from this move and makes the other move the reality. If it turns out that some other move is now impossible, it will also be discarded, and this can chain.</li><li>A player wins when the opponent's king is captured in <em>all</em> possible positions. Note that the usual rules of check and checkmate would not get on well with quantum chess where a piece may or may not be somewhere, so all rules associated with check and checkmate (such and the king being unable to move through an endangered position when castling) are done away with.</li></ul><h2>Generalized quantum games</h2><p>We soon realized that these rules are not very precise and result in a lot of ambiguity. Therefore, we decided to formalize them. However, since the quantum part is pretty much separate from the rules of normal chess, why not define it in a way that can be used for all games? (Or at least for all deterministic turn-based games.) Therefore, we came up with the concept of game quantumification.</p><p>First, we need a formal idea of a game. I haven't really studied much game theory, so excuse me for using non-standard definitions and symbols.</p><ul><li>A <dfn>game</dfn> consists of a set of states \(S\) and moves \(M\) and is played by a sequence of players \(P\).</li><li>There is always a current state \(s_c \in S\) and a current player \(p_c \in P\).</li><li>A <dfn>move</dfn> \(m \in M\) is a partial function \(S \to S\).</li><li>There is a set of <dfn>available moves</dfn> \(M_a(s_c,p_c) \subseteq M\) that depends on the current state and player. The set may be empty.</li><li>The current player is allowed to choose one move \(m \in M_a\). The current state is then changed to \(m(s_c)\) and the current played is changed based on rules that depend on the game — usually to the cyclically next player in the sequence \(P\).</li><li>Some states are <dfn>final</dfn>. When the game reaches a final state, certain players win and certain players lose, depending on the game.</li></ul></body></html>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/images/xigoi-thicc.svg"><link rel="stylesheet" href="/styles/main.css"><script async src="/scripts/counter.js"></script><script async src="/scripts/hover-prefetch.js"></script><link rel="stylesheet" href="/styles/katex.min.css"><script defer src="/scripts/katex.min.js" onload="renderMathInElement(document.body)"></script><title>Quantum Games | xigoi</title></head><body><a href="/" aria-label="Go to main page"><header><svg id="xigoi-logo" width="2cm" height="2cm" viewBox="-7 -2 24 24" xmlns="http://www.w3.org/2000/svg"><title>xigoi logo</title><path d="M 0 20 L 9 8 A 5 5 0 1 0 1 8 L 4 12 A 5 5 0 0 0 8 14 A 2 2 0 0 1 10 16 A 4 4 0 0 1 2 16 A 5 5 0 0 1 3 13 A 10 10 0 0 0 5 7" stroke="#0ff" stroke-width="1"></path><circle cx="5" cy="5" r="1" fill="#f80"></circle></svg><div class="xigoi">xigoi</div></header></a><h1>Quantum Games</h1><h2>Quantum tic-tac-toe</h2><p>Some time ago, I discovered the game of <a href="https://en.wikipedia.org/wiki/Quantum_tic-tac-toe">quantum tic-tac-toe</a> on Quora. It's played like regular tic-tac-toe, but instead of writing one mark, each player writes two small marks labeled with a unique number, which represent a mark in superposition. There may be multiple small marks in one space and whenever they create a cycle, the player who did not create the cycle can choose the way they will be collapsed — that is, write one regular mark for each pair of small marks in the cycle. If this destroys any other small marks, their counterpart will also turn into a regular mark, and this can chain. The rulas for winning are as usual — three regular marks in a row. It may even happen that both players win at once.</p><h2>Quantum chess</h2><p>When I played quantum tic-tac-toe with my friend, the idea really intrigued us and we wondered how the same concept could apply to a more complex game. And what better game to use for this purpose than chess? So we quickly decided on the rules, took out a chessboard and started playing. Unfortunately, we didn't finish the game, but here is a rough idea of the rules:</p><ul><li>In their turn, a player can choose between doing a quantum move and a collapse.</li><li>A <dfn>quantum move</dfn> consists of choosing two moves that could be played in regular chess and writing them down. This will create two possible positions. When there are already multiple positions, the player can make any two moves that are valid in <em>some</em> positions and they will be applied to all positions where they're legal.</li><li>With a <dfn>quantum collapse</dfn>, the player can choose a quantum move and discard one of the possible moves, which will also remove all possible positions resulting from this move and makes the other move the reality. If it turns out that some other move is now impossible, it will also be discarded, and this can chain.</li><li>A player wins when the opponent's king is captured in <em>all</em> possible positions. Note that the usual rules of check and checkmate would not get on well with quantum chess where a piece may or may not be somewhere, so all rules associated with check and checkmate (such and the king being unable to move through an endangered position when castling) are done away with.</li></ul><h2>Generalized quantum games</h2><p>We soon realized that these rules are not very precise and result in a lot of ambiguity. Therefore, we decided to formalize them. However, since the quantum part is pretty much separate from the rules of normal chess, why not define it in a way that can be used for all games? (Or at least for all deterministic turn-based games.) Therefore, we came up with the concept of game quantumification.</p><p>First, we need a formal idea of a game. I haven't really studied much game theory, so excuse me for using non-standard definitions and symbols.</p><ul><li>A <dfn>game</dfn> consists of a set of states \(S\) and moves \(M\) and is played by a sequence of players \(P\).</li><li>There is always a current state \(s_c \in S\) and a current player \(p_c \in P\).</li><li>A <dfn>move</dfn> \(m \in M\) is a partial function \(S \to S\).</li><li>There is a set of <dfn>available moves</dfn> \(M_a(s_c,p_c) \subseteq M\) that depends on the current state and player. The set may be empty.</li><li>The current player is allowed to choose one move \(m \in M_a\). The current state is then changed to \(m(s_c)\) and the current played is changed based on rules that depend on the game — usually to the cyclically next player in the sequence \(P\).</li><li>Some states are <dfn>final</dfn>. When the game reaches a final state, certain players win and certain players lose, depending on the game.</li></ul></body></html>
|
||||
|
|
@ -7,7 +7,7 @@ block title
|
|||
| Quantum Games | xigoi
|
||||
|
||||
block content
|
||||
h1 Quantum games
|
||||
h1 Quantum Games
|
||||
h2 Quantum tic-tac-toe
|
||||
p Some time ago, I discovered the game of
|
||||
a(href="https://en.wikipedia.org/wiki/Quantum_tic-tac-toe") quantum tic-tac-toe
|
||||
|
|
|
|||
|
|
@ -124,6 +124,10 @@ textarea {
|
|||
color: #f00;
|
||||
}
|
||||
|
||||
.index {
|
||||
list-style-type: "→ ";
|
||||
}
|
||||
|
||||
.notice {
|
||||
background-color: #007;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,6 +108,9 @@ textarea
|
|||
.error
|
||||
color: #f00
|
||||
|
||||
.index
|
||||
list-style-type: "→ "
|
||||
|
||||
.notice
|
||||
@extend %box
|
||||
&::before
|
||||
|
|
|
|||
Loading…
Reference in New Issue