voidpage/nvpiesite/index.html
2023-12-28 08:47:44 +00:00

933 lines
50 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>🍍 Pineapple BLOGS</title>
<meta name="description" content="Pineapple Blogs">
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAIElEQVR42mNgGAWDDfwnEo4aMGrAqAGjBowEA0bBwAAARraOgF2Dq4IAAAAASUVORK5CYII=">
<!-- og tags -->
<meta property="og:title" content="🍍 Pineapple BLOGS">
<meta property="og:description" content="Pineapple Blogs">
<!-- other -->
<meta name="twitter:card" content="summary">
<link rel="alternate" type="application/rss+xml" href="feed.xml">
<meta name="theme-color" content="#ffffff">
<script>
function toggleDarkMode(useDark) {
if (useDark) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
}
}
let useDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (!useDark && localStorage.getItem('dark-mode') === 'true') {
useDark = true;
toggleDarkMode(useDark);
} else if (localStorage.getItem('dark-mode') === 'false') {
useDark = false;
toggleDarkMode(useDark);
}
</script>
<style>
:root,
:root.light {
--text-color: #eeeeea;
--text-color-light: #acacaa;
--text-color-pale: #000;
--back-color: #1C1B59;
--link-color: #bad5ff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-color: #b5e853;
--text-color-light: #7a7a7a;
--text-color-pale: #ddddda;
--back-color: #271313 url("img/bkg.png");
--link-color: #ed9c48;
}
}
:root.dark {
--text-color: #b5e853;
--text-color-light: #7a7a7a;
--text-color-pale: #ddddda;
--back-color: #271313 url("img/bkg.png");
--link-color: #ed9c48;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "RetroGaming";
src: url(RetroGaming.ttf) format("truetype");
}
body {
font: 18.5px / 1.5 RetroGaming, monospace, consolas;
color: var(--text-color);
background: var(--back-color);
padding: 5vw 4vw;
}
body > * {
max-width: 34em; /* column width */
margin:0 auto;
}
/* Show & hide sections */
section, section:target ~ section:last-of-type {
display: none;
padding: 0;
}
section:target, section:last-of-type {
display: block;
scroll-margin-top: 100vh;
}
/* tabindex="0" */
section:focus {
outline: 0;
}
/* Vertical spacing */
section * + * {
margin-top: .9em;
}
/* Main */
main {
padding-top: 1.8em;
padding-bottom: 2.1em;
}
/* Footer */
footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
color: var(--text-color-light);
}
/* Table of contents */
ul.toc {
overflow: hidden;
}
ul.toc * + * {
margin: 0;
}
ul.toc li {
color: var(--text-color-light);
position: relative;
display: flex;
align-items: flex-end;
margin: 0;
}
ul.toc li + li {
margin: .25em 0 0 0;
}
ul.toc li a {
color: var(--text-color);
flex: 1;
}
ul.toc li a span {
background: var(--back-color);
padding-inline-end: .3em;
}
ul.toc li time {
order: 1;
white-space:nowrap;
z-index: 1;
padding-inline-start:.3em;
background: var(--back-color);
}
ul.toc li a:after {
width: 100%;
font-size: .55em;
position: absolute;
bottom: .4em;
white-space: nowrap;
content:
' . . . . . . . . . . . . . . . . . . . . . .'
' . . . . . . . . . . . . . . . . . . . . . .'
' . . . . . . . . . . . . . . . . . . . . . .'
' . . . . . . . . . . . . . . . . . . . . . .'
' . . . . . . . . . . . . . . . . . . . . . .'
' . . . . . . . . . . . . . . . . . . . . . .';
}
/* General */
a {
color: ;
text-shadow: 0 0 5px rgb(104 182 255 / 50%);
color: var(--link-color);
text-decoration: none;
text-underline-offset: 1px;
overflow-wrap: break-word;
}
@media (hover: hover) and (pointer: fine) {
a:hover {
text-decoration: underline;
}
}
a[href*="//"]:after, a[href^="mailto:"]:after {
display: inline-block;
font-size: .8em;
content: "\2197"; /* top right arrow: ↗ */
}
/* Headings */
header h1 a {
font-weight: normal;
display: block;
}
section h1 {
margin-bottom: 1em;
}
h1, h2, h3, h4, strong, b, dt {
font-size: 1em;
font-weight: bold;
}
* + h2, * + h3, * + h4 {
margin-top: 1.4em;
}
h3 {
text-transform: uppercase;
letter-spacing: .06em;
font-size: .9em;
font-weight: normal;
}
/* Lists */
li, dd {
margin-inline-start: 1.25em;
}
li + li, li ol, li ul {
margin-top: .2em;
}
.footnotes li {
margin-top:.5em;
max-width:95%;
}
/* Images */
img {
display: block;
max-width: 100%;
min-height:4em;
height: auto;
position: relative;
margin: 0 auto;
box-shadow: 0 .05em .4em var(--text-color-pale);
background: rgba(0,0,0,.025);
}
img:after { /* style offline images */
content: attr(alt);
display: grid;
align-content:center;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: .865em;
text-align: center;
border:1px dashed var(--text-color-light);
background-color: var(--back-color);
}
figure {
padding: 1.5em 1.2em;
}
figcaption {
color: var(--text-color-light);
text-align: center;
}
figcaption a {
color: var(--text-color);
text-decoration: underline;
}
figcaption, small, .footnotes {
font-size: .865em;
}
/* Other elements */
blockquote {
font-family: "Iowan Old Style", Constantia, Georgia, serif;
font-size: 1.025em;
font-variant-numeric: oldstyle-nums;
padding: .4em 1.2em;
}
abbr[title] {
text-decoration: none;
cursor: help;
}
a abbr[title] {
cursor: pointer;
color: inherit;
}
hr {
border: 0;
height: 0;
border-bottom: 1px solid;
opacity: .1;
margin: 1.4em 0;
}
sup {
line-height: 1;
font-size: .75em;
}
code, kbd {
font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', Menlo, monospace;
overflow-wrap: break-word;
font-size:.95em;
color: var(--text-color-light);
}
kbd {
box-shadow:0 .5px 1px;
border-radius:2px;
padding:.1em .325em .075em;
margin: 0 .1em;
}
pre {
overflow: auto;
padding: .5em .85em .6em;
background: rgba(0,0,0,.025);
border-radius: 4px;
margin: 1em 0;
}
pre code {
position: relative;
display:block;
overflow-wrap: normal;
}
pre code:after {
content: attr(class);
position: absolute;
right: -.6em;
top: -.3em;
text-transform: uppercase;
font-size: .7em;
color: var(--text-color-light);
}
/* Tables */
table {
border-collapse: collapse;
font-size: .9em;
width: 100%;
margin: 1.5em 0;
}
thead th {
text-align: start;
border-bottom: 1px solid;
}
th, td {
padding: .4em .6em;
border: 1px dotted var(--text-color-pale);
}
/* Disable footnotes #links */
sup a {
color: currentColor;
pointer-events: none;
}
a.footnote-backref {
display: none;
}
/* Smaller screens */
@media only screen and (max-width: 500px) {
body {
font-size: 16px;
}
footer small {
font-size: 1em;
}
blockquote, figure {
padding:2vw 4vw;
}
ul.toc li + li {
margin-top:.4em;
}
footer small:first-of-type {
left: -1000vw;
height: 0;
overflow: hidden;
position: absolute;
}
}
/* Print */
@media print {
* {
--back-color: #fff;
}
section {
page-break-after: always;
page-break-inside: avoid;
break-inside: avoid;
display: block;
padding: 2em 0;
}
section * {
page-break-inside: avoid;
break-inside: avoid;
}
footer {
display: none;
}
}
</style>
</head>
<body>
<header>
<h1>
<a href="#_">🍍 Pineapple BLOGS</a>
</h1>
<button id="darkbutton" title="Toggle dark/Light Mode">Toggle Dark/Light Mode</button>
</header>
<main>
<hr />
<section>
<nav>
<ul class="toc">
<li><time datetime="2023-10-15">Oct 15 2023</time> <a href="#make-a-simple-guestbook-with-php-and-js-2023-10-15"><span> Make a Simple Guestbook with php and JS!
</span></a></li><li><time datetime="2023-10-14">Oct 14 2023</time> <a href="#better-looking-indexof-page-2023-10-14"><span> Better Looking "Indexof" Page
</span></a></li><li><time datetime="2023-07-08">Jul 8 2023</time> <a href="#dino-a-game-of-chrome-2023-07-08"><span> Dino: A Game of Chrome!
</span></a></li><li><time datetime="2022-09-21">Sep 21 2022</time> <a href="#eternal-blue-vulnerability-report-2022-09-21"><span> Eternal Blue Vulnerability Report
</span></a></li><li><time datetime="2022-09-08">Sep 8 2022</time> <a href="#bandit-walkthroughs-2022-09-08"><span> Bandit Walkthroughs
</span></a></li><li><time datetime="2022-08-22">Aug 22 2022</time> <a href="#this-is-the-first-blog-2022-08-22"><span> This is the first blog
</span></a></li><li><time datetime="2022-04-26">Apr 26 2022</time> <a href="#tictactoe-using-javascript-ughh-2022-04-26"><span> TicTacToe using javascript (ughh)
</span></a></li><li><time datetime="2021-01-09">Jan 9 2021</time> <a href="#markdown-examples-2021-01-09"><span> Markdown examples
</span></a></li><li><time datetime="2015-10-28">Oct 28 2015</time> <a href="#notes-on-the-fourth-dimension-2015-10-28"><span> Notes on the Fourth Dimension
</span></a></li> </ul>
</nav>
</section>
<section tabindex="0" role="document" aria-label="About" id="about"><h1>Hey there, I am NeoVoid</h1>
<p>Homepage: <a href="https://neovoid.is-cool.dev">neovoid.is-cool.dev</a><br />
Mail: <code>neovoid[at]envs[dot]net</code></p>
<p>I love Linux (who doesnt? :p)</p>
<ul>
<li>What is nvpie?<br />
Its acronym for <u>N</u>eo<u>V</u>oid<u>Pi</u>n<u>e</u>apple. :p</li>
</ul>
<p>Have a nice day.🍍</p>
<hr />
<p>This <abbr title="Hyper Text Markup Language">HTML</abbr> file was generated by <a href="https://github.com/cadars/portable-php">portable-php</a>.</p></section> <section tabindex="0" role="document" aria-label=" Make a Simple Guestbook with php and JS!
" id="make-a-simple-guestbook-with-php-and-js-2023-10-15"><h1>Make a Simple Guestbook with php and JS!</h1>
<p>Recently I have created <a href="https://envs.net/~neovoid/guestbook">guestbook</a>, thought I share my recepie with you, I made it with ChatGPT 3.5 and very little knowledge of JS and PHP.<br />
Enjoy Reading💘</p>
<hr />
<p>A Simple Guestbook Will Need Html, CSS, JS, and PHP.<br />
You'll need a simple HTML page with CSS styling and use JavaScript to handle the form submission and save the data to a feedback.json file. Since JavaScript running in a browser cannot write directly to the local file system for security reasons, we'll use a server-side script to handle the data storage. For this example, we'll use PHP to write the data to the feedback.json file.</p>
<p>The following code will give user frontend to submit input in website:</p>
<pre><code class="HTML">&lt;form id="feedbackForm"&gt;
&lt;label for="name"&gt;Name:&lt;/label&gt;
&lt;input type="text" id="name" required&gt;
&lt;label for="website"&gt;Website (optional):&lt;/label&gt;
&lt;input type="url" id="website"&gt;
&lt;label for="email"&gt;Email:&lt;/label&gt;
&lt;input type="email" id="email" required&gt;
&lt;label for="message"&gt;Message:&lt;/label&gt;
&lt;textarea id="message" required&gt;&lt;/textarea&gt;
&lt;button type="submit"&gt;Sign My Guestbook!&lt;/button&gt;
&lt;/form&gt;</code></pre>
<p>Also you need to link js file into html index file.</p>
<pre><code class="HTML"> &lt;script src="script.js"&gt;&lt;/script&gt;</code></pre>
<p>This is JavaScript file. It the engine which will make the magick of processing input action happen.</p>
<pre><code class="js">document.getElementById('feedbackForm').addEventListener('submit', function(event) {
event.preventDefault();
const name = sanitizeInput(document.getElementById('name').value);
const website = sanitizeInput(document.getElementById('website').value);
const email = sanitizeInput(document.getElementById('email').value);
const message = sanitizeInput(document.getElementById('message').value);
const dateTime = new Date().toLocaleString();
const formData = {
name,
website,
email,
message,
dateTime
};
saveFeedback(formData);
});
function sanitizeInput(input) {
// Implement input sanitization or use a library for this purpose
// For this example, we'll simply trim leading and trailing spaces
return input.trim();
}
function saveFeedback(data) {
// Use XMLHttpRequest or fetch() to send data to the server
// In this example, we'll use fetch() to send a POST request to the PHP script
fetch('save_feedback.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response =&gt; response.json())
.then(result =&gt; {
if (result.success) {
alert('Success! You are Great! Thanks for your feedback buddy!');
} else {
alert('Damn, Something Not Right! Try Again!');
}
})
.catch(error =&gt; {
alert('Oops, Not Quite Right! Try Again!');
console.error(error);
});
}</code></pre>
<p>If you noticed I made sure the script have sufficient security features against input injection and XSS vulnerabilties implemented, You can further add your own protective measures for increased security.</p>
<p>The Following php code will store the user input in JSON file.</p>
<pre><code class="PHP">&lt;?php
// Validate the incoming JSON data to ensure it's properly formatted
$jsonData = json_decode(file_get_contents('php://input'), true);
if (!empty($jsonData)) {
// Validate individual input fields for potential attacks or injections
$name = validateInput($jsonData['name']);
$website = validateInput($jsonData['website']);
$email = validateInput($jsonData['email']);
$message = validateInput($jsonData['message']);
$dateTime = $jsonData['dateTime'];
// Validate email format using PHP filter_var function
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
sendErrorResponse('Invalid email format');
exit;
}
// Additional validation for other fields can be added if required
// Append the data to feedback.json file
$filename = 'feedback.json';
$jsonData = json_decode(file_get_contents($filename), true) ?? [];
$jsonData[] = [
'name' =&gt; $name,
'website' =&gt; $website,
'email' =&gt; $email,
'message' =&gt; $message,
'dateTime' =&gt; $dateTime
];
// Write to the file in a secure manner
if (file_put_contents($filename, json_encode($jsonData, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)) !== false) {
sendSuccessResponse();
} else {
sendErrorResponse('Failed to save feedback data');
}
} else {
sendErrorResponse('Invalid data received');
}
function validateInput($input) {
// Implement additional input validation and sanitization here
// For this example, we'll simply remove leading and trailing spaces
return trim($input);
}
function sendSuccessResponse() {
// Send a JSON response back to the client (JavaScript)
header('Content-Type: application/json');
echo json_encode(['success' =&gt; true]);
}
function sendErrorResponse($message) {
// Send a JSON response back to the client (JavaScript) in case of error
header('Content-Type: application/json');
echo json_encode(['success' =&gt; false, 'message' =&gt; $message]);
}
?&gt;</code></pre>
<hr />
<p>Now until this point we have done but if you still insist Lets go two step further and add notification system so you'll be notified via email whenever someone sign your guestbook.</p>
<p>Create <code>notify.sh</code> script</p>
<pre><code class="bash">#!/bin/bash
# Read the last entry from feedback.json
last_entry=$(tail -n 8 feedback.json)
# Customize the email notification content here
subject="New Guestbook Entry"
recipient="neovoid@envs.net"
# Send email using mutt
echo -e "$last_entry" | mutt -s "$subject" -- "$recipient"
</code></pre>
<p>You'll need some mechanism to watch for changes in feedback.json file and triggers the execution of notify.sh</p>
<p>guestbook_Listener.sh</p>
<pre><code class="bash">#!/bin/bash
echo feedback.json | entr notify.sh</code></pre>
<p>entr is the unix program that listens for file changes and execute commands when changes occur to file.</p>
<p>Now you can make this guestbook_Listener.sh file run in the background in various way.<br />
One I used here is with systemd user services.</p>
<p>More on that on Seperate blog of its own.</p>
<p>Till Then <strong>Happy Coding!</strong></p></section><section tabindex="0" role="document" aria-label=" Better Looking "Indexof" Page
" id="better-looking-indexof-page-2023-10-14"><h1>Better Looking "Indexof" Page</h1>
<p>Remember that boring old looking "index of" page? </p>
<figure><img src="https://nvpie.exozy.me/mysite/chitra/img/blog/indexof.webp" alt="default apache directory listing" title="default apache directory listing" loading="lazy" /><figcaption>Default apache directory listing</figcaption>
</figure>
<p>Needless to mention this blinding white screen?</p>
<p>Ever wonder if you can change <u>the way it look</u>?<br />
It turns out you can change it!<br />
After Suddenly stumbling upon this <a href="https://css-tricks.com/styling-a-server-generated-file-directory/">mindblowing article</a> I decided to make one of mine.</p>
<hr />
<p>I copied every line of code from that article and edited css to my liking to give it my flavour.</p>
<p>Well it was nice looking and all well except the styling didnt continue when navigating to folders.<br />
And asset base needed just to render it was too much.</p>
<p>Now you should consider exploring the comments section of that article. It contains various alternative to same approach.</p>
<p>One of those guy name "Lorenzo" created this <a href="https://github.com/lorenzos/Minixed">Minixed</a>. It uses simple "index.php" file alone.</p>
<p>I adopted it to create my own <u>Notes Server</u> --&gt; <a href="https://envs.net/~neovoid/notes/">https://envs.net/~neovoid/notes/</a></p>
<figure><img src="https://nvpie.exozy.me/mysite/chitra/img/blog/notesserver.webp" alt="My Notes/Files server" title="My Customized Directory Listing" loading="lazy" /><figcaption>My Customized Directory Listing</figcaption>
</figure>
<p>This looks Elegant and Beautiful isnt it?</p>
<p>With Minixed I can have many folders and all sorts of files I want.</p>
<h2>Why this neccessary?</h2>
<ul>
<li>It serve as a purpose of having file server.</li>
<li>It looks good.</li>
</ul>
<p>This is amazing to know, you can do all sorts of things with just <code>php</code> alone.<br />
And Every day I go little bit closer to find it out.</p>
<hr />
<p>Note: If you are wondering <u>how to enable Directory listing</u> in your webserver refer to <a href="https://www.lostsaloon.com/technology/how-to-enable-and-disable-web-directory-listing-on-your-web-server/">this guide</a>.</p></section><section tabindex="0" role="document" aria-label=" Dino: A Game of Chrome!
" id="dino-a-game-of-chrome-2023-07-08"><h1>Dino: A Game of Chrome!</h1>
<p><strong>Chrome Dino</strong> is the legendary <a href="https://www.blog.google/products/chrome/chrome-dino/">Easter Egg</a> in Chromium based browsers when you lose the internet connection.<br />
Its a nice simple game to pass the time and alleviate boredom.</p>
<hr />
<p><strong>Finally</strong> I found its source code <a href="https://github.com/congerh/dino">here</a> and added this game in my <a href="../../mysite/index.html#fun">FUN</a> category.</p>
<p>I modified css little bit to blend its background color with site's color.<br />
If you want to play this game even online you always access it <small>(in any chromium based browser)</small> with this url <a href="chrome://dino">chrome://dino</a> </p>
<h2>What are the keybinds?</h2>
<ul>
<li>Space - Jump</li>
<li>Alt - Pause</li>
<li>F11 - Full Screen</li>
</ul>
<hr />
<p>Have fun playing dino!</p></section><section tabindex="0" role="document" aria-label=" Eternal Blue Vulnerability Report
" id="eternal-blue-vulnerability-report-2022-09-21"><h1>Eternal Blue Vulnerability Report</h1>
<p>by nvpie<br />
Nov 3 2022</p>
<hr />
<p><a href="/content/_extra/reportV.html">html</a> | <a href="/content/_extra/reportV.pdf">pdf</a></p></section><section tabindex="0" role="document" aria-label=" Bandit Walkthroughs
" id="bandit-walkthroughs-2022-09-08"><h1>Bandit Walkthroughs</h1>
<p>url: <a href="https://overthewire.org/wargames/bandit/">https://overthewire.org/wargames/bandit/</a></p>
<h2>level 0</h2>
<p><em>--------------------------------------------------------</em><br />
<em>Learn to use ssh to play this game.</em><br />
helful commands: man ssh, cat</p>
<p>solution:</p>
<ul>
<li>read the description and explore.</li>
</ul>
<h2>level 0 - level 01</h2>
<p><em>--------------------------------------------------------</em><br />
<em>This level challenges to read file having "-" in its filename.</em></p>
<p>solution:</p>
<ul>
<li>specify its location : <code>cat ./-</code> or</li>
<li>redirect it to stdin: <code>cat &lt;-</code></li>
</ul>
<h2>level 01 - level 02</h2>
<p><em>--------------------------------------------------------</em><br />
<em>This level challenges to read file with spaces in its filename.</em></p>
<p>solution:</p>
<ul>
<li>use quotes on filename --&gt; <code>cat "spaces in this filename</code> or</li>
<li>use escape codes --&gt; <code>cat spaces\ in\ this\ filename</code></li>
<li>or if you have any brain just press <code>Tab</code>.</li>
</ul>
<h2>level 02 - level 03</h2>
<p><em>--------------------------------------------------------</em><br />
<em>This level challenges to read hidden file.</em></p>
<p>soultion:</p>
<ul>
<li><code>cd</code></li>
<li><code>ls -la</code></li>
</ul>
<h2>level 03 - level 04</h2>
<p><em>--------------------------------------------------------</em><br />
<em>This level challenge us to check unique filetype among many.</em></p>
<p>solution:<br />
there are 9 files in "inhere" directory named as -file0n<br />
and only one of them is "human-readable"</p>
<p>Means it must be ASCII text document and others are binary.</p>
<p>To check the file type we use <code>file</code> command.<br />
There are two ways to do it<br />
The commands we may need here are: file, for loop</p>
<ul>
<li>easy way: <code>file ./*</code> [To run the command on all files using *] or</li>
<li>hard way: <code>for x in {0..9}; do file ./-file0$x; done</code> [same as above but using for loop]</li>
</ul>
<h2>level 04 - level 05</h2>
<p><em>--------------------------------------------------------</em><br />
The password for the next level is stored in a file somewhere under the inhere directory and has all of the following properties:</p>
<p>human-readable<br />
1033 bytes in size<br />
not executable</p>
<p>bandit6<br />
DXjZPULLxYr17uwoI01bNLQbtFemEgo7</p>
<p>bandit7<br />
HKBPTKQnIay4Fw76bEy8PVxKEDQRKTzs</p>
<p>bandit8<br />
cvX2JJa4CFALtqS87jk27qwqGhBM9plV</p>
<p>bandit9<br />
UsvVyFSfZZWbi6wgC7dAFyFuR6jQQUhR</p>
<p>bandit10<br />
truKLdjsbJ5g7yyJ2X2R0o3a5HQJFuLk</p>
<p>bandit11<br />
IFukwKGsFW8MOq3IRFqrxE1hxTNEbUPR</p>
<p>bandit12<br />
5Te8Y4drgCRfCx8ugdwuEX8KFC6k2EUu</p>
<p>bandit13<br />
8ZjyCRiBWFYkneahHwxCv3wb2a1ORpYL</p>
<p>bandit14<br />
4wcYUJFw0k0XLShlDzztnTBHiqxU3b3e</p>
<p>bandit15<br />
BfMYroe26WYalil77FoDi9qh59eK5xNr</p></section><section tabindex="0" role="document" aria-label=" This is the first blog
" id="this-is-the-first-blog-2022-08-22"><h1>This is the first blog</h1>
<p>I've tried doing something different this time.<br />
<strong>I used php!</strong><br />
<em><em>Again this entire website is single html page</em></em><br />
and the blogs are simply markdown pages<br />
I didnt even have to install any ssg or run any complex commands</p>
<p>This php script does all the job all i need to do is</p>
<ul>
<li>to add markdown files into <code>/content</code> folder</li>
<li>and run <code>php portable.php &gt; index.html</code></li>
</ul>
<p>This is the source of this program<br />
<a href="https://github.com/cadars/portable-php">https://github.com/cadars/portable-php</a></p></section><section tabindex="0" role="document" aria-label=" TicTacToe using javascript (ughh)
" id="tictactoe-using-javascript-ughh-2022-04-26"><h1>TicTacToe using javascript (ughh)</h1>
<p>No matter how much I despise javascript but how can I resist the idea of showcasing this little game in my website?<br />
Actually I found this game on <a href="https://www.wappalyzer.com">wappalyzer</a> addon. I was fascinated to see it and started digging its code.<br />
Wappalyzer is handy website useful for finding out the technology stack of any website.<br />
Their browser addon is even more handy. but when the addon dont have anything to show this applet let you play tictactoe to alleviates the boredom.</p>
<h2>TicTacToe in Action</h2>
<p>Here is the game in embeded in iframe. Similarly its easily accessible from <a href="../#links">links</a> section. </p>
<iframe src="../../mysite/fun/ttt.html" width="220" height="120" style="display: block; margin: 25px auto; border:1px solid var(--highlight);"></iframe>
<p>I put the game in seperate html page (ttt.html), sort out its stylesheet in its own css (css/ttt.css) and its javascript (scripts/game.js). </p>
<pre><code class="html">&lt;iframe src="../fun/ttt.html" width="220" height="120" style="display: block; margin: 25px auto; border:1px solid var(--highlight);"&gt;&lt;/iframe&gt;</code></pre>
<p>You can embed this game is your site by using above snippet. *Customize the syling elements as your need ofc. </p>
<hr />
<p><u>All the source code can be found in my</u> <a href="https://codeberg.org/pineapples/mysite/src/branch/pages">Codeberg Repo!</a></p>
<p>Honestly I am not a champion in this game but I am persistent in learning although I admit I had hard time winning this game at first but more I played the more I learn to defeat the Ai.</p>
<h2>References:</h2>
<ul>
<li>[1] <a href="https://www.wappalyzer.com">Wappalyzer site</a></li>
<li>[2] <a href="https://codeberg.org/pineapples/mysite/src/branch/pages">This Site's Source Code hosted on Coderberg</a></li>
<li>[3] <a href="https://nvpie.exozy.me/mysite/#links">https://nvpie.exozy.me/mysite/#links</a> </li>
</ul></section><section tabindex="0" role="document" aria-label=" Markdown examples
" id="markdown-examples-2021-01-09"><h1><abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr> examples</h1>
<p>On top of plain <abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr>, <a href="https://michelf.ca/projects/php-markdown/extra"><abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr> Extra</a> adds support for footnotes, abbreviations, definition lists, tables, <code>class</code> and <code>id</code> attributes, fenced code blocks, and <abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr> inside <abbr title="Hypertext Markup Language">HTML</abbr> blocks.</p>
<p>Additionally, images are properly enclosed in figure elements (with optional figcaption), and the <code>loading="lazy"</code> attribute is added.</p>
<hr />
<p>This is <strong>bold</strong>, <em>italic</em>, this is an <a href="#2021-01-11-hello-world">internal link</a>, this is <del>not</del> <code>code</code>, press <kbd>alt</kbd>.</p>
<figure><img src="img/image.jpg" alt="This is the image alt text" title="This is the image title." width="1280" height="800" loading="lazy" /><figcaption>This is the image caption (line begins with a space)</figcaption>
</figure>
<figure><img src="img/image-missing.png" alt="This image is missing" title="This is the missing image title." width="1280" height="800" loading="lazy" /></figure>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<ul>
<li>This</li>
<li>is</li>
<li>a list</li>
</ul>
<ol>
<li>This</li>
<li>is</li>
<li>an ordered list</li>
</ol>
<blockquote>
<p>This text is in a blockquote.</p>
</blockquote>
<pre><code class="txt">This is
preformatted
text.</code></pre>
<table>
<thead>
<tr>
<th>This is a table</th>
<th style="text-align: center;">This column</th>
<th style="text-align: right;">This one is aligned right</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is a cell</td>
<td style="text-align: center;">is aligned</td>
<td style="text-align: right;">1234.56</td>
</tr>
<tr>
<td>This is a cell</td>
<td style="text-align: center;">center</td>
<td style="text-align: right;">78.90</td>
</tr>
</tbody>
</table>
<p>This sentence has a footnote.<sup><a href="#" class="footnote-ref">1</a></sup></p>
<div class="footnotes">
<hr />
<ol>
<li>
<p>This is a footnote&#160;<a href="#" class="footnote-backref">&#8617;</a></p>
</li>
</ol>
</div></section><section tabindex="0" role="document" aria-label=" Notes on the Fourth Dimension
" id="notes-on-the-fourth-dimension-2015-10-28"><h1>Notes on the Fourth Dimension</h1>
<p>by Jon Crabb</p>
<figure><img src="./img/notes-1.jpg" alt="Tesseracts" width="645" height="850" loading="lazy" /><figcaption>The coloured cubes — known as "Tesseracts" — as depicted in the frontispiece to Hinton's <em>The Fourth Dimension</em> (1904) - <a href="https://archive.org/stream/fourthdimension00hint#page/n7/mode/2up">Source</a>.</figcaption>
</figure>
<blockquote>
<p>Men of broader intellect know that there is no sharp distinction betwixt the real and the unreal…</p>
<p>— H.P. Lovecraft, <cite>The Tomb</cite> (1917)</p>
</blockquote>
<p>La Belle Époque, a beautiful term for a Beautiful Age, as Light and Understanding replace Fear and Superstition, and Science and Art join hands in unholy matrimony and set out to discover the world anew. Trains become underground worms burrowing through the city, displacing medieval graves in the name of modernity; the Aéro-Club de France sends men into the heavens, amazing the public; Muybridge proves horses fly too and wins a bet; Edison floods the world with light; biologists discover germs and defy Death; botanists grow tropical plants in Parisian glass-houses and affront Nature with hot-house orchids; the phonograph and the cinema fold Time and Space for the masses. And for some reason bicycles become rather popular. The world was getting smaller every day and the discoveries were getting bigger every week. How very diverting it all was…</p>
<blockquote>
<p>In the land of Sona-Nyl there is neither time nor space, neither suffering nor death.</p>
<p>— H.P. Lovecraft, <cite>The White Ship</cite> (1920)</p>
</blockquote>
<p>During the period we now call the fin de siècle, worlds collided. Ideas were being killed off as much as being born. And in a sort of Hegelian logic of thesis/antithesis/synthesis, the most interesting ones arose as the offspring of wildly different parents. In particular, the last gasp of Victorian spirituality infused cutting-edge science with a certain sense of old-school mysticism. Theosophy was all the rage; Huysmans dragged Satan into modern Paris; and eccentric poets and scholars met in the British Museum Reading Room under the aegis of the Golden Dawn for a cup of tea and a spot of demonology. As a result of all this, certain commonly-accepted scientific terms we use today came out of quite weird and wonderful ideas being developed at the turn of the century. Such is the case with space, which fascinated mathematicians, philosophers, and artists with its unfathomable possibilities.</p>
<p>Outside of sheltered mathematical circles, the trend began rather innocuously in 1884, when Edwin A. Abbott published the satirical novella <em>Flatland: A Romance of Many Dimensions</em> under the pseudonym A. Square. In the fine tradition of English satire, he creates an alternative world as a sort of nonsense arena to lampoon the social structures of Victorian England. In this two-dimensional world, different classes are made up of different polygons, and the laws concerning sides and angles that maintain that hierarchy are pushed to absurd proportions. Initially, the work was only moderately popular, but it introduced thought experiments on how to visualise higher dimensions to the general public. It also paved the ground for a much more esoteric thinker who would have much more far-reaching effects with his own mystical brand of higher mathematics.</p>
<figure><img src="./img/notes-2.jpg" alt="Cover of the first edition of Flatland (1884)" width="719" height="848" loading="lazy" /><figcaption>Cover of the first edition of <em>Flatland</em> (1884) - Source: City of London School Archive.</figcaption>
</figure>
<p>In April 1904, C. H. Hinton published <em>The Fourth Dimension</em>, a popular maths book based on concepts he had been developing since 1880 that sought to establish an additional spatial dimension to the three we know and love. This was not understood to be time as were so used to thinking of the fourth dimension nowadays; that idea came a bit later. Hinton was talking about an actual spatial dimension, a new geometry, physically existing, and even possible to see and experience; something that linked us all together and would result in a “New Era of Thought”. (Interestingly, that very same month in a hotel room in Cairo, Aleister Crowley talked to Egyptian Gods and proclaimed a “New Aeon” for mankind. For those of us who amuse ourselves by charting the subcultural backstreets of history, it seems as though a strange synchronicity briefly connected a mystic mathematician and a mathematical mystic — which is quite pleasing.)</p>
<p>Hinton begins his book by briefly relating the history of higher dimensions and non-Euclidean maths up to that point. Surprisingly, for a history of mathematicians, its actually quite entertaining. Here is one tale he tells of János Bolyai, a Hungarian mathematician who contributed important early work on non-Euclidean geometry before joining the army:</p>
<p>It is related of him that he was challenged by thirteen officers of his garrison, a thing not unlikely to happen considering how differently he thought from everyone else. He fought them all in succession making it his only condition that he should be allowed to play on his violin for an interval between meeting each opponent. He disarmed or wounded all his antagonists. It can be easily imagined that a temperament such as his was not one congenial to his military superiors. He was retired in 1833.</p>
<figure><img src="./img/notes-3.jpg" alt="Janos Bolyai: Appendix" width="694" height="380" loading="lazy" /><figcaption>Janos Bolyai: Appendix. Shelfmark: 545.091. Table of Figures.</figcaption>
</figure>
<p>Mathematicians have definitely lost their flair. The notion of duelling with violinist mathematicians may seem absurd, but there was a growing unease about the apparently arbitrary nature of "reality" in light of new scientific discoveries. The discoverers appeared renegades. As the nineteenth century progressed, the world was robbed of more and more divine power and started looking worryingly like a ship adrift without its captain. Science at the frontiers threatened certain strongly-held assumptions about the universe. The puzzle of non-Euclidian geometry was even enough of a contemporary issue to appear in Dostoevskys <em>Brothers Karamazov</em> when Ivan discusses the ineffability of God:</p>
<blockquote>
<p>But you must note this: if God exists and if He really did create the world, then, as we all know, He created it according to the geometry of Euclid and the human mind with the conception of only three dimensions in space. Yet there have been and still are geometricians and philosophers, and even some of the most distinguished, who doubt whether the whole universe, or to speak more widely, the whole of being, was only created in Euclids geometry; they even dare to dream that two parallel lines, which according to Euclid can never meet on earth, may meet somewhere in infinity… I have a Euclidian earthly mind, and how could I solve problems that are not of this world?</p>
<p>— Dostoevsky, <cite>Brothers Karamzov</cite> (1880), Part II, Book V, Chapter 3.</p>
</blockquote>
<p>Well Ivan, to quote Hinton, “it is indeed strange, the manner in which we must begin to think about the higher world”. Hinton's solution was a series of coloured cubes that, when mentally assembled in sequence, could be used to visualise a hypercube in the fourth dimension of hyperspace. He provides illustrations and gives instructions on how to make these cubes and uses the word “tesseract” to describe the four-dimensional object.</p>
<figure><img src="./img/notes-4.jpg" alt="Diagram from Hintons The Fourth Dimension" width="706" height="850" loading="lazy" /><figcaption>Diagram from Hintons <cite>The Fourth Dimension</cite> (1904) - <a href="https://archive.org/details/fourthdimensio00hint">Source</a>.</figcaption>
</figure>
<p>The term “tesseract”, still used today, might be Hintons most obvious legacy, but the genesis of the word is slightly cloudy. He first used it in an 1888 book called <em>A New Era of Thought</em> and initially used the spelling tessaract. In Greek, “τεσσάρα”, meaning “four”, transliterates to “tessara” more accurately than “tessera”, and -act likely comes from “ακτίνες” meaning "rays"; so Hintons use suggests the four rays from each vertex exhibited in a hypercube and neatly encodes the idea “four” into his four-dimensional polytope. However, in Latin, “tessera” can also mean “cube”, which is a plausible starting point for the new word. As is sometimes the case, there seems to be some confusion over the Greek or Latin etymology, and weve ended up with a bastardization. To confuse matters further, by 1904 Hinton was mostly using “tesseract” — I say mostly because the copies of his books Ive seen arent entirely consistent with the spelling, in all likelihood due to a mere oversight in the proof-reading. Regardless, the later spelling won acceptance while the early version died with its first appearance.</p>
<figure><img src="./img/notes-5.jpg" alt="Diagram from Hintons The Fourth Dimension" width="850" height="589" loading="lazy" /><figcaption>Diagram from Hintons <cite>The Fourth Dimension</cite> (1904) - <a href="https://archive.org/details/fourthdimensio00hint">Source</a>.</figcaption>
</figure>
<p>Hinton also promises that when the visualisation is achieved, his cubes can unlock hidden potential. “When the faculty is acquired — or rather when it is brought into consciousness for it exists in everyone in imperfect form — a new horizon opens. The mind acquires a development of power”. It is clear from Hintons writing that he saw the fourth dimension as both physically and psychically real, and that it could explain such phenomena as ghosts, ESP, and synchronicities. In an indication of the spatial and mystical significance he afforded it, Hinton suggested that the soul was “a four-dimensional organism, which expresses its higher physical being in the symmetry of the body, and gives the aims and motives of human existence”. Letters submitted to mathematical journals of the time indicate more than one person achieved a disastrous success and found the process of visualising the fourth dimension profoundly disturbing or dangerously addictive. It was rumoured that some particularly ardent adherents of the cubes had even gone mad.</p>
<blockquote>
<p>He had said that the geometry of the dream-place he saw was abnormal, non-Euclidian, and loathsomely redolent of spheres and dimensions apart from ours.</p>
<p>— H. P. Lovecraft, <cite>The Call of Cthulhu</cite> (1928)</p>
</blockquote>
<p>Hintons ideas gradually pervaded the cultural milieu over the next thirty years or so — prominently filtering down to the Cubists and Duchamp. The arts were affected by two distinct interpretations of higher dimensionality: on the one hand, the idea as a spatial, geometric concept is readily apparent in early Cubisms attempts to visualise all sides of an object at once, while on the other hand, it becomes a kind of all-encompassing mystical codeword used to justify avant-garde experimentation. “This painting doesnt make sense? Ah, well, it does in the fourth dimension…” It becomes part of a language for artists exploring new ideas and new spaces. Guillaume Apollinaire was amongst the first to write about the fourth dimension in the arts with his essay <em><a href="http://obvil.paris-sorbonne.fr/corpus/apollinaire/apollinaire_meditations-esthetiques.html">Les peintres cubistes</a></em> in 1913, which veers from one interpretation to another over the course of two paragraphs and stands as one of the best early statements on the phenomenon:</p>
<p>Until now, the three dimensions of Euclids geometry were sufficient to the restiveness felt by great artists yearning for the infinite. The new painters do not propose, any more than did their predecessors, to be geometers. But it may be said that geometry is to the plastic arts what grammar is to the art of the writer. Today, scientists no longer limit themselves to the three dimensions of Euclid. The painters have been led quite naturally, one might say by intuition, to preoccupy themselves with the new possibilities of spatial measurement which, in the language of the modern studios, are designated by the term: the fourth dimension. […] Wishing to attain the proportions of the ideal, to be no longer limited to the human, the young painters offer us works which are more cerebral than sensual. They discard more and more the old art of optical illusion and local proportion, in order to express the grandeur of metaphysical forms. This is why contemporary art, even if it does not directly stem from specific religious beliefs, none the less possesses some of the characteristics of great, that is to say religious art.</p>
<p>Whilst most suited to the visual arts, the fourth dimension also made inroads into literature, with <a href="https://publicdomainreview.org/collection/apollinaire-s-calligrammes-1918">Apollinaire and his calligrammes</a> arguably a manifestation. Gertrude Stein with her strikingly visual, mentally disorienting poetry was also accused of writing under its influence, something she refuted in an interview with the Atlantic Monthly in 1935: “Somebody has said that I myself am striving for a fourth dimension in literature. I am striving for nothing of the sort and I am not striving at all but only gradually growing and becoming steadily more aware of the way things can be felt and known in words.” If nothing else, the refutation at least indicates the ideas long-lasting presence in artistic circles.</p>
<figure><img src="./img/notes-6.jpg" alt="A page from Apollinaire&#039;s Calligrammes" width="530" height="850" loading="lazy" /><figcaption>A page from Apollinaire's <cite>Calligrammes; poèmes de la paix et de la guerre<cite>, 1913-1916 (1918) - <a href="https://archive.org/details/calligrammespo00apol">Source</a>.</figcaption>
</figure>
<p>Some critics have since tried to back-date higher dimensions in literature to Lewis Carroll and <em>Through the Looking-Glass</em>, although he was, by all accounts, a fairly conservative mathematician who once wrote an article critical of current academic interest in the subject entitled "Euclid and his Modern Rivals" (1873). As a side note, Hinton once invented a game of three-dimensional chess and opined that none of his students could understand it, so perhaps Carroll would have appreciated that.</p>
<p>If anything, the connection between Carroll and hyperspace was the other way round, and the symbolic language employed by Carroll — mirrors, changing proportions, nonsense, topsy-turvy inversions and so on — was picked up by later artists and writers to help prop up their own conceptions of the fourth dimension, which, as we can see, were starting to become a bit of a free for all. Marcel Duchamp, for instance, coined the rather wonderful phrase “Mirrorical return” in a note about the fourth dimension and the <a href="https://en.wikipedia.org/wiki/File:Duchamp_LargeGlass.jpg">Large Glass</a>.</p>
<figure><img src="./img/notes-7.jpg" alt="Illustration by Peter Newell" width="533" height="850" loading="lazy" /><figcaption>Illustration by Peter Newell from a 1902 edition of <cite>Through the Looking-Glass and What Alice Found There</cite> - <a href="https://archive.org/stream/throughlookinggl00carr4#page/n42/mode/1up">Source</a>.</figcaption>
</figure>
<p>In the same period that Hintons ideas of the fourth dimension were gaining currency among the intellectuals of Europe our “secret sense, our sixth sense” was identified by neurophysiologist Charles Sherrington in 1906. Proprioception, as he called it, is our ability to locate where a body part is when our eyes are closed — in other words, our ability to perceive ourselves in space. And yet the sixth sense means something completely different to us nowadays, associated with another fin-de-siècle obsession: mediumship, the ability to perceive things in the same space but in different dimensions. It is worth noting that in those days, scientists real, respected, working scientists — apparently looked towards spiritualist mediums for experimental evidence. At the same time, Hintons cubes were used in séances as a method of glimpsing the fourth dimension (and hopefully a departed soul or two). Hinton himself published one of his very first articles on the fourth dimension with the sensational subtitle “Ghosts Explained”. In defence of the eras more eccentric ideas, though, so much was explained or invented in so very few years, that it must have seemed only a matter of time before lifes greatest mysteries were finally solved. In any case, the craze over a mystical fourth dimension began to fade while the sensible sixth sense of proprioception just never really caught on.</p>
<figure><img src="./img/notes-8.jpg" alt="A spirit photograph by William Hope" width="533" height="850" loading="lazy" /><figcaption>A <a href="https://publicdomainreview.org/collection/the-spirit-photographs-of-william-hope">spirit photograph</a> by William Hope, ca. 1920 - <a href="https://www.flickr.com/photos/nationalmediamuseum/2781042126/in/album-72157606849278823/">Source</a>.</figcaption>
</figure>
<blockquote>
<p>But are not the dreams of poets and the tales of travellers notoriously false?</p>
<p> H.P. Lovecraft, <cite>“The Street”</cite> (1919)</p>
</blockquote>
<p>By the late 1920s, Einsteinian Space-Time had more or less replaced the spatial fourth dimension in the minds of the public. It was a cold yet elegant concept that ruthlessly killed off the more romantic idea of strange dimensions and impossible directions. What had once been the playground of spiritualists and artists was all too convincingly explained. As hard science continued to rise in the early decades of the twentieth century, the fin-de-siècles more outré ideas continued to decline. Only the Surrealists continued to make reference to it, as an act of rebellion and vindication of the absurd. The idea of a real higher dimension linking us together as One sounded all a bit too dreamy, a bit too old-fashioned for a new century that was picking up speed, especially when such vague and multifarious explanations were trumped by the special theory of relativity. Hinton was as much hyperspace philosopher as scientist and hoped humanity would create a more peaceful and selfless society if only we recognised the unifying implications of the fourth dimension. Instead, the idea was banished to the realms of New Age con-artists, reappearing these days updated and repackaged as the fifth dimension. Its shadow side, however, proved hopelessly alluring to fantasy writers who have seen beyond the veil, and bring back visions of horror from an eldritch land outside of time and space that will haunt our nightmares with its terrible geometry, where tentacles and abominations truly horrible sleep beneath the Pacific Ocean waiting to bring darkness to our world… But still we muddle on through.</p>
<blockquote>
<p>What do we know… of the world and the universe about us? Our means of receiving impressions are absurdly few, and our notions of surrounding objects infinitely narrow. We see things only as we are constructed to see them and can gain no idea of their absolute nature. With five feeble senses we pretend to comprehend the boundlessly complex cosmos.</p>
<p>— H.P. Lovecraft, <cite>From Beyond</cite> (1920)</p>
</blockquote>
<hr />
<p><small>This essay was <a href="https://publicdomainreview.org/essay/notes-on-the-fourth-dimension">originally published</a> by <a href="https://publicdomainreview.org/">The Public Domain Review</a> under a Creative Commons Attribution-ShareAlike 3.0 license.</small></p></section> <section id="home">
<nav>
<ul class="toc">
<li><time datetime="2023-10-15">Oct 15 2023</time> <a href="#make-a-simple-guestbook-with-php-and-js-2023-10-15"><span> Make a Simple Guestbook with php and JS!
</span></a></li><li><time datetime="2023-10-14">Oct 14 2023</time> <a href="#better-looking-indexof-page-2023-10-14"><span> Better Looking "Indexof" Page
</span></a></li><li><time datetime="2023-07-08">Jul 8 2023</time> <a href="#dino-a-game-of-chrome-2023-07-08"><span> Dino: A Game of Chrome!
</span></a></li><li><time datetime="2022-09-21">Sep 21 2022</time> <a href="#eternal-blue-vulnerability-report-2022-09-21"><span> Eternal Blue Vulnerability Report
</span></a></li><li><time datetime="2022-09-08">Sep 8 2022</time> <a href="#bandit-walkthroughs-2022-09-08"><span> Bandit Walkthroughs
</span></a></li><li><time datetime="2022-08-22">Aug 22 2022</time> <a href="#this-is-the-first-blog-2022-08-22"><span> This is the first blog
</span></a></li><li><time datetime="2022-04-26">Apr 26 2022</time> <a href="#tictactoe-using-javascript-ughh-2022-04-26"><span> TicTacToe using javascript (ughh)
</span></a></li><li><time datetime="2021-01-09">Jan 9 2021</time> <a href="#markdown-examples-2021-01-09"><span> Markdown examples
</span></a></li><li><time datetime="2015-10-28">Oct 28 2015</time> <a href="#notes-on-the-fourth-dimension-2015-10-28"><span> Notes on the Fourth Dimension
</span></a></li> </ul>
</nav>
</section>
<hr />
</main>
<footer>
<small>Last updated on October 27, 2023</small>
<small><a href="#">🍍</a> <a href="#about">About</a> <a href="feed.xml">RSS</a></small>
</footer>
<!-- generated by portable-php
Friday 27th of October 2023 09:30:35 AM
execution time: 0.0072219371795654 seconds -->
</body>
</html>