labrat.party

Welcome to labrat.party! 🎉

This project welcomes contributions from any jpegtan community members (the labrats in question).

If you don't know how this stuff works but you know what you want to add/change, open an issue or ping me on discord and I'll be happy to walk you through it!

Repository Tour

This page shows what's called a repository, which is basically just a fancy folder that tracks changes to the files you edit.

Here's a guide for what's in this repository:

• What you're reading here is the README. It's the primary reference for everything in here :)
• project contains the program that runs on a computer somewhere to send the HTML, CSS and JavaScript to your browser.
• project/webstuff contains all the HTML, CSS and JavaScript that this site uses.

What is any of this stuff?

HTML

HTML is what websites use for structure, and it's the first thing you actually get when you load a website.

A HTML document is made up of tags, which usually come in pairs, one for opening and one for closing. An opening tag looks like <html>, and a closing tag looks like </html>.

An opening and closing tag pair create an HTML element. For example, in <html></html>, <html> is the opening tag, </html> is the closing tag, but <html></html> is what defines the element.

Elements can have other elements inside them, which means you can structure things in very nice ways. We'll get to that later!

Every HTML document starts with <html> and ends with </html> (this one is called the root element). HTML documents usually have a <body></body> element, too. There are other elements for other things, and each element has a particular meaning and default style.

Have a look below this paragraph at the example HTML document. It shows up as a white page with a single paragraph (<p></p> element) on it that says "labrats are cool!". Try copying the text of these examples into a text document, renaming it to end in .html, and double-clicking it!

<html>
    <body>
        <p>labrats are cool!</p>
    </body>
</html>

We can do some fancier stuff too, like including a website title with a <head></head> tag that contains a <title></title> tag:

<html>
    <head>
        <title>you better believe it!</title>
    </head>
    <body>
        <p>labrats are cool!</p>
    </body>
</html>

Now the browser tab will show "you better believe it!" when we visit this page :)

CSS

CSS is what websites use for styling. It targets specific HTML tags to change how they look.

Maybe we want our "labrats are cool!" message to be blue? We can do that using CSS:

p {
    color: blue;
}

The p there is a selector, and it means that this CSS rule targets all <p></p> elements in our HTML. color is what's known as a CSS property. We can also do some fancier stuff to target our HTML elements more specifically, but to do that we'll want to make some changes to our HTML:

<html>
    <head>
        <title>you better believe it!</title>
    </head>
    <body>
        <p>labrats are cool!</p>
        <em class="evil">labrats are not cool.</em>
    </body>
</html>

<em></em> is an element that means emphasis, and usually shows its text in italics. That class="evil" part is an attribute, which is used in the opening tag of an HTML element to add extra info. class is a special kind of attribute that CSS can use, like so:

p {
    color: blue;
}

em.evil {
    color: red;
}

Now any <em class="evil"></em> elements will show up as red. We could even make any kind of element red if it has the evil class:

p {
    color: blue;
}

.evil {
    color: red;
}

Spot the difference? :3

Selectors only apply if each part of them applies, so instead of only applying if the element is <em></em> and the class is evil, it now applies on every evil element, regardless of what kind of element it is.

There are plenty more CSS properties out there, and plenty more HTML elements too. If you're confused about any of them, ping me in the discord server or put up an issue here :)

Running yourself

First you'll have to install Go if you don't have it.

Once you have Go, run the following in a terminal:

go run flipfloppy.io/labrat.party/server@latest

It should open a window for you to browse your local version of the site :)

Making changes

There's two prerequisites:

1. First, you need Git (the tool for the fancy folder stuff).
2. Then you also need Go.

Open a terminal window and run the following:

git clone https://code.flipfloppy.net/flipfloppy/labrat.party.git
cd labrat.party
cd project

git clone grabs a copy of the code, and cd changes into the directories created by the clone. Then you can run:

go run .

This will start up the server in the same way as in Running yourself, except this time it's using the code that's now on your machine! You can edit the code and refresh the page with Ctrl+Shift+R to see your changes.

If you edit the server code, be sure to re-run go run . by doing Ctrl+C in the terminal where it's running and running go run . again.