Vyxal

user

4:41 AM

@Ginger yeah

@lyxal Damn, I just checked out Scala.JS's javalib and yup, java.nio.file hasn't been ported yet: github.com/scala-js/scala-js/tree/main/javalib/src/main/scala/…

But I'm pretty sure you can create a scala.io.Source and use that instead

I just used Files because that's what I'm familiar with

@lyxal Pretty

lyxal

AI :p

user

For a second I thought it was like the default template or something but nope, that's Ginger'sm odifications

Nice job Ginger

Oh wait is that your work lyxal

Nice work lyxal

lyxal

@lyxal this thing?

it's v0 developed

user

Yeah

lyxal

chatgpt but for web devs :p

user

4:46 AM

Oh

lyxal

yeah :p

user

Nice job, Internet?

lyxal

v0.dev/chat

user

Me: my pasta is overcooked, how do i fix it
v0: I'm mostly focused on web development, but I can offer some advice on your pasta situation.

Unfortunately, once pasta is overcooked, there's no way to make it perfectly al dente again. However, here are some suggestions to salvage your overcooked pasta and prevent it from happening in the future:

1. Salvaging overcooked pasta:

1. Rinse with cold water: This can help stop the cooking process immediately.
2. Use it in a different dish: Overcooked pasta can work well in soups, casseroles, or frittatas.

Ginger

11:44 AM

@lyxal here's what the modified version looks like:

but the page just ends there :p

and idk where to put things like the interpreter version list

lyxal

@Ginger ooh ooh you know how sites like Deno and Github Copilot's introduction page show how different problems are solved using cool looking text editor boxes which aren't actually editable?

more of those in addition to the one already at the top of the page

Ginger

(the secret: those are all CM fields)

lyxal

and the sbcs stuff can be compared to what you'd write in something in js/python to show that this is a golf language and that you short in this language

Ginger

you'll have to mock it up for me tho on account of I know 🤏 this much vyxal

(also I really do need somewhere to put the download links and interpreter version archive)

lyxal

Make all versions a dropdown to select a version to use

Ginger

11:52 AM

that just feels clunky, but ok

lyxal

@Ginger like that

A react component where I can fill in the blanks would be good

Ginger

no react for this page :p

since we don't have SSR

lyxal

SSR?

Ginger

Server Side Rendering

lyxal

compile and deploy easy

turn it into static html

Ginger

11:56 AM

the way theseus works is that Pages serves a nearly-empty HTML file and the TS initializes the whole thing from scratch

@lyxal I looked into this, there doesn't seem to be a way to do it

unless I missed something

lyxal

medium.com/@ninadkarlekar/…

@Ginger npm run build is the key it seems

which makes sense given that's what I used for a uni assignment

I've deployed a react app to surge.sh before

Ginger

@lyxal does this solution involve installing chromium

lyxal

it doesn't matter

npm run build

that's all you need

Ginger

I doubt it

lyxal

no I'm telling you as a fact

10 mins ago, by lyxal

I've deployed a react app to surge.sh before

Ginger

12:10 PM

this smells like it's written for create-react-app

which I notably did not use

lyxal

oh

well that does make a difference

given that I did use create-react-app :p

Ginger

all the solutions I found when I checked involved using a browser engine

which I'm not interested in :3c

I'll see if I can do whatever create-react-app does, but don't get your hopes up

lyxal

github.com/react-static/react-static

there's a library for it

no need for create-react-app

ah looks like it's something that needs to be used from the start

@Ginger is it already written in react, or is it plan html?

Ginger

@lyxal plain HTML right now

but not very much, I could convert it to TSX

lyxal

could migrate to svelte

Ginger

12:16 PM

eeeeh

I'm wary of frameworks

lyxal

svelte is lightweight enough you barely notice it's there

github.com/Vyxal/Luminespire/tree/main for an example

Ginger

ඞ

@lyxal why does luminespire have both prettier and eslint??

lyxal

dunno

Ginger

@lyxal yeah this looks weird

what are the alternatives? I'd prefer to only use vanilla react if at all possible

lyxal

Svelte isn't that bad

if I have a soft spot for it, and I hate web development, you know it's doing something right

Ginger

12:28 PM

lol

still: what are the alternatives? I'll keep svelte in mind I promise

RubenVerg

i love svelte but sometimes i just want to do jsx and every svelte dev hates me for even thinking about that

lyxal

@Ginger I don't know anything outside of react and svelte :p

just don't use vue whatever you do

I do not like vue

RubenVerg

vue isn't that bad, especially compared to react

lyxal

if vue was good, we wouldn't be needing theseus

Ginger

if vue was good we would still have the (unusuable on mobile) first iteration of the v3 interpreter, so maybe it's for the best :p

lyxal

12:33 PM

github.com/developit/htm

jsx but without needing to build

apparently

Ginger

@lyxal lmaooooo

this is literally the reason I made theseus

because the old keyboard used that and it was horrendous

bad enough that I decided to redo the whole thing out of spite

tell ya what. just write me the examples (and ideally use v0 to make a mockup or smth), I'll handle the writing of the page

I'll keep svelte in mind but rn I don't feel that it's justified

lyxal

I can do you one better

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Editor Template</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            height: 100%;
        }
        .container {
            display: flex;
            height: 100%;
        }
        .sidebar {

It'll generate them for you

I can just do more of these:

renderCodeEditor(
            "1 2 + .",
            "print(1 + 2)",
            "This code adds two numbers (1 and 2) and prints the result. The Vyxal code uses stack-based operations, while the Python code uses a more traditional syntax."
        );

Ginger

@lyxal very nice

I'll just bolt bootstrap CSS onto this

it does pain me a little bit to use JS for assembling the page

hey wait don't we have custom elements in vanilla HTML now

we do! new idea

ok this doesn't look too hard to use

@lyxal so should this go under the three cards?

lyxal

yes

Ginger

right

how many of these are we gonna have

lyxal

12:45 PM

don't know yet

also, when did they change the copilot product page?!?

I swear it used to have "this is what it autocompletes as" boxes

this is what I pretty much have in mind, except the sidebar on the left is text/blurb

Ginger

~~twilight zone~~ shadow DOM time

ugh, why does this have to be so complicated

The Empty String Photographer

poop⁡‎‎⁪⁡⁪⁠⁪⁡⁪‏‏⁡⁠⁡‌⁢‎‎⁪⁡⁪⁠⁪⁢⁪‏⁠‎⁪⁡⁪⁠⁪⁣⁪‏‏⁡⁠⁡‌⁣‎‎⁪⁡⁪⁠⁪⁤⁪‏‏⁡⁠⁡‌
p     # ‎⁡Letter p
 oo   # ‎⁢Double letter o
   p  # ‎⁣Letter p
💎
Created with the help of [Luminespire](vyxal.github.io/Luminespire).

Ginger

1:00 PM

this is the tool I found the first time

@lyxal what's this from?

lyxal

github copilot

Ginger

need to figure out how they handle responsiveness

lyxal

@Ginger slight problem is that's from the web archive

not live

Ginger

what does it look like on mober

that's the question

lyxal

one tick

need to open the site again

@Ginger they do not :p

Ginger

1:07 PM

ah

maybe I'll come back to this

for now I just need to figure out where to put the version list

which is turning out to be really annoying

the problem is that we have a bunch of versions and no extra info about them, so making a list of them on the page is difficult to do in a way that doesn't look ugly

and there's no obvious place to put a dropdown

why is web design so difficult, huh

@lyxal ok what if I put a centered thing under the three cards with a version dropdown and a "go to latest" button

lyxal

:+1:

Ginger

wait new idea

@lyxal do you have some examples of vyxal that I can use? I think I know how to do this

lyxal

just vyxal no other language?

Ginger

two cards under the current set of three: one with online interpreter and GH release links, and one with examples of vyxal

lyxal

sbcs or literate?

Ginger

1:17 PM

@lyxal yeah, for now

@lyxal literate ig

I'm definitely gonna come back to this later

lyxal

## A collatz conjecture program
stdin := n ## read the input into n
(. scan-fix: {if even? then halve else triple increment end}) := collatz
$n $collatz call

## The classic fizzbuzz
100 map<
  n [3, 5] divides?
  "FizzBuzz" halve
  dot-product maximum
} join-on-newlines

## How about something that generates all the fibonacci numbers?
## Like actually all of them

relation add from [1, 1] end

## is it really that simple?!

(Taken from the readme)

@Ginger it's probably better to just stick to one language anyway

Ginger

I don't like this

Ginger

1:36 PM

okay, my patience for web design is wearing thin

I'm gonna make the all versions button a dropdown and ship that

@lyxal I have something that works

lyxal

very nice

Ginger

2:04 PM

@lyxal I might make the list of archived versions its own page tbh

lyxal

fair

Ginger

also I replaced the archived versions card with one that links to the tour

Ginger

2:19 PM

@user how? :p

Ginger

2:46 PM

shocking: my cursed webpack trickery is not working as intended

user

6:34 PM

@Ginger Not sure if I'm misunderstanding you but the fastLinkJS and fullLinkJS tasks have already been modified to stick stuff under pages

github.com/Vyxal/Vyxal/blob/version-3/build.sc#L181-L224

Ginger

indeed they have

that works, thanks!

user

\o/

I do not remember having that much code duplication, though, need to get rid of it

Don't have the motivation to doi t right now but if you're feeling too lazy to figure out Mill feel free to ping me

Transcript for