
Show HN: Codewich – A live-updating TypeScript/CSS/HTML playground - calebegg
https://codewich.com/
======
calebegg
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
It was really fun to change some values in your Flocking script and see how
the particles react.

~~~
Arkeus
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.

------
WhitneyLand
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
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.

~~~
johnfn
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. :)

------
AtheistOfFail
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,,,bVHLTuMwFGWNxD9YHiQSiTriMSwKqdTpA...](https://codewich.com/#v1,,,bVHLTuMwFGWNxD9YHiQSiTriMSwKqdTpADugKozEbEaObRIziR18b0ijqv.OnVSIonpl.7x8j_f2rkA4XSMBJ1JaINYwThLH21wjE7ZKqpaXUCiXcIHaGsGzUo1eIak4oL.VGnAD_esx9gp0cpUMrpOD_Y3_wT7ZjhBWeu5bo1zX5wzb0Rk7ZSes0ib4BJE2qHKnsUspFPz058WoaPPzHJb5zd_iHq6veSXvn29_vZyc3XTzRj.25XSeL_8s7nI8T3sL4SyAdTrXJqXcWNNVttn5ykmgE3IYSSuaShmMmVNcdtFLY_oZo3g1UMJqtZG2ZdO6JilZrXcBrO_Ew9NePusbEt4T1cwa8Bkuoi2EQuomY5lGQOtVNmlVBlb8V0jjy93OpYdnBTdGlT7geyaDJhuG8rmwyYxWYhCMCX1wWqiNnh4T0TinjOjG5Ohp8ftofUy.TBqWU0LpdyXH5LMMyZHH33lDgfRHAGnMUC1xIG7TvtS1ji_JcFqHWbe.peaGaJnS3i38mL.YfAA)

------
startupdiscuss
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
[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
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-
maximu...](http://stackoverflow.com/questions/417142/what-is-the-maximum-
length-of-a-url-in-different-browsers)

------
Nadya
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
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)

------
paradite
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.

------
JohnnyConatus
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.

------
Nicksil
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
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
What do you mean by "the next feature you would logically want"?

~~~
beaconstudios
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
Yes, TS does have limits. Its still _very_ expressive compared to most
mainstream type systems.

------
tarr11
Cool, is this using the Monaco editor from VSCode?

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

------
DoctorOW
> It's similar to JSFiddle, JSBin, CodePen, and others

So then what's the benefit? Doesn't codepen support TS?

~~~
calebegg
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)

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

~~~
calebegg
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
ha :) good to know!

