Resources Page

tools & tips i use for creating my sites

website tools & workflow

• servers & techy stuff
  • Github pages (tutorial)
  • Namecheap - buy your own domain
  • InfinityFree - host website with PHP backend for free
  • CounterAPI - add visit counter to your site
• creating assets
  • Adobe photoshop
  • Medibang paint
• Image compression
• Photoroom background remover
• TinyPNG
• image resizer
• text emoji combos: ⋆.˚𖦹⋆✮⋆.˚

How to's:

• Configure neocities with github & vscode by bcorp
• MDN Web Docs - read documentation! i know a lot of people also use W3Schools tutorials
• videos and random tutorials i have saved on yt: click to open playlist

Terminal tools

• yt-dlp - i use this for yt-splitter to get audios from youtube and it is the goattt
1. download the exe file
2. put it in a directory that is in your PATH variable
3. check that it's in your path using yt-dlp.exe --version
4. cd /path/to/directory/where/you/want/files/extracted/to
5. yt-dlp.exe --extract-audio --split-chapters --audio-format mp3 [URL]
• image conversion to webP:
• command line tutorial on web.dev
• one-line scripts that i use (in Git Bash):
1. convert 1 file: `for file in /c/path/to/file/*; do cwebp -q 100 "$file" -o "${file%.*}.webp"; done`
2. convert all files in a directory: find /c/path/to/file/ -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) -exec bash -c 'cwebp -q 100 "$1" -o "${1%.*}.webp"' _ {} \;

Visit counter using CounterAPI

1. create an account on CounterAPI
2. create a workspace, and create a counter within that workspace
3. add this code to your html to update and display visit counter:

<script>
// Counter is available as a global variable
const counter = new Counter({ workspace: 'your-workspace-slug' });

counter.up('your-counter-slug')
  .then(result => {
	// for debugging purposes
	console.log('Counter result:', result);
	console.log(`Visits: ${result.data.up_count}`);
	// update the counter display
	document.getElementById('counter').textContent = result.data.up_count;
  })
  .catch(err => console.error(err));
</script>

<div>visits: <span id="counter"></span></div>