last thread: New vscode extension for glitch
Project URL: https://fishcracker.glitch.me/
marketplace link:
ok not-so-big in that this extension is already launched (see last thread linked above). however, at that time I had stated,
it’s a local project
I have no idea how to develop this other than in vscode
Getting Fish-Shaped Crackers Back in Vending Machines 1.0.0 wasn’t really built on Glitch. for use with Glitch, sure. but it was just a bunch of files on some computer where I had manually installed node.js and vscode. and every day I worked on it I would physically have to go to that specific computer to work on it.
as of yesterday, I have just finished building Getting Fish-Shaped Crackers Back in Vending Machines 1.1.0 on Glitch. I used Getting Fish-Shaped Crackers Back in Vending Machines 1.0.0 in vscode.dev connected to a Glitch project to do the coding and to run the build tools. (ok yeah I see what you’ve been saying/thinking about the title being really long.)
alright here’s the highlights
tenth install milestone
double digits woooo
we—and I can legally say we—have a contributor
and with these, we have a description and readme
I stand in solidarity with solo projects though
most of the tools actually still work on Glitch
during development, we use:
- typescript:
"node": ">=14.17"
works.oh my gosh they support old node.js. the version 16 that we have on Glitch runs it fine
- webpack:
"node": ">=10.13.0"
works.woah they support way back
preview the extension directly in Glitch
https://fishcracker.glitch.me/workbench.html
this only shows a the vscode “workbench” UI loaded from Glitch. you can’t tell, but a development copy of the extension is installed
really this is what makes you need your own computer to develop extensions. the official ways to preview an extension during development are (1) to use a command line flag in native vscode, (2) to serve the web version from localhost a @vscode/test-web
package, or (3) to install the extension on vscode.dev via https from localhost
for the vscode.dev approach (3), you can’t substitute serving the extension files from Glitch because vscode.dev has uh, properly set its CSP headers to prevent getting extensions from places other than localhost or the extension marketplace. thanks, security
a GitHub issue where someone complained about this. closed with “yeah, we know” (paraphrasing).
with some degree of bad luck, the test-web package (2) really can’t be convinced to handle setups where you do TLS termination in a separate component (i.e. when you access your glitch site over https, Glitch unwraps the HTTPS, and your project receives plain HTTP). but with some degree of good luck, it was feasible to—and hold on to your hack-o-meters for this one—run the test package, download a copy the pages that it serves, and patch them to understand that they’re running on https://fishcracker.glitch.me
instead of http://localhost:3000
. and in fact this results in a static site instead of having to run some node.js server. now this is a win-win that makes me need to lie down for a while.
actual photo from the scene of the crime
sign in without persistent token
sign-in code and new anonymous user options are available
request to join project
which is handy if you choose to sign in as an anonymous user
huh, hadn’t noticed until now but both of those buttons do the same thing
fixed image viewing
yeah I made a booboo in the earlier version. binary files have a base64Content
field and a content
field set to empty string, and for whatever reason I previously checked for content
being present to determine that a file was plaintext
“welcome” views
vscode has the concept of “welcome” views that show up when a certain container is empty. I added some so that now we’re as cool as GitHub Codespaces or whatever
close long lived connections
we keep connections around for things that are streaming. but that could be a waste of project hours if you’re not going to be away for a while. so I added this command to let you explicitly close things
packaging the extension
ok there’s actually a third tool we need to develop an extension.
@vscode/vsce
: absolutely doesn’t work. it needs, needs nodejs 20 or later. immediately crashes with something about fetch not having ReadableStream or something. and I don’t remember asking it to download a … single thing
luckily, you only need vsce like one time when you package up the extension for publishing. and and you can “just” run the unofficial old-glibc build of nodejs
publishing an update to an extension
so yeah, vsce is a pain to run on Glitch. also if you give it an authentication token, it uhh kind of feels like it will save it in a place that Glitch considers public. so I have not been using the built in vsce publish
command to upload the packaged .vsix files to the marketplace
luckily there’s a way to upload the .vsix file on their website
this screenshot is from their extension publishing guide
and that worked the first time. they don’t show you how to upload a new version of an existing extension though
there indeed is a management page for an extension
but it’s a dead end. the right way to upload a new version is to go back
and then you click the dots there and click “Update.”
capital-B “Back”
edit: oh I almost forgot! the display name of the extension has changed subtly, to capitalize the B in “Back.” after some digging, I have concluded that … I don’t know grammar and I’m just guessing. some sources say “back” is an adverb; some sources say it’s an intransitive preposition. some various sources say do/don’t capitalize adverbs or prepositions except if they’re short or if they’re emphasized or if they’re in this list or if they’re the last word of the title etc.
about 10% of the time I spend developing this extension goes toward figuring out the right capitalization for things
actual screenshot from vscode extension guide
but guess what
