In the world of Web Development, I have always faced one major/irritating problem which is responsiveness of a website. Everytime when I am developing a website, I make a quick change and push it in order to quickly check how it looks on my phone. And it does not even update in RealTime!!! Now I know we can simply turn on the inspector and toggle to mobile screen mode to have a look and get an idea of how it might look on a mobile device, but is it accurate? I still always have this urge to check something that I spent hours working on in realtime, on my phone!!
Now imagine if it was possible!
Imagine, a tool/code editor where you can simply write code, and then deploy it, and see your deployed code update in realtime, as you code on all DEVICES that has your website open. Imagine how easy it would be to see your code's output just after you make that small two line change to your code and see it update in REALTIME on your phone without connecting your laptop to it. Imagine being able to edit your code on any device that you visit your website from!!
Seem's kinda surreal right?
Well, that's why with the help of AceJS and FirebaseJS, I created something pretty much what I needed. Something that I told you to imagine above. Now you might be like, "What the hell are you talking about?!", Well you need to watch the video below in order to get a hint of what I am really talking about.
Well, if you watched the video, thanks for watching but in case you're in a hurry and you did not, let me explain Xper to you in a nutshell
Xper - In a nutshell
Xper is a responsive React app where you can simply create HTML/CSS/JS code and see it run in RealTime on all the devices that has your deployed website open. Again, I will request you to consider watching the YouTube video in order to properly understand what Xper is really about.
How Xper works?
Xper uses AceJS in order to highlight your code, for backend, I am using Firebase, now with Firebase's realtime database, I was able to update the database with data in realtime, so this gave me an idea, what if I make a website and save all my codes/snippets quickly on the website, well of course I could use the browser's Local Storage in order to save all of it, but is it really useful? Just write code and save it? That also on my device only! I wanted to create something like codepen, where I could easily write code and view the output in realtime and once when I was done, simply close the browser window, just like I do once I am done designing something on Figma. Now with JavaScript's document.write() function and HTML5's iframe, I could easily run the user written code everytime the user made changes and show him/her the output of the code the user wrote in realtime. Makes Sense. And since I am using Firebase's RealTime Database, I could easily save the code everytime the user made a change! And with Firebase's on change database listener, I could easily update the user written code everywhere the website was open. With React Routers I could easily provide the user a deploy link where the user could see the deployed version of his/her code. And that's how I developed Xper.
Xper is OpenSource!!!
Jaagrav / Xper
Xper is a realtime code editor where you can both write and save your code in realtime! Please make all the changes and pull requests in the changes/updates branch in order to contribute.
Xper
Xper is a realtime code editor where you can both write and save your code in realtime! The unique thing about Xper is it updates your deployed code in realtime, which means you can code on your computer and immediately be able to check how it looks like on your phone, tablet, and literally everywhere else. Xper is developed in React, which makes it a lightning fast code editor considering everything is being saved remotely. Check it out in the links given below
Live at: https://xperbycoder.netlify.app Source Code: https://github.com/Jaagrav/Xper
You can create issues in case you detect a bug, and if you know how to fix it, you can work on it yourself and make a PR, I will accept all the PRs that deserve to be accepted, so now you can also become a contributor for Xper
This project was bootstrapped with Create React App.Available Scripts
…
You can contribute your changes and versions easily to my repo by creating a PR or an issue that developers around the world could work on. And oh, check out Xper now!! I bet you'd love to play with it!!!Learn the technologies used!!
So if you want to learn all the technologies that I used, just tap on their names, to know more:
Make your own code editor
Check out this video where I made a simple CodePen clone
Clone this repo to run it on your machine
Here is how you can easily use AceJS to add a code editor to your website with HTML5 and Vanilla JavaScript.
Here's the HTML
Paste this at the bottom of your HTML first
<div id="html-editor" style="height: 100%;"></div>
<!--Define a div with an id where you want to write the code-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
Here's the JavaScript
Paste this in your main JavaScript file i.e. basically the file where you're writing your JavaScript
let htmlEditor = ace.edit("html-editor");
//html-editor is the id of the div where I want to write the code
htmlEditor.session.setMode("ace/mode/html");
htmlEditor.setTheme("ace/theme/terminal");
htmlEditor.session.setValue(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>`);//Default text you want to show in your code editor
htmlEditor.session.setUseWrapMode(true);
//You can even enable text wrap which is disabled by default
htmlEditor.setOptions({
fontSize: "20pt"
});
Once you're done doing this, you would get to see something like this!!
Pretty cool right?
Here, check it out live on your device, and also you can view the code here
Here is how it looks on Xper,
Challenges for you!!
Try creating a realtime code editor by yourself, add cool text themes, an awesome UI, and a feature you personally have always wanted on a realtime code editor. Also try to save the code in the local storage so that the user has access to his code only on his computer. And then make a Github Repo and mention it down below.
THE BEST SUBMISSION WILL BE FEATURED IN MY NEXT ARTICLE!!
Until then, thanks for your time, reading this, and yes you made it through all the crap that I talked about in this article, hope you liked it!!
Check out Xper
Contribute to Xper
Code to add AceJS to your website
Stay tuned to learn how to make your own realtime code editor that can save your code locally on your device!!
Top comments (12)
Ok, good post thanks.
Just to know, how it is different to using any other editor ? If the project use a live / hot reload it will be the same... react has, angular has it too, vuejs also... so why being contained to an acejs embeded project ? Developers have already their habits. Just saying.
I am saying Hot Reload on multiple devices not just on my PC while I am coding, hot reload the code on my laptop, mobile, tablet, tv, wherever I want to check my code's output, updates in realtime.
Yep, as in React Native. My point is Live reload is a feature that should come from what is serving files, not the editor itself. It is just driven by websocket events (Hope not polling requests lol)
You should have wrote more in your post to explain the gain with this feature. When reading we have the feeling that it could be very cool, but lots of devs will not give it a try if it implies not to have the possibility to easily separate the deployer from the editor.
But don't misunderstand me, it is a very good job.
Oh I get you, that's true, I am actually working on something similar for the next version of Xper. But the thing is doing this live for a file system, especially with React Native, I think would be tough not impossible but tough because it needs to build an app for multiple device and update it. Think about having like 100 files/folders for professional projects, that's when people would start facing problems because it's gonna take more time to refresh and build for every individual device that has it open.
React native was just an example, the point is at a low level, when you watch files / folders the OS will raise changes on an event base approach, that's why a watcher in webpack / or typescript can monitor a change in a node_module folder very quickly, it does not really depend on the amount of file (It is, but hundred is not a big deal at all).
You have to broadcast changes so even with 100 devices the result is not less accurate.
I did the same for online gaming system with deployment on about 5000 test targets.
The second point is that you keep Firebase as a choice, but to be usable you need to think with a more abstract level view, with a data-provider approach to allow docker feature, local dev feature or internal use in company that do not want to share outside the code. Your tool is named Xper after all.
You got something interesting, don't hide the potential.
I see what you're saying, we should be able to do whatever we do while coding on our computer locally but on the web, for that we would be needing an amazing backend which can handle a huge amount of files and also be able to install packages. My idea is not this robust, it's about multiple files and that's where it ends but that's not real coding right? It's going to be only for beginners like Xper is. Being able to install packages, use the command line and still saving everything on cloud is what we want to build, what we can refer to as extreme programming, well that's got a huge potential but at the same time it's going to be very robust project to work on.
This looks really cool, awesome work!
I'm reading on my phone, so it's hard for me to tell, does Ace.js allow you to transpile more complex Javascript using something like Babel? Or is this just for basic Javascript/HTML/CSS?
Not really, I had to make changes to AceJS' code in order to have some features/text highlighting which were not predefined even while writing code in VanillaJS and that I know sucks but I think AceJS is the best to create something for beginners... I am working on a Code Editor rn... I have to make a lot of changes to the library in order to make it feel better and smoother. Check out Snipp.in, write some code, you'll understand what I am really talking about... Visit on Desktop though, also it's not something that I made, Haxzie made it.
I am incredibly impressed. The remote editing capabilities are possibly the most impressive part, but it's actually all designed, laid out and coded really nicely too.
Amazing work - and you're only 17. Madness
Thank you so much :)
Looks good.
Not clear what you mean by "deploy code" though.
By deploying code, I mean you can view your code output in realtime on various devices... Any questions? XD