From the exercises, is there a stripped down version of the text-editor/console real-time preview available for offline use?
I am aware that DevTools has Live Expression in the Console but the console on freeCodeCamp is more accessible for myself.
If you install NodeJs, you can run JavaScript offline without a browser.
1 Like
I’ll keep that as an option, though the goal was to have a tab open in the browser that allowed me to test snippets of code with minimal button clicking/key pushing/alternating between windows. If I open one of FCC 's exercise pages, the console works with live preview offline but can’t close and then reopen. Saving the webpage has not worked for me either. I know the exercises can be ran locally by downloading from Github but I am limited on space.
Would there be a way to do this without needing Node?
I thought that you were specifically looking for an offline option. It sounds like what you want is repl.it
Yes, was looking for offline only.
Since the exercise page works offline but can’t close and reopen, are there restrictions in place to prevent from saving the page offline?
I’m not really sure what you’re trying to accomplish here. freeCodeCamp is an online resource. It needs an internet connection. You can run your own local version (follow the instructions for contributors), but this will not be the real freeCodeCamp and will not be connected to your account.
My goal is to see a live-preview of javascript code offline.
On Codepen, if I type in characters in the HTML box, then I see a live-preview of HTML output.
In Devtools, if I use the Live Expression setting, then I see a live-preview of javascript output. This requires a constant clicking back and forth however, and not efficient for testing snippets of code. Live Expression does not allow me to change the box sizing and will show some errors but not give details.
On FCC, if I have script in the text-editor, then I see a live-preview of the javascript output. It works with no clicking back and forth. It displays error details in the code and is incredibly helpful for understanding how javascript works.
So I am currently trying to make use of this feature offline.
As mentioned earlier, I’m limited on space. Along with that, it doesn’t seem necessary to download the contents of FCC in order to use the live-preview of javascript feature.
Since it is a webpage that is capable of working in the browser offline, I was trying to make sense of how to do that.
The code required to do something like what Codepen does is only a few lines. i.e. type HTML/CSS in textarea and write input to iframe.
It seems a simple thing to make accessible so I was looking for some direction on how to do that.
If it only takes a few lines of code to make the entire tool you want, then you should be able to do it yourself.
However, I don’t think it actually will take only a few lines of code. You perhaps want to look into a lightweight IDE with a REPL.
SublimeREPL seems pretty popular, but I haven’t tried it myself. You could also install node.js. That’s basically as lightweight as it gets.
console.log(code.length != easy )
< true
If I understood how it worked, then yes, maybe I could write it. But I wouldn’t be asking about it here if I did.
As in the case of the HTML/CSS preview, it took much searching to figure how to use a textarea to iframe for a simple real-time text-editor. The code was only a few lines yes, but I didn’t know how it worked.
That is what I am asking here. Since the javascript live-preview is functional stand-alone on the client-side, meaning can work offline, then that means it can be made accessible, without too much fuss I suspect . The code needed is already there within the browser so moving that over to an IDE or installing more things seems unnecessary. It ought to be a simple thing to someone who knows, hence the question here on the forum.
No.
3 Likes
Could you explain your answer please?
The live console is a helpful learning tool so I don’t understand why it can’t be made accessible. If someone would explain why not or help point me in the right direction as to make something like that possible I would be grateful and search elsewhere.
If it is a matter of restriction, then I am wondering why that is the case as FCC is available on Github. This forum here is installable as a PWA, as well as the guide on FCC. Both are very helpful and am curious why not a live console would be as well.
I’m confused as to the shunning of curiousity in order to expand and improve upon learning javascript. If there are tones on entitlement I apologize.
The editor that freeCodeCamp uses is the Monaco Editor. You can go check it out, fork it, and modify it as you want.
If you want a JavaScript console that allows you to run functions, you can use the DevTools console or you can install the NodeJs. If you want an editor that is connected to a console, you can use an online tool or you can install a text editor and NodeJs. If you want freeCodeCamp offline, you can clone the repo and run a local instance.
What you can’t do is use a website offline without downloading anything. I have no idea where you got the idea that it should be easy to run a web application without a connection to a server.
We’ve tried to help you find environments to run your JavaScript in, but insisting that someone here can give you some simple way to use the freeCodeCamp application offline isn’t going to get you anywhere.
2 Likes
Hi @jpscribbles,
Edit:
I’ve re-read your question and see I didn’t address your main concern.
Although my answer below doesn’t update the code automatically, you can use the hotkey ctrl-enter to run the code.
You might be interested in using your browser itself to experiment with JavaScript.
In chrome the easiest way is to use Snipppets.
Hit f12 -> Sources Tab -> Snippets tab from left side menu
Then you can create and save small scripts that will run in the browser.
If you want to edit a project you can go to the filesystem tab from the left menu and add a workspace.
That’s the thing though, the webpage does work offline.
If you don’t believe me, you can open up one of the exercises and then disconnect from the Internet. Your live-preview in the console will work. This is why I was so curious(and insistent) as to make this work for reuse offline.
Thank you for the direction on the other topics.
Hopefully I can contribute something back in due time.
Did you look at the link for the Monaco Editor? When you access a webpage, information and scripts are downloaded. For FCC the functionality of the Monaco Editor is downloaded. If you want this functionality offline without accessing any website, you’ll need to download and install something that provides a REPL, such as Monaco, node.js, Jupyter, etc. It’s more than a few lines of code required to provide a full fledged interactive environment.
Do you want something like this?- https://webmaker.app/
That is pretty much similar to codepen, but with offline capability as well (an open source software too if you are interested).
1 Like
@br3ntor
This is good to know about, I’ve been exploring DevTools off and on and I remember coming across this. The main drawback is needing to click the run button everytime you execute code similar to what the Live Expression offers. Though looks slightly better and if I were doing tests for performance then this is what I would be using.
Being able to copy and paste and see results instantly is what I am aiming for. If I change one character in the script, the FCC console shows the effects(and potential errors) and this is so helpful for wrapping my head around how javascript works. Having an offline webpage that can be used for testing javascript in real-time is ideal.
@momozor
This is an excellent tool, I sent an email to the creator last year thanking them for making this available. I had been searching all over looking for something like an offline Codepen/jsfiddle and was convinced someone, somewhere had made one. It works perfect for understanding how HTML/CSS (along with javascript) work but not so much on for standalone javascript(details about errors and console logging). Something like that would be an indispensable tool if made available in the way WebmakerApp has been offline.
@JeremyLT
I am going to spend some time researching more about how to do this. How to make this into an offline webpage. Just kind of surprised one doesn’t exist already, considering how useful it is. The current solution is to always leave one of the FCC exercises open in a tab and use that for experimenting with snippets.
Lots of possible ways to do this have been posted. FCC’s editor is basically the Monaco editor. I’m not sure why that won’t work for you, or any of the other suggestions, but good luck.
1 Like
I looked into the https://webmaker.app/app/ settings (the cog icon at the bottom right) and found an option to use Monaco editor in the editor section option.
By errors and console logging, you mean this? (with enabled Monaco editor option) -
