Thimble – An online code editor | Hacker News Reader

Thimble – An online code editor

thimble.mozilla.org

194 pointstbassetto69 comments

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.

As someone who has taught JavaScript workshops in which 10% of the class wasted half the class trying to install Node & NPM just to set up a development server that could reliably serve static assets (the last thing I expected to be a problem), I can attest to the value of this.

Granted, plnkr.co probably would have worked just as well, but giving everybody a consistent (and persistent, and reasonably performant) dev environment in an educational setting makes a huge difference.

The more I realize how much students struggle with setting up tooling for development, the more I start to wonder if we need to start focusing more on that instead of trying to skip it.

When I first starting programming a lot of my difficulty and frustration was trying to get my free copy of Borland Turbo C++ running. Once I got a bit older and started to learn Linux and more fundamental things about operating systems, programming became a much easier because the additional tooling steps were much easier.

EDIT: It's certainly possible tooling will soon become a thing of the past, but judging by the trends and past experience, I do start to wonder if it's time to expect it as a necessary evil and start to handle if head on as opposed to trying to avoid it.

I really believe that it should be:

If you are struggling with getting your environment setup you need to take so and so class. There should be a class for just getting an environment setup and doing basic sys admin tasks.

Agreed. Some of these tasks are things where it's reasonable to expect people to learn concepts or specific tools but in many cases it's still overhead even if people have learned coping strategies.

Yes, I'm a cs professor and we just introduced an online, 1 credit "Software development tools" course for this reason. Students had so much trouble with this that it was really interfering with their course work.

Back in the old days, we'd have labs of computers with the software for the course pre-installed. Now that everyone has their own computer, I guess that doesn't make sense anymore, but software installation is still a problem.

At my university, some courses have started making virtual machines for students with all of the necessary software. This also turns out to be a problem because installing virtualbox or VMWare on a variety of laptops can be difficult for the course staff.

I totally agree. Even if we successfully build a future where we can have developers/designers jump right into their work without having to understand much about configuration/setup/etc we're still going to need people who do get it. This is great for education but I wonder how often a student will decide they love programming (when it's set-up like this) and then realize they hate it when confronted with all different systems and set-ups you generally have to deal with in the real world.

> This is great for education but I wonder how often a student will decide they love programming (when it's set-up like this) and then realize they hate it when confronted with all different systems and set-ups you generally have to deal with in the real world.

Maybe we should be working to improve the dev environments in the "real world" so that programmers can focus on programming?

What I'd really like to see is a strong focus on making the the default experience decent so many people can avoid needing to tinker but having some obvious directions to look in when you realize that you've outgrown the defaults.

A small example I'd use is the way the Python infrastructure around the package installer (pip) has improved over the last couple of years. Experienced developers used to have a ~/.pip.conf to set defaults like caching, timeouts, failover, etc. but it was a perennial hassle for newcomers. Since then, a lot of time has gone into removing the needs for that config (e.g. adding a CDN, making caching better and enabling it by default, etc.) which saves time for newcomers and means that experienced developers can stop maintaining another dotfile.

I just linked this to my girlfriend who's going to her first HTML intro class tonight. Seeing the immediate results of your experiments is not only satisfying but highly productive. Installing code editors and "cryptic acronyms" is a deterrent to learning programming.

If it wasn't for Thimble I would never have done anything locally. I wouldn't have been able to install Git.

I am an educator and a volunteer contributor to Mozilla Learning. I can honestly say that everything I have learned about HTML/CSS is due to using Thimble in my teaching for the last year and a half.

For my students, who are not in digital arts, computer science, or web design programs Thimble is a wonderful scaffold. This new version is even better.

If they get to the level where they are editing locally my students will now be able to download projects.

>> Sadly, it's not anywhere on the page text but the <title> makes it clear: “for learners and educators”

It is right on the front page: "Thimble is an online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript."

The text of the <title> element is not present anywhere on the page, even though there's plenty of room in the logo at the top element to expand it.

The “while learning” bit is a nice nod in that direction but it's in de-emphasized text at the end of a block (the only other text that small is the login link in the upper corner). Given the number of people who didn't get why the project exists at first, I would suggest that it should be more prominent. This could be as simple as changing the highlighted text “Write the Web On the Web” title to “Learn to Write the Web On the Web” so it doesn't give the impression that this is intended to be a general-purpose editor.

I think it can still be very useful for learning and teaching.

Not to mention lightweight machines like Chromebooks. I can actually see a web-only environment being very attractive, at least for web development.

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.

> Contrast that to just loading up a page on a browser.

well don't you need to write the app at first place ? there is a difference between loading an app and developing it.

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.

Most people think the web is static and uncontrollable by them. This just lets more people become makers of cool things. I'm alright with it.

Have you take a look at Cloud 9? https://c9.io

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.

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

This post helps explain the why and how of thimble really well. Recommended read!

http://blog.humphd.org/thimble-and-bramble/

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 was just doing some experiments and, while writing CSS selectors, the preview pane highlighted the matched elements. Pretty cool!

Yeah, I'm super impressed by the element matching both when editing HTML and CSS. Plus the autocomplete for CSS was a nice touch.

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.

[0] https://googlecreativelab.github.io/coder/

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.

Installing and setting up all of those tools takes time and effort, and there usually aren't great step-by-step guides for "Here's all the tools you need and how to set them up to work together".

Compare this to just logging into a website.

As a professional web dev: dude, this is what I wish I had five years ago. Categorically no: teach people using the fewest amount of tools needed to get cool shit written and working. Then, when they hit the limits (IF they hit the limits) of that single "get shit done" tool, have them branch out to the more complex stuff.

I ended up in this when trying to signup. :/

{"statusCode":400,"error":"Bad Request","message":"\"uid\" is not allowed","validation":{"source":"query","keys":["uid"]}}

It wold appear you must use the Login link at the top-right of https://thimble.mozilla.org/. That sends you to a login page with a bunch of extra parameters after the https://id.webmaker.org/login?.

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.

I don't think texteditors are supposed to hog a whole core of a quadcore cpu.

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.

Otherwise the editor seems to work very nicely.

[0] https://en.wikipedia.org/wiki/Fixed_%28typeface%29

One cool thing is that this is a Mozilla project, which means it's open source, and it's even on Github: probably worth filing that over on https://github.com/mozilla/thimble.webmaker.org

Done. Thanks for the reminder.

I ran across a couple of issues:

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

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/

Using Firefox 40.0.3 I can't create a new project. Even after registering. js console says:

> [Brackets Filesystem] Unknown I/O error Object { name: "EFILESYSTEMERROR", code: "EFILESYSTEMERROR", errno: 1001, message: "unknown error", stack: "e@https://mozillathimblelivepreview…" }

Obviously there will be lots of bugs.

But HN is not really Thimble's support forum though. That would be something like: https://support.mozilla.org/en-US/questions/new

HN users usually reply to these kind of posts with their first experience using the product being shared, I was just following a trend, in case someone happened to know what this kind of error means.

In particular, I saw 'EFILESYSTEMERROR' and thought maybe I set some Firefox preference too strict, and some of you could be familiar with the error.

But you are right, the best way to get this fixed/understood is probably by contacting the devs/support for the product.

Yeah, you're right, it does happen and sometimes people can help here.

It just sometimes bugs me though that posts about some new product/lib etc are often sidetracked with bug reports, and oftentimes for some obscure setup ("doesn't work for me on IE6", "I have Chrome Canary and it blows", 'doesn't run in NetBSD", "doesn't work with NoScript" etc).

(Then there's the evergreen: "I cannot see past the first slide of this presentation, clicking does nothing etc." ("have you tried pressing the keyboard arrows?").

Maybe rather https://support.mozilla.org/en-US/kb/how-do-i-report-thimble...

It's a Mozilla Foundation open source project, hosted on github, so it's probably more worth looking at https://github.com/mozilla/thimble.webmaker.org

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.

[0] https://teach.mozilla.org/

EDIT: forgot the link

The custom tutorial aspect of this is exactly what I need for a new intern that will be starting soon.

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.

looks just fine in firefox. ain't working in my chrome v44

I'm on Chrome 44 and it seems to work fine. Strange

yep , 7 errors on chrome including

> Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

and some frame related errors.

Sounds like some extensions might be getting in the way - I'm not seeing any errors in Chrome 44 stable using the default extensions.

pretty slick online editor. Has some nice touches.

nice! reminds me on a better processing IDE

As one of the devs who used to work on Processing.js, this is an extremely tempting idea to try to make work =P

too bad it doesn't work.

no safari 9 support makes dan a sad boy.

Reply on news.ycombinator.com