Can anyone recommend an IDE for writing html/CSS/javascript?
VSCode and Atom are the most commonly used I think
Use whatever feels most comfortable for you. All other things being equal, I recommend VSCode because it is free and widely used.
I just downloaded VSCode a few weeks ago, and love working in it. Lots of color and icon themes available to get the look you want. Doing Node.js stuff right now, but works great for html/CSS/javascript, and should for the Python I start shortly.
Thanks. I’m going to try atom. VScode might be overkill at this point.
They’re almost the same in terms of functionality, but Atom is likely to have more things break. More things will Just Work with VSCode without having to install stuff.
Atom was created by GitHub, VSCode was created by Microsoft. Microsoft now owns GitHub, and doesn’t need two near-identical text editors. Atom isn’t dead by any means, it works fine, but VSCode has far more support and large amounts of money behind it.
3 Likes
For clarity, both Atom and VSCode are considered text-editors out of the box, but “upgrade into” IDE’s with extensions installed.
A clean install of either will provide you basic functionality like any text editor, such as notepad, with the added focus on customization, extendibility and overall developer experience. For example you’ll get syntax highlighting and extensive settings options for if you want to tweak things out of the box. You don’t have to need/want either of these but its these sorts of features that make it different than say just notepad or even notepad++.
Both of them get more powerful once you start installing extensions. This is where the two editors start to differ due to the ecosystem setup around these editors.
As mentioned above, VSCode has a better extension ecosystem. This is due to VSCode’s popularity and backing of Microsoft. Atom will still work, but you’ll find more things to be unmaintained, or completely missing. That said, Atom comes out of the box with some fancier features, such as github integration automatically.
Finally its worth keeping in mind even with both of these, the editor/ide is designed to help you build code, it wont necessarily provide you a way to easily test/build/run/view/deploy your “code live” like other tools such as codepen.
I’d compare editors and IDEs to fancy toolboxes that come with tools, and ways to host/provide other fancier tools. But even with all the tools you’ll need to know how to use them to build/get what you want. They wont magically test/build/run/view/deploy your code without you working with the tools it provides to get things going. So it will take time to learn how to use any editor/IDE effectively to get what you want.
Good luck, keep learning, keep building 
2 Likes
That’s a good point. I have a friend that wants to start learning, and even though I gave her a hosted space on the web, I recommended to her Codepen, because especially when learning its priceless to be able to see your updates live. With a texteditor local, you have to write, save, then refresh to see the changes… and if trying to do it on a hosted page, caching sometimes means you won’t see your changes for hours.
There are ways around this (as with all things tech), but it requires some legwork to get things working nicely.
For example, its very common to use something like Live-server to get “local hosting” with live reload setup automatically.
Getting your local development code into “production” via deployment and fixing any caching issues related to that is a whole other can of worms that can be handled different ways, but again requires more legwork.
Or as you said, using some other tools can help you get going faster without all that legwork, at the cost of being “locked into” whatever tool your using, such as codepen.
Thank you all for these extremely useful comments. Some of these took time, and I appreciate the effort.
First, codepen is out, because it is only online and I frequently find myself in rural places with spotty or even no internet (alas, even in 2022 America). But I still will want to develop non-FCC code locally in those circumstances.
Second, the arguments for VSCode (as opposed to atom) are persuasive, and that will probably ultimately be my direction. Unfortunately, in my (quite remote) past, microsoft was the villain, and windows computers were spectacularly buggy, and microsoft word has been a nightmare for typesetting mathematics documents on a mac (I’ve switched to Latex), so adopting VSCode will require some incremental development of trust.
Therefore, in the short term, I will stick with textedit on my mac.
Nonetheless these comments have given me considerable perspective, particularly in managing expectations, so thanks again.
And if you did want to use VS Code and have a Live Preview for webpage, I helped another fcc user set that up…
I think you need to install this VS Code extension…
Visual Studio Code Live Preview
…it needs Node.js to be installed first to create the server that displays and refreshes the page “automagically” like codepen does when you change your HTML. You can get that here:
I just installed it and got the Live Preview extension working in VS Code. Node.js needs about 3/4GB of Hard drive space.
I checked the box to install “Chocolatey” when it asked, and let it handle any dependencies and packages Node.js needed. It opens a PowerShell window, downloads and installs any Windows updates it needs, MSVC runtime libraries, etc.
It took a little while and at one point seemed like it wasn’t really doing anything, but eventually if finished, the PowerShell window closed and when it was done, I could open an HTML file right-click in the file and Choose Live Preview: Show Preview. It was pretty painless to get working.
Basically it runs a local server on your computer. When you aren’t using it, you might want to stop the server so it doesn’t take up system resources for no reason. Unless you have a fast computer with decent amount of RAM.
Just Ctrl+Shift+P and start typing Live Preview… (you can also make your own custom keybinding by clicking the little gear icon on the right of the command).
might have to adapt a little if doing it on Mac shouldn’t be that different
Thank you, I may take you up on the offer. A live preview certainly will make development run much smoother. And an IDE will certainly expedite file managing.
One thing, though. You indicate that I will have a server running on my machine. How safe is that from malicious hacking. I run two (yes, 2) anti-virus systems on my macbook pro, and so far I have been OK. The systems have saved me several times.
Will a (presumably) quick-and-dirty server be a problem? I know nothing (zero) about cybersecurity except be-careful-where-you-click, don’t reveal passwords, etc etc, and I do not have the temperment for useful cyber security development. And a little knowledge can be really dangerous in this game. Look at all the people who have been burned running microsoft software.
My normal approach to development tools and time-savers is: “Don’t do me any favors unless it is a guaranteed bulletproof and really big favor”. I have been burned too often.
Given all that, what would you recommend?
It’s a local server listening on localhost 127.0.0.1
Unless you configure it to listen on your external IP, open a port, or port forward from your router to that computer to allow traffic from the internet/world through router to your computer you shouldn’t have to worry. And you wouldn’t use 127.0.0.1 to do that, you’d use a private LAN IP like 192.168.1.0/24 or some other IP class (there’s A, B, and C Class networks). This is for IPv4, I might add, I’m not super familiar with IPv6 but it has similar concepts and conventions . I think IPv6 localhost is ::1.
These are referred to as a loopback address (loops back from your machine to your machine).
localhost and its associated reserved IP 127.0.0.1 is not routable. Any machine trying to connect to that would be trying to connect to itself.
Technically, a savvy hacker could break in to your LAN and spoof IP and stuff like that. But if they were able to get that far, you have other security issues already and would possibly be pwned whether running a local server internal and only accessible on your lan or not.
But if you’re really paranoid, you might be able to change the default port it listens on and firewall it off with properly configured firewall software.
It’s relatively safe provided your lan is decently protected /firewalled.
I say relatively because Internet Security these days can be kind of an oxymoron.
Only absolute sure way is to turn off wifi and unplug ethernet cable, pull the power cord/remove laptop battery and hide it in a physically safe vault lol 
. Of course, I am being facetious there, it’s useless to do that
Oh and you could always set this to run in a Virtual Machine like VirtualBox, VMWare Player, Docker, Parallels, things like that and not configure or enable the VMs networking component and shut down the VM when not using it.
Well, I am rather paranoid about computer security (I obviously know nothing about it, don’t have time to seriously learn, and in such circumstances, “paranoid” seems the most logical thing to be) but you are persuasive enough that I’m going to get VSCode, play with it for a while, and then take you up on your offer.
I’ve thought of locking away the computer in a vault and going out to have a life. I’m not sure how facetious that is. Just a brief fantasy.
Thanks again for your comments and your offer. We’ll figure out something rational I’m sure.
BTW, why is Node.js needed? Wouldn’t it be easier for the IDE to have permissions to execute a system command to run safari and pass it the index.html file as an argument. Or is that not possible? I’ve never actually tried that particular thing myself, say from a python program.
Lol, after many years of Tech Support, I’ve thought of that too (and have done it between contract employment 
Node.js, server side Javascript, is just how they decided implement the extension. For the server part, I think it actually installs an extension called “Live Server”, which is the web server component and is what Microsoft based their extension on…
Then you wouldn’t really get the live “immediate” preview update when you made a code change unless your script or whatever handled that.
It’d be possible and VS Code does have a view in browser feature, but that’s a manual process. You’d have to hit refresh in the browser. Yes you could programmatically have a script refresh the browser using something like Javascript window.location() and setTimeout() or setInterval() or equivalent in python or whatever.
The setup would probably take longer and be more complex than it needed to be for a simple feature. And bugs in your script or misconfiguration could (possibly though not likely) open you up to another set of problems or attack vectors, or simply become a time sink (unless you wanted to go through the process for educational purposes).
The purpose and point of the live server preview is to locally simulate a webserver without actually running a production level, internet accessible server.
You could just always open a browser, load the file via file → open and refresh the page as needed, but links to local files might not work correctly or be followable.
You could also set up XAMP, LAMP or whatever the Mac equivalent is, but that requires a lot more configuration to get Apache or Tomcat webserver or whatever running and by default might not be set up securely out of the box.
It might be more trouble than it’s worth for such a simple feature. Unless you wanted to go through that process and learn about webservers, how they work, etc.
I personally use WAMPServer64 on Win10 in a VM for local development and testing and works well for me.
There were other extensions that provide similar functionality. I didn’t look deep into those or their requirements.
Maybe reading this will help your understanding of localhost and help ease your concerns about it…
A server is a program that lets you share some functionality between other programs who connect to it (clients). In this case (to watch some files and tell a browser to reload every time they change) the server uses HTTP to communicate, because the client is a browser. But that doesn’t imply anything w/r/t security. That HTTP server isn’t on a public network, it is just another one of the many server programs of various kinds that will already be running on your computer.
Emphasis mine. Yes it’s possible: that’s basically what the thing being talked about does. But the authors of that particular program used the JavaScript language rather than the Python language to leverage that functionality.
VSCode is mainly written in JavaScript (well, Typescript to be specific, but that’s compiled to JavaScript). Although there is no reason why the live server stuff couldn’t be written in Python or any other language, it’s more sensible for it to be written in JavaScript.
Node allows JavaScript code to be executed outside of a browser. With, say, Python, you download a bundled up set of applications from the Python website that’s called “python”. That download includes a tool to run code written in Python + a load of libraries and additional useful tools.
With JS, browsers have the equivalent of that “python” application built in. But if you want to run code written in JS outside of the browser (eg command line scripts, or servers, or desktop applications), the tool is called Node, and again it comes with a load of libraries and additional useful tools. There are other similar tools, exactly as with Python, but Node is by far and away the most common for JavaScript.
1 Like
Thanks again. I’ve learned a great deal more than I expected from this topic (I don’t know enough to have realistic expectations). My development framework is clear: VScode with extensions.
1 Like
Thanks for that insight. I had a hunch that was the case, but wasn’t sure and didn’t take the time to look into it. But it makes sense.
So basically, why reinvent the wheel (or environment) when you can just use the native tools provided. That is if, of course, the native tools and environment do everything you want/need them to do. Yep, makes perfect sense.
Thanks @DanCouper for clarifying that.
1 Like
I’m a bit late to the conversation but I want to remark something that others had already pointed out:
Atom and VSCode are text editors. And you asked for an IDE, not a text editor.
The best free IDE out there is Intellij IDEA community edition from Jetbrains. It has all the IDE features such as code completion, intellisense (to catch bugs on the fly) and linter. Things that a regular text editor doesn’t have.
And there’s a paid version which is made exclusively for web development: Webstorm
1 Like