HTML, CSS, JS Editor App | Jax - Very similar to replit
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.
Features
There are way to many features for me to list out, but i will give an overview.
sidebar
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.
dropdown
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
- templates
- etc....
Few Notices
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.
Detectors
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:
- gibberish
- profanity
- duplicate
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 share or tutorial.
When you want to use JS or CSS, use <script> and <style> tags.
If I remember anything else, I will add it here.
Instructions
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.
Markdown and mentioning
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
<s>text</s>or<del>text</del> - links only work when you do:
[NAME OF LINK](URL). If you just doLINK, it doesn't work. - when you post images, do:
. If you just doURL, it doesn't work.
I think those are the only differences in markdown.
EXTRA: You can also do mentioning in Jax. Same format.
@username
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.
Moderators
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.
Banning
Any user who violates the rules will be banned. This includes:
- spamming
- cursing
- duplicating
- 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
Credits
Thanks to these people:
@Coder100, @SixBeeps, @Bookie, @ch1ck3n, and @OldWizard209.
@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).
Pinging
@Whippingdot wanted me to ping him when I post this.
Suggestions and more
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.
Enjoy!
hey dude its not waking up lol
@DerpBurgerPlayz yes, because i turned off the server. I can turn it on. Just tell me if you want it turned on.
@RYANTADIPARTHI Can you turn it on please?
@willyum24 sure. i did it.
@RYANTADIPARTHI Was not able to see it, I recommend using something that keeps the server alive 24/7, it would be more effiencent.
@RYANTADIPARTHI Can you turn it on please? why can't you just always have in on?
@CarterDixon uh sure.
@CarterDixon it is on mate
@RYANTADIPARTHI pls turn it on
Thanks for sharing the codes for JS Canvas. Javascript is very hard to learn, I found some dating websites who uses Judo Script as their programming language.
Read this article to know more: Dating Websites Using Judo script | 2019
It's in deep sleep.. not wakin up..
@Yoplayer1py Yeah, because the server is down.
@RYANTADIPARTHI make it up n use a replit uptime tool(I can help) when ?
@Yoplayer1py i actually used a keepalive tool, but it only works sometimes.
@RYANTADIPARTHI lol my repl is up 24x7
@RYANTADIPARTHI Do you think I could work with you on any of your frontend repls? My best site so far: https://spotlite.repl.co
P.S. My alt account is cutech which is the one I actually use.
@devbois hi, i don't really make frontend projects. I just use frontend in my website projects like this one for example (the post).
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..
@Battledash2 i can start it up tomorrow. I'm busy now. Please ask tomorrow.
Thanks!
I'm probably gonna forget tomorrow- that's the point! @RYANTADIPARTHI
@Battledash2 ok, i'll remind you.
BRUH it's not waking up...
@CarterDixon try it now.
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
@Korbindev uhh thanks! But what do you mean by guys? I'm the only one who did everything. I collaborated with no one. And what do you mean make yourself mod on your own site?
Please explain your comment in more depth.
oh sorry I was trying to make something similar to this but i want to know how you did it I was also wondering if you could help me make a django sm app and I need a [email protected]
@Korbindev oh. So you want me to be a mod for your app which is similar to mine right? Well, if that is right, then sorry, but I can't really help you, because I'm busy right now making something else... So maybe sometime later...
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.
Thanks though!
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.
need an admin or a moderator?
@DerpBurgerPlayz sure, i'll make you a moderator.
@DerpBurgerPlayz could you tell what you're username is on the site?
@RYANTADIPARTHI you are the ONLY person i talk to on here but ill try!
@RYANTADIPARTHI same as usual, DerpBurgerPlayz, except its not letting me sign in now for some reason xd
@DerpBurgerPlayz ah, ok. Thanks anyways.
@RYANTADIPARTHI problem solved, made a new account
@DerpBurgerPlayz its DerpBurgerPlayz
@DerpBurgerPlayz hmm, i think it's because it didn't save it properly. Try registering again.
@DerpBurgerPlayz ok good.
@DerpBurgerPlayz ok, thanks. I made you a moderator. Read the description on this post for more info on mods. Also, try to explore the site more for moderator features. You can discover a lot.
@RYANTADIPARTHI found admin panel! and ill get right to it!
@DerpBurgerPlayz What admin panel? Oh you mean mod controls? Yes, that's the mod panel. There are other features, other than that. Keep exploring.
Also, I'm the only admin, so I have a way more advanced different panel. But don't worry about that. Just go on with moderator exploring.
@DerpBurgerPlayz also, in the announcements section, don't post just anything. only mods can post in announcements, and that section is only for announcements. Like serious announcements. If you want to post your stuff, just do it in the tutorials and share.
@RYANTADIPARTHI check online users, lots of spam accounts
@RYANTADIPARTHI i wasnt aware that i did that xd can you tell me how to delete it?
@DerpBurgerPlayz let's talk about this in the staff chat.
@DerpBurgerPlayz same way you delete posts in replit. Don't you see the delete button?
@RYANTADIPARTHI go on staff chat if you can
THIS IS SO COOL OML
@DerpBurgerPlayz Thanks!
WAIT
hmm, it's waking up
@Cooolcoder sorry, server was down. Try it now.
very cool but when i want to publish a post it says no spam and add the dark mode: D
@id0lized yes, i was afraid of the that. The detector is sensitive.
Can you show me what you're trying to post? Like show me the entire description and title you're trying to put in.
And also thanks!
@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.
@id0lized so the post worked right?
And also, I don't know why it's doing that for the dark mode. It's not done yet.
@RYANTADIPARTHI Yes i link that xd
@id0lized Thanks!
@RYANTADIPARTHI Yes I can post now
@id0lized ok good.
Great! I love it. Better than this hunk of junk called Codeverse.
@Codeverse Thanks!
@Codeverse what is Codeverse?
@RYANTADIPARTHI Me? I think so. Funny that I don't know who I am.
@Codeverse nice!
If you didn't actually use any elements from replit/copy anything from the source code, well done- this is a really cool replica/replitca(get it?)
@devbois i didn't copy anything from replit source code. I did it all on my own. And Thanks!
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.
for responsiveness, try using grids, flexbox, media queries, and bootstrap is a good library to implement that. Try using bootstrap @RYANTADIPARTHI
@OldWizard209 i am using bootstrap. I use bootstrap in all my projects.
Nice, but this looks way too close to Replit.
@ABirdCoder it's supposed to. It's a replit clone.
@RYANTADIPARTHI Oop, I didnt read the description. Tho this is really nice good job!
@ABirdCoder That's ok, but thanks anyways!
Can We Host This Ourselvs?
@KingBob2 you can fork it and make changes on your own if you want.
@RYANTADIPARTHI Im Getting A Lot Of Errors...
@KingBob2 no, the only error you're getting is MultipleObjectsReturned. This is because you are creating jaxes with the same name. Don't name your jaxes the same exact thing. Change it so it isn't a duplicate. Then you won't get the error.
@Alvin216 what's this?
This just shows REPL waking up...
@adityavengata sorry.Server was down. Try it now.
This is insane!
@cuber1515 Thanks!
THIS IS SUPER HOT!!
REPLIT.COM ☠
@zplusfour you could invite me to help you with text highlighting for the editor
@zplusfour Thanks!
@zplusfour yes sure, i'll invite you. But I have to do it later. I'm kind of busy now.
@zplusfour hi, i invited you. You can come now.
it just shows repl waking up.....
@Yoplayer1py sorry the server was down. You can check it out now.
@RYANTADIPARTHI kkk tysm
Wow. Replit is dead. Good thing I moved to github.
@ironblockhd haha, thanks!
There isn't a code editor.......
@DillonB07 yes there is. Don't you see the new jax button? click that, and write your code in the space textbox. Then once you fill out the other fields, click run to see your output.
Ok. Maybe you should rename space to Code?
Makes it a bit easier for people to understand. I thought it was a longer description. It would be really cool if you made an IDE window like the one on Replit though. Also, dark mode doesn't work.
@RYANTADIPARTHI
@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?
@RYANTADIPARTHI I'm part of a team where we are creating a Replit 2.0 (We don't seem to be doing very good), but you beat us to it! https://replit.com/@Replit2creators/Replit-2-python
@DillonB07 ah. nice! thought it doesn't seem to be working when I try to run it. nothing happens when I click run. But pretty cool.
It took me a long time to make this, but I guess I did beat you to it :)
No, not sure what happened to the repl, but it is still under development and not very good currently. Still, I'm happy we've got a functioning email service. Just SMTP, but it is still cool. @RYANTADIPARTHI
@DillonB07 yeah, nevermind it now gives me an error. It says something about SMPT not connected or whatever. But yeah, I could do the emailing in django, but I forgot about it...
Anyways, pretty cool. And thanks!
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....)
@DillonB07 ahh. Yeah, i did some envs in this app too. But ok cool.
And thanks! it probably wouldn't be better than Replit though.
Can I join? @DillonB07
Sorry @LAMAQDAHODWALA, I'm not the owner. Maybe you should post a comment on the repl asking to join, and saying why you would be good: @Replit2creators/Replit-2-python
@PixiGem Yeah... i don't know why people aren't seeing this much...
Hi I’m Bookie0 btw :)
@Bookie0 i know...
You pinged my wrong in the post
Nice job recreation job tho :) @RYANTADIPARTHI
@Bookie0 oh, yeah i forgot the 0. Sorry. I fixed it. Also Thanks!
HTML in comments? I'm sold
@MrVoo Yeah... those don't do any damage though, so I allow it. But I could block it... only thing is, I would take too much time, and also there will be unnecessary clashes with markdown and tags. But js and css is blocked in comments.
@RYANTADIPARTHI Nooo, you blocked css?
@MrVoo in comments i did. You can use css in your own jax editors.
@MrVoo hmmm, i'm going to try to block this later. Thanks for testing the site and letting me know the problems. Please let me know if you find any other bug. I'll fix the css problem later.
@MrVoo ok, everything is blocked now. No css allowed.
@RYANTADIPARTHI About that...
@MrVoo ok, now i think it's blocked. Can you try it? Thanks!
@RYANTADIPARTHI Pretty sure the anti-CSS works, noice
@MrVoo Thanks!
Okay, this whole thing looks like a Repl.it clone... but thanks though!
@weeklyd3 yeah, it's meant to be a replit clone. And thanks!
Also I'm concerned by how similar this is to Replit design-wise...
@RayhanADev why is this a problem?
@RYANTADIPARTHI just personal observations, but thanks for removing the upvote message :).
@RayhanADev oh ok... And no problem!