4

Why can't I write code inside my browser?

 3 years ago
source link: https://tomcritchlow.com/2021/01/14/new-browsers/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Why can't I write code inside my browser?

Notes on rethinking browsers

January 14, 2021

So I can write code inside my spreadsheet, but not inside my browser? WTF.

Ok, let’s back up. Coding is too hard.

I’ve been playing with the web and code for years now and still feel like I’m an outsider to the “code club”. An incomplete list of things I’ve tried and failed to do:

  • Failed to install node
  • Failed to install pip
  • Failed to install ruby

Meanwhile, things I do regularly:

  • Use Github extensively for a variety of projects, all through the Github GUI
  • Use Glitch to host some simple Node.js apps
  • Maintain a fairly complex Jekyll blog hosted on Github pages without Ruby or Jekyll running locally

Increasingly there’s a disconnect between the kinds of activities code enables and the “expected” workflow for “being a coder”.

Meanwhile - there’s been a kind of revolution around coding. “Javascript everywhere” (i.e. node.js) has really become the default web-development paradigm.

Javascript is alluring - partly because every computer has a javascript GUI and runtime - the browser! You can code in javascript on your computer using a text editor and a browser - without ever touching the command line!

I think a lot about how easy and hackable javascript feels. How it feels easy to play with and build prototypes.

And how this feeling is 100% because of the fact that every computer comes with a javascript GUI and runtime environment... the browser.

— Tom Critchlow (@tomcritchlow) July 3, 2020

But… on installing node.js you’re greeted with this screen (wtf is user/local/bin in $path?), and left to fire up the command line.

Ok, once again. I can write code inside my spreadsheet but not inside my browser? WTF.

Here’s my pitch: build a browser that comes pre-installed with node.js, an IDE and a simple runtime environment.

Defaults Matter

Why is this important? Because defaults matter. Defaults allow people to get started. Python is installed by default on the mac and so I’ve found it very easy to do some lightweight Python coding (e.g. some glitch art)

Can you imagine if Node.js was installed by default?

GUIs Matter

People hate command lines - not only do they LOOK scary, they give weird unhelpful error messages and… you have to type everything. Ugh. This is why people would rather code inside a spreadsheet application - because it’s an application.

Can you imagine if the beginner version of Node.js came pre-installed with a GUI for managing and running your code?

Code for All

It’s not “designers should code” or “SEOs should code” - but rather code is and should be as widespread as spreadsheets. This is a great little read on how code is perhaps finally overtaking spreadsheets in a niche reinsurance industry, but really it gets to the heart of every industry:

New Browsers

Ok - so honestly I’m surprised that Google isn’t taking some portion of their massive compute platform budget and putting it to work creating simple, widespread default onramps for code. Imagine if node.js shipped inside Chrome by default! But - in reality I doubt Google is going to do this.

So it’s up to the new browsers on the block.

Maybe Mozilla could buy up Glitch and integrate it natively inside Firefox?

Maybe BeakerBrowser will get enough traction and look beyond the P2P web?

Maybe the Browser Company will do something like this?

Because I love building things using code. But coding is still too damn hard for beginners.


This blog is written by Tom Critchlow, an independent strategy consultant living and working in Brooklyn, NY. If you like what you read please leave a comment below in disqus or sign up for my Tinyletter.

Login
Ronan Gaillard
2 points
3 days ago

I think that you're confused between server-side and client-side development.

Have you heard of https://repl.it/ or https://jsfiddle.net/ ?

Philip Peterson
2 points
2 days ago

The reason command line is popular is because it’s easy to connect commands together. You could technically do the same with a GUI, but it would be a lot more work for someone to create the framework for doing that, and at the end of the day it would just be less flexible most likely. There’s a good reason command line interfaces are prolific: they are orders of magnitude easier to make.

Patrick Charles-Lundaahl
1 point
2 days ago

+1 for this. The command line is its own programming language - you interact with your computer by running commands that can be composed together.

E.g, in a Unix shell, I can navigate my file system. However, I can also rename 10,000 files with sequentially-increasing digits using a handful of commands and a loop - something that would be so tedious I would never even bother if I were limited to GUIs.

Christopher E. Stith
1 point
2 days ago

It sounds like you want Electron or Flutter.

Milky
1 point
2 days ago

Strictly sticking to what's already bundled with a browser, the web developer tools (summoned with CTRL+SHIFT+I in at least both Firefox and Chrome) come with a REPL.

Sean Thompson
0 points
2 days ago

This is a good point. You can write and execute JS directly in the browser using the dev tools console. It's worth playing around with, for quick and dirty experiments.

Patrick Charles-Lundaahl
1 point
2 days ago

I don't have any big, revelatory thoughts or ideas here, but I wanted to say that I think these are some really interesting observations on the initial obstacles that beginners encounter. As someone who uses the command line for as much as I possibly can (I write all my code in vim, I manipulate my filesystem with Unix commands, I download images with wget, and I get genuinely angry when I can't navigate an app with my keyboard), I definitely don't have the context to pick up on things like this anymore, and I really appreciate the perspective.

Thanks for your thoughts!

Sean Thompson
0 points
2 days ago

FYI, you're getting the Hacker News 'bump'. Currently on the front page, so prepare for a ginormous spike in traffic, and overly opinionated developers 😝

Sean Thompson
0 points
2 days ago

I feel your pain, coding is really hard for beginners. And your main point is setting up a coding environment is spot on. I agree 100%. I learned to code at a 'bootcamp', and I can't imagine trying to learn how it all works, or even what I needed to learn without the guidance of some really amazing mentors.

The great thing is that the answer to your question is "Yes!". You can code in your browser today! There are many companies working hard in this space, but don't expect it to ever come from the browser makers. The browser is not given the types of capabilities NodeJS provides for very good security reasons.

Codepen (https://codepen.io/) and JSFiddle (https://jsfiddle.net/) are very popular for small demos or prototypes. For a more complex environment, you have already discovered Glitch. Glitch is not bad, but like Ronan already pointed out, I would recommend https://repl.it. I think their interface is much more intuitive, with superior design.

Even better, I think you might like Gitpod (https://gitpod.io/#https://github.com/eclipse-theia/theia). Behind the scenes it uses Theia (https://theia-ide.org/) which is essentially a clone of VS Code designed to run in the browser. And best of all? The latest version of NodeJS is preinstalled, ready to go! Pretty amazing right! I think your use case is a perfect fit for Gitpod. I would be interested in what you think.

To try it out, login with your Gihub account. Then, for example, take the full URL from the main page of your blog repo on Github, and paste it on the end of https://gitpod.io/#. Once it loads, you will see your whole project file tree on the left, and an open terminal at the bottom. Now you can confirm NodeJS is installed with node -v <enter> in the terminal. You should see the version number printed! Or simply type node<enter>, to enter a Node 'REPL' (enter .exit or cntrl-c twice to escape)!

Personally, I'm not sure why you wouldn't just want to use the standalone VS Code app (https://code.visualstudio.com/). It is an 'Electron' app (https://www.electronjs.org/), which is most simply described as a 'mini' browser, that allows us to write desktop apps with web technologies.

Nonetheless, I think Gitpod is a perfect fit for you and gives you a fully self contained environment, without having to install Node on your own machine.

If I may respectfully answer some of your points:

Can you imagine if Node.js was installed by default?

It's unlikely, but it's possible. Apple or Linux distros could decide to bundle it with the OS like they do with Python. The difference is certain parts of macOS/ linux depend on Python to work, so it cannot be left out. It's not really the OS vendor's job to assume everyone wants/ needs a Node environment by default.

Imagine if node.js shipped inside Chrome by default!

This I'm afraid will never happen, and it's a little confusing as to what you expect this would achieve?

As you already know, one of the jobs of browsers are to be GUI's and run-times for javascript. Traditionally, the browser (or client) was the only target of javascript. This of course changed with NodeJS, the beauty being we now have a access to the same runtime (called V8) to execute javascript outside of the browser.

This means NodeJS provides classes and functions developers can interact with (known as 'APIs'), to access the file system, run web servers, preform cryptography, or a multitude of other low level tasks. We can directly interact with the operating system, all in javascript!

This is why shipping NodeJS with browsers doesn't make sense. For security reasons, the browser by design, should never be able to do low level interactions on your computer. The APIs that Node provides have no use in the browser. They are designed for different jobs.

This post is probably too long, but I hope it helps clear up any confusion. I encourage you to try out Gitpod, to me it seems like a great solution for you. A amazing text editor and NodeJS in the browser, without all the technical setup!

Your main point is spot on, the fact there is a large hole in the space of user friendly 'on-ramps' to development environments. It is slowly getting better though. Best wishes, and good luck on your coding journey! 😄

Anonymous
0 points
2 days ago

The history of how programming got this way is really infuriating. It goes somewhat like this:

Once upon a time, someone designed a computer in which programming was close to the way you wish it was. The system was 100% graphical. An IDE was integrated with the operating system itself, so the entire OS was programmable like a spreadsheet is.

At any point, you could, with scarcely any effort, pull up the source code to the program you were running, modify it, and the changes would take effect immediately, just like they do in Excel. No need to recompile and restart the program.

This applied all the way down to the deepest, darkest corners of the operating system. You could easily pull up the source code to any system library function, and then go to the source code to the low-level internal functions they used. You could also get to the source code for the compiler.

But this computer had a flaw: It was extremely expensive. It was decades ahead of its time in terms of hardware specifications. Nobody could afford it.

So somebody else wrote this shitty operating system called UNIX. It was built with simple programming techniques not far removed from the punched-card readers that were still in use in many places. The only important difference was that the punched cards were replaced with these things called "files", which were like digital stacks of punched cards. It was easy to turn programs that were designed to work with punched cards into programs that worked with files instead.

And it felt like using punched cards, too. To write a program, you'd type it into a file, then you'd exit to a program called the "shell", where you'd type the name of the compiler program, which would read the file and then create another file with the same program translated into machine language. The shell could then execute this file by typing its name, but only if you put it in a directory that was in your $PATH.

The starkly inferior UNIX operating system ran on cheaper hardware, and was cheaply written, which meant that it was affordable. It therefore spread like wildfire. Eventually, PCs were invented, and their inventors copied the same simple programming techniques over (only they simplified things even more). Over the years, generations of programmers built on top of UNIX and DOS, each generation building on what the generation before had built. The company that built the expensive but nice to program for computer went out of business. Everything we have today evolved from either UNIX or DOS. That other computer, and what it was capable of, has been almost completely forgotten.

Donny V
0 points
2 days ago

What was the other computer called?

Webmention stuff


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK