PageSourceSearch

https://floppydisk.vercel.app/archive/

html floppydisk.vercel.app collected 2026-10-03 06:57:06 UTC 52,935 bytes, 226 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]" data-overlayscrollbars-initialize data-astro-cid-sckkx6r4 style="--bannerOffset: 30vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 250;--page-width: 75rem;"> <head><title>Archive - Floppy Disk</title><meta charset="UTF-8"><meta name="description" content="Archive - Floppy Disk"><meta name="author" content="Armin"><meta property="og:site_name" content="Floppy Disk"><meta property="og:url" content="https://floppydisk.vercel.app/archive/"><meta property="og:title" content="Archive - Floppy Disk"><meta property="og:description" content="Archive - Floppy Disk"><meta property="og:type" content="website"><meta property="og:image" content="https://floppydisk.vercel.app/images/blog/floppy-disk-banner.png"><meta name="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://floppydisk.vercel.app/archive/"><meta name="twitter:title" content="Archive - Floppy Disk"><meta name="twitter:description" content="Archive - Floppy Disk"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.13.3"><link rel="icon" href="/favicon.ico"><!-- Set the theme before the page is rendered to avoid a flash -->
1<script>(function(){const DEFAULT_THEME = "light";
2const LIGHT_MODE = "light";
3const DARK_MODE = "dark";
4const AUTO_MODE = "auto";
5const BANNER_HEIGHT_EXTEND = 30;
6const PAGE_WIDTH = 75;
7const configHue = 250;
8
9			// Load the theme from local storage
10			const theme = localStorage.getItem('theme') || DEFAULT_THEME;
11			switch (theme) {
12				case LIGHT_MODE:
13					document.documentElement.classList.remove('dark');
14					break
15				case DARK_MODE:
16					document.documentElement.classList.add('dark');
17					break
18				case AUTO_MODE:
19					if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
20						document.documentElement.classList.add('dark');
21					} else {
22						document.documentElement.classList.remove('dark');
23					}
24			}
25
26			// Load the hue from local storage
27			const hue = localStorage.getItem('hue') || configHue;
28			document.documentElement.style.setProperty('--hue', hue);
29
30			// calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text
31			let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100));
32			offset = offset - offset % 4;
33			document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
34		})();</script>
34<!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why --><link rel="alternate" type="application/rss+xml" title="Armin" href="https://floppydisk.vercel.app/rss.xml"><link rel="stylesheet" href="/_astro/Layout.DSulWsr7.css">
35<link rel="stylesheet" href="/_astro/Layout.PyhW8lyJ.css">
36<link rel="stylesheet" href="/_astro/_page_.CO27kg37.css">
37<link rel="stylesheet" href="/_astro/_page_.BJip8OSn.css">
38<link rel="stylesheet" href="/_astro/about.BtniRLn_.css">
39<style>input.svelte-1adkdfv:focus{outline:0}.search-panel.svelte-1adkdfv{max-height:calc(100vh - 100px);overflow-y:auto}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex){-webkit-appearance:none;height:1.5rem;background-image:var(--color-selection-bar);transition:background-image .15s ease-in-out}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex)::-webkit-slider-thumb{-webkit-appearance:none;height:1rem;width:.5rem;border-radius:.125rem;background:#ffffffb3;box-shadow:none}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex)::-webkit-slider-thumb:hover{background:#fffc}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex)::-webkit-slider-thumb:active{background:#fff9}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex)::-moz-range-thumb{-webkit-appearance:none;height:1rem;width:.5rem;border-radius:.125rem;border-width:0;background:#ffffffb3;box-shadow:none}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex)::-moz-range-thumb:hover{background:#fffc}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex)::-moz-range-thumb:active{background:#fff9}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex)::-ms-thumb{-webkit-appearance:none;height:1rem;width:.5rem;border-radius:.125rem;background:#ffffffb3;box-shadow:none}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex)::-ms-thumb:hover{background:#fffc}#display-setting.svelte-1s19bex input[type=range]:where(.svelte-1s19bex)::-ms-thumb:active{background:#fff9}
40</style>
40<script type="module" src="/_astro/page.Z8IJTFqj.js"></script>
40</head> <body class=" min-h-screen transition " data-overlayscrollbars-initialize data-astro-cid-sckkx6r4 style="--bannerOffset: 30vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 250;--page-width: 75rem;"> <div id="config-carrier" data-hue="250"></div>    <div id="top-row" class="z-50 pointer-events-none relative transition-all duration-700 max-w-[var(--page-width)] px-0 md:px-4 mx-auto"> <div id="navbar-wrapper" class="pointer-events-auto sticky top-0 transition-all"> <div id="navbar" class="z-50 onload-animation"> <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation --> <div class="card-base !overflow-visible max-w-[var(--page-width)] h-[4.5rem] !rounded-t-none mx-auto flex items-center justify-between px-4"> <a href="/" class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95"> <div class="flex flex-row text-[var(--primary)] items-center text-md"> <svg width="1em" height="1em" class="text-[1.75rem] mb-1 mr-2" data-icon="material-symbols:home-outline-rounded">   <symbol id="ai:material-symbols:home-outline-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"/></symbol><use href="#ai:material-symbols:home-outline-rounded"></use>  </svg> Floppy Disk </div> </a> <div class="hidden md:flex"> <a aria-label="Home" href="/" class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"> <div class="flex items-center"> Home  </div> </a><a aria-label="Archive" href="/archive/" class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"> <div class="flex items-center"> Archive  </div> </a><a aria-label="About" href="/about/" class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"> <div class="flex items-center"> About  </div> </a><a aria-label="GitHub" href="https://github.com/0xDeviI" target="_blank" class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"> <div class="flex items-center"> GitHub <svg width="1em" height="1em" class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]" data-icon="fa6-solid:arrow-up-right-from-square">   <symbol id="ai:fa6-solid:arrow-up-right-from-square" viewBox="0 0 512 512"><path fill="currentColor" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32zM80 32C35.8 32 0 67.8 0 112v320c0 44.2 35.8 80 80 80h320c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v112c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h112c17.7 0 32-14.3 32-32s-14.3-32-32-32z"/></symbol><use href="#ai:fa6-solid:arrow-up-right-from-square"></use>  </svg> </div> </a> </div> <div class="flex"> <!--<SearchPanel client:load>--> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
40<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script>
40<script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
40<astro-island uid="2tWlKS" component-url="/_astro/Search.D5HcbXM1.js" component-export="default" renderer-url="/_astro/client.svelte.DOad_iQG.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;Search&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island> <button aria-label="Display Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="display-settings-switch"> <svg width="1em" height="1em" class="text-[1.25rem]" data-icon="material-symbols:palette-outline">   <symbol id="ai:material-symbols:palette-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.813-3.9t2.2-3.175T8.25 2.788T12.2 2q2 0 3.775.688t3.113 1.9t2.125 2.875T22 11.05q0 2.875-1.75 4.413T16 17h-1.85q-.225 0-.312.125t-.088.275q0 .3.375.863t.375 1.287q0 1.25-.687 1.85T12 22m-5.5-9q.65 0 1.075-.425T8 11.5t-.425-1.075T6.5 10t-1.075.425T5 11.5t.425 1.075T6.5 13m3-4q.65 0 1.075-.425T11 7.5t-.425-1.075T9.5 6t-1.075.425T8 7.5t.425 1.075T9.5 9m5 0q.65 0 1.075-.425T16 7.5t-.425-1.075T14.5 6t-1.075.425T13 7.5t.425 1.075T14.5 9m3 4q.65 0 1.075-.425T19 11.5t-.425-1.075T17.5 10t-1.075.425T16 11.5t.425 1.075T17.5 13M12 20q.225 0 .363-.125t.137-.325q0-.35-.375-.825T11.75 17.3q0-1.05.725-1.675T14.25 15H16q1.65 0 2.825-.962T20 11.05q0-3.025-2.312-5.038T12.2 4Q8.8 4 6.4 6.325T4 12q0 3.325 2.338 5.663T12 20"/></symbol><use href="#ai:material-symbols:palette-outline"></use>  </svg> </button> <astro-island uid="13RqIl" component-url="/_astro/LightDarkSwitch.3pkWFdU6.js" component-export="default" renderer-url="/_astro/client.svelte.DOad_iQG.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;LightDarkSwitch&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island> <button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:!hidden" id="nav-menu-switch"> <svg width="1em" height="1em" class="text-[1.25rem]" data-icon="material-symbols:menu-rounded">   <symbol id="ai:material-symbols:menu-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z"/></symbol><use href="#ai:material-symbols:menu-rounded"></use>  </svg> </button> </div> <div id="nav-menu-panel" class="float-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2"> <a href="/" class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
41            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
42        "> <div class="transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]"> Home </div> <svg width="1em" height="1em" class="transition text-[1.25rem] text-[var(--primary)]" data-icon="material-symbols:chevron-right-rounded">   <symbol id="ai:material-symbols:chevron-right-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"/></symbol><use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg>  </a><a href="/archive/" class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
43            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
44        "> <div class="transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]"> Archive </div> <svg width="1em" height="1em" viewBox="0 0 24 24" class="transition text-[1.25rem] text-[var(--primary)]" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg>  </a><a href="/about/" class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
45            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
46        "> <div class="transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]"> About </div> <svg width="1em" height="1em" viewBox="0 0 24 24" class="transition text-[1.25rem] text-[var(--primary)]" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg>  </a><a href="https://github.com/0xDeviI" class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
47            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
48        " target="_blank"> <div class="transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]"> GitHub </div>  <svg width="1em" height="1em" viewBox="0 0 512 512" class="transition text-[0.75rem] text-black/25 dark:text-white/25 -translate-x-1" data-icon="fa6-solid:arrow-up-right-from-square">   <use href="#ai:fa6-solid:arrow-up-right-from-square"></use>  </svg> </a> </div> <astro-island uid="Z1AzHif" component-url="/_astro/DisplaySettings.IwkmO9f8.js" component-export="default" renderer-url="/_astro/client.svelte.DOad_iQG.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;DisplaySettings&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island> </div> </div> 
48<script type="module">function c(){localStorage.theme==="dark"?(document.documentElement.classList.remove("dark"),localStorage.theme="light"):(document.documentElement.classList.add("dark"),localStorage.theme="dark")}function o(){let t=document.getElementById("scheme-switch");t&&(t.onclick=function(){c()});let n=document.getElementById("display-settings-switch");n&&(n.onclick=function(){let e=document.getElementById("display-setting");e&&e.classList.toggle("float-panel-closed")});let l=document.getElementById("nav-menu-switch");l&&(l.onclick=function(){let e=document.getElementById("nav-menu-panel");e&&e.classList.toggle("float-panel-closed")})}o();</script>
48 
48<script>(function(){const scriptUrl = "/pagefind/pagefind.js";
49
50async function loadPagefind() {
51    try {
52        const response = await fetch(scriptUrl, { method: 'HEAD' });
53        if (!response.ok) {
54            throw new Error(`Pagefind script not found: ${response.status}`);
55        }
56
57        const pagefind = await import(scriptUrl);
58
59        await pagefind.options({
60            excerptLength: 20
61        });
62
63        window.pagefind = pagefind;
64
65        document.dispatchEvent(new CustomEvent('pagefindready'));
66        console.log('Pagefind loaded and initialized successfully, event dispatched.');
67    } catch (error) {
68        console.error('Failed to load Pagefind:', error);
69        window.pagefind = {
70            search: () => Promise.resolve({ results: [] }),
71            options: () => Promise.resolve(),
72        };
73        document.dispatchEvent(new CustomEvent('pagefindloaderror'));
74        console.log('Pagefind load error, event dispatched.');
75    }
76}
77
78if (document.readyState === 'loading') {
79    document.addEventListener('DOMContentLoaded', loadPagefind);
80} else {
81    loadPagefind();
82}
83})();</script>
83 </div> </div>   <div class="absolute w-full z-30 pointer-events-none" style="top: 5.5rem"> <!-- The pointer-events-none here prevent blocking the click event of the TOC --> <div class="relative max-w-[var(--page-width)] mx-auto pointer-events-auto"> <div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]
84    mx-auto gap-4 px-0 md:px-4"> <!-- Banner image credit -->  <div id="sidebar" class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation w-full"> <div class="flex flex-col w-full gap-4 mb-4"> <div class="card-base p-3"> <a aria-label="Go to About Page" href="/about/" class="group block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3
85       max-w-[12rem] lg:max-w-none overflow-hidden rounded-xl active:scale-95"> <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
86        w-full h-full z-50 flex items-center justify-center"> <svg width="1.13em" height="1em" class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl" data-icon="fa6-regular:address-card">   <symbol id="ai:fa6-regular:address-card" viewBox="0 0 576 512"><path fill="currentColor" d="M512 80c8.8 0 16 7.2 16 16v320c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16zM64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm144 224a64 64 0 1 0 0-128a64 64 0 1 0 0 128m-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80zm200-144c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24z"/></symbol><use href="#ai:fa6-regular:address-card"></use>  </svg> </div> <div class="mx-auto lg:w-full h-full lg:mt-0  overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/images/blog/my-photo.jpg" alt="Profile Image of the Author" class="w-full h-full object-cover" style="object-position: center"> </div> </a> <div class="px-2"> <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">Armin</div> <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div> <div class="text-center text-neutral-400 mb-2.5 transition">Just a software developer.</div> <div class="flex flex-wrap gap-2 justify-center mb-1"> <a rel="me" aria-label="X" href="https://x.com/@nullbytemin" target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90"> <svg width="0.88em" height="1em" class="text-[1.5rem]" data-icon="fa6-brands:square-x-twitter">   <symbol id="ai:fa6-brands:square-x-twitter" viewBox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm297.1 84L257.3 234.6L379.4 396h-95.6L209 298.1L123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5l78.2-89.5zm-37.8 251.6L153.4 142.9h-28.3l171.8 224.7h26.3z"/></symbol><use href="#ai:fa6-brands:square-x-twitter"></use>  </svg> </a><a rel="me" aria-label="GitHub" href="https://github.com/0xDeviI" target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90"> <svg width="0.97em" height="1em" class="text-[1.5rem]" data-icon="fa6-brands:github">   <symbol id="ai:fa6-brands:github" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2"/></symbol><use href="#ai:fa6-brands:github"></use>  </svg> </a><a rel="me" aria-label="Telegram" href="https://t.me/FreeYourMalloc" target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90"> <svg width="0.97em" height="1em" class="text-[1.5rem]" data-icon="fa6-brands:telegram">   <symbol id="ai:fa6-brands:telegram" viewBox="0 0 496 512">
86<path fill="currentColor" d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248s248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3c-3.476 18.584-10.322 24.816-16.948 25.425c-14.4 1.326-25.338-9.517-39.287-18.661c-21.827-14.308-34.158-23.215-55.346-37.177c-24.485-16.135-8.612-25 5.342-39.5c3.652-3.793 67.107-61.51 68.335-66.746c.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142q-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123c-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7q108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789c2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716a43.8 43.8 0 0 1 .417 9.769"/></symbol><use href="#ai:fa6-brands:telegram"></use>  </svg> </a>  </div> </div> </div> </div> <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4"> <widget-layout data-id="categories" data-is-collapsed="true" class="pb-4 card-base onload-animation" style="animation-delay: 150ms; --collapsedHeight: 7.5rem;" data-astro-cid-ucso7hve="true"> <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2
87        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
88        before:absolute before:left-[-16px] before:top-[5.5px]" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;">Categories</div> <div id="categories" class="collapse-wrapper px-4 overflow-hidden collapsed" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;"> <a href="/archive/?category=Algorithms" aria-label="View all posts in the Algorithms category"> <button class="
89            w-full
90            h-10
91            rounded-lg
92            bg-none
93            hover:bg-[var(--btn-plain-bg-hover)]
94            active:bg-[var(--btn-plain-bg-active)]
95            transition-all
96            pl-2
97            hover:pl-3
98            
99            text-neutral-700
100            hover:text-[var(--primary)]
101            dark:text-neutral-300
102            dark:hover:text-[var(--primary)]
103        "> <div class="flex items-center justify-between relative mr-2"> <div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis  "> Algorithms </div> <div class="transition px-2 h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
104                    text-[var(--btn-content)] dark:text-[var(--deep-text)]
105                    bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)]
106                    flex items-center justify-center"> 2 </div> </div> </button> </a><a href="/archive/?category=Cyber%20Security" aria-label="View all posts in the Cyber Security category"> <button class="
107            w-full
108            h-10
109            rounded-lg
110            bg-none
111            hover:bg-[var(--btn-plain-bg-hover)]
112            active:bg-[var(--btn-plain-bg-active)]
113            transition-all
114            pl-2
115            hover:pl-3
116            
117            text-neutral-700
118            hover:text-[var(--primary)]
119            dark:text-neutral-300
120            dark:hover:text-[var(--primary)]
121        "> <div class="flex items-center justify-between relative mr-2"> <div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis  "> Cyber Security </div> <div class="transition px-2 h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
122                    text-[var(--btn-content)] dark:text-[var(--deep-text)]
123                    bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)]
124                    flex items-center justify-center"> 1 </div> </div> </button> </a><a href="/archive/?category=Literature" aria-label="View all posts in the Literature category"> <button class="
125            w-full
126            h-10
127            rounded-lg
128            bg-none
129            hover:bg-[var(--btn-plain-bg-hover)]
130            active:bg-[var(--btn-plain-bg-active)]
131            transition-all
132            pl-2
133            hover:pl-3
134            
135            text-neutral-700
136            hover:text-[var(--primary)]
137            dark:text-neutral-300
138            dark:hover:text-[var(--primary)]
139        "> <div class="flex items-center justify-between relative mr-2"> <div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis  "> Literature </div> <div class="transition px-2 h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
140                    text-[var(--btn-content)] dark:text-[var(--deep-text)]
141                    bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)]
142                    flex items-center justify-center"> 1 </div> </div> </button> </a><a href="/archive/?category=Podcast" aria-label="View all posts in the Podcast category"> <button class="
143            w-full
144            h-10
145            rounded-lg
146            bg-none
147            hover:bg-[var(--btn-plain-bg-hover)]
148            active:bg-[var(--btn-plain-bg-active)]
149            transition-all
150            pl-2
151            hover:pl-3
152            
153            text-neutral-700
154            hover:text-[var(--primary)]
155            dark:text-neutral-300
156            dark:hover:text-[var(--primary)]
157        "> <div class="flex items-center justify-between relative mr-2"> <div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis  "> Podcast </div> <div class="transition px-2 h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
158                    text-[var(--btn-content)] dark:text-[var(--deep-text)]
159                    bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)]
160                    flex items-center justify-center"> 1 </div> </div> </button> </a><a href="/archive/?category=Python" aria-label="View all posts in the Python category"> <button class="
161            w-full
162            h-10
163            rounded-lg
164            bg-none
165            hover:bg-[var(--btn-plain-bg-hover)]
166            active:bg-[var(--btn-plain-bg-active)]
167            transition-all
168            pl-2
169            hover:pl-3
170            
171            text-neutral-700
172            hover:text-[var(--primary)]
173            dark:text-neutral-300
174            dark:hover:text-[var(--primary)]
175        "> <div class="flex items-center justify-between relative mr-2"> <div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis  "> Python </div> <div class="transition px-2 h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
176                    text-[var(--btn-content)] dark:text-[var(--deep-text)]
177                    bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)]
178                    flex items-center justify-center"> 2 </div> </div> </button> </a><a href="/archive/?category=Resistance" aria-label="View all posts in the Resistance category"> <button class="
179            w-full
180            h-10
181            rounded-lg
182            bg-none
183            hover:bg-[var(--btn-plain-bg-hover)]
184            active:bg-[var(--btn-plain-bg-active)]
185            transition-all
186            pl-2
187            hover:pl-3
188            
189            text-neutral-700
190            hover:text-[var(--primary)]
191            dark:text-neutral-300
192            dark:hover:text-[var(--primary)]
193        "> <div class="flex items-center justify-between relative mr-2"> <div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis  "> Resistance </div> <div class="transition px-2 h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
194                    text-[var(--btn-content)] dark:text-[var(--deep-text)]
195                    bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)]
196                    flex items-center justify-center"> 1 </div> </div> </button> </a><a href="/archive/?category=Steganography" aria-label="View all posts in the Steganography category"> <button class="
197            w-full
198            h-10
199            rounded-lg
200            bg-none
201            hover:bg-[var(--btn-plain-bg-hover)]
202            active:bg-[var(--btn-plain-bg-active)]
203            transition-all
204            pl-2
205            hover:pl-3
206            
207            text-neutral-700
208            hover:text-[var(--primary)]
209            dark:text-neutral-300
210            dark:hover:text-[var(--primary)]
211        "> <div class="flex items-center justify-between relative mr-2"> <div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis  "> Steganography </div> <div class="transition px-2 h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
212                    text-[var(--btn-content)] dark:text-[var(--deep-text)]
213                    bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)]
214                    flex items-center justify-center"> 1 </div> </div> </button> </a> </div> <div class="expand-btn px-4 -mb-2" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;"> <button class="btn-plain rounded-lg w-full h-9" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;"> <div class="text-[var(--primary)] flex items-center justify-center gap-2 -translate-x-2" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;"> <svg width="1em" height="1em" class="text-[1.75rem]" data-astro-cid-ucso7hve="true" data-icon="material-symbols:more-horiz">   <symbol id="ai:material-symbols:more-horiz" viewBox="0 0 24 24">
214<path fill="currentColor" d="M6 14q-.825 0-1.412-.587T4 12t.588-1.412T6 10t1.413.588T8 12t-.587 1.413T6 14m6 0q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m6 0q-.825 0-1.412-.587T16 12t.588-1.412T18 10t1.413.588T20 12t-.587 1.413T18 14"/></symbol><use href="#ai:material-symbols:more-horiz"></use>  </svg> More </div> </button> </div> </widget-layout>  
214<script type="module">class d extends HTMLElement{constructor(){if(super(),this.dataset.isCollapsed!=="true")return;const e=this.dataset.id,t=this.querySelector(".expand-btn"),s=this.querySelector(`#${e}`);t.addEventListener("click",()=>{s.classList.remove("collapsed"),t.classList.add("hidden")})}}customElements.get("widget-layout")||customElements.define("widget-layout",d);</script>
214 <widget-layout data-id="tags" data-is-collapsed="false" class="pb-4 card-base onload-animation" style="animation-delay: 200ms; --collapsedHeight: 7.5rem;" data-astro-cid-ucso7hve="true"> <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2
215        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
216        before:absolute before:left-[-16px] before:top-[5.5px]" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;">Tags</div> <div id="tags" class="collapse-wrapper px-4 overflow-hidden" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;">  <div class="flex gap-2 flex-wrap"> <a href="/archive/?tag=%2Fvar%2Flog" aria-label="View all posts with the /var/log tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  /var/log </a><a href="/archive/?tag=AI" aria-label="View all posts with the AI tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  AI </a><a href="/archive/?tag=APIs" aria-label="View all posts with the APIs tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  APIs </a><a href="/archive/?tag=Backend" aria-label="View all posts with the Backend tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Backend </a><a href="/archive/?tag=Cyber%20Security" aria-label="View all posts with the Cyber Security tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Cyber Security </a><a href="/archive/?tag=Drama" aria-label="View all posts with the Drama tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Drama </a><a href="/archive/?tag=Henrik%20Ibsen" aria-label="View all posts with the Henrik Ibsen tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Henrik Ibsen </a><a href="/archive/?tag=Internet%20Freedom" aria-label="View all posts with the Internet Freedom tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Internet Freedom </a><a href="/archive/?tag=Javascript" aria-label="View all posts with the Javascript tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Javascript </a><a href="/archive/?tag=Python" aria-label="View all posts with the Python tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Python </a><a href="/archive/?tag=Randomness" aria-label="View all posts with the Randomness tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Randomness </a><a href="/archive/?tag=Ransomware" aria-label="View all posts with the Ransomware tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Ransomware </a><a href="/archive/?tag=Steganography" aria-label="View all posts with the Steganography tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Steganography </a><a href="/archive/?tag=Uniqueness" aria-label="View all posts with the Uniqueness tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Uniqueness </a><a href="/archive/?tag=VPN" aria-label="View all posts with the VPN tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  VPN </a><a href="/archive/?tag=Web%20Development" aria-label="View all posts with the Web Development tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  Web Development </a> </div>  </div>  </widget-layout>   </div> </div> <main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden"> <div id="content-wrapper" class="onload-animation"> <!-- the overflow-hidden here prevent long text break the layout--> <!-- make id different from windows.swup global property -->  <astro-island uid="Z1prrM6" component-url="/_astro/ArchivePanel.cgxyN_o-.js" component-export="default" renderer-url="/_astro/client.svelte.DOad_iQG.js" props="{&quot;sortedPosts&quot;:[1,[[0,{&quot;slug&quot;:[0,&quot;dolls-house-modern-analysis&quot;],&quot;data&quot;:[0,{&quot;title&quot;:[0,&quot;A Doll&#39;s House in the 21st Century&quot;],&quot;published&quot;:[3,&quot;2025-08-25T00:00:00.000Z&quot;],&quot;draft&quot;:[0,false],&quot;description&quot;:[0,&quot;What justifies a mother abandoning her children? A 19th-century play and its modern remake give two very different answers. I explore how the need for a \&quot;reason\&quot; has completely vanished, and what that says about us now.&quot;],&quot;image&quot;:[0,&quot;/images/dolls-house.webp&quot;],&quot;tags&quot;:[1,[[0,&quot;Drama&quot;],[0,&quot;Henrik Ibsen&quot;]]],&quot;category&quot;:[0,&quot;Literature&quot;],&quot;lang&quot;:[0,&quot;&quot;],&quot;prevTitle&quot;:[0,&quot;&quot;],&quot;prevSlug&quot;:[0,&quot;&quot;],&quot;nextTitle&quot;:[0,&quot;&quot;],&quot;nextSlug&quot;:[0,&quot;&quot;]}]}],[0,{&quot;slug&quot;:[0,&quot;varlog/ep1&quot;],&quot;data&quot;:[0,{&quot;title&quot;:[0,&quot;قسمت اول: چالش های آی‌تی؛ یادگیری، دانشگاه، کار و سربازی&quot;],&quot;published&quot;:[3,&quot;2024-10-04T00:00:00.000Z&quot;],&quot;draft&quot;:[0,false],&quot;description&quot;:[0,&quot;
216تو اولین قسمت پادکست #ورلاگ سعی کردیم در مورد چالش های آی‌تی صحبت کنیم و این مسیر رو نه فقط به عنوان علاقه، بلکه به عنوان یک شغل ببینیم و بفهمیم برای ورود بهش نیاز داریم چی بدونیم&quot;],&quot;image&quot;:[0,&quot;/images/blog/varlog-logo.jpg&quot;],&quot;tags&quot;:[1,[[0,&quot;/var/log&quot;]]],&quot;category&quot;:[0,&quot;Podcast&quot;],&quot;lang&quot;:[0,&quot;&quot;],&quot;prevTitle&quot;:[0,&quot;&quot;],&quot;prevSlug&quot;:[0,&quot;&quot;],&quot;nextTitle&quot;:[0,&quot;&quot;],&quot;nextSlug&quot;:[0,&quot;&quot;]}]}],[0,{&quot;slug&quot;:[0,&quot;create-your-own-vpn&quot;],&quot;data&quot;:[0,{&quot;title&quot;:[0,&quot;Create your own VPN to bypass internet censorship&quot;],&quot;published&quot;:[3,&quot;2023-12-04T00:00:00.000Z&quot;],&quot;draft&quot;:[0,false],&quot;description&quot;:[0,&quot;An easy-to-use approach to create your own VPN in order to bypass internet censorship and government restrictions.&quot;],&quot;image&quot;:[0,&quot;/images/own-vpn-images/internet-ban.jpg&quot;],&quot;tags&quot;:[1,[[0,&quot;VPN&quot;],[0,&quot;Internet Freedom&quot;]]],&quot;category&quot;:[0,&quot;Resistance&quot;],&quot;lang&quot;:[0,&quot;&quot;],&quot;prevTitle&quot;:[0,&quot;&quot;],&quot;prevSlug&quot;:[0,&quot;&quot;],&quot;nextTitle&quot;:[0,&quot;&quot;],&quot;nextSlug&quot;:[0,&quot;&quot;]}]}],[0,{&quot;slug&quot;:[0,&quot;coding-a-ransomware-is-easier-than-you-think&quot;],&quot;data&quot;:[0,{&quot;title&quot;:[0,&quot;Coding a Ransomware Is Easier Than You Think&quot;],&quot;published&quot;:[3,&quot;2022-06-09T00:00:00.000Z&quot;],&quot;draft&quot;:[0,false],&quot;description&quot;:[0,&quot;The only way to understand how Ransomwares work is to design one!&quot;],&quot;image&quot;:[0,&quot;/images/ransomware/cover.webp&quot;],&quot;tags&quot;:[1,[[0,&quot;Cyber Security&quot;],[0,&quot;Python&quot;],[0,&quot;Ransomware&quot;]]],&quot;category&quot;:[0,&quot;Cyber Security&quot;],&quot;lang&quot;:[0,&quot;&quot;],&quot;prevTitle&quot;:[0,&quot;&quot;],&quot;prevSlug&quot;:[0,&quot;&quot;],&quot;nextTitle&quot;:[0,&quot;&quot;],&quot;nextSlug&quot;:[0,&quot;&quot;]}]}],[0,{&quot;slug&quot;:[0,&quot;how-much-faster-you-need-to-be-to-beat-ai&quot;],&quot;data&quot;:[0,{&quot;title&quot;:[0,&quot;How Much Faster Do You Need to Be to Beat AI in Tic-Tac-Toe?&quot;],&quot;published&quot;:[3,&quot;2022-06-02T00:00:00.000Z&quot;],&quot;draft&quot;:[0,false],&quot;description&quot;:[0,&quot;You Human! Can you confront AI?&quot;],&quot;image&quot;:[0,&quot;/images/tttai/cover.webp&quot;],&quot;tags&quot;:[1,[[0,&quot;AI&quot;],[0,&quot;Javascript&quot;]]],&quot;category&quot;:[0,&quot;Algorithms&quot;],&quot;lang&quot;:[0,&quot;&quot;],&quot;prevTitle&quot;:[0,&quot;&quot;],&quot;prevSlug&quot;:[0,&quot;&quot;],&quot;nextTitle&quot;:[0,&quot;&quot;],&quot;nextSlug&quot;:[0,&quot;&quot;]}]}],[0,{&quot;slug&quot;:[0,&quot;pixcode-everything-is-in-the-pixels&quot;],&quot;data&quot;:[0,{&quot;title&quot;:[0,&quot;Pixcode: Everything is in the Pixels&quot;],&quot;published&quot;:[3,&quot;2022-05-18T00:00:00.000Z&quot;],&quot;draft&quot;:[0,false],&quot;description&quot;:[0,&quot;Convert all sorts of digital files to visible images&quot;],&quot;image&quot;:[0,&quot;/images/pixcode/cover.webp&quot;],&quot;tags&quot;:[1,[[0,&quot;Python&quot;],[0,&quot;Steganography&quot;]]],&quot;category&quot;:[0,&quot;Steganography&quot;],&quot;lang&quot;:[0,&quot;&quot;],&quot;prevTitle&quot;:[0,&quot;&quot;],&quot;prevSlug&quot;:[0,&quot;&quot;],&quot;nextTitle&quot;:[0,&quot;&quot;],&quot;nextSlug&quot;:[0,&quot;&quot;]}]}],[0,{&quot;slug&quot;:[0,&quot;setup-simple-api-using-python-and-flask-p2&quot;],&quot;data&quot;:[0,{&quot;title&quot;:[0,&quot;Setup a Simple API Using Python and Flask – Part 2&quot;],&quot;published&quot;:[3,&quot;2022-05-16T00:00:00.000Z&quot;],&quot;draft&quot;:[0,false],&quot;description&quot;:[0,&quot;Learn how to create a simple, functional API in minutes using Python and Flask 🚀&quot;],&quot;image&quot;:[0,&quot;/images/setup-api-flask/cover.webp&quot;],&quot;tags&quot;:[1,[[0,&quot;APIs&quot;],[0,&quot;Backend&quot;],[0,&quot;Python&quot;],[0,&quot;Web Development&quot;]]],&quot;category&quot;:[0,&quot;Python&quot;],&quot;lang&quot;:[0,&quot;&quot;],&quot;prevTitle&quot;:[0,&quot;&quot;],&quot;prevSlug&quot;:[0,&quot;&quot;],&quot;nextTitle&quot;:[0,&quot;&quot;],&quot;nextSlug&quot;:[0,&quot;&quot;]}]}],[0,{&quot;slug&quot;:[0,&quot;zuid-much-more-unique-identifiers&quot;],&quot;data&quot;:[0,{&quot;title&quot;:[0,&quot;ZUID: Generating Even More Unique Identifiers&quot;],&quot;published&quot;:[3,&quot;2022-05-15T00:00:00.000Z&quot;],&quot;draft&quot;:[0,false],&quot;description&quot;:[0,&quot;How to generate even move unique identifiers by altering the logic behind UID systems&quot;],&quot;image&quot;:[0,&quot;/images/zuid/cover.webp&quot;],&quot;tags&quot;:[1,[[0,&quot;Randomness&quot;],[0,&quot;Uniqueness&quot;]]],&quot;category&quot;:[0,&quot;Algorithms&quot;],&quot;lang&quot;:[0,&quot;&quot;],&quot;prevTitle&quot;:[0,&quot;&quot;],&quot;prevSlug&quot;:[0,&quot;&quot;],&quot;nextTitle&quot;:[0,&quot;&quot;],&quot;nextSlug&quot;:[0,&quot;&quot;]}]}],[0,{&quot;slug&quot;:[0,&quot;setup-simple-api-using-python-and-flask&quot;],&quot;data&quot;:[0,{&quot;title&quot;:[0,&quot;Setup simple API using Python and Flask&quot;],&quot;published&quot;:[3,&quot;2022-05-15T00:00:00.000Z&quot;],&quot;draft&quot;:[0,false],&quot;description&quot;:[0,&quot;Learn how to create a simple, functional API in minutes using Python and Flask 🚀&quot;],&quot;image&quot;:[0,&quot;/images/setup-api-flask/cover.webp&quot;],&quot;tags&quot;:[1,[[0,&quot;APIs&quot;],[0,&quot;Backend&quot;],[0,&quot;Python&quot;],[0,&quot;Web Development&quot;]]],&quot;category&quot;:[0,&quot;Python&quot;],&quot;lang&quot;:[0,&quot;&quot;],&quot;prevTitle&quot;:[0,&quot;&quot;],&quot;prevSlug&quot;:[0,&quot;&quot;],&quot;nextTitle&quot;:[0,&quot;&quot;],&quot;nextSlug&quot;:[0,&quot;&quot;]}]}]]]}" ssr client="only" opts="{&quot;name&quot;:&quot;ArchivePanel&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island>  <div class="footer col-span-2 onload-animation hidden lg:block"> <!--<div class="border-t border-[var(&#45;&#45;primary)] mx-16 border-dashed py-8 max-w-[var(&#45;&#45;page-width)] flex flex-col items-center justify-center px-6">--><div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div> <!--<div class="transition bg-[oklch(92%_0.01_var(&#45;&#45;hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">--> <div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6"> <div class="transition text-50 text-sm text-center">
217&copy; <span id="copyright-year">2025</span> Armin. All Rights Reserved. /
218<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="/rss.xml">RSS</a> /
219<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="/sitemap-index.xml">Sitemap</a><br> </div> </div> </div> </div> </main> <div class="footer col-span-2 onload-animation block lg:hidden"> <!--<div class="border-t border-[var(&#45;&#45;primary)] mx-16 border-dashed py-8 max-w-[var(&#45;&#45;page-width)] flex flex-col items-center justify-center px-6">--><div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div> <!--<div class="transition bg-[oklch(92%_0.01_var(&#45;&#45;hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">--> <div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6"> <div class="transition text-50 text-sm text-center">
220&copy; <span id="copyright-year">2025</span> Armin. All Rights Reserved. /
221<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="/rss.xml">RSS</a> /
222<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="/sitemap-index.xml">Sitemap</a><br> </div> </div> </div> </div> <!-- There can't be a filter on parent element, or it will break `fixed` --><div class="back-to-top-wrapper hidden lg:block" data-astro-cid-eymb5ayk> <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="backToTop()" data-astro-cid-eymb5ayk> <button aria-label="Back to Top" class="btn-card h-[3.75rem] w-[3.75rem]" data-astro-cid-eymb5ayk> <svg width="1em" height="1em" class="mx-auto" data-astro-cid-eymb5ayk="true" data-icon="material-symbols:keyboard-arrow-up-rounded">   <symbol id="ai:material-symbols:keyboard-arrow-up-rounded" viewB
222ox="0 0 24 24"><path fill="currentColor" d="m12 10.8l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6 4.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></symbol><use href="#ai:material-symbols:keyboard-arrow-up-rounded"></use>  </svg> </button> </div> </div>  
222<script>
223function backToTop() {
224    window.scroll({ top: 0, behavior: 'smooth' });
225}
226</script>
226 </div> </div>  <div class="absolute w-full z-0 hidden 2xl:block"> <div class="relative max-w-[var(--page-width)] mx-auto"> <!-- TOC component --> <div id="toc-wrapper" class="hidden lg:block transition absolute top-0 -right-[var(--toc-width)] w-[var(--toc-width)] items-center"> <div id="toc-inner-wrapper" class="fixed top-14 w-[var(--toc-width)] h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar"> <div id="toc" class="w-full h-full transition-swup-fade "> <div class="h-8 w-full"></div> 
226<script type="module">class l extends HTMLElement{tocEl=null;visibleClass="visible";observer;anchorNavTarget=null;headingIdxMap=new Map;headings=[];sections=[];tocEntries=[];active=[];activeIndicator=null;constructor(){super(),this.observer=new IntersectionObserver(this.markVisibleSection,{threshold:0})}markVisibleSection=t=>{t.forEach(e=>{const i=e.target.children[0]?.getAttribute("id"),s=i?this.headingIdxMap.get(i):void 0;s!=null&&(this.active[s]=e.isIntersecting),e.isIntersecting&&this.anchorNavTarget==e.target.firstChild&&(this.anchorNavTarget=null)}),this.active.includes(!0)||this.fallback(),this.update()};toggleActiveHeading=()=>{let t=this.active.length-1,e=this.active.length-1,i=-1;for(;t>=0&&!this.active[t];)this.tocEntries[t].classList.remove(this.visibleClass),t--;for(;t>=0&&this.active[t];)this.tocEntries[t].classList.add(this.visibleClass),e=Math.min(e,t),i=Math.max(i,t),t--;for(;t>=0;)this.tocEntries[t].classList.remove(this.visibleClass),t--;if(e>i)this.activeIndicator?.setAttribute("style","opacity: 0");else{let s=this.tocEl?.getBoundingClientRect().top||0,n=this.tocEl?.scrollTop||0,o=this.tocEntries[e].getBoundingClientRect().top-s+n,c=this.tocEntries[i].getBoundingClientRect().bottom-s+n;this.activeIndicator?.setAttribute("style",`top: ${o}px; height: ${c-o}px`)}};scrollToActiveHeading=()=>{if(this.anchorNavTarget||!this.tocEl)return;const t=document.querySelectorAll(`#toc .${this.visibleClass}`);if(!t.length)return;const e=t[0],i=t[t.length-1],s=this.tocEl.clientHeight;let n;i.getBoundingClientRect().bottom-e.getBoundingClientRect().top<.9*s?n=e.offsetTop-32:n=i.offsetTop-s*.8,this.tocEl.scrollTo({top:n,left:0,behavior:"smooth"})};update=()=>{requestAnimationFrame(()=>{this.toggleActiveHeading(),this.scrollToActiveHeading()})};fallback=()=>{if(this.sections.length)for(let t=0;t<this.sections.length;t++){let e=this.sections[t].getBoundingClientRect().top,i=this.sections[t].getBoundingClientRect().bottom;if(this.isInRange(e,0,window.innerHeight)||this.isInRange(i,0,window.innerHeight)||e<0&&i>window.innerHeight)this.markActiveHeading(t);else if(e>window.innerHeight)break}};markActiveHeading=t=>{this.active[t]=!0};handleAnchorClick=t=>{const e=t.composedPath().find(i=>i instanceof HTMLAnchorElement);if(e){const i=decodeURIComponent(e.hash?.substring(1)),s=this.headingIdxMap.get(i);s!==void 0?this.anchorNavTarget=this.headings[s]:this.anchorNavTarget=null}};isInRange(t,e,i){return e<t&&t<i}connectedCallback(){const t=document.querySelector(".prose");t?t.addEventListener("animationend",()=>{this.init()},{once:!0}):console.debug("Animation element not found")}init(){if(this.tocEl=document.getElementById("toc-inner-wrapper"),!!this.tocEl&&(this.tocEl.addEventListener("click",this.handleAnchorClick,{capture:!0}),this.activeIndicator=document.getElementById("active-indicator"),this.tocEntries=Array.from(document.querySelectorAll("#toc a[href^='#']")),this.tocEntries.length!==0)){this.sections=new Array(this.tocEntries.length),this.headings=new Array(this.tocEntries.length);for(let t=0;t<this.tocEntries.length;t++){const e=decodeURIComponent(this.tocEntries[t].hash?.substring(1)),i=document.getElementById(e),s=i?.parentElement;i instanceof HTMLElement&&s instanceof HTMLElement&&(this.headings[t]=i,this.sections[t]=s,this.headingIdxMap.set(e,t))}this.active=new Array(this.tocEntries.length).fill(!1),this.sections.forEach(t=>this.observer.observe(t)),this.fallback(),this.update()}}disconnectedCallback(){this.sections.forEach(t=>this.observer.unobserve(t)),this.observer.disconnect(),this.tocEl?.removeEventListener("click",this.handleAnchorClick)}}customElements.get("table-of-contents")||customElements.define("table-of-contents",l);</script>
226 <div class="h-8 w-full"></div> </div> </div> </div> <!-- #toc needs to exist for Swup to work normally -->  </div> </div>  <!-- increase the page height during page transition to prevent the scrolling animation from jumping --> <div id="page-height-extend" class="hidden h-[300vh]" data-astro-cid-sckkx6r4 style="--bannerOffset: 30vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 250;--page-width: 75rem;"></div>  
226<script type="module" src="/_astro/Layout.astro_astro_type_script_index_0_lang.DAHrxWCB.js"></script>
226 
226<script type="module" src="/_astro/Layout.astro_astro_type_script_index_1_lang.CBnFfLPp.js"></script>
226</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.