Created
January 29, 2025 13:09
-
-
Save agvxov/240ce644a37b3429509575f49ddaf786 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {// examples | |
| >the goal is the same with each methodology | |
| >we have data.txt | |
| >it contains key-value pairs | |
| ¤its generated with this script | |
| { @begin=sh@ | |
| #!/bin/bash | |
| # generator.sh | |
| OUTPUT="data.txt" | |
| while true; do | |
| rm $OUTPUT | |
| for i in {0..7}; do | |
| (tr -dc A-Za-z0-9 </dev/urandom | head -c 8; echo ' : '$RANDOM ) >> $OUTPUT | |
| done | |
| sleep 5 | |
| done | |
| @end=sh@ } | |
| >each website will attempt to display the contents of data.txt | |
| } | |
| Static: | |
| >completely handwritten | |
| >old school | |
| >fast both server and client side | |
| >there are no rapidly changing elements as every modification is manual | |
| >works very well for small sites consistent in content | |
| { // static.html | |
| @begin=html@ | |
| <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"> | |
| <h1>Example webpage</h1> | |
| <div> | |
| <table> | |
| <tr><td>dYcoNjAe</td><td>15810</td></tr> | |
| <tr><td>aey3hj9V</td><td>30474</td></tr> | |
| <tr><td>w50EXL8K</td><td>9688 </td></tr> | |
| <tr><td>gt3qgccG</td><td>21265</td></tr> | |
| <tr><td>z63cbqAt</td><td>29301</td></tr> | |
| <tr><td>uchA1fn8</td><td>1941 </td></tr> | |
| <tr><td>YRxi9MrI</td><td>31986</td></tr> | |
| <tr><td>AMqnWWNZ</td><td>16368</td></tr> | |
| </table> | |
| <div> | |
| </div> | |
| @end=html@ | |
| >since its all manual, the values are hardcoded | |
| >was a chore just to create the example | |
| } | |
| Dynamic: | |
| >created at request | |
| >a (markup) generator must be used {php} | |
| { // dynamic.php | |
| @begin=php@ | |
| <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"> | |
| <h1>Example webpage</h1> | |
| <div> | |
| <table> | |
| <?php | |
| $file = fopen('data.txt', 'r'); | |
| while(($line = fgets($file)) !== false): | |
| list($key, $value) = explode(':', $line, 2); | |
| $key = trim($key); | |
| $value = trim($value); | |
| ?> | |
| <tr><td><?=$key?></td><td><?=$value?></td></tr> | |
| <?php | |
| endwhile; | |
| fclose($file); | |
| ?> | |
| </table> | |
| <div> | |
| </div> | |
| @end=php@ | |
| >the file is actually opened and read | |
| >the websites content is guaranteed to correspond to data.txt's contents | |
| } | |
| Prerendered: | |
| >a dynamic is eval-ed before being deployed | |
| >at runtime the pregenerated version is being shipped | |
| >hybrid of static and dynamic | |
| >often also called static for simplicity | |
| >less typing than with static | |
| >contents might get out of the date | |
| >often used when the pages do not require updating, | |
| but all use the same template {every page needs the same header added} | |
| { // dynamic.php | |
| @begin=php@ | |
| <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"> | |
| <h1>Example webpage</h1> | |
| <div> | |
| <table> | |
| <?php | |
| $file = fopen('data.txt', 'r'); | |
| while(($line = fgets($file)) !== false): | |
| list($key, $value) = explode(':', $line, 2); | |
| $key = trim($key); | |
| $value = trim($value); | |
| ?> | |
| <tr><td><?=$key?></td><td><?=$value?></td></tr> | |
| <?php | |
| endwhile; | |
| fclose($file); | |
| ?> | |
| </table> | |
| <div> | |
| </div> | |
| @end=php@ | |
| // its rendered to disk | |
| $ php dynamic.php > prerendered.html | |
| // prerendered.html is shipped | |
| } | |
| Live: | |
| >the website is blank by default, the content is appended by communicating | |
| with the serve in the background | |
| >uses websockets | |
| >stateful connection | |
| >can update the contents without refreshing the page | |
| >most reliable regarding data freshness | |
| >requires by far the most work relative to the other methods | |
| >requires writting js, for this reason alone, it's cancer | |
| { // Socks server using python | |
| #!/bin/python | |
| # sockets.py | |
| import asyncio | |
| import websockets | |
| import json | |
| async def send_data(ws): | |
| while True: | |
| j = {} | |
| with open('data.txt', 'r') as f: | |
| for line in f: | |
| key, value = map(str.strip, line.split(':', 1)) | |
| j[key] = value | |
| await ws.send(json.dumps(j, indent=4)) | |
| await asyncio.sleep(2) | |
| asyncio.get_event_loop().run_until_complete(websockets.serve(send_data, 'localhost', 8765)) | |
| asyncio.get_event_loop().run_forever() | |
| // Socks client using Javascript nested into the webpage | |
| @begin=html@ | |
| <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"> | |
| <h1>Example webpage</h1> | |
| <div> | |
| <table> | |
| </table> | |
| <div> | |
| </div> | |
| <script> | |
| let socket = new WebSocket('ws://localhost:8765'); | |
| socket.onmessage = (event) => { | |
| let table = document.getElementsByTagName('table')[0]; | |
| table.innerHTML = ''; | |
| data = JSON.parse(event.data) | |
| for(d in data){ | |
| var row = table.appendChild(document.createElement('tr')); | |
| var key_cell = row.appendChild(document.createElement('td')); | |
| var value_cell = row.appendChild(document.createElement('td')); | |
| key_cell.innerText = d; | |
| value_cell.innerText = data[d]; | |
| } | |
| } | |
| </script> | |
| @end=html@ | |
| >looks cool, i know | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment