About: Resources

Since the beginning of the internet, people have always been sharing around tips and advice to each other; Ask any programmer and they'll say most of their code is stolen from StackOverflow.
Having my friends start out web development (by my suggestion) with little to no knowlege made it clear to me how difficult and confusing it is for newbies to start out, so I'll be compiling a few helpful resources to lead them in the right way, as well as some scripts and code blocks (some made by me) to allow them to have certain features on their site without having to go through hours of pain (like I did :sob:).
Thanks to the following people for helping me gather links: mei

List

Learning and reference materials
- W3Schools_: Great site that explains how to use HTML, CSS and JS. Has easily understandable documentation, live examples, and descriptions for each tag/element/function.
- Sadgirl's HTML+CSS Guide_: Comprehensive guides for certain HTML/CSS features
- Make your own site by Jake_: Guide on how to start making your own site from scratch
- Cheshire's Easy HTML/CSS Tutorial_: A simple introductory tutorial to HTML and CSS
- Minecrafter48's JavaScript-free webring tutorial_: A tutorial to make a webring without using JavaScript
- Mozilla Developer Network's HTML Resources_: Documentation for HTML/CSS/JS by the Mozilla company
- Cave of Dragonfly Cave's HTML Guide_: A beginner's guide to HTML
- HTMHell_: Guide to fixing common HTML bad practices and mistakes
- A Quick 'n' Dirty Guide to Making a Website_: A helpful starter guide to creating a website
- CSS Tricks_: A blog article-esque site that provides a lot of CSS effects and features
- joosh's Nekoweb Domain Tutorial_: A guide to use custom domains with your Nekoweb site
- Holy Grail column layout tutorial_: A guide to laying out your site into headers and columns and have them work cross-platform
Effects, Styles and CSS
- Stylesheets
  
  Retro-OS / Device-interfact inspired CSS styles:
  
  Eggramen's CSS Testpages
- Overlays, filters, and effects
  
  CRT Display
  
  RV's free Javascript/DHTML effects:
  Free to use decoratory effects using JavaScript
Scripts and features
- Live timezone clock
  Creator: me
  Description: As the name suggests, this is a JavaScript script that allows you to display the time in a particular timezone on your website. This should be accurate as long as the viewer's device's system time is correct. There might be a better way to do this, but Date.UTC() doesn't work for some reason, so I made this with a bunch of math and procrastination.
- Live music streaming status (Last.fm)
  Creator: max / laura
  Description: "Using Last.fm's API, this widget tracks what song you are currently listening to and displays it on your site. "
- Nekoweb site statistics
  Creator: max
  Description: "Using the Nekoweb API, this script grabs data about your website, which include your site's: Creation Date, Last Update Date, Views, and Followers"
- Webring script (Onionring.js)
  Creator: Garlic Garden
  Description: "onionring.js is the script that makes that widget work - it's just a few javascript files that help you create and manage a webring, even (or especially!) if you don't know anything about coding"
- Webring script (Ringfairy)
  Creator: Kersed
  Description: "This is a webring generator written in Rust. It's similar to a static site generator, but specialized for webrings. Unlike most webrings which rely on some kind of server-side code (e.g. PHP, JS) to redirect visitors, this approach uses HTML redirects. The static approach allows for simpler hosting requirements (it can be hosted on Neocities, GitHub Pages, etc) since it eliminates the need for server-side processing. Updating the webring will require you to regenerate the whole thing. This is quick & simple, and shouldn't need to be done frequently. But it is an extra step which conventional server-side systems might not have, unless you automate it, such as through GitHub Actions."
- june's super cool super easy webring template
  Creator: june
  Description: "do you want to make a webring? not know anything about javascript? well boy howdy are you in luck.
  introducing: webstring.js! a super-simple alternative to garlic.garden's excellent onionring."
- monsieur music player
  Creators: adilene.net & monsieurdoll
  Description: A cute styled long-bar type music player
- SCM Music Player
  Creators: cshum, et al. (I'll list the others later, too lazy rn xd)
  Description: A basic long-bar type music player
- July's music player
  Creator: july
  Description: A colapsible music player
- YouTube Music Player
  Creator: Ryan Feigenbaum
  Description: A music player that plays music or videos from a YouTube playlist using YouTube's iframe API
Graphics and icons
- Graphics Dispensary
- Identity buttons

JavaScript: TimeZone clock

Timezone Clock

This script works by retrieving the system time and timezone, and calculating the time of the desired timezone based on that. It will work accurately as long as the system time is correct and reports the correct UTC Offset code.

It works defining a variable with new Date(); then converting that into a string by datetime.toString(); which will return something like Fri Dec 13 2024 08:13:54 GMT+0700 (Indochina Time), from which, it substrings the relevent parts (i.e., weekday, month, date, year, hour, second, UTC-/+, UTC hour offset, and UTC minute offset)

This script already accounts for leap years, as well as day, month, and year crossings when converting timezones. It does not use any APIs or libraries.

-----------------------------------------------------------------------------

Setup:

In your HTML file, enter elements with the id's as follow: hr,min,sec,weekday,date,mo, and yr. This will also be given below, so you can skip this step and just copy the code returned by the editor.

-----------------------------------------------------------------------------

Generator:

*

Date format:

Time format:

Location name (Optional):

*: Required

-----------------------------------------------------------------------------

HTML:

JavaScript:

// PLACE THE FOLLOWING CODE EITHER IN A .js FILE THAT IS LINKED TO YOUR HTML FILE OR WITHIN A < script > tag

function isDivisible(x, y){
        if(x%y==0){
            return true;
        }else{
            return false;
        }
    }

function isLeap(year){
        if(isDivisible(year, 4) || isDivisible(year, 400)){
            return true;
        }else{
            return false;
        }
    }

function updateTime() {
        var hrOffset = 7;
        var minOffset = 0;
        var hemisphere = "+";
        var dateTime_now = new Date();
        var dateTime_now_utc_str = dateTime_now.toString();
        let localtimezonehr = Number(dateTime_now_utc_str.substring(29,31));
        let localtimezoneFullhr = Number(dateTime_now_utc_str.substring(28,31));
        let localtimezonemin = Number(dateTime_now_utc_str.substring(31,33));
        let localhemisphere = dateTime_now_utc_str.substring(28,29);

let timeYearFull = Number(dateTime_now_utc_str.substring(11,15));
        let timeMon = dateTime_now_utc_str.substring(4,7);
        let timeDay = Number(dateTime_now_utc_str.substring(8,10));
        let timeWeekday = dateTime_now_utc_str.substring(0,3);
        let timehr = Number(dateTime_now_utc_str.substring(16,18));
        let timeMin = Number(dateTime_now_utc_str.substring(19,21));
        let timeSec = Number(dateTime_now_utc_str.substring(22,24));

if(hemisphere == "-") {
            hrOffset *= -1;
            minOffset *= -1
        }
        if(minOffset+timeMin > 59){
            timehr += 1;
            timeMin += minOffset - 60;
        }else if(minOffset + timeMin < 0){
            timehr -= 1;
            timeMin += minOffset + 60;
        }

console.log(timeMon);
        console.log(timeYearFull);

if((timehr + 24 - localtimezoneFullhr + hrOffset)%24 < 10){
            document.getElementById("hr").innerHTML = "0" + String((timehr + 24 - localtimezoneFullhr + hrOffset)%24);
        }else{
            document.getElementById("hr").innerHTML = String((timehr + 24 - localtimezoneFullhr + hrOffset)%24);
        }

const maxDaysReg = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        const maxDaysLeap = [31, 29, 31, 30 ,31, 30, 31, 31, 30 ,31, 30 ,31];
        const weekdays = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
        const months = ["Jan", "Feb", "Mar", "Apr", "Jun", "Jul", "Aug", "Sep", "Nov", "Dec"]

if((timehr + 24 - localtimezoneFullhr + hrOffset)%24 < 10){
            document.getElementById("hr").innerHTML = "0" + String((timehr + 24 - localtimezoneFullhr + hrOffset)%24);
        }else{
            document.getElementById("hr").innerHTML = String((timehr + 24 - localtimezoneFullhr + hrOffset)%24);
        }

if(timehr-localtimezoneFullhr+hrOffset < 0){
            if(timeDay - 1 < 0){
                if(!isLeap(timeYearFull)){
                    document.getElementById("date").innerHTML = maxDaysReg[months.indexOf(timeMon) - 1];
                }else{
                    document.getElementById("date").innerHTML = maxDaysLeap[months.indexOf(timeMon) - 1];
                }
                document.getElementById("mo").innerHTML = months[months.indexOf(timeMon) - 1];
            }else{
                if(timeDay - 1 < 10){
                    document.getElementById("date").innerHTML = "0" + String(timeDay - 1);
                }
                else{
                    document.getElementById("date").innerHTML = String(timeDay - 1);
                }
            }
            document.getElementById("weekday").innerHTML = weekdays[weekdays.indexOf(String(timeWeekday)) - 1];
        }else if(timehr-localtimezoneFullhr+hrOffset > 24){
            if(!isLeap(timeYearFull)){
                if(timeDay + 1 > maxDaysReg[months.indexOf(String(timeMon))]){
                    document.getElementById("mo").innerHTML = months[months.indexOf(timeMon) + 1];
                    document.getElementById("date").innerHTML = "01";
                }else{
                    if(timeDay + 1 < 10){
                        document.getElementById("date").innerHTML = "0" + String(timeDay + 1);
                    }
                    else{
                        document.getElementById("date").innerHTML = String(timeDay + 1);
                    }
                }
            }else{
                if(timeDay + 1 > maxDaysLeap[months.indexOf(String(timeMon))]){
                    document.getElementById("date").innerHTML = "01";
                    document.getElementById("mo").innerHTML = months[months.indexOf(timeMon) + 1];
                }else{
                    if(timeDay + 1 < 10){
                        document.getElementById("date").innerHTML = "0" + String(timeDay + 1);
                    }
                    else{
                        document.getElementById("date").innerHTML = String(timeDay + 1);
                    }
                }
            }
            document.getElementById("weekday").innerHTML = weekdays[weekdays.indexOf(String(timeWeekday)) + 1];
        }else{
            if(timeDay < 10){
                document.getElementById("date").innerHTML = "0" + String(timeDay);
            }
            else{
                document.getElementById("date").innerHTML = String(timeDay);
            }
            document.getElementById("weekday").innerHTML = String(timeWeekday)
            document.getElementById("mo").innerHTML = String(timeMon)
        }

if(timehr-localtimezoneFullhr+hrOffset < 0 && timeMon == "Jan" && timeDay == 1){
            document.getElementById("yr").innerHTML = String(timeYearFull - 1).slice(-2);
        }else if(timehr-localtimezoneFullhr+hrOffset > 24 && timeMon == "Dec" && timeDay == 31){
            document.getElementById("yr").innerHTML = String(timeYearFull + 1).slice(-2);
        }else{
            document.getElementById("yr").innerHTML = String(timeYearFull).slice(-2);
        }

console.log(timehr);
        console.log(localtimezonehr);
        console.log(localtimezonemin);

if(localtimezonemin == 0){
            document.getElementById("min").innerHTML = String(timeMin);
            document.getElementById("sec").innerHTML = String(timeSec);
            if(timeMin < 10){
                document.getElementById("min").innerHTML = "0" + String(timeMin);

}
            if(timeSec < 10){
                document.getElementById("sec").innerHTML = "0" + String(timeSec);
            }
        }else if(localhemisphere == "+"){
            document.getElementById("min").innerHTML = String((timeMin + 60 - localtimezonemin) % 60);
            document.getElementById("sec").innerHTML = String(timeSec);
            if((timeMin + 60 - localtimezonemin) % 60 < 10){
                document.getElementById("min").innerHTML = "0" + String((timeMin + 60 - localtimezonemin) % 60);

}
            if(timeSec < 10){
                document.getElementById("sec").innerHTML = "0" + String(timeSec);
            }
        }
    }
    setInterval(updateTime, 1000);
    updateTime();
    var dateTime_now = new Date();
    var dateTime_now_utc_str = dateTime_now.toString();
    console.log(dateTime_now_utc_str);

JavaScript: Live music streaming status

Live music streaming status (Last.fm API)

Creators: max & laura

This script is not made by me! It's made by max and laura!! It's filed under the MIT license.

"Using Last.fm's API, this widget tracks what song you are currently listening to and displays it on your site." If you have a last.fm account that's linked to a music streaming service, this widget should work to display what music you're listening to to your site's viewers.

Compatible services: Spotify, Deezer, Tidal, YouTube Music [*], SoundCloud [*], Pandora [*], Bandcamp [*], Mixcloud [*], Hype Machine, 8tracks

[*]: Requires 3rd party web extensions; doesn't work with their mobile app if they have one.

-----------------------------------------------------------------------------

Setup:

1. Create an account on last.fm

2. Link your music streaming service account to your Last.fm account with the instructions provided on this page

3. Add an element with the id listening to your HTML (This step is already covered below so you can skip it if you use the generator).

-----------------------------------------------------------------------------

Generator:

*

*: Required

-----------------------------------------------------------------------------

HTML:

JavaScript:

// PLACE THE FOLLOWING CODE EITHER IN A .js FILE THAT IS LINKED TO YOUR HTML FILE OR WITHIN A < script > tag

// MIT License
// 
// Copyright (c) 2024 maxpixels/max.nekoweb.org
// 
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// 
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
// 
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

const USERNAME = "";
const BASE_URL = `https://lastfm-last-played.biancarosa.com.br/${USERNAME}/latest-song`;

const getTrack = async () => {
    const request = await fetch(BASE_URL);
    const json = await request.json();
    let status

let isPlaying = json.track['@attr']?.nowplaying || false;

if(!isPlaying) {
        // Trigger if a song isn't playing
        return;
    } else {
        // Trigger if a song is playing
    }

// Values:
    // COVER IMAGE: json.track.image[1]['#text']
    // TITLE: json.track.name
    // ARTIST: json.track.artist['#text']

document.getElementById("listening").innerHTML = `
    <img src="${json.track.image[1]['#text']}">
    <div id="trackInfo">
    <h3 id="trackName">${json.track.name}</h3>
    <p id="artistName">${json.track.artist['#text']}</p>
    </div>
    `
};

getTrack();
setInterval(() => { getTrack(); }, 10000);

JavaScript: Nekoweb site statistics

Nekoweb site statistics

Creator: max

This script is not made by me! It's made by max!! It's filed under the MIT license.

"Using the Nekoweb API, this script grabs data about your website, which include your site's: Creation Date, Last Update Date, Views, and Followers"

-----------------------------------------------------------------------------

Setup:

1. (Obviously) you need to create a nekoweb.org account and website. This script will use your nekoweb / nekoweb site username

2. In your HTML file, create elements with the ids created, updated, visitors, and followers. This will also be covered below so if you're using the generator, you don't have to worry about this.

-----------------------------------------------------------------------------

Generator:

*

*: Required

-----------------------------------------------------------------------------

HTML:

JavaScript:

// PLACE THE FOLLOWING CODE EITHER IN A .js FILE THAT IS LINKED TO YOUR HTML FILE OR WITHIN A < script > tag

// MIT License
// 
// Copyright (c) 2024 maxpixels/max.nekoweb.org
// 
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// 
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
// 
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

let username = "";

(async () => {
  try {
    const request = await fetch(`https://nekoweb.org/api/site/info/${username}`,);
    const json = await request.json();

const updated = new Date(json.updated_at).toLocaleDateString(); // Formats Last Updated text
    const created = new Date(json.created_at).toLocaleDateString(); // Formats Creation Date text

if (document.getElementById("created")) document.getElementById("created").innerHTML = `<em>Created</em>: ${created}`;
    if (document.getElementById("updated")) document.getElementById("updated").innerHTML = `<em>Updated</em>: ${updated}`;
    if (document.getElementById("visitors")) document.getElementById("visitors").innerHTML = `<em>Visits</em>: ${json.views}`;
    if (document.getElementById("followers")) document.getElementById("followers").innerHTML = `<em>Followers</em>: ${json.followers}`;
  } catch (error) {
    console.error(error);
    
  }
})();

69:42:00 Sun,00 Dec 00

Live example of script will appear here once selected!!

About: Resources

List

JavaScript: TimeZone clock

Timezone Clock

Setup:

Generator:

JavaScript: Live music streaming status

Live music streaming status (Last.fm API)

Creators: max & laura

Setup:

Generator:

JavaScript: Nekoweb site statistics

Nekoweb site statistics

Creator: max

Setup:

Generator: