HN Explorer

25 comments

[ 2.6 ms ] story [ 26.0 ms ] thread
qznc
"Running code has never been easier :)"

Well... presses Ctrl-Shift-i ...I found an easier way to run some code :)

pitaj
F12 is even easier
fragmede
it's off the home row, and isn't available on Apple keyboards by default without also using the Fn modifier, at which point it's only different by one keystroke, not two.
purplecats
so, observablehq. i like it. what's the pricing, and can you save private docs?
steve_adams_86
Observable doesn't have TypeScript support, which is a real drag. Their embeds also don't show code, so it's not very useful as a teaching tool in a blog post for example. However, they don't charge for embedding, so that's not a problem per se.
bhaybs
I have been waiting a long for this

I use Quokka.js but I hate that the free version is almost useless

FractalHQ
They rebranded it into “console ninja”, with a more generous (and actually (extremely) useful) free tier for the extension. I can highly recommend it!
amitport
So many of these projects over the years. There's zero profit to be made here IMHO. Though it would be cool if somebody manage to crack the formula, I don't see how this specific project does that.
oofsa
Cool. This may be a bit nitpicky, but most of the interactive JavaScript environments I have seen with auto-run ("evaluates as-you-type"), including this one, freeze in the following case.

  for (let i = 0; i < 10;|) {}
                         ^ cursor
civilitty
An easy way to correct this is injecting a watchdog function call at the end of every for and while loop. It’s a trivial AST transformation that’s relatively fool proof as opposed to trying to figure out what condition would progress the loop. The semantics of the watchdog depend on the use case and ideally you can transform the evaled code in an async wrapper. Set a global variable to the current time on animation frames and then throw an exception inside the watchdog when it times out (when difference between the global variable and current time is > x ms).
simlevesque
One of the great mysteries of life is why Microsoft doesn't provide a good TypeScript notebook for VsCode. The JS notebook plugin is like a toy.
iddan
Especially after building two alpha products
amitport
Why should they?
simlevesque
They have a JS Notebook that has potential but it's so outdated. Examples use " = require('package')" which is old tech.

They own VSCode and TypeScript. No one is better positioned to make such a product.

reuben364
Trying out the thing, and since this is ycombinator after all:

  type Lazy<A> = () => A;
  const lazy = <A,>(f: Lazy<A>) => {
    let thunk: Lazy<A> = () => { throw null; }
    thunk = () => {
      const y = f();
      thunk = () => y
      return y;
    };
    return thunk;
  };
  const tap = <A,B>(f: Lazy<(a: Lazy<A>) => Lazy<B>>, a: Lazy<A>): Lazy<B> => 
    lazy(() => f()(a)());
  
  const ap = (f: any, a: any): any => tap<any,any>(f, a);
  
  const y = <A,>(f : (a: Lazy<A>) => Lazy<A>): Lazy<A> => ap(((x: any) => ap(ap(f, x), x)),((x: any) => ap(ap(f,x),x)));
  
  type Cat = {
    name: string,
    friend: Cat,
    prefersDryFood: boolean,
    foodPerWeek: number
  };
  export const cat = y<Cat>(self => lazy(() => ({
    name: "lol",
    friend: self(),
    prefersDryFood: false,
    foodPerWeek: 4,
  })))();
Breaks typescript though. Also, the laziness won't work here.
compressedgas
Though you need to replace:

  return thunk;
with:

  return () => thunk();
Otherwise the assignment in thunk does nothing.
highmastdon
I'd like to see this as a live code-sharing tool. Sometimes when interviewing candidates I'm using codeshare.io, but that doesn't have "live compilation". This would be great for that. I'm missing some features, and they're expected as it's in alpha, but I don't want to keep them from you: 1. vim mode (ace editor could be nice for this?), 2. a way to share with a not logged-in user 3. dark mode 4. maybe I'm missing it, but having a `console.log` not being in the output is unintuitive
vinnymac
First demo I tried was `Visualize weather data with two React chart libraries`, and all I see is an error at the bottom.

> Something went wrong: TypeError: Cannot read properties of null (reading 'useRef')

Appears to be an issue with the charting library used here at a glance?

steve_adams_86
I don't seem to be clever enough to figure out importing from NPM. The docs indicate that you don't need to do anything special, but all of my attempts yield "Error: couldn't resolve module [module name]". I can however import from other notebooks, and that's very cool: https://www.typecell.org/@steveadams/test
TechBro8615
That sounds like an error you get when the top level module you're importing depends on another module that's not part of the bundle. Try using https://esm.sh - that works for me in Observable notebooks, at least.