8 ms·

Thinkserver: My web-based coding environment

242 points by ColinWright 2y ago

grimui 2y ago
Building custom tools that work for only you is so under rated. I would never use that workflow but it works for the author and that’s awesome!
- NitpickLawyer 2y ago
  > Building custom tools that work for only you is so under rated. This is one of the top applications for LLM-based dev IMO. With things like aider / cline / cursor / windsurf / bolt it's looking like this will be a lot easier to scaffold small-scale projects that make sense for you and not necessarily turn into products. It suits single-dev / small teams for now, and that's OK.
  - joshstrange 2y ago
    This has been my experience as well. I find my much more likely to “build” it myself versus using something off the shelf because it’ll give me full control over the project. A lot of the reasons I would pull in dependencies for are things I’m either not good at or not fast at writing and in most cases LLMs are good at picking up the slack. It’s been a joy to write the core logic then have an LLM throw a web GUI frontend together for me so I can iterate faster.
tomglynch 2y ago
I’m a big fan of glitch as well, so it’s very impressive you have built the same yourself. Do you self host the server and are there any limitations on languages you can use?
lvturner 2y ago
I've recently discovered the joys of vscode-server[0] for this type of use case. Which you can either serve as a WebApp direct from your machine, or tunnel in from another VSCode instance - including a webhosted version from Microsoft[1] I may not do that much coding these days, but I already have found it handy for when I forgot to do a Git push! Just log back in to the Web Environment and everything is how I left it. [0] https://code.visualstudio.com/docs/remote/vscode-server https://code.visualstudio.com/docs/remote/vscode-server [1] https://vscode.dev/ https://vscode.dev/
- notpushkin 2y ago
  There’s also code-server by Coder, which you can just run on your own server and open in browser directly. It’s also open source (most tunneling features in VSCode aren’t). https://github.com/coder/code-server https://github.com/coder/code-server There’s a one-click setup for it in Lunni, a Docker dashboard I’ve been working on (shameless plug): https://lunni.dev/ https://lunni.dev/
  - BOOSTERHIDROGEN 2y ago
    As someone who doesn't code professionally, what is the primary use case that leads to significant daily enhancements for developers?
    - lvturner 2y ago
      This is a multifaceted question, because there isn't one use case, it depends on who you are. If you are somewhat nomadic and always moving systems, having a "home" you can dial back to and pick up where you left off from is a massive boon (with a remote system like this, my phone is now powerful enough to do pretty much any development task as now it's just rendering the front end and not doing real heavy lifting) If you're an enterprise programmer working on locked down networks and devices with more end point protection tools than endpoints, an unencumbered authorized system with access to the right network assets, as well as standardized and project specific tooling is the difference between coding and coding with one arm tied behind your back and a blindfold on. (actually the benefits for enterprise are many and not just DevEx -- think security, network admin, vendor access, governance, AI rollout, reduction in project specific on-boarding documentation....) I'm sure there are many other use cases, though these are just the immediate ones that spring to mind.
      - BOOSTERHIDROGEN 2y ago
        I appreciate the commentary; it provided a helpful overview of the use case.
  - 2y ago
gyomu 2y ago
This is awesome. I’ve also built a number of services for myself (Pinterest style photo hosting for archival/research purposes, analytics service for my websites, tracker for the books I’ve read, message board for micro communities I’m a part of, etc). I also share them with friends who express interest in them. The costs are minimal (they all run on a shared $4/mo instance + $10/yr domain per project) and I get to control where the data lives, the features I want to have, etc. No need to worry about getting the rug pulled on me because the company got acquired or needs to raise revenue or anything like that. No frustration because a redesign made the UI worse or removed features I cared about. It obviously takes a bit of time upfront, but I see it as a long term investment in my productivity. I use boring, basic, stable technologies so once something is deployed it keeps on humming with extremely minimal involvement on my behalf. I’m basically slowly working on replacing pretty much every 3rd party app I use with something I wrote myself (it’s going to take a while but that’s okay). My grandpa was a carpenter and pretty much every piece of furniture in the house was something he or his friends had made. As software craftspeople, we should strive to do the same with our digital houses. Kudos to the author and anyone else who does this. You don’t hear about these things in the mainstream because there’s no reason for people doing this to shout it from the rooftops, but this is software at its best.
- eGQjxkKF6fif 2y ago
  For the love of technology, and the love of coding, and the love of self hosting, good. This is the way.
- mdrzn 2y ago
  Same. Since Claude 3.5 Sonnet has been released I've been building a lot of "microservices" that are just useful to me, or Chrome Extensions that I've seen that I just recreated using Cursor. Awesome learning experience and now I can customize them as needed.
  - ffsm8 2y ago
    I think you mean that you've been building a lot of simple applications? Because that's not really what microservices are. I mean sure it's just a word and HN especially loves to spit on original definitions, but it is always kinda jarring to hear these technical terms in settings that have pretty much no overlap with the original definition.
cies 2y ago
Nice to see another Elm enthusiast! You must know about Ellie, right? https://ellie-app.com https://ellie-app.com It does not have git integration like your project though. Anyway, nice project!!
fodkodrasz 2y ago
Nice. One thing I couldn't unsee: The editor and the preview panels seem to have their bottoms misaligned by 1-2px.
janoelze 2y ago
nice work! very similar to the scrappy codepen clone i built for myself, will copy a few things! I've integrated AI edits and use it suprisingly often as well to sketch out mini apps. https://endtime-instruments.org/scratch/ https://endtime-instruments.org/scratch/
- nbbaier 2y ago
  This is really cool! I love the AI touch. Is the code open source?
smokel 2y ago
This might be a serious problem for tinkering platforms such as Glitch and Kinopio [1]. They are awesome, but they strongly inspire me to take creativity just a little step further and build my own implementation. This then leads to a fragmented landscape of such services, and none gets enough traction to grow into seriously sustainable popularity. [1] https://kinopio.club/ https://kinopio.club/
- rambambram 2y ago
  Just build it for yourself and don't feel bad about not being a startup founder or something. I know it feels a little weird and it takes some adjustment time, but don't compare the joy of building software for yourself to business yardsticks. That stuff won't match anyway.
bob1029 2y ago
Fantastic. This is something I've thought about doing too. There are days where visual studio's shenanigans make me consider the benefits of a bespoke web based UI very strongly. With libraries like ace and codemirror available, the hard part is mostly on the server with managing state and integrating tools. I use C#/.NET for everything, so I'd lean on the Roslyn APIs to handle code completion, reference tracking, workspaces, debugging, etc.
dented42 2y ago
This is so reminiscent of doing web development in smalltalk with seaside.
- genewitch 2y ago
  Every time I see a smalltalk comment I hope to see a reply along the lines of > I've been maintaining a Smalltalk compiler, <URL> But alas. I wonder how hard it is to get a copy of the spec...
  - skydhash 2y ago
    It’s a VM you need. Not a compiler. The Pharo Project’s VM [0] is in C, and not that extensive. Most of the good stuff is written in smalltalk. [0]: https://github.com/pharo-project/pharo-vm https://github.com/pharo-project/pharo-vm
  - igouy 2y ago
    https://github.com/Cuis-Smalltalk/Cuis-Smalltalk-Dev https://github.com/Cuis-Smalltalk/Cuis-Smalltalk-Dev Download and search !Compiler in: ./Cuis7-0-main/CuisImage/Cuis7.0.sources :and you'll see the commented Compiler class source code: "The compiler accepts Smalltalk source code and compiles it with respect to a given class. The user of the compiler supplies a context so that temporary variables are accessible during compilation." It would be easier to install Cuis Smalltalk and use the Smalltalk browsers to explore the Compiler code.
devdri 2y ago
Like other folks here I also made something similar for myself. It started as a jsbin clone, but then I wanted to play with tweaking the environment itself. So now it's become a single editable directory tree where both the editor and the actual projects/demos share common parts of code, all synced between local storage and the server. If I break the editor and refresh the page, there's a simpler alternative editor backup to fix it. Lots of fun with such setup! Here's a screenshot with the editor showing a preview when editing itself: https://imgur.com/a/RxMCrlf https://imgur.com/a/RxMCrlf
kostuxa 2y ago
I found it so useful
pomdtr 2y ago
This looks fantastic, I'll make sure to try it! I've been working on a similar platform (https://smallweb.run https://smallweb.run), which allows me to host all my side projects from a single root folder. Each subfolder automatically becomes a subdomain, and I can just use vscode remote ssh or mutagen to live edit my websites.
- diggan 2y ago
  > and I can just use vscode remote ssh or mutagen to live edit my websites What is old is new again :) Back when I started development, we did this via git remotes, and some projects even did what you created and created environments mapped from git remotes to apps running with subdomains (like Dokku is probably the first/most memorable FOSS service for this back in the day). And before that, I'm sure people were doing the same thing with Java WARs or similar, and before that, something else but similar.
  - pomdtr 2y ago
    Yeah dokku is an inspiration! The main difference is that smallweb use deno instead of docker for sandboxing apps, and leverages url imports (which can be used to distribute complex apps like VS Code): ``` import { VSCode } from "jsr:@smallweb/vscode@0.1.7" const vscode = new VSCode({ rootDir: Deno.env.get("SMALLWEB_DIR") }); export default vscode; ``` You can play with a live instance of smallweb at https://demo.smallweb.live https://demo.smallweb.live
    - diggan 2y ago
      > The main difference is that smallweb use deno instead of docker for sandboxing apps Yeah, a single-runtime (smallweb) instead of any language (dokku) + I'd probably say the avoidance of using git for the delivery would be the two biggest differences I can glance.
      - pomdtr 2y ago
        Yeah, I see smallweb as a playground. I want to "develop in prod", not rely on successives git pushes to see changes. If I need semantic releases, I publish the dev version as a package on jsr, and I then import it from the "prod" app. I still uses github as way to store my apps though, you can find them at https://github.smallweb.run https://github.smallweb.run
research-studio 2y ago
Oh wow! And I did not expect to click on this and see a Tyne & Wear Metro project. I can see why you may have wanted to create one though. Good luck with it!
varun_ch 2y ago
This is seriously awesome! I made something extremely similar called Dock'n'Roll, but this looks far more polished. I think we should make our own tools more often. https://varun.ch/projects/dockn https://varun.ch/projects/dockn
anildash 2y ago
Christian's been an awesome Glitch community member for a long time; I had caught Thinkserver when he first posted about it the other day. Generally, over the last 7 or 8 years we've seen super users be inspired to make their own tools like this every few months and it's great! Every single one has good ideas and brings new things to the table, and also there's a lot to learn from the overall trends. (Like, in this case, support for coding on phones, where we're still not very strong.) The other takeaway I got from his original blog post is a little bit of that trepidation you get when you put this stuff out there, where it can be a little nerve-wracking, because you don't want folks to rip it apart or file a million bug reports. fwiw I'm glad folks are being mostly chill about it.
jackeilles 2y ago
Fair bit of whiplash seeing my local metro system on one of the examples haha, Tyne and Wear metro FTW!
indigodaddy 2y ago
Very cool. Caddy in front with some basic auth and off I go on the internetz?
rbanffy 2y ago
For a second I thought this was about using a Lenovo server... Damn names...

242 points by ColinWright 2y ago

Building custom tools that work for only you is so under rated. I would never use that workflow but it works for the author and that’s awesome!

NitpickLawyer 2y ago
> Building custom tools that work for only you is so under rated. This is one of the top applications for LLM-based dev IMO. With things like aider / cline / cursor / windsurf / bolt it's looking like this will be a lot easier to scaffold small-scale projects that make sense for you and not necessarily turn into products. It suits single-dev / small teams for now, and that's OK.
- joshstrange 2y ago
  This has been my experience as well. I find my much more likely to “build” it myself versus using something off the shelf because it’ll give me full control over the project. A lot of the reasons I would pull in dependencies for are things I’m either not good at or not fast at writing and in most cases LLMs are good at picking up the slack. It’s been a joy to write the core logic then have an LLM throw a web GUI frontend together for me so I can iterate faster.

tomglynch 2y ago

I’m a big fan of glitch as well, so it’s very impressive you have built the same yourself. Do you self host the server and are there any limitations on languages you can use?

lvturner 2y ago

I've recently discovered the joys of vscode-server[0] for this type of use case. Which you can either serve as a WebApp direct from your machine, or tunnel in from another VSCode instance - including a webhosted version from Microsoft[1] I may not do that much coding these days, but I already have found it handy for when I forgot to do a Git push! Just log back in to the Web Environment and everything is how I left it. [0] https://code.visualstudio.com/docs/remote/vscode-server https://code.visualstudio.com/docs/remote/vscode-server [1] https://vscode.dev/ https://vscode.dev/

notpushkin 2y ago
There’s also code-server by Coder, which you can just run on your own server and open in browser directly. It’s also open source (most tunneling features in VSCode aren’t). https://github.com/coder/code-server https://github.com/coder/code-server There’s a one-click setup for it in Lunni, a Docker dashboard I’ve been working on (shameless plug): https://lunni.dev/ https://lunni.dev/
- BOOSTERHIDROGEN 2y ago
  As someone who doesn't code professionally, what is the primary use case that leads to significant daily enhancements for developers?
  - lvturner 2y ago
    This is a multifaceted question, because there isn't one use case, it depends on who you are. If you are somewhat nomadic and always moving systems, having a "home" you can dial back to and pick up where you left off from is a massive boon (with a remote system like this, my phone is now powerful enough to do pretty much any development task as now it's just rendering the front end and not doing real heavy lifting) If you're an enterprise programmer working on locked down networks and devices with more end point protection tools than endpoints, an unencumbered authorized system with access to the right network assets, as well as standardized and project specific tooling is the difference between coding and coding with one arm tied behind your back and a blindfold on. (actually the benefits for enterprise are many and not just DevEx -- think security, network admin, vendor access, governance, AI rollout, reduction in project specific on-boarding documentation....) I'm sure there are many other use cases, though these are just the immediate ones that spring to mind.
    - BOOSTERHIDROGEN 2y ago
      I appreciate the commentary; it provided a helpful overview of the use case.
- 2y ago

gyomu 2y ago

This is awesome. I’ve also built a number of services for myself (Pinterest style photo hosting for archival/research purposes, analytics service for my websites, tracker for the books I’ve read, message board for micro communities I’m a part of, etc). I also share them with friends who express interest in them. The costs are minimal (they all run on a shared $4/mo instance + $10/yr domain per project) and I get to control where the data lives, the features I want to have, etc. No need to worry about getting the rug pulled on me because the company got acquired or needs to raise revenue or anything like that. No frustration because a redesign made the UI worse or removed features I cared about. It obviously takes a bit of time upfront, but I see it as a long term investment in my productivity. I use boring, basic, stable technologies so once something is deployed it keeps on humming with extremely minimal involvement on my behalf. I’m basically slowly working on replacing pretty much every 3rd party app I use with something I wrote myself (it’s going to take a while but that’s okay). My grandpa was a carpenter and pretty much every piece of furniture in the house was something he or his friends had made. As software craftspeople, we should strive to do the same with our digital houses. Kudos to the author and anyone else who does this. You don’t hear about these things in the mainstream because there’s no reason for people doing this to shout it from the rooftops, but this is software at its best.

eGQjxkKF6fif 2y ago
For the love of technology, and the love of coding, and the love of self hosting, good. This is the way.
mdrzn 2y ago
Same. Since Claude 3.5 Sonnet has been released I've been building a lot of "microservices" that are just useful to me, or Chrome Extensions that I've seen that I just recreated using Cursor. Awesome learning experience and now I can customize them as needed.
- ffsm8 2y ago
  I think you mean that you've been building a lot of simple applications? Because that's not really what microservices are. I mean sure it's just a word and HN especially loves to spit on original definitions, but it is always kinda jarring to hear these technical terms in settings that have pretty much no overlap with the original definition.

cies 2y ago

Nice to see another Elm enthusiast! You must know about Ellie, right? https://ellie-app.com https://ellie-app.com It does not have git integration like your project though. Anyway, nice project!!

fodkodrasz 2y ago

Nice. One thing I couldn't unsee: The editor and the preview panels seem to have their bottoms misaligned by 1-2px.

janoelze 2y ago

nice work! very similar to the scrappy codepen clone i built for myself, will copy a few things! I've integrated AI edits and use it suprisingly often as well to sketch out mini apps. https://endtime-instruments.org/scratch/ https://endtime-instruments.org/scratch/

nbbaier 2y ago
This is really cool! I love the AI touch. Is the code open source?

smokel 2y ago

This might be a serious problem for tinkering platforms such as Glitch and Kinopio [1]. They are awesome, but they strongly inspire me to take creativity just a little step further and build my own implementation. This then leads to a fragmented landscape of such services, and none gets enough traction to grow into seriously sustainable popularity. [1] https://kinopio.club/ https://kinopio.club/

rambambram 2y ago
Just build it for yourself and don't feel bad about not being a startup founder or something. I know it feels a little weird and it takes some adjustment time, but don't compare the joy of building software for yourself to business yardsticks. That stuff won't match anyway.

bob1029 2y ago

Fantastic. This is something I've thought about doing too. There are days where visual studio's shenanigans make me consider the benefits of a bespoke web based UI very strongly. With libraries like ace and codemirror available, the hard part is mostly on the server with managing state and integrating tools. I use C#/.NET for everything, so I'd lean on the Roslyn APIs to handle code completion, reference tracking, workspaces, debugging, etc.

dented42 2y ago

This is so reminiscent of doing web development in smalltalk with seaside.

genewitch 2y ago
Every time I see a smalltalk comment I hope to see a reply along the lines of > I've been maintaining a Smalltalk compiler, <URL> But alas. I wonder how hard it is to get a copy of the spec...
- skydhash 2y ago
  It’s a VM you need. Not a compiler. The Pharo Project’s VM [0] is in C, and not that extensive. Most of the good stuff is written in smalltalk. [0]: https://github.com/pharo-project/pharo-vm https://github.com/pharo-project/pharo-vm
- igouy 2y ago
  https://github.com/Cuis-Smalltalk/Cuis-Smalltalk-Dev https://github.com/Cuis-Smalltalk/Cuis-Smalltalk-Dev Download and search !Compiler in: ./Cuis7-0-main/CuisImage/Cuis7.0.sources :and you'll see the commented Compiler class source code: "The compiler accepts Smalltalk source code and compiles it with respect to a given class. The user of the compiler supplies a context so that temporary variables are accessible during compilation." It would be easier to install Cuis Smalltalk and use the Smalltalk browsers to explore the Compiler code.

devdri 2y ago

Like other folks here I also made something similar for myself. It started as a jsbin clone, but then I wanted to play with tweaking the environment itself. So now it's become a single editable directory tree where both the editor and the actual projects/demos share common parts of code, all synced between local storage and the server. If I break the editor and refresh the page, there's a simpler alternative editor backup to fix it. Lots of fun with such setup! Here's a screenshot with the editor showing a preview when editing itself: https://imgur.com/a/RxMCrlf https://imgur.com/a/RxMCrlf

kostuxa 2y ago

I found it so useful

pomdtr 2y ago

This looks fantastic, I'll make sure to try it! I've been working on a similar platform (https://smallweb.run https://smallweb.run), which allows me to host all my side projects from a single root folder. Each subfolder automatically becomes a subdomain, and I can just use vscode remote ssh or mutagen to live edit my websites.

diggan 2y ago
> and I can just use vscode remote ssh or mutagen to live edit my websites What is old is new again :) Back when I started development, we did this via git remotes, and some projects even did what you created and created environments mapped from git remotes to apps running with subdomains (like Dokku is probably the first/most memorable FOSS service for this back in the day). And before that, I'm sure people were doing the same thing with Java WARs or similar, and before that, something else but similar.
- pomdtr 2y ago
  Yeah dokku is an inspiration! The main difference is that smallweb use deno instead of docker for sandboxing apps, and leverages url imports (which can be used to distribute complex apps like VS Code): ``` import { VSCode } from "jsr:@smallweb/vscode@0.1.7" const vscode = new VSCode({ rootDir: Deno.env.get("SMALLWEB_DIR") }); export default vscode; ``` You can play with a live instance of smallweb at https://demo.smallweb.live https://demo.smallweb.live
  - diggan 2y ago
    > The main difference is that smallweb use deno instead of docker for sandboxing apps Yeah, a single-runtime (smallweb) instead of any language (dokku) + I'd probably say the avoidance of using git for the delivery would be the two biggest differences I can glance.
    - pomdtr 2y ago
      Yeah, I see smallweb as a playground. I want to "develop in prod", not rely on successives git pushes to see changes. If I need semantic releases, I publish the dev version as a package on jsr, and I then import it from the "prod" app. I still uses github as way to store my apps though, you can find them at https://github.smallweb.run https://github.smallweb.run

research-studio 2y ago

Oh wow! And I did not expect to click on this and see a Tyne & Wear Metro project. I can see why you may have wanted to create one though. Good luck with it!

varun_ch 2y ago

This is seriously awesome! I made something extremely similar called Dock'n'Roll, but this looks far more polished. I think we should make our own tools more often. https://varun.ch/projects/dockn https://varun.ch/projects/dockn

anildash 2y ago

Christian's been an awesome Glitch community member for a long time; I had caught Thinkserver when he first posted about it the other day. Generally, over the last 7 or 8 years we've seen super users be inspired to make their own tools like this every few months and it's great! Every single one has good ideas and brings new things to the table, and also there's a lot to learn from the overall trends. (Like, in this case, support for coding on phones, where we're still not very strong.) The other takeaway I got from his original blog post is a little bit of that trepidation you get when you put this stuff out there, where it can be a little nerve-wracking, because you don't want folks to rip it apart or file a million bug reports. fwiw I'm glad folks are being mostly chill about it.

jackeilles 2y ago

Fair bit of whiplash seeing my local metro system on one of the examples haha, Tyne and Wear metro FTW!

indigodaddy 2y ago

Very cool. Caddy in front with some basic auth and off I go on the internetz?

rbanffy 2y ago

For a second I thought this was about using a Lenovo server... Damn names...