project.xpub.nl/how-to-make-your-server-run.../index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How to make your server run 4x faster</title>

    <style>

    html, body {
        margin: 0;

    }

    body {
        background-color: dodgerblue;
        line-height: 1.65;
    }

    a {
        color: currentColor;
    }

    .container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    h1 {
        font-size: 4rem;
        font-family: sans-serif;
        position: relative;
        z-index: 50;
        color: white;
        margin-bottom: 0;
    }

    .subtitle {
        font-weight: bold;
        font-family: sans-serif;
        color: white;
        z-index: 50;
        font-size: 2rem;
    }

    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        hegiht: 100%;
        object-fit: contain;
    }

    #front {
        z-index: 100;
    }


    main > * {
        font-size: 1.25rem;
        padding: 0 32px;
        margin: 0 auto;
        max-width: 80ch;
    }
   
    .tutorial {
        margin-block: 96px;
        font-family: sans-serif;
        color: white;
    }

    pre {
        background-color: rgba(255,255,255,0.2);
        white-space: normal;
        padding: 24px 8px;
    }

    code {
        background-color: rgba(255,255,255,0.2);
    }

    pre code {
        background: none;
    }

    .tutorial p+p {
        margin-top: 48px;
    }

    .tutorial .note {
        display: inline-block;
        background-color: rgba(255,255,255,0.2);
        border-radius: 50%;
        padding: 4px 8px;
        margin-right: 8px;
        text-transform: uppercase;
        font-weight: bold;
    }

    </style>


</head>
<body>
    

    <header class="container">
        <img id="back" src="img/backp/0001.webp" alt="">
        <h1>How to make your server run 4x faster</h1>
        <div class="subtitle">And other <span id="first">situated</span> code documentation <span id="second">practices</span> </div>
        <img id="front" src="img/frontp/0001.webp" alt="">
    </header>


    <main>
        <section class="tutorial">
        <p>
            Open your terminal and enter the following command

        <pre>
            <code>
            curl -O https://project.xpub.nl/how-to-make-your-server-run-4x-faster/legs.stl
            </code>
        </pre>

        This will save an <code>.stl</code> file with 4x legs in your working directory. If you don't want to bother opening the command line you can just click on this <a href="https://project.xpub.nl/how-to-make-your-server-run-4x-faster/legs.stl">link</a>.  
        </p>

        <p>
        With this file you can 3d print the two pairs of legs and install them on your server. In order to do so you need to generate some <code>G-code</code> from the <code>stl</code> file. There are multiple ways of doing that, depending on the kind of printer you have access to. Check you local maker space and ask them!  
        </p>

        <p>
        Although is not mandatory, it's suggested to turn off, unplug and let the machine cool down before the upgrade. Usually servers don't like to be wabbled around while they are working on some important process. Beware that there's the risk of loosing precious data! Approach this operation with the same care and precautions of a surgery intervent. 
        </p>

        <p>
        <span class="note">note</span>remember to adjust the size of the 3d printed file to fit with the dimensions of your server! This guide is tailored to a small self-hosted Raspberry Pi 4.
        If your server is running on a different piece of hardware things could need an adjustment, however it's not in the scope of this documentation to cover all possible cases. If you are not sure about the exact proportions you can search online: <em>how wide tall and deep is my server? and why?</em> and divide the result by four (one for leg)!
        </p>
 
        <p>
         Once you installed the legs, a reboot could be necessary. 

        <pre>

            <code>sudo shutdown -r</code>

        </pre>

         If the server restarts without strange error messages, congratulations! Keep in mind that it will need a bit of time to learn how to walk while catwalking, so the increase of performance will not be instantaneous. Give it some moments to warm up and before you notice it will run 4x faster!
        </p>


        <p>


        <span class="note">warning</span>
        Although four additional legs grant way more speed, they come with a compromise on stability. Suddenly the server has four grounding points to manage, and it's center of mass is higher than before. This could cause some balance issues, and less grip onto surfaces. It's also worth mention that a server with legs doesn't really appreciate being caged in a rack, let alone in overcrowded units.  
        </p>


        </section>
    </main>

    
   <script>

        let terms; 

        const front = document.querySelector('#front')
        const back = document.querySelector('#back')
        const container = document.querySelector('.container')

        const first = document.querySelector('#first')
        const second = document.querySelector('#second')

        const totalImages = 36
        let index = 0;
        const filename = (index) => index.toString().padStart(4, '0') + '.webp'
       
        const change = (e) => {
            let newIndex = Math.floor(e.clientX / container.clientWidth * totalImages) 
                    if (newIndex != index) {
                        index = newIndex
                        let image = filename(index+1)
                        front.src = `img/frontp/${image}`
                        back.src = `img/backp/${image}`
                        first.innerText = terms[index][0]
                        second.innerText = terms[index][1]
                    }
        }

        window.addEventListener('load', async ()=> {
            terms = await fetch('terms.json').then(res=>res.json()).then(res=>res.terms)
            container.addEventListener('mousemove', (e)=> change(e))
        })

   </script>

</body>
</html>
first test and frightening sparse checkout 1 year ago			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8">`
tutorial 1 year ago			`<title>How to make your server run 4x faster</title>`
first test and frightening sparse checkout 1 year ago
			`<style>`

			`html, body {`
			`margin: 0;`
just a test 1 year ago
first test and frightening sparse checkout 1 year ago			`}`

tutorial 1 year ago			`body {`
			`background-color: dodgerblue;`
just a test 1 year ago			`line-height: 1.65;`
tutorial 1 year ago			`}`

			`a {`
			`color: currentColor;`
			`}`

first test and frightening sparse checkout 1 year ago			`.container {`
			`width: 100%;`
			`height: 100vh;`
			`display: flex;`
			`flex-direction: column;`
			`justify-content: center;`
			`align-items: center;`
			`}`


			`h1 {`
			`font-size: 4rem;`
			`font-family: sans-serif;`
			`position: relative;`
			`z-index: 50;`
			`color: white;`
			`margin-bottom: 0;`
			`}`

			`.subtitle {`
			`font-weight: bold;`
			`font-family: sans-serif;`
			`color: white;`
			`z-index: 50;`
			`font-size: 2rem;`
			`}`

			`img {`
			`position: absolute;`
			`top: 0;`
			`left: 0;`
			`width: 100%;`
			`hegiht: 100%;`
			`object-fit: contain;`
			`}`

			`#front {`
			`z-index: 100;`
			`}`


tutorial 1 year ago			`main > * {`
			`font-size: 1.25rem;`
			`padding: 0 32px;`
			`margin: 0 auto;`
			`max-width: 80ch;`
			`}`

			`.tutorial {`
			`margin-block: 96px;`
			`font-family: sans-serif;`
			`color: white;`
			`}`

			`pre {`
			`background-color: rgba(255,255,255,0.2);`
			`white-space: normal;`
			`padding: 24px 8px;`
			`}`

			`code {`
			`background-color: rgba(255,255,255,0.2);`
			`}`

			`pre code {`
			`background: none;`
			`}`

			`.tutorial p+p {`
			`margin-top: 48px;`
			`}`

			`.tutorial .note {`
			`display: inline-block;`
			`background-color: rgba(255,255,255,0.2);`
			`border-radius: 50%;`
			`padding: 4px 8px;`
			`margin-right: 8px;`
			`text-transform: uppercase;`
			`font-weight: bold;`
			`}`

first test and frightening sparse checkout 1 year ago			`</style>`


			`</head>`
			`<body>`


tutorial 1 year ago			`<header class="container">`
materials 1 year ago			`<img id="back" src="img/backp/0001.webp" alt="">`
first test and frightening sparse checkout 1 year ago			`<h1>How to make your server run 4x faster</h1>`
			`<div class="subtitle">And other <span id="first">situated</span> code documentation <span id="second">practices</span> </div>`
materials 1 year ago			`<img id="front" src="img/frontp/0001.webp" alt="">`
tutorial 1 year ago			`</header>`
first test and frightening sparse checkout 1 year ago


tutorial 1 year ago			`<main>`
			`<section class="tutorial">`
			`<p>`
			`Open your terminal and enter the following command`
first test and frightening sparse checkout 1 year ago
tutorial 1 year ago			`<pre>`
			`<code>`
			`curl -O https://project.xpub.nl/how-to-make-your-server-run-4x-faster/legs.stl`
			`</code>`
			`</pre>`
first test and frightening sparse checkout 1 year ago
tutorial 1 year ago			`This will save an <code>.stl</code> file with 4x legs in your working directory. If you don't want to bother opening the command line you can just click on this <a href="https://project.xpub.nl/how-to-make-your-server-run-4x-faster/legs.stl">link</a>.`
			`</p>`

			`<p>`
			`With this file you can 3d print the two pairs of legs and install them on your server. In order to do so you need to generate some <code>G-code</code> from the <code>stl</code> file. There are multiple ways of doing that, depending on the kind of printer you have access to. Check you local maker space and ask them!`
			`</p>`

			`<p>`
			`Although is not mandatory, it's suggested to turn off, unplug and let the machine cool down before the upgrade. Usually servers don't like to be wabbled around while they are working on some important process. Beware that there's the risk of loosing precious data! Approach this operation with the same care and precautions of a surgery intervent.`
			`</p>`

			`<p>`
			`<span class="note">note</span>remember to adjust the size of the 3d printed file to fit with the dimensions of your server! This guide is tailored to a small self-hosted Raspberry Pi 4.`
			`If your server is running on a different piece of hardware things could need an adjustment, however it's not in the scope of this documentation to cover all possible cases. If you are not sure about the exact proportions you can search online: <em>how wide tall and deep is my server? and why?</em> and divide the result by four (one for leg)!`
			`</p>`

			`<p>`
			`Once you installed the legs, a reboot could be necessary.`

			`<pre>`

			`<code>sudo shutdown -r</code>`

			`</pre>`

			`If the server restarts without strange error messages, congratulations! Keep in mind that it will need a bit of time to learn how to walk while catwalking, so the increase of performance will not be instantaneous. Give it some moments to warm up and before you notice it will run 4x faster!`
			`</p>`


			`<p>`
first test and frightening sparse checkout 1 year ago

tutorial 1 year ago			`<span class="note">warning</span>`
			`Although four additional legs grant way more speed, they come with a compromise on stability. Suddenly the server has four grounding points to manage, and it's center of mass is higher than before. This could cause some balance issues, and less grip onto surfaces. It's also worth mention that a server with legs doesn't really appreciate being caged in a rack, let alone in overcrowded units.`
			`</p>`
first test and frightening sparse checkout 1 year ago

tutorial 1 year ago			`</section>`
			`</main>`





			`<script>`

			`let terms;`

first test and frightening sparse checkout 1 year ago			`const front = document.querySelector('#front')`
			`const back = document.querySelector('#back')`
			`const container = document.querySelector('.container')`

			`const first = document.querySelector('#first')`
			`const second = document.querySelector('#second')`

			`const totalImages = 36`
			`let index = 0;`
			`const filename = (index) => index.toString().padStart(4, '0') + '.webp'`

			`const change = (e) => {`
			`let newIndex = Math.floor(e.clientX / container.clientWidth * totalImages)`
			`if (newIndex != index) {`
			`index = newIndex`
			`let image = filename(index+1)`
materials 1 year ago			front.src = `img/frontp/${image}`
			back.src = `img/backp/${image}`
first test and frightening sparse checkout 1 year ago			`first.innerText = terms[index][0]`
			`second.innerText = terms[index][1]`
			`}`
			`}`

			`window.addEventListener('load', async ()=> {`
			`terms = await fetch('terms.json').then(res=>res.json()).then(res=>res.terms)`
			`container.addEventListener('mousemove', (e)=> change(e))`
			`})`

			`</script>`

			`</body>`
			`</html>`