8 ms·

HTML playground

114 points by calebegg 10y ago

calebegg 10y ago
I've found that there's almost no "first class" support for TypeScript in similar apps like JSFiddle, Codepen, Plunker, etc. If they do support it, it's only the syntax, not the autocomplete and error highlighting (the cool parts!). So I decided to try making my own. Here are a few quick things I've written with it so far: https://goo.gl/zZy697 https://goo.gl/zZy697 ("Flocking" behavior in a simple particle system) https://goo.gl/1q2kmr https://goo.gl/1q2kmr (Draw tiling patterns on a canvas) https://goo.gl/aio1rm https://goo.gl/aio1rm (CSS-only card flip animation)
- ohitsdom 10y ago
  It was really fun to change some values in your Flocking script and see how the particles react.
  - Arkeus 10y ago
    I agree that it's a great example, and would be cool to have a similar example when you first load the site. Being able to play with code that exists is much more engaging than having a blank slate.
- xiaoma 10y ago
  This is a neat project. One thing that might make it more immediately clear would be an "show example" button that randomly loads one of those three links. I probably would have just left the blank page and forgotten about it if I hadn't seen your comment, but after seeing the examples, I won't forget the site for quite a while.
Nicksil 10y ago
This looks interesting. I've been wanting to mess about with TypeScript, but had only gone so far as scanning through the tutorials/intros. Nice to have a sandbox setup from the start. Also, really enjoying your "Flocking" script. Well done.
- beaconstudios 10y ago
  I use TypeScript in my startup - it's great and provides a lot more code stability over raw JavaScript but as you build up your type definitions you will likely hit a "roof" where TS doesn't support the next feature you would logically want. There's also no reflection on interfaces (as they're a purely compile-time construct like C macros) which sucks if you want no-noise DI. But overall it's really awesome and getting better with every release.
  - faceyspacey 10y ago
    What do you mean by "the next feature you would logically want"?
    - beaconstudios 10y ago
      well in my experience, and this has happened a few times with different requirements which is why I was generic, what happens is you try to use more and more of TypeScript's features to get strict typing (keyof, mapped types, discriminated unions etc) and they work great for 80% of cases. Then you push the feature too far and it falls down. For example, I managed to get tsc to hit a "stack depth exceeded" error by adding a minor variation on an existing complex type that I'd created. I find with TS types, less is very often more unfortunately. I'm trying to use TS like Haskell and it just doesn't play ball.
      - spion 10y ago
        Yes, TS does have limits. Its still very expressive compared to most mainstream type systems.
d--b 10y ago
I like the way you did intellisense, it's flawless.
- calebegg 10y ago
  I can't really take credit for that; it's pretty much provided out of the box with Monaco (the editor used in VS Code): https://github.com/Microsoft/monaco-editor https://github.com/Microsoft/monaco-editor
  - d--b 10y ago
    ha :) good to know!
tarr11 10y ago
Cool, is this using the Monaco editor from VSCode?
- 0xcoffee 10y ago
  If you take a look at the Sources it looks like it does use Monaco.
WhitneyLand 10y ago
I wish Facebook would drop FlowTypw at this point. It's been a nice contribution and spurred some competition. But there is no real vision for how it's going to add a lot of value above and beyond TS. One immediate benefit would be better support for react. Yes it works but not always as seamlessly as Angular/TypeScript.
- smdz 10y ago
  I wish the same. Unfortunately not many devs are trying out TypeScript. I've used React+TS for a year now. It works perfectly. The decorators in TS are great to use with the react-redux implementations - makes the code look less verbose The only problems I have faced is when type definitions are not available for certain libs. The workaround is simple - using "require(...)" instead of "import .. from ..." statements With type definitions available from npm and @types, its pretty easy compared to the TSD and Typings I had to use earlier.
  - danappelxx 10y ago
    > Unfortunately not many devs are trying out TypeScript. Really? I've seen so much hype for typescript (though not as much recently). How much is enough?
  - johnfn 10y ago
    TypeScript is the 9th most used language on the StackOverflow survey - ahead of languages like Ruby, Swift, and Objective-C - so I wouldn't say that "not many devs" are trying it out. :)
  - Ciantic 10y ago
    You should try the "allowJs" tsconfig option, it should allow to use the JS libraries without types with normal syntax (if you do that already with require trick, you are basically doing that anyhow).
- seattle_spring 10y ago
  Couldn't the same be said about TypeScript? "I wish Microsoft would drop TypeScript at this point. It's been a nice contribution and spurred some competition. But there is no real vision for how it's going to add a lot of value above and beyond Flow."
DoctorOW 10y ago
> It's similar to JSFiddle, JSBin, CodePen, and others So then what's the benefit? Doesn't codepen support TS?
- calebegg 10y ago
  Codepen supports TS but not inline error highlighting or autocomplete, which I think are some of the more worthwhile features of TS. https://news.ycombinator.com/item?id=13950079 https://news.ycombinator.com/item?id=13950079
startupdiscuss 10y ago
This is not related to the typescript aspect which, I realize, is the point of this contribution. I really like these code playgrounds but my main issue almost always comes down to flexibility regarding which code I can keep private, which I can make public, and so on. Just something to keep in mind as you decide to take this ahead. Now to play with some typescript.
- vdm 10y ago
  https://github.com/calebegg/codewich#features https://github.com/calebegg/codewich#features: >>> Code snippets you write are automatically saved in a compressed form in the URL. This has a few benefits: - Your code never leaves your machine unless you decide to share your URL. Since the snippet is stored in the URL fragment (the part after the #), the CodeWich web server doesn't even log your code snippets. - You don't have to rely on CodeWich's availability. You can download your own copy and run it locally, or host it somewhere you control, and you'll always be able to decode your CodeWich URLs to get the original code.
  - startupdiscuss 10y ago
    Oh wow, so is that why someone can paste an example and when I click on it, I can see the code? Codewich reproduced it from the URL? p.s.: the more I think about it, the more I like it but is there any fear that some programs can't be compressed into a url? p.p.s maybe not: http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers http://stackoverflow.com/questions/417142/what-is-the-maximu...
- calebegg 10y ago
  I agree completely. One of my goals with this was to make it entirely client-side. Your code is never sent to my server. It's stored in the URL after the #. You can share it by sharing the URL, but otherwise it's yours. I've also provided a standalone version on Github which you can download and run locally or install somewhere in your company's intranet for internal use. It has no analytics and no outside communication. https://github.com/calebegg/codewich/releases https://github.com/calebegg/codewich/releases If there are other ways to support this use case, let me know. I'm open to suggestions.
JohnnyConatus 10y ago
Am I missing something or are there no example projects? I'm a typescript dev but it would still be helpful to see a few working examples when I hit the site.
paradite 10y ago
Good idea to encode the code in the url. Unfortunately I think Chrome has a limit on the length of url you can paste into it. I tried copying the url of a slightly longer code into text editor and a new Chrome tab, the latter failed with a audio signal.
Nadya 10y ago
This is the cleanest layout I've seen for one of these playgrounds. 95% of my screen estate is the editor and preview - you shot the UI off the side and kept it out of my way. Thank you for that! The only thing missing for me are transpilers for CSS/HTML. I'm a bit spoiled in being able to use SCSS and Pug over at Codepen. Between choosing between autocomplete/error highlighting for .ts or SCSS/Pug support I sadly will pick the former. I'm totally understanding if the only goal is to support .ts and there are no future plans to add scss/pug support, but I'd switch to using this in an instant over using Codepen if it ever gets added! I'll play around with it and let you know my thoughts after I use it a bit. :)
- calebegg 10y ago
  Glad you like the simple layout! One of my goals for this is to avoid anything that requires a backend and do everything in the browser. This lets you keep your code private and makes Codewich basically maintenance-free (hopefully). Looks like sass can run in the browser with emscripten, so that should be possible, but seemingly not pug?: https://github.com/pugjs/pug/issues/2655 https://github.com/pugjs/pug/issues/2655. Feel free to file an issue for SASS if you'd like to track the progress. https://github.com/calebegg/codewich https://github.com/calebegg/codewich
AtheistOfFail 10y ago
This is quite possibly the coolest thing I've seen so far. I would be quite happy if you added some collaboration controls (give read access without giving write access) because I could use this for a lot of our training. I just put together a websocket demo for anyone who wants some live documentation on how to integrate actioncable-js with their non-actioncable enabled application for client-side updates -> https://codewich.com/#v1,,,bVHLTuMwFGWNxD9YHiQSiTriMSwKqdTpADugKozEbEaObRIziR18b0ijqv.OnVSIonpl.7x8j_f2rkA4XSMBJ1JaINYwThLH21wjE7ZKqpaXUCiXcIHaGsGzUo1eIak4oL.VGnAD_esx9gp0cpUMrpOD_Y3_wT7ZjhBWeu5bo1zX5wzb0Rk7ZSes0ib4BJE2qHKnsUspFPz058WoaPPzHJb5zd_iHq6veSXvn29_vZyc3XTzRj.25XSeL_8s7nI8T3sL4SyAdTrXJqXcWNNVttn5ykmgE3IYSSuaShmMmVNcdtFLY_oZo3g1UMJqtZG2ZdO6JilZrXcBrO_Ew9NePusbEt4T1cwa8Bkuoi2EQuomY5lGQOtVNmlVBlb8V0jjy93OpYdnBTdGlT7geyaDJhuG8rmwyYxWYhCMCX1wWqiNnh4T0TinjOjG5Ohp8ftofUy.TBqWU0LpdyXH5LMMyZHH33lDgfRHAGnMUC1xIG7TvtS1ji_JcFqHWbe.peaGaJnS3i38mL.YfAA https://codewich.com/#v1,,,bVHLTuMwFGWNxD9YHiQSiTriMSwKqdTpA...

114 points by calebegg 10y ago

I've found that there's almost no "first class" support for TypeScript in similar apps like JSFiddle, Codepen, Plunker, etc. If they do support it, it's only the syntax, not the autocomplete and error highlighting (the cool parts!). So I decided to try making my own. Here are a few quick things I've written with it so far: https://goo.gl/zZy697 https://goo.gl/zZy697 ("Flocking" behavior in a simple particle system) https://goo.gl/1q2kmr https://goo.gl/1q2kmr (Draw tiling patterns on a canvas) https://goo.gl/aio1rm https://goo.gl/aio1rm (CSS-only card flip animation)

ohitsdom 10y ago
It was really fun to change some values in your Flocking script and see how the particles react.
- Arkeus 10y ago
  I agree that it's a great example, and would be cool to have a similar example when you first load the site. Being able to play with code that exists is much more engaging than having a blank slate.
xiaoma 10y ago
This is a neat project. One thing that might make it more immediately clear would be an "show example" button that randomly loads one of those three links. I probably would have just left the blank page and forgotten about it if I hadn't seen your comment, but after seeing the examples, I won't forget the site for quite a while.

Nicksil 10y ago

This looks interesting. I've been wanting to mess about with TypeScript, but had only gone so far as scanning through the tutorials/intros. Nice to have a sandbox setup from the start. Also, really enjoying your "Flocking" script. Well done.

beaconstudios 10y ago
I use TypeScript in my startup - it's great and provides a lot more code stability over raw JavaScript but as you build up your type definitions you will likely hit a "roof" where TS doesn't support the next feature you would logically want. There's also no reflection on interfaces (as they're a purely compile-time construct like C macros) which sucks if you want no-noise DI. But overall it's really awesome and getting better with every release.
- faceyspacey 10y ago
  What do you mean by "the next feature you would logically want"?
  - beaconstudios 10y ago
    well in my experience, and this has happened a few times with different requirements which is why I was generic, what happens is you try to use more and more of TypeScript's features to get strict typing (keyof, mapped types, discriminated unions etc) and they work great for 80% of cases. Then you push the feature too far and it falls down. For example, I managed to get tsc to hit a "stack depth exceeded" error by adding a minor variation on an existing complex type that I'd created. I find with TS types, less is very often more unfortunately. I'm trying to use TS like Haskell and it just doesn't play ball.
    - spion 10y ago
      Yes, TS does have limits. Its still very expressive compared to most mainstream type systems.

d--b 10y ago

I like the way you did intellisense, it's flawless.

calebegg 10y ago
I can't really take credit for that; it's pretty much provided out of the box with Monaco (the editor used in VS Code): https://github.com/Microsoft/monaco-editor https://github.com/Microsoft/monaco-editor
- d--b 10y ago
  ha :) good to know!

tarr11 10y ago

Cool, is this using the Monaco editor from VSCode?

0xcoffee 10y ago
If you take a look at the Sources it looks like it does use Monaco.

WhitneyLand 10y ago

I wish Facebook would drop FlowTypw at this point. It's been a nice contribution and spurred some competition. But there is no real vision for how it's going to add a lot of value above and beyond TS. One immediate benefit would be better support for react. Yes it works but not always as seamlessly as Angular/TypeScript.

smdz 10y ago
I wish the same. Unfortunately not many devs are trying out TypeScript. I've used React+TS for a year now. It works perfectly. The decorators in TS are great to use with the react-redux implementations - makes the code look less verbose The only problems I have faced is when type definitions are not available for certain libs. The workaround is simple - using "require(...)" instead of "import .. from ..." statements With type definitions available from npm and @types, its pretty easy compared to the TSD and Typings I had to use earlier.
- danappelxx 10y ago
  > Unfortunately not many devs are trying out TypeScript. Really? I've seen so much hype for typescript (though not as much recently). How much is enough?
- johnfn 10y ago
  TypeScript is the 9th most used language on the StackOverflow survey - ahead of languages like Ruby, Swift, and Objective-C - so I wouldn't say that "not many devs" are trying it out. :)
- Ciantic 10y ago
  You should try the "allowJs" tsconfig option, it should allow to use the JS libraries without types with normal syntax (if you do that already with require trick, you are basically doing that anyhow).
seattle_spring 10y ago
Couldn't the same be said about TypeScript? "I wish Microsoft would drop TypeScript at this point. It's been a nice contribution and spurred some competition. But there is no real vision for how it's going to add a lot of value above and beyond Flow."

DoctorOW 10y ago

> It's similar to JSFiddle, JSBin, CodePen, and others So then what's the benefit? Doesn't codepen support TS?

calebegg 10y ago
Codepen supports TS but not inline error highlighting or autocomplete, which I think are some of the more worthwhile features of TS. https://news.ycombinator.com/item?id=13950079 https://news.ycombinator.com/item?id=13950079

startupdiscuss 10y ago

This is not related to the typescript aspect which, I realize, is the point of this contribution. I really like these code playgrounds but my main issue almost always comes down to flexibility regarding which code I can keep private, which I can make public, and so on. Just something to keep in mind as you decide to take this ahead. Now to play with some typescript.

vdm 10y ago
https://github.com/calebegg/codewich#features https://github.com/calebegg/codewich#features: >>> Code snippets you write are automatically saved in a compressed form in the URL. This has a few benefits: - Your code never leaves your machine unless you decide to share your URL. Since the snippet is stored in the URL fragment (the part after the #), the CodeWich web server doesn't even log your code snippets. - You don't have to rely on CodeWich's availability. You can download your own copy and run it locally, or host it somewhere you control, and you'll always be able to decode your CodeWich URLs to get the original code.
- startupdiscuss 10y ago
  Oh wow, so is that why someone can paste an example and when I click on it, I can see the code? Codewich reproduced it from the URL? p.s.: the more I think about it, the more I like it but is there any fear that some programs can't be compressed into a url? p.p.s maybe not: http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers http://stackoverflow.com/questions/417142/what-is-the-maximu...
calebegg 10y ago
I agree completely. One of my goals with this was to make it entirely client-side. Your code is never sent to my server. It's stored in the URL after the #. You can share it by sharing the URL, but otherwise it's yours. I've also provided a standalone version on Github which you can download and run locally or install somewhere in your company's intranet for internal use. It has no analytics and no outside communication. https://github.com/calebegg/codewich/releases https://github.com/calebegg/codewich/releases If there are other ways to support this use case, let me know. I'm open to suggestions.

JohnnyConatus 10y ago

Am I missing something or are there no example projects? I'm a typescript dev but it would still be helpful to see a few working examples when I hit the site.

paradite 10y ago

Good idea to encode the code in the url. Unfortunately I think Chrome has a limit on the length of url you can paste into it. I tried copying the url of a slightly longer code into text editor and a new Chrome tab, the latter failed with a audio signal.

Nadya 10y ago

This is the cleanest layout I've seen for one of these playgrounds. 95% of my screen estate is the editor and preview - you shot the UI off the side and kept it out of my way. Thank you for that! The only thing missing for me are transpilers for CSS/HTML. I'm a bit spoiled in being able to use SCSS and Pug over at Codepen. Between choosing between autocomplete/error highlighting for .ts or SCSS/Pug support I sadly will pick the former. I'm totally understanding if the only goal is to support .ts and there are no future plans to add scss/pug support, but I'd switch to using this in an instant over using Codepen if it ever gets added! I'll play around with it and let you know my thoughts after I use it a bit. :)

calebegg 10y ago
Glad you like the simple layout! One of my goals for this is to avoid anything that requires a backend and do everything in the browser. This lets you keep your code private and makes Codewich basically maintenance-free (hopefully). Looks like sass can run in the browser with emscripten, so that should be possible, but seemingly not pug?: https://github.com/pugjs/pug/issues/2655 https://github.com/pugjs/pug/issues/2655. Feel free to file an issue for SASS if you'd like to track the progress. https://github.com/calebegg/codewich https://github.com/calebegg/codewich

AtheistOfFail 10y ago

This is quite possibly the coolest thing I've seen so far. I would be quite happy if you added some collaboration controls (give read access without giving write access) because I could use this for a lot of our training. I just put together a websocket demo for anyone who wants some live documentation on how to integrate actioncable-js with their non-actioncable enabled application for client-side updates -> https://codewich.com/#v1,,,bVHLTuMwFGWNxD9YHiQSiTriMSwKqdTpADugKozEbEaObRIziR18b0ijqv.OnVSIonpl.7x8j_f2rkA4XSMBJ1JaINYwThLH21wjE7ZKqpaXUCiXcIHaGsGzUo1eIak4oL.VGnAD_esx9gp0cpUMrpOD_Y3_wT7ZjhBWeu5bo1zX5wzb0Rk7ZSes0ib4BJE2qHKnsUspFPz058WoaPPzHJb5zd_iHq6veSXvn29_vZyc3XTzRj.25XSeL_8s7nI8T3sL4SyAdTrXJqXcWNNVttn5ykmgE3IYSSuaShmMmVNcdtFLY_oZo3g1UMJqtZG2ZdO6JilZrXcBrO_Ew9NePusbEt4T1cwa8Bkuoi2EQuomY5lGQOtVNmlVBlb8V0jjy93OpYdnBTdGlT7geyaDJhuG8rmwyYxWYhCMCX1wWqiNnh4T0TinjOjG5Ohp8ftofUy.TBqWU0LpdyXH5LMMyZHH33lDgfRHAGnMUC1xIG7TvtS1ji_JcFqHWbe.peaGaJnS3i38mL.YfAA https://codewich.com/#v1,,,bVHLTuMwFGWNxD9YHiQSiTriMSwKqdTpA...