Minimal Website Tricks
This commit is contained in:
parent
51a52c3e62
commit
de973282c9
|
|
@ -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>Web Development</h2><ul class="index"><li><a href="minimal-website-usable.html">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>Chemistry</h2><ul class="index"><li><a href="cursed-organic-chemicals.html">Cursed Organic Chemicals</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.html">How to make a minimal website usable</a></li><li><a href="minimal-website-tricks.html">Tips & Tricks for creating a minimal website</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>Chemistry</h2><ul class="index"><li><a href="cursed-organic-chemicals.html">Cursed Organic Chemicals</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>
|
||||
|
|
@ -40,6 +40,8 @@ block content
|
|||
ul.index
|
||||
li
|
||||
a(href="minimal-website-usable.html") How to make a minimal website usable
|
||||
li
|
||||
a(href="minimal-website-tricks.html") Tips & Tricks for creating a minimal website
|
||||
h2 Rants
|
||||
ul.index
|
||||
li
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<!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>Tips & Tricks for creating a minimal website | 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>Tips & Tricks for creating a minimal website</h1><p>When trying to make a website small, we need to make sacrifices. Sure, the default fonts are quite ugly, but is it worth spending several hundred kilobytes on a random webfont that nobody will notice anyway? Here are some ways to solve common problems that would otherwise require adding huge assets.</p><h2>Unicode icons</h2><p>If you want icons on your site, there are a few ways to get them. The most common is an icon font. Obviously, that's not what we want — they're usually very heavy. Some of them have the option to download only the icons you need. However, then you need to get a new copy of the font every time you want to introduce a new icon, which gets annoying fast.</p><p>Another option is SVG. That's nice for standalone icon, but it's really tricky to make it look good next to text. Also, SVG icon packs often either have too few icons or mix icons with different styles, which doesn't look good.</p><p>Fortunately, if we get back to the idea of icon fonts, it turns out that there are already many characters that can be used as icons! Do you need a warning sign? Here you go: <code>⚠ U+26A0 Warning Sign</code>. How about a checkmark? No problem: <code>✓ U+2713 Checkmark</code>. Sometimes you'll have to get a little creative. For example, there's no “external link” icon, but <code>➚ U+279A Heavy North East Arrow</code> works just fine. Or if you need a hamburger menu icon, there is the interestingly named <code>☰ U+2630 Trigram for Heaven</code>. I recommend the <a href="https://unicode-table.com/en/">Unicode Table</a> website for looking up Unicode icons.</p><h2>SVG images</h2><p>This should go without saying, but whenever you need a simple raster image, use the SVG format. It's lightweight, especially if you write it yourself, and you can embed it directly in HTML, so you don't even need an <code><img></code> tag.</p><h2>Recommended font stacks</h2><p>The default fonts are ugly, but you can at least try to find a good-looking font on the user's device. Here are two nice font stacks, courtesy of the <a href="https://512kb.club/faq">512 KB Club</a>: <pre><code># Sans-serif font stack
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
|
||||
|
||||
# Serif font stack
|
||||
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
</code></pre></p><h2>Choose your framework</h2><p>You don't need JavaScript for writing articles, but when you want to make something interactive, you'll have to get your hands dirty. Unfortunately, making web apps in plain JS is quite painful — its mechanisms for interacting between the page and the logic are rather rudimentary. There are many frameworks that try to make this situation more pleasant, but they involve inserting a sizable script into your page. I personally like <a href="https://v3.vuejs.org/">Vue 3</a>, which is not that bad when it comes to size, but it's really overkill for simple pages. Here is a selection of similar frameworks in decreasing order of size and features:</p><h3><a href="https://v3.vuejs.org/">Vue 3</a></h3><p>Size: 125 KB minified (<a href="https://cdn.jsdelivr.net/npm/vue@3.2.9/dist/vue.esm-browser.prod.js">3.2.9 production version, ES6 module</a>)</p><ul><li>Reactive templating system</li><li>Components</li><li>Custom events</li><li>Single file components</li><li>Transitions</li><li>Async support</li><li>Routing</li><li>Server-side rendering</li><li>Plugins</li></ul><h3><a href="https://alpinejs.dev/">Alpine</a></h3><p>Size: 33 KB minified (<a href="https://cdn.jsdelivr.net/npm/alpinejs@3.3.1/dist/cdn.min.js">3.3.1 ES6 module</a>)</p><ul><li>Reactive templating system</li><li>Custom events</li><li>Transitions</li><li>Async support</li><li>Safe mode</li><li>Plugins</li></ul><h3><a href="https://github.com/vuejs/petite-vue">Petite Vue</a></h3><p>Size: 15 KB minified (<a href="https://cdn.jsdelivr.net/npm/petite-vue@0.2.3/dist/petite-vue.es.js">0.2.3 ES6 module</a>)</p><ul><li>Reactive templating system</li><li>Rudimentary components</li></ul><h3><a href="https://github.com/zserge/q/">Q!</a></h3><p>Size: 1 KB minified (<a href="https://cdn.jsdelivr.net/npm/@zserge/q@0.0.2/q.min.js">0.0.2</a>)</p><ul><li>Rudimentary reactive templating system</li></ul></body></html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
extends templates/main.jade
|
||||
|
||||
block title
|
||||
| Tips & Tricks for creating a minimal website | xigoi
|
||||
|
||||
block content
|
||||
h1 Tips & Tricks for creating a minimal website
|
||||
p When trying to make a website small, we need to make sacrifices. Sure, the default fonts are quite ugly, but is it worth spending several hundred kilobytes on a random webfont that nobody will notice anyway? Here are some ways to solve common problems that would otherwise require adding huge assets.
|
||||
|
||||
h2 Unicode icons
|
||||
p If you want icons on your site, there are a few ways to get them. The most common is an icon font. Obviously, that's not what we want — they're usually very heavy. Some of them have the option to download only the icons you need. However, then you need to get a new copy of the font every time you want to introduce a new icon, which gets annoying fast.
|
||||
p Another option is SVG. That's nice for standalone icon, but it's really tricky to make it look good next to text. Also, SVG icon packs often either have too few icons or mix icons with different styles, which doesn't look good.
|
||||
p
|
||||
| Fortunately, if we get back to the idea of icon fonts, it turns out that there are already many characters that can be used as icons! Do you need a warning sign? Here you go:
|
||||
code ⚠ U+26A0 Warning Sign
|
||||
| . How about a checkmark? No problem:
|
||||
code ✓ U+2713 Checkmark
|
||||
| . Sometimes you'll have to get a little creative. For example, there's no “external link” icon, but
|
||||
code ➚ U+279A Heavy North East Arrow
|
||||
| works just fine. Or if you need a hamburger menu icon, there is the interestingly named
|
||||
code ☰ U+2630 Trigram for Heaven
|
||||
| . I recommend the
|
||||
a(href="https://unicode-table.com/en/") Unicode Table
|
||||
| website for looking up Unicode icons.
|
||||
|
||||
h2 SVG images
|
||||
p
|
||||
| This should go without saying, but whenever you need a simple raster image, use the SVG format. It's lightweight, especially if you write it yourself, and you can embed it directly in HTML, so you don't even need an
|
||||
code <img>
|
||||
| tag.
|
||||
|
||||
h2 Recommended font stacks
|
||||
p
|
||||
| The default fonts are ugly, but you can at least try to find a good-looking font on the user's device. Here are two nice font stacks, courtesy of the
|
||||
a(href="https://512kb.club/faq") 512 KB Club
|
||||
| :
|
||||
pre
|
||||
code.
|
||||
# Sans-serif font stack
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
|
||||
|
||||
# Serif font stack
|
||||
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
|
||||
h2 Choose your framework
|
||||
p
|
||||
| You don't need JavaScript for writing articles, but when you want to make something interactive, you'll have to get your hands dirty. Unfortunately, making web apps in plain JS is quite painful — its mechanisms for interacting between the page and the logic are rather rudimentary. There are many frameworks that try to make this situation more pleasant, but they involve inserting a sizable script into your page. I personally like
|
||||
a(href="https://v3.vuejs.org/") Vue 3
|
||||
| , which is not that bad when it comes to size, but it's really overkill for simple pages. Here is a selection of similar frameworks in decreasing order of size and features:
|
||||
h3
|
||||
a(href="https://v3.vuejs.org/") Vue 3
|
||||
p
|
||||
| Size: 125 KB minified (
|
||||
a(href="https://cdn.jsdelivr.net/npm/vue@3.2.9/dist/vue.esm-browser.prod.js") 3.2.9 production version, ES6 module
|
||||
| )
|
||||
ul
|
||||
li Reactive templating system
|
||||
li Components
|
||||
li Custom events
|
||||
li Single file components
|
||||
li Transitions
|
||||
li Async support
|
||||
li Routing
|
||||
li Server-side rendering
|
||||
li Plugins
|
||||
h3
|
||||
a(href="https://alpinejs.dev/") Alpine
|
||||
p
|
||||
| Size: 33 KB minified (
|
||||
a(href="https://cdn.jsdelivr.net/npm/alpinejs@3.3.1/dist/cdn.min.js") 3.3.1 ES6 module
|
||||
| )
|
||||
ul
|
||||
li Reactive templating system
|
||||
li Custom events
|
||||
li Transitions
|
||||
li Async support
|
||||
li Safe mode
|
||||
li Plugins
|
||||
h3
|
||||
a(href="https://github.com/vuejs/petite-vue") Petite Vue
|
||||
p
|
||||
| Size: 15 KB minified (
|
||||
a(href="https://cdn.jsdelivr.net/npm/petite-vue@0.2.3/dist/petite-vue.es.js") 0.2.3 ES6 module
|
||||
| )
|
||||
ul
|
||||
li Reactive templating system
|
||||
li Rudimentary components
|
||||
h3
|
||||
a(href="https://github.com/zserge/q/") Q!
|
||||
p
|
||||
| Size: 1 KB minified (
|
||||
a(href="https://cdn.jsdelivr.net/npm/@zserge/q@0.0.2/q.min.js") 0.0.2
|
||||
| )
|
||||
ul
|
||||
li Rudimentary reactive templating system
|
||||
Loading…
Reference in New Issue