I built Getting Fish-Shaped Crackers Back in Vending Machines 1.1.0 on Glitch

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 :open_mouth: 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

:clinking_glasses: 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. :person_bowing: 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. :open_mouth: 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 :roll_eyes:

image
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 :person_facepalming:

“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 :grimacing:

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


:angry:

2 Likes

bro made vs code in glitch.

2 Likes

Oh Yeahhhh!

Wow. This is all an amazing update.

Good work!

1 Like

He made Glitch in vs code in glitch

3 Likes

can finally clear up some space and go to bed peacefully knowing someone has already made glitch vscode happen

1 Like

(timestamp indicating that the project was from like a year ago)

nooo and you never published it :scream:

i could only get so far :sob:

1 Like

woa with a list of projects to select from

i could PR that for you :eyes:

Just under a year…

Man I like that project list.

1 Like

well this post inspired me so i went ahead and actually did it

1 Like