A simple shell for coding client-side in Javascript.
- Download/clone Learn2JS
- Extract into Documents (or wherever you like)
- Open README.html for the final setup instructions.
Mark Damon Hughes blogs about tech and everything else
A simple shell for coding client-side in Javascript.
Comments are closed.
Mentions
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.
Learn2JS
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.
-->
I've updated the Learn2JS shell, which makes it easy to get started writing client-side Javascript.
Added eslint tags and an initial config, so you can check for errors while editing.
Switched from a Python web server to light-server on Node; even though the shell doesn't use Node directly, it seems more consistent.
Added Canvas class to simplify setting up and drawing on HTML canvas.
Any suggestions or feedback? I just use this myself to script things quickly, but I'm happy to enhance it into a better learning tool.
.rpwe-block ul{list-style:none!important;margin-left:0!important;padding-left:0!important;}.rpwe-block li{border-bottom:1px solid #eee;margin-bottom:10px;padding-bottom:10px;list-style-type: none;}.rpwe-block a{display:inline!important;text-decoration:none;}.rpwe-block h3{background:none!important;clear:none;margin-bottom:0!important;margin-top:0!important;font-weight:400;font-size:12px!important;line-height:1.5em;}.rpwe-thumb{border:1px solid #EEE!important;box-shadow:none!important;margin:2px 10px 2px 0;padding:3px!important;}.rpwe-summary{font-size:12px;}.rpwe-time{color:#bbb;font-size:11px;}.rpwe-comment{color:#bbb;font-size:11px;padding-left:5px;}.rpwe-alignleft{display:inline;float:left;}.rpwe-alignright{display:inline;float:right;}.rpwe-aligncenter{display:block;margin-left: auto;margin-right: auto;}.rpwe-clearfix:before,.rpwe-clearfix:after{content:"";display:table !important;}.rpwe-clearfix:after{clear:both;}.rpwe-clearfix{zoom:1;}
Manifesto
The future is
comingnowyesterday.Pages
Learn2JS: Skeleton for quickly building JS applications. As close as modern tech can get to a BASIC "READY" prompt!
MDH Software Gallery
ImageUtil: Java command-line image-processing utility.
Advent of Code 2017
Mark Rolls Dice: gaming blog
Archive of my old site at KUOI-FM
Blog
Starred Posts
See the Categories list to the right and down for specific topics
Last 5:
Beyond Cyberpunk Web Design
2018-08-09Beyond Cyberpunk: 1991 Hypercard stack BCP web version Cyberpunk, by Billy Idol: I like it, I don't care if he's a cheesy little idiot. Billy Idol's Cyberpunk Mac app: I can't find an emulator of it, but it's just interactive liner notes and a couple screen savers. Enjoy. Archive of Hotwired.com from 1997: Most of … Continue reading "Beyond Cyberpunk Web Design"Read More »
Just One Fix Wednesday Music
2018-08-08Psalm 69, by Ministry The Mind is a Terrible Thing to Taste, by Ministry Ænima, by Tool: Still not on Apple Music, because they like their cover art too much. So instead they get nothing from this YT rip. Lateralus, by Tool Big Hit, by Nitzer Ebb Showtime, by Nitzer EbbRead More »
Mellow & Blitzed Tuesday Music
2018-08-07Secret Messages, by Electric Light Orchestra The Albums 1971-1982, by Marvin Gaye A Kind of Magic, by Queen The Long Run, by Eagles After Hours, by Glenn Frey It's OK to get your drink on early today. Pearls Before SwineRead More »
2018-08-05Kronar returns in a 24-page comic Dark Miasma! Oglaf is super NSFW, tho this one is pretty tame, but if you read the previous Kronar stories be prepared for… well, be prepared.Read More »
WordPress: Gutenberg
2018-08-03In brief: I tried to use Gutenberg for that, and it's fucking garbage. It repeatedly failed to load, just a blank page, and then after a couple tries it came up. It recognizes pasted-in Markdown, but doesn't let me write in Markdown. It makes half the window unusable whitespace instead of more editor. So I've … Continue reading "WordPress: Gutenberg"Read More »
All my little software tools, things that don't belong on the Software Gallery. BasicSS: Basic Games in Scheme. Bookmarklets: Little scripts to run in your…
Advent of Code 2018
my 2018 attempt
my 2017 attempt
2017, Week 1 report: I got too busy to finish even week 2, and fell further behind, but still some interesting results.
Learn2JS came out of that.
I don't know how much I'll do this year, but I'll do it in Chicken Scheme as a way of improving the text-processing and math functions in my library, and publish it. Source is now on gitlab, above.
The competitive part is still bullshit, the single starting time of midnight EST is utterly useless to most people who could participate; even in Pacific time, that's late at night. On my quiet night schedule, that's way too early to wake up; in Europe, that's 04:00 or so, long before coffee could percolate. Mid-workday for Korea & Japan. So, only for Finns and Russians?
December 9, 1968, Douglas Engelbart's presentation of NLS and teleconferencing:
Youtube: This is at 360p, most other uploads are at 240p fuzzy mud, I'd love to have a good HD one where I can read the text. Alas.
TheDemo@50
Of course, in reality what we mostly do with that is look at social media, hardly any better than watching TV. But we could do more.
It's been years since I've watched this, and some things jump out at me as I rewatch:
The keyboard beep is infuriating, it's what I consider an error sound. And Doug's fumbling a few times, which suggests the keybindings aren't visible, well-organized, or practiced yet. We see later that they're just code mapped to keys in a resource list.
The NLS word demo is somewhat like a modern programmer's editor with code folding; but notably I don't ever use folding, it's slow (even on 1 million times faster machines!) and error-prone, sucking up far more text than expected. It's also a lot like outliners like OmniOutliner; but while I do sometimes use OO to organize thoughts, I would never keep permanent data in it, because I can't get it into anything else I use. Dumb text is still easier and more reliable; I put my lists in Markdown lists:
- Produce
+ Banana
* Skinless
Maybe the answer is we should have better tools and APIs for managing outlines? Right now I can manage dumb text from the shell, or any scripting language, or with a variety of GUI tools. OmniOutliner's "file format" is a bundle folder with some preview images and a hideous XML file with lines like:
<item id="kILRUkulXwk" expanded="yes">
<values>
<text>
<p>
<run>
<lit>Stuff</lit>
</run>
</p>
</text>
</values>
<children>
Nothing sane can read that; even if I use an xml-tree library, it's still item.values[0].text.p.run.lit to get a single value out!
If I export it to OPML, it loses all formatting and everything else nice, but I get a more acceptable:
<outline text="Stuff">
Back to the demo.
The drawing/map editor's interesting. This is pretty much what Hypercard was about, and why it's so frustrating that nobody can make a good modern Hypercard.
Basically every document seems to be a single page, fixed on screen. If a list gets too long, what happens? It doesn't scroll, just fully page forward/back.
Changing the view parameters is basically CSS; CSS for the editor! Which is what makes Atom so powerful, but it's not easy to switch between them, probably have to make your own theme plugins, or just a script to alter the config file and then reload the editor view.
Inline links to other documents in your editor, is interesting. Obviously we can write HTML links, but they have to be rendered out and no editor can figure out where a reference goes and let you click on it. Actually, this does work in Vim's help system, but nowhere else.
The mouse changed three ways since then: The tail moved to the top, the wheels became a ball which drives two roller-potentiometers inside, and then was replaced with a laser watching movement under a window. Don't look into the butthole of your mouse with remaining eye. But the basic principle of relative movement of a device moving the pointer, rather than a direct touch like Don Sutherland's Sketch light pen, or modern touch screens, or a Bluetooth stylus, remains unchanged and still the fastest way to point at a thing on a screen. Oh, and the pointer was called a "bug" and pointed straight up, Xerox copied this directly in their Star project, while everyone since Apple has used an angled arrow pointer.
The chording keyboard never took off, and I've used a few, and see why: It's incredibly hand-cramping. While a two-handed keyboard is awkward with a mouse, you have room to spread your fingers out, and only half the load of typing is borne by each hand. On a chord, each finger is doing heavy work every character.
The remote screen/teleconferencing setup is hilarious: a CRT being watched by a TV camera, which runs to a microwave transmitter; they couldn't send it over phone lines, acoustic coupler modems were only 300 baud (bits per second, roughly) at the time.
As with Skype today, every chat starts with "I can't hear you, can you hear me? Fucking (voice chat system)." Later, audio drops out, and all Doug can do is wave his mouse at the other presenter. I've joked before that the most implausible thing in Star Trek isn't FTL, even though that's physically impossible; it's not aliens indistinguishable from humans with pointy ears, half black/white makeup, or bumpy foreheads; it's that you meet an alien starship and can instantly set up two-way video conferencing.
They seem to have a mess of languages; MOL (Machine Oriented Language) is a macro assembler in modern terms. All the languages have to be adapted to NLS, they couldn't just use LISP or FORTRAN. Since changes are recorded by userid, they had git blame!
Split screen! That's a thing I love, and few editors do. You can drag a bar down from the top in BBEdit, and Atom has "Split up/down/left/right" for panes, but then you have to re-open the document in each and it's a pain.
Messaging is a public board (or rather, an outline with each statement as a message), with #INITIALS for addressing, like @USERNAME in the Twitters and such. Like those, there's too much data to process for live updating, everything runs as a batch job that can crash the database.
WarComputing never changes.Cold & hot retrieval are just file search; on the Mac we have Spotlight, and can search by keywords or filename. Though I have some problems with the cmd-space search these days, and mostly open Finder and search from there to get a list of files matching various requirements, or sometimes use
mdfind whatever|lessfrom shell, then winnow down "whatever" until I have only a few results. On Windows or Linux, you're fucked; get used to very long slow full-text searches.What NLS Did, and How We Can Do That
Mouse, Keyboard, bitmapped displays: We have that.
Teleconferencing: Still sucks.
System-Wide Search: Mac users have that, everyone else is boned.
It's faster on Linux or Windows to search Google for another copy of existing data than to search the local machine.
Outlining to enter hierarchical data: Nope.
All data goes into outlines contained in files.
Code as data: Some data is program instructions, in a variety of languages, which can operate on outlines.
To enter this outline, I had to keep adjusting my numbers, because I'm writing it in markdown text.
As mentioned above, OmniOutliner is logically very similar, but it's a silo, a trap for your data. The pro version (WHY not every version?!) lets you use Omni Automation, which is basically AppleScript using JavaScript syntax; the problem is waiting for an app to launch, then figuring out where your data is hidden inside some giant structure like app.documents[0].canvases[0].graphics[2] (example from omni docs ), just so you can extract it for your script.
Brent Simmons is working on Rainier/Ballard, which is a reimagining of Dave Winer's Frontier. I think building a new siloed language and system doesn't solve the real problem, but maybe it'll get taken up by others.
I have for some time been toying with enhancing my Learn2JS shell into an Electron application that would let you write, load, save, and run scripts in a common framework, without any of the boilerplate it needs now. A pure JS shell is just too limited around file and network access, and node by itself is too low-level to get any useful work done. I'm not sure how that works with everything else in your system. While browser localStorage of 2MB or so is sufficient for many purposes, you really want to save local files. While this doesn't force data into outlines, it makes code-as-data easy, and JavaScript Object Notation (JSON) encourages storing everything as big trees of simple objects, which your functions operate on.
(I'm having fun with Scheme as a logic puzzle; but it's not anything I'd inflict on a "normal" person trying to work on data that matters).
If you want to talk about doing more with this, reach me @mdhughes@cybre.space on Fediverse.
Added to my Learn2JS project, and it's fairly usable now for rapid development, I can move over the application logic of little tools and they just show up in the catalog and work. Still no live editor, you have to drop a script in lib or a user dir, but it's getting closer to instant-on coding!
Try it out, then look at the scripts,
alienis just block sprites but it's a decently hard shooter (there's some oddness about hit detection, and it needs upgrade drops to be a real game).mazeis the usual maze generator; drawing text right now because I haven't hooked up the sprite graphics. Both are about as close to minimal code needed for the task as you can get.All my little software tools, things that don't belong on the Software Gallery.
Learn2JS: Skeleton for quickly building JS applications. As close as modern tech can get to a BASIC "READY" prompt!
Runes: Text filter to convert ASCII sequences into nice Unicode or emoji.
Bookmarklets: Little scripts to run in your browser. Monochrome Dark & Light, and View Source.
ThoughtPy: Markdown-based command-line note-taking tool.
Utility/Filter: Text searching/filtering tool with Python scripting.
ImageUtil: Java command-line image-processing utility.
StupidComments.css: For Safari, a CSS stylesheet to hide stupid comments on the Internet. Unzip, read the instructions in the css file.
Antique (old but usable):
JICB 1.12: Cross-platform Java client for the ICB chat network, with a nice little scripting system.
RealCalc: Just a sample Object Pascal program.
ThoughtPad: Java note-taking tool.
Obsolete (not usable):
Notecraft: An Organized Note-Taking Tool for the iPad
UnixTime: A clock for geeks!