F Word is a Twitter-like social medium built with Firebase, Github Pages, and Google Fonts. It's named with the intention of having alternative connotations when spoken.

I started by making a backend API using Firebase Cloud Functions as a gate way between the user and the Firebase Realtime Database. The way Google seems to recommend you do seems has you directly modify the database from the client side, but if the client can edit the database, they can edit the database. I want server-side validation, and Cloud Functions allow me to do that.

My idea was that you could send your password to the Firebase servers, where it's encoded (using a md5 hash) and checked with your actual encoded password, and if it matches, it creates and returns a session ID, which is required to validate any action that is associated with the user. The user can then store the session ID until it expires or the user signs out. The only problem with this is that someone could open the JS console, steal the session ID, and use it on their own computer. Maybe in the future it should store the user's IP and/or browser data and check to see if it matches with the original data from when the user signed in and created that session ID.

I forgot to make the password changing require the old password, so the old password input in the settings is actually fake; you can leave it empty and it'll still work. I am too lazy to fix this.

The front end takes advantage of the History API, which I had just discovered, which introduces the pushState method that only changes the URL without reloading. I thought that was prety cool, so it's abused in this web app.

Github Pages pages are static, so I can't generate them from the server. Instead, the client side is just a single web page whose contents are generated on the client side, which fetches stuff using the backend API thing I made with Firebase.

The fonts I used were Montserrat for headings and buttons and Open Sans for body content.

F Word uses Minimal Markup, a minimalist markup language I made that only has italics and links.

I think the coolest thing about F Word is that you can tab through the website, selecting links, buttons, and inputs, and you'll be able to know which one has the focus. Normally, this doesn't happen because I prioritize looks for mice, and when you click on a button, the focus stays on the button, but I don't want the ugly blue focus glow to stay when you let go of your mouse. F Word is able to distinguish between tab and mouse focus, which I think is pretty cool. Notice how if you click on a button, the white outline doesn't appear, yet if you use the tab key to focus on it, it does. I hope to introduce this system to my current and future projects.

The purple-orange colour scheme is inspired by a random gradient I got from Ugwisha. Its purple-orange gradient reminded me of the lava and obsidian of a volcano, which I thought was pretty cool. The orange makes a great accent colour, and the purple gives an opportunity to make the website dark themed.

F Word is in my words-go-here repository, a defunct repository meant to be a text editor, because F Word lets you post things in a text box, and "words go here" in the text boxes. I also didn't feel like creating a new repository, and the sheeptester.github.io one is fat.

Privacy policy

I collect whatever data you send me; your passwords, desired usernames when signing up, bios, secrets, session expiry lengths, posts, and the posts you like.

Google and Github Pages collect anonymized data for analytics whenever you make a request to their servers.

If you do not want your data collected, it is too late.

Your brain also collects data through your optic organs; unfortunately, it is illegal to stop this.

Terms of use

You can do whatever, but I also can do whatever. However, I am not legally responsible for anything that happens or doesn't happen.

Github Pages and Google might have different ideas though, so don't do anything too illegal.