HTML, CSS, JS Editor App | Jax - Very similar to replit
Before I start, I want to remind you to always open this in a new tab.
click that button circled in red ^^
If you click that, everything will work properly with no problems. Don't try to check out the website in the console window. It won't work.
Alright, now we can start.
I made a fully functioning HTML, CSS, JS Editor App. It took me a very long time to make. This app is very similar to replit, and has almost all the features of replit.
It even has the same design as replit.
There are way to many features for me to list out, but i will give an overview.
you will see this icon on the left side of the navbar on top, once you register and login.
click on it, and you see a list of options, just like replit. If you know how to use replit, you basically know how to use Jax (the name of this site).
next on the navbar (top). You will see, just like replit all the options available. Use them just like you use replit.
when you click the sidebar option, in the image above, you will see your username too. And beside are your notifications. Click on your username to show a dropdown.
You can click on those options accordingly... just like replit.
I don't need to give any more features, cause just like i said:
if you know how to use replit, then you know how to use Jax.
it has the same things:
- talk section
Some things are different from replit.
- When you search up stuff in any search bars, always remember to hit enter to get results.
- when you want to find about a person's profile. Try clicking on their name. It takes you to their profile. You can also hover over their username, but you can only do that in the talk section.
There are three detectors in this website. The detectors are for posts. When you add a post to this site, you must pass three detectors:
If you're trying tp spam or post useless posts, this detector will not allow you, and will stop you.
If you try to curse and use bad words, the profanity detector will detect it.
Finally, if you try to post a duplicate of another's post, this detector doesn't allow you.
If you think any of these detectors are wrong, and stopped you without you doing anything, please tell me. I will fix it.
Another thing is, if you want to see the spotlight version of your own jaxes, just go to the talk section or something and click on your username. It will take you to the profile page, and you can click any jax from there. It will show your spotlight page.
If other users want to check our other user's spotlight jaxes, it's normal. Just like replit. Click on a user's username to see their repls. Same as replit.
One more thing is, in Jax (name of this site), the Share section and Tutorial section are in the same tab. They will, of course have different badges, but are in the same sections.
I thought that since both share and tutorials are about showing creativity and all, I thought to just group them.
So when you create a tutorial or share post, you will see a box below. Click it if you want to post a tutorial. If you want a share post, then don't click it.
So if you want to check out share section or tutorials, just remember that they are in the same section. The badges show if it's a
When you want to use JS or CSS, use
If I remember anything else, I will add it here.
If you know how to use replit, you know how to use Jax (the name of this site)
So not many extra instructions for Jax.
If you don't know how to navigate, or if you're have difficulties, please comment to me, and I will help you.
Here's the link for the full Jax tutorial of markdown. I made a tutorials post in Jax, just like Replit.
You can use markdown in Jax too. use them in the talk section. posts, or coments, replies. Whatever. There are just a few differences.
- When you want to use strikethrough in Jax, use
- links only work when you do:
[NAME OF LINK](URL). If you just do
LINK, it doesn't work.
- when you post images, do:
![NAME OF IMAGE](URL). If you just do
URL, it doesn't work.
I think those are the only differences in markdown.
EXTRA: You can also do mentioning in Jax. Same format.
Only thing is, you must mention users only in the beginning of your comment, reply or description or etc or at the **end ** of your coment, reply or description or etc.
just a reminder: Everything else in markdown is the same as Replit. You can even use code blocks.
You can find out if a user is a moderator or not by looking at their username.
✪ - This badge indicates that the user is a moderator.
⍟ - This badge indicates that the user is an admin.
You will also see a list in the talk section. The list is on the right side. It shows all the staff members. (mods and admins). You can also click on usernames to go to their profile, and check the badges. Like replit.
I will be picking moderators, based on their actions on Jax. If they seem responsible or whatnot, i will select them accordingly.
Moderators have a lot of extra privileges.
If you were selected a moderator, you will see an extra section on the navbar.
You can click on the
mod controls dropdown, and you will see a list of options:
- all reports
- in this, you can just see the user's reports and resolve them by going to wherever they are.
- all user's data
- for this, it's a bit complicated, so there's a separate instructions page for you in there. Read it, and you will get it.
- bug reports
- you can check out user's reports of bugs. If you can fix it, please do, or if you can't, let me know and i will fix it.
- staff chat
- this is where mods and admin (me) will chat, and discuss about some stuff. Go to your home page. You will see more info about this there.
- deletion requests
- if a user wants to delete their account, they will have to request it. You have the option to delete or not. But first, you must discuss with me.
There's more functionality for mods. You will soon find out with a bit of exploring, and discussion in the staff chat.
Moderator must do their tasks efficiently as the replit mods. More will be discussed in the chat.
Any user who violates the rules will be banned. This includes:
- trying to hack the site
- Any other things you think is not right too.
Any of the above, including any new ones, or anything that seems bad, please do not do. Or you will get banned
Thanks to these people:
@Coder100 - for helping me by giving a few SVGS like the marking answers SVG and some others.
@SixBeeps - for more SVGS
@Bookie0 - For options on color pickers
@ch1ck3n - For some other SVGS, and a little bit of help with markdown (even though I didn't use it, and it didn't work)
@OldWizard209 - For markdown too (even though this didn't work either and i didn't use it).
@Whippingdot wanted me to ping him when I post this.
If any of you have any suggestions or feedback, please let me know.
Also, please let me know if you have any problems with the website. I'm pretty sure there are some, since it's a very big site, and took a lot to code this.
Just let me know if you have any concerns.
Wish it wasn't stuck on Waking up.. Kindda don't feel like having to wait for someone to start up the server is ethical..
If I were to give you guys full credit and Make sure of it, can you teach me how i can make myself mod on my own site
This is kinda interesting, and looks like you've put a good deal of effort into it, but I'm not really sure what the purpose is?
Also, what's a "Jax"? You do realize that "REPL" is actually a real acronym that has a meaning, right?
@fuzzyastrocat if you looked at the design, it looks like replit right? And it has almost all of the features of replit. And thanks! i did put a lot of effort into it.
I do know what repl is. It's an acronym, but I haven't thought one for Jax, one day, the name just struck my head, and I liked it, so I just put it.
if you looked at the design, it looks like replit right? And it has almost all of the features of replit.
I'm still not really sure how this illustrates what the purpose is, but okay
It's an acronym, but I haven't thought one for Jax, one day, the name just struck my head, and I liked it, so I just put it.
I mean, as a user I'd be fine with "Jax" as the name of the entire website, but my issue is really that making the environments called "jaxes" instantly makes me think "Oh, Jax is a thing that means something, what does it mean?" But it actually doesn't mean anything, which to me is a bit misleading.
(Also, usually acronyms are created by taking relevant words => acronym, not "this name sounds cool" => come up with words to fit the name. The latter is usually jokingly called a backronym.)
@fuzzyastrocat i don't know what you mean by purpose. I made the site just cause I want to. Do people sometimes program for a purpose? Sometime times it's for fun. So I guess this is for learning or some fun. I just felt like making a complicated site, so I did.
Website names don't always have to mean something. I don't see how calling them "jaxes" is misleading, and I don't know why people should care. It's just a name, and it's called that.
@RYANTADIPARTHI Okay, so you just did it "because you could". That's a purpose (which was what I was asking about), all good!
Website names don't always have to mean something.
Indeed! If you read my above comment, you'll note that I take no issue with calling the website Jax. The issue I have is with calling each repl-esque programming environment a "Jax". The reason I find it misleading is because there's already a name for it — repl, environment, etc. Calling it a "Jax" makes it seem like it's somehow different from what's already been created (and is generally known), but that's not the case.
@fuzzyastrocat Yes, but just because this is a replit clone, it doesn't mean the name "Repl" must be used. Creativity wise, I chose my own things, like the website name, and others. Naming what a "repl" is generally called on my website comes under creativity, therefore, based on the website name, I called it a "Jax(es)". Like how replit - The name, and then repls, which comes from the name. On my site, it doesn't have to be called a repl, just cause it's a clone.
So there's no reason for it to be misleading, when the name has no purpose. It's just a creativity thing.
@RYANTADIPARTHI I'm by no means saying that you must use "repl", there are plenty of other words like "environment" or "vm" that would apply.
I do get the creativity argument, but I'd have to disagree that "the name has no purpose". A name gives the user an idea of what something is (that's why a name exists anywhere for that matter). So to name it something that's different from what it actually is makes the user think there's something unique about this item — but if that's not the case, I find it misleading.
Like how replit - The name, and then repls, which comes from the name.
This is backwards though — REPL (as a name) already existed, this site allowed you to create a REPL (and a REPL only at the time, iirc) in many languages and so the site name followed from that.
@fuzzyastrocat maybe for some users, the name has a purpose, but for others, I'm pretty sure it doesn't.
A name gives the user an idea of what something is (that's why a name exists anywhere for that matter).
Yes, I agree with this point, but from my previous point, some websites have names that don't actually mean something. They just liked it, and it stuck.
The same thing here. Replit is one of the sites with the names that mean something, but some sites like mine have names with no meaning.
But I'm still not sure of the misleading. I don't see how names matter in misleading.
@RYANTADIPARTHI I'm not really sure why you keep bringing up "website name", I get that website names don't always have a meaning and I've acknowledged that in previous comments. My point is about a product/service offered by the website — generally, those names do have something to do with what they are. (And that's for the reason that I've stated previously: a good product name helps the user figure out what the product is.)
I don't see how names matter in misleading.
I've created a new product, the Kwedu! Come check it out!
Oh, by the way, it's a lawnmower.
Now, to me when I hear "a new product, Kwedu", I think "oh okay there's something new here". Not "oh this is probably a slightly different version of something else". So, to me that's misleading.
To exaggerate my point, if I name a product "the ultimate soda" and it's actually rat poison, I think that would matter with respect to being misleading?
@fuzzyastrocat hmm, ok i see what you mean by misleading now, but here's what I'm saying.
Users know that this website is a replit clone, so when I refer to the code editors as jaxes, everyone knows that
jaxes = editors, because
repls = editors.
There isn't any misleading in that. And also, making an acronym for jaxes doesn't help either. Since users know what this is, the name doesn't have to mean anything.
Besides, I did specify that jaxes mean code editors, and even without me specifying, users already know that.
But yes, for an extremely new, original thing, then it is important to name it. Though an acronym is just an example for creativity.
@RYANTADIPARTHI So at the first attempt it didn't work and at the second it went suddenly I don't know why xd and I don't think about that the darkmode doesn't work, the darkmode is only important for my eyes HAHA And ps I translate everything with the google translator because i am bad at english.
Hey this is great, but maybe try creatingg something that is original, and creative. Although you put a lot of effort into this, original and authentic things are more recognized, more like the other apps you have made. Unfortunately, it is not responsive:
And, it is also very slow.
Other than that, kudos for the effort.
@OldWizard209 yeah thanks, thought i was afraid of this. The responsiveness. I guess you have to put a certain screen size for it to work. I'll do a better job for responsiveness for my next projects. For now, try to find the size suitable for you.
This was supposed to be a clone of replit, like my youtube app.
I don't think originality is the reason.
For slowness, i don't know why, but i guess it's db.
@DillonB07 yeah, i thought of chaning it, but I forgot about it. I probably will do it later.
Also, yes I did think of making the editor a bit better, but I got this idea in the end, and it was already too much to change, so I just kept it.
And the dark mode is still in process, meaning it's not complete yet. There's a
BETA badge beside it right? It means: still in process.
@RYANTADIPARTHI I get the Beta, but my point was it doesn't seem to do anything. Normally a beta will function, but will be buggy. Also, the option to change between light and dark resets to light is what I was meaning more.
But overall, it is a really awesome project. Maybe you should join the Replit 2 team! I'm joking, doubt you would want to
@DillonB07 oh. Well, in this case i meant
Beta to be not completed yet. I mean it is complete a little bit, but I didn't want to put it when it was not all complete. When it's fully complete, then I was going to do it.
Also, the change does nothing. You're getting light, because light mode is the default. It doesn't change yet. So the option to change doesn't work yet.
Also, thanks! And what do you mean by the Replit 2 team?
You mean the replit team?
Oh, I just realised it wouldn't work for you because of envs. The password is stored in an environmental variable for obvious reasons.
No problem! Good luck continuing with Jax. Maybe it'll be better than Replit one day..... (And it would be an editor better than Replit hosted on Replit....)