Skip to content

Commit 661f6a2

Browse files
petracodingpetracoding
committed
it was 9 oclock on a saturday
1 parent 119398f commit 661f6a2

File tree

840 files changed

+413
-184
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

840 files changed

+413
-184
lines changed

‎content/_data/changelog.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
[
22
{ "date": "2026-01-XX", "text": "TEMPLATE", "link": "" },
3+
{ "date": "2026-01-31", "text": "File compression tutorial is up!", "link": "/resources/compression-tutorial" },
34
{ "date": "2026-01-25", "text": "Improvements to clique list", "link": "/coding/cliques"},
45
{ "date": "2026-01-22", "text": "I don't answer coding questions in my guestbook anymore. Please use the comment sections of my resources instead.", "link": "/about/guestbook" },
56
{ "date": "2026-01-16", "text": "Updated my manifesto.", "link": "/about/manifesto" },

‎content/_data/nav.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@
248248
},
249249
{
250250
"label": "Resources",
251-
"new": false,
251+
"new": true,
252252
"items": [
253253
{
254254
"link": "/resources/bookmarks",
@@ -291,7 +291,14 @@
291291
"label": "how to backup files",
292292
"new": false,
293293
"hide": false
294-
}, {
294+
},
295+
{
296+
"link": "/resources/compression-tutorial",
297+
"label": "how to compress files",
298+
"new": true,
299+
"hide": false
300+
},
301+
{
295302
"link": "/creations/coding",
296303
"label": "my userscripts & tools",
297304
"new": false,

‎content/_includes/petrapixel.njk‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -546,7 +546,7 @@ testingOnLocalhost: false
546546
<a
547547
href="https://www.goodreads.com/user/show/62158941-petra"
548548
target="_blank"
549-
>Main Street Vegan
549+
>Mind Magic
550550
<!--<span style="font-family: sans-serif; font-size: 0.9em">↺</span
551551
>--></a
552552
>
@@ -678,7 +678,9 @@ testingOnLocalhost: false
678678
/>
679679
</div>
680680

681-
<form method="post" action="https://poll.pollcode.com/51651257">
681+
<!-- -->
682+
683+
<form method="post" action="https://poll.pollcode.com/81322599">
682684
<div
683685
style="
684686
background-color: #eeeeee;
@@ -691,28 +693,38 @@ testingOnLocalhost: false
691693
>
692694
<div style="padding: 2px 0px 4px 2px">
693695
<strong
694-
>would you say my website (in light mode) is pink or
695-
purple?</strong
696+
>will you check out my youtube tutorials once i've started
697+
<a href="/youtube">my channel</a>?</strong
696698
>
697699
</div>
698700
<input
699701
type="radio"
700702
name="answer"
701703
value="1"
702-
id="answer516512571"
704+
id="answer813225991"
703705
style="float: left"
704-
/><label for="answer516512571" style="float: left; width: 150px"
705-
>pink</label
706+
/><label for="answer813225991" style="float: left; width: 150px"
707+
>yes!</label
706708
>
707709
<div style="clear: both; height: 2px"></div>
708710
<input
709711
type="radio"
710712
name="answer"
711713
value="2"
712-
id="answer516512572"
714+
id="answer813225992"
713715
style="float: left"
714-
/><label for="answer516512572" style="float: left; width: 150px"
715-
>purple</label
716+
/><label for="answer813225992" style="float: left; width: 150px"
717+
>perhaps</label
718+
>
719+
<div style="clear: both; height: 2px"></div>
720+
<input
721+
type="radio"
722+
name="answer"
723+
value="3"
724+
id="answer813225993"
725+
style="float: left"
726+
/><label for="answer813225993" style="float: left; width: 150px"
727+
>no.</label
716728
>
717729
<div style="clear: both; height: 2px"></div>
718730
<div align="center" style="padding: 3px">
@@ -727,6 +739,9 @@ testingOnLocalhost: false
727739
</div>
728740
</div>
729741
</form>
742+
743+
<!-- -->
744+
730745
<center>
731746
<small>(all polls <a href="/fun/polls">here</a>)</small>
732747
</center>
@@ -813,7 +828,7 @@ testingOnLocalhost: false
813828
/></a>
814829
<!--
815830
<a
816-
href="TODO"
831+
href="/youtube"
817832
target="_blank"
818833
class="corner-image corner-image--left"
819834
title="check out my youtube channel!"

‎content/coding/widgets.html‎

Lines changed: 23 additions & 21 deletions
Large diffs are not rendered by default.

‎content/resources/compression-tutorial.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
layout: petrapixel.njk
3+
title: "how to save space on your device"
4+
description: "A tutorial on how you can save or free up storage space on your device by compressing files. Neocities."
5+
nesting: "../"
6+
tipType: "tutorial"
7+
---
8+
9+
<section>
10+
<h1>Compression Tutorial</h1>
11+
<p>Compressing files is a great way to save storage space on your device.</p>
12+
<p>
13+
By following this guide you can saving many GBs of space without deleting a
14+
single thing!
15+
</p>
16+
17+
<blockquote class="warning">
18+
<p>
19+
I highly recommend backing up your files before going through this
20+
tutorial. <a href="/resources/backup-tutorial">Here's how.</a>
21+
</p>
22+
</blockquote>
23+
24+
<blockquote class="tip">
25+
<strong>Tip:</strong> To find out which folders on your PC use the most
26+
space you can use the free software
27+
<a
28+
href="https://www.jam-software.de/treesize_free"
29+
target="_blank"
30+
rel="nofollow"
31+
>TreeSize Free</a
32+
>. It's very simple to use.
33+
</blockquote>
34+
</section>
35+
36+
<section>
37+
<h2>Compressing Images</h2>
38+
<ol>
39+
<li>
40+
Download and install the free software
41+
<a href="https://saerasoft.com/caesium/" target="_blank">Caesium</a>.
42+
(They also have an
43+
<a href="https://caesium.app/" target="_blank">online image compressor</a>
44+
by the way, but we won't be using this.)
45+
</li>
46+
<li>
47+
Open Caesium and click the settings icon to open your preferences. There,
48+
make sure "Import files in subfolders when opening a directory" is
49+
checked.
50+
</li>
51+
<li>
52+
Add the files/folders you want to compress (e.g. your "Photos" folder) by
53+
using the green buttons.
54+
</li>
55+
<li>
56+
Change the compression settings (on the right side) to whatever you like.
57+
The Default quality settings are absolutely fine.
58+
</li>
59+
<li>
60+
In the "Output" settings, make sure to check the following settings so
61+
that the compressed images automatically replace the original ones:
62+
63+
<ul>
64+
<li>Same folder as input</li>
65+
<li>Keep folder structure</li>
66+
<li>Skip if output size is bigger than the original</li>
67+
<li>Keep file dates</li>
68+
</ul>
69+
<img
70+
src="../assets/img/etc/caesium.png"
71+
alt="A screenshot of the software."
72+
/>
73+
</li>
74+
<li>
75+
Click the "Compress" button and wait. This might take a few minutes or
76+
even hours, depending on how many files you're compressing.
77+
</li>
78+
<li>Done! It will now show you how much space you've saved.</li>
79+
</ol>
80+
</section>
81+
82+
<section>
83+
<h2>Compressing Videos</h2>
84+
<p>
85+
If you have many or large video files it can save a lot of space to compress
86+
these too. We need a different program for that.
87+
</p>
88+
<ol>
89+
<li>
90+
Download and install the free software
91+
<a href="https://handbrake.fr/" target="_blank">HandBrake</a>.
92+
</li>
93+
<li>Open HandBrake and select your video files / folders.</li>
94+
<li>
95+
Open the settings by clicking "Tools" in the menu and selecting
96+
"Preferences". Here, switch to the "Output Files" tab and change the
97+
following settings:
98+
<ul>
99+
<li>Automatically name output files: yes</li>
100+
<li>Default Path: <code>{source_path}/compressed</code></li>
101+
<li>File Format: <code>{source}</code></li>
102+
</ul>
103+
</li>
104+
<li>Close the preferences window.</li>
105+
<li>
106+
For the rendering settings, select these:
107+
<ul>
108+
<li>(Summary tab:) <b>Format: MP4</b></li>
109+
<li>
110+
(Video tab:) <b>Video Encoder: H.26<u>5</u></b> (NOT H.26<u>4</u>!)
111+
</li>
112+
<li>Leave everything else as-is.</li>
113+
</ul>
114+
</li>
115+
<li>
116+
You can save these settings as a new present, name it "Save file size" or
117+
something like that. Make sure it's the selected preset.
118+
</li>
119+
<li>
120+
Click the little arrow next to the "Add to Queue" button and select "Add
121+
All" to add all your selected videos to the rendering queue.
122+
</li>
123+
<li>
124+
Start the rendering process by clicking the "Start Encode" button. You can
125+
view progress details if you click the "Queue" button to view the queue.
126+
</li>
127+
<li>
128+
Now wait! It'll take a while, maybe several hours, depending on how many
129+
videos you are rendering and how large they are. If you want to, you can
130+
select something to do "When Done", this way you can make your PC
131+
automatically shutdown when the rendering is finished.
132+
</li>
133+
</ol>
134+
</section>
135+
136+
{% include 'tip-me.njk' %}

‎content/youtube.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
layout: petrapixel.njk
3+
title: "petrapixel on youtube"
4+
---
5+
6+
<section>
7+
<h1>YouTube Channel</h1>
8+
<p>
9+
I'm planning on making video versions of my coding tutorials, tips, etc as
10+
well as other videos about topics that can also be found on this website.
11+
</p>
12+
<p>
13+
<a
14+
href="https://www.youtube.com/channel/UCroj2Rm2shWEhP9RJMqgooA"
15+
target="_blank"
16+
>My channel</a
17+
>
18+
is still work-in-progress. First video coming <b>soon</b>, subscribe if you
19+
don't want to miss it!
20+
</p>
21+
</section>

‎css/layout/print.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@media print {
2+
body {
3+
min-height: 0 !important;
4+
background: none !important;
5+
color: black;
6+
}
7+
8+
header,
9+
aside,
10+
footer,
11+
[aria-hidden="true"],
12+
.buy-me-a-coffee,
13+
#c_widget,
14+
.coding-navigation {
15+
display: none !important;
16+
}
17+
18+
#content {
19+
display: block !important;
20+
}
21+
22+
#content,
23+
#main {
24+
width: 100% !important;
25+
}
26+
27+
#main {
28+
padding: 0 !important;
29+
}
30+
31+
main,
32+
main section {
33+
background: none !important;
34+
}
35+
}

‎css/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,5 @@
4545

4646
// must be last:
4747
@import "./layout/dark-mode";
48+
@import "./layout/print";
4849
// @import "./layout/halloween-theme";

0 commit comments

Comments
 (0)