Editing code in the browser may make limited sense if the code is going to run in that same browser. However, why I would want to edit “on the web”, losing all my local utilities and more, escapes me.
This “do EVERYTHING in your browser” fad has gone far enough. We have the most powerful desktop gear ever but every blinking of the cursor has to be done by a remote service?
Sadly, it's not anywhere on the page text but the <title> makes it clear: “for learners and educators”
This makes a TON of sense for those groups where someone doesn't spend half of their class time walking people through installing and configuring apps, dealing with whatever weird system customizations they've made, etc. Every time I've helped at a tutorial, that's been a big problem with some people never getting fully up and running in time.
Instead, it's “click this link” and you're actually in the class, with the ability to have pre-canned examples and starting points ready to go without also having to cover things like version control first.
That's great, but as someone who writes a whole bunch of PoC code and demonstrator articles, this is literally the thing I've been waiting all these years for. I don't need "tooling" beyond a good editor with dynamic extensions, which this is: it's just Adobe's "Brackets" code editor, made to run in the browser, with an automatic live server so I can immediately see what's happening instead of having a text editor, terminal, and browser open. I'm a professional web dev, and the _fewer_ tools I need to do what I love, the more I'm going to stick with whoever can offer me that.
It won't let me write node.js style code right now, but then they just completely rewrote this from a pretty simple jsbin-alike (single file, live preview, friendly error reporting, that was it) to a full blown Brackets with an in browser POSIX file system that automatically syncs on file changes. It's both insane and beautiful, and I'm already finding myself firing it up instead of jsbin or jsfiddle or codepen, and having far more fun because I have a full editor under my finger tips.
Reading through http://blog.humphd.org/thimble-and-bramble, which explains the whole thing in a level of detail that doesn't belong on the front page, is fascinating, and might make you acknowledge that there's definitely a place for this kind of thing on the web, and that there are plenty of people who would have loved to have something like this from day one.
I mean, come on: if this is their MVP launch, imagine what this thing can do in a few months or even a year.
Could not agree more. However you do realize that this is a favorite idea of the founders of YC? PG and RM's company was based around it. Recently someone posted a video of an interview with PG and he seemed absolutely enamoured with a more recent "cloud" company that did the same thing. He thought it was cool that the code entered on the screen never for a moment was saved on the author's own computer.
I use my browser to browse. And that's all. This allows the browser to be smaller, faster, less complex, and, if it matters, more secure.
In addition to what others have said. I'll add that some environments (Tablet, Phone, Watch, Set Top Box) are more restrictive than others (try porting a cpp app to Android sometime). Also, some systems might be missing some required libraries or have incompatible versions of those libraries (try porting a cpp app to Android some time).
Contrast that to just loading up a page on a browser.
Although I can understand your point of view, you must understand that creating a web based editor or IDE ( like Thimble ) has a ton of advantages. One being it helps people learn to code.
It helps them in this because they don't have to install and editor, they don't have to configure it and best of all the don't have to install and configure their development environment. All a user has to do is sign in, pick a language and start coding, it literally takes less then a minute.
Also the fact that they can collaborate in real time and get help from a friend, is not a small feature to have for them.
Although this may not sound appealing to you...their are many people where these features will make or break their initiative to start coding.
Disclaimer: I am the founder of the Cloud IDE - Codeanywhere.com
You really can do almost everything in the browser there - the (remarkably solid) editor plugs into an actual terminal on a VM, with full build tools, deployment integrations, etc.
Auto-update preview on edit, preview highlight of elements selected in code, desktop/mobile preview, all seem to work well. No other options, bells or whistles. I like the fact it does one thing well.
I just tried out some of my favorite shortcuts I know from Sublime (I'm not saying Sublime invented these, just that I only came to know them through using it) and found them all to work:
- Move lines up/down with ctrl+shift+up/down
- Cut an entire line (ctrl+x)
- Multiple cursors (ctrl+alt+up/down)
- Comment the current line/selection (ctrl+'/')
- Delete the current line (shift+delete)
- Indent/dedent the current line/selection (ctrl+'['/']')
Still looking for the bindings to jump to matching braces/parens and to select the innermost block, but I'm sold. I'll be using this
http://blog.humphd.org/thimble-and-bramble/ explains the tech behind all of it - it's literally just the Brackets editor, so virtually all shortcuts from Brackets will work in Thimble.
I used Coder for Raspberry Pi [0] when teaching my eight year old nephew how to code and it worked very well. This seems like an easier-to-setup substitute, well done! Can't have enough tools like this for those learning.
I can see this being useful if I want to work on some little projects from various locations. My current list of "active" computers are the following:
- Work laptop (Dell workstation)
- Home Windows laptop (Primarily for gaming)
- Chromebook Pixel (Chrome OS / Ubuntu)
And of course, each one has its own editor that I use while I'm on them due to the varying OS's--Notepad++ on the Windows laptops, Caret when I'm in ChromeOS, SublimeText when I'm on the Ubuntu partition.
Assuming I just want to work on some small educational projects that don't involve committing to my Github, being able to simply pull up an IDE in the browser and just start coding away could be useful, particularly while I'm at work. Work usually seems to be where I get most of my sudden cravings to start learning new things anyway (probably because my day job is so repetitive).
Online editors are a great idea but I usually DON'T use them for the following reason.
1) Lag. I hate it when I type and I see any kind of lag. After decades of quick response on typing anything out of a few ms makes me think something is wrong with my computer.
2) Work flow change. Can't use git and I do like my text editor of choice.
3) I can't write a script to do things to files like I can locally. I love scripting dumb task and use whatever language I use.
4) My language isn't supported normally. I love syntax highlighting personally.
I've been using it while they were gearing up to MVP and I can dispel some of those:
1) there is none. It's about as fast as PostMessage can pump data into an iframe, so it's _much_ faster than something like live-server, and because it watches file changes faster than something like webpack, it even seems a touch faster than webpack-hotreload (although their MVP can't do hotswapping of individual files yet)
2) fair point! I've found this great for PoC and article work. Just creatively write some code, polish it a little until it's good enough to treat as a first push for a new repo, and then export the filesystem as a zip so I can push it up to git later. That said, I _have_ already made some things of which I thought I was going to put it on git, but then just kept working on in Thimble instead because there wasn't actually any reason to put it on git: The code's already accessible because everyone can hit "remix" and I don't need to deal with gh-pages branches because the project's autohosted for free =)
3) not sure this one applies, since it's explicitly for building web content. It's an MVP atm so base html, css, javascript, fonts, etc. all work, and things like coffee script or JSX just require you to add a transformer library the way you'd do if you weren't bundling code. No complaints on that so far (might change, but I'm pretty cool with what it does right now)
4) which one? http://blog.humphd.org/thimble-and-bramble explains that this is literally just the Brackets code editor, running in the browser, and pretty much any Brackets extension will work with it, so if you can find your favourite syntax highlighter and file an issue against https://github.com/humphd/brackets to have it added to the default set, problem solved!
Education is a fantastic application for this - there are lots of nice touches, like highlighting elements of the DOM in the preview window when you click on them in the editor. The code completion also pops up lots of options for tags and attributes which could make exploring a lot easier for young students.
I'm also excited to use it for doing technical interviews with front-end devs. Curious to see how it stacks up with Codepen, JSFiddle, etc.
Looks amazing for people who want to learn web development. Text editor (with dark theme) , preview , list of files and help builtin all in the same window.
Shouldn't people who want to learn web development use the workflow and tools of professional web developers? And since these tools are free, I don't see the case for Thimble.
I'm the creator of http://plnkr.co/edit/ which is a similar (but perhaps less 'professional') online web editor.
One thing that I find interesting is that Mozilla has decided that browsers have moved forward far enough that hosting the preview via `blob:` urls. I've experimented with a similar approach but had issues where different 3rd party libraries die unexpectedly when they are not dealing with http / https.
Funny how the X11 "Fixed" bitmap font [0] is chosen as the default font on my system. This appears to be caused by 'fixed' being set as a fallback font instead of 'monospace', which, on most systems, is an alias for the default monospace font which is usually an antialiased one.
* highlight to copy is broken (I assume because the source is not first-class text and they manipulate the clipboard with JS)
* failing to close the last list item in a ul causes the preview window to stop updating and highlights the next line in the editor but doesn't provide any indication of what is wrong
This is definitely not going to be sufficient for professional programming or web development but it looks and performs far better than similar projects I've seen in the past.
Yeah I ran into that first one too. It actually works, but not via context menu. The ctrl/cmd-c keyboard shortcut works fine, but the Brackets context menu seems to not have it...
Agreed that it won't be the tool that professional devs will use to "do their job", but I'm a professional dev, and I've been using it for a while now for my "just for fun" stuff, and loving it. It takes almost no time at all to do even really funky "what the hell are you even doing??" stuff like this: https://d157rqmxrxj6ey.cloudfront.net/mopaxian/817/
Looks interesting but I wonder how it fares with more complex websites? The changes he made in the video amounted to editing static tags and css colours to see realtime changes - but what if a javascript function is used to add elements on page startup? Or a js library is used to load a twitter feed?
You have to put Thimble into context. It's a tool for teaching basic Web skills to people new to the field, and part of the Mozilla Learning initiative[0].
I'm not sure it's intended for actual development.
This reminds me of an online code editor at this clothing store shop solution that allowed people to easily make shopping carts and customize it to an extent. Does anyone remember what they were called?
This is pretty awesome though I would like to see the ability to pull in JS and CSS libraries and frameworks into a project. This could gear some tutorials around certain technologies.
[+] [-] tempodox|10 years ago|reply
This “do EVERYTHING in your browser” fad has gone far enough. We have the most powerful desktop gear ever but every blinking of the cursor has to be done by a remote service?
[+] [-] acdha|10 years ago|reply
This makes a TON of sense for those groups where someone doesn't spend half of their class time walking people through installing and configuring apps, dealing with whatever weird system customizations they've made, etc. Every time I've helped at a tutorial, that's been a big problem with some people never getting fully up and running in time.
Instead, it's “click this link” and you're actually in the class, with the ability to have pre-canned examples and starting points ready to go without also having to cover things like version control first.
[+] [-] TheRealPomax|10 years ago|reply
It won't let me write node.js style code right now, but then they just completely rewrote this from a pretty simple jsbin-alike (single file, live preview, friendly error reporting, that was it) to a full blown Brackets with an in browser POSIX file system that automatically syncs on file changes. It's both insane and beautiful, and I'm already finding myself firing it up instead of jsbin or jsfiddle or codepen, and having far more fun because I have a full editor under my finger tips.
Reading through http://blog.humphd.org/thimble-and-bramble, which explains the whole thing in a level of detail that doesn't belong on the front page, is fascinating, and might make you acknowledge that there's definitely a place for this kind of thing on the web, and that there are plenty of people who would have loved to have something like this from day one.
I mean, come on: if this is their MVP launch, imagine what this thing can do in a few months or even a year.
[+] [-] stabilo|10 years ago|reply
I use my browser to browse. And that's all. This allows the browser to be smaller, faster, less complex, and, if it matters, more secure.
[+] [-] joelthelion|10 years ago|reply
[+] [-] bobajeff|10 years ago|reply
Contrast that to just loading up a page on a browser.
[+] [-] ivan_burazin|10 years ago|reply
It helps them in this because they don't have to install and editor, they don't have to configure it and best of all the don't have to install and configure their development environment. All a user has to do is sign in, pick a language and start coding, it literally takes less then a minute.
Also the fact that they can collaborate in real time and get help from a friend, is not a small feature to have for them.
Although this may not sound appealing to you...their are many people where these features will make or break their initiative to start coding.
Disclaimer: I am the founder of the Cloud IDE - Codeanywhere.com
[+] [-] zyxley|10 years ago|reply
You really can do almost everything in the browser there - the (remarkably solid) editor plugs into an actual terminal on a VM, with full build tools, deployment integrations, etc.
[+] [-] omouse|10 years ago|reply
[+] [-] cadecairos|10 years ago|reply
http://blog.humphd.org/thimble-and-bramble/
[+] [-] hliyan|10 years ago|reply
[+] [-] hmsimha|10 years ago|reply
[+] [-] TheRealPomax|10 years ago|reply
[+] [-] paulojreis|10 years ago|reply
[+] [-] netghost|10 years ago|reply
[+] [-] ohitsdom|10 years ago|reply
[0] https://googlecreativelab.github.io/coder/
[+] [-] AdmiralAsshat|10 years ago|reply
- Work laptop (Dell workstation)
- Home Windows laptop (Primarily for gaming)
- Chromebook Pixel (Chrome OS / Ubuntu)
And of course, each one has its own editor that I use while I'm on them due to the varying OS's--Notepad++ on the Windows laptops, Caret when I'm in ChromeOS, SublimeText when I'm on the Ubuntu partition.
Assuming I just want to work on some small educational projects that don't involve committing to my Github, being able to simply pull up an IDE in the browser and just start coding away could be useful, particularly while I'm at work. Work usually seems to be where I get most of my sudden cravings to start learning new things anyway (probably because my day job is so repetitive).
[+] [-] baldfat|10 years ago|reply
1) Lag. I hate it when I type and I see any kind of lag. After decades of quick response on typing anything out of a few ms makes me think something is wrong with my computer.
2) Work flow change. Can't use git and I do like my text editor of choice.
3) I can't write a script to do things to files like I can locally. I love scripting dumb task and use whatever language I use.
4) My language isn't supported normally. I love syntax highlighting personally.
[+] [-] TheRealPomax|10 years ago|reply
1) there is none. It's about as fast as PostMessage can pump data into an iframe, so it's _much_ faster than something like live-server, and because it watches file changes faster than something like webpack, it even seems a touch faster than webpack-hotreload (although their MVP can't do hotswapping of individual files yet)
2) fair point! I've found this great for PoC and article work. Just creatively write some code, polish it a little until it's good enough to treat as a first push for a new repo, and then export the filesystem as a zip so I can push it up to git later. That said, I _have_ already made some things of which I thought I was going to put it on git, but then just kept working on in Thimble instead because there wasn't actually any reason to put it on git: The code's already accessible because everyone can hit "remix" and I don't need to deal with gh-pages branches because the project's autohosted for free =)
3) not sure this one applies, since it's explicitly for building web content. It's an MVP atm so base html, css, javascript, fonts, etc. all work, and things like coffee script or JSX just require you to add a transformer library the way you'd do if you weren't bundling code. No complaints on that so far (might change, but I'm pretty cool with what it does right now)
4) which one? http://blog.humphd.org/thimble-and-bramble explains that this is literally just the Brackets code editor, running in the browser, and pretty much any Brackets extension will work with it, so if you can find your favourite syntax highlighter and file an issue against https://github.com/humphd/brackets to have it added to the default set, problem solved!
[+] [-] csharpminor|10 years ago|reply
I'm also excited to use it for doing technical interviews with front-end devs. Curious to see how it stacks up with Codepen, JSFiddle, etc.
[+] [-] mariusmg|10 years ago|reply
[+] [-] lostInTheWoods3|10 years ago|reply
[+] [-] shabinesh|10 years ago|reply
{"statusCode":400,"error":"Bad Request","message":"\"uid\" is not allowed","validation":{"source":"query","keys":["uid"]}}
[+] [-] ickwabe|10 years ago|reply
e.g. https://id.webmaker.org/login?client_id=wm_id_wMvw9BSwq2A480...
If you try to login just from https://id.webmaker.org/login you will get the error you saw.
[+] [-] aaaaaa11|10 years ago|reply
[+] [-] filearts|10 years ago|reply
One thing that I find interesting is that Mozilla has decided that browsers have moved forward far enough that hosting the preview via `blob:` urls. I've experimented with a similar approach but had issues where different 3rd party libraries die unexpectedly when they are not dealing with http / https.
[+] [-] flannelhead|10 years ago|reply
Otherwise the editor seems to work very nicely.
[0] https://en.wikipedia.org/wiki/Fixed_%28typeface%29
[+] [-] TheRealPomax|10 years ago|reply
[+] [-] silentOpen|10 years ago|reply
* highlight to copy is broken (I assume because the source is not first-class text and they manipulate the clipboard with JS)
* failing to close the last list item in a ul causes the preview window to stop updating and highlights the next line in the editor but doesn't provide any indication of what is wrong
This is definitely not going to be sufficient for professional programming or web development but it looks and performs far better than similar projects I've seen in the past.
[+] [-] TheRealPomax|10 years ago|reply
The second one sounds like a pretty genuine bug, maybe worth filing over on https://github.com/mozilla/thimble.webmaker.org/issues ?
Agreed that it won't be the tool that professional devs will use to "do their job", but I'm a professional dev, and I've been using it for a while now for my "just for fun" stuff, and loving it. It takes almost no time at all to do even really funky "what the hell are you even doing??" stuff like this: https://d157rqmxrxj6ey.cloudfront.net/mopaxian/817/
[+] [-] ominous|10 years ago|reply
> [Brackets Filesystem] Unknown I/O error Object { name: "EFILESYSTEMERROR", code: "EFILESYSTEMERROR", errno: 1001, message: "unknown error", stack: "e@https://mozillathimblelivepreview…" }
[+] [-] coldtea|10 years ago|reply
But HN is not really Thimble's support forum though. That would be something like: https://support.mozilla.org/en-US/questions/new
[+] [-] hacker_9|10 years ago|reply
[+] [-] klez|10 years ago|reply
I'm not sure it's intended for actual development.
[0] https://teach.mozilla.org/
EDIT: forgot the link
[+] [-] rkercz|10 years ago|reply
[+] [-] _RPM|10 years ago|reply
[+] [-] blorenz|10 years ago|reply