Learn 2 JS

Almost the simplest possible tool for coding in Javascript, slightly above Hello, World!, I packaged up how I did my Advent of Code 2017 entries (up to the point I quit for lack of time/sleep). I start with something like this in every JS project, and now you can have it.

  • Setup

Download learn2js

Unzip it to Documents (or wherever you like).

Open Terminal on a Mac; or xterm on Linux; or I have no idea what the terminal/shell situation is on Windows, feel free to enlighten me.

% cd Documents/learn2js
% ls
run.sh  src
% ./run.sh
Serving HTTP on 127.0.0.1 port 8000 (http://127.0.0.1:8000/) ...

This will require you have Python3 on your system to use as a simple web server, since a browser can't open multiple local files without a web server, but there's no other Python in this.

Right-click that URL (the part in parentheses!) and open it in your browser, or copy-paste it, and you should see a simple page with an Input: box. Anything you type is uppercased, that means it's working!

  • Coding

Now edit src/main.js with your editor of choice, like BBEdit on a Mac; or Atom anywhere. Please don't use Notepad on Windows, even if it handles correct line endings now.

Should be pretty self-explanatory, the TODOs tell you where to start.

Anytime you make a change to the source, just reload the page and hit Run again. Just like hacking on BASIC code back in 1980, dudes & dudettes!

  • Exercises for the Student:
    • I didn't make a favicon for this, and you should, which will introduce you to the horrible world of W3C/WhatWG specifications.
    • You might want to move inputTable below the output div in index.html, but then it scrolls down all the time, so now you need to anchor it at the bottom and make output fixed in place and scrollable, as I do in Mainmenu… I may add that option later, but it complicates a very simple page.
    • I didn't set up eslint for this, configuring it is somewhat annoying; probably will next time I update it.
    • Setting up Node is even more of an advanced topic, and 90% of the interesting work is in front end JS like this.
  • Troubleshooting: If a change isn't appearing, you may need to empty your web cache: In Safari, turn on Develop menu from Preferences>Advanced, then Develop>Empty Caches; in Chrome, Chrome>Clear Browsing Data and then only select "Cached images and files"; I have no idea what you do in Edge on Windows. I can't easily fix that, and users would never see it, but you will.
  • License: I put all the code under BSD license, the documents under Creative Commons Share-Alike. You can keep your code more or less private (except in practice, you have to let everyone see your page to let it load!), but if you make changes, share them and link back to me. Don't be a Stallman. Note in particular, you cannot relicense this under a restrictive license like GPL, and don't just put it on github unmodified. Sorry to have to preach about this, but some people need to be told where the lines are.
  • Shipping: To let others see your masterpiece, just change DEBUG to false, upload everything in src somewhere, your own site or something like Neocities, and you're done! You only need run.sh & Python on your local system.

Leave a Reply

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)