Since Enhanced Tracking Protection was made default on Firefox 72, Cbox is being flagged by the tracking/fingerprinting heuristics because it's a Cross-Origin Resource Sharing iframe running analytics.
Cbox claims it's a false positive, that the IPs they collect are to display a visitor counter, number of unique visitors and country of origin, and also to give users the ability to block IPs in case of bots/spammers/trolls, and that there is no cross-user/chatbox tracking. They requested to be whitelisted, but to this day Firefox hasn't gotten back to them - Firefox 72 was released in January 2020.
Cbox is whitelisted by uBlock Origin, AdGuard, Brave Shield, and most importantly, it's not on any of HaGeZi's lists. On default ETP settings, Firefox no longer blocks the chat (neither does Mullvad and Tor browsers), but on strict settings it gets blocked (LibreWolf is strict by default).
If the chat is blocked and you really want to see it, you are going to have to turn off the Enhanced Tracking Protection for my page (the only CORS script running here is the Cbox analytics), or use a non-Firefox-based browser.
How to make Neocities' Screenjesus your bitch:
The JS way
You can control the agent who takes the daily screenshot of your updates for the Neocities feed. First time I came across a script for it was the Penelope is Missing campaign, then on a journal post I wanted to change the location of the screenshot, I used a modified version of it, just removing the weird margins and padding. One day Caroline was asking about that script and I showed her my version and then she made a way better one, so if you want to control what Screenjesus prints just put the following script in your <head> and put the URL of what you want it to see:
<script>
if (navigator.userAgent === "Screenjesus") {
location.replace("YOUR_URL");
}
</script>
barndoors has a cool version of it showing a random image, but it's somewhere in his repo and I don't remember where, and it was easier to just write another version based on Caroline's script. So if you want it to pick random images try this one (and add as many URLs as you want following that pattern):
If you don't like JavaScript/simply don't want scripts running in your site, well, I have a script-free side-project and I wanted to manipulate the Screenjesus there as well, and after reading suboptimalism's article about Neocities hidden mechanics I realized it's quite easy to do it. The screenshoot is taken at exactly 1280x960, so you just have to control what's shown at that resolution, so add to your <style>/.css file the following:
#screenjesus {
display: none;
position:fixed;
inset: 0;
width: 100vw;
height: 100vh;
object-fit: contain;
background: black;
z-index: *higher than any other you are using*;
}
@media (width: 1280px) and (height: 960px) {
#screenjesus {
display: block;
}
}
Then put somewhere on your <body> an image with that id (if the image is already 1280x960px the width, height, object-fit and background rules are useless), it's going to be invisible to you but the only thing Screenjesus sees (or you can make 50 lines/900 characters of rules to rearrange your other elements like I did on PxHC). It's near impossible for someone to be browsing your site at that exact resolution, because even if they were using a 4:3 monitor at that resolution, the viewport is affected by the browser chrome, so they'd need to be in full-screen mode to get stuck - and if you are really worried about it, you can also display a fullscreen transparent label at that resolution on a higher z-index for a checkbox input to reverse the previous rules, so at the first click the site goes back to normal.
Let's hope the agent name and the resolution it takes screenshots at never change.
The most Super Awesome Webplayer!
This is a just a demo to show some of the customization possibilities. Press Play now!
Fully commented, editing the file to your liking should be pretty straight forward, but I'm also open to suggestion for features and improvements.
Did you like it? Check its page to know how to make one for you easy-peasy! This is the Pira Player!
This a simple script for you to copy to your local folder and run to create an Atom feed for your site, and it should be easy enough for any webmaster to use. All you have to do is fill 6 fields: your feed title, your site URL, the URL of your blog/news/updates/whatever-you-want-to-create-a-feed-for, the element that wraps your entries, the element that wraps your entry titles, and the element that wraps your entry dates.
Why Atom/What Atom?
Atom is like the upgraded version of RSS, and even though it has been around since 2005, RSS still has better brand recognition, but all RSS readers also read Atom format and although they have different layouts the name became basically interchangeable.
Before social media created walled gardens, the way to keep up with updates from people you liked was following their feed, and it's important to keep them alive to keep the internet free, to follow what you want on your terms with no middleman (I will talk about readers in some other article).
Enough bullshit! How do I use it?
This script is to be ran locally on your machine, so first you create a local folder for your project, download the script from here ("Save as..." or just Ctrl S) and put it in your project folder, open the script with the text editor of your choice (Notepad, Notepad++, Gedit, Kate...) and edit the fields, save it, run it.
Dependencies and How to run
To run it you gonna need Node.js (runtime environment), Cheerio (for HTML scrapping) and chrono (for date parsing), so steps:
Copy the path to your project folder.
Open your shell (Powershell, Bash, Zsh...) then enter "cd your_project_folder_path" (like, just Ctrl V it there).
Enter "winget install OpenJS.NodeJS" (for Windows - for Linux, eh, you know how to do it, and for Mac, I don't know how to do it lol - never touched any Apple device), await Node.js installation.
Enter "npm install cheerio chrono-node", await installation (they will be installed in your project folder, that's why you "cd" it first).
Enter "node pirafg" (assuming you already edited the script file) and your feed will be generated.
Now every time you want to update your feed, just open your shell, "cd your_project_folder_path", "node pirafg".
How to edit the script, field by field:
filename:
the default is atom but you can change it to whatever you want. The field is here because it will autoupdate the self link on the builder.
createlocal:
if true the filename.xml will be created in your project folder - if you don't care about it, set it to false, because next:
deploy:
neocities:
if you are using Neocities you can have the file automatically uploaded to your root folder.
nekoweb:
same for Nekoweb, but I haven't tested if this part is working (hoping for someone on Nekoweb to test and tell me - and send me the error log if it doesn't work).
apikeys:
neocities:
to generate an API key for Neocities you go to Settings > Manage Site Settings > API > Generate API Key. This script is saved locally on your machine, so you don't need to worry about me having access to it.
nekoweb:
I don't know the path to generate an API key for Nekoweb :( but I'm sure you won't have trouble finding it in settings.
feedtitle:
The name people will see on their readers (don't forget to escape ' and " in your title with \, like "John\'s Feed").
siteurl:
Your site URL, people will also see it on their readers.
authorname:
Optional.
authoremail:
Optional.
sourceurl:
Place here where your entries are. Maybe you just have one page with your blog, but maybe you have a page for a journal, another for a microblog, another for your media consumption, and on your index you have a div with updates you've done on the site and also different pages for articles you wrote, you can list all of it here (just remember to keep the addresses inside the "" and separated by a , (comma) - you can put each on its own line, they all just have to be inside the []).
entryelement:
This is the element that wraps your entries, it will target everything you put there. So say, on your blog pages your posts are inside <div class="blog-post"> you can write there ".blog-post" and every time it finds an element with class="blog-post" it will treat it as an entry, but on your article pages you actually wrapped your entries in <article>, no problem, just add "article" there so every time it finds an article in a page it will also consider it an entry. On your index you have a <div id="updates"> and each entry there is just a <p>? No problem either, target "#updates p" so every <p> inside id="updates" will be treated as an entry too. If there's no conflicting style between your pages, you can target all kinds of entries you created here.
entrytitle:
Just as for entryelement, here you can enter several elements to be picked to fit all your formatting, but in this case it will always pick the first match (since there could be several matching elements). Here I created two special cases, if you want to target some attribute on the entry element itself, say, you put your title in the id or put it in some other attribute like alt="", title="", or a custom attribute or whatever, to target it you need to use @, like "@title". Now, if your title is actually outside the element wrapping your entry, and they don't have a common wrapper, you can use @@ to target the first matching element going upwards from the entry in the DOM. Say your layout is something like <body><h1>title 1</h1><article>text 1</article><h1>title 2</h1><article>text 2</article></body> you can put there "@@h1" and it will pick the first h1 before the entry as title. If a title is not found or you leave it empty (I don't use titles for my entries either) the immediate fallback is the entrydate - if there's no date, then it becomes Untitled.
entrydate:
Works the same way as entrytitle, however it's very complicated to turn every type of date format people use into valid Atom format. I'm doing my best to cover all possibilities but the shell log will tell you if entries without valid dates were created.
plainnumericaldates:
For some reason chrono-node doesn't parse them correctly, so I did an exhaustive script to cover them, so if you are using just numbers for date format (no - or /), you set it to true and then set to true the format you are using on the list.
monthlyentries:
Valid format needs a day, so if you do posts without a day in the date, like monthly wrapups or whatever, set it to true and it will autofill 01 for the missing day (I know it would be better to fill the last day of the month, but to make the script know if it's 31, 30, 29 or 28 would be troublesome for both of us).
icon:
Optional. Lots of reader can display an icon next to your site, so here you can put the URL to one (1:1 aspect ratio)
logo:
They can also show a logo. Also optional.
css:
Optional. This is only for people seeing the .xml directly - probably no one ever lol, but at least it can look pretty.
I really hope this was simple enough, but let me know if I'm a confusing motherfucker.
in the head of your index page (you can add it to every page too if you wish), this will let people using Feed Readers detect your page has a feed.
You can also put a link somewhere on your page as a visual hint, just like I did in the updates section of my index or in the header of the entries on my journal - the Reader won't detect those, but the user will/might.
Keep it tidy... or don't, I'm not a cop
I'm trying to make a script that can be used by the vast majority of users even if their layout is a mess. Say, the person has a page full of <div>s and none has a class or anything, and the first 3 <div>s on the page are like header, menu, other stuff, and blog entries start after that but it's every other <div> because there's a <div> with an image or whatever in the middle, and the last two <div>s are links and footer or whatever so not entries either, you can still generate a valid feed without touching the layout by targeting "div:nth-of-type(2n + 4):not(:nth-last-of-type(-n + 2))" for entryelement... but you see, the messier the layout, the harder it is to autogenerate a feed because scripts are old school beep boop clankers that can only follow what they are told and not those water-hungry doomsday machines that can interpret and hallucinate, so if you want to have a feed and don't want to edit it manually, having a coherent layout and formatting will make it way easier.
My tip: Have an element/attribute you use only to wrap your entries, an element/attribute you use only for titles (it falls back to date if you don't use title) and an element/attribute you use only for dates - and don't use a messed up date format. Use the same pattern across your pages.
The hidden magic behind the logic, or: Damn, I'm acing this design!
So if you are curious about fallbacks, catches, ordering and stuff:
Entries are ordered by date, and if the date is conflicting then the order is the one set on sourceurl.
To avoid conflict between elements listed on entryelement when a parent is picked, matching elements inside are ignored and the parent is considered the full entry.
Entries without valid dates are first organized by DOM order and then by sourceurl.
Strict readers won't show entries without valid dates, so I'm creating fake dates just so your entries show up on your feed, however they will be sent to the bottom, after all entries with valid dates, and I'm sending them to the 1970s - and if you have more than 999999 entries with invalid dates, you gonna break my script! (or, you know, just put another 9 there and you are good for awhile... in what recursive hell did you fall to have a million entries anyway??)
Say you picked plainnumericaldates and picked your format, but in some entry you missed a digit, I will assume you missed the 0 in whatever comes first between month and day and fill it. If you missed two digits, then I assume you missed the 0 for both day and month and fill both (actual cases testing the script on a friend's blog). If you are missing 3 digits though, rethink your life choices, and I'm throwing you in the '70s.
Entries need unique <id>, so I'm targeting the entry #id for it because it's the natural navigation, but if the entry doesn't have an #id, I'm creating a false one based on the date just to have a unique valid <id> - the link will still send it to the correct entry page, just not focus on it since it has no #id.
Since self link is created by "(siteurl)(filename).xml", it could generate an invalid link if the user didn't put a / at the end of the URL, so I added a check to insert it if it's missing. You are not getting a lousy feed on my watch!
When I was working on my numerical date parser it would have been easier to just make yy entries "2000 + yy", but I thought: What if someone is uploading really old stuff they wrote and it's from before 2000?! So, pre-2000 dates are allowed for yy format, but only until 1970, and this will make my script break in 2070 :( (but only for yy format, and if you want to post older stuff, use yyyy dammit!)
Uh, I think that's it...
If you can think of more edge cases, have more suggestions, or any doubts, reach me at pirahxcx@proton.me :D
Do you write and produce cool stuff and would like to be found by others but don't want to use social media, heavily censored major platforms, and crap like that? Getting indexed by search engines might be the least effective way for personal sites to be found on the internet nowadays, but still, depending on the content you make, you might want or benefit from it, and there is always some lost surfers looking for specific stuff that might stumble upon you, so first tip is properly configuring these two files: The robots.txt and the sitemap.xml.
Your setup
The robots.txt is just your policy about bots, crawlers and scrapers, it tells them if they are welcome or not, however, it's entirely up to them to respect it or not, and as LLMs were built on the illegally downloaded entirety of all libraries on the internet, including the pirate ones, they are really not giving a fuck if your .txt is telling them to not train their models on you, they are just excluding you from the public data - and I wouldn't count on megacorporations (and government agencies) not scraping your data for profiling regardless of if you are allowing them to index you or not.
Still, your robots.txt can soften a lot the machine traffic, and there are other ways to block it (not available for static sites, though), and I recommend checking these two excellent resources: How to Block AI Crawlers and No AI Entry.
If you don't care about blocking bots, crawlers and scrapers, the way to configure your robots.txt to just allow anyone in (it will max your exposure) is:
The sitemap.xml will tell them all the pages you have in your site and how to find them, it's a more reliable way to get them indexed by search engines. Crawlers will most likely look for the file when they find your site already, but you can point them to it in the robots.txt.
A proper layout for a sitemap.xml should be something like:
And add as many pages as you need. There are other attributes you can add but they are largely ignored by search engines, the only one that might be useful is <lastmod>yyyy-mm-dd</lastmod> (insert date, I guess the attribute name is self-explanatory).
Ok, now you improved your auto-discoverability and you have the files the search engine managers are going to ask you. They might index you anyway, but if they don't:
Starting with the evilest of them all, but with an index that towers all the others combined and still the main search engine used in the world with like over 90% of the market, they are also a fucking pain in the ass and very often they will block your pages on completely wrong claims and you shouldn't even waste your time trying to complain about it because you can't and they will do nothing, just tell them to index you and don't look back.
You are going to go to the Google Search Console and go to Add Property - Select Property type (I don't know if they will have changed the UI by the time you are reading this) and there you can choose domain or sub domain (URL prefix) and if you are using a free Neocities subdomain like me this is where you go.
I don't actually know how the domain verification goes because I never had one, it says they need DNS verification but should be easy enough following their instruction, as for subdomain the two easiest verification methods are either downloading a file they will give you and uploading it to your site's root folder, or adding a code they give you to the <head> of your index (the others require you to use other of their services), then you click verify (these methods will be used for all main search engines).
With your site verified, they move you to the Console page. Go to Sitemaps and submit your sitemaps.xml address, and that's it, you have done all you could, they will only index what they feel like regardless of if you are doing URL inspection for all your pages. Adios motherfucker.
The Google index is used by Startpage, a privacy-friendly search engine, and can be used by SearXNG (SearXNG can use any index, so I won't mention it again).
Microsoft Account (can use Google and Facebook accounts to login).
On more evil corporations, the Microsoft search engine has the second biggest index but it's the one most used by better services. To index your sites here you go to the Bing Webmaster Tools and then Add Site. The verification process is the same, and apparently you can import your Google Search Console profile (I never tried it).
Again go ahead and add your sitemap.xml on the Sitemap tab, and Bing is actually more user-friendly, you don't need to wait for them to crawl your pages and then decide what they are going to index, you can go to URL Inspection and go ahead and add them there, and adios Microfuckers.
The Bing index is used by the privacy-friendly search engines DuckDuckGo, Ecosia, Swisscows, Qwant and Kagi, and also by Yahoo (another crappy search engine, but third most used in the world).
The most used search engine in Russia and most adjacent countries, the fourth most used in the world, to get indexed there you go to Yandex Webmaster, click Add Site and go through the same verification process.
The Chinese Google (somehow fifth most used search engine?), oh, if you have been on the internet for as long as I have you probably still have nightmares with hao123 and all that malware crap Baidu would so casually distribute like it's a normal thing to do to be a total cancer of a company, and to this day you don't want to touch Baidu with a ten-foot pole, but for the sake of this tutorial, I decided to go check how to get indexed there (and I feel like washing my hands because my fingertips feel dirty just by typing this name)
My attempt didn't get very far, I discovered you add your sites through the Baidu Ziyuan but THEY REQUIRE YOUR CELLPHONE NUMBER TO CREATE ACCOUNT lol, fuck them, good luck if you want to get indexed there, sure lots of cool folks in China, but awful business practices - not that any company mentioned so far are saints either.
On not so completely evil corpos, Brave is increasing a lot in use and they have a very competent index and nowhere near as bitchy as Google and Bing. They probably have already crawled you, but if you can't find your site there, just add it through Submit URL (you can submit your sitemap.xml there too).
Other search engines with their own index and crawlers but that at the moment (June 2026) you can't submit your URLs
Qwant and Kagi have their own crawlers besides using the Bing index. Yep has its own crawlers. And the super cool Mojeek and Marginalia also have their own.
There are also some search engines specialized in content for their own countries. I didn't check them, I don't know how widely they are locally used, but if you want to find out if you can get indexed on them, here's a list.
More setup: Schema.org (optional)
Schema.org is structured metadata created for search engines to identify people and projects. Unless you have a big portal with several subdomains for specific stuff, the WebSite identification is kinda pointless and redundant with your <head> metadata, but it might be cool for you to have a Person identification, because this way your projects and profiles can be linked by crawlers/indexers, and a person looking for you or for one of your projects might find the others.
The identification is JSON-LD and can go anywhere on the site. It seems like most people put it inside the <head>, but I have it in a custom hidden element at the bottom of the <body> with my <identity-shenanigans>. The following is kind of a basic profile that I think is cool and simple enough (my personal pick, you can remove whatever you wish), but you can find all kinds of stuff you can also add to your personal profile here.
And this is a basic one for Person, there are several other types for tons of shit. I don't think they have much use for the small web, but check them out if you want.
Still the best for small personal sites
Is cozy smallweb directories, clubs and rings (and also everyone's dedicated pages to neighbors, cool sites and resources), these are all curated independent projects made out of love for the internet and each other. Check the !
Get indexed EVERYWHERE! Part II: Small web directories
Most sites I like and link come from exploring other sites I like and link, so be a gateway to people because that's a cool thing to do.
Back when I started making sites that weren't just to show to school friends, there was very low discoverability through their own platforms (I wasn't on original Geocities, though, I don't know how it was there) so we'd end up bookmarking or following the RSS feed we'd find surfing (and they all started going silent when Facebook came along, because it was easier to publish and be found there). Nowadays, even to promote themselves better, Neocities, Nekoweb, Bear Blog, WordPress, Substack, etc, etc, kinda formed their own communities through how easy and convenient it is to find more people inside their own platform. Gardens yes, but not so closed yet.
The place they all come together, also people on other hosting services and self-hosting, are the Webrings/Clubs.
Some more setup (optional)
Surfing the internet I seem to find mainly two groups of sites: one very competent, built around web frameworks, template engines, generators, they follow web protocols and formats and are mostly oriented around blogs and feeds. The other is very chaotic with handwritten code and barely following any conventions or protocols and just creating whatever they want however they feel like.
The first group seem to call the second "digital gardens", but for me they are just what websites originally were - and after the blog scene came along, bloggers looked back at those sites without timestamps and with pages created and organized at will and came up with a new name to explain it.
Along this well-structured web, and the directories, clubs and webrings spawning from it, as well as the protocols of ActivityPub, Webmention, WebSub, WebFinger, IndieAuth, etc etc, clients, readers, apps, widgets, extensions, using <link> (and in some cases <meta>) can serve as identification/verification/authentication, so you can get ahead by putting in your <head>:
<link rel="me" href="mailto:YOUR_EMAIL">
You can also create more of it to link to all your accs and sites (just put the URL inside the href=""). GitHub and the Fediverse use it for verification, lots of other ones won't have much use, but this is a way to auto-generated profiles of you (like when you are linked/embeded somewhere) to know your other links.
Among the IndieWeb protocols and stuff, another microformat widely used is the h-card, which works pretty much like Schema.org but just for IndieWeb-related stuff. Some people put it directly and visible on the site and use it as their profile section, but I just use it as a hidden custom element at the end of the <body>, and here's my template:
This is a bare bones for whatever might be building site profiles, but there are tons of information you can display on h-cards, check Microformats for more.
Webrings/Clubs
I'm not gonna go about the history of webrings, but thanks to some cool people, like the Allium House, it became quite easy to start one, and with this web revival that is happening due to how unbelievable evil mainstream platforms turned out to be, they are growing in numbers and popularity and you can find thousands of sites based on common interests. I'm currently on the Akira Club, CDRing, P-U-N-K, Free Speech Webring, The Sovereign Web, The Wild Wastelander, IndieWeb, BUKMARK.CLUB, and also on the Pet Pages Webring with my pet page, and I found cool sites and even people I became friends with through them.
The most awesome list of webrings, I saw others around but none nearly as extensive or well maintained, so go find people with similar interests and join some cool webring!
Thank you Brisray for your hard work!
Just as I was writing this, the amazing petrapixel announced this project, there's already a huge list of webrings and clubs there!
Webrings vs Clubs
What's the difference? They are pretty much the same thing, what changes is the widget. Webrings point to other sites and random sites, clubs just point back to the club. Brisray also has a list of clubs and directories here.
Reach me at: pirahxcx@proton.me if you know more cool (and actively maintained) webrings and clubs lists!
Cool Small Web Directories you can join
While webrings and clubs tend to be thematic, directories mostly aren't, and they don't necessarily ask you to be a member (some are just lists of stuff the curator likes, others have open submissions), tons of webmasters will never know they ended up on random directories around.
As for the ones with open submission, here's a list of cool active directories you can join (as for July 2026), starting with the cozy ones, and since I already mentioned petrapixels's Indie Web Database I'm starting with it (also email me if you know more active ones - or to let me know if some died):
ps: I added/created buttons for all the listed directories, if you want to grab them go to my Small Web Dedicated page.
Get indexed EVERYWHERE! Part III: RSS/Atom and some cool oddities
Well, I already talked a bit about the why on the PiraFeedGenerator page. Having your own feed is pretty cool, and here are some directories you can only join if you have one!
(Remember, like the previous directories, these are personal projects and may take a while for you to get indexed - if you get indexed at all. It also depends on whether the curator finds you suitable for their list. I picked only directories that, as of July 2026, had recent activity.)
Bubbles is the coolest project around. It's a curated directory that draws sources from several other directories listed here too, and whenever you update your feed, they share it on Mastodon - if you have a Fediverse account and add the attribution, you are mentioned in the post as well. It also has features for voting and commenting on their own platform, and you can get notifications for it. So if you are on the Fediverse, just add the following to the <head> of your pages (I'm not sure if only your index needs it, I think you may need it on the pages referenced by your feed as well):
RSS Parrot is a simpler version of that, it just toots your updates to Mastodon. No attributions, mentions or the other features.
Cool oddities
These are some other cool things you can participate in and propagate that are hard to categorize...
Cliques
These are thematic clubs that you join by creating art for them, so they're a lot of fun if you're into drawing stuff. The club displays your pieces on its page, and if someone likes your creation, they copy it to their collection, linking to your site. petrapixel also added them to the Indie Web Database. Let me know if there are other lists of Cliques around! :)
A very cool project, it's kinda like your personal Kagi Small Web, but it accepts any site, not just stuff with an RSS/Atom feed. You create a page with a console where you can list your favorite sites for people to wander at random, and you can link it to other Wander Consoles so they can wander through other people's favorite sites too, forming a huge web of places to explore - you can check out my Wander Console here.
Another cool project, the /now page is for people to catch up with what you have been doing, and here they are collecting everyone who has a /now page!
That's it, but
Help me find more directories and other cool stuff like these, or tell me if you created one, or if one here died/was abandoned. Reach me at pirahxcx@proton.me.
And if you are interested in more stuff to enhance your site's visibility, check the next article about Open Graph, or how to get a better preview of your links on social media. It also includes more setup you may want to add to your site's <head>, and a Node.js utility I created to take screenshots of all your pages:
ps: Again I added/created buttons for all the listed directories, if you want to grab them go to my Small Web Dedicated page.
Open Graph is metadata used by social media and some forums to define the information about your links when they are shared, including the image that should be displayed. When there's no tag defining it, they may show the first image they find on the page, or nothing at all. You can set whatever custom image you want, but if you just want to take screenshots of your pages, PiraOGScreenshooter is gonna make your life way easier! (especially if you have several pages and need to update your screenshots because you changed the layout, the CSS, or something)
Enough bullshit! How do I use it?
This script is to be ran locally on your machine, so first you create a local folder for your project, download the script from here ("Save as..." or just Ctrl S) and put it in your project folder, open the script with the text editor of your choice (Notepad, Notepad++, Gedit, Kate...) and edit the fields, save it, run it.
Dependencies and How to run
This is another local script using Node.js (runtime environment), and it relies on the Playwright library for the screenshots. Playwright uses a browser in headless mode to take the screenshots. It's compatible with all the major browsers, and technically it could use a browser you already have installed, but I can't guarantee the script would find your installation path, so to make things easier, I will just go ahead and do a fresh Chromium installation for the script to use. Steps:
Copy the path to your project folder.
Open your shell (Powershell, Bash, Zsh...) then enter "cd your_project_folder_path" (like, just Ctrl V it there).
[skip if you already have Node.js installed] Enter "winget install OpenJS.NodeJS" (for Windows - for Linux, eh, you know how to do it, and for Mac, I don't know how to do it lol - never touched any Apple device), await Node.js installation.
Enter "npm install playwright && npx playwright install chromium", await installation (Playwright will be installed in your project folder, that's why you "cd" it first).
Enter "node piraog" (assuming you already edited the script file) and it will start taking screenshoots.
Now every time you want to take screenshots, just open your shell, "cd your_project_folder_path", "node piraog".
How to edit the script, field by field:
urls:
Just add all URLs you want to take screenshots, keep each inside quotes and separated by commas.
width/height:
Define the dimension. 1200x630 is the recommended one, but you can take screenshot to whatever you like, you don't need to use this script just for Open Graph.
ext:
Set file extension to either jpg (lossy) or png (lossless).
Shit can't be more straight forward than this!
I thought about giving an option to save to other formats, but it would add another dependency (sharp), and there's still low compatibility for modern formats across platforms.
There are online tools to do this, but you have to do it page by page, and their loading is very conservative, it was quite tedius to take screenshots for the ten pages of my blog, and I'd have to do it again whenever there was a new post, so I decided to run a local script to automate it... my approach here was to wait for the load signal and then wait another +2 seconds in case there's something else still loading. I think it should cover the majority of cases, but if your pages are running some heavy scripts, have insanely large images, or use tons of custom fonts, and your screenshot is messed up, you can increase the wait time on this line:
await page.waitForTimeout(2000);
But how do I setup Open Graph on my page anyway?
As with all protocols, microformats, and vocabularies, there are shit tons of tags for you to use, and you can check the full list here. However, these seem to be the basic/most useful ones and my personal pick:
You add all of that to the <head> of your pages. The og:url is for your canonical URL (your main address with a / at the end), it just indicates that the page belongs to that site (in case your site is split between domains/subdomains), and og:image:alt is for extreme cases that may never happen and might not even be supported on all platforms, but technically it's meant for screen readers. In the event that someone using one stumbles upon a link to your site on social media, the screen reader could describe what's in the image, if it's even relevant... so it's there in case you really care about accessibility. I'm just making a habit of having alt text on everything.
Another script I created for my own use that I'm making public and easily configurable for whoever also wants to use it. As I was exploring other people's sites, I found so so many dead links on their button walls and resources pages, and as my own button wall keeps growing, I decided to make something to easily check them all so I can update or remove dead links.
After you point the script to where it should check, it will follow every http, https, and // href (it won't pick up stuff like mailto: or relative paths). Then, for every link that returns a 404 or 410, it will add it to a notfound.txt file created in the project folder. For 300-308 status, it will add them to a redirects.txt file (which also shows where they were redirected, so you can spot if it's a case of expired domains or if the person changed domains and you can now update the link). Lastly, if there was any error, like DNS failure, connection refused, invalid URL, or no response for 5 seconds, it will add it to an errors.txt file (so you check manually what happened to them) - let me know if there are more codes or edge cases I should be checking! pirahxcx@proton.me
Enough bullshit! How do I use it?
This script is to be ran locally on your machine, so first you create a local folder for your project, download the script from here ("Save as..." or just Ctrl S) and put it in your project folder, open the script with the text editor of your choice (Notepad, Notepad++, Gedit, Kate...) and edit the fields, save it, run it.
Dependencies and How to run
To run it you gonna need Node.js (runtime environment) and Cheerio (for HTML scrapping).
Copy the path to your project folder.
Open your shell (Powershell, Bash, Zsh...) then enter "cd your_project_folder_path" (like, just Ctrl V it there).
[skip if you already have Node.js installed] Enter "winget install OpenJS.NodeJS" (for Windows - for Linux, eh, you know how to do it, and for Mac, I don't know how to do it lol - never touched any Apple device), await Node.js installation.
[skip if you already have Cheerio installed] Enter "npm install cheerio", await installation (they will be installed in your project folder, that's why you "cd" it first).
Enter "node piradlh" (assuming you already edited the script file) and it will hunt dead links.
Now every time you want to check your links, just open your shell, "cd your_project_folder_path", "node piradlh".
How to edit the script, field by field:
There is really just one field: urls. You add the page that contains your links, or the pages. You can add as many as you want, keeping them inside quotes and separated by commas. Shit can't be more straightforward than this!
On the design
I was running the script on my page, no problem, but to really test it, I decided to run it on bulltown's link page, and, boy, I didn't put any message for anything, I had no idea what was going on, so first thing I did was to add the timeout and a console.log saying how many links were found (over 1900 links there lol), but to make sure it wasn't hanging I added the process.stdout.write to actually check progress and not go insane lol.
I think it's working good now.
Do you use the same header, sidebars, footer, etc. on every page, and when you change something you gotta update every page?
There's a very easy JS solution for it!
petrapixel actually has a guide for it, but I found it a tad too complicated, covering too much, inserting elements instead of just filling them, and I think we can make it simpler, so here's my version:
So how it works: you repeat that code for every element you want to be the same on your pages. custom_name is whatever you want, you create that const just to simplify the if statement, because without it the script would stop in case one element you are targeting is not found on the page (either you forgot to add it, or it's a layout choice - like, this one page doesn't need one sidebar). If every page is using every element you list, then you can make it even simpler by using:
(remember you can change it to whatever element you want, create as many as you want, and rename the consts)
Inside `your_html_here` you literally put the HTML code you use for that part, but you don't add the element tags. Say your header is like <header><img src="myheaderimg.png" alt=""><p>my description</p></header>, you put myHeader.innerHTML = `<img src="myheaderimg.png" alt=""><p>my description</p>`;.
On each page, keep the elements in your HTML, but leave them empty, the script will fill them in for you, so you keep them where they were in the DOM but just <header></header>, <div id="sidebar"></div> and <footer></footer> - nothing inside them.
And then, at the bottom of the <body>, you add <script src="path_to/layout.js"></script> - the script must be loaded at the bottom of the <body> because by then the whole layout has already loaded and the elements the script is going to fill are already there.
And that's it, now whenever you want to update or change something you just edit your layout.js and it will change on every page :)
Make the small web welcoming
Good programs to have and services to use:
Over the years, the core stuff I'd install on every fresh start has changed widely. I have been a pirate all my life, so having full MS Office, Macromedia and Adobe packages weren't ever a problem. Over time I started favoring Open-Source initiatives, though.
LibreWolf is very privacy-oriented light web browser based on Firefox, fairly new but with a very active community and regular updates, but if you are looking for anonymity for some online activity, then you better go with Tor. I like that you can keep convenient accounts logged on LibreWolf and it comes with uBlock Origin. Tor has its own adblocking measures that is not as good, and although you can use uBlock Origin with it, the third party is a vulnerability if you are aiming at anonymity. Also, remember that Tor is not for streaming and stuff, for its layered encryption severely impacts the bandwidth.
I talk more about browsers and tons of other privacy stuff on Fuck Big Tech.
The main tool I use to control the connections going on my device, it's probably the first thing I'm installing after downloading a new browser. I talk more about why using firewall and DNS control on Fuck Big Tech too
Essential for compressing folders. WinRAR still has a special place in my heart for being a cool company with a fun PR, but although it's still the most popular program, 7-Zip is superior in every way.
LibreOffice is the best Open-Source alternative to the heavily bloated MS Office. But if you just want to quickly share some files online, try CryptPad - I've been saving some stuff on Proton Docs as well.
Moving away from the bloated crap that became Photoshop was quite hard. GIMP is still the best Open-Source option for heavy image editing, but quite hard to get into. Gladly, the PhotoGimp mod exists. For art, Krita is the way to go, but for some light work, Photopea it is.
Some may call it a convenience Photopea being an online tool, but I'd really like an official offline version.
My Open source recommended alternatives to AI-infested Windows crap.
Email services
Google is very convenient for logons on major services, sites, and quick checks through your web browser since all your activity is tracked and used for serving ads anyway. The easiest available free alternative focused on your privacy is Proton Mail, although their e2ee encryption is oversold, since metadata is not encrypted. My personal pick is pairing the Open-Source desktop service Mozilla Thunderbird with a RiseUp.net email. RiseUp.net is a non-commercial independent organization with strong ethics focused on privacy, that actively resists governmental control, and purges logs daily. However, check your ideological affinity before applying.
I talk more about email providers and tons of other privacy stuff on Fuck Big Tech.
Search Engines
DuckDuckGo is the most popular search engine if you want to avoid getting profiled, your history tracked, targeted ads, biased results and filter bubbles. However, DuckDuckGo is mostly based on Bing and Yahoo, while Google is still the behemot, with the amount of crawled and indexed content towering everything else, so what I really recommend is using Startpage, who uses Google's index but removes all their tracking and data collection. Or use both, why not.
Again, check Fuck Big Tech for more info.
Blogging and Web Hosting
If you want to focus on privacy, and your project is suitable, you should check the WordPress-based Noblogs and read their manifesto. Like RiseUp.net, they also encrypt your activity, purge your data, and protect your privacy and anonymity. They also offer free web hosting, but as a noncommercial organization maintained by donations and volunteer work, your project needs to share their ideological inclinations.
Finally, a great free web hosting service, reminiscing a time before social media killed internet creativity, is this very one you're surfing right now, Neocities :)
Check also NekoWeb.
VPN
VPN services are paid, and I don't have much experience with them, for I don't live in a country where corporations force ISPs to rat you out. But for light internet usage, i.e. no streaming or torrenting, consider using the free Proton VPN.
Again, I talk more about it on Fuck Big Tech.
Social Media
I've grown to loathe social media. I'm outdated and mostly uninterested at the moment. I was participating on lemmy.ml and then moved to lemmy.dbzer0.com but that's it (ml promotes itself as being about free open source software but it's actually a marxist-leninist stalinist instance, I moved to dbzer0 that is anarchist). However, I talk more extensively about social on Fuck Big Tech too.
Yes, I'm a Windows user, although I get madder at their increasing control and our decreasing customization options at every new release. I tried Ubuntu somewhen in the late '00s, but the low compatibility at the time, especially for gaming, drove me away - I'm sure it's way better now.
I'm not one to spend on hardware. I can count one hand the amount of desktop and laptops I have owned. When I tried to move my last laptop from Win10 to Win7, in a time Win7 was still supported, I discovered its hardware simply had no plugins for it, and I couldn't even use the keyboard or USB ports... discovering this industry practice was quite shocking for me, and my new device is also a laptop for I need its portability, and I never checked its compatibility with other systems, but if possible, I shall try Linux again in the future, probably Kubuntu for its stability, or Pop!_OS for its compatibility (also KDE Plasma and Cosmic looked like the most interesting desktop environemnts for me), then I will know more about which build to recommend. Also, I'm keeping my eyes on Tails if I'm ever to get nasty again.
Sharing is caring - and never trust corporate streaming!
My older brother came from Napster. When I joined the internet I was on Kazaa. I remember trying eMule and LimeWire later and finding them awnful, but in hindsight, Kazaa was also pretty crappy. It was only when I joined SoulSeek that I discovered what a great P2P community looked like.
And the best tool for very large files, like movies, series and softwares. Forget every other Torrent client that will bombard you with ads, try to sell you cryptocrap and even use your hardware to mine. qBittorrent is the superior and free Open-Source alternative.
Where to start? Well, I use it mostly for movies and series. 1337x has a lot trackers, EXT has more options. Nyaa is especialized in anime and manga. For old stuff I'm not finding, I still go to The Pirate Bay. There are tons of other options out there, though, and if you are not finding something, it never hurts to just enter the name followed by "watch/read online" in a search engine.
Store locally or let corporations destroy everything
There are a lot of online tools available to download content from most streaming platforms, but they are mostly very crappy. For most popular video hosting webistes I really like to use 4K Download, fairly generic name but also light and with very good options. Devs also seem fast to update protocols when needed. As for most popular music streaming platforms, I've been using Sidify, which is competent but I'm not that happy with the program. Both are paid services, but of course you can look for cracked versions at your own risk - both aren't very trustworthy to begin with.
I accept recommendations, though, because I'm not that knowledgeable on this and there might be better options out there.
It really whips the llama's ass!
I have been happily married to Winamp for almost 25 years now. Yeah, I may have accidently used Windows Media Player sometimes, and maybe I had gotten naughty with foobar2000 as well to experimence new things, but I always come back to you, my love.
The last version of Winamp is 5.666 from 2013, after that Nullsoft was terminated and Radionomy launched buggy versions focused on wallets and NFT crap, really laughable.
WinAmp Community Update Project, as the name suggests, is a community-driven project. It's working up from Winamp 5.666 and has a nice and active community. The best Winamp experience nowadays is through WACUP.
One thing I love about Winamp is the community it had behind it. Creating skins and visualizations was so easy everyone would do it and you had tons available, although several had very questionable quality. Winamp Skin Museum has an awesome collection of skins for the default form, but there were also freeform skins that completely changed the UI. I couldn't find a good library focused on freeform skins, but you can find a good amount at Winamp Heritage, which also has a plenty visualizations.
One of my favorite skins is PIPBoy 2000 by Gerk2077, based on the Fallout UI (by the way, the background here is my recreation of the original Fallout screensaver, and this font you are reading is the Fallout font. If you plan to use PIPBoy 2000 skin, you better use with the proper font!), but I also like a lot WACUPified color-theme.
obs: The song at the top of this page is Whip the Llama's Ass by Wesley Willis, the inspiration for Winamp's slogan "It really whips the llama's ass!".
Yeah I love Winamp, but when it comes to customization and library management, foobar2000 outclasses everything else. As I'm not very much into "exploring the library", having the music player occupying my whole screen, displaying information I don't really need while I listen to the music (of course, the customization includes removing all of that, and you can make a compact mode), and I prefer to play custom playlists, foobar2000 tools are way beyond my needs. Winamp may have more of a nostalgic value to me and WACUP is a great music player, but for a more "professional" experience, foobar2000 it is.
Audio Editing
These are not professional tools. They are light tools for quick use. I've picked them long ago, at the time they seemed the best or most suitable around. Although those projects are very much alive and active, I did not update myself, so if you think they are outclassed now, let me know.
Also, FLAC libraries are excellent and I fully support them, however audiophiles telling you they can tell the difference between 320kbps MP3 and FLAC audio are either lying or delusional, for even with expensive hardware people fail blind tests. If you are not a professional or an archiver, MP3 is more than enough for you.
VideoLAN Client is another proof that quality content, prioritizing user's experience and privacy, will never come from corporate overlords. A free Open-Source initiative that humiliates every player the billionarie tech giants have created. Light, fast, feature-rich, the only media player you need.
It also works as an audio player, so if its limited UI customization isn't a problem for you, then yeah, you don't really need other programs.
For more in-depth edits and more tools, another pretty good and light Open-Source option, although I had problems before trying to edit very large files. The community is pretty active and updates are frequent, so perhaps by time you read this I'd have no complains at all about it.
Another powerful, yet very light, Open-Source program. I know it's very popular for streaming, but I don't stream so I can't comment on it. It is, however, excellent for video capture, and only if you suffered through Fraps and Bandicam you'd know how great it is.
Other powerful Open-Source tools are Kdenlive, and Blender, but I haven't used them much.
About emulators and roms.
I used to game a lot when I was a kid. I had a Sega Genesis and a Nes-clone called Dynavision, a neighbor had a Master System, a friend from school had a Genesis and a Saturn, another had a SNES and a Nintendo 64, another had a PC, a cousin that I would see often had a SNES and a PC, another had a SNES and a N64, another cousin had fucking everything: Genesis, SNES, N64, Playstation, GameBoy, Game Gear and PC. But when I visited my brother while he was in college, and he showed me his emulator collection with hundreds of games, plus Napster, I realized PC was the way to go!
Before talking about emulation, let's talk about being a good boy. I mentioned before being a pirate all my life, but nowadays I have a GOG account and even bought quite a few games. The difference from GOG and other platforms is its DRM-Free policy, and despite the name originally meaning Good Old Games, every modern game that doesn't rely on extremelly shitty anti-consumer practices are available there as well. While you don't own shit on other platforms, and they force you to use their launcher to download, install and play the games, which they can cut your access to anytime, on GOG you have the option to just download the .exe and do whatever you want with it. After buying the game you don't depend on GOG for anything else anymore - they also have a launcher you can use if you want your gaming stats and the social features. GOG has been doing a great work for software preservation and restoration. ALWAYS BUY ON GOG.
The Multiple Arcade Machine Emulator is a wonderful Open-Source project developed by the most beautiful people. With almost 30 years in the making now, its objective is to emulate systems with perfection. Their library is insane, and they have done so much for software preservation!
As MAME want games to run 100% correctly, instead of just being playable, their system compatibility updates are very slow, but over the years I abandoned many other emulators, like FinalBurn Alpha and NeoRageX, because their whole libraries became fully compatible.
As of now, It's been more than ten years that I've last updated my MAME, and I just saw they incorporated MESS (Multi Emulator Super System, a related project doing the same thing for consoles). At the time MESS wasn't the best option for gaming, but I'm sure, especially after fusing with MAME, it developed greatly in those more than ten years.
As I don't know which systems are running perfect on MAME now, I will give here the list of emulators I'm using in my Arcade machine, which were the best and more active in the early 2010s, but they might be oudclassed now:
I always had a few emulators and games on my PC but I never took it very serious, then I saw an arcade machine running on emulators and I loved the idea. Having a full cabinet would be a tad unpractical for me, so my plan was just building a dedicated PC for gaming, pluging it on the TV and pluging an arcade controller, but even the dual controllers available had only 10 buttons and one joystick for each player, it wasn't compatible with the amount of systems I wanted to emulate. I ended up designing my own project, with an extra analogic stick for games that required it as well (every game that requires dual analog, though, I'd rather play on mouse and keyboard). My project also has universal save and load buttons. Anyway, I ended up using the HyperSpin front-end, which is super flashy and customizable, and I customized the hell out of mine. However, I guess it was only by chance that ended up on HyperSpin, for LaunchBox seems to be really good as well.
Through HyperSpin I ended up getting into the EmuMovies FTP server, and man, another beautiful project done by beautiful people! Insane amount of resources recording gaming history and preserving arts, manuals, boxes, flyers, ads, all kinds of stuff.
Other resources
And where to start getting roms? At the time my go-to sites were Emuparadise, rom hustler, and the defunct The Iso Zone. I remember checking them a few years ago and they having degraded a lot - with throttled bandwidth and ad-based link shorteners. I don't know what are the best place to get roms nowadays, but if HyperSpin still let members access its FTP, you can get your mindblowed there.
